/* ============================================================
   WONDER TOYS — single stylesheet
   The whole storefront's CSS. Sections are concatenated in
   cascade order: later sections intentionally override earlier
   ones, so do not reorder them.
   Page-scoped sections stay scoped by their own root class
   (.th-page / .ab-page), so they cost nothing on other pages.
   ============================================================ */

/* ============================================================================
 * BASE — design system: tokens, navbar, buttons, product card, footer
 * ============================================================================ */

/* ================================================================
   iota international — Premium Dark Theme
   Fonts: Russo One (display) + Manrope (body)
   ================================================================ */

/* ----------------------------------------------------------------
   CSS Custom Properties
   ---------------------------------------------------------------- */
:root {
  --bg:         #0a0a0a;
  --surface-1:  #111111;
  --surface-2:  #1a1a1a;
  --surface-3:  #242424;
  --border:     #2a2a2a;
  --border-2:   #333333;

  --accent:       #e8502a;
  --accent-h:     #ff6b3d;
  --accent-gold:  #e8a030;
  --accent-blue:  #4a9eff;
  --accent-green: #4caf50;

  --text-1: #ffffff;
  --text-2: #aaaaaa;
  --text-3: #666666;

  --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ambient backdrop — near-black ground with a deep navy pool floating over it */
  --amb-base: #0b0b0e;
  --amb-core: rgba(28, 58, 138, 0.62);
  --amb-halo: rgba(35, 169, 224, 0.10);

  --ann-h:        0px;    /* announcement bar removed — kept at 0 for layout calc()s */
  /* Header rows. --nav-h is what page content must clear, so it tracks the real
     rendered height (the category row is only counted when it is present). */
  --nav-row:      58px;
  --nav-cat-row:  38px;
  --nav-h:        var(--nav-row);
  --max-w:        1440px;
  --pad-x:        clamp(16px, 4vw, 64px);
  --slider-r:     20px;   /* hero card border-radius */

  --ease:         cubic-bezier(.4, 0, .2, 1);
  --ease-out:     cubic-bezier(0, 0, .2, 1);
  --dur-fast:     .15s;
  --dur-base:     .28s;
  --dur-slow:     .55s;
}

/* ----------------------------------------------------------------
   Reset
   ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--amb-base);
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ================================================================
   AMBIENT BACKDROP
   A fixed, slowly drifting glow behind the whole storefront. It lives
   on two fixed pseudo-elements rather than `background-attachment:
   fixed` (which jitters badly while scrolling on mobile) and animates
   only transform/opacity, so it never triggers layout or paint.
   Page surfaces sit above it — keep them transparent to let it show.
   ================================================================ */
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}
/* the core: a wide navy pool a little above centre */
body::before {
  inset: -25% -15%;
  background: radial-gradient(
    closest-side,
    var(--amb-core) 0%,
    color-mix(in oklab, var(--amb-core) 45%, transparent) 46%,
    transparent 76%
  );
  animation: amb-core 26s ease-in-out infinite alternate;
}
/* a slower, dimmer counter-drift so the pool never looks like a static oval */
body::after {
  inset: -30% -20%;
  background: radial-gradient(
    closest-side,
    var(--amb-halo) 0%,
    transparent 70%
  );
  opacity: .55;
  animation: amb-halo 38s ease-in-out infinite alternate;
}
@keyframes amb-core {
  from { transform: translate3d(-3%, -2%, 0) scale(1);    }
  to   { transform: translate3d( 3%,  2%, 0) scale(1.12); }
}
@keyframes amb-halo {
  from { transform: translate3d( 5%,  3%, 0) scale(1.08); opacity: .55; }
  to   { transform: translate3d(-5%, -3%, 0) scale(.94);  opacity: .30; }
}
@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after { animation: none; }
}
a  { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { cursor: pointer; font-family: var(--font); background: none; border: none; color: inherit; }
ul { list-style: none; }

/* ================================================================
   HERO SECTION — 100 vh wrapper
   ================================================================ */
#hero-section {
  position: relative;
  height: 100vh;
  min-height: 560px;
  background: linear-gradient(to bottom, #0a0a0a 0%, #0a0a0a 24%, #fcf7ee 100%);
  /* top pad = navbar height so card floats below nav; sides/bottom for card margins */
  padding: var(--nav-h) clamp(14px, 3vw, 48px) clamp(14px, 2vw, 24px);
}

/* ================================================================
   NAVBAR
   ================================================================ */
/* Full-bleed dark bar, on every route. This is the only rule that themes the header —
   there is no white/scrolled variant, no radius and no outer padding. */
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  background: #0a0a0c;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}
/* The category row makes the bar taller, so page content must clear more. Set on the
   root (not #navbar) — `main` reads --nav-h by inheritance, not from the header. */
:root:has(#navbar.has-cats) {
  --nav-h: calc(var(--nav-row) + var(--nav-cat-row));
}

/* Logo sits in its own left column spanning both rows, so it can be large and both
   rows start clear of it. The rows must be EXPLICIT — `grid-row: 1 / -1` only spans
   the explicit grid, so with implicit rows the logo would sit in row 1 alone. */
.nav-grid {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: clamp(14px, 2.4vw, 28px);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: var(--nav-row);
  column-gap: clamp(16px, 2.4vw, 34px);
  align-items: center;
}
#navbar.has-cats .nav-grid {
  grid-template-rows: var(--nav-row) var(--nav-cat-row);
}

/* Logo always renders in its original brand colours (never inverted/tinted). */
.logo img {
  filter: none;
}

.nav-container {
  grid-column: 2;
  height: var(--nav-row);
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Logo — left column, spanning the links row + the category row */
.logo {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: center;
  display: flex;
  align-items: center;
  transition: opacity var(--dur-fast) var(--ease);
}
.logo:hover { opacity: .8; }
/* spans both rows, so it can run nearly the full header height */
.logo img {
  height: 6vw;
  width: auto;
  /* squash-and-stretch reads right only if the logo is planted on its feet */
  transform-origin: bottom center;
  /* A toy brand's logo, so: bounce, not shake. Shake means "wrong" in UI — it's what a
     rejected password does. The cycle is mostly rest: it hops for about a second, then
     stands still for two. A logo moving without pause in a fixed header is exhausting
     to sit next to, and it never stops being in the corner of your eye. */
  animation: logo-bounce 3.6s ease-in-out infinite;
}
#navbar:not(.has-cats) .logo img { height: clamp(34px, 3.2vw, 44px); }

@keyframes logo-bounce {
  /* 0 → 62% is the pause. Transform only, so this stays on the compositor and costs
     the main thread nothing while it loops. */
  0%, 62%, 100% { transform: translateY(0) scaleY(1); }
  68% { transform: translateY(-7px) scaleY(1.05); }
  74% { transform: translateY(0) scaleY(.93); }
  80% { transform: translateY(-3px) scaleY(1.02); }
  86% { transform: translateY(0) scaleY(.97); }
  92% { transform: translateY(0) scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .logo img { animation: none; }
}

/* ----------------------------------------------------------------
   Nav Links (desktop)
   ---------------------------------------------------------------- */
.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1;
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  /* uppercase sets tighter than lowercase, so it needs the spacing back */
  letter-spacing: .07em;
  color: rgba(255,255,255,.7);
  border-radius: 8px;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  white-space: nowrap;
}
/* icon sits a touch brighter than the label so it reads at 12.5px */
.nav-link-ic {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: .85;
  transition: opacity var(--dur-fast) var(--ease);
}
.nav-link:hover .nav-link-ic { opacity: 1; }

/* No active state by design — every link looks the same; only hover responds.
   `aria-current="page"` still marks the current page for screen readers. */
.nav-link:hover { color: var(--text-1); background: rgba(255,255,255,.07); }

.chevron {
  transition: transform var(--dur-fast) var(--ease);
  flex-shrink: 0;
}

/* ----------------------------------------------------------------
   Category row — second row of the header card. Every category from
   Admin → Categories; scrolls sideways when they outgrow the bar.
   ---------------------------------------------------------------- */
.nav-cats {
  grid-column: 2;
  height: var(--nav-cat-row);
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  /* hairline separates the two rows without boxing the logo column in */
  border-top: 1px solid rgba(255, 255, 255, .06);
  -webkit-mask-image: linear-gradient(to right, #000 96%, transparent);
  mask-image: linear-gradient(to right, #000 96%, transparent);
}
.nav-cats::-webkit-scrollbar { display: none; }

.nav-cat {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  /* uppercase sets tighter than lowercase, so it needs the spacing back */
  letter-spacing: .06em;
  color: rgba(255, 255, 255, 0.62);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
/* emoji set in Admin → Categories */
.nav-cat-ic { font-size: 14px; line-height: 1; }
.mobile-cat { display: flex; align-items: center; gap: 9px; }
.nav-cat:first-child { margin-left: -14px; }
.nav-cat:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.nav-cat.is-active { color: #fff; background: rgba(255, 255, 255, 0.14); }
/* ================================================================
   MEGA MENU — compact category dropdown
   ================================================================ */
/* little pointer notch */
/* Category grid — 2 per row */
/* View-all footer */
/* Featured panel (5th column) */

/* ================================================================
   NAV RIGHT — search + icons wrapper
   ================================================================ */
.nav-right {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 20px);
  flex: 1;
  min-width: 0;
  justify-content: flex-end;
}

/* ================================================================
   SEARCH BAR — dark pill inside a cyan→purple→pink gradient border.
   The two-layer background paints the fill to the padding box and the
   gradient to the border box, so the border itself is the gradient.
   ================================================================ */
.search-bar {
  flex: 1;
  max-width: 440px;
  min-width: 130px;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-inline: 16px 5px;
  border: 1.5px solid transparent;
  border-radius: 100px;
  background-image:
    linear-gradient(#0e0e12, #0e0e12),
    linear-gradient(90deg, #22d3ee 0%, #8b5cf6 52%, #ec4899 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  transition: box-shadow var(--dur-fast) var(--ease);
}
.search-bar:focus-within {
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.22);
}

/* magnifier lives at the right end of the pill */
.search-go {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.search-go:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }

.search-input-wrap {
  flex: 1;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.search-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font: 500 14px/1 var(--font);
  color: var(--text-1);
  position: relative;
  z-index: 2;
  /* hide default placeholder since we use custom typewriter */
  caret-color: var(--accent);
}
.search-input::-webkit-search-cancel-button { display: none; }
.search-input::placeholder { color: transparent; }

.tw-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  font: 400 14px/1 var(--font);
  color: var(--text-3);
  pointer-events: none;
  z-index: 1;
  white-space: nowrap;
}
.tw-placeholder.is-hidden { display: none; }

/* ================================================================
   NAV ACTIONS (right icons)
   ================================================================ */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* icon in a rounded square, label underneath, badge on the square's corner */
.nav-icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.82);
  transition: color var(--dur-fast) var(--ease);
}
.nav-act-box {
  position: relative;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #16161b;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.nav-act-box svg { width: 18px; height: 18px; }
.nav-act-label {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.nav-icon-btn:hover { color: #fff; }
.nav-icon-btn:hover .nav-act-box { background: #202028; border-color: rgba(255, 255, 255, 0.18); }
.nav-icon-btn:hover .nav-act-label { color: rgba(255, 255, 255, 0.9); }

.cart-badge {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 18px; height: 18px;
  background: #ef4444;
  color: #fff;
  font: 800 10px/18px var(--font);
  text-align: center;
  border-radius: 10px;
  padding-inline: 4px;
  border: 2px solid #0a0a0c;
  pointer-events: none;
}

/* Hamburger (mobile only) */
.hamburger {
  display: none;
  width: 40px; height: 40px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 9px;
  transition: background var(--dur-fast) var(--ease);
}
.hamburger:hover { background: rgba(255,255,255,.08); }
.hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--text-1);
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease), width var(--dur-base) var(--ease);
}
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; transform: translateX(-6px); }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ================================================================
   MOBILE MENU
   ================================================================ */
.mobile-menu {
  display: none; /* shown on mobile via media query */
  position: fixed;
  inset: 0;
  top: var(--nav-h);
  background: rgba(9,9,9,.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 800;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease);
}
.mobile-menu.is-open { transform: translateX(0); }

.mobile-menu-inner {
  padding: 20px var(--pad-x) 40px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 12px;
  color: var(--text-3);
}
.mobile-search input {
  flex: 1; background: none; border: none; outline: none;
  font: 400 15px var(--font); color: var(--text-1);
}
.mobile-search input::placeholder { color: var(--text-3); }

.mobile-nav { display: flex; flex-direction: column; }

/* One size for every row in the drawer — pages and categories are the same kind of
   thing to whoever opened it, and they used to be set 2.5px apart for no reason. */
:root { --drawer-item: 15.5px; }

.mobile-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  font-size: var(--drawer-item);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  color: var(--text-1);
  transition: color var(--dur-fast) var(--ease);
}
.mobile-nav-link .nav-link-ic { width: 19px; height: 19px; }
.mobile-nav-link:hover { color: var(--accent); }

/* Categories inside the mobile drawer — same list as the desktop category row */
.mobile-cats {
  display: flex;
  flex-direction: column;
  padding-top: 18px;
}
.mobile-sec-heading {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 4px;
}
.mobile-cat {
  padding: 14px 0;
  font-size: var(--drawer-item);
  font-weight: 500;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
  transition: color var(--dur-fast) var(--ease);
}
.mobile-cat:hover { color: var(--accent); }

/* Follow Us — the same accounts as the footer, from Admin → Settings */
.mobile-socials { padding-top: 20px; }
.mobile-socials-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.mobile-social-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: #16161b;
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--text-2);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.mobile-social-btn:hover {
  color: #fff;
  background: #202028;
  border-color: rgba(255, 255, 255, .18);
}

/* Contact — full-width rows, because on a phone every one of these is a real action:
   tel: dials, mailto: composes, wa.me opens the app. */
.mobile-cta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 20px;
}
.mobile-cta-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 11px 14px;
  border-radius: 11px;
  background: #16161b;
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--text-1);
  font-size: 14px;
  font-weight: 600;
  /* an email address has no spaces to break on and would push the drawer sideways */
  overflow-wrap: anywhere;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.mobile-cta-btn:hover { background: #202028; border-color: rgba(255, 255, 255, .18); }
.mobile-cta-btn svg { width: 19px; height: 19px; flex: none; }
/* WhatsApp owns its green — the button is unmistakable at a glance */
.mobile-cta-btn--wa {
  background: #1f8f4e;
  border-color: transparent;
  color: #fff;
}
.mobile-cta-btn--wa:hover { background: #24a35a; border-color: transparent; }

.mobile-menu-footer {
  margin-top: auto;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.8;
}

/* ================================================================
   HERO SLIDER — Card style (gonoise-inspired)
   ================================================================ */
.hero-slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--slider-r);
  user-select: none;
  /* subtle shadow to lift the card off the dark bg */
  box-shadow: 0 8px 48px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
}

/* Individual slide — stack over each other */
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .75s var(--ease), visibility .75s var(--ease);
  pointer-events: none;
}
.slide--active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.slide-bg { position: absolute; inset: 0; }
.slide-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Gradient overlay — left side dark for text readability, right shows product */
.slide-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgba(0,0,0,.78) 0%,
      rgba(0,0,0,.55) 28%,
      rgba(0,0,0,.18) 54%,
      rgba(0,0,0,0)   72%
    ),
    linear-gradient(to top,
      rgba(0,0,0,.35) 0%,
      rgba(0,0,0,0)   25%
    );
  z-index: 1;
}

/* Text content */
.slide-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + 24px) var(--pad-x) 70px;
}

.slide-text {
  max-width: 540px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Staggered entrance animation for active slide */
.slide--active .slide-text > * {
  animation: riseUp .75s var(--ease-out) both;
}
.slide--active .slide-tag      { animation-delay: .08s; }
.slide--active .slide-headline { animation-delay: .18s; }
.slide--active .slide-desc     { animation-delay: .28s; }
.slide--active .slide-price    { animation-delay: .36s; }
.slide--active .slide-cta      { animation-delay: .44s; }

@keyframes riseUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Tag pill */
.slide-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-radius: 100px;
}
.slide-tag--orange { background: var(--accent);      color: #fff; }
.slide-tag--gold   { background: var(--accent-gold); color: #000; }
.slide-tag--blue   { background: var(--accent-blue); color: #000; }

/* Headline */
.slide-headline {
  font-size: clamp(30px, 4.8vw, 64px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -1.5px;
  color: var(--text-1);
}

/* Desc */
.slide-desc {
  font-size: clamp(14px, 1.4vw, 17px);
  font-weight: 400;
  color: rgba(255,255,255,.68);
  line-height: 1.65;
  max-width: 420px;
}

/* Price row */
.slide-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.price-now {
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 800;
  color: var(--text-1);
}
.price-was {
  font-size: 17px;
  font-weight: 400;
  color: var(--text-3);
  text-decoration: line-through;
}
.price-off {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-green);
  background: rgba(76,175,80,.14);
  padding: 3px 10px;
  border-radius: 100px;
}

/* CTA buttons */
.slide-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 30px;
  background: var(--accent);
  color: #fff;
  font: 600 15px var(--font);
  border-radius: 100px;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn-primary:hover {
  background: var(--accent-h);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(232,80,42,.38);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 30px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  font: 600 15px var(--font);
  border-radius: 100px;
  backdrop-filter: blur(8px);
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn-ghost:hover {
  background: rgba(255,255,255,.15);
  transform: translateY(-2px);
}
.btn-ghost:active { transform: translateY(0); }

/* ================================================================
   SLIDER CONTROLS
   ================================================================ */

/* Prev / Next arrows */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 46px; height: 46px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.hero-slider:hover .slider-arrow { opacity: 1; }
.slider-arrow--prev { left: 0; }
.slider-arrow--next { right: 0; }
.slider-arrow:hover {
  background: rgba(255,255,255,.18);
  transform: translateY(-50%) scale(1.08);
}

/* Dots */
.slider-dots {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}
.dot {
  width: 7px; height: 7px;
  border-radius: 100px;
  background: rgba(255,255,255,.28);
  transition: width var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.dot--active {
  width: 26px;
  background: rgba(255,255,255,.9);
}
.dot:hover { background: rgba(255,255,255,.6); }

/* Progress bar */
.slider-progress {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: rgba(255,255,255,.08);
  z-index: 10;
}
.slider-progress-fill {
  height: 100%;
  width: 0%;
  background: rgba(255,255,255,.85);
  transition: width linear;
  transform-origin: left;
}

/* ================================================================
   RESPONSIVE BREAKPOINTS
   ================================================================ */

/* ================================================================
   NAVBAR RESPONSIVE
   Large ≥1280 · Desktop 1024–1279 · Tablet 768–1023 · Mobile <768
   ================================================================ */

/* ---- Large screens: roomy nav ---- */
@media (min-width: 1280px) {
  .search-bar { max-width: 280px; }
}

/* ---- Desktop: tighten spacing so nothing wraps ---- */
@media (max-width: 1279px) {
  .nav-container { gap: 12px; }
  .nav-link { padding-inline: 10px; font-size: 14px; }
  .search-bar { max-width: 190px; min-width: 120px; }
}

/* ---- Tablet: drop the link row, keep search + icons, show hamburger ---- */
@media (max-width: 1023px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .mobile-menu { display: block; }
  .nav-container { gap: 14px; }
  /* logo | search (fills) | icons */
  .nav-right { flex: 1; justify-content: flex-end; gap: 6px; }
  .search-bar { flex: 1; max-width: 340px; }
  .logo img { height: 44px; }
}

/* ---- Mobile: compact logo + inline search pill + icons
   (pages.css keeps .search-bar visible here and restyles it as a light pill) ---- */
@media (max-width: 767px) {
  .nav-container { gap: 8px; padding-inline: 12px; }
  .nav-actions { gap: 2px; }
  .nav-icon-btn { width: 38px; height: 38px; }
  .logo img { height: 36px; }
  .search-bar { max-width: none; min-width: 0; }
}

/* ---- Very small phones: drop the wishlist icon so nothing squeezes ---- */
@media (max-width: 380px) {
  .logo img { height: 30px; }
}

/* ---- Small mobile ---- */
@media (max-width: 600px) {
  :root {
    --nav-h:   58px;
    --slider-r: 14px;
  }

  #hero-section { padding: var(--nav-h) 8px 8px; }

  .logo img { height: 30px; }
  .search-bar { display: none; }

  .slide-content {
    padding: calc(var(--nav-h) + 16px) 18px 64px;
  }

  .slide-cta { flex-direction: column; align-items: flex-start; }
  .btn-primary, .btn-ghost { padding: 12px 24px; font-size: 14px; }

  /* Always show arrows on mobile (no hover on touch) */
  .slider-arrow { opacity: .6; }
  .slider-arrow--prev { left: 10px; width: 38px; height: 38px; }
  .slider-arrow--next { right: 10px; width: 38px; height: 38px; }
}

@media (max-width: 380px) {
  .nav-actions .nav-icon-btn:first-child { display: none; }
}

/* ---- Prefers reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ================================================================
   SHOP BY CATEGORY SECTION
   ================================================================ */
.cat-section {
  background: #fcf7ee;
  padding: 80px var(--pad-x) 88px;
}

.cat-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
}

/* ── Header ── */
.cat-header {
  margin-bottom: 24px;
}

.cat-heading-accent {
  font-weight: 700;
  color: var(--accent);
}

/* ── Grid ── */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

/* ── Card ── */
.cat-card {
  display: flex;
  flex-direction: column;
  background: #111111;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  position: relative;
  transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease;
  cursor: pointer;
}
.cat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(0,0,0,.22);
}

/* ── Image ── */
.cat-card-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.cat-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.cat-card:hover .cat-card-img { transform: scale(1.07); }

.cat-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 40%,
    rgba(0,0,0,.7) 100%
  );
}

/* ── Icon Badge ── */
.cat-card-icon-ring {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -26px auto 0;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  transition: background .2s ease, color .2s ease;
}
.cat-card:hover .cat-card-icon-ring {
  background: var(--accent);
  color: #ffffff;
}

/* ── Body ── */
.cat-card-body {
  padding: 14px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.cat-card-name {
  font-size: 17px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -.3px;
}

.cat-card-desc {
  font-size: 12.5px;
  color: rgba(255,255,255,.45);
  line-height: 1.6;
  flex: 1;
}

.cat-card-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .2px;
  margin-top: 4px;
  transition: gap .2s ease;
}
.cat-card:hover .cat-card-link { gap: 8px; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (max-width: 700px) {
  .cat-section { padding: 48px var(--pad-x) 56px; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cat-header { margin-bottom: 20px; }
  .cat-card-name { font-size: 15px; }
  .cat-card-icon-ring { width: 44px; height: 44px; margin-top: -22px; }
}
@media (max-width: 420px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cat-card-body { padding: 12px 12px 16px; }
  .cat-card-name { font-size: 14px; }
  .cat-card-desc { font-size: 11.5px; }
}

/* ================================================================
   WHY CHOOSE iota SECTION
   ================================================================ */
.wci-section {
  background: #fcf7ee;
  padding: 0 var(--pad-x) 88px;
}

.wci-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
}

.wci-header {
  margin-bottom: 28px;
}

.wci-accent {
  font-weight: 700;
  color: var(--accent);
}

/* ── Grid ── */
.wci-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* ── Card ── */
.wci-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 28px 26px 26px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
  transition: box-shadow .25s ease, transform .25s ease;
}
.wci-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,.1);
  transform: translateY(-3px);
}

/* ── Icon ── */
.wci-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(232,80,42,.08);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Text ── */
.wci-card-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.wci-card-title {
  font-size: 15.5px;
  font-weight: 700;
  color: #0a0a0a;
  letter-spacing: -.2px;
  line-height: 1.3;
}

.wci-card-desc {
  font-size: 13px;
  color: rgba(0,0,0,.48);
  line-height: 1.65;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .wci-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .wci-section { padding: 0 14px 56px; }
  .wci-grid { grid-template-columns: 1fr; gap: 10px; }
  .wci-card { padding: 20px 18px; gap: 14px; }
  .wci-icon { width: 44px; height: 44px; border-radius: 12px; }
  .wci-card-title { font-size: 14.5px; }
  .wci-card-desc { font-size: 12.5px; }
}

/* ================================================================
   PRODUCTS SECTION
   ================================================================ */
.products-section {
  background: #fcf7ee;
  padding: 72px var(--pad-x) 80px;
}

.products-container {
  max-width: var(--max-w);
  margin-inline: auto;
}

/* ---- Section Header ---- */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

/* Prev / Next nav buttons */
.ps-nav-btns { display: flex; gap: 8px; }

.ps-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid #cccccc;
  background: #ffffff;
  color: #222222;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
  flex-shrink: 0;
}
.ps-btn:hover {
  background: #111111;
  border-color: #111111;
  color: #ffffff;
}

/* Only the PDP's "You May Also Like" renders this now. It was #0a0a0a — near-black on a
   dark page, so the heading was there but unreadable. Uppercase to match the other
   section titles on that page (.pdp-sec-title). */
.section-heading {
  font-size: clamp(19px, 2.1vw, 26px);
  font-weight: 400;
  color: #f1f4fc;
  line-height: 1.3;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* Dynamic word in heading */
.dyn-word,
.dyn-word-2 {
  font-weight: 700;
  display: inline-block;
  transition: opacity .25s ease, transform .25s ease;
}
.dyn-word.dyn-exit,
.dyn-word-2.dyn-exit {
  opacity: 0;
  transform: translateY(-6px);
}
@keyframes dynEnter {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0);   }
}
.dyn-word.dyn-enter,
.dyn-word-2.dyn-enter {
  animation: dynEnter .28s ease forwards;
}

/* ---- Products Slider ---- */
.products-slider-wrap {
  overflow: hidden;
  position: relative;
}

.products-track {
  display: flex;
  gap: 16px;
  transition: transform .46s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}

/* Each card in track: 4 visible (3 gaps of 16px = 48px) */
.products-track .product-card {
  flex: 0 0 calc((100% - 48px) / 4);
  min-width: 0;
}

/* ---- Product Card ----
   The most-shared thing on the storefront: /store, /category, the wishlist grid, the
   PDP's related products and the cart drawer all render this. Same material as the rest
   of the site — a sheet of glass on the body's ambient backdrop.
   -------------------------------------------------------------------------------- */
.product-card {
  position: relative;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 20px;
  overflow: hidden;
  transition: background .26s ease, border-color .26s ease, transform .25s cubic-bezier(.2, 1.4, .4, 1);
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
/* The search bar's gradient border, on hover.
   Not the search bar's own technique though: that one paints an opaque fill over a
   gradient (background-clip: padding-box, border-box), which needs the inside to be
   solid — this card is glass. A masked ring keeps the card see-through, and it can
   fade, which a background-image cannot. */
.product-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(90deg, #22d3ee 0%, #8b5cf6 52%, #ec4899 100%);
  /* draw the padding box and the border box, then keep only the difference: the ring */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .26s ease;
  pointer-events: none;
}
.product-card:hover {
  background: rgba(255, 255, 255, .07);
  /* the gradient ring is the edge on hover, so the flat border steps aside */
  border-color: transparent;
  /* no transform here — the tilt is set once, further down, and a second one would
     just silently overwrite this */
}
.product-card:hover::after { opacity: 1; }

/* ── Scroll Reveal ─────────────────────────────────────── */
.product-card.sr-card {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s ease, transform .65s cubic-bezier(0.16, 1, 0.3, 1);
}
.product-card.sr-card.sr-in {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Product Image Area ----
   Product shots are cut out on white, so the well stays light on purpose — a dark well
   would silhouette every toy against its own background. */
.product-img-wrap {
  display: block;
  position: relative;
  background: #f2f3f5;
  overflow: hidden;
}
.product-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e9eaee;
}
.product-img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .4s ease;
}
.product-card:hover .product-img { transform: scale(1.06); }
.product-img-icon { opacity: .4; }

/* Wishlist button — appears on hover. It sits on the light image well, so it keeps its
   light treatment rather than following the card. */
.product-wish {
  position: absolute;
  top: 10px; right: 10px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: none;
  display: flex; align-items: center; justify-content: center;
  color: #888888;
  cursor: pointer;
  opacity: 0;
  transform: scale(.85);
  transition: opacity .2s ease, transform .2s ease, color .15s ease;
  z-index: 2;
}
.product-card:hover .product-wish {
  opacity: 1;
  transform: scale(1);
}
.product-wish:hover { color: #e05252; }

/* ---- Product Info ---- */
.product-info {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Rating */
.product-rating {
  display: flex;
  align-items: center;
  gap: 5px;
}
.stars {
  color: #ffc93c;
  font-size: 12px;
  letter-spacing: .6px;
  line-height: 1;
}
.review-count {
  font-size: 11.5px;
  color: rgba(232, 238, 251, .4);
  font-weight: 400;
}

/* Name */
.product-name {
  font-size: 14.5px;
  font-weight: 700;
  color: #f1f4fc;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-name a { color: inherit; text-decoration: none; transition: color .15s; }
.product-name a:hover { color: #ff8a5c; }

/* Price */
.product-price-row {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.price-original {
  font-size: 12px;
  color: rgba(232, 238, 251, .38);
  text-decoration: line-through;
  font-weight: 400;
}
.price-sale {
  font-size: 17px;
  font-weight: 800;
  color: #f1f4fc;
  letter-spacing: -.3px;
}
.price-off {
  font-size: 11.5px;
  font-weight: 700;
  color: #6fe4a4;
  letter-spacing: .1px;
}
.price-tbd {
  font-size: 13px;
  color: rgba(232, 238, 251, .4);
  font-style: italic;
}

/* Feature line — hidden (cleaner) */
.product-feat { display: none; }

/* Product slogan — 2 lines below name */
.product-slogan {
  font-size: 11.5px;
  color: rgba(232, 238, 251, .5);
  line-height: 1.6;
  font-style: normal;
  margin-top: 1px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: 3.2em;
}

/* Colour swatches — shows a multi-colour product at a glance; hovering a dot previews
   that colour's image on the card. */
.pc-colors {
  display: flex; align-items: center; gap: 5px;
  margin: 4px 0 2px; min-height: 16px;
}
.pc-swatch {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .28);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
  cursor: pointer; flex-shrink: 0;
  transition: transform .14s var(--ease), border-color .14s var(--ease);
}
.pc-swatch:hover { transform: scale(1.18); border-color: #fff; }
.pc-swatch-more { font-size: 10.5px; font-weight: 700; color: rgba(232, 238, 251, .55); }
.pc-colors-label { margin-left: auto; font-size: 10.5px; font-weight: 600; color: rgba(232, 238, 251, .42); }

/* CTA — light on a dark card, the inverse of what it was */
.product-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 11px 18px;
  background: #f1f4fc;
  color: #14161f;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 100px;
  margin-top: 10px;
  transition: background .2s ease, letter-spacing .2s ease;
  cursor: pointer;
  border: none;
  letter-spacing: .3px;
}
.product-cta:hover {
  background: #ffffff;
  letter-spacing: .6px;
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  /* 3 cards visible */
  .products-track .product-card { flex: 0 0 calc((100% - 32px) / 3); }
}
@media (max-width: 768px) {
  .products-section { padding: 48px var(--pad-x) 56px; }
  .section-heading { font-size: 22px; }
  /* 2 cards visible */
  .products-track .product-card { flex: 0 0 calc((100% - 16px) / 2); }
  .products-track { gap: 12px; }
  .ps-btn { width: 36px; height: 36px; }
}
@media (max-width: 420px) {
  .product-info { padding: 11px 11px 13px; }
  .product-name { font-size: 13.5px; }
  .price-sale { font-size: 14.5px; }
}

/* ================================================================
   SECONDARY BANNER SLIDER
   ================================================================ */
.ss-section {
  background: #fcf7ee;
  padding: 0 var(--pad-x) 0;
}

.ss-wrap {
  max-width: 1240px;
  margin: 0 auto;
}

/* Slider viewport */
.ss-slider {
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  user-select: none;
  cursor: grab;
}
.ss-slider:active { cursor: grabbing; }

/* Track */
.ss-track {
  display: flex;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}

/* Each slide */
.ss-slide {
  flex: 0 0 100%;
  min-width: 0;
}
.ss-img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* Dots */
.ss-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
}
.ss-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cccccc;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease, width .25s ease;
}
.ss-dot--active {
  background: #111111;
  width: 22px;
  border-radius: 4px;
}

/* Responsive */
@media (max-width: 640px) {
  .ss-section { padding: 0 14px 0; }
  .ss-slider { border-radius: 16px; }
}

/* ================================================================
   BANNER IMAGE STRIP
   ================================================================ */
.tdv-section {
  background: #fcf7ee;
  padding: 0 var(--pad-x);
}

.tdv-wrap {
  max-width: 1240px;
  margin: 0 auto;
}

.tdv-banner-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
}

@media (max-width: 640px) {
  .tdv-section { padding: 0 14px; }
  .tdv-banner-img { border-radius: 16px; }
}

/* ================================================================
   INSTAGRAM REELS SECTION
   ================================================================ */
.insta-section {
  background: #fcf7ee;
  padding: 72px 0 80px;
  overflow: hidden;
}

.insta-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* ── Two-column body ── */
.insta-body {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.insta-left  { flex: 1; min-width: 0; }
.insta-right { flex: 0 0 240px; }

/* ── Header ── */
.insta-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.insta-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.insta-icon-ring {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 55%, #cc2366 75%, #bc1888 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.insta-handle {
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 800;
  color: #111111;
  letter-spacing: -.4px;
  line-height: 1.15;
}

.insta-tagline {
  font-size: 12.5px;
  color: rgba(0,0,0,.42);
  margin-top: 3px;
}

/* ── Nav buttons (in header) ── */
.insta-nav-btns {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.insta-arr {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #cccccc;
  background: #ffffff;
  color: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.insta-arr:hover  { background: #111111; border-color: #111111; color: #ffffff; }
.insta-arr:disabled { opacity: .3; cursor: default; }

/* ── Viewport & Track ── */
.insta-viewport {
  overflow: hidden;
}

.insta-reel-track {
  display: flex;
  gap: 12px;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}

/* ── Reel Card — 4 visible ── */
.insta-card {
  flex: 0 0 calc((100% - 36px) / 4);   /* 4 cards, 3 gaps × 12px */
  min-width: 0;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #1c1c1c;
  aspect-ratio: 9 / 16;
  cursor: pointer;
}

.insta-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.insta-card:hover .insta-video { transform: scale(1.04); }

.insta-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.28) 0%,
    transparent 35%,
    transparent 60%,
    rgba(0,0,0,.52) 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  pointer-events: none;
}

.insta-reel-icon {
  align-self: flex-end;
  color: rgba(255,255,255,.8);
  line-height: 0;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
}

.insta-mute-btn {
  align-self: flex-end;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  border: none;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: all;
  opacity: 0;
  transform: scale(.8);
  transition: opacity .2s, transform .2s, background .2s;
}
.insta-card:hover .insta-mute-btn { opacity: 1; transform: scale(1); }
.insta-mute-btn:hover { background: rgba(255,255,255,.25); }
.insta-card.is-unmuted { box-shadow: 0 0 0 2.5px #dc2743; }

/* ── QR Panel ── */
.insta-qr-panel {
  background: #ffffff;
  border-radius: 22px;
  padding: 28px 22px 24px;
  box-shadow: 0 2px 20px rgba(0,0,0,.07);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}

.insta-qr-ig-icon {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 55%, #cc2366 75%, #bc1888 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

/* QR with Instagram gradient ring */
.insta-qr-ring {
  padding: 3px;
  border-radius: 18px;
  background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 55%, #cc2366 75%, #bc1888 100%);
  margin-bottom: 12px;
}

.insta-qr-inner {
  background: #ffffff;
  border-radius: 15px;
  padding: 10px;
  line-height: 0;
}

.insta-qr-img {
  width: 140px;
  height: 140px;
  display: block;
  border-radius: 6px;
}

.insta-qr-scan-txt {
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(0,0,0,.4);
  letter-spacing: .8px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.insta-qr-divider {
  width: 100%;
  height: 1px;
  background: #ebebeb;
  margin-bottom: 14px;
}

.insta-qr-handle {
  font-size: 14px;
  font-weight: 800;
  color: #111111;
  letter-spacing: -.2px;
  margin-bottom: 10px;
}

.insta-qr-msg {
  font-size: 12.5px;
  color: rgba(0,0,0,.55);
  line-height: 1.7;
  margin-bottom: 18px;
}
.insta-qr-msg strong {
  color: #111111;
  font-weight: 700;
}

/* Follow button */
.insta-follow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 12px 20px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
  color: #ffffff;
  background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 55%, #cc2366 75%, #bc1888 100%);
  transition: opacity .2s ease, transform .2s ease;
  white-space: nowrap;
}
.insta-follow-btn:hover { opacity: .88; transform: translateY(-1px); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .insta-body    { flex-direction: column; }
  .insta-right   { flex: none; width: 100%; }
  .insta-qr-panel {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 24px;
    padding: 22px 24px;
    flex-wrap: wrap;
  }
  .insta-qr-ig-icon { display: none; }
  .insta-qr-ring  { margin-bottom: 0; flex-shrink: 0; }
  .insta-qr-divider { display: none; }
  .insta-qr-scan-txt { display: none; }
  .insta-follow-btn { width: auto; }
}
@media (max-width: 600px) {
  .insta-section  { padding: 56px 0 64px; }
  .insta-wrap     { padding: 0 14px; }
  .insta-card     { flex: 0 0 calc((100% - 24px) / 3); }
  .insta-reel-track { gap: 8px; }
  .insta-tagline  { display: none; }
}
/* ================================================================
   FOOTER
   ================================================================ */

/* ── Newsletter Strip ── */
/* Subtle accent line on left */
/* ── Trust Stats Strip ── */

/* ── Footer Body ── */
.footer-body {
  background: #111111;
  padding: 72px var(--pad-x) 60px;
}

.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1.2fr 1fr 1.1fr 1.3fr;
  gap: 40px 32px;
}

/* ── Columns ── */
.footer-col-heading {
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(255,255,255,.35);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

/* Brand Column */
.footer-logo { display: inline-block; margin-bottom: 18px; text-decoration: none; }

.footer-logo-text {
  font-family: "Russo One", sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #ffffff;
  letter-spacing: .01em;
  line-height: 1.15;
  display: block;
}

/* the slogan sits under the name — lighter, and set in the body face so it reads as
   a subtitle rather than a second wordmark */
.footer-logo-int {
  display: block;
  margin-top: 4px;
  font-family: var(--font);
  font-weight: 500;
  color: rgba(255,255,255,.5);
  font-size: 14px;
  letter-spacing: .01em;
}

.footer-brand-desc {
  font-size: 13px;
  color: rgba(255,255,255,.45);
  line-height: 1.75;
  margin-bottom: 18px;
  max-width: 280px;
}

/* Social Icons */
.footer-socials {
  display: flex;
  gap: 10px;
}

.footer-social-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.footer-social-btn:hover {
  background: rgba(255,255,255,.12);
  color: #ffffff;
  border-color: rgba(255,255,255,.25);
}

/* Links */
.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.footer-links a {
  font-size: 13.5px;
  color: rgba(255,255,255,.52);
  transition: color .18s ease;
  line-height: 1.4;
}
.footer-links a:hover { color: #ffffff; }

.footer-link--highlight {
  color: rgba(255,200,80,.7) !important;
  font-weight: 600;
}
.footer-link--highlight:hover { color: #ffd250 !important; }

/* Contact List */
.footer-contact-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: rgba(255,255,255,.52);
  font-size: 13px;
  line-height: 1.6;
}

.footer-contact-list li svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: rgba(255,255,255,.4);
}

.footer-contact-list a {
  color: rgba(255,255,255,.52);
  transition: color .18s;
}
.footer-contact-list a:hover { color: #ffffff; }

/* ── Bottom Bar ── */
.footer-bottom {
  background: #0a0a0a;
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 20px var(--pad-x);
}

.footer-bottom-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-copy {
  font-size: 12.5px;
  color: rgba(255,255,255,.32);
}
/* Payment methods strip image */
/* Secured label */

/* Base card style */
.footer-pay-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.06);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .5px;
  white-space: nowrap;
  transition: background .18s ease;
}
.footer-pay-badge:hover { background: rgba(255,255,255,.1); }

/* UPI — purple/indigo */
.footer-pay-badge--upi  {
  color: #a78bfa;
  border-color: rgba(167,139,250,.25);
}
/* Visa — classic blue */
.footer-pay-badge--visa {
  color: #93c5fd;
  border-color: rgba(147,197,253,.25);
}
/* Mastercard */
.footer-pay-badge--mc   {
  color: #fca5a5;
  border-color: rgba(252,165,165,.2);
}
/* RuPay — green */
.footer-pay-badge--rupay {
  color: #6ee7b7;
  border-color: rgba(110,231,183,.2);
}
/* COD — amber */
.footer-pay-badge--cod  {
  color: #fcd34d;
  border-color: rgba(252,211,77,.2);
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .footer-inner {
    grid-template-columns: 1.8fr 1.2fr 1fr 1.2fr;
  }
  .footer-col--contact { grid-column: 1 / -1; }
  .footer-col--contact .footer-contact-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px 32px;
  }
}

@media (max-width: 768px) {
  .footer-body        { padding: 52px 20px 44px; }
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 36px 24px;
  }
  .footer-col--brand  { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .footer-inner       { grid-template-columns: 1fr; }
  .footer-bottom-inner { flex-direction: column; text-align: center; gap: 12px; }
}

/* ================================================================
   ANIMATED STATS STRIP
   ================================================================ */
.stats-strip {
  background: #111111;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 0 var(--pad-x);
}

.stats-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: stretch;
}

.stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 32px 20px;
  text-align: center;
}

.stat-num-wrap {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.stat-num {
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -1px;
  line-height: 1;
}

.stat-suffix {
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}

.stat-label {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,.38);
  letter-spacing: .4px;
  text-transform: uppercase;
}

.stat-sep {
  width: 1px;
  background: rgba(255,255,255,.07);
  margin: 20px 0;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .stats-inner { flex-wrap: wrap; }
  .stat-item   { flex: 0 0 50%; padding: 22px 16px; }
  .stat-sep    { display: none; }
  .stat-item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.07); }
  .stat-item:nth-child(1),
  .stat-item:nth-child(2)  { border-bottom: 1px solid rgba(255,255,255,.07); }
}

