/* ===== CULTCHEATS — FINAL (ANIMATED SIGIL + CENTER HERO + SMOOTH BUTTON) ===== */

:root{
  --bg:#07070a;
  --text:#fafafa;
  --muted: rgba(244,244,245,.72);
  --muted2: rgba(161,161,170,.82);
  --border: rgba(39,39,42,.70);
  --redHint: rgba(255,70,70,.06);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

/* background depth */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-6;
  pointer-events:none;
  background:
    radial-gradient(900px 650px at 15% -10%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(900px 650px at 110% 0%, rgba(255,255,255,.06), transparent 55%),
    radial-gradient(900px 650px at 60% 120%, rgba(255,255,255,.04), transparent 60%),
    radial-gradient(900px 560px at 86% 22%, var(--redHint), transparent 72%),
    var(--bg);
}

/* disable any bubble/after layer */
body::after{ content:none !important; }

/* ===== SIGIL ANIMATIONS ===== */
@keyframes sigilFloat{
  0%   { transform: translate3d(0,0,0); opacity:.18; }
  50%  { transform: translate3d(0,-6px,0); opacity:.24; }
  100% { transform: translate3d(0,0,0); opacity:.18; }
}
@keyframes sigilRotate{
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ===== SIGIL LAYER ===== */
.cult-bg{
  position: fixed;
  inset: 0;
  z-index: -4;
  pointer-events: none;

  display:block;
  opacity:1;

  background-repeat: no-repeat;
  background-position: 50% 38%;
  background-size: 980px 980px;

  /* circle + star + outer glyphs (embedded svg) */
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%221000%22%20height%3D%221000%22%20viewBox%3D%220%200%201000%201000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%3Cdefs%3E%0A%20%20%3Cpath%20id%3D%22ringOuter%22%20d%3D%22M500%2C168%20a332%2C332%200%201%2C1%200%2C664%20a332%2C332%200%201%2C1%200%2C-664%22%2F%3E%0A%3C%2Fdefs%3E%0A%3Cg%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.25%22%3E%0A%20%20%3Ccircle%20cx%3D%22500%22%20cy%3D%22500%22%20r%3D%22300%22%20stroke-opacity%3D%220.34%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M500%20220%20L670.458%20734.615%20L224.194%20410.385%20L775.806%20410.385%20L329.542%20734.615%20Z%22%20stroke-opacity%3D%220.30%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%20font-family%3D%22Times%20New%20Roman%2CGeorgia%2Cserif%22%20font-size%3D%2228%22%20fill%3D%22white%22%20fill-opacity%3D%220.20%22%20letter-spacing%3D%224%22%3E%0A%20%20%3Ctext%20style%3D%22font-variant-emoji%3A%20text%3B%22%3E%0A%20%20%20%20%3CtextPath%20xlink%3Ahref%3D%22%23ringOuter%22%20href%3D%22%23ringOuter%22%20startOffset%3D%2250%25%22%20text-anchor%3D%22middle%22%20lengthAdjust%3D%22spacingAndGlyphs%22%20textLength%3D%222090%22%3E%0A%20%20%20%20%20%20%E2%98%89%EF%B8%8E%20%E2%98%BE%EF%B8%8E%20%E2%98%BD%EF%B8%8E%20%E2%99%80%EF%B8%8E%20%E2%99%82%EF%B8%8E%20%E2%99%83%EF%B8%8E%20%E2%99%84%EF%B8%8E%20%E2%99%85%EF%B8%8E%20%E2%99%86%EF%B8%8E%20%E2%99%87%EF%B8%8E%20%E2%99%88%EF%B8%8E%20%E2%99%89%EF%B8%8E%20%E2%99%8A%EF%B8%8E%20%E2%99%8B%EF%B8%8E%20%E2%98%BF%EF%B8%8E%20%E2%98%89%EF%B8%8E%20%E2%98%BE%EF%B8%8E%20%E2%98%BD%EF%B8%8E%20%E2%99%80%EF%B8%8E%20%E2%99%82%EF%B8%8E%20%E2%99%83%EF%B8%8E%20%E2%99%84%EF%B8%8E%20%E2%99%85%EF%B8%8E%20%E2%99%86%EF%B8%8E%20%E2%99%87%EF%B8%8E%20%E2%99%88%EF%B8%8E%20%E2%99%89%EF%B8%8E%20%E2%99%8A%EF%B8%8E%20%E2%99%8B%EF%B8%8E%20%E2%98%BF%EF%B8%8E%20%E2%98%89%EF%B8%8E%20%E2%98%BE%EF%B8%8E%20%E2%98%BD%EF%B8%8E%20%E2%99%80%EF%B8%8E%20%E2%99%82%EF%B8%8E%20%E2%99%83%EF%B8%8E%20%E2%99%84%EF%B8%8E%20%E2%99%85%EF%B8%8E%20%E2%99%86%EF%B8%8E%20%E2%99%87%EF%B8%8E%20%E2%99%88%EF%B8%8E%20%E2%99%89%EF%B8%8E%20%E2%99%8A%EF%B8%8E%20%E2%99%8B%EF%B8%8E%20%E2%98%BF%EF%B8%8E%0A%20%20%20%20%3C%2FtextPath%3E%0A%20%20%3C%2Ftext%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E");

  /* animations are HERE */
  animation:
    sigilFloat 55s ease-in-out infinite,
    sigilRotate 380s linear infinite;

  transform-origin: 50% 50%;
  will-change: transform, opacity;

  filter: drop-shadow(0 0 14px rgba(255,70,70,.05));
}

/* optional shop background behind everything */
.bg-image{
  position: fixed !important;
  inset: 0 !important;
  z-index: -7 !important;
  opacity: .06 !important;
  filter: blur(2px) saturate(.8) !important;
}

/* ===== HERO PERFECT CENTERING ===== */
.hero{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  text-align: center;
  background: none !important;
}
.hero .container{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 24px;
}
.hero .content{
  margin: 0 auto;
  max-width: 760px;
}

/* typography */
.h1{
  margin: 0;
  font-size: 48px;
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 700;
}
.sub{
  margin-top: 14px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

/* buttons */
.actions{
  margin-top: 22px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(9,9,11,.22);
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
}

/* premium smooth hover */
.btn--primary{
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  color: #fff;
  position: relative;
  overflow: hidden;

  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.55s ease,
    opacity 0.35s ease;
}
.btn--primary:hover{
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.04);
  box-shadow: 0 0 22px rgba(255,255,255,0.06);
  transform: translateY(-2px);
}
.btn--primary::after{
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.18), transparent 60%);
  opacity: 0;
  transition: opacity 0.7s ease;
}
.btn--primary:hover::after{
  opacity: 1;
}
/* ===== MICRO PARALLAX BUTTON ===== */

.magnetic-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

.magnetic-btn span{
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
}

/* лёгкий эффект глубины */
.magnetic-btn:hover span{
  transform: translateY(-1px);
}
/* ===== Rotate ONLY outer symbols (keep star + circle static) ===== */

/* 1) ОТКЛЮЧАЕМ общую прокрутку всего слоя (оставляем только float) */
.cult-bg{
  animation: sigilFloat 55s ease-in-out infinite !important;
  background-image: none !important; /* чтобы не крутилась единая картинка */
}

/* 2) Два слоя поверх: статичный (звезда+круг) и вращающийся (символы) */
.cult-bg::before,
.cult-bg::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background-repeat: no-repeat;
  background-position: 50% 38%;
  background-size: 980px 980px;
}

/* 3) СТАТИКА: круг + звезда (никакого rotate) */
.cult-bg::before{
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%221000%22%20height%3D%221000%22%20viewBox%3D%220%200%201000%201000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cg%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.25%22%3E%0A%20%20%3Ccircle%20cx%3D%22500%22%20cy%3D%22500%22%20r%3D%22300%22%20stroke-opacity%3D%220.34%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M500%20220%20L670.458%20734.615%20L224.194%20410.385%20L775.806%20410.385%20L329.542%20734.615%20Z%22%20stroke-opacity%3D%220.30%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E");
}

/* 4) ВРАЩЕНИЕ: только внешние символы */
.cult-bg::after{
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%221000%22%20height%3D%221000%22%20viewBox%3D%220%200%201000%201000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%3Cdefs%3E%0A%20%20%3Cpath%20id%3D%22ringOuter%22%20d%3D%22M500%2C168%20a332%2C332%200%201%2C1%200%2C664%20a332%2C332%200%201%2C1%200%2C-664%22%2F%3E%0A%3C%2Fdefs%3E%0A%3Cg%20font-family%3D%22Times%20New%20Roman%2CGeorgia%2Cserif%22%20font-size%3D%2228%22%20fill%3D%22white%22%20fill-opacity%3D%220.20%22%20letter-spacing%3D%224%22%3E%0A%20%20%3Ctext%20style%3D%22font-variant-emoji%3A%20text%3B%22%3E%0A%20%20%20%20%3CtextPath%20xlink%3Ahref%3D%22%23ringOuter%22%20href%3D%22%23ringOuter%22%20startOffset%3D%2250%25%22%20text-anchor%3D%22middle%22%20lengthAdjust%3D%22spacingAndGlyphs%22%20textLength%3D%222090%22%3E%0A%20%20%20%20%20%20%E2%98%89%EF%B8%8E%20%E2%98%BE%EF%B8%8E%20%E2%98%BD%EF%B8%8E%20%E2%99%80%EF%B8%8E%20%E2%99%82%EF%B8%8E%20%E2%99%83%EF%B8%8E%20%E2%99%84%EF%B8%8E%20%E2%99%85%EF%B8%8E%20%E2%99%86%EF%B8%8E%20%E2%99%87%EF%B8%8E%20%E2%99%88%EF%B8%8E%20%E2%99%89%EF%B8%8E%20%E2%99%8A%EF%B8%8E%20%E2%99%8B%EF%B8%8E%20%E2%98%BF%EF%B8%8E%20%E2%98%89%EF%B8%8E%20%E2%98%BE%EF%B8%8E%20%E2%98%BD%EF%B8%8E%20%E2%99%80%EF%B8%8E%20%E2%99%82%EF%B8%8E%20%E2%99%83%EF%B8%8E%20%E2%99%84%EF%B8%8E%20%E2%99%85%EF%B8%8E%20%E2%99%86%EF%B8%8E%20%E2%99%87%EF%B8%8E%20%E2%99%88%EF%B8%8E%20%E2%99%89%EF%B8%8E%20%E2%99%8A%EF%B8%8E%20%E2%99%8B%EF%B8%8E%20%E2%98%BF%EF%B8%8E%20%E2%98%89%EF%B8%8E%20%E2%98%BE%EF%B8%8E%20%E2%98%BD%EF%B8%8E%20%E2%99%80%EF%B8%8E%20%E2%99%82%EF%B8%8E%20%E2%99%83%EF%B8%8E%20%E2%99%84%EF%B8%8E%20%E2%99%85%EF%B8%8E%20%E2%99%86%EF%B8%8E%20%E2%99%87%EF%B8%8E%20%E2%99%88%EF%B8%8E%20%E2%99%89%EF%B8%8E%20%E2%99%8A%EF%B8%8E%20%E2%99%8B%EF%B8%8E%20%E2%98%BF%EF%B8%8E%0A%20%20%20%20%3C%2FtextPath%3E%0A%20%20%3C%2Ftext%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E");

  transform-origin: 50% 50%;
  animation: glyphOnlyRotate 380s linear infinite; /* та же скорость как была у sigilRotate */
  will-change: transform;
}

@keyframes glyphOnlyRotate{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
/* ===== REVIEWS MARQUEE (SCALED / CLEAN) ===== */

.reviews-marquee{
  position: relative;
  padding: 110px 0;
  overflow: hidden;
}

.reviews-title{
  text-align: center;
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 10px;
}

.reviews-subtitle{
  text-align: center;
  opacity: 0.55;
  margin-bottom: 56px;
}

/* строка: добавили вертикальный padding, чтобы hover НЕ обрезался */
.reviews-row{
  position: relative;
  overflow: hidden;
  padding: 10px 0;          /* <-- важно */
  margin-bottom: 26px;
}

/* мягкая маска по краям (как у valyn) */
.reviews-row::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,0.95) 0%,
      rgba(0,0,0,0.00) 10%,
      rgba(0,0,0,0.00) 90%,
      rgba(0,0,0,0.95) 100%);
}

