/* =========================================================================
   Eric Emanuel Hoodie — Redesign
   Direction: DARK MODE PREMIUM
   Deep dark UI, product "glows", saturated accents, pill shapes,
   luminous dividers, fade-up motion. Mobile-first. System fonts (0 requests).
   ========================================================================= */

:root {
  /* Surfaces (deep dark) */
  --bg:        #0b0d12;   /* page base */
  --surface-1: #11141b;   /* cards / panels */
  --surface-2: #171b24;   /* raised */
  --surface-3: #1e232e;   /* hover / inputs */
  --line:      #262c38;   /* hairlines */
  --line-soft: #1b2029;

  /* Text (WCAG AA on dark) */
  --ink:       #f4f6fb;   /* primary text */
  --ink-2:     #c7cdda;   /* secondary */
  --muted:     #98a1b3;   /* muted (>=4.5:1 on --bg) */

  /* Accents — saturated, glow on dark */
  --accent:        #7c5cff;  /* electric violet (brand) */
  --accent-2:      #22d3ee;  /* cyan */
  --accent-ink:    #ffffff;
  --kentucky:      #3b82f6;
  --purp:          #a855f7;
  --teal:          #14b8a6;
  --pink:          #f472b6;

  --ok:        #34d399;
  --warn:      #fbbf24;
  --danger:    #fb7185;

  /* Glow */
  --glow-accent: 0 0 0 1px rgba(124,92,255,.35), 0 0 28px -6px rgba(124,92,255,.55);
  --glow-soft:   0 18px 50px -18px rgba(0,0,0,.8);
  --glow-card:   0 1px 0 0 rgba(255,255,255,.03) inset, 0 24px 60px -28px rgba(0,0,0,.9);

  /* Shape — pill accents */
  --r-pill: 999px;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;

  --container: 1180px;
  --pad: clamp(16px, 4vw, 28px);

  --shadow: 0 20px 50px -24px rgba(0,0,0,.85);
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(124,92,255,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(34,211,238,.07), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
h1, h2, h3, h4 { line-height: 1.2; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* ---------- Accessibility ---------- */
.skiplink, .skipLink {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skiplink:focus, .skipLink:focus {
  left: 14px; top: 14px; width: auto; height: auto; padding: 10px 14px;
  background: var(--accent); color: var(--accent-ink); border-radius: var(--r-sm); z-index: 9999;
}
:focus-visible {
  outline: 3px solid var(--accent-2);
  outline-offset: 2px;
  border-radius: 6px;
}
.srOnly, .visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.container { width: min(var(--container), 100% - (var(--pad) * 2)); margin-inline: auto; }

/* =========================================================================
   HEADER — centered logo, nav stripe below, sticky w/ glow border
   ========================================================================= */
.mast {
  position: sticky; top: 0; z-index: 100;
  background: rgba(11,13,18,.82);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(124,92,255,.18), 0 14px 40px -28px rgba(0,0,0,.9);
}
.barTop {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  width: min(var(--container), 100% - (var(--pad) * 2));
  margin-inline: auto;
  padding: 12px 0;
}
.menuToggle {
  grid-column: 1; justify-self: start;
  display: inline-grid; gap: 4px; place-content: center;
  width: 44px; height: 44px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); cursor: pointer;
}
.menuStripe { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; margin: 0 auto; }
.brand {
  grid-column: 2; justify-self: center;
  display: inline-flex; align-items: center; gap: 10px; color: var(--ink);
}
.brandMark {
  display: inline-grid; place-items: center; width: 38px; height: 38px;
  border-radius: 11px; font-weight: 900; letter-spacing: .5px; color: #fff;
  background: linear-gradient(135deg, var(--accent), #4f46e5);
  box-shadow: var(--glow-accent);
}
.brandMark--sm { width: 30px; height: 30px; font-size: 13px; }
.brandText { font-weight: 800; letter-spacing: .14em; font-size: 13px; text-transform: uppercase; white-space: nowrap; }
.announce {
  grid-column: 3; justify-self: end;
  font-size: 12px; color: var(--muted);
  max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.actions { grid-column: 3; justify-self: end; display: flex; gap: 8px; align-items: center; }
.barTop .announce + .actions,
.barTop .actions { grid-column: 3; }
/* keep announce + actions stacked on the right */
.barTop { grid-template-areas: "menu brand right"; }
.menuToggle { grid-area: menu; }
.brand { grid-area: brand; }
.actions { grid-area: right; justify-self: end; }
.announce { display: none; }
.miniBtn {
  width: 40px; height: 40px; display: inline-grid; place-items: center;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
  border-radius: var(--r-sm); cursor: pointer; font-weight: 700;
}
.miniBtn:hover { background: var(--surface-3); }

/* Nav stripe */
.navStripe { display: none; border-top: 1px solid var(--line-soft); background: rgba(17,20,27,.6); }
.navStripe.open, .navStripe.is-open, .navStripe.isOpen { display: block; }
.navRow {
  list-style: none; margin: 0;
  width: min(var(--container), 100% - (var(--pad) * 2));
  margin-inline: auto;
  padding: 8px 0; display: grid; gap: 6px;
}
.navRow > li { position: relative; }
.drop { position: relative; }
.dropBtn {
  width: 100%; text-align: left; cursor: pointer;
  padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-1); color: var(--ink); font-weight: 700;
}
.dropPanel {
  list-style: none; margin: 6px 0 0; padding: 8px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--glow-soft);
}
/* support all original toggle conventions */
.drop:not(.on):not(.open):not(.is-open):not(.isOpen) > .dropPanel,
.dropPanel[hidden] { display: none; }
.drop.on > .dropPanel,
.drop.open > .dropPanel,
.drop.is-open > .dropPanel,
.drop.isOpen > .dropPanel,
.dropBtn[aria-expanded="true"] + .dropPanel,
.dropPanel.show { display: block; }
.dropPanel a, .dropPanel li a { display: block; padding: 11px 12px; border-radius: var(--r-sm); color: var(--ink-2); }
.dropPanel a:hover { background: var(--surface-3); color: var(--ink); }

.grow { order: 99; }
.searchWrap { position: relative; display: flex; gap: 8px; align-items: center; }
.searchBox {
  flex: 1; min-width: 0; padding: 12px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface-1); color: var(--ink);
}
.searchBox::placeholder { color: var(--muted); }
.searchBtn {
  padding: 12px 18px; border-radius: var(--r-pill); cursor: pointer;
  border: 0; font-weight: 700; color: var(--accent-ink);
  background: linear-gradient(135deg, var(--accent), #4f46e5);
}
.suggestLayer {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 6px; box-shadow: var(--glow-soft); max-height: 320px; overflow: auto;
}
.suggestItem, .suggestLayer a, .suggestOpt, .sug {
  display: block; padding: 11px 12px; border-radius: var(--r-sm); color: var(--ink-2); cursor: pointer;
}
.suggestItem:hover, .suggestItem:focus, .suggestItem.isActive,
.suggestLayer a:hover, .suggestOpt:hover, .sug:hover { background: var(--surface-3); color: var(--ink); outline: none; }

/* Desktop header */
@media (min-width: 920px) {
  .menuToggle { display: none; }
  .navStripe { display: block; }
  .navRow {
    display: flex; align-items: center; gap: 10px; padding: 10px 0;
  }
  .drop > .dropBtn {
    width: auto; background: transparent; border: 1px solid transparent; padding: 10px 14px;
  }
  .drop > .dropBtn:hover { border-color: var(--line); background: var(--surface-1); }
  .dropPanel {
    position: absolute; top: calc(100% + 8px); left: 0; min-width: 230px; z-index: 50;
  }
  .grow { order: 0; margin-left: auto; flex: 1; max-width: 460px; }
  .announce { display: inline-block; }
}

/* =========================================================================
   BUTTONS / PILLS / BADGES
   ========================================================================= */
.cta, .btnPri, .btnSec, .btnPrimary, .btnGhost, .btn, .ctaAdd, .btnView, .sizeGuideBtn, .linkBtn {
  cursor: pointer;
}
.cta, .btnPri, .btnPrimary, .ctaAdd, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: var(--r-pill); border: 0;
  font-weight: 800; letter-spacing: .02em; color: var(--accent-ink);
  background: linear-gradient(135deg, var(--accent), #4f46e5);
  box-shadow: 0 10px 30px -12px rgba(124,92,255,.7);
  transition: transform .18s ease, box-shadow .18s ease;
}
.cta:hover, .btnPri:hover, .btnPrimary:hover, .ctaAdd:hover, .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -14px rgba(124,92,255,.85);
}
.ctaGhost, .btnSec, .btnGhost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface-1); color: var(--ink);
  font-weight: 700; transition: border-color .18s ease, background .18s ease;
}
.ctaGhost:hover, .btnSec:hover, .btnGhost:hover { border-color: var(--accent); background: var(--surface-2); }
.ctaPrimary { /* keep alias for index */ }

