/* =========================================================
   TRU PLUS — MASTER CSS V1–V5
   ANGEL THEME
   Header + Navigation + Hero + Categories + Product Sections
   ========================================================= */


/* =========================================================
   00 — DESIGN TOKENS
   ========================================================= */

:root {
  --tru-bg: #070214;
  --tru-surface: #11091d;
  --tru-surface-2: #171221;

  --tru-purple: #9724F9;
  --tru-pink: #E524FB;
  --tru-purple-2: #6310F0;

  --tru-text: #ffffff;
  --tru-muted: #b9afc8;
  --tru-border: rgba(151, 36, 249, .18);

  --tru-section-gap: 56px;
  --tru-section-gap-mobile: 36px;
}


/* =========================================================
   01 — HEADER
   ========================================================= */

.store-header {
  position: relative;
  z-index: 1000;
}

.store-header #mainnav {
  position: relative;

  background: rgba(7, 2, 20, .92) !important;

  border-bottom: 1px solid var(--tru-border);

  box-shadow:
    0 8px 30px rgba(0, 0, 0, .20) !important;

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.store-header .header-inner {
  background: transparent !important;
}

.store-header .header-container {
  max-width: 1440px;
  margin-inline: auto;
}

.store-header .header-container > .flex {
  min-height: 78px;
  align-items: center;
}


/* ---------- Logo ---------- */

.store-header .navbar-brand {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 5px 12px !important;

  transition:
    transform .25s ease,
    opacity .25s ease;
}

.store-header .navbar-brand:hover {
  transform: translateY(-1px);
}

.store-header .navbar-brand img {
  width: auto !important;
  height: 52px !important;
  max-width: 170px;

  object-fit: contain;
}


/* ---------- Header buttons ---------- */

.store-header .header-btn,
.store-header .mburger {
  transition:
    background-color .22s ease,
    border-color .22s ease,
    transform .22s ease,
    box-shadow .22s ease;
}

.store-header .search-btn.header-btn,
.store-header button.header-btn,
.store-header salla-cart-summary .header-btn {
  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0 !important;

  background: rgba(255, 255, 255, .045) !important;

  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 13px;

  color: #fff !important;
}

.store-header .header-btn i,
.store-header .search-btn i,
.store-header .mburger i,
.store-header salla-cart-summary i {
  color: #fff !important;
}

.store-header .search-btn.header-btn:hover,
.store-header button.header-btn:hover,
.store-header salla-cart-summary .header-btn:hover {
  background: rgba(151, 36, 249, .12) !important;

  border-color: rgba(229, 36, 251, .30);

  transform: translateY(-2px);

  box-shadow:
    0 8px 24px rgba(99, 16, 240, .14);
}


/* ---------- Menu button ---------- */

.store-header .mburger {
  min-height: 42px;

  display: flex;
  align-items: center;

  padding: 0 13px;

  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 13px;

  background: rgba(255, 255, 255, .045);
}

.store-header .mburger:hover {
  background: rgba(151, 36, 249, .12);

  border-color: rgba(151, 36, 249, .30);
}

.store-header .mburger p {
  color: #fff !important;

  font-size: 14px !important;
  font-weight: 600;
}


/* ---------- Language ---------- */

.store-header .lang,
.store-header .language-btn {
  color: var(--tru-muted) !important;
}

.store-header .language-btn {
  font-size: 13px;
}


/* ---------- Cart ---------- */

.store-header salla-cart-summary {
  margin-inline-start: 6px;
}

.store-header .s-cart-summary-wrapper {
  position: relative;
}

.store-header .s-cart-summary-count {
  position: absolute;

  top: -5px;
  right: -5px;

  min-width: 18px;
  height: 18px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0 5px;

  border: 2px solid var(--tru-bg);
  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      var(--tru-purple),
      var(--tru-pink)
    ) !important;

  color: #fff !important;

  font-size: 10px;
  font-weight: 700;

  box-shadow:
    0 4px 12px rgba(229, 36, 251, .25);
}

.store-header .s-cart-summary-content {
  display: none !important;
}


/* ---------- Subtle header glow ---------- */