/* трек */
.reviews-track{
  display:flex;
  gap: 20px;
  width: max-content;
  will-change: transform;
}

/* скорости: очень медленно */
.reviews-left{  animation: reviewsLeft 220s linear infinite; }
.reviews-right{ animation: reviewsRight 240s linear infinite; }

@keyframes reviewsLeft{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

@keyframes reviewsRight{
  from{ transform: translateX(-50%); }
  to{ transform: translateX(0); }
}

/* карточка */
.review-card{
  min-width: 320px;
  max-width: 320px;
  padding: 18px 20px;
  border-radius: 12px;

  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(6px);

  transition: transform 0.55s cubic-bezier(0.22,1,0.36,1),
              border-color 0.55s cubic-bezier(0.22,1,0.36,1);
}

/* hover: мягко и без “резкости” */
.review-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.12);
}

/* верх */
.review-top{
  font-size: 13px;
  opacity: 0.62;
  margin-bottom: 8px;
}

.review-name{ font-weight: 500; }
.review-dot{ margin: 0 6px; }
.review-game{ opacity: 0.75; }

/* текст */
.review-text{
  font-size: 14px;
  line-height: 1.5;
}

/* accessibility */
@media (prefers-reduced-motion: reduce){
  .reviews-left, .reviews-right{ animation: none !important; }
}


/* =======================================================================
   CULTCHEATS PATCH: FIX REVIEWS MARQUEE NOT MOVING
   - Forces correct keyframes even if some inline builder sets animation-name
   - Keeps your existing "working version" styles
   ======================================================================= */

.reviews-marquee .reviews-track{
  will-change: transform;
  animation-play-state: running !important;
}

.reviews-marquee .reviews-track.reviews-left{
  animation-name: reviewsLeft !important;
  animation-duration: 580s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  animation-direction: normal !important;
}

.reviews-marquee .reviews-track.reviews-right{
  animation-name: reviewsRight !important;
  animation-duration: 600s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  animation-direction: normal !important;
}

/* on hover: pause the whole row smoothly (optional, feels premium) */
.reviews-marquee .reviews-row:hover .reviews-track{
  animation-play-state: paused !important;
}
/* =========================
   NAVBAR – premium dark polish
   (safe overrides, no markup change)
========================= */

nav[data-component-id="navbar"].navbar{
  position: sticky;
  top: 0;
  z-index: 1000;

  /* glass */
  background: rgba(7, 7, 10, .62);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);

  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* subtle top glow like valyn */
nav[data-component-id="navbar"].navbar::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 120%;
  pointer-events:none;
  background: radial-gradient(800px 140px at 50% 0%, rgba(255,255,255,.08), transparent 60%);
  opacity: .75;
}

nav[data-component-id="navbar"] .container{
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Brand */
nav[data-component-id="navbar"] .navbar-brand{
  display:flex;
  align-items:center;
  gap: 10px;
  letter-spacing: .2px;
}

nav[data-component-id="navbar"] .navbar-brand span{
  color: rgba(255,255,255,.92);
}

/* Links */
nav[data-component-id="navbar"] .nav-link{
  position: relative;
  color: rgba(255,255,255,.70) !important;
  font-weight: 500;
  letter-spacing: .2px;
  transition: color 420ms cubic-bezier(.16,1,.3,1);
}

nav[data-component-id="navbar"] .nav-link:hover{
  color: rgba(255,255,255,.92) !important;
}

/* thin underline on hover (no “kidz” glow) */
nav[data-component-id="navbar"] .nav-link::after{
  content:"";
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: 6px;
  height: 1px;
  background: rgba(255,255,255,.16);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform 520ms cubic-bezier(.16,1,.3,1);
}

nav[data-component-id="navbar"] .nav-link:hover::after{
  transform: scaleX(1);
}

/* Right side buttons (Login / Cart) */
nav[data-component-id="navbar"] .btn.btn-outline-primary{
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.03) !important;
  color: rgba(255,255,255,.86) !important;

  border-radius: 14px;
  padding: 10px 14px;
  line-height: 1;
  min-height: 40px;

  transition:
    transform 220ms cubic-bezier(.16,1,.3,1),
    background 420ms cubic-bezier(.16,1,.3,1),
    border-color 420ms cubic-bezier(.16,1,.3,1),
    box-shadow 420ms cubic-bezier(.16,1,.3,1),
    filter 420ms cubic-bezier(.16,1,.3,1);
}

nav[data-component-id="navbar"] .btn.btn-outline-primary:hover{
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  transform: translateY(-1px);
  filter: brightness(1.02);
}

nav[data-component-id="navbar"] .btn.btn-outline-primary:active{
  transform: translateY(0px) scale(.99);
}

/* Make icon-only cart look tighter */
nav[data-component-id="navbar"] .nav-item.cart .btn{
  padding-left: 12px;
  padding-right: 12px;
}

/* Currency selector: match the same “pill glass” language */
nav[data-component-id="navbar"] .currency-selector select{
  appearance: none;
  -webkit-appearance: none;

  border: 1px solid rgba(120, 140, 255, .45);
  background: rgba(60, 80, 255, .06);
  color: rgba(255,255,255,.90);

  border-radius: 14px;
  padding: 10px 40px 10px 14px;
  min-height: 40px;

  transition:
    transform 220ms cubic-bezier(.16,1,.3,1),
    background 420ms cubic-bezier(.16,1,.3,1),
    border-color 420ms cubic-bezier(.16,1,.3,1);
}

/* caret */
nav[data-component-id="navbar"] .currency-selector{
  position: relative;
  display: flex;
  align-items: center;
}

nav[data-component-id="navbar"] .currency-selector::after{
  content:"";
  position:absolute;
  right: 14px;
  width: 10px;
  height: 10px;
  pointer-events:none;
  opacity: .75;
  transform: translateY(1px) rotate(45deg);
  border-right: 1px solid rgba(255,255,255,.55);
  border-bottom: 1px solid rgba(255,255,255,.55);
}

nav[data-component-id="navbar"] .currency-selector select:hover{
  background: rgba(60, 80, 255, .09);
  border-color: rgba(120, 140, 255, .65);
  transform: translateY(-1px);
}

/* Slightly more “air” between left links (optional) */
nav[data-component-id="navbar"] .navbar-nav.me-auto{
  gap: 10px;
}

/* Ensure navbar stays crisp on top of effects */
nav[data-component-id="navbar"].navbar,
nav[data-component-id="navbar"].navbar *{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Remove extra currency caret */
nav[data-component-id="navbar"] .currency-selector::after{
  display: none !important;
}
/* =========================
   Currency selector — Premium (Choices.js)
========================= */

nav[data-component-id="navbar"] .currency-selector{
  display:flex;
  align-items:center;
}

/* Base control */
nav[data-component-id="navbar"] .currency-selector .choices{
  margin: 0;
  font-size: 13px;
  letter-spacing: .2px;
}

nav[data-component-id="navbar"] .currency-selector .choices__inner{
  min-height: 40px;
  padding: 8px 38px 8px 12px;
  border-radius: 14px;

  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);

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

  transition:
    transform 220ms cubic-bezier(.16,1,.3,1),
    background 420ms cubic-bezier(.16,1,.3,1),
    border-color 420ms cubic-bezier(.16,1,.3,1),
    box-shadow 420ms cubic-bezier(.16,1,.3,1);
}

nav[data-component-id="navbar"] .currency-selector .choices:hover .choices__inner{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  transform: translateY(-1px);
}

/* Remove weird extra caret if any + style default caret */
nav[data-component-id="navbar"] .currency-selector::after{
  display:none !important;
}

nav[data-component-id="navbar"] .currency-selector .choices[data-type*="select-one"]::after{
  right: 14px;
  border-color: rgba(255,255,255,.55) transparent transparent transparent;
  margin-top: -2px;
  opacity: .75;
}

nav[data-component-id="navbar"] .currency-selector .choices[data-type*="select-one"].is-open::after{
  border-color: transparent transparent rgba(255,255,255,.55) transparent;
  margin-top: -6px;
}

/* Selected item layout */
nav[data-component-id="navbar"] .currency-selector .choices__item--selectable{
  color: rgba(255,255,255,.90);
  padding-right: 0;
}

/* Dropdown */
nav[data-component-id="navbar"] .currency-selector .choices__list--dropdown,
nav[data-component-id="navbar"] .currency-selector .choices__list[aria-expanded]{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(12,12,14,.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);

  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  overflow: hidden;
  margin-top: 10px;
}

nav[data-component-id="navbar"] .currency-selector .choices__list--dropdown .choices__item--choice{
  padding: 10px 12px 10px 40px; /* left space for icon */
  color: rgba(255,255,255,.86);
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background 260ms cubic-bezier(.16,1,.3,1), color 260ms cubic-bezier(.16,1,.3,1);
}

nav[data-component-id="navbar"] .currency-selector .choices__list--dropdown .choices__item--choice:last-child{
  border-bottom: 0;
}

nav[data-component-id="navbar"] .currency-selector .choices__list--dropdown .choices__item--choice.is-highlighted{
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.95);
}

/* “Icon dot” for all currencies (default) */
nav[data-component-id="navbar"] .currency-selector .choices__list--dropdown .choices__item--choice::before{
  content:"";
  position:absolute;
  left: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: rgba(255,255,255,.28);
}

/* Icons for popular currencies (safe, always supported) */
nav[data-component-id="navbar"] .currency-selector .choices__list--dropdown .choices__item--choice[data-value="USD"]::before{ content:"$"; width:auto; height:auto; background: none; color: rgba(255,255,255,.85); font-weight: 600; }
nav[data-component-id="navbar"] .currency-selector .choices__list--dropdown .choices__item--choice[data-value="EUR"]::before{ content:"€"; width:auto; height:auto; background: none; color: rgba(255,255,255,.85); font-weight: 600; }
nav[data-component-id="navbar"] .currency-selector .choices__list--dropdown .choices__item--choice[data-value="GBP"]::before{ content:"£"; width:auto; height:auto; background: none; color: rgba(255,255,255,.85); font-weight: 600; }
nav[data-component-id="navbar"] .currency-selector .choices__list--dropdown .choices__item--choice[data-value="JPY"]::before{ content:"¥"; width:auto; height:auto; background: none; color: rgba(255,255,255,.85); font-weight: 600; }
nav[data-component-id="navbar"] .currency-selector .choices__list--dropdown .choices__item--choice[data-value="CAD"]::before{ content:"C$"; width:auto; height:auto; background: none; color: rgba(255,255,255,.85); font-weight: 600; }
nav[data-component-id="navbar"] .currency-selector .choices__list--dropdown .choices__item--choice[data-value="AUD"]::before{ content:"A$"; width:auto; height:auto; background: none; color: rgba(255,255,255,.85); font-weight: 600; }

/* Selected value icon (same approach) */
nav[data-component-id="navbar"] .currency-selector .choices__inner{
  position: relative;
  padding-left: 38px;
}

nav[data-component-id="navbar"] .currency-selector .choices__inner::before{
  content:"";
  position:absolute;
  left: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: rgba(255,255,255,.28);
}

/* Match selected icon based on current value */
nav[data-component-id="navbar"] .currency-selector .choices[data-value="USD"] .choices__inner::before{ content:"$"; width:auto; height:auto; background:none; color: rgba(255,255,255,.85); font-weight: 600; }
nav[data-component-id="navbar"] .currency-selector .choices[data-value="EUR"] .choices__inner::before{ content:"€"; width:auto; height:auto; background:none; color: rgba(255,255,255,.85); font-weight: 600; }
nav[data-component-id="navbar"] .currency-selector .choices[data-value="GBP"] .choices__inner::before{ content:"£"; width:auto; height:auto; background:none; color: rgba(255,255,255,.85); font-weight: 600; }
nav[data-component-id="navbar"] .currency-selector .choices[data-value="JPY"] .choices__inner::before{ content:"¥"; width:auto; height:auto; background:none; color: rgba(255,255,255,.85); font-weight: 600; }
nav[data-component-id="navbar"] .currency-selector .choices[data-value="CAD"] .choices__inner::before{ content:"C$"; width:auto; height:auto; background:none; color: rgba(255,255,255,.85); font-weight: 600; }
nav[data-component-id="navbar"] .currency-selector .choices[data-value="AUD"] .choices__inner::before{ content:"A$"; width:auto; height:auto; background:none; color: rgba(255,255,255,.85); font-weight: 600; }
/* ===== Currency selector fixes: no black square + nicer caret ===== */