.tag, .pill, .badges li, .chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; padding: 7px 13px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2);
}
a.tag:hover, .chip:hover { border-color: var(--accent); color: var(--ink); }
.chip.is-active, .chip[aria-pressed="true"] {
  background: linear-gradient(135deg, rgba(124,92,255,.25), rgba(79,70,229,.18));
  border-color: var(--accent); color: var(--ink);
}
.badges { display: flex; gap: 8px; flex-wrap: wrap; padding: 0; margin: 0; list-style: none; }

.flag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; padding: 5px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2);
}
.flag.limited { color: var(--warn); border-color: rgba(251,191,36,.4); }
.flag.new, .flag.inStock, .stockPill, .status { color: var(--ok); border-color: rgba(52,211,153,.4); }
.flag.hot { color: var(--accent-2); border-color: rgba(34,211,238,.4); }
.flag.low { color: var(--danger); border-color: rgba(251,113,133,.4); }
.flag.auth, .authPill, .auth { color: var(--accent); border-color: rgba(124,92,255,.4); }

/* =========================================================================
   SECTIONS / HEADINGS — banded rhythm w/ luminous dividers
   ========================================================================= */
main { display: block; }
section { position: relative; }
.band {
  padding: clamp(40px, 7vw, 84px) 0;
}
.band--alt { background: linear-gradient(180deg, rgba(255,255,255,.015), transparent); }
.band + .band::before, .lumiDivider {
  content: ""; display: block; height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, rgba(124,92,255,.5), rgba(34,211,238,.4), transparent);
}