.store-header #mainnav::before {
  content: "";

  position: absolute;

  width: 360px;
  height: 100px;

  top: -80px;
  left: 50%;

  transform: translateX(-50%);

  background:
    radial-gradient(
      circle,
      rgba(151, 36, 249, .22) 0%,
      rgba(229, 36, 251, .07) 40%,
      transparent 72%
    );

  pointer-events: none;
}


/* ---------- Header desktop ---------- */

@media (min-width: 1024px) {

  .store-header .header-container > .flex {
    min-height: 82px;
  }

  .store-header .navbar-brand img {
    height: 56px !important;
  }

  .store-header .header-btn,
  .store-header .mburger {
    margin-inline: 3px;
  }

}


/* ---------- Header mobile ---------- */

@media (max-width: 767px) {

  .store-header #mainnav {
    background: rgba(7, 2, 20, .96) !important;

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
  }

  .store-header .header-container {
    padding-inline: 12px !important;
  }

  .store-header .header-container > .flex {
    min-height: 64px;
  }

  .store-header .navbar-brand {
    padding: 3px 5px !important;
  }

  .store-header .navbar-brand img {
    height: 42px !important;
    max-width: 125px;
  }

  .store-header .search-btn.header-btn,
  .store-header button.header-btn,
  .store-header salla-cart-summary .header-btn {
    width: 37px;
    height: 37px;

    border-radius: 11px;
  }

  .store-header .mburger {
    width: 37px;
    height: 37px;
    min-height: 37px;

    justify-content: center;

    padding: 0;

    border-radius: 11px;
  }

  .store-header .mburger p {
    display: none !important;
  }

  .store-header .mburger i {
    font-size: 20px !important;
  }

  .store-header .header-btn i,
  .store-header .search-btn i {
    font-size: 15px !important;
  }

}

@media (max-width: 420px) {

  .store-header button[aria-label="user"] {
    display: none !important;
  }

}


/* =========================================================
   02 — NAVIGATION
   ========================================================= */

.store-header .main-menu,
.store-header .main-menu-container,
.store-header .navbar-menu {
  background: var(--tru-bg) !important;
}


/* ---------- Main links ---------- */

.store-header .main-menu a,
.store-header .navbar-menu a {
  position: relative;

  color: rgba(255, 255, 255, .78) !important;

  font-size: 14px;
  font-weight: 500;

  text-decoration: none;

  transition:
    color .2s ease,
    background-color .2s ease,
    transform .2s ease;
}

.store-header .main-menu a:hover,
.store-header .navbar-menu a:hover {
  color: #fff !important;
}


/* ---------- Premium underline ---------- */

.store-header .main-menu > li > a::after,
.store-header .navbar-menu > li > a::after {
  content: "";

  position: absolute;

  right: 50%;
  bottom: -3px;

  width: 0;
  height: 2px;

  border-radius: 50px;

  background:
    linear-gradient(
      90deg,
      var(--tru-purple-2),
      var(--tru-purple),
      var(--tru-pink)
    );

  transform: translateX(50%);

  transition: width .25s ease;
}

.store-header .main-menu > li > a:hover::after,
.store-header .navbar-menu > li > a:hover::after {
  width: 22px;
}


/* ---------- Dropdown ---------- */