/* 1) Remove hover "black square" (shadow) and keep only subtle border */
nav[data-component-id="navbar"] .currency-selector .choices:hover .choices__inner{
  box-shadow: none !important;
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(255,255,255,.16) !important;
  transform: none !important; /* убираем подъём именно у валюты */
}

/* на всякий: если где-то применился подъём */
nav[data-component-id="navbar"] .currency-selector .choices__inner{
  box-shadow: none !important;
}

/* 2) Remove Choices default caret "dash" and draw a clean chevron */
nav[data-component-id="navbar"] .currency-selector .choices[data-type*="select-one"]::after{
  width: 8px !important;
  height: 8px !important;
  right: 14px !important;
  margin-top: -4px !important;

  border: 0 !important; /* убираем этот “прочерк”/бордер-стрелку */
  opacity: .8;

  /* чистая V-стрелка */
  background: linear-gradient(rgba(255,255,255,.75), rgba(255,255,255,.75));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* rotate caret when open */
nav[data-component-id="navbar"] .currency-selector .choices[data-type*="select-one"].is-open::after{
  transform: rotate(180deg);
  margin-top: -4px !important;
}
/* =========================
   Premium Footer
========================= */

.footer{
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(7,7,10,.6);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.footer-logo{
  font-weight: 600;
  font-size: 18px;
  letter-spacing: .2px;
  color: rgba(255,255,255,.92);
}

.footer-copy{
  font-size: 13px;
  color: rgba(255,255,255,.45);
}

.footer-title{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: rgba(255,255,255,.5);
  margin-bottom: 14px;
}

.footer-links{
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li{
  margin-bottom: 8px;
}

.footer-links a{
  text-decoration: none;
  color: rgba(255,255,255,.75);
  transition: color 320ms cubic-bezier(.16,1,.3,1);
}

.footer-links a:hover{
  color: rgba(255,255,255,.95);
}

.footer-socials{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-social{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: rgba(255,255,255,.8);
  transition: transform 220ms cubic-bezier(.16,1,.3,1), color 320ms cubic-bezier(.16,1,.3,1);
}

.footer-social i{
  font-size: 16px;
  opacity: .9;
}

.footer-social:hover{
  transform: translateX(4px);
  color: rgba(255,255,255,.95);
}
/* =========================================================
   PREMIUM POLISH PACK
   - Layout rhythm
   - Subtle grid
   - Glass system
   - Inputs
   - Buttons unify
========================================================= */

/* ===== Layout rhythm ===== */
.container{
  max-width: 1120px;
}

@media (max-width: 576px){
  .container{
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ===== Subtle grid (very quiet, valyn-ish) ===== */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);

  background-size: 64px 64px;
  opacity: .10;
  mix-blend-mode: overlay;
}

/* ===== Premium glass system ===== */
.glass-card,
.card,
.modal-content{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-radius: 18px !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}

/* ===== Inputs / Search premium ===== */
input.form-control,
textarea.form-control,
select.form-select{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.90) !important;
  border-radius: 14px !important;

  transition:
    border-color 320ms cubic-bezier(.16,1,.3,1),
    background 320ms cubic-bezier(.16,1,.3,1),
    transform 220ms cubic-bezier(.16,1,.3,1);
}

input.form-control:focus,
textarea.form-control:focus,
select.form-select:focus{
  border-color: rgba(120,140,255,.55) !important;
  box-shadow: none !important;
  background: rgba(255,255,255,.045) !important;
}

::placeholder{
  color: rgba(255,255,255,.45) !important;
}

/* ===== Buttons unify ===== */
.btn{
  border-radius: 14px;
  transition:
    transform 220ms cubic-bezier(.16,1,.3,1),
    background 420ms cubic-bezier(.16,1,.3,1),
    border-color 420ms cubic-bezier(.16,1,.3,1),
    box-shadow 420ms cubic-bezier(.16,1,.3,1),
    filter 420ms cubic-bezier(.16,1,.3,1);
}

.btn:hover{
  transform: translateY(-1px);
}

.btn:active{
  transform: translateY(0px) scale(.99);
}
/* =========================
   Footer = same glass material as header
========================= */

footer.footer,
.footer.component[data-component-id="footer"]{
  position: relative;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(7,7,10,.55) !important; /* more transparent */
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  overflow: hidden;
}

/* soft top glow (ties with hero/nav) */
footer.footer::before,
.footer.component[data-component-id="footer"]::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 140px;
  pointer-events:none;
  background: radial-gradient(900px 160px at 50% 0%, rgba(255,255,255,.08), transparent 70%);
  opacity: .9;
}

/* subtle inner vignette so text is readable */
footer.footer::after,
.footer.component[data-component-id="footer"]::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(80% 80% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%);
  opacity: .55;
}

/* make footer content above overlays */
footer.footer .container,
.footer.component[data-component-id="footer"] .container{
  position: relative;
  z-index: 1;
}

/* typography match */
.footer-title{
  color: rgba(255,255,255,.55) !important;
}

.footer-links a{
  color: rgba(255,255,255,.72) !important;
}

.footer-links a:hover{
  color: rgba(255,255,255,.95) !important;
}

.footer-copy{
  color: rgba(255,255,255,.45) !important;
}

/* socials same “quiet hover” language */
.footer-social{
  color: rgba(255,255,255,.78) !important;
  transition: transform 220ms cubic-bezier(.16,1,.3,1), color 320ms cubic-bezier(.16,1,.3,1), opacity 320ms cubic-bezier(.16,1,.3,1);
}

.footer-social:hover{
  transform: translateX(4px);
  color: rgba(255,255,255,.95) !important;
}

/* Optional: reduce grid visibility under footer if it feels noisy */
footer.footer + *{
  position: relative;
  z-index: 1;
}
/* =========================================================
   PRODUCTS: premium cards + group modal (valyn-ish)
========================================================= */

/* Section title spacing */
.section-title h1{
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.section-title p,
.section-subtitle,
.section-title + p{
  color: rgba(255,255,255,.70);
}

/* ----- Product Card Base (applies to your snippet) ----- */
a.card.text-decoration-none{
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.025) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.38);
  transform: translate3d(0,0,0);

  transition:
    transform 220ms cubic-bezier(.16,1,.3,1),
    border-color 420ms cubic-bezier(.16,1,.3,1),
    background 420ms cubic-bezier(.16,1,.3,1),
    box-shadow 420ms cubic-bezier(.16,1,.3,1);
}

/* subtle hover lift (premium) */
a.card.text-decoration-none:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.035) !important;
  box-shadow: 0 26px 80px rgba(0,0,0,.48);
}

/* image area */
a.card.text-decoration-none .card-img-top{
  position: relative;
  overflow: hidden;
}

/* soft top glow on image */
a.card.text-decoration-none .card-img-top::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(700px 260px at 50% 0%, rgba(255,255,255,.10), transparent 60%);
  opacity: .55;
}

/* image zoom is tiny */
a.card.text-decoration-none img{
  transition: transform 520ms cubic-bezier(.16,1,.3,1), filter 520ms cubic-bezier(.16,1,.3,1);
  transform: scale(1.01);
}
a.card.text-decoration-none:hover img{
  transform: scale(1.04);
  filter: contrast(1.02) brightness(1.02);
}

/* overlay: make it minimal and non-cringe */
a.card.text-decoration-none .overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  padding: 12px;
  opacity: 0;
  pointer-events:none;
  transition: opacity 420ms cubic-bezier(.16,1,.3,1);
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.55) 100%);
}

a.card.text-decoration-none:hover .overlay{
  opacity: 1;
}

/* View Details button -> premium pill */
a.card.text-decoration-none .overlay .btn{
  pointer-events:none; /* чтобы кликом всегда открывалась карточка */
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.88) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: 8px 12px;
  font-size: 12px;
  letter-spacing: .2px;
  transform: translateY(4px);
  transition: transform 420ms cubic-bezier(.16,1,.3,1), background 420ms cubic-bezier(.16,1,.3,1), border-color 420ms cubic-bezier(.16,1,.3,1);
}

a.card.text-decoration-none:hover .overlay .btn{
  transform: translateY(0px);
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.18) !important;
}

/* card body */
a.card.text-decoration-none .card-body{
  padding: 14px 16px 16px !important;
}

a.card.text-decoration-none .card-title{
  margin-top: 6px;
  font-weight: 600;
  color: rgba(255,255,255,.92);
}

/* price + stock line */
a.card.text-decoration-none .info{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
}

a.card.text-decoration-none .price{
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: 13px;
  letter-spacing: .1px;
}

a.card.text-decoration-none .info > p.text-primary{
  margin: 0;
  font-size: 12px;
  letter-spacing: .12px;
  color: rgba(255,90,150,.95) !important; /* твоё розово-акцентное */
  opacity: .95;
  white-space: nowrap;
}

/* badges: make thinner + premium */
a.card.text-decoration-none .badges{
  position:absolute;
  top: 10px;
  left: 10px;
  display:flex;
  gap: 8px;
  z-index: 3;
}
a.card.text-decoration-none .badges > div{
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.28);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ----- Group Modal (when product.type == 'group') ----- */
.modal .modal-content{
  background: rgba(7,7,10,.62) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-radius: 18px !important;
  box-shadow: 0 26px 90px rgba(0,0,0,.6);
  overflow: hidden;
}

/* header */
.modal .modal-header{
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  background: transparent !important;
  padding: 16px 18px !important;
}

.modal .modal-title{
  font-weight: 600;
  letter-spacing: .1px;
}

/* close button */
.modal .btn-close{
  filter: invert(1);
  opacity: .6;
  transition: opacity 220ms cubic-bezier(.16,1,.3,1), transform 220ms cubic-bezier(.16,1,.3,1);
}
.modal .btn-close:hover{
  opacity: .9;
  transform: rotate(6deg);
}

/* body */
.modal .modal-body{
  padding: 18px !important;
}

/* backdrop darker */
.modal-backdrop.show{
  opacity: .72 !important;
}
/* =========================================================
   Product Cards — premium (ref-style)
========================================================= */

/* tighter grid feel like your reference */
.products.row{
  --bs-gutter-x: 22px;
  --bs-gutter-y: 22px;
}

/* card base (only product cards) */
a.product-card.card{
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  background: rgba(255,255,255,.02) !important;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.40);
  transform: translate3d(0,0,0);

  transition:
    transform 220ms cubic-bezier(.16,1,.3,1),
    border-color 420ms cubic-bezier(.16,1,.3,1),
    background 420ms cubic-bezier(.16,1,.3,1),
    box-shadow 420ms cubic-bezier(.16,1,.3,1);
}

a.product-card.card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.03) !important;
  box-shadow: 0 26px 80px rgba(0,0,0,.52);
}

/* media */
a.product-card .product-card__media{
  position: relative;
  overflow: hidden;
}

/* soft top glow like reference */
a.product-card .product-card__media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(700px 260px at 50% 0%, rgba(255,255,255,.10), transparent 60%);
  opacity: .55;
}

/* image micro zoom (very premium) */
a.product-card .product-card__img{
  transition: transform 520ms cubic-bezier(.16,1,.3,1), filter 520ms cubic-bezier(.16,1,.3,1);
  transform: scale(1.01);
}
a.product-card:hover .product-card__img{
  transform: scale(1.045);
  filter: contrast(1.02) brightness(1.02);
}