.eyebrow {
  display: inline-block; font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent-2); margin: 0 0 10px; font-weight: 700;
}
.h1, h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin: 0 0 12px; letter-spacing: -.02em; }
.h2Decor, .h2, h2.h2 {
  font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 14px; position: relative; padding-left: 16px; letter-spacing: -.01em;
}
.h2Decor::before, .h2.h2::before {
  content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 4px; border-radius: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
}
.h3Decor {
  font-size: 1.12rem; margin: 0 0 10px; position: relative; padding-left: 14px;
}
.h3Decor::before {
  content: ""; position: absolute; left: 0; top: .25em; bottom: .25em; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
}
.muted, .small { color: var(--muted); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.inView { opacity: 1; transform: none; }

/* =========================================================================
   HOME — HERO (split, glowing product, aurora gradient)
   ========================================================================= */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(36px, 7vw, 88px) 0;
}
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 120%;
  background:
    radial-gradient(600px 320px at 70% 30%, rgba(124,92,255,.28), transparent 60%),
    radial-gradient(500px 300px at 20% 70%, rgba(34,211,238,.18), transparent 60%);
  filter: blur(8px); z-index: 0; pointer-events: none;
  animation: aurora 14s ease-in-out infinite alternate;
}
@keyframes aurora {
  0% { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(2%, -2%, 0) scale(1.06); }
}
.heroGrid {
  position: relative; z-index: 1;
  display: grid; gap: clamp(24px, 5vw, 48px); align-items: center;
}
.heroCopy { max-width: 60ch; }
.headline { margin: 0 0 14px; }
.subhead { color: var(--ink-2); font-size: 1.1rem; margin: 0 0 22px; }
.ctaRow { display: flex; gap: 12px; flex-wrap: wrap; }
.heroCopy .badges { margin-top: 18px; }
.heroMedia { position: relative; }
.heroMedia .glowFrame {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--glow-card), var(--glow-accent);
}
.heroMedia img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.heroMedia::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); pointer-events: none;
  box-shadow: inset 0 0 80px -20px rgba(124,92,255,.4);
}
@media (min-width: 860px) {
  .heroGrid { grid-template-columns: 1.05fr .95fr; }
}

/* USP strip */
.uspStrip { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; padding: 18px 0 0; }
.uspStrip .pill strong { color: var(--ink); }

/* Content lead + author */
.contentWrap { display: grid; gap: 22px; }
.contentLead p { color: var(--ink-2); }
.authorCard, .aboutCard {
  display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: center;
  background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 16px; box-shadow: var(--glow-card);
}
.aboutCard { display: block; }
.avatar {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 900; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: var(--glow-accent);
}
.authorName { display: block; letter-spacing: .04em; }
.authorLink { color: var(--accent-2); text-decoration: underline; font-size: 14px; }
.authorNote { margin: 6px 0 0; color: var(--muted); font-size: 13px; }

/* =========================================================================
   CATALOG / PRODUCT GRID — glowing borderless cards, hover zoom + swap
   ========================================================================= */