/* ================================================================
   CUSTOMER REVIEWS SECTION
   ================================================================ */
.reviews-section {
  background: #fcf7ee;
  padding: 80px var(--pad-x) 88px;
}

.reviews-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
}

.reviews-header {
  margin-bottom: 28px;
}

.reviews-accent {
  font-weight: 700;
  color: var(--accent);
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* ── Review Card ── */
.review-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
  transition: box-shadow .25s ease, transform .25s ease;
}
.review-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,.1);
  transform: translateY(-3px);
}

.review-stars {
  font-size: 16px;
  letter-spacing: 2px;
  color: #f5a623;
  line-height: 1;
}

.review-text {
  font-size: 13.5px;
  color: rgba(0,0,0,.62);
  line-height: 1.7;
  flex: 1;
}

.review-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid #f0f0f0;
}

.review-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #f5a623);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.review-author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.review-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #0a0a0a;
}

.review-meta {
  font-size: 11.5px;
  color: rgba(0,0,0,.4);
}

/* Responsive */
@media (max-width: 960px) {
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .reviews-section { padding: 40px 14px 48px; }
  .reviews-grid    { grid-template-columns: 1fr; gap: 10px; }
  .review-card     { padding: 20px 18px; }
}
/* ================================================================
   WHATSAPP FLOATING BUTTON
   ================================================================ */