/* placeholder look */
a.product-card .product-card__placeholder{
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* badges: pill + glass */
a.product-card .product-card__badges{
  position:absolute;
  top: 10px;
  left: 10px;
  display:flex;
  gap: 8px;
  z-index: 2;
}

a.product-card .product-card__badges > div{
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* body */
a.product-card .product-card__body{
  padding: 14px 16px 16px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.00) 0%, rgba(255,255,255,.02) 100%);
}

a.product-card .product-card__meta{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
}

a.product-card .product-card__price{
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: 13px;
  letter-spacing: .1px;
}

a.product-card .product-card__stock{
  margin: 0;
  font-size: 12px;
  letter-spacing: .12px;
  white-space: nowrap;
  color: rgba(255,90,150,.95) !important; /* аккуратный розовый акцент */
}

/* title */
a.product-card .product-card__title{
  margin-top: 8px;
  margin-bottom: 0;
  font-weight: 600;
  color: rgba(255,255,255,.92);
  letter-spacing: -0.01em;
}

/* modal (group products) match the same material */
.modal .modal-content{
  background: rgba(7,7,10,.62) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-radius: 18px !important;
  box-shadow: 0 26px 90px rgba(0,0,0,.62);
  overflow: hidden;
}

.modal .modal-header{
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  background: transparent !important;
  padding: 16px 18px !important;
}

.modal .modal-title{
  font-weight: 600;
  letter-spacing: .1px;
}

.modal .btn-close{
  filter: invert(1);
  opacity: .6;
  transition: opacity 220ms cubic-bezier(.16,1,.3,1), transform 220ms cubic-bezier(.16,1,.3,1);
}
.modal .btn-close:hover{
  opacity: .9;
  transform: rotate(6deg);
}

.modal .modal-body{
  padding: 18px !important;
}

.modal-backdrop.show{
  opacity: .72 !important;
}
/* =========================================================
   Product Cards — premium (guaranteed selectors)
========================================================= */

.products.row{
  --bs-gutter-x: 22px;
  --bs-gutter-y: 22px;
}

a.product-card.card{
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  background: rgba(255,255,255,.02) !important;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.40);
  transform: translate3d(0,0,0);
  transition:
    transform 220ms cubic-bezier(.16,1,.3,1),
    border-color 420ms cubic-bezier(.16,1,.3,1),
    background 420ms cubic-bezier(.16,1,.3,1),
    box-shadow 420ms cubic-bezier(.16,1,.3,1);
}

a.product-card.card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.03) !important;
  box-shadow: 0 26px 80px rgba(0,0,0,.52);
}

a.product-card .product-card__media{
  position: relative;
  overflow: hidden;
}

a.product-card .product-card__shade{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(700px 260px at 50% 0%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, transparent 55%, rgba(0,0,0,.55) 100%);
  opacity: .6;
}

a.product-card .product-card__img{
  transition: transform 520ms cubic-bezier(.16,1,.3,1), filter 520ms cubic-bezier(.16,1,.3,1);
  transform: scale(1.01);
}

a.product-card:hover .product-card__img{
  transform: scale(1.045);
  filter: contrast(1.02) brightness(1.02);
}

a.product-card .product-card__badges{
  position:absolute;
  top: 10px;
  left: 10px;
  display:flex;
  gap: 8px;
  z-index: 2;
}

a.product-card .product-card__badges > div{
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

a.product-card .product-card__body{
  padding: 14px 16px 16px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.00) 0%, rgba(255,255,255,.02) 100%);
}

a.product-card .product-card__meta{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
}

a.product-card .product-card__price{
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: 13px;
  letter-spacing: .1px;
}

a.product-card .product-card__stock{
  margin: 0;
  font-size: 12px;
  letter-spacing: .12px;
  white-space: nowrap;
  color: rgba(255,90,150,.95) !important;
}

a.product-card .product-card__title{
  margin-top: 8px;
  margin-bottom: 0;
  font-weight: 600;
  color: rgba(255,255,255,.92);
  letter-spacing: -0.01em;
}

/* group modal match (same material) */
.modal .modal-content{
  background: rgba(7,7,10,.62) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-radius: 18px !important;
  box-shadow: 0 26px 90px rgba(0,0,0,.62);
  overflow: hidden;
}
/* ===== CATEGORY CARD IMAGE FIX ===== */

.group-card-image-wrapper,
.product-card-image-wrapper {
    background: radial-gradient(circle at center, rgba(255,0,0,0.08), transparent 70%);
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.group-card-image-wrapper img,
.product-card-image-wrapper img {
    object-fit: contain !important;
    height: 100% !important;
    width: auto !important;
    max-height: 320px;
    transition: transform 0.4s ease;
}

/* Hover effect */
.group-card:hover img,
.product-card:hover img {
    transform: scale(1.05);
}
/* =========================================================
   FIX: Category (group) card image should NOT be cropped
========================================================= */

/* only for group/category cards */
a.product-card--group{
  --product-image-fit: contain;                 /* overrides pro.css (was cover) */
  --product-card-image-aspect-ratio: 4/3;       /* more vertical space for the box */
}

a.product-card--group .product-card__media.card-img-top{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background:
    radial-gradient(700px 280px at 50% 20%, rgba(255, 90, 150, .10), transparent 65%),
    rgba(255,255,255,.015);
}

/* ensure image respects contain + stays centered */
a.product-card--group .product-card__img{
  width: 100% !important;
  height: 100% !important;
  object-position: center center !important;
  transform: none !important; /* no weird crop-feel from transforms */
}

/* optional: tiny premium lift */
a.product-card--group:hover .product-card__img{
  transform: scale(1.02) !important;
}
/* =========================================================
   GROUP/CATEGORY CARD IMAGE: make it fill красиво (не "марка")
   Strategy: cover + controlled focus + gentle zoom
========================================================= */

/* 1) Вернём fill, чтобы картинка занимала блок */
a.product-card--group{
  --product-image-fit: cover;                  /* вместо contain */
  --product-card-image-aspect-ratio: 16/9;     /* кинематографичнее для карточки */
}

/* 2) Убираем паддинги, чтобы картинка реально заполняла */
a.product-card--group .product-card__media.card-img-top{
  padding: 0 !important;
  background: transparent !important;
}

/* 3) Красивый кроп: держим коробку в кадре */
a.product-card--group .product-card__img{
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  object-position: 50% 22% !important; /* поднимаем фокус выше, чтобы не резало верх */

  transform: scale(1.08) !important;   /* лёгкий zoom, чтобы коробка была крупнее */
  transition: transform 520ms cubic-bezier(.16,1,.3,1), filter 520ms cubic-bezier(.16,1,.3,1);
}

a.product-card--group:hover .product-card__img{
  transform: scale(1.12) !important;
  filter: contrast(1.02) brightness(1.02);
}

/* 4) Мягкая шторка, чтобы низ карточки выглядел премиально */
a.product-card--group .product-card__media{
  position: relative;
  overflow: hidden;
}

a.product-card--group .product-card__media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(700px 260px at 50% 0%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, transparent 55%, rgba(0,0,0,.55) 100%);
  opacity: .55;
}
/* =========================================
   MAKE CATEGORY CARD BIGGER (NO CROP CUT)
========================================= */

/* увеличиваем высоту блока изображения */
a.product-card--group {
    --product-card-image-aspect-ratio: 16/10; /* было 16/9 → даём больше высоты */
}

/* чуть больше внутреннего пространства */
a.product-card--group .product-card__media.card-img-top {
    min-height: 300px;
}

/* корректируем кроп */
a.product-card--group .product-card__img {
    object-fit: cover !important;
    object-position: 50% 18% !important; /* поднимаем фокус, чтобы RUST не резался */
}
/* =========================================
   CLEAN COMPACT VERTICAL PRODUCT TILE
========================================= */

a.product-card--group {
    --product-card-image-aspect-ratio: 2/3;
    max-width: 280px;          /* уменьшили ширину */
}

/* уменьшаем высоту медиа */
a.product-card--group .product-card__media {
    min-height: 360px;         /* было 420 — стало аккуратнее */
}

/* правильный кроп */
a.product-card--group .product-card__img {
    object-fit: cover !important;
    object-position: center 15% !important;
    transform: none !important;
}

/* делаем сетку аккуратной */
.products-grid {
    gap: 28px;
}
/* =========================================================
   Products page: filter + category tile aligned (same width)
========================================================= */

/* 1) Общая ширина колонок (фильтр и карточка) */
:root{
  --products-side-width: 340px; /* можно 320–360 */
}

/* 2) Левая панель фильтров — фиксируем ширину */
.products-filters,
.products-filter,
.filters,
.sidebar-filters,
#filters,
.products-page .filters,
.products-page .sidebar{
  width: var(--products-side-width) !important;
  max-width: var(--products-side-width) !important;
}

/* 3) Карточка категории (group) — делаем той же ширины */
a.product-card--group{
  max-width: var(--products-side-width) !important;
  width: var(--products-side-width) !important;
}

/* 4) Выравниваем высоту изображения под одинаковый “профиль” */
a.product-card--group{
  --product-card-image-aspect-ratio: 16/10; /* визуально ближе к панели, не “постер” */
}

a.product-card--group .product-card__media{
  min-height: 300px; /* чтобы блок не был слишком высоким */
}

/* 5) Кроп по картинке — чтобы верх RUST не резался */
a.product-card--group .product-card__img{
  object-fit: cover !important;
  object-position: 50% 16% !important;
}

/* 6) (опционально) чтобы низ двух блоков был ровно в линию */
.products-page .row,
.products-layout,
.products-wrap{
  align-items: stretch;
}
a.product-card--group.card{
  height: 100%;
}
.cult-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    backdrop-filter: blur(8px);
    transition: all 0.4s ease;
}

.cult-card:hover {
    border-color: rgba(255,0,90,0.4);
    transform: translateY(-4px);
}

.cult-card li {
    color: rgba(255,255,255,0.6);
    margin-bottom: 6px;
}
/* =========================================================
   HOMEPAGE BLOCKS — CLEAN FINAL
   Features + FAQ + Socials (premium-dark, unified spacing)
========================================================= */

:root{
  --section-head-to-content-gap: 24px;
}

/* ---------------- Shared sections ---------------- */
.cult-features,
.cult-faq{
  position: relative;
  padding: 84px 0;
}

.socials.component{
  background: transparent !important;
  position: relative;
  padding: 84px 0 100px !important;
}

.cult-section-head{
  margin: 0 !important;
  text-align: center !important;
}

.cult-section-head h2{
  margin: 0 !important;
  color: rgba(255,255,255,.95);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(22px, 2vw, 30px);
}

.cult-section-head p{
  margin: 8px 0 0 !important;
  color: rgba(255,255,255,.52);
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

/* Unified gap: heading -> content */
.cult-features .row{
  margin-top: var(--section-head-to-content-gap) !important;
}
.cult-faq .cult-faq-list{
  margin-top: var(--section-head-to-content-gap) !important;
}
.reviews-title{ margin-bottom: 0 !important; }
.reviews-subtitle{
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}
.reviews-marquee .reviews-row:first-of-type{
  margin-top: var(--section-head-to-content-gap) !important;
}
.socials.component .section-title,
.socials.component .section-subtitle{
  text-align: center !important;
}
.socials.component .section-title{ margin-bottom: 0 !important; }
.socials.component .section-title h2{
  margin: 0 !important;
  color: rgba(255,255,255,.95);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(24px, 2vw, 32px);
}
.socials.component .section-subtitle p{
  margin: 8px 0 0 !important;
  color: rgba(255,255,255,.52) !important;
  font-size: 13px;
  line-height: 1.45;
}
.socials.component .list{
  margin-top: var(--section-head-to-content-gap) !important;
  row-gap: 14px;
}

/* ---------------- Features (clean, no red accents) ---------------- */

.cult-features .cult-feature-card{
  position: relative;
  overflow: hidden;
  border-radius: 16px !important;
  padding: 26px 22px 20px !important;

  border: 1px solid rgba(255,255,255,.06) !important;
  background:
    radial-gradient(85% 60% at 100% 0%, rgba(255,255,255,.02), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.015),
    0 8px 22px rgba(0,0,0,.14) !important;

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

  transform: translateY(0);
  transition:
    transform .85s cubic-bezier(0.22,1,0.36,1),
    border-color .85s cubic-bezier(0.22,1,0.36,1) !important;
  will-change: transform;
}

.cult-features .cult-feature-card::before,
.cult-features .cult-feature-card::after{
  content: none !important;
  display: none !important;
}

.cult-features .cult-feature-card:hover{
  transform: translateY(-2px) !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.015),
    0 8px 22px rgba(0,0,0,.14) !important;
}