.store-header .sub-menu,
.store-header .dropdown-menu,
.store-header .main-menu ul {
  background: rgba(17, 9, 29, .98) !important;

  border: 1px solid rgba(151, 36, 249, .16) !important;
  border-radius: 16px !important;

  padding: 8px !important;

  box-shadow:
    0 18px 50px rgba(0, 0, 0, .40),
    0 0 30px rgba(99, 16, 240, .05);

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.store-header .sub-menu a,
.store-header .dropdown-menu a,
.store-header .main-menu ul a {
  display: flex;
  align-items: center;

  min-height: 42px;

  padding: 9px 12px !important;

  border-radius: 10px;

  color: rgba(255, 255, 255, .76) !important;

  font-size: 13px;

  transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease;
}

.store-header .sub-menu a:hover,
.store-header .dropdown-menu a:hover,
.store-header .main-menu ul a:hover {
  color: #fff !important;

  background:
    linear-gradient(
      90deg,
      rgba(99, 16, 240, .12),
      rgba(151, 36, 249, .08),
      rgba(229, 36, 251, .04)
    ) !important;

  transform: translateX(-2px);
}


/* ---------- Mobile / side menu ---------- */

.main-menu.mobile-menu,
.mobile-menu,
.mm-spn {
  background: var(--tru-bg) !important;
  color: #fff !important;
}

.mobile-menu a,
.mm-spn a {
  color: rgba(255, 255, 255, .84) !important;

  border-color: rgba(255, 255, 255, .06) !important;
}

.mobile-menu a:hover,
.mm-spn a:hover {
  color: #fff !important;

  background: rgba(151, 36, 249, .08) !important;
}

@media (max-width: 767px) {

  .mobile-menu a,
  .mm-spn a {
    min-height: 50px;

    display: flex;
    align-items: center;

    font-size: 14px;
    font-weight: 500;
  }

}


/* ---------- Desktop navigation ---------- */

@media (min-width: 1024px) {

  .store-header .main-menu,
  .store-header .navbar-menu {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 6px;
  }

  .store-header .main-menu > li > a,
  .store-header .navbar-menu > li > a {
    display: flex;
    align-items: center;

    min-height: 44px;

    padding: 0 12px !important;

    border-radius: 10px;
  }

  .store-header .main-menu > li > a:hover,
  .store-header .navbar-menu > li > a:hover {
    background: rgba(255, 255, 255, .035);
  }

  .store-header .main-menu-container {
    border-top: 1px solid rgba(255, 255, 255, .045);
    border-bottom: 1px solid rgba(255, 255, 255, .045);

    box-shadow:
      inset 0 1px rgba(255, 255, 255, .015);
  }

}


/* ---------- Active ---------- */

.store-header .main-menu .active > a,
.store-header .navbar-menu .active > a {
  color: #fff !important;

  background: rgba(151, 36, 249, .08);
}


/* ---------- Arrows ---------- */

.store-header .main-menu svg,
.store-header .navbar-menu svg {
  opacity: .55;

  transition:
    opacity .2s ease,
    transform .2s ease;
}

.store-header .main-menu li:hover svg,
.store-header .navbar-menu li:hover svg {
  opacity: 1;
}


/* ---------- Remove default separators ---------- */

.store-header .main-menu li,
.store-header .navbar-menu li {
  border: 0 !important;
}


/* ---------- Accessibility ---------- */

.store-header a:focus-visible,
.store-header button:focus-visible {
  outline: 2px solid rgba(229, 36, 251, .75);
  outline-offset: 3px;

  border-radius: 8px;
}


/* =========================================================
   03 — HERO & PROMOTIONAL BANNERS
   ========================================================= */

.home-slider,
.main-slider,
.s-slider-block,
.banner-entry,
.banner-section,
.home-banner {
  position: relative;
}


/* ---------- Main hero ---------- */

.home-slider,
.main-slider,
.s-slider-block {
  overflow: hidden;

  border-radius: 22px !important;
}

.home-slider img,
.main-slider img,
.s-slider-block img {
  display: block;

  width: 100%;
  height: auto;

  border-radius: 22px !important;
}

.home-slider,
.main-slider {
  box-shadow:
    0 18px 60px rgba(0, 0, 0, .22),
    0 0 50px rgba(99, 16, 240, .035);
}


/* ---------- Banner cards ---------- */

.banner-entry,
.banner-section a,
.home-banner a {
  position: relative;

  display: block;
  overflow: hidden;

  border-radius: 18px !important;

  background: var(--tru-surface);

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

.banner-entry img,
.banner-section img,
.home-banner img {
  display: block;

  width: 100%;
  height: auto;

  border-radius: inherit !important;

  transition:
    transform .5s cubic-bezier(.2, .8, .2, 1),
    filter .3s ease;
}

@media (hover: hover) {

  .banner-entry:hover,
  .banner-section a:hover,
  .home-banner a:hover {
    transform: translateY(-3px);

    box-shadow:
      0 16px 45px rgba(0, 0, 0, .25),
      0 0 30px rgba(151, 36, 249, .06);
  }

  .banner-entry:hover img,
  .banner-section a:hover img,
  .home-banner a:hover img {
    transform: scale(1.018);
  }

}


/* ---------- Hero pagination ---------- */

.home-slider .swiper-pagination,
.main-slider .swiper-pagination,
.s-slider-block .swiper-pagination {
  bottom: 14px !important;
}

.home-slider .swiper-pagination-bullet,
.main-slider .swiper-pagination-bullet,
.s-slider-block .swiper-pagination-bullet {
  width: 7px;
  height: 7px;

  opacity: .4;

  background: #fff !important;

  transition:
    width .25s ease,
    opacity .25s ease,
    background .25s ease;
}

.home-slider .swiper-pagination-bullet-active,
.main-slider .swiper-pagination-bullet-active,
.s-slider-block .swiper-pagination-bullet-active {
  width: 24px;

  border-radius: 999px;

  opacity: 1;

  background:
    linear-gradient(
      90deg,
      var(--tru-purple),
      var(--tru-pink)
    ) !important;
}


/* ---------- Hero arrows ---------- */

.home-slider .swiper-button-next,
.home-slider .swiper-button-prev,
.main-slider .swiper-button-next,
.main-slider .swiper-button-prev {
  width: 42px !important;
  height: 42px !important;

  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 50%;

  background: rgba(7, 2, 20, .68) !important;

  color: #fff !important;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition:
    background .2s ease,
    transform .2s ease,
    border-color .2s ease;
}

.home-slider .swiper-button-next:hover,
.home-slider .swiper-button-prev:hover,
.main-slider .swiper-button-next:hover,
.main-slider .swiper-button-prev:hover {
  background: rgba(151, 36, 249, .25) !important;

  border-color: rgba(229, 36, 251, .25);

  transform: scale(1.05);
}


/* ---------- Home spacing ---------- */

body.home main > section,
body.home .home-section {
  margin-bottom: 34px;
}


/*
   NOTE:
   main { overflow:hidden } was intentionally removed.
   It could clip sliders, arrows and hover effects.
*/


/* ---------- Hero mobile ---------- */

@media (max-width: 767px) {

  .home-slider,
  .main-slider,
  .s-slider-block {
    border-radius: 15px !important;
  }

  .home-slider img,
  .main-slider img,
  .s-slider-block img {
    border-radius: 15px !important;
  }

  .banner-entry,
  .banner-section a,
  .home-banner a {
    border-radius: 14px !important;
  }

  body.home main > section,
  body.home .home-section {
    margin-bottom: 22px;
  }

  .home-slider .swiper-pagination,
  .main-slider .swiper-pagination {
    bottom: 8px !important;
  }

  .home-slider .swiper-pagination-bullet,
  .main-slider .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
  }

  .home-slider .swiper-pagination-bullet-active,
  .main-slider .swiper-pagination-bullet-active {
    width: 18px;
  }

  .home-slider .swiper-button-next,
  .home-slider .swiper-button-prev,
  .main-slider .swiper-button-next,
  .main-slider .swiper-button-prev {
    display: none !important;
  }

}

@media (min-width: 1440px) {

  .home-slider,
  .main-slider,
  .home-slider img,
  .main-slider img {
    border-radius: 24px !important;
  }

}


/* =========================================================
   04 — CATEGORIES
   ========================================================= */

.home-categories,
.categories-section,
.s-block--categories,
.category-slider {
  position: relative;
}


/* ---------- Category section heading ---------- */

.home-categories .section-title,
.categories-section .section-title,
.s-block--categories .section-title {
  margin-bottom: 22px;

  text-align: center;
}

.home-categories .section-title h2,
.categories-section .section-title h2,
.s-block--categories .section-title h2 {
  margin: 0;

  color: #fff !important;

  font-size: clamp(22px, 2vw, 30px);
  font-weight: 700;

  line-height: 1.35;
  letter-spacing: -.3px;
}

.home-categories .section-title p,
.categories-section .section-title p,
.s-block--categories .section-title p {
  margin: 7px auto 0;

  color: rgba(255, 255, 255, .52) !important;

  font-size: 13px;
  line-height: 1.7;
}


/* ---------- Category card ---------- */

.home-categories a,
.categories-section a,
.s-block--categories a,
.category-slider a {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  min-height: 155px;

  padding: 18px 14px;

  border: 1px solid rgba(255, 255, 255, .065);
  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(23, 18, 33, .92),
      rgba(11, 5, 24, .96)
    );

  text-align: center;
  text-decoration: none !important;

  box-shadow:
    0 10px 35px rgba(0, 0, 0, .12);

  transition:
    transform .28s cubic-bezier(.2, .8, .2, 1),
    border-color .28s ease,
    box-shadow .28s ease,
    background .28s ease;
}