/* Pulse ring animation */
@keyframes waPulse {
  0%   { transform: scale(1); opacity: .7; }
  70%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* ================================================================
   ★  MOBILE COMPLETE REDESIGN  (≤ 600px)
   ================================================================ */
@media (max-width: 600px) {

  /* No `html { overflow-x: hidden }` here. Setting overflow on one axis forces the
     other to `auto`, which turns the root into its own scroll container and breaks
     the `scroll-snap-type` it carries — the homepage deck stopped snapping on phones
     and only on phones, because this block starts at 600px. `body` already clips the
     horizontal axis for the whole site, and snapping survives that. */

  /* ── Hero ── */
  #hero-section {
    min-height: 460px;
    height: calc(100svh - 28px);
    padding: var(--nav-h) 8px 8px;
  }
  .slide-headline {
    font-size: clamp(24px, 7vw, 32px);
    letter-spacing: -0.8px;
    line-height: 1.1;
  }
  .slide-text { gap: 12px; max-width: 100%; }
  .slide-desc { font-size: 13px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .slide-price { font-size: 14.5px; }
  .btn-primary { font-size: 13px; padding: 11px 20px; }
  .btn-ghost   { font-size: 13px; padding: 11px 20px; }
  /* hide arrows — swipe to navigate */
  .slider-arrow { display: none !important; }
  .slider-dots  { bottom: 12px; gap: 6px; }
  .slider-dot   { width: 6px; height: 6px; }
  .slider-dot--active { width: 18px; border-radius: 3px; }

  /* ── Products sections ── */
  .products-section { padding: 40px 14px 48px; }
  .section-header   { margin-bottom: 16px; }
  .section-heading  { font-size: 19px; letter-spacing: -0.2px; }
  .ps-btn           { width: 34px; height: 34px; }
  .products-track   { gap: 10px; }
  .products-track .product-card { flex: 0 0 calc((100% - 10px) / 2); }
  /* Card internals */
  .product-img-wrap { aspect-ratio: 1 / 1; }
  .product-info     { padding: 10px 10px 12px; gap: 6px; }
  .product-name     { font-size: 12.5px; line-height: 1.35; }
  .product-slogan   { font-size: 11px; -webkit-line-clamp: 2; line-clamp: 2; }
  .product-rating   { font-size: 10.5px; gap: 4px; }
  .stars            { font-size: 11px; }
  .price-sale       { font-size: 13.5px; }
  .price-original   { font-size: 11px; }
  .price-off        { font-size: 10px; padding: 2px 5px; border-radius: 4px; }
  .product-cta      { font-size: 11.5px; padding: 9px 10px; }

  /* ── Secondary banner slider (ss-section) ── */
  .ss-section  { padding: 0; }
  .ss-slider   { border-radius: 0; }
  .ss-dots     { bottom: 10px; gap: 6px; }
  .ss-dot      { width: 6px; height: 6px; }
  .ss-dot--active { width: 16px; border-radius: 3px; }

  /* ── Banner image strip (tdv-section) ── */
  .tdv-section    { padding: 0; }
  .tdv-banner-img { border-radius: 0; }

  /* ── Instagram section ── */
  .insta-section { padding: 40px 0 48px; }
  .insta-wrap    { padding: 0 14px; }
  .insta-body    { flex-direction: column; gap: 20px; }
  .insta-left    { width: 100%; }
  .insta-right   { width: 100%; }
  .insta-header  { margin-bottom: 12px; }
  .insta-handle  { font-size: 15px; }
  .insta-tagline { display: none; }
  .insta-arr     { width: 32px; height: 32px; }
  /* Show 2 reels at a time */
  .insta-card    { flex: 0 0 calc((100% - 8px) / 2); border-radius: 12px; }
  .insta-reel-track { gap: 8px; }
  /* QR panel: horizontal row layout */
  .insta-qr-panel {
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: 16px;
    gap: 14px;
    border-radius: 16px;
    flex-wrap: nowrap;
  }
  .insta-qr-ig-icon  { display: none; }
  .insta-qr-ring     { margin-bottom: 0; flex-shrink: 0; }
  .insta-qr-inner    { padding: 6px; border-radius: 10px; }
  .insta-qr-img      { width: 72px; height: 72px; }
  .insta-qr-scan-txt { display: none; }
  .insta-qr-divider  { display: none; }
  .insta-qr-handle   { font-size: 13.5px; margin-bottom: 4px; }
  .insta-qr-msg      { font-size: 11.5px; line-height: 1.55; margin-bottom: 10px; }
  .insta-follow-btn  { font-size: 12px; padding: 9px 16px; border-radius: 100px; }
  /* QR text group fills remaining space */
  .insta-qr-panel > *:not(.insta-qr-ring) { flex: 1 1 0; min-width: 0; }
  .insta-qr-panel > .insta-qr-ring        { flex: 0 0 auto; }

  /* ── Footer body ── */
  .footer-body  { padding: 36px 14px 32px; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .footer-col--brand { grid-column: auto; }
  .footer-col-heading { margin-bottom: 10px; font-size: 10px; }
  .footer-col-link    { font-size: 13px; }
  .footer-logo-text   { font-size: 21px; }
  .footer-logo-int    { font-size: 13.5px; }
  .footer-desc        { font-size: 12.5px; }
  .footer-social-links { gap: 8px; }

  /* ── Footer contact ── */
  .footer-contact-list { gap: 10px; }
  .footer-contact-item { font-size: 12.5px; }

  /* ── Footer bottom ── */
  .footer-bottom       { padding: 14px; }
  .footer-bottom-inner { flex-direction: column; text-align: center; gap: 10px; }
  .footer-copy         { font-size: 11px; }
  .footer-made         { font-size: 11px; }
  .footer-pay-badges   { flex-wrap: wrap; justify-content: center; gap: 6px; }
  .footer-pay-badge    { font-size: 10px; padding: 3px 8px; }
}

/* ── Extra small (≤ 390px) ── */
@media (max-width: 390px) {
  .slide-headline { font-size: 22px; }
  .insta-card     { flex: 0 0 calc((100% - 8px) / 2); }
  .products-track .product-card { flex: 0 0 calc((100% - 10px) / 2); }
}

/* Hero slider progress-bar fill animation */
@keyframes hero-progress { from { width: 0%; } to { width: 100%; } }

/* Wishlist icon pulse when a product flies in */
@keyframes nav-pulse { 0% { transform: scale(1); } 35% { transform: scale(1.38); } 60% { transform: scale(.9); } 100% { transform: scale(1); } }
#navWishlist.nav-pulse { animation: nav-pulse .6s ease; }

/* ============================================================
   PRODUCT CARD — wishlist heart + interactive cart button
   ============================================================ */
.product-img-wrap { position: relative; }
.product-img-link { display: contents; }
.pc-wish { position: absolute; top: 10px; right: 10px; z-index: 4; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border: 1px solid rgba(0,0,0,.06); color: #9a9a9a; display: grid; place-items: center; cursor: pointer; transition: transform .18s ease, color .18s ease; }
.pc-wish:hover { transform: scale(1.14); color: var(--accent); }
.pc-wish.is-active { color: var(--accent); }
button.product-cta { border: none; cursor: pointer; font: inherit; width: 100%; }
.nav-pulse { animation: nav-pulse .6s ease; }

/* Bottom footer — uniform muted-white text & icons (no pure white) */
.footer-bottom, .footer-bottom * { color: rgba(255,255,255,.52) !important; }

/* Footer-bottom icons also muted (override earlier white svg rules) */
.footer-bottom svg { color: rgba(255,255,255,.52) !important; }

/* ================================================================
   FOOTER — ARCADE THEME
   Neon accents picked from the brand logo over the existing dark
   footer. Appended last so these overrides win.
   ================================================================ */
.site-footer {
  background: #07070f;
}
/* each trust stat glows in its own logo colour */
.footer-body {
  background: #07070f;
}
.footer-col-heading {
  position: relative;
  padding-bottom: 10px;
}
.footer-col-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 26px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #ff6a2b, #ffd166);
}
.footer-links a:hover { color: #ffd166; }
.footer-contact-list a:hover { color: #2bd9c8; }
.footer-social-btn:hover {
  background: linear-gradient(135deg, #ff6a2b, #ff2da0);
  border-color: transparent;
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(255, 45, 160, 0.35);
}
.footer-bottom {
  background: #05050b;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
/* let the brand text + "view all" glow again (they were muted above) */
.footer-logo-text { color: #ffffff !important; }
.footer-link--highlight, .footer-link--highlight:hover { color: #ffd166 !important; }

/* ============================================================================
 * INNER PAGES — shop, PDP, cart, checkout, account, legal/CMS, sitemap
 * ============================================================================ */

/* ================================================================
   iota international — Inner Pages CSS  (Light Theme)
   Reference: gonoise.com
   ================================================================ */

/* ── Body padding for fixed navbar ── */
/* transparent so the fixed ambient backdrop on <body> shows through */
.inner-page {
  background: transparent;
}

/* The header owns its own look — see the NAVBAR section at the top of this file.
   The old white-on-scroll / dark-at-top variants are gone: it is one dark card now. */

/* ================================================================
   PAGE HERO — light, minimal (gonoise style)
   ================================================================ */
.page-hero {
  background: #f7f7f7;
  padding: 56px var(--pad-x) 48px;
  border-bottom: 1px solid #eeeeee;
}
.page-hero-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
  display: block;
}
.page-hero-title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  color: #0a0a0a;
  letter-spacing: -1px;
  line-height: 1.15;
  margin-bottom: 12px;
}
.page-hero-sub {
  font-size: 15px;
  color: rgba(0,0,0,.5);
  max-width: 480px;
  line-height: 1.7;
}

/* ── Breadcrumb ── */
.breadcrumb {
  background: transparent;
  padding: 12px var(--pad-x);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.breadcrumb-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: rgba(232, 238, 251, .42);
}
.breadcrumb-inner a { color: rgba(232, 238, 251, .42); transition: color .15s; }
.breadcrumb-inner a:hover { color: #ff8a5c; }
.breadcrumb-inner .bc-sep { color: rgba(255, 255, 255, .2); }
.breadcrumb-inner .bc-current { color: rgba(232, 238, 251, .8); font-weight: 600; }

/* ── Page wrap ── */
.page-wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); }

/* ── Sections ── */
.pg-section         { padding: 64px 0; background: #ffffff; }
.pg-section--cream  { padding: 64px 0; background: #f7f7f7; }
.pg-section--dark   { padding: 64px 0; background: #0a0a0a; }
.pg-section-sub     { font-size: 15px; color: rgba(0,0,0,.5); line-height: 1.7; max-width: 520px; }

/* ================================================================
   PRODUCT DETAIL PAGE  (gonoise style)
   ================================================================ */

/* ── Layout ── */
.pdp-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px var(--pad-x) 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

/* ── Gallery ── */
.pdp-gallery { position: sticky; top: calc(var(--ann-h) + var(--nav-h) + 20px); min-width: 0; }

.pdp-main-img {
  border-radius: 16px;
  overflow: hidden;
  background: #f7f7f7;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #eeeeee;
}
.pdp-main-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 24px;
  display: block;
}

/* Thumbnail strip — single row, horizontally scrollable with prev/next */
.pdp-thumbs-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}
/* Viewport: fixed area, clips overflow */
.pdp-thumbs-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
/* Track: holds all thumbs in one row, slides via transform */
.pdp-thumbs {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}

/* Prev / Next arrows (shown only when thumbs overflow) */
.pdp-thumb-nav {
  flex-shrink: 0;
  width: 30px; height: 68px;
  border: 1px solid #e0e0e0;
  background: #ffffff;
  border-radius: 8px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #333;
  transition: background .15s, border-color .15s, color .15s, opacity .15s;
}
.pdp-thumbs-wrap.has-overflow .pdp-thumb-nav { display: flex; }
.pdp-thumb-nav:hover { background: #f7f7f7; border-color: var(--accent); color: var(--accent); }
.pdp-thumb-nav:disabled { opacity: .3; cursor: default; }
.pdp-thumb-nav:disabled:hover { background: #fff; border-color: #e0e0e0; color: #333; }

.pdp-thumb {
  width: 68px; height: 68px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid #eeeeee;
  cursor: pointer;
  background: #f7f7f7;
  transition: border-color .18s;
  flex-shrink: 0;
}
.pdp-thumb.is-active, .pdp-thumb:hover { border-color: var(--accent); }
.pdp-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }

/* ── Info column ── */
.pdp-info { display: flex; flex-direction: column; gap: 18px; padding-top: 4px; }

.pdp-brand {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: lowercase;
  color: var(--accent);
}

.pdp-title {
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 800;
  color: #0a0a0a;
  letter-spacing: -.4px;
  line-height: 1.3;
}

.pdp-rating-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pdp-stars { color: #f5a623; font-size: 15px; letter-spacing: 1px; }
.pdp-rating-count { font-size: 13px; color: rgba(0,0,0,.45); border-bottom: 1px solid rgba(0,0,0,.25); }

/* Price */
.pdp-price-wrap { background: #f7f7f7; border-radius: 12px; padding: 16px 18px; }
.pdp-price-row  { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.pdp-price-sale {
  font-size: 30px;
  font-weight: 900;
  color: #0a0a0a;
  letter-spacing: -1px;
  line-height: 1;
}
.pdp-price-mrp  { font-size: 16px; color: rgba(0,0,0,.4); text-decoration: line-through; }
.pdp-price-off  {
  background: #e8f5e9;
  color: #2e7d32;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
}
.pdp-tax-note { font-size: 11.5px; color: rgba(0,0,0,.4); margin-top: 4px; }

/* Delivery info pills */
.pdp-delivery-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pdp-del-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: rgba(0,0,0,.65);
  background: #f7f7f7;
  border-radius: 8px;
  padding: 9px 12px;
}
.pdp-del-item strong { color: #0a0a0a; }
.pdp-del-icon { color: var(--accent); flex-shrink: 0; }

/* Qty + CTA */
.pdp-qty-row { display: flex; align-items: center; gap: 14px; }
.pdp-qty-label { font-size: 13.5px; font-weight: 600; color: rgba(0,0,0,.65); }
.pdp-qty-ctrl {
  display: flex;
  align-items: center;
  border: 1.5px solid #dddddd;
  border-radius: 8px;
  overflow: hidden;
}
.pdp-qty-btn {
  width: 36px; height: 36px;
  background: none; border: none;
  font-size: 18px; color: #333; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.pdp-qty-btn:hover { background: #f0f0f0; }
.pdp-qty-num {
  width: 44px; text-align: center;
  font-size: 15px; font-weight: 700; color: #0a0a0a;
  border: none;
  border-left: 1.5px solid #ddd;
  border-right: 1.5px solid #ddd;
  outline: none; background: none;
}

.pdp-cta-row { display: flex; gap: 10px; flex-wrap: wrap; }
.pdp-btn-cart {
  flex: 1; min-width: 140px;
  padding: 15px 20px;
  background: #0a0a0a;
  color: #ffffff;
  border-radius: 10px;
  border: none;
  font: 700 14.5px/1 var(--font);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .18s, transform .18s;
}
.pdp-btn-cart:hover { background: #222; transform: translateY(-1px); }

.pdp-btn-buy {
  flex: 1; min-width: 140px;
  padding: 15px 20px;
  background: var(--accent);
  color: #ffffff;
  border-radius: 10px;
  border: none;
  font: 700 14.5px/1 var(--font);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .18s, transform .18s;
  text-decoration: none;
}
.pdp-btn-buy:hover { background: var(--accent-h); transform: translateY(-1px); }

.pdp-btn-wish {
  width: 50px; height: 50px;
  border-radius: 10px;
  border: 1.5px solid #ddd;
  background: #fff; color: rgba(0,0,0,.45); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .18s, color .18s;
  flex-shrink: 0;
}
.pdp-btn-wish:hover { border-color: var(--accent); color: var(--accent); }

/* Features */
.pdp-features { display: flex; flex-direction: column; gap: 10px; }
.pdp-feat-item {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; color: rgba(0,0,0,.65); line-height: 1.55;
}
.pdp-feat-item strong { color: #0a0a0a; font-weight: 700; }
.pdp-feat-dot {
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(232,80,42,.1); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}

/* Badge row */
.pdp-badge-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pdp-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px; border-radius: 100px;
  font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
}
.pdp-badge--instock { background: #e8f5e9; color: #2e7d32; }
.pdp-badge--soon    { background: #fff3e0; color: #e65100; }
.pdp-badge--new     { background: #e3f2fd; color: #1565c0; }

/* ── Product Tabs ── */
.pdp-tabs-section { background: #ffffff; padding: 0 var(--pad-x) 64px; border-top: 1px solid #f0f0f0; }
.pdp-tabs-wrap    { max-width: 1200px; margin: 0 auto; padding-top: 40px; }
.pdp-tab-btns {
  display: flex; gap: 0;
  border-bottom: 2px solid #eeeeee;
  margin-bottom: 32px;
}
.pdp-tab-btn {
  padding: 12px 24px; background: none; border: none;
  font: 600 14px var(--font); color: rgba(0,0,0,.45); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: color .18s, border-color .18s;
}
.pdp-tab-btn.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.pdp-tab-btn:hover     { color: #0a0a0a; }
.pdp-tab-panel         { display: none; }
.pdp-tab-panel.is-active { display: block; }

/* Spec table — still rendered by PdpTabs, so it lives on despite the block around it
   belonging to the retired PDP design */
.pdp-spec-table { width: 100%; border-collapse: collapse; }
.pdp-spec-table tr { border-bottom: 1px solid rgba(255, 255, 255, .07); }
.pdp-spec-table td { padding: 12px 16px; font-size: 13.5px; vertical-align: top; }
.pdp-spec-table td:first-child { font-weight: 700; color: rgba(232, 238, 251, .5); width: 200px; background: rgba(255, 255, 255, .035); }
.pdp-spec-table td:last-child { color: #f1f4fc; }

/* ── Why Buy From Us strip ── */
.pdp-why-strip {
  background: #f7f7f7;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
  padding: 20px var(--pad-x);
}
.pdp-why-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; gap: 0; flex-wrap: wrap;
}
.pdp-why-item {
  flex: 1; min-width: 160px;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  font-size: 13px; color: rgba(0,0,0,.65);
  border-right: 1px solid #e8e8e8;
}
.pdp-why-item:last-child { border-right: none; }
.pdp-why-icon { color: var(--accent); flex-shrink: 0; }
.pdp-why-item strong { color: #0a0a0a; font-weight: 700; display: block; font-size: 13px; }
.pdp-why-item span   { font-size: 11.5px; color: rgba(0,0,0,.45); }

/* ── Related products ── (still rendered by the PDP route) */
.pdp-related { background: transparent; padding: 56px var(--pad-x); border-top: 1px solid rgba(255, 255, 255, .09); }
.pdp-related-wrap { max-width: var(--max-w); margin: 0 auto; }
.pdp-related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

/* Responsive PDP */
@media (max-width: 860px) {
  .pdp-wrap { grid-template-columns: 1fr; gap: 24px; padding-top: 24px; }
  .pdp-gallery { position: static; }
  .pdp-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .pdp-wrap { padding: 16px 14px 48px; }
  .pdp-cta-row { flex-direction: column; }
  .pdp-btn-cart, .pdp-btn-buy { width: 100%; }
  .pdp-delivery-info { grid-template-columns: 1fr; gap: 6px; }
  .pdp-price-sale { font-size: 26px; }
}

/* ================================================================
   ALL PRODUCTS PAGE
   ================================================================ */
.shop-section { background: transparent; padding: 40px var(--pad-x) 72px; }
.shop-wrap    { max-width: var(--max-w); margin: 0 auto; }
.shop-grid    { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1100px) { .shop-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 380px)  { .shop-grid { grid-template-columns: 1fr; } }


/* ================================================================
   AUTH PAGE
   ================================================================ */
.auth-section {
  background: #f7f7f7;
  min-height: calc(100vh - var(--ann-h) - var(--nav-h));
  display: flex; align-items: center; justify-content: center;
  padding: 40px var(--pad-x);
}
.auth-card {
  background: #ffffff; border-radius: 20px;
  padding: 40px 36px; width: 100%; max-width: 440px;
  box-shadow: 0 4px 40px rgba(0,0,0,.09);
}
.auth-logo        { text-align: center; margin-bottom: 24px; }
.auth-logo-text   { font-size: 26px; font-weight: 800; color: #0a0a0a; }
.auth-logo-int    { font-weight: 300; color: rgba(0,0,0,.4); }
.auth-tabs        { display: flex; background: #f2f2f2; border-radius: 10px; padding: 3px; margin-bottom: 24px; }
.auth-tab         { flex: 1; padding: 9px; text-align: center; font: 600 13.5px var(--font); color: rgba(0,0,0,.45); cursor: pointer; border-radius: 8px; border: none; background: none; transition: all .18s; }
.auth-tab.is-active { background: #fff; color: #0a0a0a; box-shadow: 0 1px 6px rgba(0,0,0,.1); }
.auth-panel       { display: none; }
.auth-panel.is-active { display: block; }
.auth-field       { margin-bottom: 14px; }
.auth-label       { display: block; font-size: 12.5px; font-weight: 600; color: rgba(0,0,0,.6); margin-bottom: 6px; }
.auth-input       { width: 100%; padding: 11px 14px; border: 1.5px solid #e8e8e8; border-radius: 10px; font: 400 14px var(--font); color: #0a0a0a; background: #fafafa; outline: none; transition: border-color .18s, box-shadow .18s; }
.auth-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232,80,42,.1); background: #fff; }
.auth-input-row   { position: relative; }
.auth-eye         { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: rgba(0,0,0,.35); padding: 4px; }
.auth-row         { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; font-size: 12.5px; }
.auth-row label   { display: flex; align-items: center; gap: 7px; color: rgba(0,0,0,.6); cursor: pointer; }
.auth-forgot      { color: var(--accent); font-weight: 600; }
.auth-btn         { width: 100%; padding: 13px; background: var(--accent); color: #fff; border: none; border-radius: 10px; font: 700 14.5px var(--font); cursor: pointer; transition: background .18s; margin-bottom: 12px; }
.auth-btn:hover   { background: var(--accent-h); }
.auth-divider     { text-align: center; color: rgba(0,0,0,.3); font-size: 12px; margin: 12px 0; position: relative; }
.auth-divider::before, .auth-divider::after { content: ''; position: absolute; top: 50%; width: 42%; height: 1px; background: #e8e8e8; }
.auth-divider::before { left: 0; } .auth-divider::after { right: 0; }
.auth-google-btn  { width: 100%; padding: 12px; background: #fff; border: 1.5px solid #e0e0e0; border-radius: 10px; font: 600 13.5px var(--font); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; color: #0a0a0a; transition: border-color .18s; text-decoration: none; }
.auth-google-btn:hover { border-color: #aaa; }
.auth-switch      { text-align: center; font-size: 13px; color: rgba(0,0,0,.45); margin-top: 18px; }
.auth-switch a    { color: var(--accent); font-weight: 700; }
@media (max-width: 500px) { .auth-card { padding: 28px 18px; border-radius: 16px; } }

/* ================================================================
   FAQ PAGE
   ================================================================ */
.faq-section { background: #f7f7f7; padding: 56px var(--pad-x) 72px; }
.faq-wrap     { max-width: 780px; margin: 0 auto; }
.faq-cat-heading { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(0,0,0,.4); margin: 28px 0 12px; }
.faq-item     { background: #ffffff; border-radius: 14px; margin-bottom: 8px; overflow: hidden; border: 1px solid #f0f0f0; }
.faq-q        { width: 100%; padding: 18px 20px; background: none; border: none; text-align: left; font: 600 14.5px var(--font); color: #0a0a0a; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 14px; transition: color .18s; }
.faq-q:hover  { color: var(--accent); }
.faq-chevron  { flex-shrink: 0; transition: transform .3s; color: rgba(0,0,0,.3); }
.faq-item.is-open .faq-chevron { transform: rotate(180deg); color: var(--accent); }
.faq-item.is-open .faq-q { color: var(--accent); }
.faq-a        { max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .3s ease; padding: 0 20px; font-size: 14px; color: rgba(0,0,0,.6); line-height: 1.75; }
.faq-item.is-open .faq-a { max-height: 280px; padding: 0 20px 18px; }

/* ================================================================
   POLICY PAGES
   ================================================================ */
.policy-section { background: #ffffff; padding: 56px var(--pad-x) 72px; }
.policy-wrap    { max-width: 800px; margin: 0 auto; }
.policy-last-updated { font-size: 12px; color: rgba(0,0,0,.35); margin-bottom: 28px; }
.policy-wrap h2 { font-size: 19px; font-weight: 800; color: #0a0a0a; margin: 28px 0 10px; }
.policy-wrap h3 { font-size: 16px; font-weight: 700; color: #0a0a0a; margin: 20px 0 8px; }
.policy-wrap p  { font-size: 14.5px; color: rgba(0,0,0,.6); line-height: 1.8; margin-bottom: 12px; }
.policy-wrap ul { margin: 0 0 14px 20px; }
.policy-wrap li { font-size: 14px; color: rgba(0,0,0,.6); line-height: 1.75; margin-bottom: 5px; list-style: disc; }
.policy-wrap a  { color: var(--accent); }

/* ================================================================
   BLOG PAGE
   ================================================================ */
.blog-section { background: #f7f7f7; padding: 48px var(--pad-x) 72px; }
.blog-grid    { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.blog-card    { background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid #f0f0f0; transition: box-shadow .22s, transform .22s; text-decoration: none; display: flex; flex-direction: column; }
.blog-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.1); transform: translateY(-3px); }
.blog-card-img   { aspect-ratio: 16/9; overflow: hidden; background: #f5f5f5; }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.blog-card:hover .blog-card-img img { transform: scale(1.04); }
.blog-card-body  { padding: 18px; flex: 1; display: flex; flex-direction: column; gap: 7px; }
.blog-card-cat   { font-size: 10.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); }
.blog-card-title { font-size: 15.5px; font-weight: 700; color: #0a0a0a; line-height: 1.4; flex: 1; }
.blog-card-date  { font-size: 12px; color: rgba(0,0,0,.38); }
.blog-card-link  { font-size: 13px; font-weight: 700; color: var(--accent); display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; }
@media (max-width: 860px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .blog-grid { grid-template-columns: 1fr; } }
/* ================================================================
   CART PAGE (.cartpg-*)
   Same material as the rest of the storefront: no background of its own, glass panels
   on the body's ambient backdrop, Russo One for display.

   This replaces two earlier cart designs (.cart-* and .cartv-*, 37 classes between
   them) that no markup had referenced in a long time, and the page's own inline
   styles — 31 hard-coded light colours that could not be themed at all.
   ================================================================ */
.cartpg {
  --cp-ink: #f1f4fc;
  --cp-dim: rgba(232, 238, 251, .66);
  --cp-faint: rgba(232, 238, 251, .42);
  --cp-line: rgba(255, 255, 255, .09);
  --cp-panel: rgba(255, 255, 255, .035);
  max-width: 1120px;
  margin: 32px auto 60px;
  padding: 0 20px;
  color: var(--cp-ink);
}
/* nothing is known until localStorage is read, so hold the height rather than jump */
.cartpg-boot { min-height: 50vh; }

.cartpg-title {
  margin: 0 0 4px;
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-size: clamp(21px, 2.6vw, 26px);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--cp-ink);
}
.cartpg-count { margin: 0 0 24px; font-size: 14px; color: var(--cp-faint); }

.cartpg-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 860px) { .cartpg-grid { grid-template-columns: 1fr 360px; } }

/* ---- a line ---- */
.cartpg-line {
  display: flex; align-items: center; gap: 14px;
  padding: 14px; margin-bottom: 12px;
  border-radius: 14px;
  background: var(--cp-panel);
  border: 1px solid var(--cp-line);
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.cartpg-line:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); }
.cartpg-line-img { flex-shrink: 0; display: block; width: 80px; height: 80px; border-radius: 10px; overflow: hidden; background: rgba(255, 255, 255, .06); }
.cartpg-line-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cartpg-line-main { flex: 1; min-width: 0; }
.cartpg-line-name { display: block; font-size: 15px; font-weight: 700; color: var(--cp-ink); text-decoration: none; }
.cartpg-line-name:hover { color: #ff8a5c; }
.cartpg-line-price { margin-top: 4px; font-size: 15px; font-weight: 800; color: #ff8a5c; }
.cartpg-line-actions { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.cartpg-line-total { font-size: 15px; font-weight: 800; color: var(--cp-ink); white-space: nowrap; }

.cartpg-qty { display: inline-flex; align-items: center; border: 1px solid var(--cp-line); border-radius: 8px; overflow: hidden; background: rgba(255, 255, 255, .04); }
.cartpg-qty button {
  width: 32px; height: 32px; border: none; background: transparent;
  font-family: inherit; font-size: 18px; font-weight: 700; color: var(--cp-ink);
  cursor: pointer; line-height: 1; transition: background .15s;
}
.cartpg-qty button:hover { background: rgba(255, 255, 255, .1); }
.cartpg-qty span { min-width: 34px; text-align: center; font-weight: 700; font-size: 14px; }
.cartpg-remove {
  background: none; border: none; color: var(--cp-faint);
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline;
  transition: color .15s;
}
.cartpg-remove:hover { color: #ff9c9c; }
.cartpg-back { display: inline-block; margin-top: 6px; color: #ff8a5c; font-weight: 700; font-size: 14px; text-decoration: none; }
.cartpg-back:hover { text-decoration: underline; }

/* ---- summary ---- */
.cartpg-summary {
  align-self: start;
  position: sticky;
  top: calc(var(--nav-h) + 16px);
  padding: 22px;
  border-radius: 16px;
  background: var(--cp-panel);
  border: 1px solid var(--cp-line);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.cartpg-summary-title {
  margin: 0 0 16px;
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cp-ink);
}
.cartpg-freeship {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 14px; padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 168, 40, .12);
  border: 1px solid rgba(255, 168, 40, .3);
  color: #ffc773;
  font-size: 12.5px; line-height: 1.4;
}
.cartpg-freeship svg { width: 17px; height: 17px; flex-shrink: 0; }
.cartpg-freeship b { color: #fff; font-weight: 800; }

.cartpg-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; }
.cartpg-row-k { font-size: 13.5px; font-weight: 500; color: var(--cp-dim); }
.cartpg-row-v { font-size: 14px; font-weight: 700; color: var(--cp-ink); }
.cartpg-row-v.is-green { color: #6fe4a4; }
.cartpg-row-v.is-strike { color: var(--cp-faint); text-decoration: line-through; }
.cartpg-row.is-big .cartpg-row-k { font-size: 16px; font-weight: 800; color: var(--cp-ink); }
.cartpg-row.is-big .cartpg-row-v { font-family: "Russo One", sans-serif; font-weight: 400; font-size: 19px; letter-spacing: .01em; }
.cartpg-rule { border-top: 1px solid var(--cp-line); margin: 12px 0; }

.cartpg-checkout {
  display: block; text-align: center;
  margin-top: 18px; padding: 14px;
  border-radius: 999px;
  background: var(--toy-grad);
  color: #fff; font-weight: 800; text-decoration: none;
  transition: transform .18s var(--ease), filter .18s var(--ease);
}
.cartpg-checkout:hover { transform: translateY(-2px); filter: brightness(1.1); }
.cartpg-secure {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 12px 0 0;
  font-size: 12px; color: var(--cp-faint);
}
.cartpg-secure svg { width: 12px; height: 12px; flex-shrink: 0; color: #6fe4a4; }

/* ---- empty ---- */
.cartpg-empty { max-width: 600px; margin: 60px auto; padding: 0 20px; text-align: center; color: #f1f4fc; }
.cartpg-empty-ring {
  width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center; margin: 0 auto 18px;
  background: rgba(255, 106, 43, .1);
  border: 1px solid rgba(255, 106, 43, .26);
  color: #ff8a5c;
}
.cartpg-empty-ring svg { width: 32px; height: 32px; }
.cartpg-empty-title {
  margin: 0 0 8px;
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #f1f4fc;
}
.cartpg-empty-sub { margin: 0 0 22px; color: rgba(232, 238, 251, .6); line-height: 1.7; }
.cartpg-empty-btn {
  display: inline-block; padding: 13px 30px; border-radius: 999px;
  background: var(--accent); color: #fff; font-weight: 800; text-decoration: none;
  transition: transform .18s var(--ease), filter .18s var(--ease);
}
.cartpg-empty-btn:hover { transform: translateY(-2px); filter: brightness(1.12); }

/* ================================================================
   TRACK ORDER / SIMPLE FORMS
   ================================================================ */
.track-section    { background: #f7f7f7; padding: 56px var(--pad-x) 72px; min-height: 60vh; }
.track-card       { max-width: 540px; margin: 0 auto; background: #fff; border-radius: 20px; padding: 36px; border: 1px solid #f0f0f0; box-shadow: 0 2px 24px rgba(0,0,0,.06); }
.track-card-title { font-size: 22px; font-weight: 800; color: #0a0a0a; margin-bottom: 7px; }
.track-card-sub   { font-size: 13.5px; color: rgba(0,0,0,.45); margin-bottom: 24px; line-height: 1.6; }
/* ================================================================
   MOBILE OVERRIDES (inner pages)
   ================================================================ */
@media (max-width: 600px) {
  .page-hero    { padding: 40px 14px 36px; }
  .page-hero-title { font-size: 26px; }
  .pg-section, .pg-section--cream, .pg-section--dark { padding: 40px 0; }
  .policy-section, .faq-section,
  .shop-section, .cart-section, .track-section,
  .blog-section { padding-left: 14px; padding-right: 14px; }
  .pdp-tabs-section { padding-left: 14px; padding-right: 14px; }
  .pdp-related { padding-left: 14px; padding-right: 14px; }
  .pdp-related-grid { grid-template-columns: 1fr 1fr; }
  .auth-section { padding: 20px 14px 48px; }
}

/* ================================================================
   PDP ENHANCEMENTS — hover-zoom / lightbox, sticky bar, offers, pincode
   ================================================================ */

/* ── Hover zoom on main image ── */
.pdp-main-img { cursor: zoom-in; }
.pdp-main-img img { transition: transform .2s ease; }

/* ── Lightbox ── */
.pdp-lightbox {
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(10,10,10,.93);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.pdp-lightbox.is-open { opacity: 1; visibility: visible; }
.pdp-lb-top    { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; }
.pdp-lb-counter{ font-size: 13px; font-weight: 600; color: rgba(255,255,255,.7); }
.pdp-lb-close  { background: rgba(255,255,255,.12); border: none; color: #fff; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: 17px; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.pdp-lb-close:hover { background: rgba(255,255,255,.25); }
.pdp-lb-stage  { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; padding: 0 16px; min-height: 0; }
.pdp-lb-img    { max-width: 88%; max-height: 76vh; object-fit: contain; cursor: zoom-in; transition: transform .2s ease; user-select: none; -webkit-user-drag: none; }
.pdp-lb-img.is-zoomed { cursor: zoom-out; }
.pdp-lb-arrow  { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.14); border: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.pdp-lb-arrow:hover { background: rgba(255,255,255,.3); }
.pdp-lb-arrow--prev { left: 18px; }
.pdp-lb-arrow--next { right: 18px; }
.pdp-lb-thumbs { display: flex; gap: 8px; justify-content: center; padding: 16px; flex-wrap: wrap; }
.pdp-lb-thumb  { width: 54px; height: 54px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; cursor: pointer; background: #fff; opacity: .5; transition: opacity .15s, border-color .15s; }
.pdp-lb-thumb.is-active { opacity: 1; border-color: #fff; }
.pdp-lb-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }

/* ── Sticky Add-to-Cart bar ── */
.pdp-sticky-bar {
  position: fixed; left: 0; right: 0;
  bottom: 0;
  background: #fff; border-top: 1px solid #eee;
  box-shadow: 0 -5px 24px rgba(0,0,0,.1);
  z-index: 950;
  transform: translateY(120%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.pdp-sticky-bar.is-visible { transform: translateY(0); }
/* Lift the WhatsApp button above the bar while it's showing */
.pdp-sticky-inner { max-width: 1200px; margin: 0 auto; padding: 9px var(--pad-x); display: flex; align-items: center; gap: 14px; }
.pdp-sticky-img   { width: 46px; height: 46px; border-radius: 8px; object-fit: contain; background: #f7f7f7; flex-shrink: 0; }
.pdp-sticky-info  { min-width: 0; flex: 1; }
.pdp-sticky-name  { font-size: 13.5px; font-weight: 700; color: #0a0a0a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdp-sticky-price { font-size: 13px; }
.pdp-sticky-price .s { font-weight: 800; color: #0a0a0a; }
.pdp-sticky-price .m { color: rgba(0,0,0,.4); text-decoration: line-through; margin-left: 6px; font-size: 12px; }
.pdp-sticky-btns  { display: flex; gap: 8px; flex-shrink: 0; }
.pdp-sticky-btns button { padding: 11px 22px; border: none; border-radius: 9px; font: 700 13px var(--font); cursor: pointer; white-space: nowrap; transition: opacity .15s; }
.pdp-sticky-btns button:hover { opacity: .9; }
.pdp-sticky-cart { background: #0a0a0a; color: #fff; }
.pdp-sticky-buy  { background: var(--accent); color: #fff; }
@media (max-width: 600px) {
  .pdp-sticky-img { display: none; }
  .pdp-sticky-name { font-size: 12.5px; }
  .pdp-sticky-btns button { padding: 10px 14px; font-size: 12px; }
}

/* ── Offers box ── */
.pdp-offers       { border: 1px dashed #e3b489; background: #fff8f2; border-radius: 12px; padding: 14px 16px; }
.pdp-offers-title { font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #0a0a0a; margin-bottom: 9px; display: flex; align-items: center; gap: 7px; }
.pdp-offer-item   { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: rgba(0,0,0,.7); line-height: 1.55; padding: 4px 0; }
.pdp-offer-item svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.pdp-offer-code   { display: inline-flex; align-items: center; gap: 6px; }
.pdp-coupon       { font-weight: 800; color: var(--accent); background: #fff; border: 1px dashed var(--accent); border-radius: 5px; padding: 0 7px; letter-spacing: .5px; }
.pdp-copy-btn     { background: none; border: none; color: var(--accent); font-weight: 700; font-size: 12px; cursor: pointer; text-decoration: underline; padding: 0; }

/* ── Pincode checker ── */
.pdp-pincode       { border: 1px solid #eee; border-radius: 12px; padding: 14px 16px; }
.pdp-pincode-title { font-size: 12.5px; font-weight: 700; color: #0a0a0a; margin-bottom: 9px; display: flex; align-items: center; gap: 7px; }
.pdp-pincode-row   { display: flex; gap: 8px; }
.pdp-pincode-input { flex: 1; min-width: 0; padding: 10px 12px; border: 1.5px solid #e0e0e0; border-radius: 8px; font: 500 13.5px var(--font); outline: none; transition: border-color .15s; }
.pdp-pincode-input:focus { border-color: var(--accent); }
.pdp-pincode-btn   { padding: 10px 18px; background: #0a0a0a; color: #fff; border: none; border-radius: 8px; font: 700 13px var(--font); cursor: pointer; white-space: nowrap; }
.pdp-pincode-result{ font-size: 12.5px; margin-top: 9px; line-height: 1.5; display: none; }
.pdp-pincode-result.show { display: block; }
.pdp-pincode-result.ok   { color: #2e7d32; }
.pdp-pincode-result.err  { color: #e53935; }

/* ================================================================
   PDP — LARGE SCREENS (≥1600px): widen layout, fill the width
   ================================================================ */
@media (min-width: 1600px) {
  /* All PDP containers grow together so the page stays consistent */
  .pdp-wrap {
    max-width: 1520px;
    gap: 60px;
    padding-top: 44px;
  }
  .pdp-tabs-wrap,
  .pdp-why-inner,
  .pdp-related-wrap,
  .pdp-sticky-inner { max-width: 1520px; }

  /* A touch more breathing room in the info column */
  .pdp-info        { gap: 22px; }
  .pdp-title       { font-size: 27px; line-height: 1.3; }
  .pdp-price-sale  { font-size: 34px; }
  .pdp-price-mrp   { font-size: 18px; }

  /* Larger gallery thumbnails on big screens */
  .pdp-thumb       { width: 78px; height: 78px; }
  .pdp-thumb-nav   { height: 78px; }

  /* Roomier related grid */
  .pdp-related-grid { gap: 22px; }

  /* Bigger, more legible lightbox image */
  .pdp-lb-img      { max-height: 82vh; }
}

/* ===== Homepage builder — product sliders & reels ===== */
.home-slider-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:16px;}
.home-slider-title{font-size:clamp(20px,3vw,28px);font-weight:800;letter-spacing:-.5px;color:#0a0a0a;}
.home-slider-arrows{display:flex;gap:8px;flex-shrink:0;}
.home-slider-arrow{width:38px;height:38px;border-radius:50%;border:1px solid #e6e6e6;background:#fff;color:#0a0a0a;font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:all .2s;}
.home-slider-arrow:hover{background:#0a0a0a;color:#fff;border-color:#0a0a0a;}
.home-slider-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none;-ms-overflow-style:none;}
.home-slider-track::-webkit-scrollbar{display:none;}
.home-slider-item{flex:0 0 260px;max-width:260px;scroll-snap-align:start;}
.home-slider-item .product-card{height:100%;}
@media(max-width:640px){.home-slider-item{flex-basis:72vw;max-width:72vw;}}

.home-reels-section{padding-top:8px;}
.home-reels-grid{display:grid;grid-template-columns:repeat(var(--reel-cols,3),1fr);gap:14px;}
.home-reel-cell{display:block;position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 6px 20px -10px rgba(0,0,0,.4);}
.home-reel-cell video{transition:transform .4s;}
.home-reel-cell:hover video{transform:scale(1.04);}
@media(max-width:760px){.home-reels-grid{grid-template-columns:repeat(min(var(--reel-cols,3),2),1fr);}}
/* ============================================================
   MEGA MENU — enhanced (cards + bestseller promo)
   ============================================================ */
/* Bestseller promo panel */

/* ============================================================
   SHOP BY CATEGORY — floating transparent products on gradients
   ============================================================ */
.cat-eyebrow { text-align: center; font-size: 11.5px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.cat-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }
.cat-tile { position: relative; overflow: hidden; border-radius: 26px; min-height: 196px; padding: 26px; display: flex; flex-direction: column; justify-content: flex-end; text-decoration: none; isolation: isolate; box-shadow: 0 16px 36px -20px rgba(20,20,45,.5); transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease; }
.cat-tile:hover { transform: translateY(-5px); box-shadow: 0 32px 60px -26px rgba(20,20,45,.62); }
.cat-tile-blob { position: absolute; top: -40%; right: -24%; width: 72%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.14); z-index: 0; }
.cat-tile-img { position: absolute; top: 50%; right: -2px; width: 46%; max-width: 172px; height: auto; transform: translateY(-55%); object-fit: contain; filter: drop-shadow(0 22px 26px rgba(0,0,0,.34)); z-index: 1; transition: transform .42s cubic-bezier(.2,.8,.2,1); }
.cat-tile:hover .cat-tile-img { transform: translateY(-57%) scale(1.09) rotate(-4deg); }
.cat-tile-body { position: relative; z-index: 2; max-width: 62%; }
.cat-tile-name { display: block; font-size: 23px; font-weight: 800; letter-spacing: -.6px; color: #fff; line-height: 1.05; }
.cat-tile-sub { display: block; font-size: 12.5px; color: rgba(255,255,255,.86); margin-top: 5px; line-height: 1.35; }
.cat-tile-cta { margin-top: 15px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(6px); border-radius: 99px; padding: 7px 15px; transition: gap .2s ease, background .2s ease; }
.cat-tile:hover .cat-tile-cta { gap: 10px; background: rgba(255,255,255,.3); }
@media (max-width: 900px) { .cat-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cat-tiles { grid-template-columns: 1fr; } .cat-tile-img { width: 42%; } }

/* Search typewriter placeholder — make it visible + adapt to navbar theme */
.search-input::placeholder { color: currentColor; opacity: .55; }

/* ============================================================
   SHOP BY CATEGORY — header bar + tile shine (enhanced)
   ============================================================ */
.cat-header--bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; text-align: left; }
.cat-subtitle { font-size: 14px; color: rgba(0,0,0,.52); margin-top: 7px; max-width: 520px; }
.cat-viewall { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; color: #111; background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 99px; padding: 11px 20px; white-space: nowrap; transition: gap .2s ease, box-shadow .2s ease, transform .2s ease; }
.cat-viewall:hover { gap: 11px; box-shadow: 0 10px 24px -12px rgba(0,0,0,.35); transform: translateY(-1px); }
.cat-tile-shine { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 42%); }

/* ============================================================
   SUCCESS STORIES — scrapbook / sketchable
   ============================================================ */
.success-section { padding: 64px 0 74px; background: linear-gradient(180deg,#fbf8f1 0%,#f5efe4 100%); }
.success-wrap { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--pad-x); }
.success-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.success-eyebrow { font-family: 'Caveat', cursive; font-size: 25px; font-weight: 700; color: var(--accent); line-height: 1; margin-bottom: 2px; transform: rotate(-2deg); }
.success-title { font-size: clamp(24px,3vw,34px); font-weight: 900; letter-spacing: -.5px; color: #181818; }
.success-arrows { display: flex; gap: 8px; }
.success-arrow { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid #1a1a1a; background: #fff; color: #1a1a1a; display: grid; place-items: center; cursor: pointer; transition: background .2s ease, color .2s ease; }
.success-arrow:hover:not(:disabled) { background: #1a1a1a; color: #fff; }
.success-arrow:disabled { opacity: .3; cursor: default; }
.success-viewport { overflow: hidden; padding: 20px 6px 30px; }
.success-track { display: flex; gap: 28px; transition: transform .5s cubic-bezier(.4,0,.2,1); will-change: transform; align-items: flex-start; }
.success-cell { flex: 0 0 auto; }

.ss-card { display: flex; flex-direction: column; position: relative; transform: rotate(var(--rot,0deg)); transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease; }
.ss-card:hover { transform: rotate(0deg) translateY(-7px) scale(1.025); z-index: 4; }

/* Screenshot — polaroid */
.ss-card--photo { width: 234px; background: #fff; padding: 12px 12px 14px; border-radius: 6px; box-shadow: 0 14px 34px -12px rgba(60,50,30,.4), 0 2px 6px rgba(0,0,0,.08); text-decoration: none; }
.ss-photo-img { width: 100%; height: auto; max-height: 370px; object-fit: cover; border-radius: 3px; display: block; background: #f1eee7; }
.ss-photo-cap { font-family: 'Caveat', cursive; font-size: 20px; font-weight: 700; color: #3a3a3a; text-align: center; margin-top: 9px; line-height: 1.1; }
.ss-tape { position: absolute; top: -9px; left: 50%; transform: translateX(-50%) rotate(-3deg); width: 80px; height: 23px; background: rgba(255,216,120,.6); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* Testimonial — sticky note */
.ss-card--quote { width: 300px; min-height: 218px; background: linear-gradient(180deg,#fffdf6,#fff6e3); padding: 30px 24px 24px; border-radius: 10px; box-shadow: 0 14px 34px -12px rgba(60,50,30,.42), 0 2px 6px rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.04); }
.ss-quote-mark { font-family: Georgia, serif; font-size: 66px; line-height: .5; color: var(--accent); opacity: .85; display: block; height: 26px; }
.ss-quote-text { font-size: 15px; line-height: 1.62; color: #2c2c2c; margin: 8px 0 16px; }
.ss-quote-author { font-family: 'Caveat', cursive; font-size: 23px; font-weight: 700; color: #1a1a1a; }
.ss-quote-author::before { content: "— "; }
.ss-pin { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 15px; height: 15px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff7a59, #d83a1f); box-shadow: 0 3px 6px rgba(0,0,0,.3), inset 0 -2px 3px rgba(0,0,0,.25); }

@media (max-width: 560px) { .ss-card--photo { width: 204px; } .ss-card--quote { width: 252px; } }

/* Category section — balanced spacing for the redesigned tiles */
.cat-section { background: #fcf7ee; padding: 52px var(--pad-x) 60px; }
@media (max-width: 640px) { .cat-section { padding: 36px var(--pad-x) 44px; } }

/* ============================================================
   HOMEPAGE POLISH — trust strip, rail headers, brand strip
   ============================================================ */
.home-trust { background: #fff; border-top: 1px solid #f1ede4; border-bottom: 1px solid #f1ede4; }
.home-trust-inner { max-width: var(--max-w); margin-inline: auto; padding: 18px var(--pad-x); display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.home-trust-item { display: flex; align-items: center; gap: 13px; justify-content: center; }
.home-trust-item:not(:last-child) { border-right: 1px solid #f1ede4; }
.home-trust-ic { width: 44px; height: 44px; border-radius: 13px; background: rgba(232,80,42,.09); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.home-trust-txt { display: flex; flex-direction: column; line-height: 1.1; }
.home-trust-txt b { font-size: 19px; font-weight: 900; color: #161616; letter-spacing: -.5px; }
.home-trust-txt span { font-size: 11.5px; color: rgba(0,0,0,.5); margin-top: 2px; }
@media (max-width: 680px) { .home-trust-inner { grid-template-columns: repeat(2, 1fr); gap: 16px; } .home-trust-item:nth-child(2n) { border-right: none; } .home-trust-item { justify-content: flex-start; } }

.section-header--rail { align-items: flex-end; }
.ps-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent); margin-bottom: 5px; }
.ps-head-right { display: flex; align-items: center; gap: 16px; }
.ps-viewall { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: #141414; white-space: nowrap; transition: gap .2s ease, color .2s ease; }
.ps-viewall:hover { gap: 9px; color: var(--accent); }
@media (max-width: 560px) { .ps-viewall { display: none; } }

.home-brands { padding: 48px 0 8px; background: #fff; }
.home-brands-label { font-size: 12px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; color: rgba(0,0,0,.4); margin-bottom: 26px; }
/* ============================================================
   TRUSTED BY — brand logo cards (full colour)
   ============================================================ */

/* ============================================================
   FOOTER — remove yellow (use brand accent) + payment fix
   ============================================================ */
.footer-link--highlight { color: var(--accent) !important; }
.footer-link--highlight:hover { color: #ffffff !important; }
/* ============================================================
   WHATSAPP — advanced live-chat widget
   ============================================================ */

.wa-chat { width: 326px; max-width: calc(100vw - 36px); background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 26px 60px -16px rgba(0,0,0,.45), 0 4px 14px rgba(0,0,0,.12); transform-origin: bottom right; animation: wa-pop .32s cubic-bezier(.2,.9,.3,1.25); }
@keyframes wa-pop { from { opacity: 0; transform: translateY(18px) scale(.9); } to { opacity: 1; transform: none; } }

.wa-chat-head { display: flex; align-items: center; gap: 11px; padding: 14px 15px; background: linear-gradient(135deg, #1faf54 0%, #128c7e 100%); color: #fff; }
.wa-chat-av { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.22); display: grid; place-items: center; flex-shrink: 0; }
.wa-chat-id { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.wa-chat-name { font-size: 15px; font-weight: 800; }
.wa-chat-online { font-size: 11.5px; opacity: .92; display: flex; align-items: center; gap: 6px; }
.wa-online-dot { width: 7px; height: 7px; border-radius: 50%; background: #8affad; flex-shrink: 0; animation: wa-pulse 1.8s infinite; }
@keyframes wa-pulse { 0% { box-shadow: 0 0 0 0 rgba(138,255,173,.6); } 70% { box-shadow: 0 0 0 6px rgba(138,255,173,0); } 100% { box-shadow: 0 0 0 0 rgba(138,255,173,0); } }
.wa-chat-x { margin-left: auto; background: rgba(255,255,255,.16); border: none; color: #fff; width: 27px; height: 27px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; flex-shrink: 0; transition: background .2s; }
.wa-chat-x:hover { background: rgba(255,255,255,.3); }

.wa-chat-body { padding: 16px 15px 18px; background: #ece5dd; }
.wa-msg { background: #fff; border-radius: 3px 14px 14px 14px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(0,0,0,.12); max-width: 94%; }
.wa-msg p { font-size: 13.5px; color: #2a2a2a; line-height: 1.55; margin: 0 0 8px; }
.wa-msg p:last-of-type { margin-bottom: 6px; }
.wa-msg-time { font-size: 10.5px; color: #9aa0a6; }

.wa-chat-cta { width: 100%; border: none; cursor: pointer; padding: 14px; background: #25d366; color: #fff; font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 9px; transition: background .2s; }
.wa-chat-cta:hover { background: #1faf54; }

/* Brand grid — flex so the last (incomplete) row stays centered */

/* WhatsApp avatar — initials + online indicator for the support person */
.wa-chat-av { position: relative; font-size: 15px; font-weight: 800; color: #fff; letter-spacing: .5px; }
.wa-av-dot { position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; border-radius: 50%; background: #4ade80; border: 2.5px solid #1aa558; }
/* Footer — white text only (no accent colour) */
.footer-link--highlight { color: #ffffff !important; }
.footer-link--highlight:hover { color: #ffffff !important; opacity: .8; }

/* WhatsApp avatar — user photo */
.wa-chat-av { overflow: visible; }
.wa-chat-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }

/* ============================================================
   PRODUCTS PAGE — attractive hero
   ============================================================ */
.shop-hero { position: relative; overflow: hidden; background: radial-gradient(135% 135% at 80% -20%, #2c2f3e 0%, #16171f 52%, #0c0d12 100%); color: #fff; }
.shop-hero-glow { position: absolute; top: -28%; right: 6%; width: 440px; height: 440px; border-radius: 50%; background: radial-gradient(circle, rgba(232,80,42,.3), transparent 64%); z-index: 0; pointer-events: none; }
.shop-hero-inner { position: relative; z-index: 2; max-width: var(--max-w); margin-inline: auto; padding: 56px var(--pad-x) 60px; display: flex; align-items: center; gap: 30px; }
.shop-hero-text { flex: 1; min-width: 0; }
.shop-hero-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: #ff8b6b; margin-bottom: 14px; }
.shop-hero-title { font-size: clamp(30px, 5vw, 50px); font-weight: 900; letter-spacing: -1px; line-height: 1.06; max-width: 600px; }
.shop-hero-title span { color: var(--accent); }
.shop-hero-sub { font-size: 15.5px; color: rgba(255,255,255,.62); margin-top: 16px; max-width: 500px; line-height: 1.6; }
.shop-hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.shop-hero-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.82); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); border-radius: 99px; padding: 8px 15px; }
.shop-hero-badge b { color: #fff; font-weight: 800; }
.shop-hero-decor { position: relative; width: 300px; height: 220px; flex-shrink: 0; }
.shop-hero-prod { position: absolute; object-fit: contain; filter: drop-shadow(0 22px 30px rgba(0,0,0,.55)); }
.shop-hero-prod--1 { width: 150px; right: 78px; top: 8px; transform: rotate(-6deg); z-index: 3; }
.shop-hero-prod--2 { width: 122px; right: 0; top: 58px; transform: rotate(8deg); z-index: 2; }
.shop-hero-prod--3 { width: 108px; right: 150px; top: 92px; transform: rotate(-2deg); z-index: 1; opacity: .92; }
@media (max-width: 860px) { .shop-hero-decor { display: none; } .shop-hero-inner { padding: 42px var(--pad-x) 46px; } }

/* Products hero — electric blue / navy tech theme (Diva Light banner style) */
.shop-hero { background: radial-gradient(130% 130% at 76% -18%, #123c7c 0%, #0a1a38 46%, #050a16 100%); }
.shop-hero-glow { background: radial-gradient(circle, rgba(48,140,255,.5), transparent 60%); }
.shop-hero::after { content: ""; position: absolute; left: -8%; bottom: -42%; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(22,92,205,.32), transparent 66%); z-index: 0; pointer-events: none; }
.shop-hero-eyebrow { color: #63b4ff; }
.shop-hero-title span { background: linear-gradient(180deg, #82c6ff 0%, #2e84ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.shop-hero-badge { background: rgba(60,140,255,.1); border-color: rgba(95,165,255,.28); }
.shop-hero-badge b { color: #d4e8ff; }

/* ============================================================
   PRODUCTS HERO — animations
   ============================================================ */
@keyframes shop-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes shop-glow { 0%, 100% { opacity: .78; transform: scale(1); } 50% { opacity: 1; transform: scale(1.13); } }
@keyframes shop-float { 0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); } 50% { transform: translateY(-14px) rotate(var(--rot, 0deg)); } }
@keyframes shop-sweep { 0% { transform: translateX(-48%); } 50% { transform: translateX(48%); } 100% { transform: translateX(-48%); } }

.shop-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(108deg, transparent 38%, rgba(130,190,255,.08) 50%, transparent 62%); animation: shop-sweep 8s ease-in-out infinite; }
.shop-hero-glow { animation: shop-glow 4.5s ease-in-out infinite; }
.shop-hero-eyebrow { animation: shop-rise .6s ease .05s both; }
.shop-hero-title { animation: shop-rise .65s ease .15s both; }
.shop-hero-sub { animation: shop-rise .65s ease .26s both; }
.shop-hero-badges { animation: shop-rise .65s ease .38s both; }
.shop-hero-prod { animation: shop-float 5.5s ease-in-out infinite; }
.shop-hero-prod--1 { --rot: -6deg; animation-delay: 0s; }
.shop-hero-prod--2 { --rot: 8deg; animation-delay: .8s; }
.shop-hero-prod--3 { --rot: -2deg; animation-delay: 1.6s; }
@media (prefers-reduced-motion: reduce) { .shop-hero *, .shop-hero::before { animation: none !important; } }

/* Products page — admin-managed banner (replaces the hero when set) */
.shop-banner { width: 100%; line-height: 0; background: #0c0d12; }
.shop-banner-img { width: 100%; height: auto; display: block; }

/* Wishlist — remove overlay on the shared ProductCard */
.wish-cell { position: relative; }
.wish-remove { position: absolute; top: 10px; right: 10px; z-index: 5; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.92); color: #555; border: 1px solid rgba(0,0,0,.06); display: grid; place-items: center; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.wish-remove:hover { background: #ef4444; color: #fff; border-color: #ef4444; }

/* ============================================================
/* ============================================================
   CONTACT PAGE
   Same material as /about and the policy pages: no background of its own, so the
   body's ambient glow is the surface and every card is a sheet of glass on it.
   Russo One for display, Manrope for everything else.

   All of the contact CSS lives here. It used to be two blocks 500 lines apart — one
   of them a light-theme leftover whose .contact-section / .contact-grid / .contact-
   info-* rules no markup had referenced for a long time.
   ============================================================ */
.contact-hero,
.contact2-section {
  --ct-ink: #f1f4fc;
  --ct-dim: rgba(232, 238, 251, .66);
  --ct-faint: rgba(232, 238, 251, .42);
  --ct-line: rgba(255, 255, 255, .09);
  --ct-panel: rgba(255, 255, 255, .035);
}

/* ---------- admin banner (replaces the hero when set) ---------- */
.contact-banner {
  position: relative;
  width: 100%;
  line-height: 0;
}
.contact-banner img { width: 100%; height: auto; display: block; }
/* fade the bottom edge into the page — a banner cut off dead straight on a dark
   backdrop reads as a broken image, not as artwork */
.contact-banner::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 20%;
  background: linear-gradient(180deg, transparent, var(--amb-base));
  pointer-events: none;
}

/* ---------- hero ---------- */
.contact-hero {
  position: relative;
  text-align: center;
  background:
    radial-gradient(760px 320px at 50% 0%, rgba(236, 28, 140, .13), transparent 64%),
    radial-gradient(620px 300px at 15% 30%, rgba(35, 169, 224, .1), transparent 62%);
}
.contact-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 660px;
  margin-inline: auto;
  padding: clamp(44px, 6vw, 68px) var(--pad-x) clamp(32px, 4vw, 44px);
}
.contact-hero-eyebrow {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 11px;
}
.contact-hero-title {
  font-size: clamp(30px, 4.6vw, 48px);
  line-height: 1.05;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ct-ink);
}
.contact-hero-sub {
  font-size: 15.5px;
  color: var(--ct-dim);
  margin-top: 14px;
  line-height: 1.7;
}

/* ---------- layout ---------- */
.contact2-section {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: clamp(28px, 4vw, 48px) var(--pad-x) clamp(56px, 7vw, 84px);
  color: var(--ct-ink);
}
.contact-grid2 {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(28px, 3.5vw, 44px);
  align-items: start;
}

/* ---------- left: the ways to reach us ---------- */
.contact-lead-title {
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-size: clamp(22px, 2.8vw, 30px);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ct-ink);
}
.contact-lead-sub {
  font-size: 14.5px;
  color: var(--ct-dim);
  margin-top: 12px;
  max-width: 430px;
  line-height: 1.7;
}
.contact-methods {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contact-method {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 15px 16px;
  border-radius: 16px;
  background: var(--ct-panel);
  border: 1px solid var(--ct-line);
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.contact-method:hover { background: rgba(255, 255, 255, .055); border-color: rgba(255, 255, 255, .16); }
.contact-method-ic {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: rgba(255, 106, 43, .14);
  border: 1px solid rgba(255, 106, 43, .32);
  color: #ff8a5c;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.contact-method-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ct-faint);
}
.contact-method-val {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ct-ink);
  margin-top: 4px;
  line-height: 1.5;
  /* an email address has no spaces to break on */
  overflow-wrap: anywhere;
}
.contact-method-val a { color: inherit; text-decoration: none; }
.contact-method-val a:hover { color: var(--accent); }

/* ---------- the two CTAs, cast in metal ----------
   Same construction as the homepage's "Add to Garage" plate, so the site has one idea
   of what a metal button is rather than two: the 2px of padding IS the polished rim,
   the inner span is the brushed face. No drop shadow on either — the bevel is what
   makes it read as metal, and a coloured glow underneath just made it look like a
   sticker sitting on the page.
   ------------------------------------------------ */
.contact-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.contact-btn {
  position: relative;
  display: inline-flex;
  /* A thin rim reads as jewellery; at 2px the five-stop gradient had room to show its
     bands and turned into a frame. The hard horizon belongs HERE, on an edge a couple
     of pixels tall, where it looks like polished metal catching one light. */
  padding: 1.5px;
  border-radius: 12px;
  overflow: hidden;
  background-image: linear-gradient(180deg, #f6f9ff 0%, #9aa7bd 38%, #414a5e 53%, #808ea6 72%, #eff4fc 100%);
  transition: transform .18s var(--ease);
}
.contact-btn > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  /* Fill the plate. Without this the face only ever covers its own text, so the moment
     the button is stretched wider than its label — a full-width column on a phone —
     the rim gradient shows through the gap as a bare panel beside the face. */
  flex: 1;
  min-height: 46px; /* both plates the same height whatever the label */
  padding: 0 24px;
  border-radius: 10.5px;
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #eef2f9;
  /* Three layers, top to bottom. NOT a hard horizon — across a wide plate that reads
     as a seam splitting the button in two. Metal on a face this size is a soft body
     with a specular gloss over the top half and a fine brushed grain. */
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .03) 47%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .26) 100%),
    linear-gradient(180deg, #4d5769 0%, #2d3547 52%, #1b2231 100%);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .85), 0 1px 0 rgba(255, 255, 255, .16);
  /* inset only — this is the bevel, not a shadow cast on the page */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 -1px 0 rgba(0, 0, 0, .7),
    inset 0 0 0 1px rgba(255, 255, 255, .05);
  transition: filter .18s var(--ease);
}
.contact-btn svg {
  width: 17px;
  height: 17px;
  flex: none;
  /* engraved into the plate, like the label above it */
  filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, .6)) drop-shadow(0 1px 0 rgba(255, 255, 255, .12));
}
/* a light sweeps across the plate on hover */
.contact-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(105deg, transparent 34%, rgba(255, 255, 255, .42) 48%, transparent 60%);
  transform: translateX(-130%);
  transition: transform .7s var(--ease-out);
  pointer-events: none;
}
.contact-btn:hover { transform: translateY(-2px); }
/* 1.3 blew the face out to flat grey — metal brightens by catching more light, not by
   losing its gradient */
.contact-btn:hover > span { filter: brightness(1.16); }
.contact-btn:hover::after { transform: translateX(130%); }
/* pressed: the plate sinks and the bevel flips, so the light now comes from below */
.contact-btn:active { transform: translateY(0); }
.contact-btn:active > span {
  filter: brightness(.94);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, .75),
    inset 0 -1px 0 rgba(255, 255, 255, .1);
}
.contact-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* WhatsApp keeps its green — same metal, different alloy, so it stays recognisable
   without dropping out of the set. Gloss and grain are inherited above; only the body
   colour changes, which is exactly what "different alloy" should mean. */
.contact-btn--wa {
  background-image: linear-gradient(180deg, #f0fff5 0%, #74c692 38%, #12401f 53%, #5fae7c 72%, #e4faec 100%);
}
.contact-btn--wa > span {
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .03) 47%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .26) 100%),
    linear-gradient(180deg, #3f8f5d 0%, #1f6437 52%, #0e3f21 100%);
}
.contact-btn--wa svg { color: #e6fbec; }

.contact-socials2 { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.contact-social2 {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--ct-line);
  background: var(--ct-panel);
  color: var(--ct-dim);
  display: grid;
  place-items: center;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.contact-social2:hover {
  background: rgba(255, 255, 255, .1);
  color: #fff;
  border-color: rgba(255, 255, 255, .28);
  transform: translateY(-2px);
}

/* ---------- right: the form ---------- */
.contact-form-card {
  padding: clamp(22px, 3vw, 32px);
  border-radius: 22px;
  background: var(--ct-panel);
  border: 1px solid var(--ct-line);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.contact-form-heading {
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ct-ink);
}
.contact-form-note { font-size: 13.5px; color: var(--ct-faint); margin-top: 6px; margin-bottom: 20px; }
.contact-field { margin-bottom: 14px; }
.contact-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--ct-dim);
  margin-bottom: 7px;
}
.contact-input,
.contact-textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--ct-line);
  color: var(--ct-ink);
  font-family: inherit;
  font-size: 14.5px;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.contact-input::placeholder,
.contact-textarea::placeholder { color: rgba(232, 238, 251, .3); }
.contact-input:focus,
.contact-textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(0, 0, 0, .4);
}
.contact-textarea { resize: vertical; min-height: 130px; }
.contact-submit {
  width: 100%;
  padding: 14px 22px;
  border-radius: 99px;
  font-size: 14.5px;
  cursor: pointer;
}
/* while the request is in flight. The gradient comes from a rule marked !important
   elsewhere, so the greying-out has to be too — otherwise a disabled button looks
   exactly as clickable as a live one. */
.contact-submit:disabled {
  cursor: not-allowed;
  filter: grayscale(.7) brightness(.75) !important;
  box-shadow: none !important;
  transform: none !important;
}
.contact-error {
  color: #ff8a8a;
  font-size: 13px;
  margin-bottom: 10px;
}

/* ---------- "message sent" dialog ---------- */
.ct-modal {
  position: fixed;
  inset: 0;
  z-index: 200; /* over the fixed header */
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(6, 6, 10, .72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: ct-modal-in .22s var(--ease-out) both;
}
.ct-modal-card {
  width: 100%;
  max-width: 400px;
  padding: 34px 28px 26px;
  border-radius: 22px;
  text-align: center;
  background: #14161f;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .95);
  animation: ct-card-in .28s cubic-bezier(.2, 1.3, .4, 1) both;
}
.ct-modal-tick {
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  color: #06120a;
  background: #22b562;
  box-shadow: 0 0 0 8px rgba(34, 181, 98, .14);
}
.ct-modal-tick svg { width: 28px; height: 28px; }
.ct-modal-title {
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #f1f4fc;
  margin: 16px 0 8px;
}
/* the old success panel set this to rgba(0,0,0,.55) inline — black text on a dark card */
.ct-modal-text {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(232, 238, 251, .66);
  margin: 0 0 22px;
}
.ct-modal-btn {
  width: 100%;
  padding: 12px 22px;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  color: #f1f4fc;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.ct-modal-btn:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .26); }
@keyframes ct-modal-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ct-card-in {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ct-modal, .ct-modal-card { animation: none; }
}

/* ---------- map ---------- */
.contact-map {
  margin-top: clamp(36px, 5vw, 56px);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--ct-line);
  box-shadow: 0 26px 54px -28px rgba(0, 0, 0, .9);
}
.contact-map iframe {
  width: 100%;
  height: 380px;
  border: 0;
  display: block;
  /* No invert here. That trick only suits Google's white roadmap; the embed saved in
     Admin is satellite view (`!5e1`), and inverting photographic imagery turns it into
     a colour negative. A dark satellite tile already sits fine on a dark page — it
     just needs taking down a notch so it doesn't out-shout the rest of the section. */
  filter: brightness(.86) saturate(.92);
}

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .contact-grid2 { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 560px) {
  .contact-map iframe { height: 300px; }
  /* one per row, each filling the width — "Call for Distributorship" is too long to
     sit beside anything on a phone. The face follows via `flex: 1` on the span; the
     centring is already in the base rule. */
  .contact-cta-row { flex-direction: column; align-items: stretch; }
  .contact-btn > span { padding: 0 18px; }
}
/* ============================================================
   WISHLIST PAGE
   The grid is the shared ProductCard on the shared .shop-section, both dark now — this
   block is only the page's own chrome: hero, the count bar, and the empty state.
   ============================================================ */
.wishlist-hero {
  position: relative;
  text-align: center;
  /* brand light bloomed into the backdrop, not a cream slab laid over it */
  background:
    radial-gradient(700px 300px at 50% 0%, rgba(236, 28, 140, .13), transparent 64%),
    radial-gradient(560px 260px at 18% 30%, rgba(255, 106, 43, .1), transparent 62%);
}
.wishlist-hero-inner { position: relative; z-index: 2; max-width: 620px; margin-inline: auto; padding: clamp(40px, 5vw, 56px) var(--pad-x) clamp(28px, 3.5vw, 38px); }
.wishlist-hero-eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ab-magenta, #ec1c8c); margin-bottom: 11px; }
.wishlist-hero-title {
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.05;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #f1f4fc;
}
.wishlist-hero-sub { font-size: 15px; color: rgba(232, 238, 251, .66); margin-top: 12px; line-height: 1.7; }

.wish-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.wish-bar-count { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: #f1f4fc; }
.wish-bar-count svg { color: #ff5a8a; }
.wish-bar-actions { display: flex; align-items: center; gap: 16px; }
.wish-bar-link { font-size: 13px; font-weight: 700; color: rgba(232, 238, 251, .66); }
.wish-bar-link:hover { color: #ff8a5c; }
.wish-bar-clear { font-family: inherit; font-size: 13px; font-weight: 700; color: #ff9c9c; background: none; border: none; cursor: pointer; padding: 0; }
.wish-bar-clear:hover { text-decoration: underline; }

.wish-empty-section { max-width: var(--max-w); margin-inline: auto; padding: 40px var(--pad-x) 90px; }
.wish-empty { text-align: center; max-width: 400px; margin: 0 auto; padding-top: 30px; }
.wish-empty-ring {
  width: 92px; height: 92px; border-radius: 50%;
  background: rgba(255, 90, 138, .1); border: 1px solid rgba(255, 90, 138, .26); color: #ff5a8a;
  display: grid; place-items: center; margin: 0 auto 22px;
}
.wish-empty-title {
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #f1f4fc;
}
.wish-empty-sub { font-size: 14.5px; color: rgba(232, 238, 251, .6); margin-top: 12px; line-height: 1.7; }
.wish-empty-btn {
  display: inline-flex; margin-top: 24px; background: var(--accent); color: #fff;
  font-weight: 800; font-size: 14px; padding: 12px 26px; border-radius: 99px;
  transition: transform .2s ease, filter .2s ease;
}
.wish-empty-btn:hover { transform: translateY(-2px); filter: brightness(1.12); }

/* Wishlist icon pulse when a product flies in */
@keyframes nav-pulse { 0% { transform: scale(1); } 35% { transform: scale(1.38); } 60% { transform: scale(.9); } 100% { transform: scale(1); } }
#navWishlist.nav-pulse { animation: nav-pulse .6s ease; }

/* ============================================================
   PRODUCT CARD — wishlist heart + interactive cart button
   ============================================================ */
.product-img-wrap { position: relative; }
.product-img-link { display: contents; }
.pc-wish { position: absolute; top: 10px; right: 10px; z-index: 4; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border: 1px solid rgba(0,0,0,.06); color: #9a9a9a; display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.14); transition: transform .18s ease, color .18s ease; }
.pc-wish:hover { transform: scale(1.14); color: var(--accent); }
.pc-wish.is-active { color: var(--accent); }
button.product-cta { border: none; cursor: pointer; font: inherit; width: 100%; }
.nav-pulse { animation: nav-pulse .6s ease; }

/* Bottom footer — uniform muted-white text & icons (no pure white) */
.footer-bottom, .footer-bottom * { color: rgba(255,255,255,.52) !important; }

/* Footer-bottom icons also muted (override earlier white svg rules) */
.footer-bottom svg { color: rgba(255,255,255,.52) !important; }

/* The brand name is the footer's masthead now, so it is no longer muted here. */
.footer-link--highlight, .footer-link--highlight:hover { color: rgba(255,255,255,.52) !important; }


/* ============================================================
   CHECKOUT PAGE (.co-*)
   Same material as /cart: no background of its own, glass panels on the body's
   ambient backdrop, Russo One for display.

   This replaces the original light design (19 rules carrying a light colour —
   #fff cards on #f7f7f8, #161616 headings) plus the separate `!important` patch
   blocks that had grown after it. One block now, so a later rule can't quietly
   win the way it did on the product card and the cart summary.
   ============================================================ */
.co-hero,
.co-section,
.co-empty-section {
  --co-ink: #f1f4fc;
  --co-dim: rgba(232, 238, 251, .66);
  --co-faint: rgba(232, 238, 251, .42);
  --co-line: rgba(255, 255, 255, .09);
  --co-panel: rgba(255, 255, 255, .035);
  color: var(--co-ink);
}

/* ---- hero ---- */
.co-hero { position: relative; text-align: center; }
.co-hero-inner { max-width: 700px; margin-inline: auto; padding: 44px var(--pad-x) 24px; }
.co-hero-eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #ff8a5c; margin-bottom: 10px; }
.co-hero-title {
  font-family: "Russo One", sans-serif; font-weight: 400;
  font-size: clamp(24px,4.2vw,38px); letter-spacing: .03em; text-transform: uppercase;
  color: var(--co-ink);
}
.co-hero-steps { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; flex-wrap: wrap; justify-content: center; }
.co-hstep {
  font-size: 12.5px; font-weight: 700; color: var(--co-faint);
  padding: 6px 14px; border-radius: 99px;
  background: var(--co-panel); border: 1px solid var(--co-line);
}
.co-hstep.done { color: #6fe4a4; border-color: rgba(111,228,164,.3); }
.co-hstep.done::before { content: "\2713 "; }
.co-hstep.active { color: #fff; background: var(--toy-grad); border-color: transparent; }
.co-hstep-line { width: 24px; height: 2px; background: var(--co-line); }

/* ---- shell ---- */
.co-section { min-height: 40vh; }
.co-wrap { max-width: 1100px; margin-inline: auto; padding: 8px var(--pad-x) 80px; }
.co-grid { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; }
.co-main { display: flex; flex-direction: column; gap: 18px; }
.co-card {
  padding: 24px; border-radius: 18px;
  background: var(--co-panel); border: 1px solid var(--co-line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.co-card-head { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.co-step-no { width: 26px; height: 26px; border-radius: 50%; background: var(--toy-grad); color: #fff; font-size: 13px; font-weight: 800; display: grid; place-items: center; flex-shrink: 0; }
.co-card-title {
  font-family: "Russo One", sans-serif; font-weight: 400;
  font-size: 15px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--co-ink);
}
.co-row2 { display: flex; gap: 12px; }
.co-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--co-dim); margin-top: 10px; cursor: pointer; }
.co-check input { accent-color: #ff6a2b; width: 16px; height: 16px; }
.co-saved { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.co-saved-chip {
  text-align: left; padding: 11px 14px; border-radius: 12px;
  background: rgba(255,255,255,.04); border: 1.5px solid var(--co-line);
  font-family: inherit; cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.co-saved-chip:hover { border-color: rgba(255,138,92,.5); background: rgba(255,255,255,.07); }
.co-saved-chip strong { display: block; font-size: 13px; font-weight: 700; color: var(--co-ink); }
.co-saved-chip span { display: block; font-size: 12px; color: var(--co-faint); margin-top: 2px; }
.co-saved-note { font-size: 12px; color: var(--co-faint); }

/* ---- payment picker ---- */
.co-pay {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; margin-bottom: 10px; border-radius: 14px;
  background: rgba(255,255,255,.04); border: 1.5px solid var(--co-line);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.co-pay:hover { border-color: rgba(255,255,255,.18); }
.co-pay.is-active { border-color: rgba(255,138,92,.65); background: rgba(255,106,43,.09); box-shadow: 0 0 0 3px rgba(255,106,43,.12); }
.co-pay input { accent-color: #ff6a2b; width: 18px; height: 18px; flex-shrink: 0; }
.co-pay-body { flex: 1; display: flex; flex-direction: column; }
.co-pay-name { font-size: 14.5px; font-weight: 700; color: var(--co-ink); }
.co-pay-sub { font-size: 12px; color: var(--co-faint); margin-top: 1px; }
.co-pay-ic { font-size: 22px; }
.co-error { color: #ff9c9c; font-size: 13px; margin-top: 10px; font-weight: 600; }

/* ---- summary ---- */
.co-summary {
  padding: 22px; border-radius: 18px;
  background: var(--co-panel); border: 1px solid var(--co-line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  position: sticky; top: calc(var(--ann-h) + var(--nav-h) + 16px);
}
.co-sum-title {
  font-family: "Russo One", sans-serif; font-weight: 400;
  font-size: 14px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--co-ink); margin-bottom: 14px;
}
.co-sum-items { display: flex; flex-direction: column; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--co-line); }
.co-sum-item { display: flex; align-items: center; gap: 12px; }
.co-sum-thumb { position: relative; width: 48px; height: 48px; border-radius: 10px; background: rgba(255,255,255,.06); flex-shrink: 0; }
/* cover, not contain: these shots carry their own backgrounds, so a padded
   contain just framed each one in a grey box */
.co-sum-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.co-sum-thumb b { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #ff6a2b; color: #fff; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; }
.co-sum-iname { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--co-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-sum-iprice { font-size: 13.5px; font-weight: 800; color: var(--co-ink); }
.co-sum-remove { background: none; border: none; color: var(--co-faint); cursor: pointer; padding: 3px; line-height: 0; flex-shrink: 0; border-radius: 6px; transition: color .15s ease, background .15s ease; }
.co-sum-remove:hover { color: #ff9c9c; background: rgba(255,120,120,.12); }

/* ---- offers ---- */
.co-offers { margin: 14px 0; padding: 12px; border-radius: 12px; border: 1px dashed rgba(140,160,255,.45); background: rgba(110,130,255,.09); }
.co-offers-title { font-size: 12px; font-weight: 800; color: #a9b8ff; margin-bottom: 8px; }
.co-offer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 0; }
.co-offer-info { min-width: 0; }
.co-offer-code { font-size: 12.5px; font-weight: 700; color: var(--co-ink); }
.co-offer-min { font-size: 11px; color: var(--co-faint); }
.co-offer-min.ok { color: #6fe4a4; }
.co-offer-btn { padding: 6px 13px; border-radius: 8px; border: none; background: #6478e8; color: #fff; font-family: inherit; font-weight: 700; font-size: 12px; cursor: pointer; white-space: nowrap; }
.co-offer-btn:disabled { background: rgba(255,255,255,.1); color: var(--co-faint); cursor: not-allowed; }

/* ---- coupon ---- */
.co-coupon { display: flex; align-items: stretch; gap: 7px; margin: 14px 0 6px; }
.co-coupon-input {
  flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px;
  background: rgba(255,255,255,.05); border: 1px solid var(--co-line);
  font-family: inherit; font-size: 13px; color: var(--co-ink); outline: none;
  transition: border-color .18s ease;
}
.co-coupon-input::placeholder { color: var(--co-faint); }
.co-coupon-input:focus { border-color: rgba(255,138,92,.6); }
.co-coupon-btn {
  flex-shrink: 0; white-space: nowrap;
  padding: 10px 16px; border-radius: 10px;
  background: transparent; border: 1.5px solid rgba(255,138,92,.55);
  font-family: inherit; font-weight: 700; font-size: 13px; color: #ff8a5c;
  cursor: pointer; transition: background .18s ease, color .18s ease;
}
.co-coupon-btn:hover { background: #ff6a2b; border-color: #ff6a2b; color: #fff; }
.co-coupon-msg { font-size: 12px; color: #ff9c9c; margin-bottom: 6px; font-weight: 600; }
.co-coupon-msg.ok { color: #6fe4a4; }

/* ---- totals ---- */
.co-sum-rows { margin-top: 6px; }
.co-sum-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--co-dim); padding: 7px 0; }
.co-sum-row s { color: var(--co-faint); }
.co-free { color: #6fe4a4; font-weight: 800; }
.co-disc { color: #6fe4a4; font-weight: 700; }
.co-sum-grand {
  border-top: 1px solid var(--co-line); margin-top: 4px; padding-top: 12px;
  font-size: 16px; font-weight: 800; color: var(--co-ink);
}
.co-sum-grand span:last-child { font-family: "Russo One", sans-serif; font-weight: 400; font-size: 19px; letter-spacing: .01em; }
/* No drop shadow: on the glass summary panel the shared CTA's pink glow bled into
   the trust row underneath it. Hence this button is not in the shared
   `.btn-primary, .pd-btn-cart, …` list and states its own gradient. */
.co-place {
  width: 100%; margin-top: 16px; padding: 15px;
  border: none; border-radius: 999px;
  background: var(--toy-grad); color: #fff;
  font-family: inherit; font-size: 15px; font-weight: 800; letter-spacing: .02em;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.2,1.4,.4,1), filter .2s var(--ease);
}
.co-place:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.08); }
.co-place:active:not(:disabled) { transform: translateY(0); }
.co-place:disabled { opacity: .55; cursor: default; }
.co-trust { display: flex; justify-content: center; gap: 18px; margin-top: 14px; }
.co-trust span { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--co-faint); }
.co-trust svg { color: #6fe4a4; }

/* ---- pincode auto-fill hint ---- */
.co-pin-hint { display: block; font-size: 11.5px; margin-top: 5px; font-weight: 600; color: var(--co-faint); }
.co-pin-hint.ok { color: #6fe4a4; }
.co-pin-hint.err { color: #ffc773; }

/* ---- empty ---- */
.co-empty-section { padding: 30px var(--pad-x) 90px; }
.co-empty { text-align: center; max-width: 380px; margin: 0 auto; padding-top: 30px; }
.co-empty-ring {
  width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 22px;
  background: rgba(255,106,43,.1); border: 1px solid rgba(255,106,43,.26); color: #ff8a5c;
}
.co-empty-title {
  font-family: "Russo One", sans-serif; font-weight: 400;
  font-size: 20px; letter-spacing: .03em; text-transform: uppercase; color: var(--co-ink);
}
.co-empty-sub { font-size: 14.5px; color: var(--co-dim); margin-top: 10px; line-height: 1.7; }
.co-empty-btn {
  display: inline-flex; margin-top: 22px; padding: 13px 30px; border-radius: 999px;
  background: var(--accent); color: #fff; font-weight: 800; font-size: 14px; text-decoration: none;
  transition: transform .18s var(--ease), filter .18s var(--ease);
}
.co-empty-btn:hover { transform: translateY(-2px); filter: brightness(1.12); }

@media (max-width: 860px) { .co-grid { grid-template-columns: 1fr; } .co-summary { position: static; } }
@media (max-width: 460px) { .co-row2 { flex-direction: column; gap: 0; } }

/* ---- COD WhatsApp-OTP modal ---- */
.co-otp-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: rgba(8,10,16,.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); padding: 16px; animation: ccs-in .15s ease; }
.co-otp-modal {
  width: 100%; max-width: 380px; padding: 26px 24px; border-radius: 20px; text-align: center;
  background: #14161f; border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.7);
  color: #f1f4fc;
}
.co-otp-icon { width: 54px; height: 54px; border-radius: 50%; background: rgba(111,228,164,.14); display: grid; place-items: center; margin: 0 auto 14px; }
.co-otp-title { font-family: "Russo One", sans-serif; font-weight: 400; font-size: 16px; letter-spacing: .03em; text-transform: uppercase; color: #f1f4fc; margin: 0 0 8px; }
.co-otp-sub { font-size: 13px; color: rgba(232,238,251,.66); line-height: 1.55; margin: 0 0 18px; }
.co-otp-sub b { color: #f1f4fc; }
.co-otp-input {
  width: 100%; text-align: center; font-family: inherit; font-size: 24px; font-weight: 700; letter-spacing: 8px;
  padding: 12px; border-radius: 12px; outline: none;
  background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.12); color: #f1f4fc;
}
.co-otp-input::placeholder { color: rgba(232,238,251,.3); }
.co-otp-input:focus { border-color: #6fe4a4; box-shadow: 0 0 0 3px rgba(111,228,164,.18); }
.co-otp-err { color: #ff9c9c; font-size: 12.5px; font-weight: 600; margin: 10px 0 0; }
.co-otp-modal .co-place { margin-top: 16px; }
.co-otp-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; font-size: 12.5px; color: rgba(232,238,251,.42); }
.co-otp-resend, .co-otp-cancel { background: none; border: 0; font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px; }
.co-otp-resend { color: #6fe4a4; }
.co-otp-cancel { color: rgba(232,238,251,.42); }
.co-otp-cancel:hover { color: #f1f4fc; }

/* =========================================================
   CART SIDE DRAWER (replaces /cart page) — v=33
   Lighter weights + premium footer
   ========================================================= */
.cd-overlay{
  position:fixed; inset:0; z-index:9998;
  background:rgba(15,18,28,.46); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
.cd-overlay.is-open{ opacity:1; visibility:visible; }

.cd-drawer{
  position:fixed; top:0; right:0; z-index:9999;
  height:100%; width:412px; max-width:93vw;
  background:#f6f7f9; color:#1d2129;
  display:flex; flex-direction:column;
  box-shadow:-22px 0 60px rgba(15,18,28,.2);
  transform:translateX(102%); transition:transform .36s cubic-bezier(.22,.61,.36,1);
  font-family:"Manrope",system-ui,sans-serif; font-weight:400;
}
.cd-drawer.is-open{ transform:translateX(0); }

/* header */
.cd-head{
  flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
  padding:17px 20px; background:#fff; border-bottom:1px solid #eef0f3;
}
.cd-head-title{ margin:0; font-size:17px; font-weight:600; color:#1d2129; letter-spacing:-.2px; }
.cd-head-title span{ font-weight:400; color:#969ba5; font-size:13.5px; }
.cd-close{
  width:34px; height:34px; border:none; border-radius:50%;
  background:#f2f3f5; color:#4a4f59; display:grid; place-items:center;
  cursor:pointer; transition:background .2s, transform .25s;
}
.cd-close:hover{ background:#e8eaee; transform:rotate(90deg); }

/* progress */
.cd-progress{
  flex-shrink:0; padding:13px 20px; background:#fff; border-bottom:1px solid #eef0f3;
}
.cd-progress-txt{ margin:0 0 8px; font-size:12.5px; font-weight:400; color:#4a4f59; text-align:center; }
.cd-progress-txt b{ color:#1d2129; font-weight:600; }
.cd-progress-done b{ color:#1aa260; font-weight:600; }
.cd-progress-bar{ height:6px; border-radius:99px; background:#edeff2; overflow:hidden; }
.cd-progress-bar span{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,#19c578,#13a85f); transition:width .5s ease;
}

/* body scroll */
.cd-body{ flex:1; overflow-y:auto; padding:14px 16px 8px; }
.cd-body::-webkit-scrollbar{ width:6px; }
.cd-body::-webkit-scrollbar-thumb{ background:#d8dade; border-radius:99px; }

/* items */
.cd-items{ display:flex; flex-direction:column; gap:10px; }
.cd-item{
  position:relative; display:flex; gap:13px; align-items:flex-start;
  background:#fff; border:1px solid #eef0f3; border-radius:15px; padding:12px;
  transition:box-shadow .2s, border-color .2s;
}
.cd-item:hover{ box-shadow:0 6px 18px rgba(15,18,28,.06); border-color:#e3e6ea; }
.cd-item-img{ flex-shrink:0; width:64px; height:64px; border-radius:11px; overflow:hidden; background:#f3f4f6; display:block; }
.cd-item-img img{ width:100%; height:100%; object-fit:contain; }
.cd-item-main{ flex:1; min-width:0; }
.cd-item-name{
  font-size:13.5px; font-weight:500; color:#1d2129; line-height:1.4;
  text-decoration:none; margin-bottom:11px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.cd-item-name:hover{ color:#e8502a; }
.cd-item-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cd-qty{ display:inline-flex; align-items:center; border:1px solid #e3e6ea; border-radius:10px; overflow:hidden; background:#fff; }
.cd-qty button{
  width:30px; height:30px; border:none; background:#fff; color:#1d2129;
  font-size:17px; font-weight:400; cursor:pointer; transition:background .15s;
}
.cd-qty button:hover{ background:#f3f4f6; }
.cd-qty span{ min-width:30px; text-align:center; font-size:13.5px; font-weight:500; color:#1d2129; }
.cd-item-price{ font-size:15px; font-weight:600; color:#1d2129; }
.cd-item-del{
  position:absolute; top:11px; right:11px; width:27px; height:27px; border:none;
  background:transparent; color:#bfc3ca; border-radius:7px; display:grid; place-items:center;
  cursor:pointer; transition:color .2s, background .2s;
}
.cd-item-del:hover{ color:#e23b3b; background:#fdecec; }

/* coupon */
.cd-coupon{
  display:flex; align-items:center; gap:9px; margin-top:14px;
  background:#fff; border:1.5px dashed #d3d6dd; border-radius:13px; padding:0 14px;
}
.cd-coupon svg{ color:#969ba5; flex-shrink:0; }
.cd-coupon input{
  flex:1; min-width:0; border:none; outline:none; background:transparent;
  padding:14px 0; font-size:13.5px; font-weight:500; color:#1d2129; letter-spacing:.4px;
}
.cd-coupon input::placeholder{ color:#a2a7b0; font-weight:400; letter-spacing:0; text-transform:none; }
.cd-offers-link{
  display:block; text-align:center; margin:12px 0 4px; font-size:13px; font-weight:500;
  color:#2f57d8; text-decoration:none;
}
.cd-offers-link:hover{ text-decoration:underline; }

/* recommendations */
.cd-recs{ margin-top:18px; }
.cd-recs-title{ font-size:13.5px; font-weight:600; color:#1d2129; margin-bottom:10px; }
.cd-recs-scroll{ display:flex; gap:11px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x mandatory; }
.cd-recs-scroll::-webkit-scrollbar{ height:5px; }
.cd-recs-scroll::-webkit-scrollbar-thumb{ background:#d8dade; border-radius:99px; }
.cd-rec{
  flex:0 0 140px; scroll-snap-align:start; background:#fff; border:1px solid #eef0f3;
  border-radius:14px; padding:10px; display:flex; flex-direction:column;
  transition:box-shadow .2s, transform .2s;
}
.cd-rec:hover{ box-shadow:0 8px 20px rgba(15,18,28,.08); transform:translateY(-2px); }
.cd-rec-img{ position:relative; display:block; height:86px; border-radius:10px; overflow:hidden; background:#f3f4f6; margin-bottom:8px; }
.cd-rec-img img{ width:100%; height:100%; object-fit:contain; }
.cd-rec-off{
  position:absolute; top:6px; left:6px; background:#19c578; color:#fff;
  font-size:10px; font-weight:600; padding:2px 6px; border-radius:6px;
}
.cd-rec-name{
  font-size:12px; font-weight:500; color:#1d2129; line-height:1.35; margin-bottom:5px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:32px;
}
.cd-rec-price{ font-size:13px; color:#1d2129; margin-bottom:8px; font-weight:400; }
.cd-rec-price s{ color:#a2a7b0; font-weight:400; font-size:11px; margin-right:3px; }
.cd-rec-price b{ font-weight:600; }
.cd-rec-add{
  margin-top:auto; border:1.3px solid #1d2129; background:#fff; color:#1d2129;
  border-radius:9px; padding:7px 0; font-size:12px; font-weight:500; cursor:pointer;
  transition:background .2s, color .2s;
}
.cd-rec-add:hover{ background:#1d2129; color:#fff; }

/* ── footer (ref-style) ─────────────────────────────── */
.cd-foot{ flex-shrink:0; background:#fff; border-top:1px solid #eef0f3; padding:13px 16px 14px; }
.cd-total{ display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; padding:0 4px; }
.cd-total-label{ display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:#1d2129; }
.cd-total-label svg{ color:#1d2129; }
.cd-total-amt{ font-size:21px; font-weight:700; color:#1d2129; letter-spacing:-.5px; }

/* ---- View Cart — a metal plate carrying the brand gradient ----
   Same construction as the metal buttons on /contact and the homepage: the 2px of
   padding IS the polished rim, the inner span is the face. The face keeps the brand
   gradient rather than gunmetal — this is the drawer's one "buy" control, and grey
   steel would stop asking for the click.

   It is no longer part of the shared `.btn-primary, .pd-btn-cart, .co-place, …`
   !important rule; two declarations fighting over one button is what left the product
   card with a near-white border for weeks.
   ---------------------------------------------------------------- */
.cd-checkout{
  position:relative;
  display:block; width:100%;
  padding:2px;
  border:none; border-radius:16px;
  overflow:hidden;
  text-decoration:none; cursor:pointer; text-align:left;
  /* the rim: a hard horizon at 52% is what reads as polished metal rather than grey */
  background-image:linear-gradient(180deg,#ffffff 0%,#ffd9c9 40%,#7a2f3f 52%,#ffb59b 74%,#fff2ec 100%);
  transition:transform .18s var(--ease);
}
.cd-checkout-face{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 15px;
  border-radius:14px;
  /* three layers: brushed grain, specular gloss, then the brand gradient itself */
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.05) 47%, rgba(0,0,0,.06) 50%, rgba(0,0,0,.2) 100%),
    var(--toy-grad);
  /* inset only — this is the bevel, not a shadow cast on the drawer */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(0,0,0,.28);
  transition:filter .18s var(--ease);
}
/* a light sweeps across the plate on hover */
.cd-checkout::after{
  content:"";
  position:absolute; inset:0;
  border-radius:16px;
  background:linear-gradient(105deg, transparent 34%, rgba(255,255,255,.45) 48%, transparent 60%);
  transform:translateX(-130%);
  transition:transform .7s var(--ease-out);
  pointer-events:none;
}
.cd-checkout:hover{ transform:translateY(-2px); }
.cd-checkout:hover .cd-checkout-face{ filter:brightness(1.08); }
.cd-checkout:hover::after{ transform:translateX(130%); }
.cd-checkout:active{ transform:translateY(0); }
.cd-checkout:active .cd-checkout-face{ filter:brightness(.95); box-shadow:inset 0 2px 5px rgba(0,0,0,.3); }
.cd-checkout:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

.cd-checkout-main{ display:flex; flex-direction:column; gap:2px; min-width:0; margin-right:auto; }
.cd-checkout-title{
  font-family:"Russo One",sans-serif; font-weight:400;
  font-size:17px; letter-spacing:.03em; text-transform:uppercase;
  color:#fff; line-height:1.1;
  text-shadow:0 1px 2px rgba(0,0,0,.3);
}
.cd-checkout-sub{ font-size:11px; font-weight:500; color:rgba(255,255,255,.8); }
.cd-checkout-arrow{ flex-shrink:0; color:#fff; transition:transform .2s var(--ease); }
.cd-checkout:hover .cd-checkout-arrow{ transform:translateX(3px); }

/* The accepted methods, back on the plate. Glass, not white cards: a solid white chip
   on this gradient looked like a button you could press, and the whole plate is one
   link — there is nothing here to press separately. */
.cd-pay-icons{ display:flex; align-items:center; gap:5px; flex-shrink:0; }
.cd-pay{
  display:grid; place-items:center; min-width:28px; height:22px; padding:0 6px;
  border-radius:6px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  color:#fff;
  font-size:9.5px; font-weight:800; line-height:1;
}
.cd-pay-upi{ letter-spacing:.4px; }
.cd-pay-card{ padding:0 5px; }
.cd-pay-rupee{ font-size:12px; }

/* a phone has no room for the sub line AND three chips beside the label */
@media (max-width:420px){
  .cd-checkout-sub{ display:none; }
  .cd-pay{ min-width:24px; height:20px; }
}
@media (prefers-reduced-motion: reduce){
  .cd-checkout, .cd-checkout-face, .cd-checkout::after, .cd-checkout-arrow{ transition:none; }
  .cd-checkout:hover::after{ transform:translateX(-130%); }
}

.cd-foot-quote{ margin:11px 0 0; text-align:center; font-size:12.5px; font-style:italic; font-weight:400; color:#5a5f68; }
.cd-foot-secure{ margin:6px 0 0; display:flex; align-items:center; justify-content:center; gap:5px; font-size:11px; font-weight:400; color:#a2a7b0; }
.cd-foot-secure svg{ color:#19c578; }

/* empty */
.cd-empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px 30px; gap:6px; }
.cd-empty-ic{ width:84px; height:84px; border-radius:50%; background:#fff; color:#c8ccd2; display:grid; place-items:center; margin-bottom:8px; box-shadow:0 6px 18px rgba(15,18,28,.06); }
.cd-empty-title{ margin:0; font-size:17px; font-weight:600; color:#1d2129; }
.cd-empty-sub{ margin:0 0 14px; font-size:13px; font-weight:400; color:#969ba5; }
.cd-empty-btn{ border:none; background:#15171c; color:#fff; border-radius:12px; padding:13px 28px; font-size:13.5px; font-weight:500; cursor:pointer; transition:background .2s, transform .15s; }
.cd-empty-btn:hover{ background:#000; transform:translateY(-1px); }

/* =========================================================
   ORDER CARDS  (.oc-*)  +  TRACK ORDER  (.to-*)
   One block, because they are one surface: /track-order renders the .oc-* result card
   inside its own page, and /orders/[id] renders the same card standalone. Styling only
   one of them would leave a white card sitting in a dark page.

   Same material as /about, /contact and the policy pages: no background of its own, so
   the body's ambient glow shows through, and every card is a sheet of glass on it.
   ========================================================= */
.oc-wrap,
.to-wrap {
  --or-ink: #f1f4fc;
  --or-dim: rgba(232, 238, 251, .66);
  --or-faint: rgba(232, 238, 251, .42);
  --or-line: rgba(255, 255, 255, .09);
  --or-panel: rgba(255, 255, 255, .035);
  --or-green: #22b562;
  --or-green-soft: rgba(34, 181, 98, .13);
  background: transparent;
  color: var(--or-ink);
  font-family: "Manrope", system-ui, sans-serif;
}
.oc-wrap { min-height: 70vh; padding: 38px 16px 60px; }
.to-wrap { min-height: 72vh; padding: 42px 16px 64px; }
.oc-inner { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.to-inner { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }

/* ---------- heroes ---------- */
.oc-hero { text-align: center; padding: 8px 10px 4px; }
.oc-check { width: 88px; height: 88px; margin: 0 auto 18px; }
.oc-check svg { width: 100%; height: 100%; }
.oc-check-circle { stroke: var(--or-green); stroke-width: 2.4; stroke-dasharray: 151; stroke-dashoffset: 151; animation: ocCircle .6s ease forwards; }
.oc-check-mark { stroke: var(--or-green); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: ocMark .4s .55s ease forwards; }
.oc-check.is-cancel .oc-check-circle { stroke: #e8544f; }
.oc-check.is-cancel .oc-check-mark { stroke: #e8544f; }
@keyframes ocCircle { to { stroke-dashoffset: 0; } }
@keyframes ocMark { to { stroke-dashoffset: 0; } }

.oc-hero-title,
.to-hero-title {
  margin: 0 0 10px;
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--or-ink);
}
.oc-hero-title { font-size: 26px; }
.to-hero-title { font-size: 25px; }
.oc-hero-sub { margin: 0 auto; max-width: 440px; font-size: 14.5px; color: var(--or-dim); line-height: 1.65; }
.oc-hero-sub b { font-weight: 700; color: var(--or-ink); }

/* admin banner — replaces the hero */
.to-banner { position: relative; width: 100%; line-height: 0; }
.to-banner img { width: 100%; height: auto; display: block; }
/* fade the bottom edge into the page, or it cuts off dead straight on the backdrop */
.to-banner::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 20%;
  background: linear-gradient(180deg, transparent, var(--amb-base));
  pointer-events: none;
}
/* the banner already gives the page its top; no need to pad away from a hero that
   isn't there */
.to-wrap--banner { padding-top: 24px; }
/* the page title, when the banner has taken the hero's place */
.to-form-head { margin-bottom: 4px; }
.to-form-title {
  margin: 0 0 6px;
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-size: 19px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--or-ink);
}
.to-form-note { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--or-faint); }

.to-hero { text-align: center; padding: 4px 6px 8px; }
.to-hero-ic {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 14px;
  border-radius: 16px;
  color: #ff8a5c;
  background: rgba(255, 106, 43, .12);
  border: 1px solid rgba(255, 106, 43, .3);
}
.to-hero-ic svg { width: 26px; height: 26px; }
.to-hero-sub { margin: 0 auto; max-width: 420px; font-size: 14px; color: var(--or-dim); line-height: 1.65; }

.oc-meta { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 18px; }
.oc-meta-chip {
  display: inline-flex; flex-direction: column; gap: 2px; align-items: flex-start;
  background: var(--or-panel); border: 1px solid var(--or-line); border-radius: 11px; padding: 8px 14px;
  font-size: 13px; font-weight: 600; color: var(--or-ink);
}
.oc-meta-chip i { font-size: 10.5px; font-weight: 700; font-style: normal; color: var(--or-faint); text-transform: uppercase; letter-spacing: .08em; }

/* ---------- cards ---------- */
.oc-card,
.to-card {
  background: var(--or-panel);
  border: 1px solid var(--or-line);
  border-radius: 18px;
  padding: 20px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.to-card { padding: 22px; }
.oc-card-title {
  margin: 0 0 16px;
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--or-ink);
}
.oc-card-title span { font-family: "Manrope", sans-serif; font-weight: 400; color: var(--or-faint); font-size: 13.5px; }

/* ---------- tracking ---------- */
.oc-track { padding-top: 18px; }
.oc-track-eta {
  display: flex; align-items: center; gap: 13px;
  background: var(--or-green-soft); border: 1px solid rgba(34, 181, 98, .28);
  border-radius: 13px; padding: 13px 16px; margin-bottom: 26px;
}
.oc-track-eta-ic { font-size: 26px; }
.oc-track-eta-label { margin: 0; font-size: 11.5px; font-weight: 700; color: rgba(150, 225, 185, .8); text-transform: uppercase; letter-spacing: .08em; }
.oc-track-eta-date { margin: 2px 0 0; font-size: 17px; font-weight: 700; color: #6fe4a4; }

.oc-steps { position: relative; display: flex; justify-content: space-between; padding: 0 4px 4px; }
.oc-steps-line { position: absolute; top: 13px; left: 32px; right: 32px; height: 3px; background: rgba(255, 255, 255, .1); border-radius: 99px; overflow: hidden; }
.oc-steps-line span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #22b562, #19a35a); width: calc(var(--active) / 3 * 100%); transition: width .6s ease; }
.oc-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; }
.oc-step-dot {
  width: 28px; height: 28px; border-radius: 50%;
  /* opaque, not translucent — the progress line runs behind these dots and would
     otherwise show straight through them */
  background: #14161f; border: 2.5px solid rgba(255, 255, 255, .16);
  color: var(--or-faint); display: grid; place-items: center; margin-bottom: 9px; transition: .3s;
}
.oc-step-num { font-size: 12px; font-weight: 700; }
.oc-step.is-done .oc-step-dot { background: var(--or-green); border-color: var(--or-green); color: #06120a; }
.oc-step.is-current .oc-step-dot { box-shadow: 0 0 0 5px rgba(34, 181, 98, .2); }
.oc-step-label { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--or-faint); }
.oc-step.is-done .oc-step-label { color: var(--or-ink); }
.oc-step-desc { margin: 2px 0 0; font-size: 10.5px; color: rgba(232, 238, 251, .3); line-height: 1.3; }

/* ---------- items ---------- */
.oc-items { display: flex; flex-direction: column; gap: 14px; }
.oc-item { display: flex; align-items: center; gap: 14px; }
.oc-item-img { position: relative; flex-shrink: 0; width: 56px; height: 56px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid var(--or-line); display: grid; place-items: center; overflow: visible; }
.oc-item-img img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }
.oc-item-ph { font-size: 24px; }
.oc-item-qty { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; background: #f1f4fc; color: #14161f; border-radius: 99px; font-size: 11px; font-weight: 800; display: grid; place-items: center; border: 2px solid #14161f; }
.oc-item-main { flex: 1; min-width: 0; }
.oc-item-name { margin: 0; font-size: 14px; font-weight: 600; color: var(--or-ink); line-height: 1.4; }
.oc-item-variant { margin: 3px 0 0; font-size: 12.5px; color: var(--or-faint); }
.oc-item-price { font-size: 14.5px; font-weight: 700; color: var(--or-ink); white-space: nowrap; }

/* ---------- totals ---------- */
.oc-totals { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--or-line); display: flex; flex-direction: column; gap: 9px; }
.oc-total-row { display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: var(--or-dim); }
.oc-total-row span:last-child { font-weight: 600; color: var(--or-ink); }
.oc-total-disc span { color: #6fe4a4 !important; }
.oc-free { color: #6fe4a4; font-weight: 700; }
.oc-total-grand { margin-top: 6px; padding-top: 13px; border-top: 1px dashed rgba(255, 255, 255, .14); font-size: 16px; font-weight: 700; color: var(--or-ink); }
.oc-total-grand span:last-child { font-size: 19px; font-weight: 800; }

/* ---------- info cards ---------- */
.oc-info { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.oc-info-card { padding: 18px; }
.oc-info-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--or-ink); margin-bottom: 11px; }
.oc-info-head svg { color: var(--or-faint); }
.oc-info-name { margin: 0 0 5px; font-size: 14px; font-weight: 600; color: var(--or-ink); }
.oc-info-text { margin: 0 0 3px; font-size: 13px; color: var(--or-dim); line-height: 1.55; }
.oc-pay-paid { color: #6fe4a4; font-weight: 600; }

/* ---------- actions ---------- */
.oc-actions { display: flex; gap: 12px; margin-top: 4px; }
.oc-btn { flex: 1; text-align: center; border-radius: 13px; padding: 15px; font-size: 14px; font-weight: 700; text-decoration: none; transition: transform .15s, background .2s, border-color .2s; }
.oc-btn-dark { background: #f1f4fc; color: #14161f; }
.oc-btn-dark:hover { background: #fff; transform: translateY(-1px); }
.oc-btn-ghost { background: rgba(255, 255, 255, .05); color: var(--or-ink); border: 1px solid var(--or-line); }
.oc-btn-ghost:hover { border-color: rgba(255, 255, 255, .3); transform: translateY(-1px); }

.oc-help { text-align: center; margin: 6px 0 0; font-size: 13px; color: var(--or-faint); }
.oc-help a { color: #ff8a5c; font-weight: 600; text-decoration: none; }
.oc-help a:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .oc-hero-title { font-size: 22px; }
  .to-hero-title { font-size: 21px; }
  .oc-info { grid-template-columns: 1fr; }
  .oc-actions { flex-direction: column; }
  .oc-step-desc { display: none; }
  .oc-step-label { font-size: 11px; }
}

/* ---------- track order: the lookup form ---------- */
.to-form { display: flex; flex-direction: column; gap: 14px; }
.to-field { display: flex; flex-direction: column; gap: 7px; }
.to-label { font-size: 12px; font-weight: 700; color: var(--or-dim); }
.to-field input {
  border: 1px solid var(--or-line); border-radius: 12px; padding: 13px 14px; font-size: 14.5px;
  color: var(--or-ink); background: rgba(0, 0, 0, .28); outline: none;
  transition: border-color .2s, background .2s;
  font-family: inherit;
}
.to-field input:focus { border-color: var(--accent); background: rgba(0, 0, 0, .4); }
.to-field input::placeholder { color: rgba(232, 238, 251, .3); }
.to-submit {
  margin-top: 4px; border: none; border-radius: 12px; padding: 15px;
  background: #f1f4fc; color: #14161f;
  font-family: inherit; font-size: 14.5px; font-weight: 800; cursor: pointer;
  transition: background .2s, transform .15s, filter .2s;
}
.to-submit:hover:not(:disabled) { background: #fff; transform: translateY(-1px); }
.to-submit:disabled { filter: grayscale(.5) brightness(.7); cursor: not-allowed; }
.to-error {
  margin: 2px 0 0; font-size: 13px; color: #ff9c9c;
  background: rgba(232, 84, 79, .12); border: 1px solid rgba(232, 84, 79, .3);
  border-radius: 10px; padding: 10px 13px;
}

/* ---------- track order: the result ---------- */
.to-result { display: flex; flex-direction: column; gap: 16px; }
.to-result-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.to-result-no { margin: 0; font-family: "Russo One", sans-serif; font-weight: 400; font-size: 17px; letter-spacing: .04em; color: var(--or-ink); }
.to-result-date { margin: 5px 0 0; font-size: 12.5px; color: var(--or-faint); }

.to-badge { flex-shrink: 0; font-size: 11px; font-weight: 800; padding: 5px 11px; border-radius: 99px; text-transform: capitalize; letter-spacing: .04em; border: 1px solid transparent; }
.to-badge-pending, .to-badge-confirmed { background: rgba(90, 130, 255, .16); border-color: rgba(90, 130, 255, .34); color: #a8bcff; }
.to-badge-packed { background: rgba(255, 168, 40, .14); border-color: rgba(255, 168, 40, .32); color: #ffc773; }
.to-badge-dispatched { background: rgba(35, 169, 224, .14); border-color: rgba(35, 169, 224, .32); color: #7cd3f5; }
.to-badge-delivered { background: rgba(34, 181, 98, .14); border-color: rgba(34, 181, 98, .32); color: #6fe4a4; }
.to-badge-cancelled, .to-badge-returned { background: rgba(232, 84, 79, .14); border-color: rgba(232, 84, 79, .32); color: #ff9c9c; }

.to-cancel {
  margin-top: 16px; border-radius: 12px; padding: 14px 16px; font-size: 13.5px; line-height: 1.6;
  background: rgba(232, 84, 79, .1); border: 1px solid rgba(232, 84, 79, .28); color: #ffb3b3;
}

.to-detail-link { display: inline-block; margin-top: 16px; font-size: 13.5px; font-weight: 700; color: #ff8a5c; text-decoration: none; }
.to-detail-link:hover { text-decoration: underline; }

.to-help { text-align: center; margin: 6px 0 0; font-size: 13px; color: var(--or-faint); line-height: 1.7; }
.to-help b { font-weight: 700; color: var(--or-dim); }
.to-help a { color: #ff8a5c; font-weight: 600; text-decoration: none; }
.to-help a:hover { text-decoration: underline; }

/* =========================================================
   SITEMAP PAGE
   Same material as /about, /contact, /track-order and the policy pages: no background
   of its own, so the body's ambient glow is the surface and every block is glass on it.
   ========================================================= */
.sm-page {
  --sm-ink: #f1f4fc;
  --sm-dim: rgba(232, 238, 251, .66);
  --sm-faint: rgba(232, 238, 251, .42);
  --sm-line: rgba(255, 255, 255, .09);
  --sm-panel: rgba(255, 255, 255, .035);
  font-family: "Manrope", system-ui, sans-serif;
  background: transparent;
  color: var(--sm-ink);
  min-height: 70vh;
  padding-bottom: 60px;
}

/* ---------- hero ---------- */
.sm-hero {
  position: relative;
  padding: clamp(40px, 5.5vw, 62px) 20px clamp(34px, 4vw, 46px);
  text-align: center;
  /* brand light bloomed into the backdrop — the old build laid a near-black slab here,
     which on a dark page just read as a different, worse dark */
  background:
    radial-gradient(720px 300px at 50% 0%, rgba(236, 28, 140, .12), transparent 64%),
    radial-gradient(600px 280px at 15% 30%, rgba(35, 169, 224, .1), transparent 62%);
}
.sm-hero-inner { position: relative; z-index: 1; max-width: 620px; margin: 0 auto; }
.sm-hero-ic {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  margin-bottom: 16px;
  background: rgba(255, 106, 43, .12);
  border: 1px solid rgba(255, 106, 43, .3);
  color: #ff8a5c;
}
.sm-eyebrow {
  margin: 0 0 10px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ab-magenta, #ec1c8c);
}
.sm-title {
  margin: 0 0 12px;
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-size: clamp(26px, 4.4vw, 40px);
  line-height: 1.05;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--sm-ink);
}
.sm-sub { margin: 0 auto; max-width: 500px; font-size: 14.5px; color: var(--sm-dim); line-height: 1.7; }
.sm-meta { display: inline-flex; align-items: center; gap: 14px; margin-top: 22px; font-size: 13px; color: var(--sm-faint); }
.sm-meta b { font-weight: 800; color: var(--sm-ink); }
.sm-meta i { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, .22); }

.sm-inner { max-width: 1060px; margin: 0 auto; padding: 0 16px; display: flex; flex-direction: column; gap: clamp(30px, 4vw, 46px); }

/* ---------- a section: chrome heading, then its links in rows and columns ---------- */
.sm-sec { display: flex; flex-direction: column; gap: 16px; }
.sm-sec-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--sm-line);
}
.sm-sec-count {
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--sm-line);
  font-size: 11px;
  font-weight: 800;
  color: var(--sm-faint);
}

/* ---- CHROME HEADING ----------------------------------------------------------
   The same three-layer plate as the homepage's category titles:
     ::before  a thick dark keyline, extruded downward
     ::after   a mid-silver rim just inside it
     > span    the chrome face itself
   Two things make or break it, both learned the hard way on the homepage:
   ONE LINE — the gradient maps to the element box, so a wrapped heading gives line 1
   the sky and line 2 the ground and the whole thing reads as grey plastic.
   HARD STOPS — chrome is not a smooth ramp; bright sky slams into a dark band at the
   horizon, a one-stop white flash marks it, then the ground reflects back up.
   ------------------------------------------------------------------------------ */
.sm-h {
  position: relative;
  isolation: isolate;
  margin: 0;
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  /* nowrap means the longest of these — "Company Pages" — must still fit a phone */
  font-size: clamp(21px, 3.4vw, 34px);
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sm-h::before,
.sm-h::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  pointer-events: none;
}
/* strokes in em, not px — they'd swallow the glyphs at 21px and vanish at 34px */
.sm-h::before {
  z-index: 1;
  color: #080b13;
  -webkit-text-stroke: .07em #080b13;
  filter:
    drop-shadow(0 2px 0 #080b13)
    drop-shadow(0 3px 0 #05070c)
    drop-shadow(0 10px 16px rgba(0, 0, 0, .85));
}
.sm-h::after {
  z-index: 2;
  color: #e8eefb;
  -webkit-text-stroke: .035em #e8eefb;
}
.sm-h > span {
  position: relative;
  z-index: 3;
  background-image: linear-gradient(180deg,
    #ffffff 0%, #ced9ee 34%, #43506c 48%, #0e131f 49.6%,
    #ffffff 50.4%, #ffffff 55%, #93a2c0 68%, #eef3fd 88%, #5f6c88 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- links, in rows and columns ---------- */
.sm-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 4px;
}
.sm-links a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 9px;
  font-size: 13.5px;
  color: var(--sm-dim);
  text-decoration: none;
  transition: color .16s, background .16s, transform .16s;
}
.sm-links a svg { color: rgba(255, 255, 255, .2); flex-shrink: 0; transition: color .16s, transform .16s; }
.sm-links a:hover { color: var(--sm-ink); background: rgba(255, 255, 255, .06); transform: translateX(2px); }
.sm-links a:hover svg { color: #ff8a5c; }

/* ---------- all products ---------- */
.sm-products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px; }
.sm-product-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: 11px;
  text-decoration: none;
  transition: background .16s;
  min-width: 0;
}
.sm-product-link:hover { background: rgba(255, 255, 255, .06); }
.sm-product-thumb {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--sm-line);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.sm-product-thumb img { width: 100%; height: 100%; object-fit: contain; }
.sm-product-ph { color: var(--sm-faint); display: grid; place-items: center; }
.sm-product-ph svg { width: 18px; height: 18px; }
.sm-product-name {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  color: var(--sm-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sm-product-link:hover .sm-product-name { color: var(--sm-ink); }
.sm-product-arrow { color: rgba(255, 255, 255, .2); flex-shrink: 0; transition: color .16s, transform .16s; }
.sm-product-link:hover .sm-product-arrow { color: #ff8a5c; transform: translateX(2px); }

@media (max-width: 560px) {
  .sm-links,
  .sm-products-grid { grid-template-columns: 1fr; }
}
/* =========================================================
   CAREERS PAGE — v=38
   ========================================================= */
/* hero */
/* perks */
/* apply */
/* form */
/* success */
/* =========================================================
   DEALERS — "How it works" steps (v=39)  (reuses .cr-* styles)
   ========================================================= */
/* =========================================================
   DEALERS PAGE — distinct emerald/partnership theme (v=40)
   ========================================================= */
/* hero — light split */
/* hero highlights card */
/* section heads */
/* benefits — icon-left horizontal cards */
/* steps — connected flow */
/* apply — colored band + centered form */
/* keep the shared form card neutral; tint its primary button emerald on this page */
/* =========================================================
   BULK ORDERS PAGE — corporate indigo/blue theme (v=41)
   ========================================================= */
/* hero — deep indigo gradient, centered */
/* section heads */
/* use cases — top-accent cards */
/* value strip — light tinted band */
/* quote section */
/* blue top accent on the shared form card + tinted controls */
/* what happens next — 3 inline steps under form */

/* =========================================================
   CMS CONTENT PAGES (policies, terms…) — rendered by /[slug].
   Same material as /about: no page background of its own, so the body's ambient glow
   is the surface and the reading column is a sheet of glass laid on it. Russo One for
   display, Manrope for prose — the storefront's two voices, nothing new invented here.
   ========================================================= */
.legal-page {
  --lg-ink: #f1f4fc;
  --lg-dim: rgba(232, 238, 251, .68);
  --lg-faint: rgba(232, 238, 251, .42);
  --lg-line: rgba(255, 255, 255, .09);
  --lg-grad: linear-gradient(96deg, #ee3d46 0%, #ec1c8c 42%, #8a2b8f 100%);
  font-family: "Manrope", system-ui, sans-serif;
  background: transparent;
  color: var(--lg-ink);
  min-height: 70vh;
}

/* ---------- hero ---------- */
.legal-hero {
  position: relative;
  padding: clamp(44px, 6vw, 72px) 20px clamp(40px, 5vw, 60px);
  text-align: center;
  /* brand light bloomed into the backdrop rather than a slab laid over it */
  background:
    radial-gradient(760px 320px at 50% 0%, rgba(236, 28, 140, .13), transparent 64%),
    radial-gradient(620px 280px at 12% 20%, rgba(35, 169, 224, .1), transparent 60%);
}
.legal-hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.legal-hero-eyebrow {
  margin: 0 0 12px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ab-magenta, #ec1c8c);
}
.legal-hero-title {
  margin: 0;
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-size: clamp(26px, 4.4vw, 42px);
  line-height: 1.05;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--lg-ink);
}

.legal-banner { width: 100%; line-height: 0; }
.legal-banner img { width: 100%; height: auto; display: block; }

/* ---------- body — the reading column ---------- */
.legal-body {
  max-width: 820px;
  margin: 0 auto clamp(56px, 7vw, 88px);
  padding: clamp(26px, 4vw, 44px) clamp(20px, 3.4vw, 44px) clamp(32px, 4vw, 48px);
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--lg-line);
  border-radius: 22px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.legal-body-title {
  margin: 0 0 18px;
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 28px);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--lg-ink);
}
.legal-empty { color: var(--lg-faint); text-align: center; padding: 30px 0; font-size: 14px; }

/* ---------- rendered CMS html ---------- */

/* Admin can paste HTML from anywhere, and a stray inline `font-family` would drag its
   own typeface onto the page. Only `!important` outranks a style attribute, which is
   why this is heavy-handed — the content is nothing but Manrope unless a rule below
   deliberately says otherwise. */
.cms-content, .cms-content * { font-family: inherit !important; }
/* …and this is that "otherwise". `.cms-content h2` (0,1,1) out-specifies
   `.cms-content *` (0,1,0), so with both marked important, these win. */
.cms-content h2,
.cms-content h3,
.cms-content ul:has(> li:only-child > strong:only-child) strong {
  font-family: "Russo One", sans-serif !important;
}

.cms-content { color: var(--lg-dim); font-size: 15.5px; line-height: 1.85; }
.cms-content > *:first-child { margin-top: 0; }
.cms-content h2, .cms-content h3 {
  font-weight: 400;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--lg-ink);
}
.cms-content h2 {
  margin: 32px 0 12px;
  padding-top: 20px;
  font-size: 18px;
  border-top: 1px solid var(--lg-line);
}
.cms-content h2:first-of-type { border-top: none; padding-top: 0; margin-top: 6px; }
.cms-content h3 { margin: 24px 0 8px; font-size: 15.5px; }
.cms-content p { margin: 0 0 14px; }
.cms-content em { color: var(--lg-faint); font-style: italic; font-size: 13.5px; }
.cms-content ul, .cms-content ol { margin: 0 0 14px; padding-left: 20px; }
.cms-content li { margin: 0 0 8px; }
.cms-content li::marker { color: var(--ab-orange, #ff6a2b); }
.cms-content a { color: #ff8a5c; text-decoration: none; font-weight: 600; }
.cms-content a:hover { text-decoration: underline; }
.cms-content strong { font-weight: 700; color: var(--lg-ink); }
.cms-content hr { border: none; border-top: 1px solid var(--lg-line); margin: 26px 0; }
.cms-content table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 14px; }
.cms-content th, .cms-content td { border: 1px solid var(--lg-line); padding: 10px 12px; text-align: left; }
.cms-content th { background: rgba(255, 255, 255, .05); font-weight: 700; color: var(--lg-ink); }

/* The policy copy carries no h2 at all. Every section break is written as a one-item
   list holding nothing but bold text — `<ul><li><strong>Delivery Time</strong></li></ul>`
   — so that is what has to be read as a heading. Matching the shape rather than
   rewriting the content keeps Admin the source of truth.
   Old browsers without :has() just get a bold bullet, which is what it is anyway. */
.cms-content ul:has(> li:only-child > strong:only-child) {
  margin: 30px 0 12px;
  padding: 20px 0 0;
  border-top: 1px solid var(--lg-line);
  list-style: none;
}
.cms-content ul:first-child:has(> li:only-child > strong:only-child) {
  border-top: none;
  padding-top: 0;
  margin-top: 6px;
}
.cms-content ul:has(> li:only-child > strong:only-child) > li { margin: 0; }
.cms-content ul:has(> li:only-child > strong:only-child) strong {
  font-weight: 400;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--lg-ink);
}

/* ---------- responsive ---------- */
@media (max-width: 768px) {
  .legal-body {
    /* edge to edge on a phone: a 20px gutter either side of a card that is itself
       padded just wastes the width the prose needs */
    max-width: none;
    margin-inline: 12px;
    border-radius: 16px;
  }
  .cms-content { font-size: 15px; }
  .cms-content ul:has(> li:only-child > strong:only-child) strong { font-size: 15.5px; }
  /* long URLs and emails in a policy have nothing to break on */
  .cms-content a { overflow-wrap: anywhere; }
  /* a wide table must scroll inside itself, not push the page sideways */
  .cms-content table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* =========================================================
   LOGIN / AUTH — split screen
   One block. This page's CSS used to be ten of them (v=45 → v=62), each patching the
   last: three different .auth2-hero backgrounds, two .auth2-cont colours, an
   "electronics-blue circuit board" from the old brand. Whoever came next had to read
   all ten to know what actually rendered. It is one block now.
   ========================================================= */
.auth2-page {
  --au-ink: #f1f4fc;
  --au-dim: rgba(232, 238, 251, .66);
  --au-faint: rgba(232, 238, 251, .42);
  --au-line: rgba(255, 255, 255, .1);
  position: relative;
  font-family: "Manrope", system-ui, sans-serif;
  background: transparent;
  color: var(--au-ink);
}
.auth2-grid { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }

/* ── back to home ──
   The page hides the site header, so without this there is no way out but the browser
   button. Sits over the hero on desktop and over the card on a phone; both are dark, so
   one treatment covers it. */
.auth2-home {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 12px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.auth2-home:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); transform: translateX(-2px); }
.auth2-home svg { width: 16px; height: 16px; flex-shrink: 0; }
.auth2-home:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ── left showcase ── */
.auth2-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* top padding clears the Back to home button, which is pinned to the page's corner —
     without it the logo sits underneath the button */
  padding: 82px 48px 42px;
  color: #fff;
  /* The same blue the body's ambient backdrop is built from (--amb-core / --amb-halo),
     so the two halves of the split read as one page. A magenta hero against the navy
     form side looked like two different sites stitched together. */
  background:
    radial-gradient(circle at 16% 18%, rgba(35, 169, 224, .3), transparent 44%),
    radial-gradient(circle at 86% 84%, rgba(28, 58, 138, .55), transparent 48%),
    linear-gradient(155deg, #070d1c 0%, #0f2350 52%, #17357c 100%);
}
.auth2-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .07) 1px, transparent 0);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(155deg, #000 25%, rgba(0, 0, 0, .25) 75%, transparent 100%);
  mask-image: linear-gradient(155deg, #000 25%, rgba(0, 0, 0, .25) 75%, transparent 100%);
}
.auth2-hero-orb { position: absolute; border-radius: 50%; filter: blur(26px); z-index: 0; pointer-events: none; }
.auth2-hero-orb--1 { top: -80px; right: -50px; width: 320px; height: 320px; background: radial-gradient(circle, rgba(35, 169, 224, .5), transparent 66%); animation: authOrbFloat 9s ease-in-out infinite; }
.auth2-hero-orb--2 { bottom: -100px; left: -60px; width: 320px; height: 320px; background: radial-gradient(circle, rgba(28, 58, 138, .62), transparent 66%); animation: authOrbFloat 12s ease-in-out infinite reverse; }
@keyframes authOrbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(16px, -20px) scale(1.08); }
}
.auth2-hero > *:not(.auth2-hero-orb) { position: relative; z-index: 1; }

.auth2-logo {
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}
.auth2-hero-body { display: flex; flex-direction: column; max-width: 420px; margin-top: auto; margin-bottom: auto; }
.auth2-hero-title {
  margin: 0 0 14px;
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.16;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
}
.auth2-hero-sub { margin: 0 0 26px; max-width: 400px; font-size: 14.5px; line-height: 1.7; color: rgba(255, 255, 255, .72); }

/* proof, in facts rather than a testimonial */
.auth2-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.auth2-fact {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .13);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 13.5px;
  color: rgba(255, 255, 255, .82);
}
.auth2-fact b { color: #fff; font-weight: 800; }
.auth2-fact-ic {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .1);
  /* the halo blue, not the warm accent that suited the magenta hero */
  color: #7cd3f5;
}
.auth2-fact-ic svg { width: 16px; height: 16px; }

/* ── right form ── */
.auth2-main { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; }
.auth2-card { width: 100%; max-width: 400px; }
.auth2-logo--mobile { display: none; margin-bottom: 24px; }
.auth2-head { margin-bottom: 22px; }
.auth2-title-row { display: flex; align-items: center; gap: 11px; margin-bottom: 6px; }
.auth2-title {
  margin: 0 0 5px;
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--au-ink);
}
/* the same blue the hero and the body's backdrop are built from — the brand gradient
   here read as a leftover from the magenta hero once that went blue */
.auth2-title--grad {
  margin: 0;
  background: linear-gradient(96deg, #7cd3f5 0%, #5a82ff 48%, #2f57d8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.auth2-subtitle { margin: 0; font-size: 14px; color: var(--au-dim); line-height: 1.6; }

/* animated lock badge */
.auth2-lock {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(140deg, #2f57d8 0%, #22d3ee 100%);
  animation: lockPop .5s cubic-bezier(.34, 1.56, .64, 1) both;
}
.auth2-lock svg { width: 20px; height: 20px; }
.auth2-lock-shackle { transform-origin: 12px 11px; animation: lockShackle 3s ease-in-out .8s infinite; }
@keyframes lockPop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes lockShackle {
  0%, 70%, 100% { transform: translateY(0); }
  78% { transform: translateY(-2.5px); }
  86% { transform: translateY(0); }
}

/* alerts */
.auth2-alert { margin: 0 0 14px; font-size: 13px; border-radius: 10px; padding: 10px 13px; border: 1px solid transparent; }
.auth2-alert--err { color: #ff9c9c; background: rgba(232, 84, 79, .12); border-color: rgba(232, 84, 79, .3); }
.auth2-alert--ok { color: #6fe4a4; background: rgba(34, 181, 98, .12); border-color: rgba(34, 181, 98, .3); }

/* fields */
.auth2-field { margin-bottom: 15px; }
.auth2-label { display: block; margin-bottom: 7px; font-size: 12.5px; font-weight: 700; color: var(--au-dim); }
.auth2-input-wrap {
  position: relative; display: flex; align-items: center;
  border: 1px solid var(--au-line); border-radius: 12px; background: rgba(0, 0, 0, .3);
  transition: border-color .2s, background .2s;
}
.auth2-input-wrap:focus-within { border-color: var(--accent); background: rgba(0, 0, 0, .42); }
.auth2-ic { display: grid; place-items: center; width: 44px; color: var(--au-faint); flex-shrink: 0; }
.auth2-ic svg { width: 18px; height: 18px; }
.auth2-input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; padding: 13px 12px 13px 0; font-size: 14px; color: var(--au-ink); font-family: inherit; }
.auth2-input::placeholder { color: rgba(232, 238, 251, .3); }
.auth2-input--otp { letter-spacing: 5px; font-weight: 700; }

/* the smart input — one field, detects email vs WhatsApp as you type */
.auth2-smart {
  display: flex; align-items: center; padding: 5px; border-radius: 14px;
  border: 1px solid var(--au-line); background: rgba(0, 0, 0, .3);
  transition: border-color .28s ease, background .28s ease;
}
.auth2-smart-ic { position: relative; width: 46px; height: 46px; flex-shrink: 0; }
.auth2-smart-ic > span { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .28s ease, transform .28s ease; }
.auth2-smart-ic-mail svg { width: 19px; height: 19px; }
.auth2-smart-ic-wa svg { width: 21px; height: 21px; }
.auth2-smart-ic-mail { color: var(--au-faint); opacity: 1; transform: scale(1); }
.auth2-smart-ic-wa { color: #25d366; opacity: 0; transform: scale(.5) rotate(-12deg); }
.auth2-smart.is-email .auth2-smart-ic-mail { color: #7cb0ff; }
.auth2-smart.is-phone .auth2-smart-ic-mail { opacity: 0; transform: scale(.5) rotate(12deg); }
.auth2-smart.is-phone .auth2-smart-ic-wa { opacity: 1; transform: scale(1) rotate(0); }
.auth2-smart-input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; padding: 13px 10px 13px 0; font-size: 14.5px; color: var(--au-ink); font-family: inherit; }
.auth2-smart-input::placeholder { color: rgba(232, 238, 251, .3); }
.auth2-smart.is-email { border-color: rgba(90, 130, 255, .45); }
.auth2-smart.is-phone { border-color: rgba(37, 211, 102, .45); }
.auth2-smart:focus-within { border-color: var(--accent); background: rgba(0, 0, 0, .42); }
.auth2-smart.is-email:focus-within { border-color: #5a82ff; }
.auth2-smart.is-phone:focus-within { border-color: #25d366; }

/* live caption under it */
.auth2-smart-cap { display: flex; align-items: center; gap: 8px; margin: 11px 2px 0; font-size: 12px; color: var(--au-faint); transition: color .28s ease; min-height: 16px; }
.auth2-cap-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .22); flex-shrink: 0; transition: background .28s ease, box-shadow .28s ease; }
.auth2-smart-cap.is-email { color: #a8bcff; font-weight: 600; }
.auth2-smart-cap.is-email .auth2-cap-dot { background: #5a82ff; box-shadow: 0 0 0 3px rgba(90, 130, 255, .2); }
.auth2-smart-cap.is-phone { color: #6fe4a4; font-weight: 600; }
.auth2-smart-cap.is-phone .auth2-cap-dot { background: #25d366; box-shadow: 0 0 0 3px rgba(37, 211, 102, .22); }

/* buttons */
.auth2-btn, .auth2-cont {
  width: 100%; border: none; border-radius: 13px; padding: 15px;
  font-family: inherit; font-size: 14.5px; font-weight: 700; letter-spacing: .02em; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .25s ease, transform .15s ease, filter .2s ease;
}
.auth2-btn { background: #f1f4fc; color: #14161f; margin-top: 6px; }
.auth2-btn:hover:not(:disabled) { background: #fff; transform: translateY(-1px); }
/* idle: both channels hinted at once, blue → green */
.auth2-cont { margin-top: 14px; background: linear-gradient(100deg, #2f57d8 0%, #16b15c 100%); color: #fff; }
.auth2-cont svg { transition: transform .2s ease; }
.auth2-cont:hover:not(:disabled) { transform: translateY(-1px); }
.auth2-cont:hover:not(:disabled) svg { transform: translateX(3px); }
.auth2-cont.is-email { background: #2f57d8; }
.auth2-cont.is-phone { background: #1aae54; }
.auth2-btn:active:not(:disabled), .auth2-cont:active:not(:disabled) { transform: scale(.99); }
.auth2-btn:disabled, .auth2-cont:disabled { filter: grayscale(.5) brightness(.72); cursor: not-allowed; transform: none; }

/* divider */
.auth2-or-line { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--au-faint); font-size: 11.5px; font-weight: 600; text-transform: lowercase; }
.auth2-or-line::before, .auth2-or-line::after { content: ""; flex: 1; height: 1px; background: var(--au-line); }

/* google */
.auth2-google {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid var(--au-line); background: rgba(255, 255, 255, .05); color: var(--au-ink);
  border-radius: 12px; padding: 13px; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: border-color .2s, background .2s, transform .15s;
}
.auth2-google:hover { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1); transform: translateY(-1px); }

.auth2-switch { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--au-dim); }
/* "Resend code" / "Use a different method" — the site's warm accent stood out as the
   one orange thing left once the page went blue */
.auth2-switch a { color: #7cd3f5; font-weight: 600; cursor: pointer; text-decoration: none; }
.auth2-switch a:hover { text-decoration: underline; }
.auth2-switch-sep { margin: 0 8px; color: rgba(255, 255, 255, .2); }
.auth2-legal { margin: 22px 0 0; text-align: center; font-size: 11.5px; color: var(--au-faint); line-height: 1.6; }
.auth2-legal a { color: var(--au-dim); text-decoration: underline; }

/* responsive — hide the showcase, single column */
@media (max-width: 860px) {
  .auth2-grid { grid-template-columns: 1fr; min-height: auto; }
  .auth2-hero { display: none; }
  .auth2-main { padding: 76px 20px 48px; } /* clear the home button */
  .auth2-logo--mobile { display: inline-block; color: var(--au-ink); }
}
@media (prefers-reduced-motion: reduce) {
  .auth2-hero-orb, .auth2-lock, .auth2-lock-shackle { animation: none; }
}

/* =========================================================
   ACCOUNT DASHBOARD
   Two layouts, one component:
     desktop — sticky sidebar + main, both on screen
     phone   — no sidebar; the panel fills the screen and a fixed bottom tab bar
               switches between them, the way an app does
   The tokens live on both wrappers because /orders renders these same .ac-* cards
   inside .orders-wrap, with no .ac-page above them.
   ========================================================= */
.ac-page,
.orders-wrap {
  --acc-ink: #f1f4fc;
  --acc-dim: rgba(232, 238, 251, .66);
  --acc-faint: rgba(232, 238, 251, .42);
  --acc-line: rgba(255, 255, 255, .09);
  --acc-panel: rgba(255, 255, 255, .035);
  /* the opaque card colour — needed wherever a translucent panel would leak, e.g. a
     thumbnail's overlap ring or the tab bar */
  --acc-solid: #14161f;
}
.ac-page {
  font-family: "Manrope", system-ui, sans-serif;
  background: transparent;
  color: var(--acc-ink);
  min-height: 70vh;
  padding: 32px 16px 60px;
}
.ac-shell { max-width: 1060px; margin: 0 auto; display: grid; grid-template-columns: 268px 1fr; gap: 22px; align-items: start; }

/* ── sidebar ── */
.ac-side {
  position: sticky;
  top: calc(var(--nav-h) + 16px);
  background: var(--acc-panel);
  border: 1px solid var(--acc-line);
  border-radius: 18px;
  padding: 20px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.ac-profile { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 14px; border-bottom: 1px solid var(--acc-line); }
.ac-avatar {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(140deg, #ee3d46, #8a2b8f); color: #fff;
  display: grid; place-items: center; font-size: 16px; font-weight: 800; overflow: hidden;
}
.ac-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ac-profile-info { min-width: 0; }
.ac-profile-name { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--acc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-profile-contact { margin: 2px 0 0; font-size: 12px; color: var(--acc-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-nav { display: flex; flex-direction: column; gap: 3px; }
.ac-nav-btn {
  display: flex; align-items: center; gap: 11px; width: 100%;
  border: none; background: transparent; text-align: left; padding: 11px 12px; border-radius: 11px;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--acc-dim);
  cursor: pointer; text-decoration: none; transition: background .16s, color .16s;
}
.ac-nav-btn svg { color: rgba(255, 255, 255, .3); transition: color .16s; flex-shrink: 0; }
.ac-nav-btn:hover { background: rgba(255, 255, 255, .06); color: var(--acc-ink); }
.ac-nav-btn.is-active { background: rgba(255, 255, 255, .1); color: var(--acc-ink); }
.ac-nav-btn.is-active svg { color: #ff8a5c; }
.ac-nav-count { margin-left: auto; font-size: 11px; font-weight: 800; background: rgba(255, 255, 255, .1); color: var(--acc-dim); border-radius: 99px; padding: 1px 8px; }
.ac-nav-logout { margin-top: 6px; border-top: 1px solid var(--acc-line); padding-top: 14px; color: #ff9c9c; }
.ac-nav-logout svg { color: rgba(255, 156, 156, .6); }
.ac-nav-logout:hover { background: rgba(232, 84, 79, .12); color: #ffb3b3; }

/* ── main ── */
.ac-main { min-width: 0; }
.ac-welcome { margin-bottom: 20px; }
.ac-welcome-title {
  margin: 0 0 6px;
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--acc-ink);
}
.ac-welcome-sub { margin: 0; font-size: 14px; color: var(--acc-dim); }
.ac-page-title {
  margin: 0 0 18px;
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--acc-ink);
}

/* stat cards */
.ac-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.ac-stat {
  background: var(--acc-panel); border: 1px solid var(--acc-line); border-radius: 15px;
  padding: 18px 16px; text-align: left; display: flex; flex-direction: column; gap: 4px;
  font-family: inherit; cursor: default; transition: transform .18s, background .18s, border-color .18s;
}
button.ac-stat { cursor: pointer; }
button.ac-stat:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); }
.ac-stat-num { font-family: "Russo One", sans-serif; font-weight: 400; font-size: 21px; letter-spacing: .02em; color: var(--acc-ink); }
.ac-stat-label { font-size: 12px; color: var(--acc-faint); }

/* cards */
.ac-card {
  background: var(--acc-panel); border: 1px solid var(--acc-line); border-radius: 18px;
  padding: 22px; margin-bottom: 18px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.ac-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ac-card-title {
  margin: 0;
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--acc-ink);
}
.ac-link { border: none; background: none; font-family: inherit; font-size: 13px; font-weight: 700; color: #ff8a5c; cursor: pointer; padding: 0; text-decoration: none; }
.ac-link:hover { text-decoration: underline; }

/* empty */
.ac-empty { text-align: center; padding: 26px 10px; color: var(--acc-faint); font-size: 14px; }
.ac-empty p { margin: 0 0 12px; }
.ac-empty-hint { font-size: 12.5px; }
.ac-btn-dark {
  display: inline-block; background: #f1f4fc; color: #14161f; border-radius: 11px;
  padding: 11px 22px; font-size: 13.5px; font-weight: 700; text-decoration: none;
  transition: background .2s, transform .15s;
}
.ac-btn-dark:hover { background: #fff; transform: translateY(-1px); }

/* recent orders */
.ac-recent { display: flex; flex-direction: column; gap: 6px; }
.ac-recent-row { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 12px; text-decoration: none; transition: background .16s; }
.ac-recent-row:hover { background: rgba(255, 255, 255, .06); }
.ac-recent-thumbs { display: flex; flex-shrink: 0; }
/* the ring reads as a gap between stacked thumbs — it has to be the card's own colour */
.ac-recent-thumbs .ac-thumb { margin-left: -10px; border: 2px solid var(--acc-solid); }
.ac-recent-thumbs .ac-thumb:first-child { margin-left: 0; }
.ac-thumb {
  width: 42px; height: 42px; border-radius: 10px;
  background: rgba(255, 255, 255, .07); color: var(--acc-faint);
  display: grid; place-items: center; overflow: hidden; flex-shrink: 0;
}
.ac-thumb img { width: 100%; height: 100%; object-fit: contain; }
.ac-thumb svg { width: 17px; height: 17px; }
.ac-thumb--lg { width: 52px; height: 52px; }
.ac-recent-main { flex: 1; min-width: 0; }
.ac-recent-no { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--acc-ink); }
.ac-recent-meta { margin: 2px 0 0; font-size: 12px; color: var(--acc-faint); }
.ac-recent-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.ac-recent-total { font-size: 14px; font-weight: 700; color: var(--acc-ink); }

/* status badges */
.ac-badge { font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 99px; text-transform: capitalize; letter-spacing: .04em; white-space: nowrap; border: 1px solid transparent; }
.ac-badge-pending, .ac-badge-confirmed { background: rgba(90, 130, 255, .16); border-color: rgba(90, 130, 255, .34); color: #a8bcff; }
.ac-badge-packed { background: rgba(255, 168, 40, .14); border-color: rgba(255, 168, 40, .32); color: #ffc773; }
.ac-badge-dispatched { background: rgba(35, 169, 224, .14); border-color: rgba(35, 169, 224, .32); color: #7cd3f5; }
.ac-badge-delivered { background: rgba(34, 181, 98, .14); border-color: rgba(34, 181, 98, .32); color: #6fe4a4; }
.ac-badge-cancelled, .ac-badge-returned { background: rgba(232, 84, 79, .14); border-color: rgba(232, 84, 79, .32); color: #ff9c9c; }

/* full orders */
.ac-orders { display: flex; flex-direction: column; gap: 16px; }
.ac-order { background: var(--acc-panel); border: 1px solid var(--acc-line); border-radius: 16px; overflow: hidden; }
.ac-order-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--acc-line); background: rgba(255, 255, 255, .03); }
.ac-order-no { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--acc-ink); }
.ac-order-date { margin: 2px 0 0; font-size: 12px; color: var(--acc-faint); }
.ac-order-items { padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.ac-order-item { display: flex; align-items: center; gap: 13px; }
.ac-order-item-main { flex: 1; min-width: 0; }
.ac-order-item-name { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--acc-ink); }
.ac-order-item-sub { margin: 2px 0 0; font-size: 12px; color: var(--acc-faint); }
.ac-order-item-price { font-size: 13.5px; font-weight: 700; color: var(--acc-ink); }
.ac-order-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--acc-line); background: rgba(255, 255, 255, .03); flex-wrap: wrap; }
.ac-order-pay { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ac-order-pay-method { font-size: 12.5px; font-weight: 600; color: var(--acc-dim); }
.ac-order-coupon { font-size: 11.5px; font-weight: 600; color: #6fe4a4; background: rgba(34, 181, 98, .14); border: 1px solid rgba(34, 181, 98, .3); border-radius: 7px; padding: 2px 8px; }
.ac-order-foot-right { display: flex; align-items: center; gap: 14px; }
.ac-order-total { font-size: 15px; font-weight: 800; color: var(--acc-ink); }
.ac-order-total i { font-style: normal; font-size: 12px; font-weight: 400; color: var(--acc-faint); margin-right: 3px; }
.ac-btn-outline {
  border: 1px solid var(--acc-line); background: rgba(255, 255, 255, .05); color: var(--acc-ink);
  border-radius: 10px; padding: 9px 16px; font-family: inherit; font-size: 13px; font-weight: 600;
  text-decoration: none; cursor: pointer; transition: border-color .2s, background .2s;
}
.ac-btn-outline:hover { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1); }

/* addresses */
.ac-addr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.ac-addr-card { position: relative; background: var(--acc-panel); border: 1px solid var(--acc-line); border-radius: 15px; padding: 18px; }
.ac-addr-card.is-default { border-color: rgba(90, 130, 255, .4); }
.ac-addr-default { position: absolute; top: 14px; right: 14px; font-size: 10px; font-weight: 800; color: #a8bcff; background: rgba(90, 130, 255, .16); border: 1px solid rgba(90, 130, 255, .34); border-radius: 99px; padding: 3px 9px; }
.ac-addr-name { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--acc-ink); }
.ac-addr-phone { font-weight: 400; color: var(--acc-faint); font-size: 12.5px; }
.ac-addr-text { margin: 0 0 4px; font-size: 13px; color: var(--acc-dim); line-height: 1.55; }
.ac-addr-country { margin: 0; font-size: 12px; color: var(--acc-faint); }
.ac-note { margin: 16px 0 0; font-size: 12.5px; color: var(--acc-faint); }

/* profile */
.ac-profile-big { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--acc-line); }
.ac-avatar--lg { width: 64px; height: 64px; font-size: 22px; }
.ac-profile-name--lg { font-size: 18px; }
.ac-detail-list { display: flex; flex-direction: column; }
.ac-detail { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--acc-line); font-size: 14px; }
.ac-detail:last-child { border-bottom: none; }
.ac-detail-k { color: var(--acc-faint); }
.ac-detail-v { font-weight: 600; color: var(--acc-ink); }
.ac-detail-v em { font-style: normal; font-weight: 400; color: var(--acc-faint); }
.ac-logout-wide { width: 100%; margin-top: 18px; text-align: center; color: #ff9c9c; border-color: rgba(232, 84, 79, .3); }
.ac-logout-wide:hover { border-color: rgba(232, 84, 79, .6); background: rgba(232, 84, 79, .12); }

/* wishlist quick link — the bottom bar holds five tabs and Wishlist isn't one of them,
   so on a phone this card is the only way in. Shown on every width for consistency. */
.ac-quick { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 18px; }
.ac-quick-btn {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px;
  background: var(--acc-panel); border: 1px solid var(--acc-line); color: var(--acc-ink);
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: background .16s, border-color .16s;
}
.ac-quick-btn:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); }
.ac-quick-ic {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(236, 28, 140, .14); border: 1px solid rgba(236, 28, 140, .3); color: #ff7ec0;
}
.ac-quick-ic svg { width: 18px; height: 18px; }
.ac-quick-arrow { margin-left: auto; color: rgba(255, 255, 255, .28); flex-shrink: 0; }

/* ── mobile bottom tab bar ── */
/* Hidden by default so it can never appear on desktop, where the sidebar is the nav. */
.ac-tabbar { display: none; }

@media (max-width: 820px) {
  .ac-shell { grid-template-columns: 1fr; }
  /* the sidebar IS the desktop nav; on a phone the bottom bar replaces it entirely */
  .ac-side { display: none; }
  .ac-stats { grid-template-columns: 1fr 1fr; }
  /* clear the fixed bar, plus the home indicator on a gesture-bar phone */
  .ac-page { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }

  .ac-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* opaque, not glass: the page scrolls underneath and a translucent bar would show
       every card sliding through it */
    background: #0c0d13;
    border-top: 1px solid var(--acc-line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .ac-tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 58px;
    padding: 8px 2px;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--acc-faint);
    cursor: pointer;
    transition: color .16s;
  }
  .ac-tab svg { width: 20px; height: 20px; }
  .ac-tab.is-active { color: #ff8a5c; }
  /* the lit rail sits on the bar's own top edge, so the active tab reads at a glance */
  .ac-tab.is-active::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 22%;
    right: 22%;
    height: 2px;
    border-radius: 0 0 3px 3px;
    background: #ff8a5c;
  }
  .ac-tab-count {
    position: absolute;
    top: 4px;
    left: 50%;
    margin-left: 6px;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    border-radius: 99px;
    background: var(--accent);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    line-height: 15px;
    text-align: center;
  }
}

/* =========================================================
   PROFILE EDITOR
   Renders inside the account's Profile panel, so it inherits --acc-* from .ac-page.
   ========================================================= */
.pe-wrap { display: flex; flex-direction: column; gap: 18px; }
.pe-field { display: flex; flex-direction: column; gap: 7px; }
.pe-label { font-size: 12.5px; font-weight: 700; color: var(--acc-faint); }
.pe-row { display: flex; align-items: center; gap: 10px; }
.pe-row--view { justify-content: space-between; }
.pe-input {
  flex: 1; min-width: 0; border: 1px solid var(--acc-line); border-radius: 11px;
  background: rgba(0, 0, 0, .28); padding: 11px 13px; font-size: 14px; color: var(--acc-ink);
  outline: none; font-family: inherit; transition: border-color .2s, background .2s;
}
.pe-input::placeholder { color: rgba(232, 238, 251, .3); }
.pe-input:focus { border-color: var(--accent); background: rgba(0, 0, 0, .4); }
.pe-input--otp { letter-spacing: 4px; font-weight: 700; }
.pe-save {
  flex-shrink: 0; border: none; background: #f1f4fc; color: #14161f; border-radius: 10px;
  padding: 11px 18px; font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  transition: background .2s, filter .2s;
}
.pe-save:hover:not(:disabled) { background: #fff; }
.pe-save:disabled { filter: grayscale(.5) brightness(.7); cursor: not-allowed; }

.pe-current { font-size: 14px; font-weight: 600; color: var(--acc-ink); display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap; overflow-wrap: anywhere; }
.pe-none { font-style: normal; font-weight: 400; color: var(--acc-faint); }
.pe-verified { font-size: 10.5px; font-weight: 800; color: #6fe4a4; background: rgba(34, 181, 98, .14); border: 1px solid rgba(34, 181, 98, .3); border-radius: 99px; padding: 2px 8px; }
.pe-change {
  flex-shrink: 0; border: 1px solid var(--acc-line); background: rgba(255, 255, 255, .05);
  color: var(--acc-ink); border-radius: 9px; padding: 7px 15px;
  font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.pe-change:hover { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1); }
.pe-cancel { align-self: flex-start; border: none; background: none; color: var(--acc-faint); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 0; }
.pe-cancel:hover { color: var(--acc-ink); text-decoration: underline; }

.pe-otp-actions { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255, 255, 255, .24); }
.pe-link { border: none; background: none; color: #ff8a5c; font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 0; }
.pe-link:hover { text-decoration: underline; }

.pe-msg { margin: 2px 0 0; font-size: 12.5px; }
.pe-ok { color: #6fe4a4; }
.pe-err { color: #ff9c9c; }

/* consistent view rows + edit icon */
.pe-view {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 42px; padding: 9px 14px; border-radius: 11px;
  border: 1px solid var(--acc-line); background: rgba(0, 0, 0, .2);
}
.pe-edit-ic {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px;
  border: 1px solid var(--acc-line); background: rgba(255, 255, 255, .05); color: var(--acc-faint);
  display: grid; place-items: center; cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.pe-edit-ic:hover { border-color: rgba(255, 255, 255, .3); color: var(--acc-ink); background: rgba(255, 255, 255, .1); }
.pe-edit-ic svg { width: 15px; height: 15px; }

/* =========================================================
   ADDRESS MANAGER + orders head
   ========================================================= */
.ac-orders-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.ac-orders-head .ac-page-title { margin: 0; }
.ac-continue { display: inline-flex; align-items: center; gap: 8px; }
.ac-continue svg { flex-shrink: 0; }

.am-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.am-actions { display: flex; gap: 8px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--acc-line); }
.am-act {
  border: 1px solid var(--acc-line); background: rgba(255, 255, 255, .05); color: var(--acc-ink);
  border-radius: 9px; padding: 7px 13px; font-family: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: border-color .2s, background .2s;
}
.am-act:hover:not(:disabled) { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1); }
.am-act:disabled { opacity: .5; cursor: not-allowed; }
.am-act--del { color: #ff9c9c; border-color: rgba(232, 84, 79, .3); }
.am-act--del:hover:not(:disabled) { border-color: rgba(232, 84, 79, .6); background: rgba(232, 84, 79, .12); }

/* add card */
.am-add-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  min-height: 140px; border: 1.6px dashed rgba(255, 255, 255, .16); border-radius: 15px;
  background: rgba(255, 255, 255, .02); color: var(--acc-dim);
  font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.am-add-card svg { color: rgba(255, 255, 255, .28); transition: color .2s; }
.am-add-card:hover { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .06); color: var(--acc-ink); }
.am-add-card:hover svg { color: var(--acc-ink); }

/* form */
.am-form { margin-top: 16px; background: var(--acc-panel); border: 1px solid var(--acc-line); border-radius: 16px; padding: 20px; }
.am-form-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.am-form-head h3 {
  margin: 0;
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--acc-ink);
}
.am-close {
  border: 1px solid var(--acc-line); background: rgba(255, 255, 255, .06); color: var(--acc-dim);
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-family: inherit; font-size: 14px;
  transition: background .2s, color .2s;
}
.am-close:hover { background: rgba(255, 255, 255, .12); color: var(--acc-ink); }
.am-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.am-input {
  border: 1px solid var(--acc-line); border-radius: 11px; background: rgba(0, 0, 0, .28);
  padding: 12px 13px; font-size: 14px; color: var(--acc-ink); outline: none; font-family: inherit;
  transition: border-color .2s, background .2s; width: 100%;
}
.am-input::placeholder { color: rgba(232, 238, 251, .3); }
.am-input:focus { border-color: var(--accent); background: rgba(0, 0, 0, .4); }
.am-span2 { grid-column: 1 / -1; }
.am-pin { margin: 10px 0 0; font-size: 12.5px; font-weight: 600; color: #6fe4a4; }
.am-err { margin: 10px 0 0; font-size: 13px; color: #ff9c9c; background: rgba(232, 84, 79, .12); border: 1px solid rgba(232, 84, 79, .3); border-radius: 9px; padding: 9px 12px; }
.am-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.am-btn-ghost {
  border: 1px solid var(--acc-line); background: rgba(255, 255, 255, .05); color: var(--acc-ink);
  border-radius: 11px; padding: 11px 20px; font-family: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: border-color .2s, background .2s;
}
.am-btn-ghost:hover { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1); }
.am-btn-dark {
  border: none; background: #f1f4fc; color: #14161f; border-radius: 11px; padding: 11px 22px;
  font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  transition: background .2s, transform .15s, filter .2s;
}
.am-btn-dark:hover:not(:disabled) { background: #fff; transform: translateY(-1px); }
.am-btn-dark:disabled { filter: grayscale(.5) brightness(.7); cursor: not-allowed; }

@media (max-width: 480px) {
  .am-form-grid { grid-template-columns: 1fr; }
  .am-span2 { grid-column: auto; }
}

/* =========================================================
   PROFILE CARD — banner
   ========================================================= */
/* relative, so the avatar below can hang across the banner's bottom edge without
   living inside the banner and being clipped by it */
.ac-profile-card { position: relative; padding: 0; overflow: hidden; }

.ac-profile-banner {
  position: relative;
  height: 96px;
  overflow: hidden;
  background:
    radial-gradient(420px 160px at 20% 0%, rgba(236, 28, 140, .3), transparent 66%),
    linear-gradient(135deg, #1a1420 0%, #241a2c 55%, #2c1a24 100%);
}
.ac-profile-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .07) 1px, transparent 0);
  background-size: 20px 20px;
}
.ac-profile-banner-glow { position: absolute; top: -60px; right: -30px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 106, 43, .4), transparent 65%); filter: blur(8px); }

/* Positioned against the CARD, not the banner. `top`, not `bottom:-34px` — anchored to
   the banner's bottom edge it was clipped away by that element's overflow:hidden.
   96px banner − 78px avatar + 34px overhang = 52px from the top of the card.
   The ring reads as the gap around the avatar, so it has to be the card's own colour. */
.ac-profile-card > .ac-avatar--xl {
  position: absolute;
  top: 52px;
  left: 28px;
  z-index: 2;
  width: 78px;
  height: 78px;
  font-size: 26px;
  border: 4px solid var(--acc-solid);
}

.ac-profile-body { padding: 46px 28px 26px; }
.ac-profile-bigname {
  margin: 0 0 12px;
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-size: 19px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--acc-ink);
}
.ac-profile-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.ac-pchip {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600;
  color: var(--acc-dim); background: rgba(255, 255, 255, .05); border: 1px solid var(--acc-line);
  border-radius: 99px; padding: 6px 13px; overflow-wrap: anywhere;
}
.ac-pchip svg { color: var(--acc-faint); flex-shrink: 0; }
.ac-pchip--muted { color: var(--acc-faint); background: transparent; border-color: transparent; padding-left: 4px; }

.ac-profile-edit { background: rgba(0, 0, 0, .2); border: 1px solid var(--acc-line); border-radius: 15px; padding: 20px; }
.ac-profile-edit-title { margin: 0 0 16px; font-size: 12px; font-weight: 800; color: var(--acc-faint); text-transform: uppercase; letter-spacing: .12em; }
.ac-logout-wide { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

@media (max-width: 480px) {
  .ac-profile-body { padding: 46px 18px 22px; }
  .ac-profile-card > .ac-avatar--xl { left: 18px; }
}


@keyframes lockPop{ 0%{ transform:scale(0) rotate(-25deg); opacity:0; } 100%{ transform:scale(1) rotate(0); opacity:1; } }
@keyframes lockGlow{
  0%,100%{ box-shadow:0 6px 16px rgba(47,87,216,.35); }
  50%{ box-shadow:0 6px 22px rgba(34,211,238,.6), 0 0 0 4px rgba(34,211,238,.14); }
}
/* shackle gives a subtle "click to unlock" wiggle */
@keyframes lockShackle{
  0%,86%,100%{ transform:translateY(0); }
  90%{ transform:translateY(-2px); }
  94%{ transform:translateY(0); }
}

/* colorful gradient heading */

/* =========================================================
   MY ORDERS — standalone page (v=65)  reuses .ac-order/.ac-badge
   ========================================================= */
.orders-wrap {
  font-family: "Manrope", system-ui, sans-serif;
  background: transparent;
  color: var(--acc-ink);
  min-height: 70vh;
  padding: 34px 16px 60px;
}
.orders-inner { max-width: 760px; margin: 0 auto; }
.orders-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.orders-eyebrow { margin: 0 0 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ab-magenta, #ec1c8c); }
.orders-title {
  margin: 0;
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-size: 25px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--acc-ink);
}
.orders-sub { margin: 6px 0 0; font-size: 13.5px; color: var(--acc-faint); }
.orders-empty {
  text-align: center; padding: 54px 24px; border-radius: 18px;
  background: var(--acc-panel); border: 1px solid var(--acc-line);
}
.orders-empty-ic { color: var(--acc-faint); margin-bottom: 12px; display: grid; place-items: center; }
.orders-empty-ic svg { width: 40px; height: 40px; }
.orders-empty-title { margin: 0 0 6px; font-size: 19px; font-weight: 700; color: var(--acc-ink); }
.orders-empty-sub { margin: 0 0 18px; font-size: 14px; color: var(--acc-faint); }

/* =========================================================
   MY ORDERS — Pay Again / Invoice / payment pills
   ========================================================= */
.ac-pay-pill { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 99px; border: 1px solid transparent; }
.ac-pay-pill.pay-cod { background: rgba(90, 130, 255, .16); border-color: rgba(90, 130, 255, .34); color: #a8bcff; }
.ac-pay-pill.pay-paid { background: rgba(34, 181, 98, .14); border-color: rgba(34, 181, 98, .32); color: #6fe4a4; }
.ac-pay-pill.pay-pending { background: rgba(255, 168, 40, .14); border-color: rgba(255, 168, 40, .32); color: #ffc773; }
.ac-pay-pill.pay-failed { background: rgba(232, 84, 79, .14); border-color: rgba(232, 84, 79, .32); color: #ff9c9c; }

.ac-btn-pay {
  display: inline-flex; align-items: center; gap: 6px; border: none;
  background: var(--accent); color: #fff; border-radius: 10px; padding: 9px 16px;
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: filter .2s, transform .15s;
}
.ac-btn-pay:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); }
.ac-btn-pay:disabled { filter: grayscale(.5) brightness(.7); cursor: not-allowed; }

.ac-btn-invoice {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 10px; padding: 8px 14px;
  border: 1px solid rgba(34, 181, 98, .32); background: rgba(34, 181, 98, .12); color: #6fe4a4;
  font-size: 13px; font-weight: 700; text-decoration: none;
  transition: border-color .2s, background .2s, transform .15s;
}
.ac-btn-invoice:hover { border-color: rgba(34, 181, 98, .6); background: rgba(34, 181, 98, .2); transform: translateY(-1px); }
.ac-btn-invoice svg { flex-shrink: 0; }

.ac-order-err { font-size: 11.5px; color: #ff9c9c; width: 100%; text-align: right; }

/* =========================================================
   MY ORDERS — collapsible order cards
   ========================================================= */
.ac-order--collapsible { overflow: hidden; }
.ac-order-bar {
  width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: transparent; border: none; cursor: pointer; text-align: left;
  font-family: inherit; transition: background .15s;
}
.ac-order-bar:hover { background: rgba(255, 255, 255, .04); }
.ac-order--collapsible.is-open .ac-order-bar { border-bottom: 1px solid var(--acc-line); background: rgba(255, 255, 255, .03); }
.ac-order-thumbs { display: flex; flex-shrink: 0; }
/* the overlap ring has to match the card it sits on, not the white it used to */
.ac-order-thumbs .ac-thumb { width: 40px; height: 40px; margin-left: -12px; border: 2px solid #14161f; }
.ac-order-thumbs .ac-thumb:first-child { margin-left: 0; }
.ac-order-bar-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ac-order-bar-main .ac-order-no { margin: 0; font-size: 14px; font-weight: 700; color: var(--acc-ink); }
.ac-order-bar-main .ac-order-date { margin: 0; font-size: 12px; color: var(--acc-faint); }
.ac-order-bar-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.ac-order-bar-total { font-size: 14.5px; font-weight: 800; color: var(--acc-ink); white-space: nowrap; }
.ac-order-chevron { color: rgba(255, 255, 255, .28); transform: rotate(0deg); transition: transform .25s ease, color .2s; }
.ac-order-bar:hover .ac-order-chevron { color: var(--acc-ink); }
.ac-order--collapsible.is-open .ac-order-chevron { transform: rotate(90deg); color: var(--acc-ink); }
.ac-order-body { animation: acReveal .22s ease; }
.ac-order--collapsible .ac-order-items { padding: 16px 18px; }
.ac-order--collapsible .ac-order-foot { border-top: 1px solid var(--acc-line); }
@keyframes acReveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 560px) { .ac-order-bar-right { gap: 8px; } .ac-order-bar-total { font-size: 13.5px; } }
@media (prefers-reduced-motion: reduce) { .ac-order-body { animation: none; } }

/* =========================================================
   PRODUCT DETAIL
   One block. This was four (v=68, 70, 71, 72), each patching the last — .pd-pin was
   declared twice with different backgrounds, .pd-thumbs's scrollbar three times.
   Same material as the rest of the site: no background of its own, glass panels on the
   body's ambient backdrop, Russo One for display.
   ========================================================= */
.pd-wrap {
  --pd-ink: #f1f4fc;
  --pd-dim: rgba(232, 238, 251, .66);
  --pd-faint: rgba(232, 238, 251, .42);
  --pd-line: rgba(255, 255, 255, .09);
  --pd-panel: rgba(255, 255, 255, .035);
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px 20px 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  font-family: "Manrope", system-ui, sans-serif;
  color: var(--pd-ink);
}

/* ── gallery ── */
.pd-gallery { position: sticky; top: calc(var(--nav-h) + 16px); display: flex; gap: 14px; min-width: 0; }
.pd-thumbs-col { display: flex; flex-direction: column; gap: 8px; width: 70px; flex-shrink: 0; }
.pd-thumbs {
  display: flex; flex-direction: column; gap: 10px; width: 70px; flex-shrink: 0;
  max-height: 430px; overflow-y: auto; padding-right: 2px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.pd-thumbs::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none; }
/* The product shots are cut out on white, so every well that holds one stays light —
   a dark well would silhouette the toy against its own background. */
.pd-thumb {
  width: 70px; height: 70px; padding: 0; border-radius: 12px; cursor: pointer; overflow: hidden;
  background: var(--pd-panel); border: 1.5px solid rgba(255, 255, 255, .12);
  transition: border-color .18s, transform .18s;
  flex-shrink: 0;
}
/* cover, not contain — these shots fill their own frame, so letterboxing them inside
   a 70px tile just made the toy tiny */
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumb video { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.pd-thumb:hover { border-color: rgba(255, 255, 255, .3); }
.pd-thumb.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(232, 80, 42, .3); }
/* the video thumb only ever renders when the product really has one — see ProductDetail */
.pd-thumb--video { position: relative; background: #0d0f16; }
.pd-thumb--video::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0; height: 0;
  border-left: 11px solid rgba(255, 255, 255, .95);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6));
}
.pd-thumb-nav {
  flex-shrink: 0; width: 70px; height: 30px; border-radius: 10px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--pd-line); color: var(--pd-faint);
  display: grid; place-items: center; cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
}
.pd-thumb-nav:hover { border-color: rgba(255, 255, 255, .3); color: var(--pd-ink); background: rgba(255, 255, 255, .1); }
.pd-thumb-nav:active { transform: scale(.96); }
.pd-thumb-nav svg { width: 16px; height: 16px; }

.pd-stage {
  flex: 1; min-width: 0; position: relative;
  /* No light well. These shots are full-bleed marketing images with their own
     backgrounds, not cut-outs on white — the pale frame was padding around a picture
     that already had one. */
  background: var(--pd-panel); border: 1px solid var(--pd-line); border-radius: 20px;
  padding: 8px; min-height: 420px;
  display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; overflow: hidden;
}
/* its own radius — at 8px inset the image sits inside the stage's 20px corners, so
   without this its square corners show against the rounded panel */
.pd-stage-img { width: 100%; max-height: 480px; object-fit: contain; border-radius: 13px; cursor: zoom-in; transition: transform .35s ease; }
.pd-stage:hover .pd-stage-img { transform: scale(1.04); }
.pd-stage-video { width: 100%; max-height: 480px; object-fit: contain; border-radius: 12px; background: #0d0f16; }
/* A YouTube embed has no intrinsic size — without an aspect-ratio it collapses to the
   iframe default (300×150). Landscape gets 16:9; a Short gets 9:16 and is sized off its
   HEIGHT, because a 9:16 box at full stage width would be taller than the screen. In a
   16:9 box a reel is pillarboxed down to a sliver — which is exactly what it did. */
.pd-stage-yt {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 480px;
  border: 0;
  border-radius: 12px;
  background: #0d0f16;
  display: block;
}
.pd-stage-yt.is-vertical {
  aspect-ratio: 9 / 16;
  width: auto;
  height: min(70vh, 560px);
  max-height: none;
  max-width: 100%;
  margin-inline: auto;
}
.pd-lb-yt {
  width: min(90vw, 1100px);
  aspect-ratio: 16 / 9;
  max-height: 80vh;
  border: 0;
  border-radius: 12px;
  background: #000;
}
.pd-lb-yt.is-vertical {
  aspect-ratio: 9 / 16;
  width: auto;
  height: 85vh;
  max-height: none;
  max-width: 92vw;
}
.pd-off-tag {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 800;
  padding: 5px 11px; border-radius: 8px;
}
.pd-wish-float {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, .92); border: 1px solid rgba(0, 0, 0, .06); color: #9aa0aa;
  display: grid; place-items: center; cursor: pointer;
  transition: color .2s, transform .2s, border-color .2s;
}
.pd-wish-float:hover { color: var(--accent); transform: scale(1.08); }
.pd-wish-float.is-on { color: var(--accent); border-color: rgba(232, 80, 42, .4); }
.pd-zoom-hint {
  position: absolute; bottom: 14px; right: 14px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; color: #6b7280;
  background: rgba(255, 255, 255, .85); border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 99px; padding: 4px 10px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}

/* ── info ── */
.pd-info { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pd-head { display: flex; flex-direction: column; gap: 8px; }
.pd-brand { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #ff8a5c; }
.pd-title {
  margin: 0;
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--pd-ink);
}
.pd-rating { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--pd-dim); text-decoration: none; width: max-content; }
.pd-stars { color: #ffc93c; font-size: 14px; letter-spacing: 1px; }
.pd-rating b { color: var(--pd-ink); font-weight: 700; }
.pd-rating-sep { color: rgba(255, 255, 255, .2); }
.pd-rating:hover span:last-child { text-decoration: underline; }

/* price */
.pd-price { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pd-price-now { font-family: "Russo One", sans-serif; font-weight: 400; font-size: 29px; letter-spacing: .01em; color: var(--pd-ink); }
.pd-price-mrp { font-size: 17px; color: var(--pd-faint); text-decoration: line-through; }
/* colour/background come from the toy-theme block further down (yellow, tilted) —
   this only sets what that rule leaves alone */
.pd-price-off { font-size: 13px; font-weight: 800; }
.pd-save { font-size: 13px; font-weight: 700; color: #6fe4a4; }
.pd-tax { margin: -8px 0 0; font-size: 12.5px; color: var(--pd-faint); }

/* variants */
.pd-variants { display: flex; flex-direction: column; gap: 9px; }
.pd-variants-label { margin: 0; font-size: 13.5px; color: var(--pd-dim); }
.pd-variants-label b { color: var(--pd-ink); font-weight: 700; }
.pd-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.pd-swatch {
  width: 42px; height: 42px; border-radius: 50%; padding: 3px; cursor: pointer;
  background: rgba(255, 255, 255, .06); border: 2px solid var(--pd-line);
  display: grid; place-items: center; transition: border-color .18s, transform .18s;
}
.pd-swatch-dot { width: 100%; height: 100%; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .18); }
.pd-swatch:hover { transform: scale(1.06); }
.pd-swatch.is-active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232, 80, 42, .28); }
.pd-swatch.is-out { opacity: .45; }

/* offers */
.pd-offers { background: var(--pd-panel); border: 1px solid var(--pd-line); border-radius: 14px; padding: 15px 16px; }
.pd-offers-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13.5px; font-weight: 700; color: var(--pd-ink); }
.pd-offers-title svg { color: #ff8a5c; }
.pd-offers-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pd-offers-list li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--pd-dim); }
.pd-offers-list li span { flex-shrink: 0; }
.pd-offer-ic { display: grid; place-items: center; width: 20px; height: 20px; color: #ff8a5c; }
.pd-offer-ic svg { width: 16px; height: 16px; }

/* pincode / delivery */
.pd-pin {
  background: linear-gradient(135deg, rgba(232, 80, 42, .1) 0%, rgba(255, 255, 255, .03) 55%);
  border: 1px solid rgba(232, 80, 42, .22);
  border-radius: 16px;
  padding: 16px 17px;
}
.pd-pin-head { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; }
.pd-pin-ic {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(232, 80, 42, .3); color: #ff8a5c;
  display: grid; place-items: center;
}
.pd-pin-title { display: block; margin: 0; font-size: 14px; font-weight: 700; color: var(--pd-ink); }
.pd-pin-sub { margin: 2px 0 0; font-size: 12px; color: var(--pd-faint); }
.pd-pin-row { display: flex; gap: 9px; }
.pd-pin-field {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  background: rgba(0, 0, 0, .3); border: 1px solid var(--pd-line); border-radius: 11px; padding: 0 13px;
  transition: border-color .2s, background .2s;
}
.pd-pin-field:focus-within { border-color: var(--accent); background: rgba(0, 0, 0, .42); }
.pd-pin-field svg { color: var(--pd-faint); flex-shrink: 0; }
.pd-pin-field input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; padding: 12px 0; font-size: 14px; font-family: inherit; letter-spacing: 1px; color: var(--pd-ink); }
.pd-pin-field input::placeholder { letter-spacing: 0; color: rgba(232, 238, 251, .3); }
.pd-pin-btn {
  flex-shrink: 0; border: none; background: #f1f4fc; color: #14161f; border-radius: 11px;
  padding: 0 22px; font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  transition: background .2s, transform .15s;
}
.pd-pin-btn:hover { background: #fff; transform: translateY(-1px); }
.pd-pin-result { display: flex; align-items: center; gap: 8px; margin-top: 11px; font-size: 12.5px; font-weight: 600; padding: 10px 13px; border-radius: 10px; line-height: 1.4; border: 1px solid transparent; }
.pd-pin-result svg { flex-shrink: 0; }
.pd-pin-result.ok { color: #6fe4a4; background: rgba(34, 181, 98, .12); border-color: rgba(34, 181, 98, .3); }
.pd-pin-result.err { color: #ff9c9c; background: rgba(232, 84, 79, .12); border-color: rgba(232, 84, 79, .3); }

/* qty + stock */
.pd-buy { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pd-qty { display: inline-flex; align-items: center; border: 1px solid var(--pd-line); border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, .04); }
.pd-qty button { width: 42px; height: 44px; border: none; background: transparent; color: var(--pd-ink); font-size: 19px; cursor: pointer; transition: background .15s; }
.pd-qty button:hover { background: rgba(255, 255, 255, .09); }
.pd-qty span { min-width: 42px; text-align: center; font-size: 15px; font-weight: 700; }
.pd-stock { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: #6fe4a4; }
.pd-stock-dot { width: 8px; height: 8px; border-radius: 50%; background: #22b562; box-shadow: 0 0 0 3px rgba(34, 181, 98, .22); }
.pd-stock.is-low { color: #ffc773; }
.pd-stock.is-low .pd-stock-dot { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .24); }
.pd-stock.is-out { color: #ff9c9c; }
.pd-stock.is-out .pd-stock-dot { background: #e8544f; box-shadow: none; }

/* CTAs */
.pd-cta { display: flex; gap: 12px; }
.pd-btn-cart {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1.6px solid rgba(255, 255, 255, .3); background: transparent; color: var(--pd-ink);
  border-radius: 13px; padding: 15px; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  transition: background .2s, color .2s, transform .15s, border-color .2s;
}
.pd-btn-cart:hover:not(:disabled) { background: #f1f4fc; color: #14161f; border-color: #f1f4fc; transform: translateY(-1px); }
.pd-btn-cart:disabled { opacity: .4; cursor: not-allowed; }
.pd-btn-buy {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; border-radius: 13px; padding: 15px;
  font-size: 15px; font-weight: 700; text-decoration: none;
  transition: filter .2s, transform .15s;
}
.pd-btn-buy:hover { filter: brightness(1.12); transform: translateY(-1px); }

/* trust */
.pd-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-top: 1px solid var(--pd-line); padding-top: 18px; }
.pd-trust-item { display: flex; align-items: center; gap: 11px; }
.pd-trust-ic {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  /* tinted from the item's own colour, so the four are told apart by hue as well as text */
  color: var(--tr-c, #ff8a5c);
  background: color-mix(in srgb, var(--tr-c, #ff8a5c) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tr-c, #ff8a5c) 30%, transparent);
}
.pd-trust-ic svg { width: 19px; height: 19px; }
.pd-trust-item strong { display: block; font-size: 13px; font-weight: 700; color: var(--pd-ink); }
.pd-trust-item span { font-size: 11.5px; color: var(--pd-faint); }

/* lightbox */
.pd-lightbox { position: fixed; inset: 0; z-index: 4000; background: rgba(6, 6, 10, .94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; }
.pd-lb-close { position: absolute; top: 18px; right: 22px; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; border: none; font-size: 18px; cursor: pointer; transition: background .2s; }
.pd-lb-close:hover { background: rgba(255, 255, 255, .28); }
.pd-lb-img { max-width: 90%; max-height: 80vh; object-fit: contain; }
.pd-lb-thumbs { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; justify-content: center; }
.pd-lb-thumb { width: 54px; height: 54px; border-radius: 9px; overflow: hidden; border: 2px solid transparent; background: rgba(255, 255, 255, .06); padding: 3px; cursor: pointer; opacity: .55; transition: opacity .2s, border-color .2s; }
.pd-lb-thumb img, .pd-lb-thumb video { width: 100%; height: 100%; object-fit: contain; }
.pd-lb-thumb.is-active { opacity: 1; border-color: #fff; }

/* responsive */
@media (max-width: 900px) {
  .pd-wrap { grid-template-columns: 1fr; gap: 24px; }
  .pd-gallery { position: static; flex-direction: column-reverse; }
  .pd-thumbs-col { width: 100%; }
  .pd-thumb-nav { display: none; }
  .pd-thumbs { flex-direction: row; width: 100%; max-height: none; overflow-x: auto; overflow-y: hidden; }
  .pd-trust { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .pd-title { font-size: 21px; }
  .pd-price-now { font-size: 25px; }
  .pd-cta { flex-direction: column; }
  /* the heart is hidden here too — the rule lives below .pd-btn-wish's own block,
     since a media query adds no specificity and the later rule would win */
}

/* =========================================================
   PDP tabs — sticky tab bar (v=73)
   ========================================================= */
.pdp-tab-btns{
  position:sticky;
  top:var(--nav-h, 68px);
  z-index:50;
  background:#fff;
  padding-top:14px;
  box-shadow:0 12px 16px -14px rgba(0,0,0,.2);
}

/* =========================================================
/* =========================================================
   ACCOUNT — product reviews
   ========================================================= */
.ac-nav-count--accent { background: rgba(255, 106, 43, .18) !important; color: #ff8a5c !important; }
.ac-rev-list { display: flex; flex-direction: column; gap: 12px; }
.ac-rev {
  display: flex; gap: 14px; padding: 16px; border-radius: 16px;
  background: var(--acc-panel); border: 1px solid var(--acc-line);
}
.ac-rev-thumb {
  flex-shrink: 0; width: 64px; height: 64px; border-radius: 12px;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--acc-line);
  display: grid; place-items: center; overflow: hidden; text-decoration: none;
  color: var(--acc-faint);
}
.ac-rev-thumb img { width: 100%; height: 100%; object-fit: contain; }
.ac-rev-thumb svg { width: 22px; height: 22px; }
.ac-rev-main { flex: 1; min-width: 0; }
.ac-rev-name { display: block; font-size: 14.5px; font-weight: 700; color: var(--acc-ink); text-decoration: none; margin-bottom: 9px; }
.ac-rev-name:hover { color: #ff8a5c; }
.ac-rev-done {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
  color: #6fe4a4; background: rgba(34, 181, 98, .14); border: 1px solid rgba(34, 181, 98, .3);
  border-radius: 99px; padding: 5px 12px;
}
.ac-rev-btn {
  display: inline-flex; align-items: center; gap: 7px; border-radius: 10px; padding: 8px 16px;
  border: 1px solid var(--acc-line); background: rgba(255, 255, 255, .05); color: var(--acc-ink);
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.ac-rev-btn svg { color: #ffc93c; }
.ac-rev-btn:hover { border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .1); }
.ac-rev-form { display: flex; flex-direction: column; gap: 10px; }
.ac-rev-stars { display: flex; gap: 3px; }
.ac-rev-star {
  border: none; background: none; font-size: 26px; line-height: 1; padding: 0; cursor: pointer;
  color: rgba(255, 255, 255, .18); transition: color .12s, transform .12s;
}
.ac-rev-star.is-on { color: #ffc93c; }
.ac-rev-star:hover { transform: scale(1.12); }
.ac-rev-text {
  border: 1px solid var(--acc-line); border-radius: 11px; padding: 11px 13px;
  background: rgba(0, 0, 0, .28); color: var(--acc-ink);
  font-size: 13.5px; font-family: inherit; outline: none; resize: vertical;
  transition: border-color .2s, background .2s;
}
.ac-rev-text::placeholder { color: rgba(232, 238, 251, .3); }
.ac-rev-text:focus { border-color: var(--accent); background: rgba(0, 0, 0, .4); }
.ac-rev-err { margin: 0; font-size: 12.5px; color: #ff9c9c; }
.ac-rev-actions { display: flex; gap: 9px; justify-content: flex-end; }
.ac-rev-cancel {
  border: 1px solid var(--acc-line); background: rgba(255, 255, 255, .05); color: var(--acc-dim);
  border-radius: 9px; padding: 8px 16px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.ac-rev-cancel:hover { border-color: rgba(255, 255, 255, .28); color: var(--acc-ink); }
.ac-rev-submit {
  border: none; background: var(--accent); color: #fff; border-radius: 9px; padding: 8px 18px;
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: filter .2s;
}
.ac-rev-submit:hover:not(:disabled) { filter: brightness(1.12); }
.ac-rev-submit:disabled { filter: grayscale(.5) brightness(.7); cursor: not-allowed; }
/* =========================================================
   PDP — video in gallery, buy row, reviews, stacked sections, sticky bar
   One block. These were five (v=75 … v=78 + the sticky bar), and because they came
   AFTER the main PDP block they quietly overrode it — .pd-qty-val even carried
   `color:#15171c !important`, which is why the quantity read as black-on-dark and
   looked blank.
   ========================================================= */

/* ---- video in the gallery ---- */
.pd-stage-video { width: 100%; max-height: 480px; object-fit: contain; border-radius: 12px; background: #0d0f16; }
.pd-thumb--video { position: relative; }
.pd-thumb--video video { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; }
.pd-thumb-play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.pd-thumb-play svg { color: #fff; background: rgba(0, 0, 0, .55); border-radius: 50%; padding: 6px; box-sizing: content-box; }
.pd-lb-thumb video { width: 100%; height: 100%; object-fit: cover; }
video.pd-lb-img { background: #000; }

/* ---- buy row: quantity + wishlist ---- */
.pd-buy { align-items: flex-end; }
.pd-qty-wrap { display: flex; flex-direction: column; gap: 7px; }
.pd-qty-label { font-size: 12.5px; font-weight: 700; color: var(--pd-dim); }
.pd-qty-val { min-width: 46px; text-align: center; font-size: 16px; font-weight: 800; color: var(--pd-ink); }
.pd-qty button { font-weight: 600; color: var(--pd-ink); }
.pd-qty button:disabled { opacity: .3; cursor: not-allowed; }
.pd-qty button:disabled:hover { background: transparent; }

.pd-btn-wish {
  flex-shrink: 0; width: 56px; border-radius: 13px;
  border: 1.6px solid var(--pd-line); background: rgba(255, 255, 255, .05); color: var(--pd-faint);
  display: grid; place-items: center; cursor: pointer;
  transition: border-color .2s, color .2s, background .2s, transform .15s;
}
.pd-btn-wish:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.pd-btn-wish.is-on { border-color: var(--accent); color: var(--accent); background: rgba(232, 80, 42, .16); }
/* The heart already sits on the image, right at the top of the page. Once .pd-cta
   stacks on a phone, this second one drops below Buy Now as a stray pill — two
   controls doing the same job, and the lower one reads as a mistake.
   This MUST stay after the .pd-btn-wish block above: a media query carries no
   specificity of its own, so `display: grid` up there beats a `display: none`
   written earlier, media query or not. */
@media (max-width: 480px) {
  .pd-btn-wish { display: none; }
}

/* ---- reviews ---- */
.pdp-rev-head {
  display: flex; gap: 36px; flex-wrap: wrap; align-items: center;
  padding: 22px 24px; border-radius: 16px; margin-bottom: 24px;
  background: var(--pd-panel); border: 1px solid var(--pd-line);
}
.pdp-rev-score { text-align: center; min-width: 118px; }
.pdp-rev-num { font-family: "Russo One", sans-serif; font-weight: 400; font-size: 42px; color: var(--pd-ink); line-height: 1; }
.pdp-rev-stars { color: #ffc93c; font-size: 18px; letter-spacing: 2px; margin-top: 6px; }
.pdp-rev-count { font-size: 12.5px; color: var(--pd-faint); margin-top: 5px; }
.pdp-rev-dist { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 7px; }
.pdp-rev-bar { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.pdp-rev-bar-label { width: 34px; color: var(--pd-dim); font-weight: 600; white-space: nowrap; }
.pdp-rev-bar-track { flex: 1; height: 8px; background: rgba(255, 255, 255, .1); border-radius: 99px; overflow: hidden; }
.pdp-rev-bar-track span { display: block; height: 100%; background: linear-gradient(90deg, #ffd454, #f5a623); border-radius: 99px; transition: width .6s ease; }
.pdp-rev-bar-count { width: 24px; text-align: right; color: var(--pd-faint); }

.pdp-rev-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 30px; }
.pdp-rev-empty { color: var(--pd-faint); font-size: 14px; }
.pdp-rev-card {
  display: flex; gap: 14px; padding: 16px 18px; border-radius: 14px;
  background: var(--pd-panel); border: 1px solid var(--pd-line);
  transition: background .2s, border-color .2s;
}
.pdp-rev-card:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); }
.pdp-rev-av { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-size: 16px; font-weight: 700; }
.pdp-rev-content { flex: 1; min-width: 0; }
.pdp-rev-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.pdp-rev-author { font-size: 14px; font-weight: 700; color: var(--pd-ink); }
.pdp-rev-verified { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #6fe4a4; background: rgba(34, 181, 98, .14); border: 1px solid rgba(34, 181, 98, .3); border-radius: 99px; padding: 2px 9px; }
.pdp-rev-cardstars { color: #ffc93c; font-size: 13px; letter-spacing: 1px; margin-bottom: 7px; }
.pdp-rev-text { margin: 0; font-size: 13.5px; color: var(--pd-dim); line-height: 1.7; }

.pdp-rev-thanks { color: #6fe4a4; font-size: 14px; font-weight: 700; }
.pdp-rev-form { border-top: 1px solid var(--pd-line); padding-top: 22px; display: flex; flex-direction: column; gap: 11px; max-width: 480px; }
.pdp-rev-form h3 {
  margin: 0;
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--pd-ink);
}
.pdp-rev-formstars { display: flex; gap: 4px; font-size: 28px; cursor: pointer; }
.pdp-rev-formstars span { color: rgba(255, 255, 255, .18); transition: color .12s, transform .12s; }
.pdp-rev-formstars span:hover { transform: scale(1.12); }
.pdp-rev-formstars span.is-on { color: #ffc93c; }
.pdp-rev-input, .pdp-rev-textarea {
  border: 1px solid var(--pd-line); border-radius: 11px; padding: 12px 14px;
  background: rgba(0, 0, 0, .3); color: var(--pd-ink);
  font-size: 14px; font-family: inherit; outline: none;
  transition: border-color .2s, background .2s;
}
.pdp-rev-input::placeholder, .pdp-rev-textarea::placeholder { color: rgba(232, 238, 251, .3); }
.pdp-rev-input:focus, .pdp-rev-textarea:focus { border-color: var(--accent); background: rgba(0, 0, 0, .42); }
.pdp-rev-textarea { resize: vertical; min-height: 90px; }
.pdp-rev-submit {
  align-self: flex-start; border: none; background: var(--accent); color: #fff;
  border-radius: 11px; padding: 12px 26px; font-family: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: filter .2s;
}
.pdp-rev-submit:hover:not(:disabled) { filter: brightness(1.12); }
.pdp-rev-submit:disabled { filter: grayscale(.5) brightness(.7); cursor: not-allowed; }
@media (max-width: 560px) { .pdp-rev-head { gap: 20px; padding: 18px; } }

/* ---- stacked sections + sticky scroll-spy nav ---- */
.pdp-sections {
  /* tokens again: these sections sit outside .pd-wrap, so they don't inherit its vars */
  --pd-ink: #f1f4fc;
  --pd-dim: rgba(232, 238, 251, .66);
  --pd-faint: rgba(232, 238, 251, .42);
  --pd-line: rgba(255, 255, 255, .09);
  --pd-panel: rgba(255, 255, 255, .035);
  background: transparent;
  border-top: 1px solid var(--pd-line);
  color: var(--pd-ink);
}
.pdp-nav-sentinel { display: block; height: 1px; width: 100%; }

.pdp-secnav {
  position: sticky; top: 0; z-index: 60;
  /* opaque, not glass: the page scrolls under this and a translucent bar would show
     every section sliding through it */
  background: #0c0d13;
  border-bottom: 1px solid var(--pd-line);
}
.pdp-secnav-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; gap: 6px; align-items: center;
  padding: 10px var(--pad-x);
  overflow-x: auto; scrollbar-width: none;
}
.pdp-secnav-inner::-webkit-scrollbar { display: none; }

/* Pills, not underlined text. An underline only marks the active tab — the inactive
   ones read as plain prose, so the row didn't look like a control at all. A pill has
   a shape whether it is selected or not. */
.pdp-secnav-btn {
  position: relative;
  padding: 9px 18px;
  border-radius: 99px;
  background: transparent;
  border: 1px solid transparent;
  font: 700 13px var(--font);
  letter-spacing: .02em;
  color: var(--pd-faint);
  cursor: pointer;
  white-space: nowrap;
  transition: color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.pdp-secnav-btn:hover { color: var(--pd-ink); background: rgba(255, 255, 255, .06); }
.pdp-secnav-btn.is-active {
  color: #fff;
  background: rgba(232, 80, 42, .18);
  border-color: rgba(232, 80, 42, .5);
}
.pdp-secnav-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* when the section nav is stuck, hide the site header so the nav owns the top */
body.pdp-nav-stuck #navbar { opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; }

.pdp-sec-wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--pad-x); }
.pdp-sec { padding: 44px 0; border-bottom: 1px solid var(--pd-line); scroll-margin-top: 84px; }
.pdp-sec:last-child { border-bottom: none; padding-bottom: 64px; }
.pdp-sec-title {
  margin: 0 0 22px;
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-size: 21px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--pd-ink);
}
.pdp-sec-desc { font-size: 15px; line-height: 1.85; color: var(--pd-dim); max-width: 820px; white-space: pre-line; }

/* warranty */
.pdp-warr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 18px; }
.pdp-warr-card { border-radius: 14px; padding: 20px 22px; background: var(--pd-panel); border: 1px solid var(--pd-line); }
.pdp-warr-card--green { background: rgba(34, 181, 98, .1); border-color: rgba(34, 181, 98, .28); }
.pdp-warr-card--orange { background: rgba(232, 80, 42, .1); border-color: rgba(232, 80, 42, .28); }
.pdp-warr-head { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--pd-ink); }
.pdp-warr-head svg { width: 16px; height: 16px; flex-shrink: 0; }
.pdp-warr-card--green .pdp-warr-head svg { color: #6fe4a4; }
.pdp-warr-card--orange .pdp-warr-head svg { color: #ff8a5c; }
.pdp-warr-body { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--pd-dim); }
.pdp-warr-note { font-size: 13px; color: var(--pd-faint); }
.pdp-warr-note a { color: #ff8a5c; font-weight: 700; }

/* ---- full-width sticky add-to-cart bar ---- */
.pd-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  /* opaque for the same reason as the section nav — the whole page passes behind it */
  background: #0c0d13;
  border-top: 1px solid rgba(255, 255, 255, .1);
  transform: translateY(110%);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.pd-sticky.is-show { transform: translateY(0); }
.pd-sticky-inner { max-width: 1200px; margin: 0 auto; padding: 11px var(--pad-x); display: flex; align-items: center; gap: 16px; }
/* the product shot is cut out on white, so its tile stays light */
.pd-sticky-img { width: 50px; height: 50px; object-fit: contain; border-radius: 10px; background: rgba(255, 255, 255, .06); flex-shrink: 0; }
.pd-sticky-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-right: auto; }
.pd-sticky-name { font-size: 14.5px; font-weight: 700; color: #f1f4fc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.pd-sticky-price { display: flex; align-items: baseline; gap: 8px; font-size: 16px; font-weight: 800; color: #f1f4fc; }
.pd-sticky-price s { font-size: 12.5px; font-weight: 500; color: rgba(232, 238, 251, .4); }
.pd-sticky-qty { display: flex; align-items: center; border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; overflow: hidden; flex-shrink: 0; background: rgba(255, 255, 255, .05); }
.pd-sticky-qty button { width: 34px; height: 38px; border: none; background: transparent; font-size: 17px; color: #f1f4fc; cursor: pointer; transition: background .15s; }
.pd-sticky-qty button:hover:not(:disabled) { background: rgba(255, 255, 255, .1); }
.pd-sticky-qty button:disabled { color: rgba(232, 238, 251, .25); cursor: not-allowed; }
.pd-sticky-qty span { min-width: 30px; text-align: center; font-size: 14px; font-weight: 700; color: #f1f4fc; }
.pd-sticky-actions { display: flex; gap: 10px; flex-shrink: 0; }
.pd-sticky-cart, .pd-sticky-buy { border: none; border-radius: 11px; padding: 12px 26px; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: filter .18s, background .18s; }
.pd-sticky-cart { background: transparent; color: #ff8a5c; border: 1.6px solid var(--accent); }
.pd-sticky-cart:hover:not(:disabled) { background: rgba(232, 80, 42, .16); }
.pd-sticky-buy { background: var(--accent); color: #fff; }
.pd-sticky-buy:hover:not(:disabled) { filter: brightness(1.12); }
.pd-sticky-cart:disabled, .pd-sticky-buy:disabled { filter: grayscale(.5) brightness(.7); cursor: not-allowed; }

@media (max-width: 640px) {
  /* On a phone the bar is the buy button and nothing else — the name and price are
     already on the page right above it. */
  .pd-sticky-info { display: none; }
  .pd-sticky-img { display: none; }
  .pd-sticky-inner { gap: 10px; padding: 9px 12px; }
  .pd-sticky-actions { flex: 1; }
  .pd-sticky-cart, .pd-sticky-buy { flex: 1; padding: 12px 10px; }
  .pdp-sec-title { font-size: 18px; }
  /* pill padding, not the old tab padding — 14px would make these taller on a phone
     than on desktop */
  .pdp-secnav-btn { padding: 8px 14px; font-size: 12.5px; }
  .pdp-secnav-inner { padding-block: 8px; }
}
/* =========================================================
   MOBILE APP VIEW (v=79)
   Base toggles — these components are mobile-only.
   ========================================================= */

@media (max-width: 768px) {
  /* Header = [logo left] · [cart + menu right].
     Search, the nav links and the categories all live in the drawer, so the bar
     stays a single short row and the artwork below it starts higher. */
  :root { --nav-row: 56px; --nav-cat-row: 0px; }

  .nav-grid { padding-inline: 12px; column-gap: 12px; }
  .nav-container { gap: 10px; }
  .logo img { height: 38px; }
  .nav-links { display: none !important; }
  .nav-cats { display: none !important; }
  .search-bar { display: none !important; }
  /* margin-left auto, not just flex:none — without it the group packs against the
     logo and leaves the whole right half of the bar empty */
  .nav-right { flex: 0 0 auto; margin-left: auto; }
  .nav-actions { display: flex !important; align-items: center; gap: 6px; flex: 0 0 auto; }
  /* only the cart survives — wishlist and account are in the drawer */
  .nav-actions .nav-icon-btn { display: none !important; }
  .nav-actions #navCart { display: flex !important; }
  /* No chip around it — next to a bare hamburger the boxed icon looked like the odd
     one out. The box stays 44px so the tap target survives losing its background. */
  #navCart .nav-act-box {
    width: 44px;
    height: 44px;
    background: transparent;
    border: 0;
    border-radius: 0;
  }
  #navCart .nav-act-box svg { width: 26px; height: 26px; }
  /* touch browsers leave :hover stuck on after a tap, which would paint the chip back */
  #navCart:hover .nav-act-box { background: transparent; border-color: transparent; }
  /* the labels would force a second line into a 56px bar */
  .nav-act-label { display: none; }
  .hamburger { display: flex !important; }

  /* ───────── 4) Hero — 100% width, natural height, swipeable ───────── */
  #hero-section {
    margin-top: 0 !important; height: auto !important; min-height: 0 !important;
    padding: 0 !important; background: none !important;
  }
  .hero-slider {
    display: flex; height: auto; border-radius: 0; box-shadow: none;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hero-slider::-webkit-scrollbar { display: none; }
  .slide {
    position: relative; inset: auto; opacity: 1; visibility: visible; pointer-events: auto;
    min-width: 100%; scroll-snap-align: center; transition: none;
  }
  .slide-bg { position: relative; inset: auto; display: block; }
  .slide-img { height: auto; object-fit: contain; }
  .slider-arrow, .slider-dots, .slider-progress { display: none !important; }

  /* ───────── 5) Product rail → real 2-column grid (no slider); hide card description ───────── */
  .products-slider-wrap { overflow: visible !important; }
  .products-track {
    transform: none !important; display: grid !important;
    grid-template-columns: 1fr 1fr; gap: 12px; transition: none !important;
  }
  .products-track .product-card { flex: none !important; width: auto !important; min-width: 0; }
  .ps-nav-btns { display: none !important; }
  .product-slogan { display: none !important; }

  /* ───────── 6b) Swipe on the secondary banner slider ───────── */
  .ss-slider {
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ss-slider::-webkit-scrollbar { display: none; }
  .ss-track { transform: none !important; transition: none !important; }
  .ss-slide { scroll-snap-align: center; }
  .ss-dots { display: none; }
  /* fixed banner height (hero excluded) — uniform 200px, cropped */
  .ss-img { height: 200px !important; object-fit: cover; }
  .tdv-banner-img { height: 200px !important; object-fit: cover; }

  /* ───────── 6c) Swipe on the Instagram reels ───────── */
  .insta-viewport {
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px;
  }
  .insta-viewport::-webkit-scrollbar { display: none; }
  .insta-reel-track { transform: none !important; transition: none !important; }
  .insta-card { scroll-snap-align: center; }
  .insta-nav-btns { display: none !important; }

  /* ───────── 7) Instagram QR column — clean centered card ───────── */
  .insta-qr-panel {
    flex-direction: column !important; align-items: center !important; text-align: center !important;
    flex-wrap: nowrap; gap: 10px !important; padding: 24px 18px !important; border-radius: 18px !important;
  }
  .insta-qr-ig-icon { display: flex !important; margin-bottom: 2px; }
  .insta-qr-ring { margin-bottom: 0 !important; flex: 0 0 auto !important; }
  .insta-qr-inner { padding: 8px !important; border-radius: 12px !important; }
  .insta-qr-img { width: 132px !important; height: 132px !important; }
  .insta-qr-scan-txt { display: block !important; font-size: 12px; letter-spacing: 1.5px; }
  .insta-qr-divider { display: block !important; }
  .insta-qr-handle { font-size: 16px !important; margin-bottom: 2px !important; }
  .insta-qr-msg { font-size: 12.5px !important; line-height: 1.6 !important; margin-bottom: 4px !important; }
  .insta-follow-btn { width: 100%; justify-content: center; font-size: 13px !important; padding: 12px 18px !important; }
  .insta-qr-panel > *:not(.insta-qr-ring) { flex: 0 0 auto !important; width: 100%; }

  /* ───────── 8) Success Stories — centered card, swipeable ───────── */
  .success-viewport {
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding: 18px 0 26px;
  }
  .success-viewport::-webkit-scrollbar { display: none; }
  .success-track {
    transform: none !important; transition: none !important;
    padding-inline: 50%;
    gap: 18px;
  }
  .success-cell { scroll-snap-align: center; }
  .success-arrows { display: none !important; }

  /* ───────── Footer — Company + Customer Support side by side (half/half) ───────── */
  .footer-inner { grid-template-columns: 1fr 1fr !important; gap: 26px 18px !important; }
  /* brand, Our Products and Get In Touch stay full-width; that leaves
     Company (3rd) + Customer Support (4th) sharing one half/half row */
  .footer-inner > div:nth-child(1),
  .footer-inner > div:nth-child(2),
  .footer-inner > div:nth-child(5) { grid-column: 1 / -1; }
}

/* =========================================================
   DESKTOP — align every home section/banner to the HERO width (v=82)
   Hero = full viewport minus clamp(14px,3vw,48px) side padding (no max-width cap).
   We give the same frame to all section wrappers so they line up edge-to-edge
   with the hero on wide screens (e.g. 1900px). Mobile (≤768px) is untouched.
   ========================================================= */
@media (min-width: 769px) {
  /* zero the outer-section horizontal padding (frame moves onto the inner wrap) */
  .products-section,
  .cat-section,
  .ss-section,
  .tdv-section,
  .insta-section,
  .success-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* inner wrappers: drop the 1440px cap, span full width with the hero side padding */
  .products-container,
  .cat-wrap,
  .ss-wrap,
  .tdv-wrap,
  .insta-wrap,
  .success-wrap {
    max-width: none !important;
    width: auto !important;
    margin-inline: 0 !important;
    padding-inline: clamp(14px, 3vw, 48px) !important;
  }
}

/* =========================================================
   PDP — match the home-page / hero content width (v=83)
   ========================================================= */
.pdp-banners { max-width: var(--max-w); margin: 0 auto; padding: 12px var(--pad-x); display: flex; flex-direction: column; gap: 18px; }

@media (min-width: 769px) {
  /* outer full-width sections: drop their horizontal padding (frame moves to inner wrap) */
  .breadcrumb,
  .pdp-related { padding-left: 0 !important; padding-right: 0 !important; }
  /* every PDP content wrapper gets the hero frame: no cap + hero side padding */
  .breadcrumb-inner,
  .pd-wrap,
  .pdp-banners,
  .pdp-secnav-inner,
  .pdp-sec-wrap,
  .pdp-related-wrap {
    max-width: none !important;
    margin-inline: auto !important;
    padding-left: clamp(14px, 3vw, 48px) !important;
    padding-right: clamp(14px, 3vw, 48px) !important;
  }
}

/* "You may also like" (related products) — description on a single line (desktop) (v=84) */
@media (min-width: 769px) {
  .pdp-related .product-slogan {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* PDP product layout capped at 1600px (centered); other sections stay hero-width (v=85) */
@media (min-width: 769px) {
  .pd-wrap { max-width: 1600px !important; }
}

/* =========================================================
   PDP @ ≥1400px — fixed info column, gallery grows with the screen,
   image fills the viewport height (removes the empty space at 1900px) (v=86)
   ========================================================= */
@media (min-width: 1400px) {
  /* right (info) column fixed; left (gallery) takes all remaining width */
  .pd-wrap {
    max-width: none !important;
    grid-template-columns: minmax(0, 1fr) 620px !important;
  }
  /* wider thumbnails — widen the whole column (wrapper + nav buttons) and let the
     strip run the full gallery height so thumbs aren't clipped under the stage */
  .pd-thumbs-col { width: 92px !important; }
  .pd-thumbs-col .pd-thumbs { max-height: 90vh !important; }
  .pd-thumbs { width: 92px; }
  .pd-thumb  { width: 92px; height: 92px; }
  .pd-thumb-nav { width: 92px; }
  /* left column (gallery) height capped at 90vh; image fills it */
  .pd-stage { min-height: 540px; max-height: 90vh; }
  .pd-stage-img,
  .pd-stage-video { max-height: calc(90vh - 44px) !important; }
}

/* ── Country-code dropdown ─────────────────────────────────────── */
.ccs { position: relative; flex: 0 0 auto; }
.ccs-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 46px; padding: 0 10px 0 12px; min-width: 92px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 12px;
  font: inherit; font-size: 14px; color: #f1f4fc; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.ccs-btn:hover { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.08); }
.ccs-btn:focus-visible { outline: none; border-color: rgba(255,138,92,.65); box-shadow: 0 0 0 3px rgba(255,106,43,.15); }
.ccs-flag { font-size: 18px; line-height: 1; }
.ccs-dial { font-weight: 600; letter-spacing: .2px; }
.ccs-chev { color: rgba(232,238,251,.5); margin-left: 2px; transition: transform .18s ease; }
.ccs-chev.up { transform: rotate(180deg); }

/* The popover is opaque, not glass: it floats over the address card, and a
   translucent panel let the field labels underneath read straight through it. */
.ccs-pop {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  width: 320px; max-width: 86vw; background: #14161f;
  border: 1px solid rgba(255,255,255,.1); border-radius: 16px;
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.7), 0 6px 16px -10px rgba(0,0,0,.5);
  overflow: hidden; animation: ccs-in .14s ease;
}
@keyframes ccs-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.ccs-search {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.08); color: rgba(232,238,251,.45);
}
.ccs-search input {
  flex: 1; border: 0; outline: none; font: inherit; font-size: 14px;
  color: #f1f4fc; background: transparent;
}
.ccs-search input::placeholder { color: rgba(232,238,251,.35); }
.ccs-list { max-height: 280px; overflow-y: auto; padding: 6px; overscroll-behavior: contain; scrollbar-color: rgba(255,255,255,.18) transparent; }
.ccs-list::-webkit-scrollbar { width: 10px; }
.ccs-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border: 3px solid #14161f; border-radius: 8px; }
.ccs-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: 10px; background: transparent;
  font: inherit; font-size: 14px; color: rgba(232,238,251,.8); cursor: pointer; text-align: left;
}
.ccs-item:hover { background: rgba(255,255,255,.07); color: #f1f4fc; }
.ccs-item.sel { background: rgba(255,106,43,.14); color: #f1f4fc; }
.ccs-item .ccs-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccs-item .ccs-code { color: rgba(232,238,251,.45); font-weight: 600; font-variant-numeric: tabular-nums; }
.ccs-item.sel .ccs-code { color: #ff8a5c; }
.ccs-empty { padding: 22px; text-align: center; color: rgba(232,238,251,.4); font-size: 13px; }

/* ── PDP EMI widget (Razorpay Affordability) ───────────────────── */
/* Must keep full width even while empty — the widget measures the container
   width on render(), so display:none / 0-width would force a 0-width iframe. */
.pd-rzp-emi { width: 100%; max-width: 100%; overflow: hidden; }
.pd-rzp-emi:not(:empty) { margin: 14px 0 4px; }
.pd-rzp-emi iframe { max-width: 100% !important; }

/* The COD WhatsApp-OTP modal is styled with the rest of .co-* above — it used to
   be patched in here in light colours, after the block it was overriding. */

/* ============================================================================
 * BRAND OVERRIDES — Wonder Toys palette; must stay after the two above
 * ============================================================================ */

/* ============================================================
   WONDER TOYS — playful storefront theme
   A cohesive overlay that carries the homepage "toy arcade"
   language (logo neon palette + Russo One display font + rounded,
   bold, sticker-y shapes) across every shopping/content page,
   while keeping those pages light and readable.

   Loaded AFTER style.css + pages.css so it wins on shared class
   names. It targets only storefront classes (.product-card,
   .pd-*, .pdp-*, .cartpg-*, .co-*, page heroes) — never .th-*
   (the homepage arcade) and never the admin panel.
   ============================================================ */

:root {
  --toy-orange: #ff6a2b;
  --toy-yellow: #ffd166;
  --toy-teal: #14b8a6;
  --toy-magenta: #ff2d9a;
  --toy-purple: #8b5cf6;
  --toy-green: #16a34a;
  --toy-ink: #14121c;
  --toy-grad: linear-gradient(96deg, #ff6a2b 0%, #ff2d9a 100%);
  --toy-grad-warm: linear-gradient(96deg, #ff8a3d 0%, #ffb02e 100%);
  /* brighten the legacy accent so every existing accent usage turns toy-orange */
  --accent: #ff5a1f;
  --accent-h: #ff7a45;
}

/* Display font for headings — the same Russo One used across the storefront. */
.toy-display,
.section-heading,
.shop-hero-title,
.contact-hero-title,
.page-hero-title,
.cms-hero-title {
  font-family: "Russo One", sans-serif !important;
  letter-spacing: 0.02em;
  font-weight: 400;
}

/* ============================================================
   PRODUCT CARD — playful toy tile
   ============================================================ */
/* The card's own look lives in the .product-card rule near the top of this file — it
   used to be overridden from here with !important, right down to a near-white border
   on a dark card. Only the playful tilt is left, since that is this block's idea. */
.product-card:hover { transform: translateY(-6px) rotate(-0.6deg); }
.product-img-wrap {
  background: radial-gradient(120% 120% at 50% 0%, #fff 0%, #f6f4fb 100%) !important;
  position: relative;
}
/* image fills the card edge-to-edge (no inner padding) */
.product-img { padding: 0 !important; }
/* on hover: no scale — sweep a glossy shine across the image instead */
.product-card:hover .product-img { transform: none !important; }
.product-img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.55) 48%, transparent 60%);
  transform: translateX(-130%);
}
.product-card:hover .product-img-wrap::after {
  animation: pc-shine 0.8s ease;
}
@keyframes pc-shine {
  to { transform: translateX(130%); }
}
@media (prefers-reduced-motion: reduce) {
  /* the ring still appears — it just stops tilting and sweeping */
  .product-card:hover { transform: none; }
  .product-card:hover .product-img-wrap::after { animation: none; }
}

/* discount → a tilted sticker in the corner */
.product-price-row { position: relative; }
.price-off {
  font-family: "Russo One", sans-serif;
  font-size: 14px !important;
  letter-spacing: 0.04em;
  color: #14060a !important;
  background: var(--toy-yellow);
  padding: 2px 9px;
  border-radius: 8px;
  transform: rotate(-3deg);
  box-shadow: 0 5px 12px rgba(255, 209, 102, 0.5);
}
.price-sale {
  color: var(--toy-green) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}
.product-name a:hover { color: var(--toy-orange); }

/* wishlist heart */
.pc-wish.is-active,
.product-wish:hover { color: var(--toy-magenta) !important; }

/* CTA — gradient pill with a lift */
.product-cta {
  background: var(--toy-grad) !important;
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  box-shadow: 0 8px 20px -8px rgba(255, 45, 154, 0.6);
  transition: transform 0.2s cubic-bezier(0.2, 1.4, 0.4, 1), box-shadow 0.2s !important;
}
.product-cta:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 12px 26px -8px rgba(255, 45, 154, 0.7);
  letter-spacing: 0.03em !important;
}

/* ============================================================
   SHARED PLAYFUL BUTTON — applied to primary CTAs across pages
   ============================================================ */
/* .co-place is deliberately NOT in this list — the checkout CTA carries no drop
   shadow, and it defines its own gradient with the rest of .co-* above. */
.btn-primary,
.pd-btn-cart,
.auth-submit,
.form-submit,
.contact-submit {
  background: var(--toy-grad) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 12px 28px -10px rgba(255, 45, 154, 0.6) !important;
  transition: transform 0.2s cubic-bezier(0.2, 1.4, 0.4, 1), box-shadow 0.2s !important;
}
.btn-primary:hover,
.pd-btn-cart:hover,
.auth-submit:hover,
.form-submit:hover,
.contact-submit:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 36px -10px rgba(255, 45, 154, 0.7) !important;
}
/* Buy Now gets the warm variant so the two PDP buttons read differently */
.pd-btn-buy {
  background: var(--toy-grad-warm) !important;
  color: #14060a !important;
  border: none !important;
  box-shadow: 0 12px 28px -10px rgba(255, 106, 43, 0.6) !important;
  transition: transform 0.2s cubic-bezier(0.2, 1.4, 0.4, 1), box-shadow 0.2s !important;
}
.pd-btn-buy:hover { transform: translateY(-2px) !important; }
.pd-btn-wish.is-on { color: var(--toy-magenta) !important; border-color: var(--toy-magenta) !important; }

/* ============================================================
   SHOP / LISTING PAGE HERO — bright toy energy
   ============================================================ */
.shop-hero {
  background: radial-gradient(130% 130% at 78% -20%, #241a3a 0%, #140f22 50%, #0b0812 100%) !important;
}
.shop-hero-glow { background: radial-gradient(circle, rgba(255, 106, 43, 0.45), transparent 62%) !important; }
.shop-hero::after { background: radial-gradient(circle, rgba(255, 45, 154, 0.3), transparent 66%) !important; }
.shop-hero::before { background: linear-gradient(108deg, transparent 38%, rgba(255, 209, 102, 0.1) 50%, transparent 62%) !important; }
.shop-hero-eyebrow { color: var(--toy-yellow) !important; }
.shop-hero-title {
  font-size: clamp(40px, 6vw, 68px) !important;
  font-weight: 400 !important;
}
.shop-hero-title span {
  background: var(--toy-grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
.shop-hero-badge {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}
.shop-hero-badge b { color: var(--toy-yellow) !important; }

/* ============================================================
   PDP — playful accents on the buy box + section titles
   ============================================================ */
.pdp-sec-title,
.pd-related-title,
.pdp-reviews-title {
  font-family: "Russo One", sans-serif !important;
  letter-spacing: 0.03em;
  font-weight: 400 !important;
}
/* colour swatches — selected ring in brand orange */
.pd-swatch.is-active { border-color: var(--toy-orange) !important; box-shadow: 0 0 0 3px rgba(255, 106, 43, 0.22) !important; }
.pd-price-now { color: var(--toy-green) !important; }
.pd-save { color: var(--toy-green) !important; }
.pd-price-off {
  font-family: "Russo One", sans-serif;
  color: #14060a !important;
  background: var(--toy-yellow) !important;
  padding: 1px 9px;
  border-radius: 7px;
  transform: rotate(-2deg);
  display: inline-block;
}

/* ============================================================
   CART + CHECKOUT — rounded summary cards
   ============================================================ */
/* Each of these cards now sets its own border where it is defined. This rule used to
   force a near-white 1.5px border on all four with !important — invisible on a light
   page, glaring on a dark one, and unfixable from the rule that actually owns the card.
   .cart-free-note went with it: nothing has rendered that class in a long time. */
.cd-progress-fill { background: var(--toy-grad) !important; }

/* ============================================================
   CONTENT PAGE HEROES (contact, about, policy, careers…)
   ============================================================ */
.contact-hero-eyebrow,
.page-hero-eyebrow { color: var(--toy-orange) !important; }
.contact-hero-title span,
.page-hero-title span {
  background: var(--toy-grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
/* ============================================================
   MOBILE BOTTOM NAV — active tab in brand colour
   ============================================================ */

/* ============================================================
   SECTION HEADINGS used on storefront content
   ============================================================ */
.section-heading .cat-heading-accent,
.section-heading em {
  background: var(--toy-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ============================================================
   MOBILE POLISH
   ============================================================ */
@media (max-width: 600px) {
  .product-cta { padding: 10px 14px !important; font-size: 12px !important; }
  .price-sale { font-size: 16px !important; }
  .shop-hero-title { font-size: clamp(34px, 9vw, 48px) !important; }
}

/* The footer used to be flipped to a cream "toy theme" here, overriding the dark
   base with !important on every colour. The storefront is dark now, so that whole
   layer is gone — the footer's own rules further up own the look again. */

/* ============================================================
   MEGA MENU — playful category icons in colour-tinted badges
   (replaces the plain product-photo thumbnails)
   ============================================================ */
/* wider product-photo thumbnail with a subtle per-category frame */
/* "View all products" → gradient toy button */

/* ============================================================================
 * HOMEPAGE — scoped to .th-page
 * ============================================================================ */

/* ============================================================
   WONDER TOYS — HOMEPAGE "TOY BOX" THEME
   Bright, cheerful, multi-colour — matched to the brand logo
   (red / blue / green / purple / magenta / yellow) on a warm
   cream base. Fonts: Russo One (display) + Manrope (body).
   Class prefix: th-
   ============================================================ */

:root {
  --th-bg: #fff8f0;        /* warm cream page base       */
  --th-panel: #ffffff;     /* cards                      */
  --th-panel-2: #fff6ef;   /* tinted card                */
  --th-line: rgba(20, 18, 40, 0.10);
  --th-text: #1f1a33;      /* dark ink                   */
  --th-dim: #6f6a86;
  --th-red: #ee3d46;       /* logo "W"                   */
  --th-orange: #ff7a2f;    /* warm accent                */
  --th-yellow: #ffc21f;    /* logo circle / springs      */
  --th-blue: #23a9e0;      /* logo "O" / "T"             */
  --th-teal: #23a9e0;      /* alias (kept for old rules) */
  --th-green: #35b24a;     /* logo "N"                   */
  --th-magenta: #ec1c8c;   /* logo "R" / "Y" / ball      */
  --th-purple: #8a2b8f;    /* logo "E" / tagline         */
  --th-grad: linear-gradient(96deg, #ee3d46 0%, #ec1c8c 42%, #8a2b8f 100%);
  --th-grad-bright: linear-gradient(96deg, #ff7a2f 0%, #ffc21f 100%);
  --th-radius: 22px;
}

/* ---- page chrome ----
   The homepage used to paint its own cream base + colour glows. That job now
   belongs to the ambient backdrop on <body>, so this stays transparent. */
.th-page {
  background: transparent;
  color: var(--th-text);
  font-family: "Manrope", sans-serif;
  /* No `overflow-x: hidden` here. Setting overflow on one axis forces the other to
     `auto`, which would quietly make .th-page a scroll container — the slides' snap
     points would then bind to IT instead of the page, and the page-level snapping
     below would do nothing. Each slide clips its own artwork already (.cx). */
}

.th-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 22px;
}

/* ============ BUTTONS ============ */
.th-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Manrope", sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 34px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.2, 1.4, 0.4, 1), box-shadow 0.2s;
}
.th-btn--primary {
  color: #14060a;
  background: var(--th-grad);
  box-shadow: 0 10px 34px rgba(255, 106, 43, 0.45), inset 0 -3px 0 rgba(0, 0, 0, 0.22);
}
.th-btn--primary:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 16px 44px rgba(255, 106, 43, 0.6), inset 0 -3px 0 rgba(0, 0, 0, 0.22);
}
.th-btn--ghost {
  color: var(--th-blue);
  border: 2px solid rgba(35, 169, 224, 0.5);
  background: rgba(35, 169, 224, 0.08);
}
.th-btn--ghost:hover {
  transform: translateY(-3px);
  border-color: var(--th-blue);
  background: rgba(35, 169, 224, 0.14);
  box-shadow: 0 10px 26px -10px rgba(35, 169, 224, 0.5);
}

/* ============ SECTION HEADERS ============ */
/* ================================================================
   CATEGORY HERO (.cx) — one full-screen section per category.
   The banner IS the section: slides sit behind a left-hand overlay,
   and the category video takes over once it has buffered.
   ================================================================ */
/* ---- the deck ---------------------------------------------------------------
   The page itself is the scroller and the slides snap one-at-a-time, so a single
   scroll always lands on a whole section and never rests half-way.

   The deck used to be its OWN scroller. That gave two scrollers running at once —
   the deck's and the page's — which drift apart: you could scroll the page down to
   the footer while the deck still sat on slide 7, showing both. One scroller can't
   desync from itself.

   Snapping is scoped to the homepage with :has(). Everywhere else there are no snap
   points at all, and a scroller with no snap areas simply doesn't snap — so product
   pages keep scrolling normally.
   ----------------------------------------------------------------------------- */
:root:has(.th-page) {
  scroll-snap-type: y mandatory;
  scroll-padding-top: var(--nav-h); /* land below the fixed header, not under it */
}
/* The footer has to be a snap point too, otherwise mandatory has nothing to release
   you onto past the last slide and drags you back into the deck forever. */
.inner-page:has(.th-page) #siteFooter { scroll-snap-align: start; }

.cx-deck { position: relative; }

.cx {
  position: relative;
  /* Two lines on purpose. svh, not vh: vh ignores the mobile URL bar and crops the
     bottom. But a browser too old for svh drops the whole declaration, and with no
     height the section collapses to its copy — so the vh line is the floor those
     browsers land on, and anything newer overrides it on the next line. */
  height: calc(100vh - var(--nav-h));
  height: calc(100svh - var(--nav-h));
  overflow: hidden;
  display: flex;
  align-items: center;
  background: #07070b;
  /* `always` forbids skipping past a slide, so one gesture = one slide */
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.cx-stage {
  position: absolute;
  inset: 0;
  /* Its own stacking context, so the layers inside it (slides, video, scrim, the boot
     cover) sort among themselves and none of them can climb over the copy. */
  z-index: 0;
  touch-action: pan-y; /* let the page scroll vertically; we only read horizontal drags */
  cursor: grab;
}

/* ---- Boot cover -------------------------------------------------------------
   Holds the stage until the first banner has decoded. It is opaque, not a blur of
   the image, because the thing being hidden is sometimes the WRONG image — a phone
   is served the desktop banner until matchMedia can run. A shimmer plus a ring reads
   as "working", where a bare dark panel reads as "broken".
   ---------------------------------------------------------------------------- */
.cx-boot {
  position: absolute;
  inset: 0;
  z-index: 3; /* over the slides and the scrim, under the copy */
  display: grid;
  place-items: center;
  background: #07070b;
  transition: opacity .5s var(--ease), visibility 0s linear .5s;
}
.cx-boot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 22%, rgba(255, 255, 255, .055) 46%, transparent 68%);
  background-size: 240% 100%;
  animation: cx-boot-sweep 1.25s linear infinite;
}
.cx-boot-ring {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .1);
  border-top-color: var(--accent);
  animation: cx-boot-spin .68s linear infinite;
}
/* visibility, not just opacity — a faded cover would still eat the swipe */
.cx.is-ready .cx-boot {
  opacity: 0;
  visibility: hidden;
}
@keyframes cx-boot-sweep {
  from { background-position: 150% 0; }
  to   { background-position: -70% 0; }
}
@keyframes cx-boot-spin {
  to { transform: rotate(360deg); }
}
.cx-stage:active { cursor: grabbing; }

.cx-slide,
.cx-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .9s ease, transform 6s ease-out;
  pointer-events: none;
  user-select: none;
}
.cx-slide.is-on,
.cx-video.is-on {
  opacity: 1;
  transform: scale(1); /* slow drift-in, so a held slide never feels frozen */
}

/* darkens the left third so the copy always has contrast, whatever the banner is */
.cx-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 6, 10, .92) 0%, rgba(6, 6, 10, .74) 34%, rgba(6, 6, 10, .18) 62%, transparent 82%),
    linear-gradient(0deg, rgba(6, 6, 10, .6) 0%, transparent 42%);
  pointer-events: none;
}

.cx-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 72px);
  pointer-events: none; /* drags pass through to the stage… */
}
/* No cap here — the heading needs to run wide. The narrow column is applied to the
   tagline alone, which is the part that actually needs a readable measure. */
.cx-copy { max-width: none; }
/* …but the buttons stay clickable. Only THEY get pointer events back — the heading
   and tagline stay transparent to the pointer, so a swipe started on the copy still
   drags the slide. That matters most on phones, where the copy card covers the top
   third of the banner. */
.cx-actions { pointer-events: auto; }

/* ---- CHROME HEADING ----------------------------------------------------------
   Three stacked layers, the way a real chrome logo is built:
     ::before  a thick dark keyline, extruded downward  (the black outline)
     ::after   a mid-silver rim just inside it          (the bevel catching light)
     the text  the chrome face itself                   (sky / horizon / ground)

   Two things make or break it:
   1. ONE LINE. The gradient maps to the element box, so a wrapped heading gives
      line 1 the sky and line 2 the ground — the horizon never crosses a letter and
      the whole thing reads as grey plastic. Hence `white-space: nowrap`.
   2. HARD STOPS. Chrome is not a smooth ramp: bright sky slams into a dark band,
      a one-stop white flash marks the horizon, then the ground reflects back up.
   ------------------------------------------------------------------------------ */
.cx-title {
  position: relative;
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-size: clamp(26px, 3.1vw, 50px);
  line-height: 1;
  letter-spacing: .005em;
  margin: 0;
  text-transform: uppercase;
  white-space: nowrap;
  isolation: isolate;
}
.cx-title::before,
.cx-title::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  pointer-events: none;
}
/* 1 — the keyline, extruded down so the word sits ON the banner rather than in it.
   Strokes scale with the type (em, not px) or they'd swallow the glyphs at 38px and
   vanish at 104px. */
.cx-title::before {
  z-index: 1;
  color: #080b13;
  /* tuned for Russo One's lighter stems — a heavier ring closes up its counters */
  -webkit-text-stroke: .07em #080b13;
  filter:
    drop-shadow(0 2px 0 #080b13)
    drop-shadow(0 3px 0 #05070c)
    drop-shadow(0 14px 22px rgba(0, 0, 0, .85));
}
/* 2 — the bevel rim. Near-white, not mid-silver: a rim close in value to the face
   just merges into it and the bevel disappears. */
.cx-title::after {
  z-index: 2;
  color: #e8eefb;
  -webkit-text-stroke: .035em #e8eefb;
}
/* 3 — the chrome face.
   This has to be its own positioned element: `background-clip: text` paints at
   BACKGROUND level, and backgrounds are painted before any negative z-index child,
   so keeping the face on <h2> would let the rim cover it no matter the z-index. */
.cx-title > span {
  position: relative;
  z-index: 3;
  /* Few, wide, high-contrast bands. Twelve stops across a 46px cap gave ~4px each,
     which just averages into grey — chrome needs each band to be readable. */
  background-image: linear-gradient(
    180deg,
    #ffffff 0%,
    #ced9ee 34%,
    #43506c 48%,
    #0e131f 49.6%,
    #ffffff 50.4%,
    #ffffff 55%,
    #93a2c0 68%,
    #eef3fd 88%,
    #5f6c88 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cx-tagline {
  margin: 18px 0 0;
  /* the narrow column lives here — a readable measure under a very wide heading */
  max-width: max(320px, 22%);
  font-size: clamp(13.5px, .95vw, 15.5px);
  line-height: 1.6;
  color: rgba(255, 255, 255, .78);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .9);
}

/* ---- copy animation ----------------------------------------------------------
   Each line lifts and fades in on its own beat every time the slide is scrolled
   into view (CategoryDeck toggles `is-in` rather than latching it). The stagger is
   the whole point — three lines arriving together is just a fade; arriving in
   sequence reads as the slide assembling itself.

   Leaving is quicker than arriving, and undelayed: the slide is on its way off
   screen, so a slow, staggered exit would still be running when it returns.
   ------------------------------------------------------------------------------ */
.cx-title,
.cx-tagline,
.cx-actions {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .28s var(--ease), transform .28s var(--ease);
  transition-delay: 0s;
}
.cx.is-in .cx-title,
.cx.is-in .cx-tagline,
.cx.is-in .cx-actions {
  opacity: 1;
  transform: none;
  transition: opacity .62s var(--ease-out), transform .78s var(--ease-out);
}
.cx.is-in .cx-title   { transition-delay: .10s; }
.cx.is-in .cx-tagline { transition-delay: .26s; }
.cx.is-in .cx-actions { transition-delay: .40s; }

/* ---- swipe hint: shown once on the first slide ---- */
.cx-hint {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(22px, 4vh, 42px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  pointer-events: none; /* never in the way of the drag it is describing */
  color: rgba(255, 255, 255, .9);
  background: rgba(10, 10, 16, .5);
  border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: cx-hint-in .5s var(--ease-out) both, cx-hint-out .5s var(--ease) 5.5s both;
}
.cx-hint-arrow { width: 15px; height: 15px; opacity: .5; }
.cx-hint-arrow svg { width: 100%; height: 100%; display: block; }
/* the arrows pulse outward, away from the hand, to read as "either direction" */
.cx-hint-arrow:first-child { animation: cx-hint-l 1.8s var(--ease) infinite; }
.cx-hint-arrow:nth-child(3) { animation: cx-hint-r 1.8s var(--ease) infinite; }
.cx-hint-hand { width: 21px; height: 21px; animation: cx-hint-swipe 1.8s var(--ease) infinite; }
.cx-hint-hand svg { width: 100%; height: 100%; display: block; }
.cx-hint-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
@keyframes cx-hint-in  { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes cx-hint-out { to { opacity: 0; transform: translate(-50%, 8px); } }
@keyframes cx-hint-swipe {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  30%      { transform: translateX(-7px) rotate(-9deg); }
  65%      { transform: translateX(7px) rotate(9deg); }
}
@keyframes cx-hint-l { 0%, 100% { opacity: .3; transform: translateX(0); } 30% { opacity: 1; transform: translateX(-3px); } }
@keyframes cx-hint-r { 0%, 100% { opacity: .3; transform: translateX(0); } 65% { opacity: 1; transform: translateX(3px); } }

.cx-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
}

/* ---- play: same steel language as the CTA, round, secondary ---- */
.cx-play {
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  padding: 2px; /* the rim, same trick as .cx-cta */
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  background-image: linear-gradient(180deg, #ffffff 0%, #93a0b6 42%, #2b3245 52%, #7c8aa2 78%, #e6ecf7 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 14px 30px -10px rgba(0, 0, 0, .9);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.cx-play svg {
  width: 100%;
  height: 100%;
  padding: 13px;
  border-radius: 50%;
  color: #eef2f9;
  background-image: linear-gradient(180deg, #363d4e 0%, #363d4e 49%, #171c28 51%, #2b3243 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .6);
  transition: filter .18s var(--ease);
}
.cx-play:hover { transform: translateY(-2px); }
.cx-play:hover svg { filter: brightness(1.35); }
.cx-play:active { transform: translateY(0); }
.cx-play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* while it's playing the button is the way back out, so it reads as engaged */
.cx-play.is-on svg { color: #fff; background-image: linear-gradient(180deg, #b9145f 0%, #b9145f 49%, #7c0b40 51%, #96114e 100%); }

/* ---- CTA: a machined steel plate, not a pale pill ---- */
.cx-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px; /* the padding IS the chrome rim around the plate */
  border-radius: 10px;
  overflow: hidden;
  background-image: linear-gradient(180deg, #ffffff 0%, #93a0b6 42%, #2b3245 52%, #7c8aa2 78%, #e6ecf7 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .5),
    0 14px 30px -10px rgba(0, 0, 0, .9);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.cx-cta > span {
  display: block;
  padding: 13px 30px;
  border-radius: 8px;
  font-family: "Russo One", sans-serif;
  font-size: clamp(13px, .92vw, 15px);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #eef2f9;
  /* gunmetal face with its own horizon, so the button echoes the heading */
  background-image: linear-gradient(180deg, #5a6478 0%, #39415440 0%, #363d4e 49%, #171c28 51%, #232a39 78%, #3d4557 100%);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .6);
  transition: filter .18s var(--ease);
}
/* a light sweeps across the plate on hover */
.cx-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .5) 48%, transparent 62%);
  transform: translateX(-130%);
  transition: transform .7s var(--ease-out);
  pointer-events: none;
}
.cx-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6), 0 20px 40px -10px rgba(0, 0, 0, .95);
}
.cx-cta:hover > span { filter: brightness(1.3); }
.cx-cta:hover::after { transform: translateX(130%); }
.cx-cta:active { transform: translateY(0); }
.cx-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ================================================================
   INSTAGRAM SLIDE — the deck's last slide. Same left-hand copy as a
   category, but the reels themselves are the artwork on the right.
   ================================================================ */
.ig { background: #08080d; }
/* a soft Instagram-ish wash instead of a banner, so the slide isn't a black void */
.ig-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 70% at 82% 40%, rgba(188, 42, 141, .22), transparent 68%),
    radial-gradient(50% 60% at 96% 88%, rgba(247, 152, 54, .14), transparent 66%);
}
/* The reels ARE the slide — full-bleed rail, no copy column. Drag it sideways. */
.ig-rail {
  --per-row: 5;   /* exactly this many fill the width; the rest scroll */
  --gap: 16px;
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding-inline: clamp(20px, 5vw, 72px);
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scrollbar-width: none;
  /* only the right edge fades — the next card bleeds through it, which is the hint
     that the rail keeps going */
  -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
  mask-image: linear-gradient(to right, #000 88%, transparent);
}
.ig-rail::-webkit-scrollbar { display: none; }
.ig-rail:active { cursor: grabbing; }

/* Width is a share of the rail, so the count per row is fixed rather than a side
   effect of the viewport's height. `%` here resolves against the rail's content box,
   which already excludes its padding. */
.ig-card {
  position: relative;
  flex: 0 0 calc((100% - (var(--per-row) - 1) * var(--gap)) / var(--per-row));
  aspect-ratio: 9 / 16;
  /* a very wide, short screen would otherwise make 9:16 taller than the slide */
  max-height: 78%;
  border-radius: 16px;
  overflow: hidden;
  background: #12121a;
  border: 1px solid rgba(255, 255, 255, .08);
  transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.ig-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, .22);
  box-shadow: 0 22px 44px -14px rgba(0, 0, 0, .9);
}
/* the card is a plain div now — focus lands on .ig-open / .ig-mute inside it */
.ig-card:has(.ig-open:focus-visible) { transform: translateY(-6px); }
.ig-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
}
.ig-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(5, 5, 10, .9) 0%, transparent 48%);
  pointer-events: none;
}
/* the card's link, sitting under the mute button rather than wrapping it */
.ig-open {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.ig-open:focus-visible { outline: 2px solid #fff; outline-offset: -4px; border-radius: 14px; }

.ig-mute {
  position: absolute;
  z-index: 3;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  background: rgba(10, 10, 16, .6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.ig-mute svg { width: 100%; height: 100%; }
.ig-mute:hover { background: rgba(10, 10, 16, .88); border-color: rgba(255, 255, 255, .4); }
.ig-mute[aria-pressed="true"] { background: var(--accent); border-color: transparent; }
.ig-mute:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ig-cap {
  position: absolute;
  z-index: 2; /* above .ig-open, or the link would paint over it */
  left: 12px;
  right: 12px;
  bottom: 11px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(255, 255, 255, .92);
  /* two lines, then trail off — captions run long */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  pointer-events: none;
}

/* five across only makes sense on a wide screen — below that they'd be thumbnails */
@media (max-width: 1200px) {
  .ig-rail { --per-row: 4; }
}
@media (max-width: 900px) {
  .ig-rail { --per-row: 3; }
}
/* Phones get one reel per screen instead of a row of thumbnails — a reel is shot for
   a phone, and two of them side by side is neither a grid nor a reel. The rail becomes
   a carousel: swipe = next reel, same as Instagram itself. The card is inset rather
   than full-bleed, which keeps its 9:16 shape honest and lets the neighbours peek
   through the gutters — the peek is half the reason you know it scrolls. */
@media (max-width: 768px) {
  .ig-rail {
    --gap: 12px;
    height: 100%;
    /* 11 + 78 + 11 = 100vw, so a snapped card sits dead centre */
    padding-inline: 11vw;
    scroll-snap-type: x mandatory;
    /* the fade dimmed the right-hand card; with one card centred there are two
       neighbours and no single edge for it to describe */
    -webkit-mask-image: none;
    mask-image: none;
  }
  .ig-card {
    flex: 0 0 78vw;
    aspect-ratio: 9 / 16;
    /* leave the swipe pill room under the card */
    max-height: 74%;
    border-radius: 18px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  /* the lift was a pointer affordance; there is no pointer here */
  .ig-card:hover { transform: none; box-shadow: none; }
  /* the one on screen is the one playing — say so */
  .ig-card.is-on {
    border-color: rgba(255, 255, 255, .22);
    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .9);
  }
  .ig-cap { left: 12px; right: 12px; bottom: 12px; font-size: 12.5px; }
  .ig-mute { top: 12px; right: 12px; }
}

/* ---- Swipe affordance (phones only) -----------------------------------------
   Permanent, unlike the deck's hint: the deck teaches a gesture once, but this rail
   sits inside a page that scrolls the other way, so the reminder that THIS one goes
   sideways has to stay. Decorative — an instruction, not a control. */
.ig-swipe { display: none; }
@media (max-width: 768px) {
  .ig-swipe {
    position: absolute;
    z-index: 4;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(10, 10, 16, .58);
    border: 1px solid rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, .82);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    pointer-events: none;
  }
  .ig-swipe svg { width: 15px; height: 15px; flex: none; }
  .ig-swipe-l { animation: ig-nudge-l 1.7s ease-in-out infinite; }
  .ig-swipe-r { animation: ig-nudge-r 1.7s ease-in-out infinite; }
}
@keyframes ig-nudge-l {
  0%, 100% { transform: translateX(0); opacity: .45; }
  50%      { transform: translateX(-3px); opacity: 1; }
}
@keyframes ig-nudge-r {
  0%, 100% { transform: translateX(0); opacity: .45; }
  50%      { transform: translateX(3px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ig-card { transition: none; }
  /* the pill still says "swipe" — the chevrons just hold still */
  .ig-swipe-l, .ig-swipe-r { animation: none; opacity: .75; }
}

/* ---- section rail: how many sections, and which one you're on ---- */
.cx-rail {
  position: fixed;
  z-index: 20;
  right: clamp(14px, 1.6vw, 26px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: auto;
}
.cx-rail-dot {
  position: relative; /* anchors the tick */
  display: grid;
  place-items: center;
  width: 30px;
  height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: rgba(255, 255, 255, .38);
  transition: color .2s var(--ease);
}
.cx-rail-num {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  transition: opacity .2s var(--ease);
  opacity: 0;
}
/* the rail is a row of ticks; the number only surfaces where you are, or on hover */
.cx-rail-dot::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: width .24s var(--ease), background .2s var(--ease);
}
.cx-rail-dot:hover { color: rgba(255, 255, 255, .8); }
.cx-rail-dot.is-on { color: #fff; }
.cx-rail-dot.is-on::before { width: 0; }
.cx-rail-dot.is-on .cx-rail-num { opacity: 1; }
.cx-rail-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }

/* the rail is a full-screen affordance — on a phone it would sit on the artwork */
@media (max-width: 1023px) {
  .cx-rail { display: none; }
}
@media (max-width: 768px) {
  /* the categories already live in the header drawer — repeating them in the footer
     just makes the phone scroll further to reach the policy links */
  .footer-col--products { display: none; }

  /* ---- Phones: the copy sits at the TOP ---------------------------------------
     A portrait banner puts its subject low in the frame, so the copy goes above it.
     No panel behind it — it reads straight off the scrim, which is why the scrim
     below is weighted to the top. */
  .cx-inner {
    align-self: flex-start;
    padding-top: 70px;
    padding-inline: 14px;
  }
  .cx-copy {
    max-width: none;
    padding: 20px 18px 22px;
  }
  /* darken the top now, since that's where the copy lives */
  .cx-scrim {
    background:
      linear-gradient(180deg, rgba(6, 6, 10, .8) 0%, rgba(6, 6, 10, .28) 40%, transparent 66%),
      linear-gradient(0deg, rgba(6, 6, 10, .55) 0%, transparent 30%);
  }
  /* With no panel behind it the copy reads straight off the artwork, so the lines
     carry their own shadow — a bright upper banner would otherwise wash them out. */
  .cx-tagline { text-shadow: 0 1px 12px rgba(6, 6, 10, .92), 0 1px 3px rgba(6, 6, 10, .8); }
  .cx-title::before {
    filter: drop-shadow(0 2px 0 #080b13) drop-shadow(0 3px 0 #05070c) drop-shadow(0 8px 16px rgba(0, 0, 0, .95));
  }
  /* Tracks the screen instead of stepping between two fixed sizes — the title is
     nowrap, so its size has to follow the width it must fit into. */
  .cx-title { font-size: 9vw; }
  /* a 150-char tagline runs to five lines on a phone and buries the banner */
  .cx-tagline {
    max-width: none;
    margin-top: 10px;
    font-size: 13.5px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .cx-actions { margin-top: 18px; gap: 12px; }
  .cx-cta > span { padding: 12px 22px; }
  .cx-play { width: 44px; height: 44px; }
  .cx-play svg { padding: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-slide, .cx-video { transition: opacity .2s ease; transform: none; }
  .cx-slide.is-on, .cx-video.is-on { transform: none; }
  .cx-cta, .cx-cta::after, .cx-cta > span, .cx-play, .cx-play svg { transition: none; }
  /* the copy must still appear — just without the travel */
  .cx-title, .cx-tagline, .cx-actions,
  .cx.is-in .cx-title, .cx.is-in .cx-tagline, .cx.is-in .cx-actions {
    opacity: 1; transform: none; transition: none;
  }
  /* the cover must still lift — it just does it without the sweep and the spin */
  .cx-boot::before, .cx-boot-ring { animation: none; }
  .cx-boot-ring { border-top-color: var(--accent); opacity: .8; }
  /* the hint still shows and still times out — it just doesn't wave */
  .cx-hint { animation: cx-hint-out .01s linear 5.5s both; }
  .cx-hint-arrow, .cx-hint-hand { animation: none; opacity: .7; }
  :root:has(.th-page) { scroll-snap-type: none; }
  html { scroll-behavior: auto; }
}

/* ================================================================
   CATEGORY PAGE — where "Add to Garage" lands
   ================================================================ */
.cat-hero {
  position: relative;
  min-height: clamp(260px, 34vh, 380px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #07070b;
}
.cat-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cat-hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(6, 6, 10, .95) 0%, rgba(6, 6, 10, .62) 46%, rgba(6, 6, 10, .3) 100%),
    linear-gradient(90deg, rgba(6, 6, 10, .8) 0%, transparent 60%);
}
.cat-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 0 clamp(20px, 5vw, 72px) clamp(28px, 4vh, 44px);
}
.cat-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 12px;
}
.cat-crumb a:hover { color: #fff; }
.cat-crumb span[aria-hidden] { color: rgba(255, 255, 255, .25); }
.cat-crumb-now { color: rgba(255, 255, 255, .8); }

.cat-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 58px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .01em;
  /* same chrome as the homepage sections, so the two read as one system */
  background-image: linear-gradient(
    177deg,
    #ffffff 0%, #dfe6f2 14%, #98a2b6 32%,
    #f4f8ff 48%, #4c5464 50.5%, #788296 62%,
    #dde4f0 82%, #9aa3b5 94%, #cfd6e3 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .75)) drop-shadow(0 10px 20px rgba(0, 0, 0, .5));
}
/* the emoji must not be clipped by the chrome gradient */
.cat-title-ic {
  -webkit-text-fill-color: initial;
  color: initial;
  filter: none;
  font-size: .8em;
  line-height: 1;
}
.cat-tagline {
  margin: 12px 0 0;
  max-width: 60ch;
  font-size: clamp(14px, 1.2vw, 16.5px);
  line-height: 1.6;
  color: rgba(255, 255, 255, .78);
}
.cat-count {
  margin: 12px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
  font-variant-numeric: tabular-nums;
}
.cat-empty {
  text-align: center;
  padding: 56px 0;
  font-size: 15px;
  color: var(--text-2);
}
.cat-empty a { color: var(--accent); font-weight: 600; }
.cat-empty a:hover { text-decoration: underline; }

.th-section {
  padding: 92px 0 20px;
  position: relative;
}
.th-head {
  text-align: center;
  margin-bottom: 46px;
  padding: 0 18px;
}
.th-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--th-teal);
  border: 1px solid rgba(43, 217, 200, 0.4);
  background: rgba(43, 217, 200, 0.07);
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.th-title {
  font-family: "Russo One", sans-serif;
  font-size: clamp(40px, 6vw, 72px);
  letter-spacing: 0.04em;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
  color: var(--th-text);
  text-shadow: 0 3px 0 rgba(20, 18, 40, 0.1);
}
.th-title em {
  font-style: normal;
  background: var(--th-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.th-sub {
  color: var(--th-dim);
  font-size: 16px;
  margin: 12px auto 0;
  max-width: 520px;
}

/* ============ REELS (Instagram + product action) ============ */
.th-reels-shell { position: relative; }
.th-reels {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 8px 22px 26px;
  scrollbar-width: none;
}
.th-reels::-webkit-scrollbar { display: none; }
.th-reel {
  position: relative;
  flex: 0 0 min(340px, 78vw);
  aspect-ratio: 9 / 15;
  border-radius: 26px;
  overflow: hidden;
  scroll-snap-align: center;
  background: var(--th-panel);
  border: 1px solid var(--th-line);
  transition: transform 0.3s cubic-bezier(0.2, 1.2, 0.3, 1), box-shadow 0.3s;
}
.th-reel:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(255, 45, 160, 0.18);
}
.th-reel video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.th-reel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(4, 4, 10, 0.92) 0%, transparent 45%);
  pointer-events: none;
}
.th-reel-live {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  padding: 6px 12px;
  border-radius: 999px;
}
.th-reel-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff3b3b;
  box-shadow: 0 0 10px #ff3b3b;
  animation: th-blink 1.2s infinite;
}
.th-reel-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 18px;
}
.th-reel-name {
  font-family: "Russo One", sans-serif;
  font-size: 24px;
  letter-spacing: 0.04em;
  line-height: 1.05;
  color: #fff;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.th-reel-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.th-reel-price .now {
  color: var(--th-green);
  font-size: 22px;
  font-weight: 900;
}
.th-reel-price .was {
  color: var(--th-dim);
  text-decoration: line-through;
  font-size: 14px;
}
.th-reel-price .off {
  color: #16100a;
  background: var(--th-yellow);
  font-size: 11px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 6px;
}
.th-reel-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #14060a;
  background: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 11px 22px;
  border-radius: 999px;
  transition: transform 0.2s, background 0.2s;
}
.th-reel-cta:hover {
  transform: scale(1.05);
  background: var(--th-yellow);
}
.th-reel-mute {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: transform 0.2s, background 0.2s;
}
.th-reel-mute:hover {
  transform: scale(1.1);
  background: rgba(255, 106, 43, 0.8);
}
.th-reels-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(14, 14, 28, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.16);
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: transform 0.2s, background 0.2s;
}
.th-reels-nav:hover {
  background: var(--th-orange);
  transform: translateY(-50%) scale(1.08);
}
.th-reels-nav--prev { left: 6px; }
.th-reels-nav--next { right: 6px; }

/* ============ PRODUCT GRID (admin "products" sections) ============ */
.th-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.th-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--th-radius);
  background: linear-gradient(180deg, var(--th-panel-2), var(--th-panel));
  border: 1px solid var(--th-line);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.2, 1.4, 0.4, 1), box-shadow 0.25s, border-color 0.25s;
}
.th-card:hover {
  transform: translateY(-8px) rotate(-0.5deg);
  border-color: rgba(255, 106, 43, 0.55);
  box-shadow: 0 24px 44px -18px rgba(255, 106, 43, 0.5), 0 12px 30px rgba(20, 18, 40, 0.12);
}
.th-card-imgwrap {
  position: relative;
  aspect-ratio: 1;
  background: radial-gradient(120% 120% at 50% 0%, #ffffff 0%, #f5f1fb 100%);
  display: grid;
  place-items: center;
  overflow: hidden;
}
/* image fills the card edge-to-edge (no inner padding) */
.th-card-imgwrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* on hover: no scale — sweep a glossy shine across the image instead */
.th-card-imgwrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.5) 48%, transparent 60%);
  transform: translateX(-130%);
}
.th-card:hover .th-card-imgwrap::after {
  animation: th-shine 0.8s ease;
}
@keyframes th-shine {
  to { transform: translateX(130%); }
}
.th-card-off {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: "Russo One", sans-serif;
  font-size: 17px;
  letter-spacing: 0.05em;
  color: #14060a;
  background: var(--th-yellow);
  padding: 5px 12px;
  border-radius: 10px;
  transform: rotate(-4deg);
  box-shadow: 0 6px 16px rgba(255, 209, 102, 0.4);
  z-index: 1;
}
.th-card-body {
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.th-card-name {
  color: var(--th-text);
  text-decoration: none;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
.th-card-name:hover { color: var(--th-orange); }
.th-card-price {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-top: auto;
}
.th-card-price .now {
  color: var(--th-green);
  font-size: 20px;
  font-weight: 900;
}
.th-card-price .was {
  color: var(--th-dim);
  font-size: 13px;
  text-decoration: line-through;
}
.th-card-cta {
  margin-top: 4px;
  width: 100%;
  cursor: pointer;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  text-align: center;
  color: var(--th-text);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1.5px solid rgba(255, 106, 43, 0.5);
  background: rgba(255, 106, 43, 0.1);
  padding: 11px 10px;
  border-radius: 12px;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.th-card-cta:active { transform: scale(0.96); }
.th-card:hover .th-card-cta {
  background: var(--th-orange);
  color: #14060a;
}

/* ============ ADMIN BANNER SLIDER ============ */
.th-banner {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  border: 2px solid #fff;
  box-shadow: 0 26px 50px -20px rgba(20, 18, 40, 0.35), 0 0 0 1px var(--th-line);
}
.th-banner-track {
  display: flex;
  transition: transform 0.55s cubic-bezier(0.3, 0.9, 0.3, 1);
}
.th-banner-slide {
  flex: 0 0 100%;
  display: block;
}
.th-banner-slide img {
  display: block;
  width: 100%;
  height: auto;
}
.th-banner-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 8px;
}
.th-banner-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: width 0.25s, background 0.25s;
}
.th-banner-dot.is-active {
  width: 28px;
  background: var(--th-yellow);
  box-shadow: 0 0 14px rgba(255, 209, 102, 0.6);
}

/* ============ animations ============ */
@keyframes th-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
@keyframes th-rise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes th-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes th-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes th-spin {
  to { transform: rotate(360deg); }
}

/* ============ responsive ============ */
@media (max-width: 1024px) {
  .th-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .th-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .th-section { padding: 64px 0 12px; }
  .th-reels-nav { display: none; }
}

/* ============================================================================
 * ABOUT PAGE — scoped to .ab-page
 * ============================================================================ */

/* ============================================================
   WONDER TOYS — About page
   Page-scoped playful theme (class prefix `ab-`), sharing the
   logo palette + Russo One display font used across the storefront.
   Loaded only by /about.
   ============================================================ */

/* The page is glass on top of the site's own backdrop. No page background of its own:
   the body's drifting ambient glow is the surface, and every panel here is a thin
   translucent sheet over it. That is the whole idea — the old build painted a cream
   sheet across the viewport and hid the thing it was supposed to sit on.

   No `overflow-x: hidden` either. It forces the other axis to `auto`, which turns this
   element into a scroll container — the same footgun that broke the homepage deck. */
.ab-page {
  --ab-ink: #f1f4fc;
  --ab-dim: rgba(232, 238, 251, .62);
  --ab-faint: rgba(232, 238, 251, .42);
  --ab-line: rgba(255, 255, 255, .09);
  --ab-panel: rgba(255, 255, 255, .035);
  --ab-panel-2: rgba(255, 255, 255, .055);
  --ab-orange: #ff6a2b;
  --ab-magenta: #ec1c8c;
  --ab-purple: #8a2b8f;
  --ab-blue: #23a9e0;
  --ab-yellow: #ffc21f;
  --ab-green: #22b562;
  --ab-grad: linear-gradient(96deg, #ee3d46 0%, #ec1c8c 42%, #8a2b8f 100%);
  color: var(--ab-ink);
  font-family: "Manrope", sans-serif;
  background: transparent;
}
.ab-wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 22px;
}
.ab-display {
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 0.98;
}
.ab-grad-text {
  background: var(--ab-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* A panel is a sheet of frosted glass — one recipe, reused, so the page reads as a
   single material rather than a stack of unrelated boxes. */
.ab-panel {
  background: var(--ab-panel);
  border: 1px solid var(--ab-line);
  border-radius: 20px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ---------- hero ---------- */
.ab-hero {
  position: relative;
  padding: clamp(56px, 8vw, 96px) 0 clamp(48px, 6vw, 72px);
  /* brand light bloomed into the backdrop, not a slab laid over it */
  background:
    radial-gradient(820px 360px at 12% 0%, rgba(255, 106, 43, .13), transparent 62%),
    radial-gradient(720px 340px at 88% 8%, rgba(35, 169, 224, .12), transparent 60%),
    radial-gradient(860px 400px at 50% 108%, rgba(236, 28, 140, .1), transparent 62%);
}
.ab-hero-inner { position: relative; z-index: 1; text-align: center; }
.ab-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--ab-line);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffb08a;
  margin-bottom: 18px;
}
.ab-hero-title {
  font-size: clamp(34px, 6vw, 70px);
  margin: 0 0 16px;
}
.ab-hero-sub {
  max-width: 660px;
  margin: 0 auto;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.75;
  color: var(--ab-dim);
}

/* ---------- stats ---------- */
.ab-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: clamp(36px, 5vw, 54px);
}
.ab-stat {
  padding: 22px 14px;
  text-align: center;
  transition: transform .22s cubic-bezier(.2, 1.4, .4, 1), border-color .22s, background .22s;
}
.ab-stat:hover {
  transform: translateY(-4px);
  background: var(--ab-panel-2);
  border-color: var(--stat-c, var(--ab-orange));
}
.ab-stat-num {
  font-family: "Russo One", sans-serif;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--stat-c, var(--ab-orange));
}
.ab-stat-num em { font-style: normal; font-size: 0.62em; }
.ab-stat-label {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ab-faint);
}

/* ---------- generic section ---------- */
.ab-section { padding: clamp(52px, 6.5vw, 84px) 0; }
.ab-head { max-width: 660px; margin-bottom: 34px; }
.ab-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.ab-label {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ab-magenta);
  margin: 0 0 8px;
}
.ab-title { font-size: clamp(26px, 3.6vw, 42px); margin: 0 0 12px; }
.ab-text { font-size: 15.5px; line-height: 1.85; color: var(--ab-dim); margin: 0 0 14px; }
.ab-text strong { color: var(--ab-ink); font-weight: 700; }

/* ---------- story ---------- */
.ab-story {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
/* No image uploaded in Admin — the aside is simply absent, so the prose shouldn't
   stretch across a column that was sized for two. */
.ab-story--solo { grid-template-columns: 1fr; max-width: 780px; }
.ab-story-img {
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  line-height: 0;
}
/* A bounce every time it arrives — InView toggles `is-in`, so scrolling away and back
   replays it. Transform only: the image is visible with or without the class, so a
   visitor with no JS just gets a still image. */
.ab-story-img.is-in { animation: ab-bounce .95s cubic-bezier(.3, .86, .4, 1) both; }
@keyframes ab-bounce {
  0%   { transform: translateY(14px); }
  32%  { transform: translateY(-11px); }
  56%  { transform: translateY(0); }
  74%  { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}
.ab-story-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- vision + commitment ---------- */
.ab-duo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.ab-duo-card { padding: clamp(24px, 3vw, 34px); }
.ab-duo-card h3 {
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: 20px;
  margin: 14px 0 10px;
  color: var(--ab-ink);
}
.ab-duo-card p { font-size: 15px; line-height: 1.8; color: var(--ab-dim); margin: 0; }
.ab-duo-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--duo-c, var(--ab-orange));
  box-shadow: 0 14px 28px -14px var(--duo-c, var(--ab-orange));
}
.ab-duo-icon svg { width: 22px; height: 22px; }

/* ---------- what we make (icon grid) ---------- */
.ab-makes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.ab-make {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
  background: var(--ab-panel);
  border: 1px solid var(--ab-line);
  transition: transform .22s cubic-bezier(.2, 1.4, .4, 1), border-color .22s, background .22s;
}
.ab-make:hover {
  transform: translateY(-4px);
  background: var(--ab-panel-2);
  border-color: var(--mk-c, var(--ab-orange));
}
.ab-make-icon {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  color: var(--mk-c, var(--ab-orange));
  background: var(--mk-bg, rgba(255, 106, 43, .14));
  border: 1px solid var(--mk-c, rgba(255, 106, 43, .4));
}
.ab-make-icon svg { width: 27px; height: 27px; }
/* Both are spans, so they need `block` to stack — as inline they ran together on one
   line and the note's margin-top was silently doing nothing. */
.ab-make-name, .ab-make-note { display: block; }
.ab-make-name { font-size: 14.5px; font-weight: 800; color: var(--ab-ink); line-height: 1.3; }
.ab-make-note { font-size: 12.5px; color: var(--ab-faint); margin-top: 3px; }

/* ---------- quality + certifications ---------- */
.ab-quality {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
}
.ab-certs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.ab-cert {
  padding: 18px;
  border-radius: 16px;
  background: var(--ab-panel);
  border: 1px solid var(--ab-line);
  transition: border-color .22s, background .22s;
}
.ab-cert:hover { background: var(--ab-panel-2); border-color: var(--ab-green); }
.ab-cert-code {
  font-family: "Russo One", sans-serif;
  font-size: 15px;
  letter-spacing: .04em;
  color: var(--ab-ink);
}
.ab-cert-body { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.6; color: var(--ab-faint); }
.ab-cert-tick {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-bottom: 10px;
  color: #06120a;
  background: var(--ab-green);
}
.ab-cert-tick svg { width: 12px; height: 12px; }

/* ---------- promises ---------- */
.ab-promises {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.ab-promise { padding: 24px 20px; }
.ab-promise-badge {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  color: #fff;
  background: var(--pr-c, var(--ab-orange));
  box-shadow: 0 12px 26px -14px var(--pr-c, var(--ab-orange));
}
.ab-promise-badge svg { width: 21px; height: 21px; }
.ab-promise h3 { font-size: 15px; font-weight: 800; margin: 0 0 6px; color: var(--ab-ink); }
.ab-promise p { font-size: 13.5px; line-height: 1.7; color: var(--ab-dim); margin: 0; }

/* ---------- who we serve ---------- */
.ab-serve {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.ab-serve span {
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--ab-panel);
  border: 1px solid var(--ab-line);
  font-size: 14px;
  font-weight: 600;
  color: var(--ab-dim);
}
.ab-serve span b { color: var(--ab-ink); font-weight: 800; }

/* ---------- contact strip ---------- */
.ab-contact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 30px;
}
.ab-contact-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 20px;
}
.ab-contact-item svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--ab-orange); margin-top: 2px; }
.ab-contact-item h4 { margin: 0 0 3px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ab-faint); }
.ab-contact-item p, .ab-contact-item a { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ab-ink); font-weight: 600; text-decoration: none; }
.ab-contact-item a:hover { color: var(--ab-orange); }

/* ---------- CTA ---------- */
.ab-cta {
  text-align: center;
  padding: clamp(52px, 6.5vw, 80px) 22px clamp(64px, 8vw, 96px);
  background: radial-gradient(700px 300px at 50% 0%, rgba(236, 28, 140, .12), transparent 64%);
}
.ab-cta h2 { font-size: clamp(28px, 4.2vw, 46px); margin: 0 0 10px; }
.ab-cta p { color: var(--ab-dim); font-size: 15.5px; margin: 0 0 26px; }
.ab-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.ab-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: transform .2s cubic-bezier(.2, 1.4, .4, 1), box-shadow .2s, border-color .2s, color .2s;
}
.ab-btn--primary {
  background: var(--ab-grad);
  color: #fff;
  box-shadow: 0 16px 34px -14px rgba(236, 28, 140, .85);
}
.ab-btn--ghost {
  background: rgba(255, 255, 255, .05);
  color: var(--ab-ink);
  border: 1px solid var(--ab-line);
}
.ab-btn:hover { transform: translateY(-2px); }
.ab-btn--primary:hover { box-shadow: 0 20px 42px -14px rgba(236, 28, 140, .95); }
.ab-btn--ghost:hover { border-color: var(--ab-orange); color: var(--ab-orange); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .ab-story { grid-template-columns: 1fr; }
  .ab-duo { grid-template-columns: 1fr; }
  .ab-quality { grid-template-columns: 1fr; }
  .ab-makes { grid-template-columns: repeat(2, 1fr); }
  .ab-promises { grid-template-columns: repeat(2, 1fr); }
  .ab-contact { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ab-stats { grid-template-columns: repeat(2, 1fr); }
  .ab-makes { grid-template-columns: 1fr; }
  .ab-promises { grid-template-columns: 1fr; }
  .ab-certs { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-stat, .ab-make, .ab-btn, .ab-cert { transition: none; }
  /* the image still shows — it just arrives without the hop */
  .ab-story-img.is-in { animation: none; }
}