.cult-features .cult-feature-card .cult-feature-lines::after{
  content: none !important;
  display: none !important;
}

.cult-features .cult-feature-icon{
  position: relative;
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;

  color: rgba(255,255,255,.82) !important;
  background:
    radial-gradient(60% 60% at 50% 35%, rgba(255,255,255,.04), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.02),
    0 6px 14px rgba(0,0,0,.12) !important;

  transform: none !important;
  transition:
    border-color .85s cubic-bezier(0.22,1,0.36,1),
    color .85s cubic-bezier(0.22,1,0.36,1) !important;
}

.cult-features .cult-feature-icon::before{ content: none !important; display: none !important; }
.cult-features .cult-feature-icon::after{
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 9px;
  background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.05), transparent 72%) !important;
  opacity: .55;
  pointer-events: none;
}

.cult-features .cult-feature-card:hover .cult-feature-icon{
  color: rgba(255,255,255,.92) !important;
  border-color: rgba(255,255,255,.10) !important;
}

.cult-features .cult-feature-icon-svg{
  width: 20px !important;
  height: 20px !important;
  display: block;
  position: relative;
  z-index: 2;
  filter: none !important;
}

.cult-features .cult-feature-card h3{
  margin: 0 0 12px !important;
  color: rgba(255,255,255,.94);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.25;
}

.cult-features .cult-feature-lines{
  margin: 0;
  padding: 0;
}
.cult-features .cult-feature-lines li{
  color: rgba(255,255,255,.56);
  font-size: 12px;
  line-height: 1.55;
}
.cult-features .cult-feature-lines li + li{
  margin-top: 8px;
}

/* ---------------- FAQ v2 (independent Alpine panel) ---------------- */

.cult-faq .cult-faq-list{
  display: grid;
  gap: 12px;
}

.cult-faq .cult-faq-item2{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(255,255,255,.015);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.01);
}

.cult-faq .cult-faq-item2-head{
  margin: 0;
}

.cult-faq .cult-faq-item2-btn{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  padding: 16px 18px;
  border: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.01));
  color: rgba(255,255,255,.88);
  text-align: left;
  box-shadow: none;
  outline: none;

  transition:
    color .45s cubic-bezier(0.22,1,0.36,1),
    background-color .45s cubic-bezier(0.22,1,0.36,1);
}

.cult-faq .cult-faq-item2-btn:hover{
  color: rgba(255,255,255,.96);
}

.cult-faq .cult-faq-item2-btn:focus-visible{
  box-shadow: 0 0 0 3px rgba(255,255,255,.05);
}

.cult-faq .cult-faq-item2-question{
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: inherit;
}

.cult-faq .cult-faq-item2-chevron{
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-left: 8px;
  border-right: 1.5px solid rgba(255,255,255,.62);
  border-bottom: 1.5px solid rgba(255,255,255,.62);
  transform: rotate(45deg);
  transform-origin: center;
  opacity: .9;
  transition:
    transform .55s cubic-bezier(0.22,1,0.36,1),
    border-color .55s cubic-bezier(0.22,1,0.36,1),
    opacity .55s cubic-bezier(0.22,1,0.36,1);
}

.cult-faq .cult-faq-item2-btn.is-open .cult-faq-item2-chevron{
  transform: rotate(-135deg);
  border-right-color: rgba(255,255,255,.82);
  border-bottom-color: rgba(255,255,255,.82);
  opacity: 1;
}

.cult-faq .cult-faq-item2-panel{
  max-height: 0;
  overflow: hidden;
  transition: max-height .70s cubic-bezier(0.22,1,0.36,1);
}

.cult-faq .cult-faq-item2-inner{
  overflow: hidden;
}

.cult-faq .cult-faq-item2-divider{
  height: 1px;
  margin: 0 18px;
  background: rgba(255,255,255,.04);
  opacity: 0;
  transition: opacity .30s ease;
}

.cult-faq .cult-faq-item2-btn.is-open + .cult-faq-item2-panel .cult-faq-item2-divider{
  opacity: 1;
}

.cult-faq .cult-faq-item2-body{
  padding: 14px 18px 16px;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity .42s ease,
    transform .62s cubic-bezier(0.22,1,0.36,1);
  pointer-events: none;
}

.cult-faq .cult-faq-item2-panel.is-open .cult-faq-item2-body{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.cult-faq .cult-faq-answer{
  color: rgba(255,255,255,.72);
  font-size: 12px;
  line-height: 1.65;
  white-space: pre-line;
}

/* Hide old bootstrap accordion visuals if any legacy markup remains */
.cult-faq .accordion-button::after{ content: none !important; display: none !important; }
.cult-faq .accordion-button,
.cult-faq .accordion-button:not(.collapsed){
  color: inherit !important;
  box-shadow: none !important;
  background: transparent !important;
}
.cult-faq .accordion-collapse,
.cult-faq .accordion-body{
  border-top: 0 !important;
  box-shadow: none !important;
}

/* ---------------- Socials (premium-dark override) ---------------- */

.socials .list .social{
  align-items: center;
  min-height: 58px;
  padding: 12px 14px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.012)) !important;
  color: rgba(255,255,255,.92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.01),
    0 8px 24px rgba(0,0,0,.16);
  transition:
    transform .55s cubic-bezier(0.22,1,0.36,1),
    border-color .55s cubic-bezier(0.22,1,0.36,1),
    color .55s cubic-bezier(0.22,1,0.36,1);
  text-decoration: none !important;
}

.socials .list .social:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.14) !important;
  color: #fff !important;
}

.socials .list .social .left{
  gap: 10px !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.socials .list .social .left svg{
  width: 28px;
  height: 28px;
  padding: 7px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.84) !important;
  flex-shrink: 0;
}

.socials .list .social .right{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.68);
  transition:
    transform .55s cubic-bezier(0.22,1,0.36,1),
    color .55s cubic-bezier(0.22,1,0.36,1);
}
.socials .list .social:hover .right{
  transform: translate(1px,-1px);
  color: rgba(255,255,255,.92);
}
.socials .list .social .right svg{
  width: 18px !important;
  height: 18px !important;
}

/* ---------------- Responsive / Reduced motion ---------------- */

@media (max-width: 991.98px){
  .cult-features,
  .cult-faq,
  .socials.component{
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  .cult-features .cult-feature-card{
    padding: 22px 18px 18px !important;
  }
}

@media (max-width: 767.98px){
  :root{
    --section-head-to-content-gap: 18px;
  }
}

@media (prefers-reduced-motion: reduce){
  .cult-features .cult-feature-card,
  .cult-features .cult-feature-icon,
  .socials .list .social,
  .socials .list .social .right,
  .cult-faq .cult-faq-item2-btn,
  .cult-faq .cult-faq-item2-chevron,
  .cult-faq .cult-faq-item2-panel,
  .cult-faq .cult-faq-item2-divider,
  .cult-faq .cult-faq-item2-body{
    transition: none !important;
    animation: none !important;
  }

  .cult-features .cult-feature-card:hover,
  .socials .list .social:hover{
    transform: none !important;
  }
}
/* =========================================
   FEATURES HOVER RESTORE (smooth lift)
========================================= */

/* Жёстко фиксируем transition, чтобы ничего не перебивало */
.cult-features .cult-feature-card,
.cult-features .cult-feature-card.h-100 {
  transform: translateY(0) !important;

  transition-property: transform, border-color !important;
  transition-duration: 0.95s, 0.95s !important;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1), cubic-bezier(0.22, 1, 0.36, 1) !important;
  transition-delay: 0s, 0s !important;

  will-change: transform !important;
}

/* Сам hover-подъём */
.cult-features .cult-feature-card:hover,
.cult-features .cult-feature-card.h-100:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* Иконку не двигаем отдельно — это давало ощущение резкости */
.cult-features .cult-feature-icon,
.cult-features .cult-feature-card:hover .cult-feature-icon {
  transform: none !important;
  transition: none !important;
}

/* Если у тебя включен Reduce Motion, но ты всё равно хочешь hover на features */
@media (prefers-reduced-motion: reduce) {
  .cult-features .cult-feature-card,
  .cult-features .cult-feature-card.h-100 {
    transition-property: transform, border-color !important;
    transition-duration: 0.95s, 0.95s !important;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1), cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  .cult-features .cult-feature-card:hover,
  .cult-features .cult-feature-card.h-100:hover {
    transform: translateY(-2px) !important;
  }
}
/* =========================================================
   CULTCHEATS — STORE UI KIT + PRODUCTS + PRODUCT PAGE + NAVBAR
   Premium dark / neutral white-gray / soft motion
========================================================= */

:root{
  /* motion */
  --cult-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cult-dur-fast: .28s;
  --cult-dur: .45s;
  --cult-dur-slow: .72s;
  --cult-dur-lift: .95s;

  /* surfaces */
  --cult-surface-0: rgba(255,255,255,.008);
  --cult-surface-1: rgba(255,255,255,.012);
  --cult-surface-2: rgba(255,255,255,.018);
  --cult-surface-3: rgba(255,255,255,.024);

  /* borders / text */
  --cult-border-1: rgba(255,255,255,.06);
  --cult-border-2: rgba(255,255,255,.10);
  --cult-border-3: rgba(255,255,255,.14);

  --cult-text-strong: rgba(255,255,255,.94);
  --cult-text: rgba(255,255,255,.84);
  --cult-text-soft: rgba(255,255,255,.60);
  --cult-text-faint: rgba(255,255,255,.48);

  /* shadows */
  --cult-shadow-sm: 0 6px 16px rgba(0,0,0,.14);
  --cult-shadow-md: 0 10px 24px rgba(0,0,0,.18);
  --cult-shadow-lg: 0 14px 34px rgba(0,0,0,.22);

  /* radius */
  --cult-radius-sm: 10px;
  --cult-radius-md: 14px;
  --cult-radius-lg: 16px;
}

/* =========================================================
   GLOBAL MOTION (scoped to store pages / navbar)
========================================================= */

.navbar.component .btn,
.py-5-nav .btn,
.product-wrapper .btn,
#filters-modal .btn {
  transition:
    transform var(--cult-dur) var(--cult-ease),
    border-color var(--cult-dur) var(--cult-ease),
    background-color var(--cult-dur) var(--cult-ease),
    color var(--cult-dur) var(--cult-ease),
    box-shadow var(--cult-dur) var(--cult-ease) !important;
}

.navbar.component .btn:hover,
.py-5-nav .btn:hover,
.product-wrapper .btn:hover,
#filters-modal .btn:hover {
  transform: translateY(-1px);
}

/* neutralize overly bright primarys on store UI */
.py-5-nav .btn-primary,
.product-wrapper .btn-primary,
#filters-modal .btn-primary,
.navbar.component .btn-primary {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.94) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 8px 18px rgba(0,0,0,.16) !important;
}

.py-5-nav .btn-primary:hover,
.product-wrapper .btn-primary:hover,
#filters-modal .btn-primary:hover,
.navbar.component .btn-primary:hover {
  border-color: rgba(255,255,255,.18) !important;
}

.py-5-nav .btn-outline-primary,
.product-wrapper .btn-outline-primary,
#filters-modal .btn-outline-primary,
.navbar.component .btn-outline-primary {
  background: rgba(255,255,255,.01) !important;
  border-color: rgba(255,255,255,.09) !important;
  color: rgba(255,255,255,.86) !important;
}

.py-5-nav .btn-outline-primary:hover,
.product-wrapper .btn-outline-primary:hover,
#filters-modal .btn-outline-primary:hover,
.navbar.component .btn-outline-primary:hover {
  background: rgba(255,255,255,.02) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: #fff !important;
}