/* ---------- Category glow ---------- */

.home-categories a::before,
.categories-section a::before,
.s-block--categories a::before,
.category-slider a::before {
  content: "";

  position: absolute;

  width: 130px;
  height: 130px;

  top: -75px;
  right: 50%;

  transform: translateX(50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(151, 36, 249, .14) 0%,
      rgba(229, 36, 251, .04) 45%,
      transparent 72%
    );

  opacity: .7;

  pointer-events: none;

  transition:
    opacity .3s ease,
    transform .3s ease;
}


/* ---------- Category image ---------- */

.home-categories img,
.categories-section img,
.s-block--categories img,
.category-slider img {
  position: relative;
  z-index: 2;

  width: 72px !important;
  height: 72px !important;

  margin-bottom: 13px;

  object-fit: contain;

  transition:
    transform .35s cubic-bezier(.2, .8, .2, 1);
}


/* ---------- Category title ---------- */

.home-categories h3,
.home-categories h4,
.home-categories span,
.categories-section h3,
.categories-section h4,
.s-block--categories h3,
.s-block--categories h4,
.category-slider h3,
.category-slider h4 {
  position: relative;
  z-index: 2;

  color: rgba(255, 255, 255, .90) !important;

  font-size: 14px;
  font-weight: 600;

  line-height: 1.5;

  transition: color .25s ease;
}