.filterBar {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 22px;
  background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px;
}
.filterLabel { font-weight: 700; color: var(--ink-2); }
.chipRow { display: flex; gap: 8px; flex-wrap: wrap; }

.flexGrid-hoodies, .product-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(2, 1fr);
}
.cardlet {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--glow-card);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cardlet:hover {
  transform: translateY(-6px);
  border-color: rgba(124,92,255,.5);
  box-shadow: var(--glow-card), 0 0 40px -10px rgba(124,92,255,.5);
}
.imgWrap {
  position: relative; overflow: hidden; aspect-ratio: 1/1; background: var(--surface-2);
}
.imgWrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, opacity .4s ease; }
.imgWrap .hoverImg { position: absolute; inset: 0; opacity: 0; }
.cardlet:hover .imgWrap img { transform: scale(1.06); }
.cardlet:hover .imgWrap .hoverImg { opacity: 1; }
.cardBody { padding: 14px; display: grid; gap: 10px; }
.itemTitle { font-size: 14.5px; margin: 0; min-height: 38px; color: var(--ink); }
.meta { display: flex; justify-content: space-between; align-items: center; }
.price { font-weight: 900; font-size: 1.05rem; color: var(--ink); }
.cardBody .ctaRow { display: flex; gap: 10px; align-items: center; }
.btnView {
  display: inline-flex; padding: 10px 16px; border-radius: var(--r-pill); font-weight: 800; font-size: 13px;
  color: var(--accent-ink); background: linear-gradient(135deg, var(--accent), #4f46e5);
}
.btnWish {
  margin-left: auto; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); cursor: pointer;
}
.btnWish.wished { color: var(--danger); border-color: rgba(251,113,133,.5); }

/* =========================================================================
   PANELS / TABLES / SEO SLAB
   ========================================================================= */
.grid2 { display: grid; gap: 18px; }
.panel {
  background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(16px, 3vw, 26px); box-shadow: var(--glow-card);
}
.panel p, .seo-slab p, .policy p, .legal p { color: var(--ink-2); }
.seo-slab {
  display: block; font-size: 15px; color: var(--ink-2);
}
.seo-slab h2, .seo-slab h3 { color: var(--ink); margin-top: 1.4em; }

/* Generic tables */
table { width: 100%; border-collapse: collapse; }
.tableWrap, .tableScroll, .measureTableWrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); margin-top: 12px; }
caption { text-align: left; font-weight: 800; margin-bottom: 8px; color: var(--ink); }
th, td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; color: var(--ink-2); vertical-align: top; }
thead th { background: var(--surface-2); color: var(--ink); }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody tr:hover td { background: rgba(255,255,255,.02); }
.seo-slab table, .seoBlock table, .policy table { margin: 16px 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }

/* FAQ accordion (button-driven & details) */
.accordion { display: grid; gap: 10px; }
.accItem { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.accBtn {
  width: 100%; text-align: left; padding: 16px 46px 16px 16px; position: relative;
  background: transparent; border: 0; color: var(--ink); font-weight: 700; cursor: pointer;
}
.accBtn::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--accent-2); font-weight: 900; font-size: 1.2em; }
.accBtn[aria-expanded="true"]::after { content: "–"; }
.accPanel { padding: 0 16px 16px; color: var(--ink-2); }
.accPanel p { margin-top: 0; }

details {
  background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 2px 16px; margin: 0; overflow: hidden;
}
details + details, .acc + .acc, .accItem + .accItem, .qa, .faqItem { margin-top: 10px; }
summary {
  cursor: pointer; padding: 15px 0; font-weight: 700; color: var(--ink);
  list-style: none; position: relative;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 0; color: var(--accent-2); font-weight: 900; }
details[open] > summary::after { content: "–"; }
.accBody, .ans, .faqBody { padding: 0 0 16px; color: var(--ink-2); }
details .accBody, details .ans { padding-top: 0; }

/* CTA banner */
.ctaBanner .inner, .ctaBar .ctaWrap, .ctaWrap {
  background:
    radial-gradient(600px 200px at 50% 0%, rgba(124,92,255,.2), transparent 70%),
    var(--surface-1);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 4vw, 40px);
  text-align: center; box-shadow: var(--glow-card);
}
.ctaBanner .inner h3, .ctaBar h2 { margin-top: 0; }
.ctaBanner .inner p, .ctaBar p { color: var(--ink-2); }

/* =========================================================================
   PRODUCT DETAIL PAGE — gallery left, sticky glowing buy panel right
   ========================================================================= */