.py-5-nav .form-control,
.py-5-nav .form-select,
#filters-modal .form-control,
#filters-modal .form-select,
.product-wrapper .form-control,
.product-wrapper .form-select {
  background: rgba(255,255,255,.012) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.92) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.py-5-nav .form-control::placeholder,
#filters-modal .form-control::placeholder,
.product-wrapper .form-control::placeholder {
  color: rgba(255,255,255,.40) !important;
}

.py-5-nav .form-control:focus,
#filters-modal .form-control:focus,
.product-wrapper .form-control:focus,
.py-5-nav .form-select:focus,
#filters-modal .form-select:focus,
.product-wrapper .form-select:focus {
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.04) !important;
}

/* =========================================================
   PRODUCTS PAGE — heading / layout / filters
========================================================= */

.py-5-nav {
  padding-top: 2.25rem !important;
  padding-bottom: 2.5rem !important;
}

.py-5-nav .section-title {
  margin-bottom: 1.15rem !important;
  text-align: center;
}

.py-5-nav .section-title h1 {
  margin: 0 !important;
  color: var(--cult-text-strong);
  font-size: clamp(24px, 2.2vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.py-5-nav .row.products {
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 1rem;
}

/* Desktop filter card = same visual width language as your preferred sidebar tile width */
.py-5-nav aside .bg-gray {
  position: sticky;
  top: 92px;
  max-width: 340px;
  margin-right: auto;

  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(255,255,255,.02), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.012)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.015),
    0 10px 24px rgba(0,0,0,.18) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.py-5-nav aside .form-label {
  color: rgba(255,255,255,.84) !important;
  font-size: 12px;
  letter-spacing: .01em;
  margin-bottom: .55rem !important;
}

.py-5-nav aside .text-muted,
#filters-modal .text-muted {
  color: rgba(255,255,255,.44) !important;
}

/* category filter buttons */
.py-5-nav aside .d-flex.flex-column.gap-1 > a.btn,
#filters-modal .d-flex.flex-column.gap-1 > a.btn {
  border-radius: 10px !important;
  min-height: 34px;
  padding-top: .42rem !important;
  padding-bottom: .42rem !important;
  border-width: 1px !important;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* mobile filter trigger */
.py-5-nav .d-lg-none .btn.w-100[data-bs-target="#filters-modal"] {
  border-radius: 12px !important;
  min-height: 44px;
}

/* =========================================================
   PRODUCTS PAGE — product cards (snippets/product-card.njk)
========================================================= */

.row.products > [class*="col-"] {
  display: flex;
}

.row.products .product-card {
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;

  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(255,255,255,.02), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.01)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.012),
    0 8px 22px rgba(0,0,0,.15) !important;

  overflow: hidden;
  transform: translateY(0);
  transition:
    transform var(--cult-dur-lift) var(--cult-ease),
    border-color var(--cult-dur-lift) var(--cult-ease),
    box-shadow var(--cult-dur-lift) var(--cult-ease) !important;
  will-change: transform;
}

.row.products .product-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.015),
    0 12px 28px rgba(0,0,0,.20) !important;
}

.row.products .product-card .card-img-top,
.row.products .product-card .product-card__media {
  position: relative;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(70% 70% at 50% 30%, rgba(255,255,255,.03), transparent 72%),
    rgba(255,255,255,.01);
}

/* subtle top hairline */
.row.products .product-card .product-card__media::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: rgba(255,255,255,.03);
  z-index: 2;
  pointer-events: none;
}

/* image zoom */
.row.products .product-card img.product-card__img,
.row.products .product-card .card-img-top img {
  transition: transform .95s var(--cult-ease), opacity .45s ease !important;
  transform: scale(1);
}

.row.products .product-card:hover img.product-card__img,
.row.products .product-card:hover .card-img-top img {
  transform: scale(1.025);
}

/* placeholder neutral */
.row.products .product-card .product-card__placeholder,
.row.products .product-card .product-img-placeholder {
  color: rgba(255,255,255,.28) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,.008)) !important;
}

/* overlay CTA */
.row.products .product-card .overlay {
  background: linear-gradient(to top, rgba(0,0,0,.34), rgba(0,0,0,.08), transparent) !important;
  opacity: 0;
  transition: opacity .55s var(--cult-ease) !important;
}

.row.products .product-card:hover .overlay {
  opacity: 1;
}

.row.products .product-card .overlay .btn {
  border-radius: 10px !important;
  min-height: 34px;
  padding-inline: 12px !important;
  transform: translateY(4px);
  opacity: .92;
  transition:
    transform .55s var(--cult-ease),
    opacity .55s var(--cult-ease) !important;
}

.row.products .product-card:hover .overlay .btn {
  transform: translateY(0);
  opacity: 1;
}

/* badges */
.row.products .product-card .badges {
  gap: 6px !important;
}

.row.products .product-card .badges > div {
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
  backdrop-filter: blur(4px);
}

/* body layout */
.row.products .product-card .card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 14px 15px !important;
  background: transparent !important;
}

.row.products .product-card .info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.row.products .product-card .price {
  margin: 0 !important;
  color: rgba(255,255,255,.90);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.row.products .product-card .price s {
  display: inline-block;
  margin-left: 6px;
  color: rgba(255,255,255,.45) !important;
  font-weight: 500;
  font-size: 12px;
}

.row.products .product-card .text-primary,
.row.products .product-card .stock {
  margin: 0 !important;
  color: rgba(255,255,255,.58) !important;
  font-size: 12px;
  line-height: 1.35;
}

.row.products .product-card .stock-unlimited {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.row.products .product-card .stock-unlimited svg {
  width: 12px;
  height: 12px;
  opacity: .8;
}

.row.products .product-card .card-title,
.row.products .product-card h5.card-title {
  margin: 0 !important;
  color: rgba(255,255,255,.95);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.012em;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.35em * 2);
}

/* group cards and horizontal cards (if used elsewhere) */
a.product-card-horizontal {
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.01)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.012),
    0 8px 22px rgba(0,0,0,.15) !important;
  transition:
    transform var(--cult-dur-lift) var(--cult-ease),
    border-color var(--cult-dur-lift) var(--cult-ease) !important;
}
a.product-card-horizontal:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.12) !important;
}

/* empty state */
.py-5-nav .text-center.py-5 svg.text-muted,
.py-5-nav .text-center.py-5 .text-muted {
  color: rgba(255,255,255,.42) !important;
}
.py-5-nav .text-center.py-5 p {
  color: rgba(255,255,255,.56) !important;
  font-size: 14px !important;
}

/* pagination (soft pill style) */
.py-5-nav .pagination {
  gap: 6px;
  flex-wrap: wrap;
}
.py-5-nav .page-item .page-link {
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.012) !important;
  color: rgba(255,255,255,.82) !important;
  box-shadow: none !important;
  transition:
    transform .45s var(--cult-ease),
    border-color .45s var(--cult-ease),
    background-color .45s var(--cult-ease),
    color .45s var(--cult-ease) !important;
}
.py-5-nav .page-item .page-link:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.14) !important;
  color: #fff !important;
}
.py-5-nav .page-item.active .page-link {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.95) !important;
}

/* =========================================================
   FILTERS MODAL (mobile)
========================================================= */

#filters-modal .modal-content {
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(255,255,255,.02), transparent 65%),
    linear-gradient(180deg, rgba(20,20,22,.96), rgba(13,13,15,.98)) !important;
  color: rgba(255,255,255,.92) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.34) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
#filters-modal .modal-header {
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
}
#filters-modal .modal-footer {
  border-top: 1px solid rgba(255,255,255,.05) !important;
}
#filters-modal .btn-close {
  filter: invert(1) opacity(.75);
}

/* =========================================================
   PRODUCT PAGE (components/product-page.njk + product-form.njk)
========================================================= */

.product-wrapper .py-5-nav .container.px-4.px-lg-5.my-5 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* gallery / media */
.product-wrapper .carousel,
.product-wrapper .card-img-top.mb-5.aspect-product-page-image,
.product-wrapper .product-img-placeholder.aspect-product-page-image {
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  overflow: hidden;
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(255,255,255,.02), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.016), rgba(255,255,255,.01)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.012),
    0 12px 28px rgba(0,0,0,.18) !important;
}

.product-wrapper .carousel .carousel-item img {
  transition: transform .9s var(--cult-ease);
}
.product-wrapper .carousel:hover .carousel-item.active img {
  transform: scale(1.01);
}

.product-wrapper .carousel .thumbnails {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 8px;
  padding: 10px 2px 2px;
}
.product-wrapper .carousel .thumbnails button {
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  background: rgba(255,255,255,.01) !important;
  padding: 0 !important;
  overflow: hidden;
  transition:
    transform .45s var(--cult-ease),
    border-color .45s var(--cult-ease),
    opacity .45s var(--cult-ease) !important;
  opacity: .82;
}
.product-wrapper .carousel .thumbnails button:hover {
  transform: translateY(-1px);
  opacity: 1;
}
.product-wrapper .carousel .thumbnails button.active {
  border-color: rgba(255,255,255,.15) !important;
  opacity: 1;
}

/* title + meta */
.product-wrapper h1.display-6.fw-bolder {
  color: var(--cult-text-strong);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: .55rem !important;
}

/* live stats / status / badges containers */
.product-wrapper .live-stats,
.product-wrapper .badges.my-4,
.product-wrapper .product-tabs .content {
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(255,255,255,.02), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.016), rgba(255,255,255,.01));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.012);
}

.product-wrapper .live-stats {
  padding: 12px 14px;
}
.product-wrapper .live-stats p {
  margin: 0 !important;
  color: rgba(255,255,255,.62) !important;
  font-size: 12px;
}
.product-wrapper .live-stats strong {
  color: rgba(255,255,255,.88);
}
.product-wrapper .live-stats svg {
  width: 15px;
  height: 15px;
  color: rgba(255,255,255,.56);
}

.product-wrapper .badges.my-4 {
  padding: 10px 12px;
  gap: 8px !important;
}

.product-wrapper .badges.my-4 > a,
.product-wrapper .badges.my-4 > div {
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.86) !important;
  background: rgba(255,255,255,.014) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.012);
}

/* price / stock row */
.product-wrapper .fs-5 {
  color: rgba(255,255,255,.94);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.product-wrapper .stock-indicator.btn-outline-primary {
  border-color: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.82) !important;
  background: rgba(255,255,255,.012) !important;
}

/* tabs */
.product-wrapper .product-tabs > .mb-4.d-flex.flex-wrap.gap-2 .btn {
  border-radius: 10px !important;
  min-height: 36px;
  padding-inline: 12px !important;
}
.product-wrapper .product-tabs .content {
  padding: 14px 16px;
}
.product-wrapper .product-tabs .content .editor {
  color: rgba(255,255,255,.76);
  line-height: 1.7;
}
.product-wrapper .product-tabs .content .editor h1,
.product-wrapper .product-tabs .content .editor h2,
.product-wrapper .product-tabs .content .editor h3,
.product-wrapper .product-tabs .content .editor h4 {
  color: rgba(255,255,255,.92);
}
.product-wrapper .product-tabs .content .editor a {
  color: rgba(255,255,255,.88);
  text-underline-offset: 2px;
}

/* buy buttons row */
.product-wrapper .buy-buttons .btn {
  min-height: 46px;
  border-radius: 12px !important;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.product-wrapper .buy-buttons .btn:hover {
  transform: translateY(-2px);
}

/* addons blocks (safe generic targeting) */
.product-wrapper .addons,
.product-wrapper .addons-list,
.product-wrapper [class*="addon"] {
  color: inherit;
}
.product-wrapper .btn-addon-add,
.product-wrapper .btn-addon-remove {
  border-radius: 10px !important;
}

/* =========================================================
   NAVBAR / HEADER POLISH
========================================================= */

.navbar.component[data-component-id="navbar"] {
  position: sticky;
  top: 0;
  z-index: 1035;
  border-bottom: 1px solid rgba(255,255,255,.04);
  background:
    linear-gradient(to bottom, rgba(10,10,12,.78), rgba(10,10,12,.62)) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.navbar.component[data-component-id="navbar"] > .container {
  min-height: 68px;
}

.navbar.component .navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.94) !important;
  letter-spacing: -0.015em;
}
.navbar.component .navbar-brand img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.08);
}
.navbar.component .navbar-brand span {
  font-weight: 700;
}