/* ---------- Category hover ---------- */

@media (hover: hover) {

  .home-categories a:hover,
  .categories-section a:hover,
  .s-block--categories a:hover,
  .category-slider a:hover {
    transform: translateY(-5px);

    border-color: rgba(151, 36, 249, .30);

    background:
      linear-gradient(
        145deg,
        rgba(27, 18, 42, .96),
        rgba(12, 5, 27, .98)
      );

    box-shadow:
      0 18px 45px rgba(0, 0, 0, .20),
      0 0 30px rgba(99, 16, 240, .07);
  }

  .home-categories a:hover::before,
  .categories-section a:hover::before,
  .s-block--categories a:hover::before,
  .category-slider a:hover::before {
    opacity: 1;

    transform:
      translateX(50%)
      scale(1.25);
  }

  .home-categories a:hover img,
  .categories-section a:hover img,
  .s-block--categories a:hover img,
  .category-slider a:hover img {
    transform:
      translateY(-3px)
      scale(1.05);
  }

  .home-categories a:hover h3,
  .home-categories a:hover h4,
  .categories-section a:hover h3,
  .categories-section a:hover h4,
  .s-block--categories a:hover h3,
  .s-block--categories a:hover h4 {
    color: #fff !important;
  }

}


/* ---------- Category desktop grid ---------- */

@media (min-width: 1200px) {

  .home-categories .categories-grid,
  .categories-section .categories-grid,
  .s-block--categories .categories-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 14px;
  }

}


/* ---------- Category tablet grid ---------- */

@media (min-width: 768px) and (max-width: 1199px) {

  .home-categories .categories-grid,
  .categories-section .categories-grid,
  .s-block--categories .categories-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 12px;
  }

}


/* ---------- Category slider arrows ---------- */

.category-slider .swiper-button-next,
.category-slider .swiper-button-prev,
.s-block--categories .swiper-button-next,
.s-block--categories .swiper-button-prev {
  width: 38px !important;
  height: 38px !important;

  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 50%;

  background: rgba(17, 9, 29, .90) !important;

  color: #fff !important;

  box-shadow:
    0 8px 25px rgba(0, 0, 0, .20);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}


/* ---------- Category cleanup ---------- */

.home-categories a *,
.categories-section a *,
.s-block--categories a *,
.category-slider a * {
  text-decoration: none !important;
}

.home-categories,
.categories-section,
.s-block--categories {
  margin-top: 8px;
  margin-bottom: 42px;
}


/* ---------- Categories mobile ---------- */