.crumbs { font-size: 13px; color: var(--muted); padding: 18px 0 6px; }
.crumbs ol { list-style: none; padding: 0; margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--accent-2); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--line); }

.prodTitle, .productTitle { font-size: clamp(1.5rem, 3.4vw, 2.4rem); margin: 6px 0 18px; }

.productWrap, .productGrid, .prodGrid { display: grid; gap: clamp(20px, 4vw, 36px); }

.gallery, .mediaCol {
  display: grid; gap: 12px; align-content: start;
}
.gallery .mediaMain, .gallery .heroImg, .mediaCol .heroImg, .heroImg {
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface-2);
  box-shadow: var(--glow-card);
  position: relative;
}
.gallery .mediaMain::after, .heroImg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: var(--r-lg);
  box-shadow: inset 0 0 70px -22px rgba(124,92,255,.45);
}
.mediaMain img, .heroImg img { width: 100%; display: block; }
.thumbRow { display: flex; gap: 10px; flex-wrap: wrap; }
.thumb {
  border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; padding: 3px;
  background: var(--surface-2); cursor: pointer; line-height: 0;
}
.thumb.is-active, .thumb[aria-selected="true"] { outline: 2px solid var(--accent); border-color: var(--accent); }
.thumb img { width: 76px; height: 76px; object-fit: cover; border-radius: 7px; }
.authRibbon {
  display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--ink-2);
  border: 1px solid var(--line); background: var(--surface-1); border-radius: var(--r-md); padding: 12px 14px;
}

.buyBox, .summary, .infoCol, .details {
  background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(16px, 3vw, 24px); box-shadow: var(--glow-card);
}
.flags, .labels, .metaRow { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.metaRow { justify-content: space-between; }
.shortDesc { color: var(--ink-2); margin: 12px 0 16px; max-width: 60ch; }
.priceRow, .priceWrap { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 10px 0 18px; }
.priceRow .price, .priceWrap .price, .summary .price, .infoCol .price, .details .price { font-size: 1.7rem; font-weight: 900; }
.shipNote { color: var(--ok); font-size: .9rem; background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.3); padding: 5px 12px; border-radius: var(--r-pill); }

.sizePicker, .sizeField, .sizes-wrap { border: 0; margin: 16px 0; padding: 0; }
.sizePicker legend, .sizeField legend, .sizes legend { font-weight: 800; margin-bottom: 10px; padding: 0; }
.sizeGrid, .sizeRow, .sizes { display: flex; flex-wrap: wrap; gap: 10px; }
.sizeGrid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); }
.sizeGrid input, .sizes input, .sizeRow input { position: absolute; opacity: 0; pointer-events: none; }
.sizeGrid label, .sizes label, .sizeBtn, .sizeOpt {
  display: inline-grid; place-items: center; min-width: 48px; min-height: 48px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink);
  cursor: pointer; user-select: none; font-weight: 700;
}
.sizeOpt { display: inline-flex; gap: 6px; align-items: center; }
.sizeGrid input:checked + label, .sizes input:checked + label,
.sizeBtn.is-selected, .sizeRow input:checked + .sizeBtn {
  background: linear-gradient(135deg, var(--accent), #4f46e5); color: #fff; border-color: var(--accent);
}
.sizeGuideBtn { margin-top: 12px; background: transparent; border: 0; color: var(--accent-2); text-decoration: underline; cursor: pointer; }
.sizeHint { font-size: .88rem; color: var(--muted); margin-top: 8px; }

.ctaAdd { width: 100%; margin-top: 8px; }
.ctaRow { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.btnGhost.btnGhost { flex: 0 0 auto; }
.protectLine { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); margin-top: 10px; }

.techSpec, .tech, .techBlock, .measureQuick, .measureWrap, .measurements, .measureBlock, .authBlock, .accBlock, .trustBlock, .tagsRow, .tags, .tagsWrap, .accordWrap, .accords, .accordions {
  margin: 18px 0 0;
}
.techSpec ul, .techList, .measureList { margin: 8px 0 0; padding-left: 18px; }
.techList { list-style: none; padding: 0; display: grid; gap: 8px; }
.techList li { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; }
.techList li strong, .measureList li strong { color: var(--ink); }
.authBlock { border-top: 1px dashed var(--line); padding-top: 16px; }
.trustBlock, .accCard {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--surface-2); border: 1px dashed var(--line); border-radius: var(--r-md); padding: 14px; margin: 14px 0;
}
.accText { color: var(--ink-2); margin: 4px 0 0; }
.tagsRow, .tagList { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; padding: 0; margin: 8px 0 0; }
.tags .tag, .tagList a, .tagsRow .tag { display: inline-block; }