.navbar.component .nav-link {
  position: relative;
  color: rgba(255,255,255,.70) !important;
  padding: .5rem .65rem !important;
  border-radius: 9px;
  transition:
    color .45s var(--cult-ease),
    background-color .45s var(--cult-ease),
    transform .45s var(--cult-ease) !important;
}

.navbar.component .nav-link:hover {
  color: rgba(255,255,255,.92) !important;
  background: rgba(255,255,255,.02);
  transform: translateY(-1px);
}

/* subtle active-ish underline on hover */
.navbar.component .nav-link::after {
  content: "";
  position: absolute;
  left: .65rem;
  right: .65rem;
  bottom: .25rem;
  height: 1px;
  background: rgba(255,255,255,.16);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .45s var(--cult-ease);
}
.navbar.component .nav-link:hover::after {
  transform: scaleX(1);
}

/* icon buttons (cart/mobile) */
.navbar.component .cart .btn,
.navbar.component .user .btn,
.navbar.component .navbar-nav .btn-outline-primary {
  border-radius: 10px !important;
  min-height: 38px;
}

.navbar.component .cart .btn .icon {
  width: 18px;
  height: 18px;
}
.navbar.component .cart .btn .count {
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

/* currency selector */
.navbar.component .currency-selector select {
  height: 38px;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.012) !important;
  color: rgba(255,255,255,.88) !important;
  padding-inline: 12px 30px !important;
  box-shadow: none !important;
}
.navbar.component .currency-selector select:focus {
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.04) !important;
}

/* mobile menu toggler */
.navbar.component .navbar-toggler {
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.012) !important;
  box-shadow: none !important;
}
.navbar.component .navbar-toggler:hover {
  border-color: rgba(255,255,255,.14) !important;
}
.navbar.component .navbar-toggler:focus {
  box-shadow: 0 0 0 3px rgba(255,255,255,.04) !important;
}
.navbar.component .navbar-toggler-icon {
  filter: invert(1) opacity(.8);
}

/* mobile collapse panel */
@media (max-width: 991.98px) {
  .navbar.component .navbar-collapse {
    margin-top: 10px;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.06);
    background:
      radial-gradient(70% 60% at 100% 0%, rgba(255,255,255,.02), transparent 65%),
      linear-gradient(180deg, rgba(255,255,255,.016), rgba(255,255,255,.01));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.012),
      0 12px 28px rgba(0,0,0,.18);
  }

  .navbar.component .navbar-nav {
    gap: 6px !important;
  }

  .navbar.component .navbar-nav .nav-item {
    width: 100%;
  }

  .navbar.component .navbar-nav .nav-link,
  .navbar.component .navbar-nav .btn {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
  }

  .py-5-nav aside .bg-gray {
    position: static;
    top: auto;
    max-width: none;
  }
}

/* =========================================================
   RESPONSIVE PRODUCT GRID
========================================================= */

@media (min-width: 1400px) {
  .py-5-nav .row.products > .col-lg-4 {
    width: 33.333333% !important;
  }
}

@media (max-width: 767.98px) {
  .py-5-nav {
    padding-top: 1.25rem !important;
    padding-bottom: 1.5rem !important;
  }

  .py-5-nav .section-title {
    margin-bottom: .9rem !important;
  }

  .row.products .product-card .card-body {
    padding: 12px 12px 13px !important;
  }

  .row.products .product-card .card-title {
    font-size: 13px;
  }

  .row.products .product-card .price {
    font-size: 13px;
  }

  .product-wrapper .buy-buttons {
    gap: 10px !important;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .navbar.component .nav-link,
  .navbar.component .nav-link::after,
  .navbar.component .btn,
  .py-5-nav .btn,
  .product-wrapper .btn,
  .row.products .product-card,
  .row.products .product-card img,
  .row.products .product-card .overlay,
  .row.products .product-card .overlay .btn,
  .product-wrapper .carousel .carousel-item img,
  .product-wrapper .carousel .thumbnails button {
    transition: none !important;
    animation: none !important;
  }

  .row.products .product-card:hover,
  .product-wrapper .buy-buttons .btn:hover,
  .navbar.component .btn:hover,
  .py-5-nav .btn:hover {
    transform: none !important;
  }
}
/* =========================================================
   PHASE 2 MARKUP POLISH HOOKS (products / product page)
========================================================= */

/* ---------- product card microtext ---------- */
.row.products .product-card .product-card__top{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.row.products .product-card .product-card__micro{
  margin: 0;
  color: rgba(255,255,255,.48);
  font-size: 11px;
  line-height: 1.25;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* card body rhythm after markup reorder */
.row.products .product-card .card-body{
  gap: 12px !important;
}
.row.products .product-card .info{
  gap: 5px !important;
}

/* ---------- products page toolbar ---------- */
.py-5-nav .section-subtitle{
  text-align: center;
  margin-top: 8px;
  margin-bottom: 18px;
}
.py-5-nav .section-subtitle p{
  margin: 0;
  color: rgba(255,255,255,.52);
  font-size: 13px;
  line-height: 1.45;
}

.py-5-nav .products-toolbar{
  min-height: 34px;
  padding: 0 2px;
}
.py-5-nav .products-toolbar__meta{
  color: rgba(255,255,255,.58);
  font-size: 12px;
  line-height: 1.35;
}
.py-5-nav .products-toolbar__meta strong{
  color: rgba(255,255,255,.88);
  font-weight: 700;
}
.py-5-nav .products-toolbar__hint{
  color: rgba(255,255,255,.42);
  font-size: 11px;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.py-5-nav .products-toolbar__dot{
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.24);
  display: inline-block;
}

.py-5-nav .products-filters-panel{
  overflow: hidden;
}

/* group modal subtitle */
.py-5-nav .products-group-modal__subtitle{
  color: rgba(255,255,255,.46) !important;
  font-size: 12px;
  line-height: 1.35;
  margin-top: 2px;
}

/* grid hooks for consistent spacing in normal + modal + upsells */
.products-grid{
  --bs-gutter-y: 1rem;
}
.products-grid > [class*="col-"]{
  display: flex;
}
.products-grid > [class*="col-"] > .product-card{
  width: 100%;
}

/* ---------- product page head / purchase ---------- */
.product-wrapper .product-page__head{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.product-wrapper .product-page__micro{
  color: rgba(255,255,255,.52);
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.product-wrapper .product-page__purchase{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 2px;
}

/* tiny spacing normalization inside purchase block */
.product-wrapper .product-page__purchase > .mb-4{
  margin-bottom: .5rem !important;
}

/* ---------- upsells heading microtext ---------- */
.product-wrapper .products-upsells__head{
  text-align: center;
}
.product-wrapper .products-upsells__head h2{
  margin-bottom: 6px !important;
}
.product-wrapper .products-upsells__micro{
  color: rgba(255,255,255,.50);
  font-size: 12px;
  line-height: 1.4;
}

@media (max-width: 767.98px){
  .py-5-nav .section-subtitle{
    margin-bottom: 14px;
  }
  .py-5-nav .products-toolbar{
    margin-bottom: 10px !important;
  }
  .py-5-nav .products-toolbar__hint{
    display: none !important;
  }
  .product-wrapper .product-page__micro{
    font-size: 11px;
  }
}
/* =========================================================
   PRODUCTS PAGE — no sidebar filters / spotlight panel
========================================================= */

.py-5-nav .products-spotlight{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.07);
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(255,255,255,.02), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.012));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.015),
    0 10px 24px rgba(0,0,0,.16);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  overflow: hidden;
  padding: 14px 16px;
}

.py-5-nav .products-spotlight__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.py-5-nav .products-spotlight__item{
  min-height: 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.05);
  background: rgba(255,255,255,.01);
}

.py-5-nav .products-spotlight__label{
  color: rgba(255,255,255,.44);
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.py-5-nav .products-spotlight__value{
  color: rgba(255,255,255,.86);
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* group modal subtitle */
.py-5-nav .products-group-modal__subtitle{
  color: rgba(255,255,255,.46) !important;
  font-size: 12px;
  line-height: 1.35;
  margin-top: 2px;
}

/* prevent overlay CTA shift with longer label */
.row.products .product-card .overlay .btn,
.products-grid .product-card .overlay .btn{
  white-space: nowrap !important;
  min-width: 118px;
  justify-content: center;
}

@media (max-width: 991.98px){
  .py-5-nav .products-spotlight__grid{
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .py-5-nav .products-spotlight{
    padding: 12px;
  }

  .py-5-nav .products-spotlight__item{
    min-height: 48px;
  }
}
/* =========================================================
   PRODUCTS PAGE — trust bar (replaces spotlight cards)
========================================================= */

.py-5-nav .products-trustbar{
  margin-top: 2px;
}

.py-5-nav .products-trustbar__inner{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;

  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.07);
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(255,255,255,.02), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.01));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.015),
    0 10px 24px rgba(0,0,0,.16);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);

  padding: 12px 14px;
}

.py-5-nav .products-trustbar__chip{
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.01);

  color: rgba(255,255,255,.72);
  font-size: 11px;
  line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.py-5-nav .products-trustbar__chip--category{
  color: rgba(255,255,255,.88);
  border-color: rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
}

.py-5-nav .products-trustbar__dot{
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  flex: 0 0 auto;
}

@media (max-width: 767.98px){
  .py-5-nav .products-trustbar__inner{
    justify-content: flex-start;
    gap: 8px;
    padding: 10px 12px;
  }

  .py-5-nav .products-trustbar__dot{
    display: none;
  }

  .py-5-nav .products-trustbar__chip{
    font-size: 10px;
    min-height: 26px;
    padding: 0 9px;
  }
}
/* Products page heading — center align */
.py-5-nav > .section-title,
.py-5-nav > .section-subtitle {
  text-align: center !important;
}

.py-5-nav > .section-title {
  margin-left: auto;
  margin-right: auto;
}

.py-5-nav > .section-subtitle {
  margin-left: auto;
  margin-right: auto;
}

.py-5-nav > .section-subtitle p {
  margin-left: auto;
  margin-right: auto;
}
/* Products page heading — force center */
.py-5-nav > .section-title,
.py-5-nav > .section-title h1,
.py-5-nav .section-title,
.py-5-nav .section-title h1 {
  text-align: center !important;
  justify-content: center !important;
}

.py-5-nav > .section-title h1,
.py-5-nav .section-title h1 {
  width: 100% !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.py-5-nav > .section-subtitle,
.py-5-nav > .section-subtitle p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.py-5-nav > .section-subtitle p {
  max-width: 720px;
}
/* =========================================================
   v5 overrides — favicon/share, cleaner currency, no login,
   groups-first catalog toolbar
   ========================================================= */

nav[data-component-id="navbar"] .navbar-nav.gap-3{
  gap: .75rem !important;
  align-items: center !important;
}

nav[data-component-id="navbar"] .nav-currency{
  display: flex;
  align-items: center;
}

nav[data-component-id="navbar"] .currency-selector,
nav[data-component-id="navbar"] .currency-selector.lg{
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 92px;
  height: 42px;
}

nav[data-component-id="navbar"] .currency-selector::before{
  content: none !important;
}

nav[data-component-id="navbar"] .currency-selector::after{
  content: "";
  position: absolute;
  right: 13px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 1.8px solid rgba(255,255,255,.72);
  border-bottom: 1.8px solid rgba(255,255,255,.72);
  transform: rotate(45deg);
  pointer-events: none;
}

nav[data-component-id="navbar"] .currency-selector select,
.navbar.component .currency-selector select{
  -webkit-appearance: none !important;
  appearance: none !important;
  min-width: 92px !important;
  height: 42px !important;
  padding: 0 34px 0 14px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(14,15,19,.82) !important;
  color: rgba(255,255,255,.96) !important;
  font-size: .95rem !important;
  font-weight: 600 !important;
  line-height: 42px !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.18) !important;
  background-image: none !important;
  outline: none !important;
  text-indent: 0 !important;
  cursor: pointer;
}