@media (max-width: 767px) {

  .home-categories,
  .categories-section,
  .s-block--categories {
    overflow: hidden;

    margin-bottom: 28px;
  }

  .home-categories .section-title,
  .categories-section .section-title,
  .s-block--categories .section-title {
    margin-bottom: 16px;

    padding-inline: 4px;
  }

  .home-categories .section-title h2,
  .categories-section .section-title h2,
  .s-block--categories .section-title h2 {
    font-size: 21px;
  }

  .home-categories a,
  .categories-section a,
  .s-block--categories a,
  .category-slider a {
    min-height: 128px;

    padding: 15px 10px;

    border-radius: 15px;
  }

  .home-categories img,
  .categories-section img,
  .s-block--categories img,
  .category-slider img {
    width: 58px !important;
    height: 58px !important;

    margin-bottom: 9px;
  }

  .home-categories h3,
  .home-categories h4,
  .categories-section h3,
  .categories-section h4,
  .s-block--categories h3,
  .s-block--categories h4,
  .category-slider h3,
  .category-slider h4 {
    font-size: 12.5px;
  }

  .category-slider .swiper-slide,
  .s-block--categories .swiper-slide {
    width: 135px !important;
  }

  .category-slider .swiper-button-next,
  .category-slider .swiper-button-prev,
  .s-block--categories .swiper-button-next,
  .s-block--categories .swiper-button-prev {
    display: none !important;
  }

}


/* =========================================================
   05 — PRODUCT SECTIONS
   ANGEL PRODUCT CARDS ARE NOT RESTYLED
   ========================================================= */

body.home .s-block--products-slider,
body.home .s-block--featured-products,
body.home .products-slider,
body.home .featured-products,
body.home section:has(salla-products-slider) {
  position: relative;

  margin-top: 0;
  margin-bottom: var(--tru-section-gap);
}


/* ---------- Product section header ---------- */

body.home .s-block--products-slider .s-block__title,
body.home .s-block--featured-products .s-block__title,
body.home .products-slider .section-title,
body.home .featured-products .section-title {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 22px;
}


/* ---------- Product section title ---------- */

body.home .s-block--products-slider .s-block__title h2,
body.home .s-block--featured-products .s-block__title h2,
body.home .products-slider .section-title h2,
body.home .featured-products .section-title h2 {
  position: relative;

  margin: 0;

  color: #fff !important;

  font-size: clamp(21px, 2vw, 28px);
  font-weight: 700;

  line-height: 1.35;
  letter-spacing: -.35px;
}

body.home .s-block--products-slider .s-block__title h2::before,
body.home .s-block--featured-products .s-block__title h2::before,
body.home .products-slider .section-title h2::before,
body.home .featured-products .section-title h2::before {
  content: "";

  display: inline-block;

  width: 4px;
  height: 22px;

  margin-left: 9px;

  vertical-align: -4px;

  border-radius: 999px;

  background:
    linear-gradient(
      180deg,
      var(--tru-pink),
      var(--tru-purple),
      var(--tru-purple-2)
    );
}


/* ---------- Product section description ---------- */

body.home .s-block--products-slider .s-block__title p,
body.home .s-block--featured-products .s-block__title p,
body.home .products-slider .section-title p,
body.home .featured-products .section-title p {
  max-width: 650px;

  margin: 6px 0 0;

  color: rgba(255, 255, 255, .48) !important;

  font-size: 13px;
  line-height: 1.7;
}


/* ---------- View all ---------- */

body.home .s-block--products-slider .s-block__title a,
body.home .s-block--featured-products .s-block__title a,
body.home .products-slider .section-title > a,
body.home .featured-products .section-title > a {
  flex-shrink: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  min-height: 38px;

  padding: 0 14px;

  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 11px;

  background: rgba(255, 255, 255, .035);

  color: rgba(255, 255, 255, .72) !important;

  font-size: 12.5px;
  font-weight: 600;

  text-decoration: none !important;

  transition:
    color .22s ease,
    background .22s ease,
    border-color .22s ease,
    transform .22s ease;
}

@media (hover: hover) {

  body.home .s-block--products-slider .s-block__title a:hover,
  body.home .s-block--featured-products .s-block__title a:hover,
  body.home .products-slider .section-title > a:hover,
  body.home .featured-products .section-title > a:hover {
    color: #fff !important;

    background: rgba(151, 36, 249, .10);

    border-color: rgba(151, 36, 249, .25);

    transform: translateX(-2px);
  }

}


/* ---------- Product slider ---------- */

body.home salla-products-slider {
  position: relative;

  display: block;
}

body.home salla-products-slider .swiper {
  overflow: visible;
}


/* ---------- Product slider arrows ---------- */