/* Related */
.related, .relatedWrap { margin-top: clamp(36px, 6vw, 56px); }
.cardRow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; list-style: none; padding: 0; margin: 16px 0 0; }
.card {
  background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card:hover { transform: translateY(-4px); border-color: rgba(124,92,255,.45); box-shadow: 0 0 34px -12px rgba(124,92,255,.5); }
.cardLink, .card a { display: block; color: inherit; }
.card img { aspect-ratio: 1/1; object-fit: cover; width: 100%; background: var(--surface-2); }
.cardImg { aspect-ratio: 1/1; overflow: hidden; background: var(--surface-2); }
.cardImg img { width: 100%; height: 100%; object-fit: cover; }
.cardTitle, .cardMeta { display: block; padding: 12px 14px 0; }
.cardMeta { padding-top: 4px; padding-bottom: 14px; color: var(--muted); }
.cardRow .card .cardTitle { padding-bottom: 14px; }

.measureTable { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface-1); }
.measureTable .row { display: grid; grid-template-columns: 1fr 1.2fr 1.2fr; border-bottom: 1px solid var(--line); }
.measureTable .row:last-child { border-bottom: 0; }
.measureTable .row > div { padding: 12px 14px; color: var(--ink-2); }
.measureTable .row.head { background: var(--surface-2); font-weight: 700; color: var(--ink); }

/* Sku line */
.sku { color: var(--muted); font-size: .9rem; }
.metaRow .status, .metaRow .auth { display: inline-flex; gap: 6px; align-items: center; }
.ico { width: 16px; height: 16px; display: inline-block; }
.ico.check { border: 2px solid var(--ok); border-radius: 50%; }
.ico.shield { background: var(--accent); -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="%23fff" d="M12 2l7 3v6c0 5-3.5 9.74-7 11-3.5-1.26-7-6-7-11V5l7-3z"/></svg>') no-repeat center / contain; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="%23fff" d="M12 2l7 3v6c0 5-3.5 9.74-7 11-3.5-1.26-7-6-7-11V5l7-3z"/></svg>') no-repeat center / contain; }
.icShield::before { content: "🛡"; }
.icCheck::before { content: "✓"; color: var(--ok); }
.icLock::before { content: "🔒"; }
.icon.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); display: inline-block; }
.icon.shield { color: var(--accent); }
.formMsg { margin-top: 8px; font-size: .95rem; color: var(--ok); }
.formMsg.error, .formMsg.isErr { color: var(--danger); }
.formMsg.isOk { color: var(--ok); }