nav[data-component-id="navbar"] .currency-selector select:hover,
nav[data-component-id="navbar"] .currency-selector select:focus{
  border-color: rgba(255,255,255,.18) !important;
  background: rgba(18,19,24,.92) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.22) !important;
}

nav[data-component-id="navbar"] .currency-selector .choices,
nav[data-component-id="navbar"] .currency-selector .choices__inner,
nav[data-component-id="navbar"] .currency-selector .choices__inner::before,
nav[data-component-id="navbar"] .currency-selector .choices[data-type*="select-one"]::after{
  content: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Catalog toolbar */
.cc-catalog-toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  background: rgba(255,255,255,.02);
  margin-bottom: 18px !important;
}
.cc-catalog-toolbar.is-visible{
  display: flex !important;
}
.cc-toolbar-left{
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.cc-toolbar-title{
  font-size: .95rem;
  font-weight: 600;
  color: rgba(255,255,255,.94);
}
.cc-toolbar-sub{
  font-size: .82rem;
  color: rgba(255,255,255,.56);
}
.cc-toolbar-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(15,16,20,.9);
  color: rgba(255,255,255,.92);
  font-weight: 600;
  font-size: .86rem;
  text-decoration: none;
}
.cc-toolbar-btn:hover{
  border-color: rgba(255,255,255,.16);
  background: rgba(18,20,25,.96);
  color: rgba(255,255,255,.96);
}

/* Groups-first cards */
.cc-group-card{
  display: block;
}
.cc-group-card .overlay{
  opacity: 0;
  transition: opacity .28s ease;
}
.cc-group-card:hover .overlay{
  opacity: 1;
}
.cc-group-card .overlay-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  left: 18px;
  bottom: 18px;
  height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(12,13,16,.82);
  backdrop-filter: blur(10px);
  color: rgba(255,255,255,.95);
  font-size: .84rem;
  font-weight: 600;
}
.cc-group-card .overlay-badge::after{
  content: "→";
  opacity: .8;
}

@media (max-width: 768px){
  nav[data-component-id="navbar"] .currency-selector,
  nav[data-component-id="navbar"] .currency-selector.lg{
    min-width: 84px;
  }
  nav[data-component-id="navbar"] .currency-selector select{
    min-width: 84px !important;
    padding-left: 12px !important;
    padding-right: 30px !important;
  }
  .cc-catalog-toolbar{
    flex-direction: column;
    align-items: flex-start;
  }
}


/* =========================================================
   v6 micro-tune — tighter currency spacing
   ========================================================= */
nav[data-component-id="navbar"] .currency-selector,
nav[data-component-id="navbar"] .currency-selector.lg{
  min-width: 76px !important;
  height: 40px !important;
}

nav[data-component-id="navbar"] .currency-selector::after{
  right: 11px !important;
  width: 7px !important;
  height: 7px !important;
  margin-top: -5px !important;
}

nav[data-component-id="navbar"] .currency-selector select,
.navbar.component .currency-selector select{
  min-width: 76px !important;
  height: 40px !important;
  padding: 0 26px 0 11px !important;
  border-radius: 13px !important;
  font-size: .92rem !important;
  letter-spacing: .01em !important;
  text-align: left !important;
}

@media (max-width: 768px){
  nav[data-component-id="navbar"] .currency-selector,
  nav[data-component-id="navbar"] .currency-selector.lg{
    min-width: 72px !important;
  }
  nav[data-component-id="navbar"] .currency-selector select{
    min-width: 72px !important;
    padding: 0 24px 0 10px !important;
  }
}


/* =========================================================
   v7 micro-tune — remove extra left gap in currency
   ========================================================= */
nav[data-component-id="navbar"] .currency-selector,
nav[data-component-id="navbar"] .currency-selector.lg{
  min-width: 68px !important;
  width: 68px !important;
  height: 38px !important;
}

nav[data-component-id="navbar"] .currency-selector::after{
  right: 9px !important;
  width: 6px !important;
  height: 6px !important;
  margin-top: -4px !important;
}

nav[data-component-id="navbar"] .currency-selector select,
.navbar.component .currency-selector select{
  min-width: 68px !important;
  width: 68px !important;
  height: 38px !important;
  padding: 0 18px 0 0 !important;
  border-radius: 12px !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  text-align-last: center !important;
  text-indent: 0 !important;
  box-sizing: border-box !important;
  background-position: right 8px center !important;
}

nav[data-component-id="navbar"] .currency-selector option{
  text-align: left;
}

@media (max-width: 768px){
  nav[data-component-id="navbar"] .currency-selector,
  nav[data-component-id="navbar"] .currency-selector.lg,
  nav[data-component-id="navbar"] .currency-selector select{
    min-width: 64px !important;
    width: 64px !important;
  }
}


/* =========================================================
   v8 fixes — real clean currency selector + no list marker
   ========================================================= */
nav[data-component-id="navbar"] .navbar-nav,
nav[data-component-id="navbar"] .navbar-nav li{
  list-style: none !important;
}
nav[data-component-id="navbar"] .nav-currency{
  list-style: none !important;
}
nav[data-component-id="navbar"] .nav-currency::marker{
  content: "" !important;
  font-size: 0 !important;
}

nav[data-component-id="navbar"] .currency-selector,
nav[data-component-id="navbar"] .currency-selector.lg{
  min-width: 62px !important;
  width: 62px !important;
  height: 38px !important;
}

nav[data-component-id="navbar"] .currency-selector::after{
  right: 8px !important;
  width: 6px !important;
  height: 6px !important;
  margin-top: -4px !important;
}

nav[data-component-id="navbar"] .currency-selector select,
.navbar.component .currency-selector select{
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: none !important;
  min-width: 62px !important;
  width: 62px !important;
  height: 38px !important;
  padding: 0 14px 0 0 !important;
  border-radius: 12px !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  line-height: 38px !important;
  text-align: center !important;
  text-align-last: center !important;
  text-indent: 0 !important;
  letter-spacing: 0 !important;
  background-position: right 8px center !important;
}

nav[data-component-id="navbar"] .currency-selector select::-ms-expand{
  display: none !important;
}

@media (max-width: 768px){
  nav[data-component-id="navbar"] .currency-selector,
  nav[data-component-id="navbar"] .currency-selector.lg,
  nav[data-component-id="navbar"] .currency-selector select{
    min-width: 60px !important;
    width: 60px !important;
  }
}


/* =========================================================
   v9 fixes — truly tighter currency control
   ========================================================= */
nav[data-component-id="navbar"] .currency-selector,
nav[data-component-id="navbar"] .currency-selector.lg{
  min-width: 54px !important;
  width: 54px !important;
  height: 36px !important;
}

nav[data-component-id="navbar"] .currency-selector::after{
  right: 7px !important;
  width: 5px !important;
  height: 5px !important;
  margin-top: -3px !important;
  border-right-width: 1.6px !important;
  border-bottom-width: 1.6px !important;
}

nav[data-component-id="navbar"] .currency-selector select,
.navbar.component .currency-selector select{
  min-width: 54px !important;
  width: 54px !important;
  height: 36px !important;
  padding: 0 16px 0 9px !important;
  border-radius: 11px !important;
  font-size: .88rem !important;
  line-height: 36px !important;
  text-align: left !important;
  text-align-last: left !important;
  background-position: right 7px center !important;
}

@media (max-width: 768px){
  nav[data-component-id="navbar"] .currency-selector,
  nav[data-component-id="navbar"] .currency-selector.lg,
  nav[data-component-id="navbar"] .currency-selector select{
    min-width: 52px !important;
    width: 52px !important;
  }
}


/* =========================================================
   v10 fixes — better currency balance
   ========================================================= */
nav[data-component-id="navbar"] .currency-selector,
nav[data-component-id="navbar"] .currency-selector.lg{
  min-width: 64px !important;
  width: 64px !important;
  height: 38px !important;
}

nav[data-component-id="navbar"] .currency-selector::after{
  right: 8px !important;
  width: 5px !important;
  height: 5px !important;
  margin-top: -3px !important;
  border-right-width: 1.6px !important;
  border-bottom-width: 1.6px !important;
}

nav[data-component-id="navbar"] .currency-selector select,
.navbar.component .currency-selector select{
  min-width: 64px !important;
  width: 64px !important;
  height: 38px !important;
  padding: 0 14px 0 8px !important;
  border-radius: 12px !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  line-height: 38px !important;
  text-align: center !important;
  text-align-last: center !important;
  text-indent: 0 !important;
  letter-spacing: 0 !important;
  background-position: right 8px center !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px){
  nav[data-component-id="navbar"] .currency-selector,
  nav[data-component-id="navbar"] .currency-selector.lg,
  nav[data-component-id="navbar"] .currency-selector select{
    min-width: 62px !important;
    width: 62px !important;
  }
}


/* =========================================================
   v11 final tune — clean currency pill (no fake gap)
   ========================================================= */
nav[data-component-id="navbar"] .currency-selector,
nav[data-component-id="navbar"] .currency-selector.lg{
  min-width: 68px !important;
  width: 68px !important;
  height: 38px !important;
}

nav[data-component-id="navbar"] .currency-selector::after{
  content: none !important;
}

nav[data-component-id="navbar"] .currency-selector select,
.navbar.component .currency-selector select{
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: none !important;
  min-width: 68px !important;
  width: 68px !important;
  height: 38px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  line-height: 38px !important;
  text-align: center !important;
  text-align-last: center !important;
  text-indent: 0 !important;
  letter-spacing: 0 !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

nav[data-component-id="navbar"] .currency-selector select::-ms-expand{
  display: none !important;
}

@media (max-width: 768px){
  nav[data-component-id="navbar"] .currency-selector,
  nav[data-component-id="navbar"] .currency-selector.lg,
  nav[data-component-id="navbar"] .currency-selector select{
    min-width: 66px !important;
    width: 66px !important;
  }
}


/* =========================================================
   v13 final — truly centered currency label
   ========================================================= */
nav[data-component-id="navbar"] .currency-selector,
nav[data-component-id="navbar"] .currency-selector.lg{
  position: relative !important;
  min-width: 68px !important;
  width: 68px !important;
  height: 38px !important;
}

nav[data-component-id="navbar"] .currency-selector::after{
  content: none !important;
}

nav[data-component-id="navbar"] .currency-selector select,
.navbar.component .currency-selector select{
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: none !important;
  min-width: 68px !important;
  width: 68px !important;
  height: 38px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  opacity: 0 !important;
  position: relative !important;
  z-index: 2 !important;
  cursor: pointer !important;
}

nav[data-component-id="navbar"] .currency-selector select::-ms-expand{
  display: none !important;
}

nav[data-component-id="navbar"] .currency-selector .cc-currency-value{
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  font-weight: 700;
  color: rgba(255,255,255,.96);
  pointer-events: none;
  letter-spacing: 0;
  user-select: none;
}

@media (max-width: 768px){
  nav[data-component-id="navbar"] .currency-selector,
  nav[data-component-id="navbar"] .currency-selector.lg,
  nav[data-component-id="navbar"] .currency-selector select{
    min-width: 66px !important;
    width: 66px !important;
  }
}


/* =========================================================
   v16 category card fix — stable storefront-like tile ratio
   ========================================================= */
.products-grid .product-card,
#cc-products .product-card{
  overflow: hidden !important;
}

.products-grid .product-card__media,
#cc-products .product-card__media{
  position: relative !important;
  height: 270px !important;
  min-height: 270px !important;
  max-height: 270px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,.02) !important;
}

.products-grid .product-card__media .cc-card-media-img,
#cc-products .product-card__media .cc-card-media-img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

.products-grid .product-card__media .product-card__placeholder,
#cc-products .product-card__media .product-card__placeholder{
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.products-grid .product-card .card-body,
#cc-products .product-card .card-body{
  min-height: 148px !important;
}

.cc-group-card .overlay-badge::after{
  content: none !important;
}

@media (max-width: 768px){
  .products-grid .product-card__media,
  #cc-products .product-card__media{
    height: 236px !important;
    min-height: 236px !important;
    max-height: 236px !important;
  }
}