body.home salla-products-slider .swiper-button-next,
body.home salla-products-slider .swiper-button-prev,
body.home .products-slider .swiper-button-next,
body.home .products-slider .swiper-button-prev {
  width: 40px !important;
  height: 40px !important;

  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 50%;

  background: rgba(17, 9, 29, .94) !important;

  color: #fff !important;

  box-shadow:
    0 10px 30px rgba(0, 0, 0, .25);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

@media (hover: hover) {

  body.home salla-products-slider .swiper-button-next:hover,
  body.home salla-products-slider .swiper-button-prev:hover,
  body.home .products-slider .swiper-button-next:hover,
  body.home .products-slider .swiper-button-prev:hover {
    background: rgba(151, 36, 249, .20) !important;

    border-color: rgba(229, 36, 251, .22);

    transform: scale(1.06);
  }

}


/* ---------- Product section separator ---------- */

body.home .s-block--products-slider::after,
body.home .s-block--featured-products::after {
  content: "";

  position: absolute;

  right: 50%;
  bottom: calc(var(--tru-section-gap) / -2);

  transform: translateX(50%);

  width: min(1180px, 82%);
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, .045),
      transparent
    );
}


/* ---------- First product section subtle glow ---------- */

body.home .s-block--products-slider:first-of-type::before {
  content: "";

  position: absolute;
  z-index: -1;

  top: -50px;
  right: 50%;

  transform: translateX(50%);

  width: 70%;
  height: 180px;

  background:
    radial-gradient(
      ellipse,
      rgba(151, 36, 249, .045),
      transparent 70%
    );

  pointer-events: none;
}


/* ---------- Product grid spacing only ---------- */

body.home .products-grid {
  gap: 16px;
}


/* ---------- Products mobile ---------- */

@media (max-width: 767px) {

  body.home .s-block--products-slider,
  body.home .s-block--featured-products,
  body.home .products-slider,
  body.home .featured-products,
  body.home section:has(salla-products-slider) {
    margin-bottom: var(--tru-section-gap-mobile);
  }

  body.home .s-block--products-slider .s-block__title,
  body.home .s-block--featured-products .s-block__title,
  body.home .products-slider .section-title,
  body.home .featured-products .section-title {
    align-items: center;

    gap: 10px;

    margin-bottom: 15px;
  }

  body.home .s-block--products-slider .s-block__title h2,
  body.home .s-block--featured-products .s-block__title h2,
  body.home .products-slider .section-title h2,
  body.home .featured-products .section-title h2 {
    font-size: 19px;
  }

  body.home .s-block--products-slider .s-block__title h2::before,
  body.home .s-block--featured-products .s-block__title h2::before,
  body.home .products-slider .section-title h2::before,
  body.home .featured-products .section-title h2::before {
    width: 3px;
    height: 18px;

    margin-left: 7px;
  }

  body.home .s-block--products-slider .s-block__title p,
  body.home .s-block--featured-products .s-block__title p,
  body.home .products-slider .section-title p,
  body.home .featured-products .section-title p {
    display: none;
  }

  body.home .s-block--products-slider .s-block__title a,
  body.home .s-block--featured-products .s-block__title a,
  body.home .products-slider .section-title > a,
  body.home .featured-products .section-title > a {
    min-height: 32px;

    padding: 0 10px;

    border-radius: 9px;

    font-size: 11px;
  }

  body.home salla-products-slider .swiper-button-next,
  body.home salla-products-slider .swiper-button-prev,
  body.home .products-slider .swiper-button-next,
  body.home .products-slider .swiper-button-prev {
    display: none !important;
  }

  body.home .s-block--products-slider::after,
  body.home .s-block--featured-products::after {
    bottom:
      calc(var(--tru-section-gap-mobile) / -2);

    width: 92%;
  }

  body.home .products-grid {
    gap: 10px;
  }

}


/* =========================================================
   PRODUCT CARD PROTECTION
   ========================================================= */

/*
   IMPORTANT:

   This master stylesheet intentionally does NOT restyle:

   .product-entry
   .product-card
   .product-card-content
   .product-image
   .product-title
   .product-price
   .product-add
   .quick-view

   ANGEL remains responsible for the current TRU PLUS
   product-card design.
*/


/* =========================================================
   END — TRU PLUS MASTER V1–V5
   ========================================================= */