@media (min-width: 960px) {
  .productWrap, .productGrid, .prodGrid { grid-template-columns: 1.05fr .95fr; align-items: start; }
  .gallery, .mediaCol, .prodGrid .gallery { position: sticky; top: 96px; }
  .cardRow { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================================
   SEO BLOCK wrapper (product pages raw seo-block)
   ========================================================================= */
.seoBlock {
  background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(18px, 3vw, 30px); margin-top: clamp(30px, 5vw, 50px); box-shadow: var(--glow-card);
}
.seoBlock h2, .seoBlock h3, .seoBlock h4 { color: var(--ink); }
.seoBlock h2 { margin-top: 1.5em; }
.seoBlock h2:first-child { margin-top: 0; }
.seoBlock p, .seoBlock li { color: var(--ink-2); }
.seoBlock a { color: var(--accent-2); text-decoration: underline; }

/* =========================================================================
   ABOUT page specifics
   ========================================================================= */
.aboutGrid, .featureSplit, .careAuth, .promiseRow { display: grid; gap: 20px; }
.splitCol, .promiseCol, .infoCard, .noteBox {
  background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(16px, 3vw, 24px); box-shadow: var(--glow-card);
}
.noteBox { border-style: dashed; }
.pillList { display: flex; gap: 8px; flex-wrap: wrap; padding: 0; margin: 14px 0 0; list-style: none; }
.pillList li { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 7px 13px; font-size: .9rem; color: var(--ink-2); }
.statRow, .sizeGuide, .stepList { display: grid; gap: 10px; margin-top: 12px; }
.statRow { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.stat, .sizeGuide > div, .stepList li {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px;
}
.stat strong, .sizeGuide strong { display: block; color: var(--ink); }
.stat span, .sizeGuide span { color: var(--muted); font-size: .9rem; }
.checkList, .iconList { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.checkList li { padding-left: 26px; position: relative; color: var(--ink-2); }
.checkList li::before { content: "✓"; position: absolute; left: 4px; color: var(--accent-2); font-weight: 800; }
.iconList li { display: flex; gap: 12px; align-items: flex-start; }
.iconList strong { color: var(--ink); }
.iconList p { margin: 4px 0 0; color: var(--ink-2); }
.stepNum {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-weight: 800; margin-right: 10px;
  box-shadow: var(--glow-accent);
}
.cardGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; list-style: none; padding: 0; margin: 16px 0 0; }
.cardGrid .card img { aspect-ratio: 4/3; }
.cardGrid .cardBody { padding: 12px 14px 16px; }
.btnRow { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.heroCtas { display: flex; gap: 12px; flex-wrap: wrap; }
.heroText { max-width: 70ch; }
.heroLead { color: var(--ink-2); }
.sectionPad { padding: clamp(28px, 5vw, 56px) 0; }
.sectionAlt { background: linear-gradient(180deg, rgba(255,255,255,.015), transparent); }

@media (min-width: 880px) {
  .aboutGrid { grid-template-columns: 1.2fr .8fr; align-items: start; }
  .featureSplit, .careAuth, .promiseRow { grid-template-columns: 1fr 1fr; }
  .cardGrid { grid-template-columns: repeat(4, 1fr); }
  .stepList { grid-template-columns: repeat(3, 1fr); }
  .sizeGuide { grid-template-columns: repeat(3, 1fr); }
  .ctaWrap { display: flex; align-items: center; justify-content: space-between; text-align: left; }
}

/* =========================================================================
   CONTACT page specifics
   ========================================================================= */
.hero--contact .heroInner, .heroInner { max-width: var(--container); }
.contactGrid { display: grid; gap: 20px; margin-top: 8px; }
.contactInfo, .contactFormWrap { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(16px, 3vw, 24px); box-shadow: var(--glow-card); }
.infoCard + .infoCard { margin-top: 18px; }
.h2Decor.h2Decor, .h3Decor.h3Decor { color: var(--ink); }
.contactList { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.contactList li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; }
.contactList strong { color: var(--ink); }
.contactList .icon { font-size: 20px; }
.linkGrid { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.linkGrid a, .contactList a { color: var(--accent-2); }
.note, .fine { color: var(--muted); font-size: 14px; }
.linkBtn { background: transparent; border: 0; color: var(--accent-2); text-decoration: underline; padding: 0; cursor: pointer; }
.copyNote { margin-left: 8px; font-size: 12px; color: var(--ok); }
.contactForm { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
label { font-weight: 600; font-size: 14px; color: var(--ink-2); }
input[type="text"], input[type="email"], input[type="number"], input[type="search"], select, textarea {
  width: 100%; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
  padding: 12px 14px; border-radius: var(--r-sm); transition: border-color .2s ease, box-shadow .2s ease;
}
input::placeholder, textarea::placeholder { color: var(--muted); }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124,92,255,.25); }
.check { display: flex; gap: 8px; align-items: flex-start; font-weight: 500; }
.err { color: var(--danger); font-size: 12px; min-height: 16px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.actionsRow { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.badges li { color: var(--ink-2); }
.mapWrap { margin: 8px 0 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); }
.mapWrap iframe { width: 100%; height: 360px; display: block; border: 0; filter: invert(.9) hue-rotate(180deg) saturate(.8); }
.hero--contact { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-lg); margin-top: 8px; }
.hero--contact .heroInner { padding: clamp(22px, 4vw, 40px); }

@media (min-width: 860px) {
  .contactGrid { grid-template-columns: 1fr 1.15fr; align-items: start; }
}

/* =========================================================================
   POLICY / LEGAL pages (TOC + article)
   ========================================================================= */
.pageHero {
  background:
    radial-gradient(700px 240px at 0% 0%, rgba(124,92,255,.16), transparent 60%),
    var(--surface-1);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 4vw, 40px); margin-top: 8px;
}
.pageTitle { margin: 0 0 8px; }
.pageKicker, .lede, .sub { color: var(--ink-2); }
.meta { color: var(--muted); font-size: 13px; }
.contentWrap.contentWrap--policy { display: grid; gap: 24px; }
.toc {
  background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px;
  align-self: start;
}
.toc h2, .toc .h6, .hToc, .toc #tocTitle { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.toc ol, .toc ul { margin: 0; padding-left: 18px; }
.toc a { color: var(--ink-2); }
.toc a:hover { color: var(--accent-2); }
.policy, .legal { display: grid; gap: 16px; }
.policy h2, .legal-section h2 { margin: 1.4em 0 .4em; font-size: clamp(1.15rem, 2vw, 1.45rem); color: var(--ink); }
.policy h2:first-of-type { margin-top: 0; }
.policy h3 { margin-top: 1em; font-size: 1.05rem; color: var(--ink); }
.policy ul, .legal-section ul, .policy ol { padding-left: 20px; color: var(--ink-2); }
.policy address, .legal address { color: var(--ink-2); font-style: normal; }
.card.card { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-md); padding: clamp(16px, 3vw, 22px); }
.card h2 { margin-top: 0; }
.note {
  padding: 12px 14px; border-left: 3px solid var(--accent); background: rgba(124,92,255,.08); border-radius: var(--r-sm); color: var(--ink-2);
}
.formWrap { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 14px; }
.grid { display: grid; gap: 14px; }
.legal-section { padding: 18px 0; border-bottom: 1px solid var(--line); }
.legal-section:last-child { border-bottom: 0; }
.legal a, .policy a { color: var(--accent-2); text-decoration: underline; }

@media (min-width: 980px) {
  .contentWrap.contentWrap--policy { grid-template-columns: 280px 1fr; align-items: start; }
  .toc { position: sticky; top: 96px; }
  .grid { grid-template-columns: 1fr 1fr; }
}

/* Shipping page list (preserves raw-text "- ..." nodes) */
.list { list-style: none; padding-left: 4px; margin: 10px 0 18px; display: grid; gap: 8px; color: var(--ink-2); }
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 8px 0; }
.cards .card h3 { margin: 0 0 4px; }
.rateTable { min-width: 680px; }
.calc { display: grid; gap: 14px; }
.calcOut { margin-top: 12px; padding: 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); min-height: 20px; color: var(--ink-2); }
.prodRow { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.prodCard {
  display: grid; gap: 8px; border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; background: var(--surface-1); color: inherit;
  transition: transform .25s ease, border-color .25s ease;
}
.prodCard:hover { transform: translateY(-4px); border-color: rgba(124,92,255,.45); }
.prodName { font-weight: 700; font-size: 14px; color: var(--ink); }
@media (min-width: 760px) {
  .cards { grid-template-columns: repeat(4, 1fr); }
  .prodRow { grid-template-columns: repeat(4, 1fr); }
  .calc { grid-template-columns: repeat(4, 1fr); align-items: end; }
}

/* =========================================================================
   COOKIE BAR
   ========================================================================= */
.cookieBar {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1100;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px;
  box-shadow: var(--glow-soft); display: flex; flex-direction: column; gap: 12px;
}
.cookieBar p { margin: 0; color: var(--ink-2); }
.cookieActions { display: flex; gap: 10px; flex-wrap: wrap; }
.btnGhost.btn { background: transparent; color: var(--ink); }

/* =========================================================================
   FOOTER
   ========================================================================= */
.foot {
  margin-top: clamp(40px, 6vw, 72px);
  background: var(--surface-1);
  border-top: 1px solid var(--line);
  box-shadow: 0 -1px 0 rgba(124,92,255,.18);
}
.footGrid {
  width: min(var(--container), 100% - (var(--pad) * 2)); margin-inline: auto;
  display: grid; gap: 28px; padding: clamp(28px, 5vw, 48px) 0;
}
.brandRow { display: flex; align-items: center; gap: 10px; font-weight: 800; margin-bottom: 6px; }
.addr, .hours { color: var(--muted); font-style: normal; margin: 6px 0; }
.footCol p { color: var(--ink-2); }
.footCol a { color: var(--ink-2); }
.footCol a:hover { color: var(--accent-2); }
.payRow { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.payRow img { height: 26px; width: auto; border-radius: 5px; background: #fff; padding: 3px 5px; }
.linkList { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.footBase {
  border-top: 1px solid var(--line);
  width: min(var(--container), 100% - (var(--pad) * 2)); margin-inline: auto;
  padding: 16px 0; text-align: center; color: var(--muted);
}
.foot .h3Decor { color: var(--ink); }

@media (min-width: 880px) {
  .footGrid { grid-template-columns: 1.4fr .8fr .8fr; }
}

/* =========================================================================
   UTILITIES
   ========================================================================= */
.pageWrap, .wrap, .main { display: block; }
.noScroll, .navOpen { overflow: hidden; }
hr { border: 0; height: 1px; background: var(--line); margin: 24px 0; }