/* components.css — auto-generated from 81 original component CSS files.
   DO NOT EDIT MANUALLY. Rebuild from statewinsfinal/_components/.
   molecules/section-row is EXCLUDED (lives in page-creator.css scoped to .page-creator). */


/* === atoms/btn-primary/btn-primary.css === */
/* btn-primary — Primary CTA button.
   Background: color-lead (white in dark, black in light).
   Text: color-fore (opposite of lead).
   48px height, 8px radius, 100% width within parent (parent controls actual width).
   Hover/active = opacity tween. */

.btn-primary {
  display: block;
  width: 100%;
  height: 48px;
  padding: 12px;
  border: 0;
  margin: 0;
  border-radius: 8px;
  background-color: rgb(var(--color-lead));
  color: rgb(var(--color-fore));
  font-family: 'Nationale', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
  transition: opacity 0.18s ease;
}

.btn-primary:hover  { opacity: 0.92; }
.btn-primary:active { opacity: 0.86; }
.btn-primary:focus-visible {
  outline: 2px solid rgb(var(--color-main));
  outline-offset: 2px;
}
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* === atoms/btn-show-more/btn-show-more.css === */
/* btn-show-more atom — creators + states "Show more..." */
/* Mobile-first: full-width on mobile, fixed width on desktop */
.btn-show-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	min-height: 48px;
	padding: 11px 24px;
	border: 1px solid rgb(var(--color-line));
	background: rgb(var(--color-soft));
	border-radius: 48px;
	font-family: 'Nationale', sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 24px;
	color: rgb(var(--color-lead));
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
	transition: background 0.15s;
}

.btn-show-more:hover {
	background: rgb(var(--color-line));
}

/* Ghost variant — states page uses transparent bg + text-dark color in DARK mode only.
   Figma LIGHT mode states btn-show-more uses solid (#E2E8F0 soft + #000000 lead) like
   creators page — so light mode reverts to the base solid style. */
.btn-show-more--ghost {
	background: transparent;
	color: rgb(var(--color-text));
}
.btn-show-more--ghost:hover {
	background: rgb(var(--color-soft) / 0.5);
	color: rgb(var(--color-lead));
}
:root:not(.dark) .btn-show-more--ghost {
	background: rgb(var(--color-soft));
	color: rgb(var(--color-lead));
}
:root:not(.dark) .btn-show-more--ghost:hover {
	background: rgb(var(--color-line));
}

/* === atoms/btn-tag/btn-tag.css === */
/* btn-tag atom — card-leak tag row pills (Figma 563:1603 Frame 210) */
/* Mobile-first: same size at all breakpoints */
.btn-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 24px;
	padding: 0 8px;
	margin: 0 4px;
	background: rgb(var(--color-edge));
	color: rgb(var(--color-subs));
	border: 0;
	border-radius: 9999px;
	font-family: 'Nationale', sans-serif;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	letter-spacing: 0.2px;
}

.btn-tag:hover {
	background: rgb(var(--color-line));
	color: rgb(var(--color-lead));
}

/* === atoms/eye-toggle/eye-toggle.css === */
/* eye-toggle — Password reveal/hide button.
   20×20 square, absolutely positioned at right:0 top:2 inside a .field-input-wrap.
   Color follows currentColor (matches input text color via --color-text). */

.eye-toggle {
  position: absolute;
  right: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--color-text));
  cursor: pointer;
  transition: opacity 0.18s ease;
}

.eye-toggle:hover { opacity: 0.85; }
.eye-toggle svg   { width: 20px; height: 20px; display: block; }

.eye-toggle:focus-visible {
  outline: 2px solid rgb(var(--color-main));
  outline-offset: 2px;
}

/* === atoms/field-input/field-input.css === */
/* field-input — Form input element.
   Transparent, no border, 24px height, color tokens.
   Placeholder color uses --color-text at opacity 1 (not browser default 0.5). */

.field-input {
  display: block;
  width: 100%;
  height: 24px;
  min-height: 24px;
  max-height: 24px;
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  outline: none;
  box-sizing: border-box;
  font-family: 'Nationale', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: rgb(var(--color-text));
}

.field-input::placeholder {
  color: rgb(var(--color-text));
  opacity: 1;
}

/* Password modifier — reserve room for eye-toggle */
.field-input--password {
  padding-right: 32px;
}

/* Disable browser auto-fill background wash where possible */
.field-input:-webkit-autofill {
  -webkit-text-fill-color: rgb(var(--color-text));
  transition: background-color 5000s ease-in-out 0s;
}

/* === atoms/field-input-wrap/field-input-wrap.css === */
/* field-input-wrap — Input underline container.
   Provides the 2px underline + spacing context for the field-input atom.
   Position: relative for eye-toggle absolute positioning. */

.field-input-wrap {
  position: relative;
  margin-top: 4px;
  padding-top: 0;
  padding-bottom: 10px;
  border-bottom: 2px solid rgb(var(--color-line));
}

/* === atoms/field-label/field-label.css === */
/* field-label — Form field label.
   12/16 medium weight, color-subs token. Display:block so it sits above the input. */

.field-label {
  display: block;
  height: 16px;
  font-family: 'Nationale', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: rgb(var(--color-subs));
  margin: 0;
}

/* === atoms/field-textarea/field-textarea.css === */
/* field-textarea — Multi-line form input element.
   Mirrors `atoms/field-input` styling: transparent bg, no border,
   inherits font (Nationale), color tokens, placeholder uses color-text at opacity 1.
   Wrap in `field-input-wrap` for the 2px underline.

   Figma contact node 780:325 — frame 576×160, internal text "Leave us a message..."
   at y=20 within frame (matches 20px padding-top via the wrap pattern: label sits
   above + textarea fills remainder). We render the textarea at min-height 80px
   (4 lines × 20px line) and let the wrap provide the underline padding-bottom.

   No fixed height — let rows attribute drive initial size + resize:vertical for UX.
   Composers can override with min-height inline if they need exact Figma h. */

.field-textarea {
  display: block;
  width: 100%;
  min-height: 80px;
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  outline: none;
  box-sizing: border-box;
  font-family: 'Nationale', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: rgb(var(--color-text));
  resize: vertical;
}

.field-textarea::placeholder {
  color: rgb(var(--color-text));
  opacity: 1;
}

/* Variants */
.field-textarea--md  { min-height: 120px; }
.field-textarea--lg  { min-height: 160px; }

/* Match field-input autofill suppression */
.field-textarea:-webkit-autofill {
  -webkit-text-fill-color: rgb(var(--color-text));
  transition: background-color 5000s ease-in-out 0s;
}

/* === atoms/filter-chip/filter-chip.css === */
/* filter-chip atom — Figma 575:54 Frame 336 (leaks filter row, 19 chips)
   Three tiers per Framelink probe:
     - default (inactive):  bg=soft, text=subs
     - --active:            bg=lead, text=fore (currently selected filter)
     - --indicator:         bg=line, text=subs (overflow / minor filters)
*/
.filter-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding: 8px 16px;
	border-radius: 20px;
	border: 0;
	/* Figma dark fill_JZXWGA=#242A43 (line-dark) / light fill_PZUXHE=#E2E8F0 (soft-light).
	   Token-family mismatch across modes — default = line dark, light override below. */
	background: rgb(var(--color-line));
	color: rgb(var(--color-subs));
	font-family: 'Nationale', sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-sizing: border-box;
	flex-shrink: 0;
	transition: background 0.15s, color 0.15s;
}

:root:not(.dark) .filter-chip {
	background: rgb(var(--color-soft));
}

.filter-chip:hover {
	background: rgb(var(--color-edge));
}

:root:not(.dark) .filter-chip:hover {
	background: rgb(var(--color-line));
}

.filter-chip--active {
	background: rgb(var(--color-lead));
	color: rgb(var(--color-fore));
}

.filter-chip--active:hover {
	background: rgb(var(--color-lead));
}

/* Light-mode active override. ":root:not(.dark) .filter-chip" above has
   specificity (0,3,0) and beats the single-class ".filter-chip--active" (0,1,0),
   so in light mode the selected chip was getting --color-soft (light gray) with
   white text = invisible. Re-assert the active fill at matching specificity. */
:root:not(.dark) .filter-chip--active,
:root:not(.dark) .filter-chip--active:hover {
	background: rgb(var(--color-lead));
}

.filter-chip--indicator {
	background: rgb(var(--color-line));
	color: rgb(var(--color-subs));
}

/* Same specificity guard for the indicator tier in light mode. */
:root:not(.dark) .filter-chip--indicator {
	background: rgb(var(--color-line));
}

/* === atoms/input-wrap-woo/input-wrap-woo.css === */
/* input-wrap-woo — Woo-style filled input wrapper.

   Different from `field-input-wrap` (auth): auth uses transparent bg + 2px
   underline. Woo uses filled `mute` bg + 1px `line` border + 8px radius.

   Used by:
   - woo-login (email input, 384w × 48h)
   - woo-register (email + password inputs, 384w × 48h)
   - woo-cart coupon row (220w × 48h with `--sm` variant + 32px radius via `--pill`)

   Place a `<input class="field-input">` inside this wrapper. The wrapper owns
   the chrome (bg/border/radius/width/height); the input owns text styling.

   Figma reference:
   - 1619:3 (woo-login) Frame 482 / email-input-wrap
   - 1624:808 (woo-register) email + password wraps
   - 1484:2 (woo-cart) Frame 455 coupon (220×40 with rounded-32 pill)

   Tokens: --color-mute (filled bg), --color-line (default border),
           --color-soft (subtle border for coupon variant).
*/

.input-wrap-woo {
  display: flex;
  align-items: center;
  width: 100%;
  height: 48px;
  box-sizing: border-box;
  background-color: rgb(var(--color-mute));
  /* Figma woo-login fill_6OCDGJ=#1B1F31 dark / fill_YR0ML4=#E2E8F0 light = --color-soft (not line) */
  border: 1px solid rgb(var(--color-soft));
  border-radius: 8px;
  overflow: hidden;
}

/* `--pill` modifier: 32px radius, lighter (`soft`) border for cart coupon
   (Figma cart Frame 455: bg mute, 1px soft stroke, br 32). */
.input-wrap-woo--pill {
  border-radius: 32px;
  border-color: rgb(var(--color-soft));
}

/* `--220` modifier: fixed 220px width for cart coupon input. */
.input-wrap-woo--220 { width: 220px; }

/* `--384` modifier: fixed 384px width for login/register inputs. */
.input-wrap-woo--384 { width: 384px; }

/* `--40` modifier: 40px height (cart coupon is 40 tall per Figma Frame 455). */
.input-wrap-woo--40 { height: 40px; }

/* Inner input fills the wrapper so the entire visible area is clickable.
   Sizes the .field-input atom (which is 24h by default — auth pattern) up
   to the wrap height. Padding 0 16 matches Figma input spec.
   Overrides are scoped to inputs INSIDE this wrap (no global side effects). */
.input-wrap-woo .field-input {
  height: 100%;
  min-height: 0;
  max-height: none;
  padding: 0 16px;
  font-size: 16px;
  line-height: 24px;
}

/* Focus-within ring — surfaces input focus state on the wrapper. */
.input-wrap-woo:focus-within {
  border-color: rgb(var(--color-main));
}

/* Mobile fallback: fixed widths drop to 100% (max-width preserves the cap). */
@media (max-width: 1023px) {
  .input-wrap-woo--220,
  .input-wrap-woo--384 {
    width: 100%;
    max-width: 384px;
  }
}

/* === atoms/lang-switcher/lang-switcher.css === */
/* lang-switcher — Globe + English + chevron-down pill.
   122×36 widget. Inner button = full size pill with translucent bg.
   Light/dark each have their own black/white-alpha overlay backgrounds. */

.lang-switcher {
  width: 122px;
  height: 36px;
}

.lang-switcher__btn {
  width: 100%;
  height: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.05);
  color: rgb(var(--color-subs));
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: 'Nationale', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  transition: background-color 140ms ease;
  white-space: nowrap;
}

.lang-switcher__btn:hover  { background-color: rgba(0, 0, 0, 0.08); }
.dark .lang-switcher__btn  { background-color: rgba(255, 255, 255, 0.05); }
.dark .lang-switcher__btn:hover { background-color: rgba(255, 255, 255, 0.08); }

.lang-switcher__btn:focus-visible {
  outline: 2px solid rgb(var(--color-main));
  outline-offset: 2px;
}

.lang-switcher__text {
  flex: 1 1 auto;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
}

.lang-switcher__sym {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
}

.lang-switcher__sym--globe   { width: 20px; height: 20px; }
.lang-switcher__sym--chevron { width: 16px; height: 16px; }
.lang-switcher__sym svg      { display: block; }

/* === atoms/link-cyan/link-cyan.css === */
/* link-cyan — Inline cyan accent link.
   Used for sign-up / sign-in / feedback / terms links inside body copy.
   Font-weight inherited boost to 600, color-main, no underline (action-style). */

.link-cyan {
  font-weight: 600;
  color: rgb(var(--color-main));
  text-decoration: none;
  transition: opacity 0.18s ease;
}

.link-cyan:hover  { opacity: 0.85; }
.link-cyan:active { opacity: 0.75; }

.link-cyan:focus-visible {
  outline: 2px solid rgb(var(--color-main));
  outline-offset: 2px;
  border-radius: 2px;
}

/* === atoms/mode-toggle/mode-toggle.css === */
/* mode-toggle — Light/dark toggle button.
   Fixed top-right (16,16) viewport corner. 40×40 square with soft fill + line border.
   Sun visible in light mode, moon visible in dark mode (via html.dark class). */

.mode-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 100;
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(var(--color-line));
  background: rgb(var(--color-soft) / 0.6);
  color: rgb(var(--color-lead));
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  transition: background 140ms ease;
}

.mode-toggle:hover { background: rgb(var(--color-soft)); }

.mode-toggle:focus-visible {
  outline: 2px solid rgb(var(--color-main));
  outline-offset: 2px;
}

.mode-toggle svg { width: 20px; height: 20px; display: block; }

/* Icon visibility per mode */
.mode-toggle .icon-moon { display: none; }
.mode-toggle .icon-sun  { display: block; }
.dark .mode-toggle .icon-sun  { display: none; }
.dark .mode-toggle .icon-moon { display: block; }

/* === atoms/page-shell/page-shell.css === */
/* page-shell — Root layout primitive.
   1442 max-width centered, overflow-x hidden.
   Fixes wide-viewport drift bug (absolute children shell-relative kalır).
   Mobile fallback collapses to flex column.

   Mobile-first: mobile rules are the default, desktop rules wrap in
   @media (min-width: 1024px). This keeps the base selector at 1-class
   specificity at BOTH breakpoints so page-scoped overrides
   (.page-{slug} .page-shell — 2 classes) cleanly outrank without
   workarounds. */

.page-shell {
  position: relative;
  width: 100%;
  max-width: 1442px;
  margin: 0 auto;
  /* Mobile defaults: flow layout, padded, visible overflow */
  min-height: auto;
  display: flex;
  flex-direction: column;
  /* stretch (NOT center): in a column flex, align-items:center makes children
     size to their max-content width instead of filling the shell — that
     ballooned each page's *-main/-container to its desktop max-width (1232) on
     mobile, then overflow-x:clip hid the overflow (no scrollbar, but content
     rendered ~1232 wide and center-cropped on phones). stretch makes children
     fill the shell width; each page's *-container keeps its own max-width +
     margin:auto for centering. */
  align-items: stretch;
  padding: 0 16px 80px;
  overflow: visible;
}

/* Desktop (>= 1024px): FULL-BLEED shell.
   The Figma frame is 1440 = 1200 content + 120px gutter each side. On screens
   WIDER than 1440 the design has no reference, so background bands / header bar /
   footer bar / glows extend to the screen edges while the per-page *-container
   stays 1200 centered. Previously max-width:1442 + overflow:hidden capped the
   whole layout into a centered island → ~239px dead margins at 1920 ("squished
   in the middle, empty edges" — owner complaint #1). The 1440 render is
   unchanged (content still 1200 centered), so it stays pixel-identical to Figma.

   Validated on the home pilot; now applied at the shared atom so it cascades to
   all content/detail pages that wrap in .page-shell. */
@media (min-width: 1024px) {
  .page-shell {
    display: block;
    align-items: initial;
    padding: 0;
    max-width: none;     /* was 1442 — let bg/header/footer bands reach screen edges */
    overflow: visible;   /* was hidden — let glows bleed; html clips X (guard below) */
    /* min-height is set per-page in the page CSS */
  }

  /* AUTH EXCEPTION (A: login/register/reset): the 1442 frame IS the Figma auth
     design — the auth-card and glows are absolutely positioned against it. The
     global full-bleed change must NOT widen the auth canvas, so re-pin 1442. */
  .page-login .page-shell,
  .page-register .page-shell,
  .page-reset .page-shell {
    max-width: 1442px;
    margin: 0 auto;
    overflow: hidden;
  }
}

/* Horizontal-overflow guard for full-bleed decorations (glow SVGs are 1456px,
   wider than the viewport). `clip` (NOT `hidden`) prevents a horizontal
   scrollbar WITHOUT creating a scroll container — so position:sticky on the
   header still resolves against the viewport. One rule here covers every page
   that links page-shell.css. */
html { overflow-x: clip; }

/* === atoms/pill-count/pill-count.css === */
/* pill-count atom — Figma 763:173 (creators) + 807:2 (states) */
/* Mobile-first: same size at all breakpoints (small label pill) */
.pill-count {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 4px 12px;
	border: 1px solid rgb(var(--color-line));
	background: rgb(var(--color-line)); /* Figma fill_6V5JTB SOLID */
	border-radius: 20px;
	font-family: 'Nationale', sans-serif;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: -0.24px;
	color: rgb(var(--color-subs));
	font-weight: 600;
	flex-shrink: 0;
	white-space: nowrap;
}

.pill-count strong {
	font-weight: 700;
}

/* States variant: lighter line bg (Figma 807:2 uses translucent line) */
.pill-count--soft {
	background: rgb(var(--color-line) / 0.4);
}

/* === atoms/sales-badge/sales-badge.css === */
/* sales-badge atom — card-product floating sales count
   Figma 1657:1260 — 100×24 pill at top -8px above image */
.sales-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border: 1px solid rgb(var(--color-lead) / 0.6);
	background: rgba(53, 61, 97, 0.6); /* edge @ 0.6 alpha */
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-radius: 9999px;
	font-family: 'Nationale', sans-serif;
	font-size: 12px;
	line-height: 20px;
	color: rgb(var(--color-lead));
	white-space: nowrap;
}

.sales-badge__icon {
	font-size: 16px;
	flex-shrink: 0;
}

.sales-badge__text {
	margin: 0;
	font-weight: 500;
}

.sales-badge__text strong {
	font-weight: 700;
}

/* === atoms/section-row/section-row.css === */
/* section-row — h2 + see-all link. Used on home for every section header.
   Mobile-first: heading wraps if needed, link stays right.
   Figma node ref: home 407:1553 — heading 18px uppercase letter-spacing 0.11em line-height 36,
   color lead. Right link: 14px subs color, 36×36 arrow pill bg=soft. */

.section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  width: 100%;
}

.section-row__heading {
  font-family: 'Nationale', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 36px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgb(var(--color-lead));
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.section-row__heading-icon {
  width: 20px;
  height: 20px;
  background-color: rgb(var(--color-lead));
  flex-shrink: 0;
}

.section-row__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgb(var(--color-subs));
  text-decoration: none;
  font-family: 'Nationale', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  flex-shrink: 0;
  transition: color 0.15s;
}

.section-row__link:hover {
  color: rgb(var(--color-lead));
}

.section-row__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgb(var(--color-soft));
  color: rgb(var(--color-lead));
}

.section-row__arrow-icon {
  width: 16px;
  height: 16px;
  background-color: rgb(var(--color-lead));
}

/* No-link variant: heading only takes full width */
.section-row--no-link {
  justify-content: flex-start;
}

/* ── Carousel variant — Figma 741:1936 Creators (Frame 166 pattern):
   heading wrapped in link with chevron icon, right side = prev/dots/next controls. */
.section-row__heading-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.section-row__heading-link:hover .section-row__heading {
  color: rgb(var(--color-main));
}

.section-row__carousel-controls {
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}

.section-row__carousel-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  color: rgb(var(--color-lead));
  border-radius: 50%;
  transition: background 0.15s;
}
.section-row__carousel-btn:hover {
  background: rgb(var(--color-soft));
}
.section-row__carousel-btn-icon {
  width: 24px;
  height: 24px;
  background-color: rgb(var(--color-lead));
}

.section-row__carousel-dots {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
}
.section-row__carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--color-line));
  display: inline-block;
}
.section-row__carousel-dot.is-active {
  background: rgb(var(--color-lead));
}

/* Mobile fine-tune: smaller arrow pill */
@media (max-width: 480px) {
  .section-row__link-text {
    display: none; /* keep just the arrow pill on tiny screens */
  }
}

/* === atoms/terms-checkbox/terms-checkbox.css === */
/* terms-checkbox — Custom 20×20 checkbox.
   appearance:none → blank canvas, ::after draws checkmark when :checked.
   Color-main bg on checked, color-fore checkmark. */

.terms-checkbox {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  border-radius: 4px;
  /* Figma Rect 180: dark fill_CNIDW0=#242A43 / light fill_8CAZC8=#CBD5E1 = --color-line both modes
     (per woo-register/login mapping evidence — citations override the prior auth pilot claim). */
  background-color: rgb(var(--color-line));
  border: 1px solid rgb(var(--color-line));
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.terms-checkbox:checked {
  background-color: rgb(var(--color-main));
  border-color: rgb(var(--color-main));
}

.terms-checkbox:checked::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 6px;
  width: 6px;
  height: 10px;
  border: solid rgb(var(--color-fore));
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.terms-checkbox:focus-visible {
  outline: 2px solid rgb(var(--color-main));
  outline-offset: 2px;
}

/* === molecules/addon-card/addon-card.css === */
/* addon-card — single page side-panel option row (Figma 1745:139 / 140 / 149 / 158 / 179).
   Layout: chkbox (20×20) + body (title 16/24 + desc 14/20 + learn 14/20 main) + price (18/24).
   Mobile-first: full width container.

   Markup: <label class="addon-card"> wrapping a visually-hidden <input type="radio">
   for real form/keyboard semantics. Visual checked state via :has(:checked). */

.addon-card {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px;
	border-radius: 8px;
	background: transparent;
	font-family: 'Nationale', system-ui, sans-serif;
	box-sizing: border-box;
	cursor: pointer;
	transition: background-color 150ms ease;
}

.addon-card:hover {
	background: rgb(var(--color-lead) / 0.04);
}

/* Visually hide the radio but keep it in the tab order for keyboard a11y. */
.addon-card__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.addon-card__chkbox {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	border-radius: 4px;
	border: 1px solid rgb(var(--color-line));
	background: rgb(var(--color-body));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	transition: background-color 150ms ease, border-color 150ms ease;
}

/* Focus ring on the visual chkbox when the (hidden) radio is keyboard-focused. */
.addon-card__radio:focus-visible ~ .addon-card__chkbox {
	outline: 2px solid rgb(var(--color-main));
	outline-offset: 2px;
}

/* Checked state — uses :has() to style the parent label when its radio is checked. */
.addon-card:has(.addon-card__radio:checked) .addon-card__chkbox {
	background: rgb(var(--color-main));
	border-color: rgb(var(--color-main));
}

.addon-card:has(.addon-card__radio:checked) .addon-card__chkbox::after {
	content: '';
	width: 14px;
	height: 14px;
	background-color: rgb(var(--color-fore));
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / 14px 14px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / 14px 14px;
}

.addon-card__body {
	flex: 1;
	min-width: 0;
	display: block;
}

.addon-card__title {
	display: block;
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	color: rgb(var(--color-lead));
}

.addon-card__desc {
	display: block;
	margin: 4px 0 0 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: rgb(var(--color-text));
}

.addon-card__learn {
	display: inline-flex;
	align-items: center;
	margin-top: 8px;
	color: rgb(var(--color-main));
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-decoration: none;
}

.addon-card__learn:hover {
	text-decoration: underline;
}

.addon-card__price {
	flex-shrink: 0;
	color: rgb(var(--color-lead));
	font-size: 18px;
	font-weight: 600;
	line-height: 24px;
	padding-top: 2px;
}

/* ── Variant: empty (single-line "No Addon") ── */
.addon-card--empty {
	align-items: center;
	min-height: 48px;
}

.addon-card--empty .addon-card__title {
	color: rgb(var(--color-subs));
	font-weight: 500;
}

/* === molecules/breadcrumb-row/breadcrumb-row.css === */
/* breadcrumb-row — 4-cell order metadata bar.
   Each cell: label (Medium 12/16 text) + value (DemiBold 14/20 subs).

   Figma reference: woo-payment-v1 Frame 477 (1560:578) x=432 y=304 w=576 h=44.
   Same shape on woo-payment-v2 Frame 477 (1628:1583) at y=456.

   Mobile (≤767): collapses to 2×2 grid so words don't break ("Junary 5, 2026",
   "Cryptocurrency"). Per V1's responsive behaviour.
*/

.breadcrumb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 576px;
  box-sizing: border-box;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb-row__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.breadcrumb-row__label {
  font-family: 'Nationale', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: rgb(var(--color-text));
  margin: 0;
}

.breadcrumb-row__value {
  font-family: 'Nationale', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: rgb(var(--color-subs));
  margin: 0;
}

/* Mobile (≤1023): full width, drops fixed 576. */
@media (max-width: 1023px) {
  .breadcrumb-row {
    width: 100%;
    max-width: 576px;
  }
}

/* Mobile small (≤767): 2×2 grid (V1 behaviour). */
@media (max-width: 767px) {
  .breadcrumb-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    justify-content: stretch;
  }
}

/* === molecules/card-creator/card-creator.css === */
/* card-creator — creators list row (Figma 763:173 Frame 94)
   Mobile-first: stacked-friendly base; desktop = horizontal row with chevron.
   Total row height ~72px on desktop. */

.card-creator {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px;
	border: 1px solid rgb(var(--color-soft));
	border-radius: 12px;
	background: transparent;
	color: rgb(var(--color-lead));
	text-decoration: none;
	min-height: 72px;
	box-sizing: border-box;
	transition: border-color 0.15s, background 0.15s;
}

/* Hover state matches the --selected visual (Figma intent: selected = hover only).
   Per Wave 5d audit, no row should be hardcoded selected; the visual feedback for
   the active/focused row appears on pointer hover. */
.card-creator:hover,
.card-creator--selected {
	background: rgb(var(--color-soft));
	border-color: rgb(var(--color-soft));
}

.card-creator:hover .card-creator__chevron,
.card-creator--selected .card-creator__chevron {
	color: rgb(var(--color-main));
}

.card-creator__avatar {
	width: 56px;
	height: 56px;
	border-radius: 8px;
	object-fit: cover;
	flex-shrink: 0;
}

.card-creator__info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
	min-width: 0;
}

.card-creator__name {
	font-family: 'Nationale', sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 20px;
	color: rgb(var(--color-lead));
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.card-creator__chevron {
	font-size: 20px;
	color: rgb(var(--color-text));
	flex-shrink: 0;
}

/* Desktop: horizontal info layout (name + pill in same row) */
@media (min-width: 1024px) {
	.card-creator {
		gap: 16px;
		padding: 7px 15px 7px 7px;
	}

	.card-creator__info {
		flex-direction: row;
		align-items: center;
		gap: 16px;
	}
}

/* ─── STACKED VARIANT — used on /about/ (Figma 778:6354 Frame 94 — 282×172).
   Avatar centered top, name + pill centered below. NO chevron. */
.card-creator--stacked {
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
	padding: 24px 16px;
	min-height: 172px;
	text-align: center;
}

.card-creator--stacked .card-creator__avatar {
	width: 56px;
	height: 56px;
	/* About "Our Best Creators" avatar is a full circle in Figma
	   (778:6355 Rectangle 2, borderRadius 64px on a 56px box = circle),
	   unlike the 8px rounded square used on the creators list row. */
	border-radius: 50%;
}

.card-creator--stacked .card-creator__info {
	flex-direction: column;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	min-width: 0;
}

.card-creator--stacked .card-creator__name {
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	font-size: 16px;
	line-height: 20px;
}

.card-creator--stacked .card-creator__chevron {
	display: none;
}

/* Override desktop horizontal layout for stacked variant */
@media (min-width: 1024px) {
	.card-creator--stacked {
		flex-direction: column;
		gap: 16px;
		padding: 24px 16px;
	}

	.card-creator--stacked .card-creator__info {
		flex-direction: column;
		align-items: center;
		gap: 8px;
	}
}

/* === molecules/card-leak/card-leak.css === */
/* card-leak — high-blast-radius molecule (16+ instances on leaks, also single related,
   shop featured, store-home, home featured/recent/random).
   Figma 563:1603 (leaks page first card).
   Card width controlled by parent grid (typical 282px column).
   Image aspect 47:28 (282×168 natural).
   Mobile-first: base styles work at all widths since cards size to container. */

.card-leak {
	display: flex;
	flex-direction: column;
	position: relative;
	min-width: 0;
}

/* ── Body block: soft bg containing image + tags + stats ── */
.card-leak__body {
	position: relative;
	background: rgb(var(--color-soft));
	border-radius: 8px;
}

/* ── Image area ── */
.card-leak__media {
	position: relative;
	display: block;
	text-decoration: none;
	color: inherit;
}

.card-leak__thumb-wrap {
	margin: 0;
	border-radius: 8px;
	overflow: hidden;
}

.card-leak__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 47 / 28;
	object-fit: cover;
	transition: transform 0.5s;
}

.card-leak:hover .card-leak__thumb {
	transform: scale(1.1);
}

/* ── Title overlay on image bottom ── */
.card-leak__title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 0 12px;
	padding: 0 16px;
	font-family: 'Nationale', sans-serif;
	font-weight: 600;
	font-size: 18px;
	line-height: 24px;
	letter-spacing: -0.36px;
	color: rgb(var(--color-lead));
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	z-index: 2;
}

/* ── Gradient fade overlay (image bottom → soft) ──
   Figma 575:111 — same 282×168 dimensions as image, 8px all corners, fade transparent→soft.
   Wave 5h fix: image has HTML height="168" attribute which LOCKS image height regardless of width.
   Previously `aspect-ratio: 47/28` here caused gradient height to drift per card width (some cards
   wider via grid auto-sizing), producing inconsistent gap-or-overrun seam at image bottom.
   Solution: hard-pin gradient height to 168px to exactly match image. */
.card-leak__gradient {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 168px;
	background: linear-gradient(180deg, rgb(var(--color-soft) / 0) 30%, rgb(var(--color-soft)) 100%);
	border-radius: 8px;
	pointer-events: none;
	z-index: 1;
}

/* ── State badge: centered, pulled up over image top ── */
.card-leak__state-badge-wrap {
	position: absolute;
	top: -12px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	z-index: 5;
	pointer-events: none;
}

.card-leak__state-badge {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 12px 4px 4px;
	/* Always-dark glass bg (--color-edge stays dark via Figma intent: edge in light
	   mode = same #353d61 as dark). Text + border are hardcoded white because the
	   bg is dark in both modes — using --color-lead would render BLACK text on
	   DARK bg in light mode (unreadable). */
	background: rgba(53, 61, 97, 0.6);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgb(255 255 255 / 0.3);
	border-radius: 20px;
	color: rgb(255 255 255);
	font-family: 'Nationale', sans-serif;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	text-decoration: none;
	max-width: calc(100% - 32px);
}

.card-leak__state-flag {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.card-leak__state-name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ── Corner badge: top-right (PRO diamond / NEW pill) ── */
.card-leak__corner-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 4;
}

.card-leak__pro-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: rgb(var(--color-lead) / 0.2);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgb(var(--color-lead) / 0.3);
	border-radius: 50%;
	color: rgb(var(--color-lead));
	cursor: pointer;
	padding: 0;
}

.card-leak__pro-btn .icon-diamond-01 {
	font-size: 20px;
}

/* Default variant: no corner badge */
.card-leak:not(.card-leak--pro):not(.card-leak--new) .card-leak__corner-badge {
	display: none;
}

/* NEW variant — text pill instead of diamond */
.card-leak--new .card-leak__pro-btn {
	width: auto;
	height: auto;
	padding: 2px 8px;
	background: rgb(var(--color-main) / 0.2);
	border-color: rgb(var(--color-main) / 0.4);
	color: rgb(var(--color-main));
	border-radius: 9999px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.card-leak--new .card-leak__pro-btn .icon-diamond-01 {
	display: none;
}

.card-leak--new .card-leak__pro-btn .sr-only {
	position: static;
	width: auto;
	height: auto;
	clip: auto;
}

/* ── Body meta: tags + stats ── */
.card-leak__meta {
	padding: 8px 16px 16px;
	display: grid;
	gap: 12px;
	position: relative;
	z-index: 3;
}

.card-leak__tags {
	display: flex;
	justify-content: center;
	flex-wrap: nowrap;
	overflow-x: auto;
	white-space: nowrap;
	scrollbar-width: none;
	margin: 0 -16px;
	padding: 0 16px;
	min-height: 24px;
}

.card-leak__tags::-webkit-scrollbar { display: none; }

.card-leak__stats {
	display: flex;
	gap: 16px;
	justify-content: center;
	font-family: 'Nationale', sans-serif;
	font-size: 12px;
	font-weight: 600;
	/* card-leak stats are MODE-AWARE per Figma raw (creator page validation):
	   dark fill_VFEIFG=#94A3B8, light fill_0M52NC=#64748B = --color-text mapping.
	   (Home pilot incorrectly flagged as "always-muted" — corrected after creator audit.) */
	color: rgb(var(--color-text));
	line-height: 16px;
}

/* card-leak__stat composes with .icon-before from icons.css. Set local sizing. */
.card-leak__stat {
	font-size: 12px;
}

.card-leak__stat::before {
	width: 16px;
	height: 16px;
	opacity: 0.8;
}

/* ── Creator row (outside soft block) ──
   Figma: body bottom y=600, creator content (Frame 340) y=612 h=24. So 12px gap above, 0px below.
   Card visible total = body 244 + 12 gap + 24 content = 280px. */
.card-leak__creator-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 12px 0;
	/* Mode-aware --color-text per Figma raw (creator page validation):
	   dark fill_VFEIFG=#94A3B8, light fill_0M52NC=#64748B. */
	color: rgb(var(--color-text));
}

.card-leak__creator {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	font-family: 'Nationale', sans-serif;
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	color: rgb(var(--color-lead));
	text-decoration: none;
}

.card-leak__creator:hover {
	color: rgb(var(--color-main));
}

.card-leak__avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.card-leak__username {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.card-leak__engagement {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: 'Nationale', sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	flex-shrink: 0;
}

.card-leak__engagement-stat {
	font-size: 12px;
	gap: 2px;
}

.card-leak__engagement-stat::before {
	width: 16px;
	height: 16px;
	opacity: 0.6;
}

/* === molecules/card-mini/card-mini.css === */
/* card-mini — compact flag tile for home States + Countries sections.
   Different from card-state (dedicated states-page tile with pill-count).
   Mobile-first: small square that scales with parent grid column.
   Figma ref: home 407:1553 — States row at y=576, Countries row at y=1208. */

.card-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  background: rgb(var(--color-soft));
  border: 1px solid rgb(var(--color-line));
  border-radius: 8px;
  text-decoration: none;
  color: rgb(var(--color-lead));
  box-sizing: border-box;
  transition: background 0.2s, transform 0.15s;
  min-height: 124px;
}

.card-mini:hover {
  background: rgb(var(--color-line));
  transform: translateY(-2px);
}

.card-mini__flag {
  width: 80px;
  height: 80px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}

.card-mini__label {
  font-family: 'Nationale', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  color: rgb(var(--color-lead));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* "+ more" tile — no flag, centered label, mute bg (matches V1 .mini-card.more) */
.card-mini--more {
  background: rgb(var(--color-mute));
  border-color: rgb(var(--color-soft));
  color: rgb(var(--color-text));
}

.card-mini--more:hover {
  background: rgb(var(--color-soft));
}

.card-mini__more-label {
  font-family: 'Nationale', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  color: rgb(var(--color-text));
}

/* === molecules/card-product/card-product.css === */
/* card-product — shop + store-home product card (Figma 1657:1260).
   Card 282w. Image area 282×282 square. Card-bg only covers 370h portion (image + BM/stats);
   price/rating row floats below on body bg.
   Mobile-first: card sizes to container, max 282px. */

.card-product {
	position: relative;
	width: 100%;
	max-width: 282px;
	background: transparent;
	user-select: none;
}

/* Card bg — only covers top 370px (image + body upper). Price row sits below. */
.card-product::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 370px;
	background: rgb(var(--color-soft));
	border-radius: 8px;
	pointer-events: none;
	z-index: 0;
}

.card-product > * {
	position: relative;
	z-index: 1;
}

/* ── Sales badge: floats above image -8px.
   ALWAYS-DARK island (Figma: dark navy bg + white border + white text in BOTH modes).
   Previously used --color-lead for border+text → black-on-dark in light mode (unreadable). */
.card-product__sales-badge {
	position: absolute;
	top: -8px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 20;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border: 1px solid rgba(255, 255, 255, 0.6);
	background: rgba(53, 61, 97, 0.6);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-radius: 9999px;
	color: rgb(255, 255, 255);
	white-space: nowrap;
}

.card-product__sales-icon {
	font-size: 16px;
	flex-shrink: 0;
}

.card-product__sales-text {
	margin: 0;
	font-family: 'Nationale', sans-serif;
	font-weight: 500;
	font-size: 12px;
	line-height: 20px;
}

.card-product__sales-text strong {
	font-weight: 700;
}

/* ── Image area ── */
.card-product__image-wrap {
	position: relative;
	display: block;          /* <a> default inline'dı → aspect-ratio yok sayılıyordu; block ile kare kırpma çalışır */
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

.card-product__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.card-product__image-gradient {
	position: absolute;
	inset: 0;
	pointer-events: none;
	/* ALWAYS-DARK fade. Figma orijinali rgba(27,31,49,1) (opak body rengi) idi — ama
	   yoğun ürün foto-collage'larında resmin altını TAM body rengiyle kaplayınca başlık
	   "resmin dışında/body'de ayrı bir şerit" gibi görünüyordu. Near-black + hafif şeffaf
	   fade ile resim altta hafif görünür → başlık resme ENTEGRE, body-şeridi kaybolur.
	   Sade resimlerde de okunaklı kalır (üst %35 tamamen şeffaf, resim net). */
	background: linear-gradient(180deg, rgba(8, 9, 14, 0) 35%, rgba(8, 9, 14, 0.55) 70%, rgba(8, 9, 14, 0.92) 100%);
}

.card-product__title {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 0;
	margin: 0;
	font-family: 'Nationale', sans-serif;
	font-weight: 600;
	font-size: 20px;
	line-height: 28px;
	letter-spacing: -0.4px;
	/* Always white — sits on always-dark image fade (Figma white in BOTH modes). */
	color: rgb(255, 255, 255);
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55); /* yoğun resimlerde okunabilirlik */
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	z-index: 10;
}

/* ── Body ── */
.card-product__body {
	padding: 16px 16px 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.card-product__bm-row {
	display: flex;
	justify-content: center;
}

.card-product__bm {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 2px 8px;
	/* Mode-aware bg with TOKEN FAMILY confusion across modes per Figma raw:
	   dark = edge (#353D61), light = line (#CBD5E1 — NOT edge #A5B5C9).
	   Default = edge dark, light override below. */
	background: rgb(var(--color-edge));
	color: rgb(var(--color-subs));
	border-radius: 9999px;
	font-family: 'Nationale', sans-serif;
	font-size: 12px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: 0.5px;
}

:root:not(.dark) .card-product__bm {
	background: rgb(var(--color-line));
}

.card-product__stats {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 24px;
	white-space: nowrap;
}

.card-product__stat {
	display: flex;
	align-items: center;
	gap: 4px;
}

.card-product__stat-icon {
	font-size: 16px;
	color: rgb(var(--color-text));
	opacity: 0.8;
}

.card-product__stat-text {
	font-family: 'Nationale', sans-serif;
	font-weight: 600;
	font-size: 12px;
	line-height: 16px;
	/* Hardcoded #94A3B8 — Figma keeps stat text at this color in BOTH modes
	   (always-muted, same pattern as home card-leak stats). */
	color: #94A3B8;
}

/* ── Price + rating row (sits below the soft-bg block) ──
   Figma: card-bg ends y=666 (=296+370). Price-text "£849.99" at abs y=680 → 14 below bg.
   Card visible total: bg 370 + price-row content (28 height) + above-margin = ~405 down to ~412. */
.card-product__price-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 7px;
}

.card-product__price-group {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.card-product__price {
	font-family: 'Nationale', sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 28px;
	color: rgb(var(--color-lead));
}

.card-product__price-old {
	font-family: 'Nationale', sans-serif;
	font-weight: 600;
	font-size: 12px;
	line-height: 14px;
	color: rgb(var(--color-text));
	position: relative;
	display: inline-block;
}

.card-product__price-old::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%) rotate(-8deg);
	height: 1.5px;
	background-color: rgb(var(--color-text));
	border-radius: 1px;
}

.card-product__rating {
	display: flex;
	align-items: center;
	gap: 4px;
}

.card-product__rating-star {
	color: rgb(var(--color-warn));
	font-size: 14px;
}

.card-product__rating-num {
	font-family: 'Nationale', sans-serif;
	font-weight: 600;
	font-size: 12px;
	line-height: 16px;
	color: rgb(var(--color-lead));
}

.card-product__rating-count {
	font-family: 'Nationale', sans-serif;
	font-weight: 600;
	font-size: 12px;
	line-height: 16px;
	color: rgb(var(--color-text));
	text-transform: uppercase;
}

/* === molecules/card-state/card-state.css === */
/* card-state — state grid tile (Figma 807:2 — 120×140 tile, 9-col grid).
   Mobile-first: tile sizes scale with grid column; uses `data-state` for any per-state styling.
   Composer (state-grid section) controls grid columns and sizes. */

.card-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
	width: 100%;
	height: 140px;
	background: rgb(var(--color-soft));
	border-radius: 8px;
	text-decoration: none;
	color: rgb(var(--color-lead));
	box-sizing: border-box;
	transition: transform 0.15s, background 0.15s;
}

.card-state:hover {
	background: rgb(var(--color-line));
	transform: translateY(-2px);
}

.card-state__flag {
	width: 100px;
	height: 56px;
	border-radius: 4px;
	object-fit: cover;
	flex-shrink: 0;
}

.card-state__info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 0 8px 8px;
	min-width: 0;
	max-width: 100%;
}

.card-state__name {
	font-family: 'Nationale', sans-serif;
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	color: rgb(var(--color-lead));
	margin: 0;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/* === molecules/country-card/country-card.css === */
/* country-card — Figma node 6030:3 (home Countries row).
   Default: 116×140 vertical card (image 100×56 + name + "X Girls" pill badge).
   --wide:  189×72 horizontal card (Florida/Georgia overflow variant). */

.country-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 116px;
  height: 140px;
  padding: 8px;
  gap: 12px;
  border-radius: 8px;
  background-color: rgb(var(--color-soft));
  border-bottom: 1px solid rgb(var(--color-soft));
  text-decoration: none;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: background-color 200ms ease, transform 200ms ease;
}
.country-card:hover {
  background-color: rgb(var(--color-line));
  transform: translateY(-2px);
}

.country-card__image {
  display: block;
  width: 100px;
  height: 56px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}
.country-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.country-card__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 8px 8px;
  gap: 4px;
  min-width: 0;
}

.country-card__name {
  font-size: 14px;
  line-height: 20px;
  color: rgb(var(--color-lead));
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.country-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 12px;
  border-radius: 20px;
  background-color: rgb(var(--color-line));
  border: 1px solid rgb(var(--color-line));
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.02em;
  /* Figma badge text uses --color-subs (#475569 light / #CBD5E1 dark), not --color-text */
  color: rgb(var(--color-subs));
  flex-shrink: 0;
}
.country-card__badge-count {
  font-weight: 700;
}
.country-card__badge-label::before { content: " "; }

/* ── --wide variant (Florida/Georgia overflow) ───────────────────────── */
.country-card--wide {
  flex-direction: row;
  width: 189px;
  height: 72px;
  padding: 8px 16px 8px 8px;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
  background-color: rgb(var(--color-mute));
  border-bottom: 0;
  align-self: center; /* vertical-center inside 140h row (wide 72h vs vertical card 140h) */
}
.country-card--wide .country-card__text {
  padding: 0;
  align-items: flex-start;
  gap: 4px;
}
.country-card--wide .country-card__name {
  text-align: left;
}
.country-card--wide .country-card__badge {
  background-color: transparent;
  padding: 2px 8px;
  font-size: 10px;
}

/* Light mode (390:1600) — tokens adapt; verify pass for any hard overrides. */

/* === molecules/creator-chip/creator-chip.css === */
/* creator-chip — pill with avatar + creator name + Girls count.
   Distinct from card-creator (creators-page vertical row).
   Figma ref: home 407:1553 — Creators row at y=1936, Frame 95 chips h=72 (avatar 56×56,
   name + Girls count stacked vertical). */

.creator-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 24px 8px 8px;
  background: rgb(var(--color-soft));
  border-radius: 80px;
  text-decoration: none;
  color: rgb(var(--color-lead));
  font-family: 'Nationale', sans-serif;
  transition: background 0.15s;
  height: 72px;
  box-sizing: border-box;
}

.creator-chip:hover {
  background: rgb(var(--color-line));
}

.creator-chip__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.creator-chip__info {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.creator-chip__name {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: rgb(var(--color-lead));
  white-space: nowrap;
}

.creator-chip__girls {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: rgb(var(--color-line));
  border: 1px solid rgb(var(--color-line));
  border-radius: 999px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: rgb(var(--color-text));
  white-space: nowrap;
}

/* ── --overflow variant (Figma: end-of-row preview chips, darker bg, ghost badge) ── */
.creator-chip--overflow {
  background: rgb(var(--color-mute));
  border-bottom: 0;
}
.creator-chip--overflow .creator-chip__girls {
  background: transparent;
  border-color: rgb(var(--color-line));
  padding: 2px 8px;
  font-size: 10px;
}

/* "+ more" chip variant — mute bg, no avatar/info-stack, taller pill */
.creator-chip--more {
  background: rgb(var(--color-mute));
  padding: 8px 24px;
  color: rgb(var(--color-text));
}

.creator-chip--more:hover {
  background: rgb(var(--color-soft));
}

.creator-chip__more-label {
  font-size: 14px;
  font-weight: 600;
  color: rgb(var(--color-text));
}

/* === molecules/divider-h/divider-h.css === */
/* divider-h — Horizontal line with text overlay.
   Two 1px lines flanking a center text label.
   Position/size set by parent (auth-card on login). */

.divider-h {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Height ~20 to match line-height of text */
}

.divider-h__line {
  flex: 1 1 0;
  height: 1px;
  background-color: rgb(var(--color-line));
}

.divider-h__text {
  flex: 0 0 auto;
  font-family: 'Nationale', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: rgb(var(--color-text));
  white-space: nowrap;
}

/* === molecules/filter-chip-row/filter-chip-row.css === */
/* filter-chip-row — horizontal scrollable row with fade mask + overflow chevron CTA
   Figma 575:8 (leaks) — w=1172, h=44, contains 19 .filter-chip + right-end .cta-arrow
   Mobile-first: full-width container, scroll overflow, no max-width constraints. */

.filter-chip-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 4px 0;
}

.filter-chip-row__scroll {
	display: flex;
	align-items: center;
	gap: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	flex: 1 1 0;
	min-width: 0;
	padding-right: 80px; /* leaves room under mask */
}

.filter-chip-row__scroll::-webkit-scrollbar {
	display: none;
}

/* Fade mask on right edge of scrollable area, before the arrow CTA */
.filter-chip-row__mask {
	position: absolute;
	right: 44px; /* arrow w=36 + 8 gap */
	top: 0;
	bottom: 0;
	width: 64px;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		rgb(var(--color-body) / 0) 0%,
		rgb(var(--color-body)) 100%
	);
	z-index: 1;
}

/* Overflow CTA: links to /search.html for more filters */
.filter-chip-row__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 6px 0 6px 2px;
	border-radius: 36px;
	background: rgb(var(--color-soft));
	color: rgb(var(--color-lead));
	text-decoration: none;
	flex-shrink: 0;
	font-size: 20px;
	transition: background 0.15s;
}

.filter-chip-row__arrow:hover {
	background: rgb(var(--color-line));
}

/* === molecules/form-field/form-field.css === */
/* form-field — Form field row molecule.
   The .field-row class is the wrapper that the parent auth-card uses to
   position each row absolutely (e.g. left:48 width:384 top:132).
   This molecule itself sets only the inner layout; the auth-card or
   parent section sets position/width.

   Atoms used (CSS imported separately by the page):
     - field-label
     - field-input-wrap
     - field-input
     - eye-toggle (for --password variant)
     - link-cyan (for --has-link variant) */

.field-row {
  /* No position/size — set by parent (auth-card).
     Mobile fallback makes this position:relative width:100%. */
}

/* --has-link variant: label + link side-by-side in a flex head */
.field-row--has-link .field-row__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 16px;
}

.field-row__link {
  /* Inherits link-cyan styles; this rule just nudges alignment if needed */
  font-size: 12px;
  line-height: 16px;
  text-align: right;
}

/* === molecules/hero-cms/hero-cms.css === */
/* hero-cms — Corporate page hero (eyebrow + h1 + description).
   Mobile-first: full-width edge-padded, centered text.
   Desktop variants control max-width + alignment.

   Figma per-page geometry verified (Wave 7a):
   - contact (780:143/146/149): eyebrow x=426 y=184 w=576, h1 x=426 y=212 w=576/48h, desc x=426 y=268 w=576/28h
   - faq (780:484/485/486):     eyebrow x=426 y=184 w=576, h1 x=426 y=212 w=576/48h, desc x=426 y=268 w=576/28h
   - about (778:3330/...):      eyebrow x=426 y=184 w=588, h1 x=426 y=212 w=319/48h (intrinsic), desc x=426 y=268 w=588/140h
   - page (781:2302/2305/2308): eyebrow x=426 y=184 w=588, h1 x=426 y=212 w=226 (intrinsic)/48h, desc x=426 y=268 w=588/84h
   - transparency (837:143/146/149): eyebrow x=120 y=136 w=588, h1 x=120 y=164 w=343 (intrinsic)/48h, desc x=120 y=220 w=768/84h

   Center variant (default) = contact + faq.
   Left variant (588w) = about + page.
   Left-768 variant = transparency. */

.hero-cms {
  width: 100%;
  max-width: 576px;
  margin: 0 auto;
  box-sizing: border-box;
  text-align: center;
  padding: 0 16px;
}

.hero-cms__eyebrow {
  font-family: 'Nationale', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.10em;          /* 1.4px on 14px */
  text-transform: uppercase;
  color: rgb(var(--color-main));
  margin: 0 0 8px 0;
}

.hero-cms__title {
  font-family: 'Nationale', system-ui, sans-serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 36px;
  letter-spacing: -0.02em;
  color: rgb(var(--color-lead));
  margin: 0 0 8px 0;
}

.hero-cms__desc {
  font-family: 'Nationale', system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: rgb(var(--color-subs));
  margin: 0;
}

/* Left-aligned variant (about + page CMS) */
.hero-cms--left {
  text-align: left;
  max-width: 588px;
}

/* Left-aligned wider variant (transparency) */
.hero-cms--left-768 {
  text-align: left;
  max-width: 768px;
}

/* Desktop ≥1024: full Figma type sizes + remove edge padding */
@media (min-width: 1024px) {
  .hero-cms {
    padding: 0;
  }
  .hero-cms__title {
    font-size: 36px;
    line-height: 48px;
  }
  .hero-cms__desc {
    font-size: 18px;
    line-height: 28px;
  }
}

/* === molecules/order-item/order-item.css === */
/* order-item — small product line item: thumb + name + price.

   Used inside the `order-summary` card on woo-login / woo-checkout /
   woo-register, and in the `summary-downloads` card on woo-payment-v2
   (price-less variant). Item line is 48px tall with a 48×48 thumb.

   Figma reference: woo-checkout 1619:237 → Frame 487 thumb 64×64 (NOT 48 —
   checkout shows larger). woo-login matches register pattern. Default here is
   48 (login/register); --lg variant bumps to 64 (checkout).
*/

.order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

.order-item__left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.order-item__thumb {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 6px;
  object-fit: cover;
  background-color: rgb(var(--color-soft));
  display: block;
}

/* `--lg` modifier: 64×64 thumb for woo-checkout (Figma 1619:237 Frame 487). */
.order-item--lg .order-item__thumb {
  width: 64px;
  height: 64px;
  border-radius: 8px;
}

.order-item__name {
  font-family: 'Nationale', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: rgb(var(--color-lead));
  margin: 0;
  /* Truncate long names — keep price visible */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.order-item__price {
  font-family: 'Nationale', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: rgb(var(--color-lead));
  white-space: nowrap;
  flex-shrink: 0;
  margin: 0;
}

/* Variant: no price (woo-payment-v2 downloads card — just name) */
.order-item--name-only .order-item__price { display: none; }
.order-item--name-only .order-item__name {
  font-weight: 600;
}

/* === molecules/order-total-row/order-total-row.css === */
/* order-total-row — Total label + value row used inside order-summary card.

   Two visual variants:
   - default: no divider above (cart pattern — only one row in the card)
   - `--with-rule`: 1px soft top border + 24px top padding (login/checkout/
     register pattern — sits below the items list)

   Figma reference:
   - woo-cart 1619:254 → just Frame 465 with Total/£149.99
   - woo-login/register/checkout — order summary has items above, then
     border-top + padding-top before total row
*/

.order-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

.order-total-row--with-rule {
  margin-top: 24px;
  padding-top: 19px;
  border-top: 1px solid rgb(var(--color-soft));
}

.order-total-row__label,
.order-total-row__value {
  font-family: 'Nationale', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: rgb(var(--color-lead));
  margin: 0;
}

/* `--lg` modifier: 16/24 type (woo-cart uses larger 16px label, register 14px).
   woo-cart Figma 1619:265 shows DemiBold 16/24 — apply --lg for cart. */
.order-total-row--lg .order-total-row__label,
.order-total-row--lg .order-total-row__value {
  font-size: 16px;
  line-height: 24px;
}

.order-total-row__value {
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
}

/* === molecules/pagination-controls/pagination-controls.css === */
/* pagination-controls — leaks/search pagination row (Figma Frame 389 608:33).
   Tiers (per Framelink probe):
     • normal page chip: bg=soft, text=subs
     • --indicator (big-jump like "1235"): bg=line, text=lead
     • --current: bg=main, text=fore, 4px halo via box-shadow
     • chevron buttons: transparent, lead text
*/

.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 36px;
}

.pagination__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 8px;
	border-radius: 24px;
	background: transparent;
	color: rgb(var(--color-lead));
	border: 0;
	text-decoration: none;
	cursor: pointer;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	flex-shrink: 0;
	font-size: 20px;
}

.pagination__btn:hover {
	background: rgb(var(--color-soft));
}

.pagination__btn--prev .icon-chevron-right {
	transform: rotate(180deg);
	display: inline-block;
}

.pagination__pages {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'Nationale', sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
}

.pagination__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 8px 12px;
	border-radius: 24px;
	/* Figma dark fill_JZXWGA=#242A43 (line-dark) / light fill_PZUXHE=#E2E8F0 (soft-light).
	   Same token-family mismatch as filter-chip — default = line dark, light override below. */
	background: rgb(var(--color-line));
	color: rgb(var(--color-subs));
	text-decoration: none;
	border: 0;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	flex-shrink: 0;
	box-sizing: border-box;
}

:root:not(.dark) .pagination__page {
	background: rgb(var(--color-soft));
}

.pagination__page:hover:not(.pagination__page--current) {
	background: rgb(var(--color-edge));
}

:root:not(.dark) .pagination__page:hover:not(.pagination__page--current) {
	background: rgb(var(--color-line));
}

.pagination__page--indicator {
	/* Figma dark fill_FDYC2H=#353D61 (edge-dark) / light fill_XF9EBQ=#CBD5E1 (line-light). */
	background: rgb(var(--color-edge));
	color: rgb(var(--color-lead));
}

:root:not(.dark) .pagination__page--indicator {
	background: rgb(var(--color-line));
}

.pagination__page--current {
	/* Figma current pill (Frame 160) is a solid fill + 4px solid stroke of the same color, text in fore.
	   dark fill_FW2UBF=#FFFFFF + stroke #FFFFFF, text fill_PA83A4=#0B0E16 (= lead/fore dark).
	   light fill_XZ6PPD=#000000 + stroke #000000, text fill_2LA7VM=#FFFFFF (= lead/fore light).
	   Same mode-aware token both modes: lead = #000 light / #FFF dark — no light override needed. */
	background: rgb(var(--color-lead));
	color: rgb(var(--color-fore));
	min-width: 44px;
	box-shadow: 0 0 0 4px rgb(var(--color-lead));
}

/* Light-mode override: ":root:not(.dark) .pagination__page" above (0,3,0)
   outranks ".pagination__page--current" (0,1,0) and forced --color-soft (light
   gray) onto the selected page -> white text invisible. Re-assert --color-lead
   at matching specificity. (The note above missed this; same class of bug as
   filter-chip --active.) */
:root:not(.dark) .pagination__page--current {
	background: rgb(var(--color-lead));
}

.pagination__ellipsis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 8px 12px;
	border-radius: 24px;
	background: rgb(var(--color-soft));
	color: rgb(var(--color-subs));
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	flex-shrink: 0;
}

/* ── Summary text (composer renders below pagination) ── */
.pagination-summary {
	font-family: 'Nationale', sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: rgb(var(--color-text));
	text-align: center;
	margin: 16px 0 0;
}

.pagination-summary strong {
	/* Figma fill_NPNJOG=#94A3B8 (text) — entire summary same color, bold is weight-only */
	color: rgb(var(--color-text));
	font-weight: 700;
}

/* === molecules/progress-stepper/progress-stepper.css === */
/* progress-stepper — 3-step checkout progress indicator (Login / Checkout / Payment).

   Figma reference:
   - woo-login 1619:3 — Step 1 ACTIVE, both connectors INACTIVE
   - woo-checkout 1530:151 — Step 1 COMPLETE (connector1 ACTIVE white), Step 2 ACTIVE, connector2 INACTIVE
   - woo-payment-v1 1560:470 — Step 1+2 COMPLETE (both connectors ACTIVE white), Step 3 ACTIVE
   - Frame 463 — w=693, h=48 (checkout sizes); login uses smaller 32 circles per V1

   Circle sizes:
   - default: 32×32 (login + payment-v1)
   - `--lg`: 48×48 (checkout — per Figma Frame 463: 48×48 circles + 20/28 label)

   State machine: each step is `--active` | `--complete` | `--inactive`.
   Each connector is `--active` (white/lead) or `--inactive` (line/gray).

   Active + Complete render identically (filled lead bg, fore icon). The
   semantic distinction matters for `aria-current="step"` on active only.
*/

.progress-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.progress-stepper__step {
  display: flex;
  align-items: center;
  gap: 12px;
}
.progress-stepper--lg .progress-stepper__step {
  gap: 16px; /* checkout per Figma Frame 459: label x=64 - circle 48 = 16 gap */
}

.progress-stepper__circle {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}
.progress-stepper--lg .progress-stepper__circle {
  width: 48px;
  height: 48px;
}

.progress-stepper__step--active .progress-stepper__circle,
.progress-stepper__step--complete .progress-stepper__circle {
  background-color: rgb(var(--color-lead));
  color: rgb(var(--color-fore));
}
.progress-stepper__step--inactive .progress-stepper__circle {
  background-color: transparent;
  border: 1px solid rgb(var(--color-line));
  color: rgb(var(--color-text));
}

/* Icon inside circle inherits currentColor */
.progress-stepper__circle svg {
  display: block;
  stroke: currentColor;
  fill: none;
}

.progress-stepper__label {
  font-family: 'Nationale', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  margin: 0;
}
.progress-stepper--lg .progress-stepper__label {
  font-size: 20px;
  line-height: 28px;
}
.progress-stepper__step--active .progress-stepper__label,
.progress-stepper__step--complete .progress-stepper__label {
  color: rgb(var(--color-lead));
  font-weight: 600;
}
.progress-stepper__step--inactive .progress-stepper__label {
  color: rgb(var(--color-text));
}

.progress-stepper__connector {
  width: 120px;
  height: 2px;
  flex-shrink: 0;
  margin: 0 16px;
  border-radius: 1px;
}
.progress-stepper__connector--active   { background-color: rgb(var(--color-lead)); }
.progress-stepper__connector--inactive { background-color: rgb(var(--color-line)); }

/* Mobile (≤1023): allow wrap, shorter connectors */
@media (max-width: 1023px) {
  .progress-stepper {
    flex-wrap: wrap;
    gap: 8px;
  }
  .progress-stepper__connector {
    width: 48px;
    margin: 0 8px;
  }
}
@media (max-width: 479px) {
  .progress-stepper__connector {
    width: 24px;
    margin: 0 4px;
  }
  .progress-stepper--lg .progress-stepper__circle {
    width: 40px;
    height: 40px;
  }
  .progress-stepper--lg .progress-stepper__label {
    font-size: 16px;
    line-height: 24px;
  }
}

/* === molecules/qty-selector/qty-selector.css === */
/* qty-selector — quantity stepper with minus / value / plus.

   Figma: woo-cart Frame 489 at x=360 y=272 width=120 height=36.
   - minus: 36×36 button (soft bg, br 40, currentColor minus icon)
   - value: 36px wide text display (DemiBold 16/24 center, subs)
   - plus:  36×36 button (matches minus)
   - gap:   6px between elements

   Used by: woo-cart (single instance per cart-item).

   Accessibility: each button has aria-label; value uses <output> with
   aria-live="polite" so screen readers announce updates.
*/

.qty-selector {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.qty-selector__btn {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 40px;
  background-color: rgb(var(--color-soft));
  color: rgb(var(--color-subs));
  cursor: pointer;
  transition: opacity 0.15s ease;
  font: inherit;
}

.qty-selector__btn:hover  { opacity: 0.85; }
.qty-selector__btn:active { opacity: 0.65; }
.qty-selector__btn:focus-visible {
  outline: 2px solid rgb(var(--color-main));
  outline-offset: 2px;
}
.qty-selector__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Mask-image icons (so they follow the token color). The buttons themselves
   set background-color; the .qty-selector__icon span gets the mask. */
.qty-selector__icon {
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
.qty-selector__icon--minus {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7h10' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7h10' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.qty-selector__icon--plus {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7h10M7 2v10' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7h10M7 2v10' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

.qty-selector__value {
  width: 36px;
  flex-shrink: 0;
  display: inline-block;
  text-align: center;
  font-family: 'Nationale', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: rgb(var(--color-subs));
  margin: 0;
  padding: 0;
  font-variant-numeric: tabular-nums;
}

/* === molecules/request-item/request-item.css === */
/* request-item — Transparency report row: date pill (left) + body column (right).

   Figma node 837:2 — transparency section spec:
   - Each section is 768w max (matches hero width)
   - Inside: items in a 24-gap flex column
   - Each item: 2-col grid [153w date pill] + [1fr body], gap 0 (justify-self:start on date)
   - Date pill: 137w content, 32h, 8px 12px padding, 24br, 1px line border, color-text 12/16 weight-600
   - Body: gap 4 col, authority? 12/16 weight-600 text, action 18/28 weight-600 lead, verdict-row 6gap with 16×16 icon, description 12/16 weight-500 text

   Mobile-first: stack date pill + body in 1 column (date on top); 8px gap.
   Desktop ≥1024: 2-col grid [153w] [1fr], date pill aligned to left.
   Note: this molecule is page-context-aware — it expects to live inside a 768w (or smaller) section. */

.request-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: start;
  box-sizing: border-box;
}

.request-item__date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid rgb(var(--color-line));
  border-radius: 24px;
  font-family: 'Nationale', system-ui, sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: rgb(var(--color-text));
  height: fit-content;
  justify-self: start;
  box-sizing: border-box;
}

.request-item__date-icon {
  width: 16px;
  height: 16px;
  opacity: 0.6;
  flex-shrink: 0;
}

.request-item__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;          /* allow text to wrap inside grid cell */
}

.request-item__authority {
  font-family: 'Nationale', system-ui, sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: rgb(var(--color-text));
  margin: 0;
}

.request-item__action {
  font-family: 'Nationale', system-ui, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: rgb(var(--color-lead));
  margin: 0;
}

.request-item__verdict {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.request-item__verdict-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.request-item__verdict-text {
  font-family: 'Nationale', system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: rgb(var(--color-subs));
}

.request-item__verdict-text strong {
  font-weight: 700;
}

/* Verdict variants — icon color only (text remains subs) */
.request-item__verdict--denied  .request-item__verdict-icon { color: rgb(var(--color-text)); }
.request-item__verdict--removed .request-item__verdict-icon { color: rgb(var(--color-fire)); }
.request-item__verdict--ignored .request-item__verdict-icon { color: rgb(var(--color-warn)); }

.request-item__description {
  font-family: 'Nationale', system-ui, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: rgb(var(--color-text));
  margin: 0;
  white-space: pre-line;
}

/* Desktop ≥1024: 2-col grid (153w date pill + flexible body) */
@media (min-width: 1024px) {
  .request-item {
    grid-template-columns: 153px 1fr;
    gap: 0;
  }
}

/* === molecules/review-card/review-card.css === */
/* review-card — single customer review (Figma Frame 186/189/185/187/188 inside Frame 555 at 1626:1015 y=2004).
   Card: bg-mute (light) / bg-soft (dark), 1200×~200 (varies by body height), padding 24, border-radius 12.
   Inside: stars row 16/16 + body text 16/24 lead + reviewer row (48 avatar + name 16/24 lead + role 14/16 subs).
   Mobile-first: card sizes to container, single-column. */

.review-card {
	background: rgb(var(--color-mute));
	border-radius: 12px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	font-family: 'Nationale', system-ui, sans-serif;
	box-sizing: border-box;
}

.dark .review-card {
	background: rgb(var(--color-soft));
}

/* ── Stars row ── */
.review-card__stars {
	display: inline-flex;
	gap: 6px;
	color: rgb(var(--color-warn));
}

.review-card__star {
	width: 16px;
	height: 16px;
	font-size: 16px;
	flex-shrink: 0;
}

/* ── Body text ── */
.review-card__body {
	margin: 0;
	color: rgb(var(--color-lead));
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
}

/* ── Reviewer row ── */
.review-card__reviewer {
	display: flex;
	align-items: center;
	gap: 12px;
}

.review-card__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgb(var(--color-back));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: rgb(var(--color-subs));
}

.review-card__avatar .icon-user-01 {
	width: 24px;
	height: 24px;
	font-size: 24px;
}

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

.review-card__name {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	color: rgb(var(--color-lead));
}

.review-card__role {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 16px;
	color: rgb(var(--color-subs));
}

/* === molecules/search-bar-input/search-bar-input.css === */
/* search-bar-input — single-row search bar (Figma 778:1553 search page, 1200×64).
   Mobile-first: full-width, 56px height mobile, 64px desktop. */

.search-bar {
	display: block;
	width: 100%;
}

.search-bar__wrap {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	height: 56px;
	padding: 0 16px;
	background: rgb(var(--color-mute));
	/* Figma dark fill_LAOZMD=#1B1F31 / light fill_AGW86I=#E2E8F0 = --color-soft (not line) */
	border: 1px solid rgb(var(--color-soft));
	border-radius: 12px;
	box-sizing: border-box;
}

.search-bar__icon {
	font-size: 20px;
	color: rgb(var(--color-text));
	flex-shrink: 0;
}

.search-bar__input {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	outline: none;
	font-family: 'Nationale', sans-serif;
	font-size: 16px;
	line-height: 24px;
	color: rgb(var(--color-lead));
	-webkit-appearance: none;
	appearance: none;
}

.search-bar__input::placeholder {
	color: rgb(var(--color-text));
}

.search-bar__input::-webkit-search-cancel-button {
	display: none;
	-webkit-appearance: none;
}

.search-bar__clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background: transparent;
	border: 0;
	padding: 0;
	font-size: 20px;
	color: rgb(var(--color-text));
	cursor: pointer;
	flex-shrink: 0;
}

.search-bar__clear:hover {
	color: rgb(var(--color-lead));
}

@media (min-width: 1024px) {
	.search-bar__wrap {
		height: 48px;
		padding: 0 24px;
		gap: 16px;
	}

	.search-bar__icon {
		font-size: 24px;
	}
}

/* === molecules/signin-link/signin-link.css === */
/* signin-link — Bottom-of-form prompt + cyan link.
   Single-line centered text. Position/width set by parent (auth-card).
   The link itself uses .link-cyan (atom). */

.signin-link {
  margin: 0;
  padding: 12px 0;
  box-sizing: border-box;
  text-align: center;
  font-family: 'Nationale', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: rgb(var(--color-lead));
}

/* If embedded link uses generic .link-cyan it inherits cyan + 600. No further rules needed. */

/* === molecules/social-row/social-row.css === */
/* social-row — 3-button social login row.
   Row layout = flex with 16 gap, 384 width (controlled by parent),
   each button flex 1-1-0 (so they share width evenly).

   Discord SVG is 20×16 (not square) → button height 40 instead of 44 to
   center optically. Aligned with align-self flex-start so the row baseline
   sits at the top edge. */

.social-row {
  /* Position/size set by parent (auth-card section).
     Inside the card: top:472 left:48 width:384 height:44.
     This rule preserves only flex layout. */
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.social-pill {
  flex: 1 1 0;
  height: 44px;
  padding: 12px;
  border: 0;
  margin: 0;
  border-radius: 8px;
  background-color: rgb(var(--color-line));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Figma social icons #94A3B8 dark / #64748B light = --color-text (not subs) */
  color: rgb(var(--color-text));
  cursor: pointer;
  font: inherit;
  transition: opacity 0.18s ease;
}

.social-pill:hover { opacity: 0.85; }
.social-pill svg   { display: block; }

.social-pill:focus-visible {
  outline: 2px solid rgb(var(--color-main));
  outline-offset: 2px;
}

/* Discord SVG is 20×16 not square — button is 40h to center optically */
.social-pill--discord {
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  align-self: flex-start;
}
.social-pill--discord svg { width: 20px; height: 16px; }

/* === molecules/stat-card/stat-card.css === */
/* stat-card — dashboard stat tile.
   Figma ref: 1822:1707 — Rectangle 178/180/181/179 (209×140 each, 4-up row at y=136).
   Inner: 48×48 icon container (Rectangle 182/183/184/185) at top-left, label + value at bottom-left.
   Mobile-first: full width inside parent grid; parent stats-grid controls columns. */

.stat-card {
  background: rgb(var(--color-soft) / 0.5);
  border-radius: 8px;
  padding: 16px;
  height: 140px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.stat-card__icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: rgb(var(--color-soft));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-card__icon {
  /* Default: empty container (Figma 1:1 — no glyph rendered).
     Composer can add an icon class (e.g. icon-diamond-01) for --filled variant. */
  width: 24px;
  height: 24px;
  display: none;
}

.stat-card--filled .stat-card__icon {
  display: inline-block;
  background-color: rgb(var(--color-main));
}

.stat-card__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-card__label {
  margin: 0;
  font-family: 'Nationale', sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: rgb(var(--color-text));
}

.stat-card__value {
  margin: 0;
  font-family: 'Nationale', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: rgb(var(--color-lead));
}

/* === molecules/terms-row/terms-row.css === */
/* terms-row — Checkbox + label-with-link row.
   Flex container with 12px gap, checkbox top-aligned, text wraps.
   Position/size set by parent (auth-card). */

.terms-row {
  min-height: 48px;
  padding: 14px 0 12px;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.terms-row__text {
  flex: 1 1 auto;
  font-family: 'Nationale', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  /* Figma uses #CBD5E1 dark / #475569 light = --color-subs (not text) */
  color: rgb(var(--color-subs));
}

.terms-row__link {
  font-weight: 600;
  color: rgb(var(--color-lead));
  text-decoration: none;
  transition: opacity 0.18s ease;
}

.terms-row__link:hover  { opacity: 0.85; }
.terms-row__link:active { opacity: 0.75; }

.terms-row__link:focus-visible {
  outline: 2px solid rgb(var(--color-main));
  outline-offset: 2px;
  border-radius: 2px;
}

/* === sections/accordion-list/accordion-list.css === */
/* accordion-list — single page collapsible content list (Figma 1689:2191 Frame 536, y=1288, 1200×457).
   5 items × ~93px step. Border-bottom on each, top border on first.
   Summary uses native <details>/<summary> — no JS required.
   Mobile-first: full-width container. */

.accordion-list {
	width: 100%;
	font-family: 'Nationale', system-ui, sans-serif;
}

.accordion-list__item {
	border-bottom: 1px solid rgb(var(--color-line));
}

.accordion-list__item:first-child {
	border-top: 1px solid rgb(var(--color-line));
}

.accordion-list__summary {
	list-style: none;
	cursor: pointer;
	padding: 22px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.accordion-list__summary::-webkit-details-marker {
	display: none;
}

.accordion-list__title {
	font-size: 20px;
	font-weight: 600;
	line-height: 28px;
	color: rgb(var(--color-lead));
	letter-spacing: -0.4px;
}

@media (min-width: 768px) {
	.accordion-list__title {
		font-size: 24px;
		line-height: 32px;
		letter-spacing: -0.48px;
	}
}

.accordion-list__toggle {
	display: inline-block;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	background-color: rgb(var(--color-lead));
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") no-repeat center / 24px 24px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") no-repeat center / 24px 24px;
}

.accordion-list__item[open] .accordion-list__toggle {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") no-repeat center / 24px 24px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") no-repeat center / 24px 24px;
}

.accordion-list__body {
	padding: 0 0 22px;
	/* Figma uses --color-text (#94A3B8 dark / #64748B light), not --color-subs */
	color: rgb(var(--color-text));
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
}

.accordion-list__body p {
	margin: 0 0 12px;
}

.accordion-list__body p:last-child {
	margin-bottom: 0;
}

.accordion-list__link {
	color: rgb(var(--color-main));
	text-decoration: none;
	font-weight: 600;
}

.accordion-list__link:hover {
	text-decoration: underline;
}

/* === sections/account-sidebar/account-sidebar.css === */
/* account-sidebar — dashboard left rail (Figma 5977:63 Frame 159, 270w).
   No panel bg (per Figma — just per-item active bg).
   Mobile-first: hidden on mobile (composer handles via parent dashboard-layout); inline at desktop.
   Item height: 48px (V1 uses 40px height — going with Figma 48px from 5977:64). */

.account-sidebar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  width: 100%;
  list-style: none;
  margin: 0;
}

.account-sidebar__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  /* Figma fill_P1HJG2=#CBD5E1 (subs-dark), not text. Dashboard is dark-only. */
  color: rgb(var(--color-subs));
  text-decoration: none;
  font-family: 'Nationale', sans-serif;
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  height: 48px;
  box-sizing: border-box;
  transition: background 0.15s, color 0.15s;
}

.account-sidebar__icon {
  width: 24px;
  height: 24px;
  background-color: rgb(var(--color-text));
  flex-shrink: 0;
  display: inline-block;
  transition: background-color 0.15s;
}

.account-sidebar__label {
  flex: 1;
  min-width: 0;
}

.account-sidebar__item.is-active {
  background: rgb(var(--color-soft));
  color: rgb(var(--color-lead));
}

.account-sidebar__item.is-active .account-sidebar__icon {
  background-color: rgb(var(--color-main));
}

.account-sidebar__item:hover:not(.is-active) {
  background: rgb(var(--color-soft) / 0.4);
  color: rgb(var(--color-lead));
}

.account-sidebar__item:hover:not(.is-active) .account-sidebar__icon {
  background-color: rgb(var(--color-lead));
}

@media (min-width: 1024px) {
  .account-sidebar {
    width: 270px;
    flex-shrink: 0;
  }
}

/* === sections/addon-panel/addon-panel.css === */
/* addon-panel — single page right-column purchase block (Figma 1626:1015 x=936 y=244..1068, 384 wide).
   Contains: top price summary, 2 section headings, 5 addon-cards (inline copy of molecules/addon-card),
   total price row, full-width Add to cart CTA.
   Mobile-first: full-width column. At ≥1024 fixed 384 wide. */

.addon-panel {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 0;
	font-family: 'Nationale', system-ui, sans-serif;
	box-sizing: border-box;
}

@media (min-width: 1024px) {
	.addon-panel {
		width: 384px;
	}
}

/* ── Top price summary ── */
.addon-panel__top-price {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	justify-content: flex-end;
	width: 100%;
}

.addon-panel__price-now {
	font-weight: 600;
	font-size: 28px;
	line-height: 32px;
	color: rgb(var(--color-lead));
}

.addon-panel__price-old {
	position: relative;
	font-weight: 500;
	font-size: 22px;
	line-height: 32px;
	color: rgb(var(--color-text));
}

.addon-panel__price-old::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 2px;
	background: rgb(var(--color-text));
	transform: translateY(-50%) rotate(-8deg);
}

/* ── Section heading ── */
.addon-panel__section-h {
	margin: 36px 0 0 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 28px;
	color: rgb(var(--color-lead));
}

.addon-panel__section-h--first {
	margin-top: 28px;
}

@media (min-width: 1024px) {
	.addon-panel__section-h--first {
		margin-top: 0;
	}
}

/* ── Group wrapper (one per radiogroup section) ── */
.addon-panel__group {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* ── Inline addon-card (mirrors molecules/addon-card) — inline-copy pattern.
   Markup: <label> with visually-hidden <input type="radio"> for real form/keyboard.
   Visual checked state via :has(:checked). ── */
.addon-panel .addon-card {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px;
	margin-top: 24px;
	border-radius: 8px;
	/* Figma: unselected addon-card has NO fill (transparent) — only border. */
	background: transparent;
	border: 1px solid rgb(var(--color-line));
	box-sizing: border-box;
	cursor: pointer;
	transition: background-color 150ms ease, border-color 150ms ease;
}

.addon-panel .addon-card:hover {
	border-color: rgb(var(--color-main) / 0.4);
}

.addon-panel .addon-card:has(.addon-card__radio:checked) {
	border-color: rgb(var(--color-main));
	/* Figma: selected card uses soft (dark) / mute (light = white) solid fill, not cyan tint */
	background: rgb(var(--color-soft));
}

.addon-panel .addon-card--empty {
	background: transparent;
	border: 1px dashed rgb(var(--color-line) / 0.5);
	align-items: center;
	min-height: 48px;
}

.addon-panel .addon-card--empty:has(.addon-card__radio:checked) {
	border-style: solid;
	/* Figma: same solid soft (dark) / mute (light=white) fill as regular selected card */
	background: rgb(var(--color-soft));
}

/* Visually hide the radio but keep it in tab order. */
.addon-panel .addon-card__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.addon-panel .addon-card__chkbox {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	border-radius: 4px;
	border: 1px solid rgb(var(--color-line));
	background: rgb(var(--color-body));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	transition: background-color 150ms ease, border-color 150ms ease;
}

.addon-panel .addon-card__radio:focus-visible ~ .addon-card__chkbox {
	outline: 2px solid rgb(var(--color-main));
	outline-offset: 2px;
}

.addon-panel .addon-card:has(.addon-card__radio:checked) .addon-card__chkbox {
	background: rgb(var(--color-main));
	border-color: rgb(var(--color-main));
}

.addon-panel .addon-card:has(.addon-card__radio:checked) .addon-card__chkbox::after {
	content: '';
	width: 14px;
	height: 14px;
	background-color: rgb(var(--color-fore));
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / 14px 14px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / 14px 14px;
}

.addon-panel .addon-card__body {
	flex: 1;
	min-width: 0;
	display: block;
}

.addon-panel .addon-card__title {
	display: block;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: rgb(var(--color-lead));
}

.addon-panel .addon-card--empty .addon-card__title {
	color: rgb(var(--color-subs));
	font-weight: 500;
}

.addon-panel .addon-card__desc {
	display: block;
	margin: 4px 0 0 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: rgb(var(--color-text));
}

.addon-panel .addon-card__learn {
	display: inline-flex;
	align-items: center;
	margin-top: 8px;
	color: rgb(var(--color-main));
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-decoration: none;
}

.addon-panel .addon-card__learn:hover {
	text-decoration: underline;
}

.addon-panel .addon-card__price {
	flex-shrink: 0;
	color: rgb(var(--color-lead));
	font-size: 18px;
	font-weight: 600;
	line-height: 24px;
	padding-top: 2px;
}

/* ── Total price row ── */
.addon-panel__total {
	margin-top: 36px;
	display: flex;
	justify-content: flex-end;
}

.addon-panel__total-value {
	font-weight: 700;
	font-size: 28px;
	line-height: 32px;
	color: rgb(var(--color-lead));
}

/* ── Add to cart CTA ── */
.addon-panel__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 56px;
	padding: 12px 24px;
	border-radius: 8px;
	background: rgb(var(--color-lead));
	color: rgb(var(--color-fore));
	font-weight: 600;
	font-size: 16px;
	line-height: 24px;
	border: none;
	cursor: pointer;
	font-family: inherit;
	margin-top: 28px;
	box-sizing: border-box;
}

.addon-panel__cta:hover {
	opacity: 0.92;
}

/* === sections/age-gate-modal/age-gate-modal.css === */
/* age-gate-modal — strict adult-content gate modal.
   Figma node 722:2. Sizes / colors / spacing match Final/partials/age-gate.html.

   STRICT BEHAVIOR (CSS hard-coded display:flex bypasses framework conflicts):
   - Only `.age-gate.is-dismissed` hides the modal (via JS after Enter/Exit click).
   - No hover/focus dismiss paths.
   - Centered overlay, full viewport. */

.age-gate {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
}

.age-gate.is-dismissed { display: none; }

/* Backdrop — Figma Rectangle 185: bg-back opacity-80 (rgb 27 31 49 / 0.8) */
.age-gate__scrim {
  position: absolute;
  inset: 0;
  background-color: rgb(var(--color-back));
  opacity: 0.8;
}

/* Card — Figma Rectangle 177: bg-body, radius 8, 576×476 */
.age-gate__card {
  position: relative;
  z-index: 1;
  width: 576px;
  max-width: calc(100vw - 2rem);
  min-height: 476px;
  /* DARK-LOCKED surface in BOTH modes. Figma light frame (722:1640) keeps the
     gate card dark navy (white heading, dark Enter button) even while the home
     page BEHIND the scrim is light. Redefining the mode tokens to their dark
     values at the card scope makes every child (logo, heading, desc, buttons)
     resolve dark automatically — without touching their var() references, and
     this fixes both the standalone /age-gate/ page and the 17+ overlay uses. */
  --color-body: 14 17 27;
  --color-lead: 255 255 255;
  --color-subs: 203 213 225;
  --color-fore: 11 14 22;
  --color-line: 36 42 67;
  --color-main: 34 211 238;
  background-color: rgb(var(--color-body));
  border-radius: 8px;
  overflow: visible;
}

/* Glow layer — Figma Frame 54 (722:1634, 576x376 at card top, clipped via
   overflow:hidden so the top half of the ellipse stays hidden above the card edge). */
.age-gate__glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 376px;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
}

/* Ellipse 2 (722:1635, 576x96 at y=-48 inside Frame 54). Fill is linear-gradient
   (#60a5fa → #e879f9) with blur(128px). Rendered as a Figma-exported SVG with
   inline <feGaussianBlur stdDeviation=64> so blur is browser-consistent.

   Native SVG canvas is 832×352 (Figma added 128px bleed on each side to contain
   the blur spill). Original Figma node was 576×96 at y=-48, centered horizontally
   inside Frame 54. We recenter the SVG container around that same midpoint:
   top = -48 - (352-96)/2 = -176. Outer .age-gate__glow has overflow:hidden so the
   upper portion stays clipped above the card edge, matching Figma intent. */
.age-gate__glow-img {
  position: absolute;
  top: -176px;
  left: 50%;
  width: 832px;
  height: 352px;
  transform: translateX(-50%);
  display: block;
  pointer-events: none;
  background-image: url('../img/age-gate/age-gate-glow.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

/* Inner content — Figma derives:
   padding-top: 84  (logo y from card top)
   padding-x:   48  (480px buttons row centered in 576)
   padding-bottom: 48 */
.age-gate__inner {
  position: relative;
  z-index: 1;
  /* mobile-first base = former @max-width:480 value; desktop restored at @min-width:481 */
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Logo — Frame 398 (225×20). Uses SVG mask so color follows --color-lead. */
.age-gate__logo {
  width: 225px;
  height: 20px;
  margin-bottom: 48px;
  background-color: rgb(var(--color-lead));
  -webkit-mask-image: url('../img/auth/header-top-logo.svg');
  mask-image: url('../img/auth/header-top-logo.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Heading — 722:1618 */
.age-gate__heading {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: -0.48px;
  text-align: center;
  color: rgb(var(--color-lead));
  word-break: break-word;
}

/* Description — 722:1619 */
.age-gate__desc {
  margin: 0 0 24px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  color: rgb(var(--color-subs));
  word-break: break-word;
}

/* Buttons row — Frame 402 */
.age-gate__actions {
  display: flex;
  flex-direction: column; /* mobile-first base; row restored at @min-width:481 */
  gap: 16px;
  width: 100%;
  margin-bottom: 24px;
}

.age-gate__btn {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  white-space: normal; /* mobile-first base; nowrap restored at @min-width:481 */
  cursor: pointer;
  text-align: center;
}

/* Enter — 722:1620: bg-lead, color-fore (per Figma) */
.age-gate__btn--enter {
  background-color: rgb(var(--color-lead));
  color: rgb(var(--color-fore));
}

/* Exit — 722:1622: bg-line, color-subs (per Figma) */
.age-gate__btn--exit {
  background-color: rgb(var(--color-line));
  color: rgb(var(--color-subs));
}

/* Parental controls — 722:1625 */
.age-gate__parental {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  color: rgb(var(--color-subs));
}

.age-gate__parental-link {
  font-weight: 600;
  color: rgb(var(--color-main));
  text-decoration: none;
}

.age-gate__parental-link:hover { text-decoration: underline; }

/* sr-only inside modal (logo accessible label) */
.age-gate .sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Wider than mobile (>=481px) — restore desktop layout (mobile-first; Pitfall #5) */
@media (min-width: 481px) {
  .age-gate__inner   { padding: 84px 48px 48px; }
  .age-gate__actions { flex-direction: row; }
  .age-gate__btn     { white-space: nowrap; }
}

/* === sections/auth-card/auth-card.css === */
/* auth-card — Centered auth card with 4 size/content variants.

   Mobile-first: card collapses to flex column with stacked children (default).
   Desktop (>= 1024px): absolute-positioned inside .page-shell with per-variant
   size/offset.

   Desktop variants:
     - Login    480×564 at left=481, top=132
     - Register 480×604 at left=480, top=132
     - Reset    480×440 at left=480, top=132
     - Robot    576×608 at left=432, top=132 (captcha overflows below — page bumps min-height)

   Atoms/molecules used inside (CSS imported separately by the page):
     field-row (molecule), btn-primary (atom), signin-link (molecule),
     divider-h (molecule), social-row (molecule), terms-row (molecule),
     eye-toggle (atom inside password field), link-cyan (atom). */


/* ─── Common card frame (shared, non-positional) ─────────────────────── */
.auth-card {
  /* Mobile default: relative flex column */
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  max-width: 480px;
  height: auto;
  padding: 48px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-radius: 8px;
  background-color: rgb(var(--color-soft) / 0.5);
}

.auth-card--robot { max-width: 576px; }

.auth-card__title {
  /* Shared: typography + color */
  margin: 0;
  text-align: center;
  font-family: 'Nationale', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 36px;
  letter-spacing: -0.02em;
  color: rgb(var(--color-lead));
  /* Mobile default: flow */
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  width: 100%;
}


/* ─── VARIANT: --login — children flow on mobile ────────────────────── */
.auth-card--login .field-row,
.auth-card--login .btn-primary,
.auth-card--login .signin-link,
.auth-card--login .divider-h,
.auth-card--login .social-row {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  width: 100%;
}
.auth-card--login .field-row { padding: 0; }
.auth-card--login .signin-link { height: auto; padding: 0; }


/* ─── VARIANT: --register — children flow on mobile ────────────────── */
.auth-card--register .field-row,
.auth-card--register .terms-row,
.auth-card--register .btn-primary,
.auth-card--register .signin-link {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  width: 100%;
}
.auth-card--register .field-row { padding: 0; }
.auth-card--register .terms-row { min-height: 0; padding: 0; }
.auth-card--register .signin-link { height: auto; padding: 0; }


/* ─── VARIANT: --reset — shared text + mobile-flow children ────────── */
.auth-card--reset .auth-card__help {
  /* Shared: typography */
  margin: 0;
  font-family: 'Nationale', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: rgb(var(--color-text));
  /* Mobile default: flow */
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  width: 100%;
}
.auth-card--reset .auth-card__help-brand { font-weight: 600; }

.auth-card--reset .field-row,
.auth-card--reset .btn-primary,
.auth-card--reset .signin-link {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  width: 100%;
}
.auth-card--reset .field-row { padding: 0; }
.auth-card--reset .signin-link { height: auto; padding: 0; }


/* ─── VARIANT: --robot — shared text + mobile-flow children ─────────── */
.auth-card__title--robot {
  /* Robot's title is narrower + 20/28 (not 30/36).
     Text alignment inherits from .auth-card__title (centered). */
  font-size: 20px;
  line-height: 28px;
  /* Mobile default: flow; desktop sets width/left */
  width: 100%;
}

.auth-card--robot .auth-card__why,
.auth-card--robot .auth-card__intro,
.auth-card--robot .auth-card__feedback,
.auth-card--robot .auth-card__id {
  /* Shared: typography */
  margin: 0;
  font-family: 'Nationale', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: rgb(var(--color-subs));
  text-align: left;
  /* Mobile default: flow */
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  width: 100%;
}

.auth-card--robot .auth-card__reasons {
  /* Shared: list reset */
  margin: 0;
  /* Mobile default: native bullets, flow */
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  list-style: disc;
  padding: 0 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.auth-card--robot .auth-card__reasons li {
  font-family: 'Nationale', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: rgb(var(--color-subs));
  padding-left: 0;
}
.auth-card--robot .auth-card__reasons li::marker { color: rgb(var(--color-subs)); }

.auth-card__dot {
  /* Mobile default: hide absolute decorative dots; native list bullets are used instead */
  display: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--color-subs));
}

/* Captcha frame inside robot card.
   Shared: visual style.
   Desktop: absolute at card-rel (118, 656) — overflows card height by design.
   Mobile: flow + center. */
.auth-card__captcha {
  /* Shared */
  margin: 0;
  background-color: #D9D9D9;
  border-radius: 11px;
  overflow: hidden;
  /* Mobile default: flow + fluid. Cap at the 340px Figma width but shrink to fit
     narrow cards (375px viewport → card-inner ~303px) so the captcha never spills
     out of the auth-card. aspect-ratio keeps the shape; desktop re-pins 340×355. */
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 340 / 355;
  margin: 8px auto 0;
}
.auth-card__captcha-img {
  /* Sized in % of the frame (412/340, 396/355, -40/340, -21/355) so the same crop
     holds whether the frame is fluid (mobile) or the exact 340×355 (desktop). */
  position: absolute;
  top: -5.92%;
  left: -11.76%;
  width: 121.18%;
  max-width: none;
  height: 111.55%;
  object-fit: cover;
  display: block;
}
.auth-card__captcha-corner {
  position: absolute;
  width: 24px;
  height: 24px;
  background: #F7F7F7;
  border-top: 1px solid #DFDFDF;
  border-left: 1px solid #DFDFDF;
  border-radius: 10px 0 0 0;
  z-index: 1;
}
.auth-card__captcha-corner--tl { top: 1px; left: 1px; }
.auth-card__captcha-corner--tr { top: 1px; right: 1px; transform: scaleX(-1); }
.auth-card__captcha-corner--bl { bottom: 1px; left: 1px; transform: scaleY(-1); }
.auth-card__captcha-corner--br { bottom: 1px; right: 1px; transform: scale(-1, -1); }


/* ═══════════════════════════════════════════════════════════════════════
   DESKTOP (>= 1024px): absolute positioning everywhere
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* ─── Common card frame ─────────────────────────────────── */
  .auth-card {
    position: absolute;
    top: 132px;
    left: auto;
    max-width: none;
    padding: 0;
    display: block;
    flex-direction: initial;
    gap: 0;
  }
  .auth-card--robot { max-width: none; }

  .auth-card__title {
    position: absolute;
    top: 48px;
    left: 0;
    right: 0;
    width: auto;
  }

  /* ─── VARIANT: --login (480×564 at left 481) ──────────── */
  .auth-card--login {
    left: 481px;
    width: 480px;
    height: 564px;
  }
  .auth-card--login .field-row {
    position: absolute;
    left: 48px;
    right: auto;
    width: 384px;
  }
  .auth-card--login .field-row--email    { top: 132px; }
  .auth-card--login .field-row--password { top: 212px; }
  .auth-card--login .btn-primary {
    position: absolute;
    top: 292px;
    left: 48px;
    right: auto;
    width: 384px;
  }
  .auth-card--login .signin-link {
    position: absolute;
    top: 356px;
    left: 48px;
    right: auto;
    width: 384px;
    height: 48px;
    padding: 12px 0;
  }
  .auth-card--login .divider-h {
    position: absolute;
    top: 428px;
    left: 48px;
    right: auto;
    width: 384px;
    height: 20px;
  }
  .auth-card--login .social-row {
    position: absolute;
    top: 472px;
    left: 48px;
    right: auto;
    width: 384px;
    height: 44px;
  }

  /* ─── VARIANT: --register (480×604 at left 480) ───────── */
  .auth-card--register {
    left: 480px;
    width: 480px;
    height: 604px;
  }
  .auth-card--register .field-row {
    position: absolute;
    left: 48px;
    right: auto;
    width: 384px;
  }
  .auth-card--register .field-row--username { top: 132px; }
  .auth-card--register .field-row--email    { top: 212px; }
  .auth-card--register .field-row--password { top: 292px; }
  .auth-card--register .terms-row {
    position: absolute;
    top: 372px;
    left: 48px;
    right: auto;
    width: 384px;
    min-height: 48px;
    padding: 14px 0 12px;
  }
  .auth-card--register .btn-primary {
    position: absolute;
    top: 444px;
    left: 48px;
    right: auto;
    width: 384px;
  }
  .auth-card--register .signin-link {
    position: absolute;
    top: 508px;
    left: 48px;
    right: auto;
    width: 384px;
    height: 48px;
    padding: 12px 0;
  }

  /* ─── VARIANT: --reset (480×440 at left 480) ──────────── */
  .auth-card--reset {
    left: 480px;
    width: 480px;
    height: 440px;
  }
  .auth-card--reset .auth-card__help {
    position: absolute;
    top: 92px;
    left: 48px;
    right: auto;
    width: 384px;
  }
  .auth-card--reset .field-row {
    position: absolute;
    top: 200px;
    left: 48px;
    right: auto;
    width: 384px;
  }
  .auth-card--reset .btn-primary {
    position: absolute;
    top: 280px;
    left: 48px;
    right: auto;
    width: 384px;
  }
  .auth-card--reset .signin-link {
    position: absolute;
    top: 344px;
    left: 0;
    right: 0;
    width: auto;
    height: auto;
    padding: 12px 0;
  }

  /* ─── VARIANT: --robot (576×608 at left 432) ──────────── */
  .auth-card--robot {
    left: 432px;
    width: 576px;
    height: 608px;
  }
  .auth-card__title--robot {
    top: 48px;
    left: 48px;
    right: auto;
    width: 480px;
  }
  .auth-card--robot .auth-card__why,
  .auth-card--robot .auth-card__intro,
  .auth-card--robot .auth-card__feedback,
  .auth-card--robot .auth-card__id {
    position: absolute;
    left: 48px;
    right: auto;
    width: 480px;
  }
  .auth-card--robot .auth-card__why      { top: 152px; }
  .auth-card--robot .auth-card__intro    { top: 224px; }
  .auth-card--robot .auth-card__feedback { top: 488px; }
  .auth-card--robot .auth-card__id       { top: 536px; }

  .auth-card--robot .auth-card__reasons {
    position: absolute;
    top: 272px;
    left: 90px;
    width: 438px;
    list-style: none;
    padding: 0;
    gap: 24px;
  }

  /* Restore absolute decorative dots on desktop */
  .auth-card__dot {
    display: block;
    position: absolute;
    left: 74px;
  }
  .auth-card__dot--1 { top: 280px; }
  .auth-card__dot--2 { top: 352px; }
  .auth-card__dot--3 { top: 424px; }

  /* Captcha desktop position */
  .auth-card__captcha {
    position: absolute;
    top: 656px;
    left: 118px;
    width: 340px;
    height: 355px;
    margin: 0;
  }
}


/* ─── Smallest mobile (< 480px): tighter padding + smaller title ─── */
@media (max-width: 479px) {
  .auth-card { padding: 32px 20px; }
  .auth-card__title { font-size: 24px; line-height: 30px; }
}

/* === sections/card-grid/card-grid.css === */
/* card-grid — responsive 1 / 2 / 4 column grid.
   Mobile-first: 1 col base → 2 col ≥640 → 4 col ≥1024.
   Used for card-leak (leaks, search) and card-product (shop, store-home). */

.card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px 24px;
	margin-top: 28px;
}

@media (min-width: 640px) {
	.card-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.card-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Tighter row gap variant (search page uses 76px between rows) */
.card-grid--tall-row {
	gap: 76px 24px;
}

/* 3-col variant (shop uses 3 cols not 4 since right sidebar is 282 wide) */
.card-grid--3col {
	gap: 32px 24px;
}

@media (min-width: 1024px) {
	.card-grid--3col {
		grid-template-columns: repeat(3, 282px);
		justify-content: start;
	}
}

/* === sections/cart-item/cart-item.css === */
/* cart-item — single product card in the shopping cart.

   Figma reference: woo-cart 1484:4 (Rectangle 191) at x=240 y=208 w=960 h=128.
   Border: 1px soft. Background: mute. Border-radius: 12. Padding: 24.

   Layout (desktop):
   - thumb (80×80, br 8) | content (name + qty/price row) | close-X (top-right, abs)
   - close-X: 36×36 soft bg, br 40, positioned absolute top:24 right:24
   - qty + price row: flex space-between aligned center
   - thumb top edge aligns with name (cart top + 24px padding → both start at 232)

   Mobile fallback: wrap allowed, thumb shrinks to 64, content stacks if needed.
*/

.cart-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 960px;
  min-height: 128px;
  padding: 24px;
  box-sizing: border-box;
  background-color: rgb(var(--color-mute));
  border: 1px solid rgb(var(--color-soft));
  border-radius: 12px;
}

.cart-item__thumb {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: 8px;
  object-fit: cover;
  display: block;
  background-color: rgb(var(--color-soft));
}

.cart-item__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.cart-item__name {
  font-family: 'Nationale', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: rgb(var(--color-lead));
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-item__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cart-item__price {
  font-family: 'Nationale', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: rgb(var(--color-lead));
  white-space: nowrap;
  text-align: right;
  flex-shrink: 0;
  margin: 0;
}

/* close-X — 36×36 round button, top-right corner. Figma 1619:239 Frame 457. */
.cart-item__remove {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 0;
  margin: 0;
  padding: 0;
  border-radius: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(var(--color-soft));
  color: rgb(var(--color-subs));
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.cart-item__remove:hover  { opacity: 0.85; }
.cart-item__remove:active { opacity: 0.65; }
.cart-item__remove:focus-visible {
  outline: 2px solid rgb(var(--color-main));
  outline-offset: 2px;
}

.cart-item__remove-icon {
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' d='M12 4L4 12M4 4l8 8'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' d='M12 4L4 12M4 4l8 8'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

/* Mobile (≤1023): fluid width */
@media (max-width: 1023px) {
  .cart-item {
    width: 100%;
    max-width: 960px;
  }
}

/* Mobile small (≤767): smaller thumb, allow wrap */
@media (max-width: 767px) {
  .cart-item {
    padding: 16px;
    /* Reserve room for absolute close button so price/text doesn't collide */
    padding-right: 60px;
  }
  .cart-item__thumb {
    width: 64px;
    height: 64px;
  }
  .cart-item__remove {
    top: 16px;
    right: 16px;
  }
}

/* === sections/category-scroller/category-scroller.css === */
/* category-scroller — horizontal scroll rail of category tiles.
   Figma 1657:1272 (Frame 95) — 1200×72 row, 9-10 tiles inside.
   Each tile: 56×56 icon box + 12 gap + (label + count) col, 16 gap between tiles.
   Mobile-first: full-width horizontal scroll with snap. */

.category-scroller {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  height: 72px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
  /* Edge bleed for first / last tile alignment with content edge */
  scroll-padding-left: 0;
}

.category-scroller::-webkit-scrollbar {
  display: none;
}

.category-tile {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 72px;
  padding: 8px 12px 8px 8px;
  /* Figma: tile has solid soft bg (#1B1F31 dark / #E2E8F0 light) + 1px border-bottom */
  background: rgb(var(--color-soft));
  border-bottom: 1px solid rgb(var(--color-soft));
  text-decoration: none;
  /* Figma 1657:1273 / 1665:422: tile borderRadius 80px on a 72px-tall row = full stadium pill */
  border-radius: 9999px;
  scroll-snap-align: start;
  transition: background 0.15s ease;
}

.category-tile:hover {
  background: rgb(var(--color-line));
}

.category-tile:focus-visible {
  outline: 2px solid rgb(var(--color-main));
  outline-offset: -2px;
}

.category-tile__icon-wrap {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Mode-aware token mix: Figma dark = line (#242A43), light = mute (#FFFFFF).
     Default = dark mode line; light override below. */
  background: rgb(var(--color-line));
  /* Figma 1664:61 / 1665:423: icon box borderRadius 64px on 56×56 = full circle */
  border-radius: 50%;
  overflow: hidden;
}

:root:not(.dark) .category-tile__icon-wrap {
  background: rgb(var(--color-mute));
}

.category-tile__icon-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.category-tile__icon {
  width: 32px;
  height: 32px;
  font-size: 32px;
  color: rgb(var(--color-subs));
}

.category-tile__text {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.category-tile__label {
  font-family: 'Nationale', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: rgb(var(--color-lead));
  white-space: nowrap;
}

.category-tile__count {
  font-family: 'Nationale', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: rgb(var(--color-text));
  padding-left: 12px;
  white-space: nowrap;
}

/* === sections/country-row/country-row.css === */
/* country-row — Figma node 6030:3 (home Countries section).
   Total height 232 at 1440: padding-y handled by page-shell; section is heading + carousel.

   Spacing:
     - Heading row: 36h (title + pagination), positioned absolute siblings within head wrapper
     - Gap heading→cards: 16
     - Cards row: 140h (default cards); --wide cards are 72h (clipped/inline OK)
     - Total head→bottom: 36 + 16 + 140 = 192; section padding 32 top + 8 bottom = 232 ✓ */

.country-row {
  width: 100%;
  padding: 32px 0 8px;
  box-sizing: border-box;
  color: rgb(var(--color-lead));
  font-family: var(--font-nationale, "Nationale", system-ui, sans-serif);
}

/* ── Heading row ─────────────────────────────────────────────────────── */
.country-row__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  margin: 0 0 16px;
}

.country-row__heading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgb(var(--color-lead));
}
.country-row__heading-chevron {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: rgb(var(--color-main));
  flex-shrink: 0;
}

/* Optional anchor wrapping (e.g. "States >" → links to states page) */
.country-row__heading-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  transition: color 200ms ease;
}
.country-row__heading-link:hover { color: rgb(var(--color-main)); }
.country-row__heading-link:hover .country-row__heading-chevron { background-color: rgb(var(--color-lead)); }

/* ── Pagination control (prev btn + dots + next btn) ─────────────────── */
.country-row__pager {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.country-row__btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: rgb(var(--color-text));
  cursor: pointer;
  transition: color 200ms ease, background-color 200ms ease;
}
.country-row__btn:hover { color: rgb(var(--color-lead)); background-color: rgb(var(--color-soft)); }
.country-row__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.country-row__btn:disabled:hover { background-color: transparent; color: rgb(var(--color-text)); }

.country-row__btn-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: currentColor;
}
.country-row__btn--prev .country-row__btn-icon { transform: rotate(180deg); }

.country-row__dots {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.country-row__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background-color: rgb(var(--color-edge));
  transition: background-color 250ms ease, width 250ms ease, transform 250ms ease;
}
.country-row__dot--active {
  background-color: rgb(var(--color-main));
  width: 12px;
  transform: scale(1.1);
}

/* ── Card carousel viewport (Embla) ──────────────────────────────────── */
.country-row__viewport {
  overflow: hidden;
  width: 100%;
}
.country-row__container {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  /* Embla applies translateX; do not set will-change to avoid stacking-context surprises */
}

/* Fallback if Embla JS hasn't loaded: native horizontal scroll */
.country-row:not([data-embla-ready]) .country-row__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.country-row:not([data-embla-ready]) .country-row__viewport::-webkit-scrollbar { display: none; }

/* a11y — keyboard focus indicators (P3 a11y pass, 2026-05-30) */
.country-row__btn:focus-visible,
.country-row__heading-link:focus-visible {
  outline: 2px solid rgb(var(--color-main));
  outline-offset: 2px;
}

/* === sections/creator-chip-row/creator-chip-row.css === */
/* creator-chip-row — horizontal scroll of creator chips (home Creators section).
   Figma 741:1931 Frame 95: 1200×72, ~6 visible chips with partial 7th at right edge
   (carousel-style overflow). nowrap + scroll-snap + hidden scrollbar. */

.creator-chip-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.creator-chip-row::-webkit-scrollbar {
  display: none;
}

.creator-chip-row > .creator-chip {
  flex-shrink: 0;
  scroll-snap-align: start;
}

/* === sections/creator-hero/creator-hero.css === */
/* creator-hero — centered profile hero (Figma 763:263 x=657.5 y=136..400).
   Avatar 128×128 circular. Name h1 36/48 lead. Stats pill: [dot] 2555 Wins 2555 Views (16/24, dot at left).
   Mobile-first: smaller avatar + smaller name on small viewports. */

.creator-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0;
	font-family: 'Nationale', system-ui, sans-serif;
}

/* ── Avatar ── */
.creator-hero__avatar {
	width: 96px;
	height: 96px;
	/* Figma both modes (node 765:2576 dark / 766:5750 light) borderRadius:96px = fully circular */
	border-radius: 50%;
	object-fit: cover;
	margin: 0;
	background: rgb(var(--color-soft));
}

@media (min-width: 768px) {
	.creator-hero__avatar {
		width: 128px;
		height: 128px;
	}
}

/* ── Name ── */
.creator-hero__name {
	margin: 24px 0 0 0;
	font-weight: 600;
	font-size: 28px;
	line-height: 36px;
	letter-spacing: -0.56px;
	color: rgb(var(--color-lead));
}

@media (min-width: 768px) {
	.creator-hero__name {
		font-size: 36px;
		line-height: 48px;
		letter-spacing: -0.72px;
	}
}

/* ── Stats pill ── glass pill with mute bg + gradient stroke + backdrop-blur(12px).
   Figma Frame 145 dark (765:1802): fill_BWPGHD=#08090E (mute dark) + stroke 169deg
   #22D3EE→#1B1F31 + backdrop-blur 12px + borderRadius 48.
   Figma Frame 145 light (766:5747): fill_CVJSCE=#FFFFFF (mute light) + stroke 169deg
   #22D3EE→#E2E8F0 + backdrop-blur 12px + borderRadius 48. */
.creator-hero__stats {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	margin-top: 16px;
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	color: rgb(var(--color-subs));
	height: 48px;
	/* Figma Frame 145 both modes: padding 7px 32px 7px 24px, gap 16px (dot at left, then text) */
	padding: 7px 32px 7px 24px;
	box-sizing: border-box;
	border-radius: 48px;
	/* Multi-bg: solid mute padding-box + gradient stroke border-box (Pitfall #14 pattern) */
	background:
		linear-gradient(rgb(var(--color-mute)), rgb(var(--color-mute))) padding-box,
		linear-gradient(169deg, rgb(var(--color-main)), rgb(var(--color-soft))) border-box;
	border: 1.5px solid transparent;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.creator-hero__stat strong {
	color: rgb(var(--color-main));
	font-weight: 700;
}

/* Dot sits at the LEFT of the pill (Figma Ellipse 1 765:1803 dark / 766:5748 light):
   6px fill rgb(--color-main) (#22D3EE dark / #0891B2 light), 2px same-colour ring,
   plus glow boxShadow 0 0 0 4px rgba(34,211,238,0.1). */
.creator-hero__dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgb(var(--color-main));
	box-shadow:
		0 0 0 2px rgb(var(--color-main)),
		0 0 0 6px rgba(34, 211, 238, 0.1);
	flex-shrink: 0;
}

/* === sections/creator-list/creator-list.css === */
/* creator-list — creators page vertical list container (Figma 748:2 Frame 95).
   Mobile-first: full-width, 8px row gap; desktop matches Figma layout 1216w. */

.creator-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.creator-list > li {
	margin: 0;
	padding: 0;
}

@media (min-width: 1280px) {
	.creator-list {
		max-width: 1216px;
		margin: 0 auto;
	}
}

/* === sections/crypto-select-card/crypto-select-card.css === */
/* crypto-select-card — Cryptocurrency selector card.

   Figma: woo-checkout 1531:298 Frame 471 at x=240 y=304 w=960 h=232.

   Composition:
   - Card chrome (mute bg, 1px soft border, br 12, padding 24)
   - Inner column (gap 24):
     - title "Select a Cryptocurrency" (24/32 DemiBold lead)
     - warning paragraph (Medium 16/24 text; BOLD strong → subs 700)
     - tabs pill (hug width, bg soft, 1px line border, br 32, padding 8, gap 8)
       - each tab: br 24, padding 8/12, row gap 6 (icon + label)
       - active tab: lead bg, fore text
       - inactive tab: transparent, subs text

   Crypto icon: 24×24 round colored circle with currency symbol (₿ for BTC,
   M for XMR). These are STYLED inline (background-color + glyph). For a
   "true Figma" render we'd download crypto SVGs to _shared/assets/woo/ — but
   the V1 implements them inline and Figma node shows just a "bitcoin 1" /
   "image 5" frame placeholder. Keeping inline-styled approach.
*/

.crypto-select-card {
  width: 960px;
  box-sizing: border-box;
  background-color: rgb(var(--color-mute));
  border: 1px solid rgb(var(--color-soft));
  border-radius: 12px;
  padding: 24px;
}

.crypto-select-card__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.crypto-select-card__title {
  font-family: 'Nationale', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  color: rgb(var(--color-lead));
  text-align: left;
  margin: 0;
}

.crypto-select-card__warning {
  font-family: 'Nationale', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: rgb(var(--color-text));
  text-align: left;
  margin: 0;
}
.crypto-select-card__warning strong {
  font-weight: 700;
  color: rgb(var(--color-subs));
}

/* Tabs pill */
.crypto-select-card__tabs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: rgb(var(--color-soft));
  border: 1px solid rgb(var(--color-line));
  border-radius: 32px;
  padding: 8px;
  align-self: flex-start; /* hug width, don't stretch to card */
}

.crypto-select-card__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 24px;
  border: 0;
  margin: 0;
  cursor: pointer;
  font-family: 'Nationale', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  background: transparent;
  color: rgb(var(--color-subs));
  transition: background-color 0.15s ease, color 0.15s ease;
}
.crypto-select-card__tab:hover {
  background-color: rgb(var(--color-line) / 0.3);
}
.crypto-select-card__tab:focus-visible {
  outline: 2px solid rgb(var(--color-main));
  outline-offset: 2px;
}

.crypto-select-card__tab--active {
  background-color: rgb(var(--color-lead));
  color: rgb(var(--color-fore));
}
.crypto-select-card__tab--active:hover {
  background-color: rgb(var(--color-lead));
  opacity: 0.95;
}

/* Currency icon — 24×24 round colored disc with single glyph */
.crypto-select-card__sym {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
}
.crypto-select-card__sym--btc { background-color: #F7931A; }
.crypto-select-card__sym--xmr { background-color: #FF6600; }

/* Mobile (≤1023): fluid card */
@media (max-width: 1023px) {
  .crypto-select-card {
    width: 100%;
    max-width: 960px;
  }
}
@media (max-width: 479px) {
  .crypto-select-card__tabs {
    align-self: stretch;
    flex-wrap: wrap;
  }
  .crypto-select-card__tab {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* === sections/dash-main-panel/dash-main-panel.css === */
/* dash-main-panel — Figma Rectangle 177 (282×564, y=914).
   Intentionally empty per Figma (placeholder for future user-content panel).
   Mobile-first: full-width on mobile; 282px fixed on desktop matching Figma. */

.dash-main-panel {
  width: 100%;
  max-width: 100%;
  height: 564px;
  background: rgb(var(--color-soft) / 0.5);
  border-radius: 8px;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .dash-main-panel {
    width: 282px;
    max-width: 282px;
  }
}

/* === sections/faq-accordion/faq-accordion.css === */
/* faq-accordion — FAQ section using native <details>/<summary>.

   Figma node 780:343 (FAQ page).
   Container: 896w (constrained desktop), x=272 from frame=1440 → centered.
   Items: 76h collapsed, ~132h expanded (~88h content + ~22+22 internal pad).
   Item radius: 8px, bg: transparent collapsed, color-soft @ 0.5 expanded.
   Item gap: 8px.
   Summary internal padding: 24 24 (collapsed), 22 24 (open) — proven in V1 faq.html spec.
   Toggle pill: 36×36 soft-bg @ 0.5 (collapsed), 24×24 transparent (open).
   Icons: 14×14 plus/minus, color: currentColor.

   Mobile-first: container full-width edge-padded, summary 18/26.
   Desktop ≥1024: 896w max, summary 20/28, full Figma padding. */

.faq-accordion {
  width: 100%;
  max-width: 896px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-accordion__item {
  border-radius: 8px;
  background-color: transparent;
  padding: 20px 16px;
  transition: background-color 200ms ease;
  box-sizing: border-box;
}

.faq-accordion__item[open] {
  background-color: rgb(var(--color-soft) / 0.5);
  padding: 18px 16px;
}

.faq-accordion__summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding-right: 52px;                  /* reserve 36 toggle + 16 gap */
  font-family: 'Nationale', system-ui, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: -0.02em;
  color: rgb(var(--color-text));
  min-height: 26px;
}

.faq-accordion__item[open] .faq-accordion__summary {
  color: rgb(var(--color-lead));
}

.faq-accordion__summary::-webkit-details-marker {
  display: none;
}

.faq-accordion__question {
  display: block;
}

.faq-accordion__toggle {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background-color: rgb(var(--color-soft) / 0.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: background-color 200ms ease;
}

.faq-accordion__item[open] .faq-accordion__toggle {
  width: 24px;
  height: 24px;
  background-color: transparent;
  border-radius: 0;
  top: 18px;
  transform: none;
}

.faq-accordion__icon {
  /* Figma: plus 1 / minus 1 frame = 24×24 (path 14×14 centered).
     Use 24×24 SVG container so icons are visible inside the 36×36 pill. */
  width: 24px;
  height: 24px;
  color: currentColor;
  display: block;
  flex-shrink: 0;
}

.faq-accordion__item:not([open]) .faq-accordion__icon--plus {
  color: rgb(var(--color-text));
}

.faq-accordion__item[open] .faq-accordion__icon--minus {
  color: rgb(var(--color-main));
}

/* Plus visible only when collapsed; minus visible only when open. */
.faq-accordion__item:not([open]) .faq-accordion__icon--minus { display: none; }
.faq-accordion__item[open]      .faq-accordion__icon--plus  { display: none; }

.faq-accordion__answer {
  margin: 8px 0 0 0;
  font-family: 'Nationale', system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: rgb(var(--color-subs));
}

/* Desktop ≥1024: full Figma type + spacing */
@media (min-width: 1024px) {
  .faq-accordion {
    padding: 0;
  }
  .faq-accordion__item {
    padding: 24px 24px;
  }
  .faq-accordion__item[open] {
    padding: 24px 24px;
  }
  .faq-accordion__summary {
    font-size: 20px;
    line-height: 28px;
    min-height: 28px;
  }
  .faq-accordion__toggle {
    /* keep absolute (base) — was mistakenly set to relative, which dropped the
       toggle out of its right-pinned position and let it flow to the left/below
       the block question on desktop. right:4px is just a small inset. */
    position: absolute;
    right: 4px;
  }
  .faq-accordion__item[open] .faq-accordion__toggle {
    top: 24px;
    transform: none;
  }
}

/* === sections/footer-full/footer-full.css === */
/* footer-full — multi-column footer for content pages.
   Figma node 407:1553 footer child. Source: Final/partials/footer.html.

   Layout (1440 desktop):
     - 1200 container, 5-column grid
     - Telegram CTA right-aligned below cols
     - Separator + bottom row (logo left, legal+lang right)
     - Bottom glow: Figma Group 53 (cyan + magenta radial, opacity 0.05)

   Mobile (<1024px):
     - Columns collapse to accordion (toggle via data-footer-toggle)
     - Bottom row stacks logo above legal/lang */

.footer-full {
  position: relative;
  background-color: rgb(var(--color-body));
  overflow: visible;
}

.footer-full__container {
  position: relative;
  z-index: 1;
  max-width: 1232px;   /* shop/header ile aynı genişlik → hizalı */
  margin: 0 auto;
  padding: 48px 0 0;   /* 0 yatay = shop-container ile aynı (mobil gutter page-shell'den) → hizalı */
}
@media (min-width: 640px) {
  .footer-full__container { padding-top: 64px; }
}

/* 5-column grid */
.footer-full__columns {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 24px;
  row-gap: 8px;
}
@media (min-width: 640px) {
  .footer-full__columns { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .footer-full__columns {
    grid-template-columns: repeat(5, 1fr);
    row-gap: 32px;
  }
}

/* Column heading toggle */
.footer-full__col-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.footer-full__col-heading {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgb(var(--color-text));
  padding: 0 0 24px;
  line-height: 20px;
}
.footer-full__col-chevron {
  width: 16px;
  height: 16px;
  background-color: rgb(var(--color-subs));
  flex-shrink: 0;
  transition: transform 0.3s;
}
.footer-full__col-toggle[aria-expanded="true"] .footer-full__col-chevron {
  transform: scaleY(-1);
}
@media (min-width: 1024px) {
  .footer-full__col-toggle { cursor: default; }
  .footer-full__col-chevron { display: none; }
}

/* Link list (collapsible on mobile) */
.footer-full__col-links {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}
.footer-full__col-links.is-open { max-height: 500px; }

@media (min-width: 1024px) {
  .footer-full__col-links {
    max-height: none !important;
    overflow: visible;
  }
}

.footer-full__link {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 2px 12px;
  margin-left: -12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: rgb(var(--color-lead));
  text-decoration: none;
  border-radius: 4px;
}
.footer-full__link:hover { background-color: rgb(var(--color-soft)); }

/* Telegram row */
.footer-full__telegram-row {
  display: flex;
  justify-content: flex-end;
  margin: 32px 0;
}
.footer-full__telegram {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  text-decoration: none;
  color: rgb(var(--color-subs));
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.footer-full__telegram-icon {
  width: 24px;
  height: 24px;
  background-color: rgb(var(--color-subs));
  flex-shrink: 0;
}

/* Separator */
.footer-full__separator {
  height: 1px;
  background-color: rgb(var(--color-line));
}

/* Bottom row */
.footer-full__bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 32px 0;
}
@media (min-width: 640px) {
  .footer-full__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
}

/* Footer logo — use image element via background (auto-swap light/dark) */
.footer-full__logo {
  display: inline-block;
  text-decoration: none;
}
.footer-full__logo-img {
  display: block;
  width: 180px;
  height: 16px;
  background-image: url('../img/footer/statewins-ft.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
}
.dark .footer-full__logo-img {
  background-image: url('../img/footer/statewins-ft-dark.svg');
}

/* End-side: legal links + lang */
.footer-full__bottom-end {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
@media (min-width: 640px) {
  .footer-full__bottom-end {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
}

.footer-full__legal {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.footer-full__legal-link {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: rgb(var(--color-subs));
  text-decoration: none;
}
.footer-full__legal-link:hover {
  color: rgb(var(--color-lead));
  text-decoration: underline;
}

/* Lang switcher (footer pill) */
.footer-full__lang { position: relative; }
.footer-full__lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgb(var(--color-lead) / 0.20);
  background-color: rgb(var(--color-text) / 0.05);
  color: rgb(var(--color-subs));
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.footer-full__lang-btn:hover { background-color: rgb(var(--color-text) / 0.10); }
.footer-full__lang-globe {
  width: 20px;
  height: 20px;
  background-color: rgb(var(--color-subs));
  flex-shrink: 0;
}
.footer-full__lang-chevron {
  width: 16px;
  height: 16px;
  background-color: rgb(var(--color-subs));
  flex-shrink: 0;
}

/* Bottom glow — Figma Group 53 */
.footer-full__glow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 320px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 83.3% 192px at 50% 100%, rgb(var(--color-main) / 0.05) 0%, transparent 70%),
    radial-gradient(ellipse 53.3% 192px at 50% 100%, rgb(var(--color-mark) / 0.05) 0%, transparent 70%);
}

/* sr-only */
.footer-full .sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* a11y — keyboard focus indicators (P3 a11y pass, 2026-05-30) */
.footer-full__col-toggle:focus-visible,
.footer-full__link:focus-visible,
.footer-full__telegram:focus-visible,
.footer-full__logo:focus-visible,
.footer-full__legal-link:focus-visible,
.footer-full__lang-btn:focus-visible {
  outline: 2px solid rgb(var(--color-main));
  outline-offset: 2px;
}

/* === sections/glow-decoration/glow-decoration.css === */
/* glow-decoration — Top + bottom radial blob backgrounds.
   1456×448 each, positioned absolute inside .page-shell (desktop only).

   Mobile-first: hidden by default (low-value on small screens, perf win).
   Desktop (>= 1024px): the glow is visible + absolute-positioned.

   The per-page wiring (which slug + which top offset for bottom glow) lives
   in the page CSS — see below. This file provides only the base sizing/positioning
   and the mobile hide. */

.page-glow {
  /* Mobile default: hidden */
  display: none;
}

/* Desktop (>= 1024px): show + absolute-position the glow */
@media (min-width: 1024px) {
  .page-glow {
    display: block;
    position: absolute;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    width: 1456px;
    height: 448px;
    background-repeat: no-repeat;
    background-size: 1456px 448px;
  }

  .page-glow--top {
    top: -184px;
    left: -8px;     /* register/reset/robot. Login uses -7 — 1px nit, ignore. */
  }

  .page-glow--bottom {
    /* top is page-specific:
       login/register/reset → 798px
       robot                 → 1079px
       Set in the page CSS, not here. */
    left: -15px;    /* login uses -14 — 1px nit, ignore. */
  }
}

/* ─── PER-PAGE BACKGROUND IMAGES ──────────────────────────────────────────
   These rules live in the page CSS (or via a per-page glow-decoration
   override). Example for login:

   .page-login .page-glow--top {
     background-image: url('../img/auth/login-glow-top-light.svg');
   }
   .dark .page-login .page-glow--top {
     background-image: url('../img/auth/login-glow-top.svg');
   }
   .page-login .page-glow--bottom {
     top: 798px;
     background-image: url('../img/auth/login-glow-bottom-light.svg');
   }
   .dark .page-login .page-glow--bottom {
     background-image: url('../img/auth/login-glow-bottom.svg');
   }

   Repeat for register, reset, robot (with robot using top: 1079px on bottom). */

/* === sections/header-full/header-full.css === */
/* header-full — sticky top navigation for content pages.
   Figma node 407:1553 (home). Source: Final/partials/header.html.

   Layout (1440 desktop):
     - Container 1200 max, py-6 (24 vertical)
     - Sticky top, scroll-bg via .is-scrolled (handled by JS)
     - Side rows flex 1, center pill absolute centered
     - Mobile (<lg): hamburger + logo + avatar visible; pill hidden;
                     right side icons hidden (avatar shows mobile-only)
     - Desktop (>=lg / 1024): pill centered; right side shows search/avatar/wins;
                              mobile avatar hides */

.header-full {
  position: sticky;
  top: 0;
  z-index: 30;
  /* Only background-color animates (the scrolled state). The old rule also
     transitioned backdrop-filter, but no rule ever SETS backdrop-filter — it was
     a dead no-op left from a removed frosted-glass design. The 500ms fade also
     read as "slimy" on scroll, so it's tightened to 200ms. */
  transition: background-color 200ms ease;
}

/* Scroll-bg activation — clean SOLID bar on scroll (no frosted/translucent blur).
   Transparent at page top (integrates with the page/band behind it); on scroll it
   becomes a fully opaque body-colored bar so content slides cleanly underneath. */
.header-full.is-scrolled {
  background-color: rgb(var(--color-body));
}

.header-full__container {
  position: relative;
  max-width: 1700px;   /* header genişliği (kullanıcı onayı) — öğeler kenarlara yakın */
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between; /* öğeleri kenarlara dağıt (hamburger/logo sol, search/account/wins sağ) */
  flex-wrap: nowrap;              /* alt satıra inmesin, dar ekranda küçülsün */
  gap: 24px;
  min-height: 64px;
}

@media (min-width: 1024px) {
  .header-full__container {
    padding: 32px 40px 16px;  /* tam genişlik gutter: hamburger sol kenarda, wins sağ kenarda */
    min-height: 0;            /* override base 64 */
  }
}

/* Glow backdrop — Figma Group 54 (407:1774): two blurred ellipses (cyan + magenta)
   centered over the 1200-wide header, bleeding above the page top.
   Rendered as a Figma-exported SVG with inline <feGaussianBlur stdDeviation=64>
   so blur is browser-consistent (CSS filter blur differs across engines).

   Native SVG canvas is 1456×448 (Figma added 128px bleed on each side to contain
   the blur spill). Original Figma node was 1200×192 at page y=-56, so we recenter
   the SVG container around that same midpoint: top = -56 - (448-192)/2 = -184.

   This element is INJECTED at body-top by header-full.js (NOT inside the sticky
   header). It lives in the normal document flow at page-top so it scrolls OUT of
   view as the user scrolls down — matching Figma intent (decoration, not chrome).
   Only the nav bar (.header-full) follows the scroll via position: sticky. */
.header-glow-page-top {
  position: absolute;
  top: -184px;
  left: 50%;
  transform: translateX(-50%);
  width: 1456px;
  max-width: 100vw;
  height: 448px;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
  background-image: url('../img/header/header-glow.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

/* Page wrapper must allow the glow to extend above the page top without clipping.
   Body becomes the positioning context for the absolutely-positioned glow. */
body:has(.header-glow-page-top) {
  position: relative;
  overflow-x: clip;
}

/* Defensive: hide the legacy inline glow node in case a page renders it before JS
   has had a chance to remove it (preserves visual correctness during JS-disabled
   environments / SSR delays). header-full.js removes the node entirely on init. */
.header-full__glow {
  display: none !important;
}

/* Side rows */
.header-full__side {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  min-width: 0; /* taşma yerine içerik (logo) küçülebilsin */
}
.header-full__side--start {
  flex: 1;
  justify-content: space-between;
}
.header-full__side--end {
  flex: 1;
  justify-content: flex-end;
  display: none; /* mobile: hidden; shown at lg */
}

@media (min-width: 1024px) {
  .header-full__side--start { flex: none; justify-content: flex-start; gap: 24px; }
  .header-full__side--end   { display: flex; }
}

/* Hamburger — visible at all viewports per Figma (mobile + desktop both show) */
.header-full__hamburger {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Dark mode: subtle white glass (white/10 on dark bg). Light mode override below
     uses SOLID soft fill (Figma intent: filled gray circle, not transparent tint). */
  background-color: rgb(255 255 255 / 0.10);
  border: 1px solid rgb(255 255 255 / 0.20);
  border-radius: 999px;
  color: rgb(var(--color-lead));
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.header-full__hamburger:hover { background-color: rgb(255 255 255 / 0.15); }
:root:not(.dark) .header-full__hamburger {
  background-color: rgb(var(--color-soft));
  border-color: rgb(var(--color-line));
}
:root:not(.dark) .header-full__hamburger:hover {
  background-color: rgb(var(--color-line));
}
.header-full__hamburger-icon {
  width: 20px;
  height: 20px;
  background-color: currentColor;
}
/* Figma 407:1815 (Frame 143, x=120 y=32 48x48) shows hamburger present at desktop
   alongside logo + nav pill + right icons. Visible at all viewports. */

/* Logo — SVG mask, follows color-lead.
   Mobile: 160px (compact, leaves breathing room around hamburger + avatar).
   Desktop (≥1024): 225px (Figma 407:1553 spec). */
.header-full__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 1;
  min-width: 0;
}
.header-full__logo-img {
  display: block;
  width: 160px;
  height: 16px;
  background-color: rgb(var(--color-lead));
  -webkit-mask-image: url('../img/header/header-top-logo.svg');
  mask-image: url('../img/header/header-top-logo.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
}
@media (min-width: 1024px) {
  .header-full__logo-img {
    width: 180px;
    height: 16px;
  }
}

/* Avatar circle button + icon-btn (search etc).
   NOTE: `.header-full__icon-btn` class contains the substring "icon-", which
   matches the global `[class*="icon-"]` rule in _shared/icons.css that sets
   `background-color: currentColor` (and a mask). We must explicitly cancel
   those properties on the BUTTON wrapper so it doesn't render as a solid
   currentColor disc. The inner `__icon-btn-icon` span keeps the mask behavior. */
.header-full__avatar,
.header-full__icon-btn {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(var(--color-line));
  border-radius: 999px;
  color: rgb(var(--color-lead));
  text-decoration: none;
  flex-shrink: 0;
  /* Cancel global icon-mask rule for the BUTTON wrapper */
  background-color: transparent;
  -webkit-mask-image: none;
  mask-image: none;
}
.header-full__avatar-icon,
.header-full__icon-btn-icon {
  width: 20px;
  height: 20px;
  background-color: currentColor;
}

/* Avatar — dark mode: white glass; light mode: solid soft fill (Figma intent). */
.header-full__avatar {
  background-color: rgb(255 255 255 / 0.10);
  border-color: rgb(255 255 255 / 0.20);
}
.header-full__avatar:hover { background-color: rgb(255 255 255 / 0.15); }
:root:not(.dark) .header-full__avatar {
  background-color: rgb(var(--color-soft));
  border-color: rgb(var(--color-line));
}
:root:not(.dark) .header-full__avatar:hover {
  background-color: rgb(var(--color-line));
}

/* Search icon-btn — Figma shows no background, no border at rest */
.header-full__icon-btn { border-color: transparent; }
.header-full__icon-btn:hover { background-color: rgb(255 255 255 / 0.08); }
:root:not(.dark) .header-full__icon-btn:hover {
  background-color: rgb(var(--color-soft));
}

/* Mobile-only avatar (mirrors desktop avatar; hidden on lg) */
.header-full__avatar--mobile { display: inline-flex; }
@media (min-width: 1024px) {
  .header-full__avatar--mobile { display: none; }
}

/* Nav pill — desktop only, absolutely centered */
.header-full__nav {
  display: none;
}
@media (min-width: 1024px) {
  .header-full__nav {
    position: absolute;
    left: 50%;
    top: 24px;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    /* Merkezi pill yan grupları (logo solda, search/account/wins sağda) ASLA örtmesin:
       her iki yanda ~300px yer ayır. Pill bu genişliğe sığmazsa içinde kayar (overflow-x),
       taşmaz/çakışmaz. 4 öğeli menüde (müşteri ayarlayınca) tam merkezde sığar. */
    max-width: calc(100% - 600px);
  }
}
.header-full__pill {
  list-style: none;
  margin: 0;
  padding: 8px;
  display: flex;
  gap: 8px;
  background-color: rgb(var(--color-lead) / 0.05);
  border: 1px solid rgb(var(--color-lead) / 0.10);
  border-radius: 999px;
}

/* Light-mode tweak: bg-lead/5 = rgba(0,0,0,0.05) reads grey,
   Figma intent (390:1600) = slate-200 / soft. Override. */
:root:not(.dark) .header-full__pill {
  background-color: rgb(var(--color-soft));
  border-color: rgb(var(--color-line));
}

.header-full__pill-item {
  position: relative;
  display: block;
}
.header-full__pill-item > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  text-decoration: none;
  color: rgb(var(--color-lead));
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  transition: background-color 200ms ease;
}
.header-full__pill-item > a:hover {
  background-color: rgb(var(--color-lead) / 0.08);
}
.header-full__pill-item.is-active > a {
  background-color: rgb(var(--color-lead) / 0.10);
}
:root:not(.dark) .header-full__pill-item.is-active > a {
  background-color: rgb(var(--color-mute));
  color: rgb(var(--color-lead));
}

/* Active underline stripe (Figma Rectangle 20: linear 270deg cyan center) */
.header-full__pill-item.is-active > a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgb(var(--color-main) / 0) 20%,
    rgb(var(--color-main) / 1) 50%,
    rgb(var(--color-main) / 0) 80%
  );
}

.header-full__pill-icon {
  width: 20px;
  height: 20px;
  background-color: currentColor;
  flex-shrink: 0;
}

/* Wins counter — Figma 407:2499 (110×48, gradient border 99.04deg cyan→soft, glass blur).
   Cyan accents hardcoded #22D3EE — Figma uses bright cyan in BOTH modes as a fixed brand
   accent (not the mode-aware --color-main which becomes #0891B2 in light). */
.header-full__wins {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  height: 48px;
  box-sizing: border-box;
  padding: 0 32px 0 24px;
  background:
    linear-gradient(rgb(var(--color-body)), rgb(var(--color-body))) padding-box,
    linear-gradient(169deg, #22D3EE, rgb(var(--color-soft))) border-box;
  border: 1.5px solid transparent;
  border-radius: 999px;
  text-decoration: none;
  flex-shrink: 0;
}

.header-full__wins-dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #22D3EE;
  box-shadow: 0 0 0 4px rgb(34 211 238 / 0.10);
  flex-shrink: 0;
}

.header-full__wins-stack {
  display: flex;
  flex-direction: column;
  line-height: 14px;
  white-space: nowrap;
}
.header-full__wins-count {
  font-size: 12px;
  font-weight: 700;
  line-height: 14px;
  color: #22D3EE;
}
.header-full__wins-label {
  font-size: 12px;
  line-height: 14px;
  color: rgb(var(--color-lead));
}

/* ── Düşük çözünürlük sertleştirme — header 320px'e kadar asla yatay taşmamalı.
   Header bloğu min-width:1024 ile yazıldığı için bu max-width kuralları yalnız dar
   mobil ekranları hedefler; >=1024 desktop layout'u (search/account/wins sağda) etkilemez.
   Mobilde __side--end gizli olduğundan asıl darlık hamburger+logo+mobil-avatar grubunda. ── */
@media (max-width: 380px) {
  .header-full__container { padding: 16px 16px; gap: 8px; }
  .header-full__side { gap: 8px; }
  .header-full__logo-img { width: 140px; } /* logo korunur, biraz küçülür */
}
@media (max-width: 340px) {
  .header-full__container { padding: 16px 12px; gap: 6px; }
  .header-full__side { gap: 6px; }
  .header-full__logo-img { width: 120px; }
  .header-full__hamburger,
  .header-full__avatar,
  .header-full__icon-btn { width: 44px; height: 44px; }
}
@media (max-width: 320px) {
  .header-full__container { padding: 16px 10px; gap: 4px; }
  .header-full__hamburger,
  .header-full__avatar,
  .header-full__icon-btn { width: 40px; height: 40px; }
  .header-full__logo-img { width: 110px; }
}

/* Wins counter mobile visibility handled by parent .header-full__side--end
   (which is display:none below 1024px). No separate rule needed. */

/* a11y — keyboard focus indicators (P3 a11y pass, 2026-05-30) */
.header-full__hamburger:focus-visible,
.header-full__avatar:focus-visible,
.header-full__icon-btn:focus-visible,
.header-full__logo:focus-visible,
.header-full__wins:focus-visible,
.header-full__pill-item > a:focus-visible {
  outline: 2px solid rgb(var(--color-main));
  outline-offset: 2px;
}

/* === sections/hero-card/hero-card.css === */
/* hero-card — Featured product hero island (Figma 1664:124 — 1200×420).
   ALWAYS-DARK island (per Figma — image-driven, dark scrim regardless of mode).
   Mobile-first: full-width image area aspect 7:6 (collapses to ~16:9 wide). Desktop pins 1200×420. */

.hero-card {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  background: #1b1f31; /* always-dark soft equivalent — independent of mode toggle */
  isolation: isolate;
}

.hero-card__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hero-card__container {
  display: flex;
  /* Embla flex container — slides side by side */
}

.hero-card__slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  height: 320px;
}

.hero-card__montage {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.hero-card__montage-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-card__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 14, 22, 0) 40%, rgba(11, 14, 22, 0.75) 75%, rgba(11, 14, 22, 0.95) 100%);
}

/* Body wrap — bottom row, name LEFT + CTA RIGHT (Figma 144,468 → 1157,476) */
.hero-card__body {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  z-index: 2;
}

.hero-card__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.hero-card__name {
  margin: 0;
  font-family: 'Nationale', system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.4px;
  color: #ffffff; /* lead in dark */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-card__tags {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-card__bm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  background: #353d61; /* edge (always-dark) */
  color: #cbd5e1; /* subs */
  border-radius: 9999px;
  font-family: 'Nationale', sans-serif;
  font-size: 12px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.hero-card__stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hero-card__stat-icon {
  font-size: 14px;
  color: #94a3b8; /* text */
}

.hero-card__stat-text {
  font-family: 'Nationale', sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: #94a3b8;
}

/* Get Now CTA — Figma intent: frosted-grey glass pill #CBD5E1 + 8px backdrop blur
   + 1px same-color stroke + WHITE text (always-grey-glass in BOTH modes; image-overlay
   intent — sits on always-dark image scrim). Build previously had solid white bg +
   dark ink (inverted from Figma). */
.hero-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 44px;
  padding: 0 20px;
  background: rgba(203, 213, 225, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  border: 1px solid rgba(203, 213, 225, 0.5);
  border-radius: 9999px;
  font-family: 'Nationale', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.18s ease;
}
.hero-card__cta:hover { opacity: 0.92; }
.hero-card__cta:active { opacity: 0.86; }
.hero-card__cta:focus-visible {
  outline: 2px solid #22d3ee;
  outline-offset: 2px;
}

/* Dots row — Figma Frame 517 (152×36) at y=564 (hero ends 556, gap 8). */
.hero-card-dots {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin: 8px auto 0;
  padding: 0;
  width: 152px;
  height: 36px;
  justify-content: center;
}

.hero-card-dots__btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 9999px;
  color: rgb(var(--color-subs));
  cursor: pointer;
  padding: 0;
}
.hero-card-dots__btn:hover { color: rgb(var(--color-lead)); }
.hero-card-dots__btn:focus-visible {
  outline: 2px solid rgb(var(--color-main));
  outline-offset: 2px;
}

.hero-card-dots__btn-icon {
  font-size: 20px;
}

.hero-card-dots__btn--prev .hero-card-dots__btn-icon {
  transform: scaleX(-1);
}

.hero-card-dots__dots {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero-card-dots__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(var(--color-text));
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.hero-card-dots__dot:hover { transform: scale(1.2); }
.hero-card-dots__dot.is-active { background: rgb(var(--color-lead)); }

/* ─── Tablet ─────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .hero-card__slide {
    height: 380px;
  }

  .hero-card__body {
    left: 24px;
    right: 24px;
    bottom: 24px;
  }

  .hero-card__name {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.48px;
  }
}

/* ─── Desktop ────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .hero-card__slide {
    height: 420px;
  }

  .hero-card__body {
    left: 24px;
    right: 24px;
    bottom: 24px;
  }

  .hero-card__cta {
    width: 139px;
    height: 56px;
    padding: 0;
    font-size: 20px;
    line-height: 28px;
    border-radius: 28px;
  }

  .hero-card__name {
    font-size: 24px;
    line-height: 32px;
  }
}

/* === sections/mini-grid/mini-grid.css === */
/* mini-grid — home flag-tile grid (States + Countries sections).
   Mobile-first: 3-col base → 5-col @640 → 10-col @1024.
   Figma ref: home 407:1553 — 10-col layout at desktop. */

.mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
}

@media (min-width: 640px) {
  .mini-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 1024px) {
  .mini-grid {
    grid-template-columns: repeat(10, 1fr);
  }
}

/* === sections/mobile-menu/mobile-menu.css === */
/* mobile-menu — slide-in drawer, full screen menu.
   Figma node: 741:1603 (home-menu).
   Dismissible: X close + scrim click + Esc key (vs. age-gate strict).
   Trigger: header-full hamburger button toggles `.is-open` on .mobile-menu and .mobile-menu__scrim.

   Depends on _shared/icons.css for icon classes. */

/* Hidden by default */
.mobile-menu        { display: none; }
.mobile-menu__scrim { display: none; }

/* Open state */
.mobile-menu.is-open        { display: flex; }
.mobile-menu__scrim.is-open { display: block; }

/* Scrim — full overlay. Figma both modes use --color-soft dark literal (#1B1F31) @ 0.8 alpha
   (dark fill_NM016C / light fill_7M5J8H both = soft-dark #1B1F31 with opacity 0.8). */
.mobile-menu__scrim {
  position: fixed;
  inset: 0;
  background: rgba(27, 31, 49, 0.8);
  z-index: 49;
  cursor: pointer;
}

/* Drawer container (positioned by inner element) */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}

.mobile-menu__drawer {
  pointer-events: auto;
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  height: 100dvh;
  max-height: 100dvh;
  background-color: rgb(var(--color-body));
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Close button */
.mobile-menu__close {
  position: absolute;
  top: 24px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  box-sizing: border-box;
  z-index: 1;
}
.mobile-menu__close:hover { background-color: rgb(var(--color-soft)); }
.mobile-menu__close-icon {
  width: 20px;
  height: 20px;
  background-color: rgb(var(--color-lead));
}

/* Logo row */
.mobile-menu__logo-row {
  display: flex;
  align-items: center;
  padding: 0 24px;
  height: 84px;
  flex-shrink: 0;
  box-sizing: border-box;
}
.mobile-menu__logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}
/* Logo image — shared header-top-logo.svg (flag star + stripes + STATEWINS wordmark, 225×20).
   Uses CSS mask to inherit --color-lead (white in dark, black in light). */
.mobile-menu__logo-img {
  display: block;
  width: 160px;
  height: 14px;
  flex-shrink: 0;
  background-color: rgb(var(--color-lead));
  -webkit-mask-image: url('../img/header/header-top-logo.svg');
          mask-image: url('../img/header/header-top-logo.svg');
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: left center;
          mask-position: left center;
}

/* Main nav */
.mobile-menu__nav {
  padding: 0 8px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
.mobile-menu__nav-item {
  display: flex;
  align-items: center;
  width: 304px;
  height: 40px;
  padding: 10px 16px;
  gap: 12px;
  text-decoration: none;
  color: rgb(var(--color-lead));
  font-size: 14px;
  font-weight: 500;
  box-sizing: border-box;
  border-radius: 6px;
}
.mobile-menu__nav-item:hover {
  background-color: rgb(var(--color-soft));
}
.mobile-menu__nav-item.is-active {
  color: rgb(var(--color-main));
  /* Figma dark fill_NM016C=#1B1F31 / light fill_LUX239=#E2E8F0 at FULL opacity */
  background-color: rgb(var(--color-soft));
}
.mobile-menu__nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-color: rgb(var(--color-text));
}
.mobile-menu__nav-item.is-active .mobile-menu__nav-icon {
  background-color: rgb(var(--color-main));
}

/* Mode toggle row — Figma 763:2 (304×40, moon-star icon, "Night Mode" label, 32×16 pill switch right-aligned) */
.mobile-menu__mode-row {
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  width: 304px;
  /* Align with .mobile-menu__nav-item structure */
}
.mobile-menu__mode-label {
  flex: 1;
  text-align: left;
}
.mobile-menu__mode-switch {
  position: relative;
  width: 32px;
  height: 16px;
  border-radius: 999px;
  background-color: rgb(var(--color-line));
  flex-shrink: 0;
  transition: background-color 0.2s;
}
.mobile-menu__mode-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #FFFFFF;
  transition: transform 0.2s;
}
/* Switch ON state — when html.dark is set, show cyan with thumb to right */
html.dark .mobile-menu__mode-switch {
  background-color: rgb(var(--color-main));
}
html.dark .mobile-menu__mode-switch-thumb {
  transform: translateX(16px);
}

/* Spacer — legacy element, disabled. Accordion uses margin-top:auto below to push down. */
.mobile-menu__spacer { display: none; }

/* Accordion — Figma 741:1603 has accordion at y=617 (drawer 1027 tall), nav ends y=344,
   so 273px gap above. On mobile drawer (100dvh), margin-top:auto pushes accordion to fill
   remaining space above it, putting accordion near bottom just above Contact + Telegram row. */
.mobile-menu__accordion {
  display: flex;
  flex-direction: column;
  width: 304px;
  margin: auto 8px 0;
}
.mobile-menu__acc-item { border: none; background: none; }
.mobile-menu__acc-summary {
  display: flex;
  align-items: center;
  width: 304px;
  height: 36px;
  padding: 8px 16px;
  cursor: pointer;
  list-style: none;
  box-sizing: border-box;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* Figma dark fill_YY49S7=#CBD5E1 / light fill_ZVVW3D=#475569 = --color-subs (not text) */
  color: rgb(var(--color-subs));
  user-select: none;
}
.mobile-menu__acc-summary::-webkit-details-marker { display: none; }
.mobile-menu__acc-summary:hover { color: rgb(var(--color-subs)); }
.mobile-menu__acc-label { flex: 1; }
.mobile-menu__acc-chevron {
  width: 16px;
  height: 16px;
  background-color: rgb(var(--color-text));
  transition: transform 0.2s;
  flex-shrink: 0;
}
.mobile-menu__acc-item[open] .mobile-menu__acc-chevron { transform: rotate(180deg); }
.mobile-menu__acc-body {
  padding: 0 0 4px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mobile-menu__acc-link {
  display: block;
  padding: 6px 16px 6px 0;
  font-size: 13px;
  color: rgb(var(--color-text));
  text-decoration: none;
}
.mobile-menu__acc-link:hover { color: rgb(var(--color-lead)); }

/* Divider */
.mobile-menu__divider {
  width: 320px;
  height: 1px;
  background-color: rgb(var(--color-line));
  flex-shrink: 0;
  margin: 8px 0 0;
}
.mobile-menu__divider + .mobile-menu__contact-btn + .mobile-menu__divider {
  margin: 0;
}

/* Contact button */
.mobile-menu__contact-btn {
  display: flex;
  align-items: center;
  width: 304px;
  height: 40px;
  padding: 10px 16px;
  gap: 12px;
  margin: 0 8px;
  border-radius: 8px;
  text-decoration: none;
  color: rgb(var(--color-lead));
  font-size: 14px;
  font-weight: 500;
  box-sizing: border-box;
  background-color: transparent;
}
.mobile-menu__contact-btn:hover { background-color: rgb(var(--color-soft)); }
.mobile-menu__contact-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-color: rgb(var(--color-lead));
}

/* Bottom bar — natural flow after accordion+contact (accordion has margin-top:auto
   to push the entire bottom block to the drawer bottom). */
.mobile-menu__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 60px;
  flex-shrink: 0;
}
.mobile-menu__telegram {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  text-decoration: none;
  color: rgb(var(--color-subs));
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.mobile-menu__telegram-icon {
  width: 24px;
  height: 24px;
  background-color: rgb(var(--color-subs));
}

/* Lang dropdown trigger (button only, dropdown menu handled in lang-switcher if needed) */
.mobile-menu__lang { position: relative; }
.mobile-menu__lang-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 8px 12px;
  border: 1px solid rgb(var(--color-line));
  border-radius: 8px;
  background: transparent;
  color: rgb(var(--color-lead));
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  width: 122px;
  box-sizing: border-box;
  font-family: inherit;
}
.mobile-menu__lang-btn:hover { border-color: rgb(var(--color-edge)); }
.mobile-menu__lang-globe {
  width: 20px; height: 20px;
  background-color: rgb(var(--color-text));
  flex-shrink: 0;
}
.mobile-menu__lang-text { flex: 1; text-align: left; }
.mobile-menu__lang-chevron {
  width: 16px; height: 16px;
  background-color: rgb(var(--color-text));
  flex-shrink: 0;
}

/* Desktop: typically hide drawer (header-full has its own desktop nav).
   Component is rendered but only opens on demand — JS controls .is-open class.
   Keep available at all breakpoints so it can also be opened from desktop hamburger if shown. */

/* === sections/order-summary/order-summary.css === */
/* order-summary — Card showing order items + total, used on multiple pages.

   Variants by page:
   - woo-cart:    no items list, no title, just Total row + Proceed CTA inline
   - woo-login:   "Your order" title + 1 item + Total row (no CTA inside)
   - woo-checkout: same as login (CTA "Place order" lives outside the card)
   - woo-register: same as login

   Card chrome:
   - bg: --color-soft @ 0.5 (translucent)
   - br: 12
   - w:  960 (desktop fixed; mobile fluid)
   - inner padding: 24
   - inner gap: 24 between rows

   This component owns the CARD CHROME + INNER LAYOUT. Items and total are
   COMPOSED from `molecules/order-item` and `molecules/order-total-row`. The
   page composer is responsible for injecting the proper rows.

   Title text comes from page composer (i18n).
*/

.order-summary {
  position: relative;
  width: 960px;
  box-sizing: border-box;
  background-color: rgb(var(--color-soft) / 0.5);
  border-radius: 12px;
}

.order-summary__inner {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.order-summary__title {
  font-family: 'Nationale', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.02em;
  color: rgb(var(--color-lead));
  margin: 0;
}

/* Items list when present (login/checkout/register) — column with 24 gap
   matching outer __inner gap (so visually it's one rhythm) */
.order-summary__items {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Mobile (≤1023): fluid width */
@media (max-width: 1023px) {
  .order-summary {
    width: 100%;
    max-width: 960px;
  }
}

/* === sections/page-footer-ribbon/page-footer-ribbon.css === */
/* page-footer-ribbon — Bottom ribbon: logo + legal links + lang switcher.

   Mobile-first: stacked column with flow layout (default).
   Desktop (>= 1024px): three pieces absolutely-positioned inside .page-shell.

   The desktop footer container is full-shell-size with pointer-events:none,
   so only its 3 children intercept clicks. This avoids z-index battles
   with the card-auth above.

   For taller pages (robot frame 1305 instead of 1024), the per-page CSS
   overrides the top positions — also inside the desktop media query.

   The .lang-switcher atom is rendered inside this section; its OWN
   positioning is supplied here. The atom's internal layout (button +
   icons) is in atoms/lang-switcher/lang-switcher.css. */

/* ─── Mobile default: stacked column ─────────────────────────────────── */
.page-footer-ribbon {
  position: relative;
  top: auto;
  left: 0;
  right: 0;
  z-index: 2;
  height: auto;
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  pointer-events: auto;
}

/* ── Footer logo (left on desktop, flow on mobile) ── */
.footer-logo {
  position: relative;
  top: auto;
  left: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 16px;
  color: rgb(var(--color-text));
  text-decoration: none;
}

.footer-logo__bars { display: inline-flex; width: 21px; height: 16px; }
.footer-logo__bars svg { width: 100%; height: 100%; }

.footer-logo__wordmark {
  display: inline-block;
  width: 147px;
  height: 14px;
  background-color: rgb(var(--color-text));
  -webkit-mask-image: url('../img/auth/statewins-footer-mark.svg');
          mask-image: url('../img/auth/statewins-footer-mark.svg');
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 147px 14px; mask-size: 147px 14px;
  -webkit-mask-position: left center; mask-position: left center;
}

/* sr-only inside footer-logo */
.footer-logo .sr-only {
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ── Footer links (center on desktop, wrap on mobile) ── */
.footer-links {
  position: relative;
  top: auto;
  left: auto;
  width: auto;
  height: auto;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 4px;
}

.footer-link {
  height: 32px;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Nationale', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: rgb(var(--color-subs));
  text-decoration: none;
  transition: color 0.18s ease;
  white-space: nowrap;
}
.footer-link:hover { color: rgb(var(--color-lead)); }

/* ── Lang switcher (right on desktop, flow on mobile) ── */
.page-footer-ribbon .lang-switcher {
  position: relative;
  top: auto;
  left: auto;
}

/* ─── Desktop (>= 1024px): absolute-positioned ribbon at bottom of shell ─── */
@media (min-width: 1024px) {
  .page-footer-ribbon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1024px;        /* default for auth pages; override .page-robot to 1305 */
    margin-top: 0;
    display: block;
    flex-direction: initial;
    align-items: initial;
    gap: 0;
    pointer-events: none;
  }
  .page-footer-ribbon > * { pointer-events: auto; }

  .footer-logo {
    position: absolute;
    top: 966px;
    left: 120px;
  }

  .footer-links {
    position: absolute;
    top: 958px;
    left: 644px;
    width: 531px;
    height: 32px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    row-gap: 0;
  }

  .page-footer-ribbon .lang-switcher {
    position: absolute;
    top: 956px;
    left: 1191px;
  }

  /* ─── Tall-page override: robot frame 1305 ─── */
  .page-robot .page-footer-ribbon { height: 1305px; }
  .page-robot .footer-logo        { top: 1247px; }
  .page-robot .footer-links       { top: 1239px; }
  .page-robot .page-footer-ribbon .lang-switcher { top: 1237px; }
}

/* === sections/page-glow/page-glow.css === */
/* page-glow — top + bottom radial glow decoration for content-list pages.
   SVG asset has inline <feGaussianBlur> — NO CSS filter:blur, NO CSS gradient.
   See feedback_figma_blur_use_svg_not_css.md for the 3-attempt history that forced this rule.
   SVG canvas 1456×448, Figma element 1200×192 (extra 128px each side for blur bleed).
   Mobile-first: hidden by default (Figma intends desktop-only decoration); visible at ≥768px. */

.page-glow {
	display: none;
	position: absolute;
	width: 1456px;
	height: 448px;
	pointer-events: none;
	z-index: -1;
	left: 50%;
	transform: translateX(-50%);
	background-image: url('../img/content-list/page-glow.svg');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.page-glow--top {
	top: -184px; /* center glow y=224 within 448 canvas → -184 puts glow center at top + 40px */
}

.page-glow--bottom {
	bottom: -100px;
}

@media (min-width: 768px) {
	.page-glow {
		display: block;
	}
}

/* === sections/page-header-minimal/page-header-minimal.css === */
/* page-header-minimal — Centered top logo only.
   Desktop: absolute inside .page-shell at top=64, full-width container, flex-center child.
   Mobile-first: header is relative + padded by default; absolute positioning is desktop. */

.page-header-minimal {
  /* Mobile default: relative + padding */
  position: relative;
  top: auto;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 32px 0 24px;
  display: flex;
  justify-content: center;
}

.top-logo {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  height: 20px;
  color: rgb(var(--color-lead));
  text-decoration: none;
}

.top-logo__img {
  display: inline-block;
  width: 225px;
  height: 20px;
  background-color: rgb(var(--color-lead));
  -webkit-mask: url('../img/auth/header-top-logo.svg') no-repeat center / 225px 20px;
          mask: url('../img/auth/header-top-logo.svg') no-repeat center / 225px 20px;
}

/* Visually-hidden helper (sr-only) — duplicate-safe to include here */
.top-logo .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Desktop (>= 1024px): absolute at top=64, no padding */
@media (min-width: 1024px) {
  .page-header-minimal {
    position: absolute;
    top: 64px;
    padding: 0;
  }
}

/* === sections/payment-card/payment-card.css === */
/* payment-card — Wallet/QR/instructions/buttons/spinner card for woo-payment-v1.

   Figma reference: woo-payment-v1 1560:326 →
   - Rectangle 177 (top): x=432 y=372 w=576 h=108, bg soft FULL opacity, top
     corners rounded 12.
   - Rectangle 179 (body): x=432 y=480 w=576 h=425, bg soft 50% opacity, bottom
     corners rounded 12. Total card: 576 × 533.
   - Inner panel (Rectangle 178): x=468 y=516 w=512 h=297, bg mute, 1px soft
     border, br 16, padding 16/16/24/16.
   - Inner divider (Rectangle 180): y=716 (in-panel-rel top=200), w=512, h=1, bg
     soft. Spans full panel width via negative horizontal margin (overrides
     panel's 16px padding-x).

   Layered approach: this section renders the wrap (TWO rounded rects stacked
   to produce the split-opacity card) + the inner panel + the Check-Status
   button below the panel. Content placement (amount/QR/wallet/instruction/
   buttons/spinner/stats) is COMPOSED INLINE — too many variants to abstract.

   Mobile: cards stack to a single column; QR + wallet column become block-flow
   (no absolute positioning).
*/

.payment-card {
  position: relative;
  width: 576px;
  box-sizing: border-box;
}

/* The two stacked rounded rects — they live as decorative backdrop layers. */
.payment-card__bg-top,
.payment-card__bg-body {
  width: 100%;
  box-sizing: border-box;
}
.payment-card__bg-top {
  background-color: rgb(var(--color-soft));
  border-radius: 12px 12px 0 0;
  height: 108px;
}
.payment-card__bg-body {
  background-color: rgb(var(--color-soft) / 0.5);
  border-radius: 0 0 12px 12px;
  height: 425px;
}

/* Content overlay sits above the two stacked rects */
.payment-card__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

/* Amount row (top section) — DemiBold 36/40 lead + 40×40 copy button */
.payment-card__amount-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 36px 36px 0 36px;
}
.payment-card__amount {
  font-family: 'Nationale', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 600;
  font-size: 36px;
  line-height: 40px;
  letter-spacing: -0.02em;
  color: rgb(var(--color-lead));
  white-space: nowrap;
  margin: 0;
}

/* Slate buttons — copy-amount (40), copy-wallet (32), payment-btn-icon (40).
   Figma fill_SN9QZ0/fill_5RJUUK = single-color gradient → SOLID #94A3B8 in BOTH modes
   (Pitfall #6 single-color gradient = solid). Pitfall #23 always-dark since bg is
   always the muted text-dark value regardless of mode. */
.payment-card__btn-copy,
.payment-card__btn-icon,
.payment-card__btn-primary,
.payment-card__btn-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #94A3B8;
  background: #94A3B8;
  cursor: pointer;
  font-family: 'Nationale', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: rgb(var(--color-subs));
  margin: 0;
  padding: 0;
  transition: opacity 0.15s ease;
}
.payment-card__btn-copy:hover,
.payment-card__btn-icon:hover,
.payment-card__btn-primary:hover,
.payment-card__btn-status:hover { opacity: 0.85; }

.payment-card__btn-copy {
  width: 40px;
  height: 40px;
  border-radius: 40px;
  flex-shrink: 0;
}
.payment-card__btn-copy--sm { width: 32px; height: 32px; }

.payment-card__btn-icon {
  width: 40px;
  height: 40px;
  border-radius: 40px;
  flex-shrink: 0;
}

.payment-card__btn-primary {
  height: 40px;
  padding: 0 16px;
  gap: 6px;
  border-radius: 40px;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
}

.payment-card__btn-status {
  height: 40px;
  padding: 0 16px;
  gap: 6px;
  border-radius: 40px;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
}

/* Inner panel (Rectangle 178) — mute bg, 1px soft border, br 16.
   Figma: panel at x=468 width=512 → asymmetric margins inside 576-wide card:
   left margin = 468 - 432 = 36, right margin = 576 - 36 - 512 = 28. */
.payment-card__panel {
  margin: 68px 28px 0 36px;
  background-color: rgb(var(--color-mute));
  border: 1px solid rgb(var(--color-soft));
  border-radius: 16px;
  width: 512px;
  height: 297px;
  box-sizing: border-box;
  padding: 16px 16px 24px 16px;
  display: flex;
  flex-direction: column;
}

/* QR + wallet column row */
.payment-card__qr-wallet {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

/* QR — 112×112 mask so cells flip with mode */
.payment-card__qr {
  width: 112px;
  height: 112px;
  flex-shrink: 0;
  background-color: rgb(var(--color-lead));
  -webkit-mask-image: url('../img/woo/payment-qr-code.svg');
          mask-image: url('../img/woo/payment-qr-code.svg');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* Wallet text column */
.payment-card__wallet-col {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding-top: 4px;
}
.payment-card__wallet-label {
  font-family: 'Nationale', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: rgb(var(--color-subs));
  margin: 0;
}
.payment-card__wallet-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.payment-card__wallet-addr {
  font-family: 'Nationale', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 32px;
  color: rgb(var(--color-lead));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  margin: 0;
}
.payment-card__instruction {
  font-family: 'Nationale', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: rgb(var(--color-subs));
  margin: 0;
}
.payment-card__instruction strong {
  font-weight: 600;
  color: rgb(var(--color-lead));
  cursor: pointer;
}
.payment-card__instruction strong:hover { opacity: 0.85; }

/* Button group below wallet column */
.payment-card__btn-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

/* Inner divider — spans full panel width via negative margins to defeat panel padding */
.payment-card__divider {
  width: calc(100% + 32px);
  margin-left: -16px;
  margin-right: -16px;
  height: 1px;
  background-color: rgb(var(--color-soft));
  flex-shrink: 0;
  margin-bottom: 24px;
}

/* Spinner + stats row */
.payment-card__status-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.payment-card__spinner {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  animation: payment-card-spin 1.5s linear infinite;
}
@keyframes payment-card-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.payment-card__stats {
  display: flex;
  align-items: flex-start;
  gap: 44px;
  margin: 0;
  padding: 0;
}
.payment-card__stat {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}
.payment-card__stat dt,
.payment-card__stat-label {
  font-family: 'Nationale', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: rgb(var(--color-text));
  margin: 0;
}
.payment-card__stat dd,
.payment-card__stat-value {
  font-family: 'Nationale', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: rgb(var(--color-subs));
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* Check Status row (sits below the panel) */
.payment-card__status-cta {
  padding: 16px 36px 32px 36px;
  display: flex;
  justify-content: flex-start;
}

/* Mobile (≤1023) — switch backdrop layers to absolute so card-wrap height
   follows content height (V1 pattern) */
@media (max-width: 1023px) {
  .payment-card {
    width: 100%;
    max-width: 576px;
    min-height: 533px; /* fall back so absolute layers still have a frame */
  }
  .payment-card__bg-top,
  .payment-card__bg-body {
    position: absolute;
    left: 0;
    right: 0;
    width: auto;
  }
  .payment-card__bg-top { top: 0; }
  .payment-card__bg-body { top: 108px; bottom: 0; height: auto; }
  .payment-card__content { position: relative; }
}

@media (max-width: 767px) {
  .payment-card { min-height: auto; }
  .payment-card__panel { height: auto; min-height: 297px; }
  .payment-card__qr-wallet { flex-direction: column; gap: 16px; }
  .payment-card__amount-row { padding: 24px 16px 0 16px; }
  .payment-card__panel { margin: 36px 16px 0 16px; }
  .payment-card__status-cta { padding: 16px 16px 24px 16px; }
}
@media (max-width: 479px) {
  .payment-card__amount { font-size: 24px; line-height: 32px; }
}

/* === sections/product-grid/product-grid.css === */
/* product-grid — shop product grid (3-col desktop).
   Mobile-first: 1-col → 2-col @640 → 3-col @1024 (282w each). */

.product-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px 24px;
	margin-top: 0;
}

@media (min-width: 640px) {
	.product-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.product-grid {
		grid-template-columns: repeat(3, 282px);
		justify-content: start;
	}
}

/* === sections/product-hero/product-hero.css === */
/* product-hero — single page top-row LEFT column (title block + hero image).
   Figma 1626:1015 x=120 y=140..1068 (768 wide).
   Layout: NEW badge + Updated row, title h1, rating row, meta row, then 768×768 image.
   Mobile-first: full-width image (1:1). At ≥1024 fixed 768 wide. */

.product-hero {
	width: 100%;
	font-family: 'Nationale', system-ui, sans-serif;
	box-sizing: border-box;
}

/* ── Top row: NEW badge + Updated date ── */
.product-hero__top-row {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.product-hero__new-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 8px;
	border-radius: 4px;
	background: rgb(var(--color-warn));
	color: rgb(var(--color-fore));
	font-weight: 700;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.product-hero__updated {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	color: rgb(var(--color-text));
	font-size: 14px;
	line-height: 16px;
	font-weight: 500;
}

.product-hero__updated-icon {
	display: inline-block;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
	flex-shrink: 0;
}

/* ── Title h1 ── */
.product-hero__title {
	margin: 24px 0 0 0;
	font-weight: 600;
	font-size: 28px;
	line-height: 36px;
	letter-spacing: -0.56px;
	color: rgb(var(--color-lead));
}

@media (min-width: 768px) {
	.product-hero__title {
		font-size: 36px;
		line-height: 48px;
		letter-spacing: -0.72px;
	}
}

/* ── Rating row: 5 stars + reviews link ── */
.product-hero__rating-row {
	margin-top: 24px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

@media (min-width: 768px) {
	.product-hero__rating-row {
		margin-top: 36px;
	}
}

.product-hero__stars {
	display: inline-flex;
	gap: 3px;
	color: rgb(var(--color-warn));
}

.product-hero__star {
	width: 16px;
	height: 16px;
	font-size: 16px;
	flex-shrink: 0;
}

.product-hero__reviews-link {
	color: rgb(var(--color-subs));
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	text-decoration: none;
}

.product-hero__reviews-link:hover {
	text-decoration: underline;
}

/* ── Meta row: BM badge + 338 + 90 GB ── */
.product-hero__meta-row {
	margin-top: 8px;
	display: inline-flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.product-hero__bm {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	height: 24px;
	border-radius: 4px;
	background: rgb(var(--color-soft));
	color: rgb(var(--color-subs));
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	box-sizing: border-box;
}

.product-hero__meta-stat {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: rgb(var(--color-subs));
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}

.product-hero__meta-icon {
	width: 16px;
	height: 16px;
	font-size: 16px;
	color: currentColor;
	flex-shrink: 0;
}

/* ── Hero media ──
   Mobile: compact 4:3 hero (~Devialet-style product-on-top stacking) so the
   image doesn't dominate the first scroll and the title/meta + addon-panel
   feel reachable.
   Tablet (≥768): roomier 4:3 still, but render larger.
   Desktop (≥1024): Figma spec 768×768 square. */
.product-hero__media {
	margin: 24px 0 0 0;
	border-radius: 12px;
	overflow: hidden;
	background: rgb(var(--color-soft));
	width: 100%;
	aspect-ratio: 4 / 3;
	max-height: 60vh;
}

.product-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (min-width: 768px) {
	.product-hero__media {
		aspect-ratio: 4 / 3;
		max-height: none;
	}
}

@media (min-width: 1024px) {
	.product-hero__media {
		width: 768px;
		height: 768px;
		aspect-ratio: auto;
	}
}

/* === sections/request-list/request-list.css === */
/* request-list — Transparency report section.
   3 sections on transparency: announcements, registrar-requests, legal-requests.
   Each: 768w max (matches transparency hero), 24mb H2 + 24-gap item column.

   Figma node 837:2:
   - announcements y=762, registrar y=916, legal y=1400
   - H2 25/24 line-height 28, weight 700, letter-spacing -0.02em, color lead, mb 24
   - items: flex column 24 gap
   - request-item rows: 153/1fr grid at desktop

   Mobile-first: 100% width edge-padded, smaller H2 (20/28).
   Desktop ≥1024: 768w, H2 24/28. */

.request-list {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 16px;
}

.request-list__title {
  font-family: 'Nationale', system-ui, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.02em;
  color: rgb(var(--color-lead));
  margin: 0 0 24px 0;
}

.request-list__items {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 1024px) {
  .request-list {
    padding: 0;
  }
  .request-list__title {
    font-size: 24px;
    line-height: 28px;
  }
}

/* === sections/reviews-grid/reviews-grid.css === */
/* reviews-grid — home Reviews 3-col grid + centered Show More button.
   Mobile-first: 1-col → 2-col @640 → 3-col @1024. */

.reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
}

@media (min-width: 640px) {
  .reviews-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .reviews-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.reviews-grid__more-wrap {
  margin-top: 32px;
  display: flex;
  justify-content: center;
}

/* === sections/reviews-summary/reviews-summary.css === */
/* reviews-summary — heading + rating number + stars row + count (Figma centered at y=1793 of 1626:1015).
   All centered, vertical stack.
   Heading 36/48 lead, rating 28/36 lead, stars 36 warn, count 16/19 subs.
   Mobile-first. */

.reviews-summary {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	font-family: 'Nationale', system-ui, sans-serif;
	text-align: center;
}

.reviews-summary__heading {
	margin: 0;
	font-weight: 600;
	font-size: 28px;
	line-height: 36px;
	letter-spacing: -0.56px;
	color: rgb(var(--color-lead));
}

@media (min-width: 768px) {
	.reviews-summary__heading {
		font-size: 36px;
		line-height: 48px;
		letter-spacing: -0.72px;
	}
}

.reviews-summary__rating {
	margin-top: 24px;
	font-weight: 600;
	font-size: 28px;
	line-height: 36px;
	color: rgb(var(--color-lead));
}

.reviews-summary__stars {
	margin-top: 8px;
	display: inline-flex;
	gap: 4px;
	color: rgb(var(--color-warn));
}

.reviews-summary__star {
	width: 36px;
	height: 36px;
	font-size: 36px;
	flex-shrink: 0;
}

.reviews-summary__count {
	margin: 16px 0 0 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 19px;
	/* Figma uses --color-text (#94A3B8 dark / #64748B light), not --color-subs */
	color: rgb(var(--color-text));
}

/* === sections/shop-filters/shop-filters.css === */
/* shop-filters — shop page right sidebar with collapsible filter sections (Figma 1797:1998).
   Mobile-first: stacked sections, full-width; desktop sidebar fixed at 282w (composer-controlled). */

.shop-filters {
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: 100%;
	max-width: 282px;
	box-sizing: border-box;
	align-self: start;
}

.shop-filters__section {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}

.shop-filters__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 6px;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.shop-filters__heading {
	font-family: 'Nationale', sans-serif;
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 2px;
	text-transform: uppercase;
	/* Figma: heading uses subs (#475569 light / #CBD5E1 dark), not text. */
	color: rgb(var(--color-subs));
	margin: 0;
}

.shop-filters__chevron {
	font-size: 16px;
	color: rgb(var(--color-subs));
	transition: transform 0.15s;
}

.shop-filters__header[aria-expanded="false"] .shop-filters__chevron {
	transform: rotate(-90deg);
}

.shop-filters__header[aria-expanded="false"] + .shop-filters__list {
	display: none;
}

.shop-filters__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.shop-filters__list label {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	user-select: none;
}

.shop-filters__list input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	min-width: 20px;
	flex-shrink: 0;
	/* Figma: bg uses line (#CBD5E1 light / #242A43 dark), no border. */
	background: rgb(var(--color-line));
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	position: relative;
	margin: 0;
	padding: 0;
}

.shop-filters__list input[type="checkbox"]:checked {
	background: rgb(var(--color-main));
	border-color: rgb(var(--color-main));
}

.shop-filters__list input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	/* Tik kutunun TAM ortasında: merkeze al + rotate. translate Y -60% checkmark'ın
	   görsel ağırlık merkezini optik olarak ortalar (geometrik köşe biraz altta kalır). */
	left: 50%;
	top: 50%;
	width: 5px;
	height: 9px;
	/* Always white — checkmark sits on cyan bg in both modes. */
	border: solid #FFFFFF;
	border-width: 0 2px 2px 0;
	transform: translate(-50%, -60%) rotate(45deg);
}

.shop-filters__label {
	font-family: 'Nationale', sans-serif;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	color: rgb(var(--color-subs));
}

.shop-filters__list input[type="checkbox"]:checked + .shop-filters__label {
	color: rgb(var(--color-lead));
	font-weight: 600;
}

/* === sections/snap-banner/snap-banner.css === */
/* snap-banner — "Snap Service" promo (Figma 1688:2127 Group 72, y=4304, 1200×580).
   Always dark regardless of mode (per Figma — content centered on dark gradient).
   Vertical layout: eyebrow + h2 + stars+count + horizontal divider with text + price+strike + Get Now button + sales pill.
   Mobile-first: full-width column, centered content, padding adapts. */

.snap-banner {
	position: relative;
	width: 100%;
	border-radius: 12px;
	overflow: hidden;
	background: linear-gradient(180deg, #14171f 0%, #080910 100%);
	border: 1px solid #1c1f29;
	color: rgb(203, 213, 225);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 48px 24px;
	box-sizing: border-box;
	font-family: 'Nationale', system-ui, sans-serif;
}

@media (min-width: 768px) {
	.snap-banner {
		padding: 64px 96px;
		min-height: 532px;
	}
}

/* ── Eyebrow ── */
.snap-banner__eyebrow {
	margin: 0;
	font-size: 16px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgb(var(--color-warn));
	text-align: center;
}

/* ── Title ── */
.snap-banner__title {
	margin: 14px 0 0 0;
	font-weight: 700;
	font-size: 32px;
	line-height: 40px;
	letter-spacing: -0.64px;
	color: #ffffff;
	text-align: center;
}

@media (min-width: 768px) {
	.snap-banner__title {
		font-size: 40px;
		line-height: 48px;
		letter-spacing: -0.8px;
	}
}

/* ── Stars row ── */
.snap-banner__stars-row {
	margin-top: 12px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.snap-banner__stars {
	display: inline-flex;
	gap: 6px;
	color: rgb(var(--color-warn));
}

.snap-banner__star {
	width: 14px;
	height: 14px;
	font-size: 14px;
	flex-shrink: 0;
}

/* Snap-banner is an ALWAYS-DARK island (gradient #14171f→#080910 bg in BOTH modes).
   Internal text + dividers must be hardcoded (Pitfall #23) — vip-banner pattern.
   Previously used --color-subs / --color-line which become DARK in light mode → invisible
   on dark bg. Match vip-banner.css convention: hardcode whites + #353D61 edges. */
.snap-banner__reviews {
	color: #94A3B8;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
}

/* ── Divider row (top + bottom border, centered uppercase text) ── */
.snap-banner__divider-row {
	margin-top: 32px;
	width: 100%;
	max-width: 1072px;
	height: 64px;
	border-top: 2px solid #353D61;
	border-bottom: 2px solid #353D61;
	display: flex;
	align-items: center;
	justify-content: center;
}

.snap-banner__divider-text {
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	padding: 0 12px;
}

@media (min-width: 768px) {
	.snap-banner__divider-text {
		font-size: 16px;
	}
}

/* ── Price row ── */
.snap-banner__price-row {
	margin-top: 32px;
	display: inline-flex;
	align-items: baseline;
	gap: 16px;
}

.snap-banner__price {
	font-size: 32px;
	font-weight: 700;
	line-height: 40px;
	color: #ffffff;
}

@media (min-width: 768px) {
	.snap-banner__price {
		font-size: 36px;
	}
}

.snap-banner__price-old {
	position: relative;
	font-size: 22px;
	font-weight: 500;
	line-height: 32px;
	/* Hardcoded — snap-banner is always-dark island, --color-text in light becomes
	   #64748B which loses contrast on dark gradient. */
	color: #94A3B8;
}

.snap-banner__price-old::after {
	content: '';
	position: absolute;
	left: -2px;
	right: -2px;
	top: 50%;
	height: 2px;
	background: rgb(var(--color-warn));
	transform: translateY(-50%) rotate(-8deg);
}

/* ── Get Now CTA ── */
.snap-banner__cta {
	margin-top: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 280px;
	height: 56px;
	border-radius: 9999px;
	background: #ffffff;
	color: #11141a;
	font-weight: 600;
	font-size: 18px;
	line-height: 24px;
	text-decoration: none;
	box-sizing: border-box;
}

.snap-banner__cta:hover {
	background: rgba(255, 255, 255, 0.92);
}

/* ── Sales pill (below CTA) ── */
.snap-banner__sales-pill {
	margin-top: 24px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	height: 24px;
	border-radius: 16px;
	background: rgba(8, 9, 14, 0.7);
	color: #ffffff;
	font-size: 14px;
	font-weight: 500;
	box-sizing: border-box;
}

.snap-banner__sales-icon {
	width: 16px;
	height: 16px;
	font-size: 16px;
	color: currentColor;
	flex-shrink: 0;
}

.snap-banner__sales-text {
	line-height: 20px;
}

.snap-banner__sales-text strong {
	font-weight: 700;
}

/* === sections/state-grid/state-grid.css === */
/* state-grid — states page tile grid (Figma 807:2).
   Mobile-first: 2-col mobile → 3-col 480 → 5-col 768 → 9-col 1024+. */

.state-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	width: 100%;
	margin: 0 auto;
}

@media (min-width: 480px) {
	.state-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 768px) {
	.state-grid {
		grid-template-columns: repeat(5, 1fr);
	}
}

@media (min-width: 1024px) {
	.state-grid {
		grid-template-columns: repeat(9, 1fr);
		gap: 16px;
		max-width: 1208px;
	}
}

/* === sections/stats-grid/stats-grid.css === */
/* stats-grid — dashboard top-row 4-col grid.
   Mobile-first: 1-col → 2-col @640 → 4-col @1024. */

.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
}

@media (min-width: 640px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* === sections/success-badge/success-badge.css === */
/* success-badge — 3-layer stacked circles with check icon, for woo-payment-v2.

   Figma reference: woo-payment-v2 1628:1290
   - Rectangle 198 (outer ring): 96×96, linear-gradient 180deg cyan→soft, opacity 0.6
   - Rectangle 197 (inner ring): 88×88, bg body, opacity 0.8, centered (top 4 left 4)
   - check 2 (icon container): 48×48 frame at top 24 left 24 (centered in outer)

   Used by: woo-payment-v2 (success state). NOT used elsewhere.
*/

.success-badge {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto;
  display: block;
}

.success-badge__ring-outer {
  position: absolute;
  top: 0;
  left: 0;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgb(var(--color-main)) 0%, rgb(var(--color-soft)) 100%);
  opacity: 0.6;
}

.success-badge__ring-inner {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background-color: rgb(var(--color-body));
  opacity: 0.8;
}

.success-badge__icon {
  position: absolute;
  top: 24px;
  left: 24px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--color-main));
}
.success-badge__icon img,
.success-badge__icon svg {
  display: block;
  width: 48px;
  height: 48px;
}

/* === sections/vip-banner/vip-banner.css === */
/* vip-banner — VIP Membership always-dark island (Figma 1658:2257 — Group 42).
   Desktop pin 1200×548 (per Figma). Mobile: stacks vertically, fluid.
   ALWAYS-DARK (image-driven design — backdrop photo, gold accent, dark scrim).
   Inner panel is a glassy white-tint card sitting over dark scrim.

   Figma source canvas (container origin 120,1410):
     LEFT col origin x=96 y=64 (eyebrow), title at y=98 (size 48/48).
     Benefits frame at y=194, gap 24px, items 50px (Figma metadata).
     RIGHT panel at x=552(672-120) y=64 size 408×420 (8px radius, glass).
     Diamond at x=848(968-120) y=124 size 48×48.
     Number "1,000" at x=616(736-120) y=128 size 48/48.
     Label "Points" at x=616 y=176 size 18/28.
     £49.99 at x=616 y=252 size 36/40.
     £100 at x=737(857-120) y=260 size 24/32.
     CTA at x=616(736-120) y=316 width 280 height 56.
     Floor (heart+text) at x=616 y=388 width 280.
     vip-model gold haze SVG at x=0 y=212 size 1200×384 (under panel bottom-half).
     Black blur ellipse at x=528(648-120) y=460 size 456×48 opacity 0.2 blur 32.
*/

.vip-banner {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: #0e111b; /* always-dark body — fallback under photo */
  isolation: isolate;
  min-height: 480px;
  border: 1px solid #1b1f31; /* always-dark soft line per Figma fill_BZZ7W4 */
  box-sizing: border-box;
}

/* Backdrop photo — full bleed, low opacity scrim baked in via Group 41 opacity 0.2 */
.vip-banner__bg-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.20; /* Figma Group 41 opacity 0.2 */
  pointer-events: none;
}

/* Scrim — dual-side fade (left + right go pure dark, middle keeps photo).
   Figma Rectangle 23 (left 600) gradient 270deg rgba(13,15,24,0→1)
   + Rectangle 70 (right 600) gradient 90deg rgba(13,15,24,0→1) */
.vip-banner__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(270deg, rgba(13, 15, 24, 0) 0%, rgba(13, 15, 24, 1) 100%) 0 0 / 50% 100% no-repeat,
    linear-gradient(90deg,  rgba(13, 15, 24, 0) 0%, rgba(13, 15, 24, 1) 100%) 100% 0 / 50% 100% no-repeat;
}

/* Gold haze — Figma 1658:2264 Group 46 vip-model.svg (1200×384) at y=212.
   The svg already contains opacity 0.2 + blur — render at native size. */
.vip-banner__glow {
  position: absolute;
  left: 0;
  top: 212px;
  width: 100%;
  height: 384px;
  z-index: 2;
  pointer-events: none;
  object-fit: cover;
}

/* Top shimmer — Figma Rectangle 77 (1200×2 white 10% opacity gradient) */
.vip-banner__shimmer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 90%);
  opacity: 0.1;
  z-index: 3;
  pointer-events: none;
}

/* Inner — CSS grid, mobile stacked / desktop 2-col */
.vip-banner__inner {
  position: relative;
  z-index: 4;
  display: grid;
  /* minmax(0,1fr) so the single mobile track can shrink below the right
     panel's min-content width (CTA 280 + padding) instead of expanding to it
     and pushing the benefit text past the banner's clipped right edge. */
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  padding: 48px 24px;
  height: 100%;
  box-sizing: border-box;
}

/* ── LEFT — Benefits col ── */
.vip-banner__left {
  display: flex;
  flex-direction: column;
  min-width: 0; /* allow benefit text to wrap within the track, not overflow */
}

.vip-banner__eyebrow {
  margin: 0 0 14px 0;
  font-family: 'Nationale', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 1.4px; /* Figma 10% of 14px */
  text-transform: uppercase;
  color: #fbbf24; /* warn — gold accent */
}

.vip-banner__title {
  margin: 0 0 28px 0;
  font-family: 'Nationale', sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 36px;
  letter-spacing: 0;
  color: #ffffff;
}

.vip-banner__benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px; /* Figma layout_2O23X3 gap 24 */
}

.vip-banner__benefit {
  display: flex;
  align-items: flex-start;
  gap: 18px; /* 50px text-block at x=50 minus 32px disc = 18px gap */
  color: #ffffff;
}

.vip-banner__check {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  /* Figma fill_M41RA2 — solid gold linear-gradient(180deg, #fbbf24 0% → #fbbf24 100%) */
  background: #fbbf24;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.vip-banner__check img {
  width: 20px;
  height: 20px;
  display: block;
}

.vip-banner__benefit-text {
  font-family: 'Nationale', sans-serif;
  font-weight: 500;
  font-size: 16px;     /* Figma style_VVTL1L — 16/24 Medium */
  line-height: 24px;
  color: #ffffff;
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 2px; /* Figma text at y=2 inside item */
}

/* ── RIGHT — Glass price panel col ── */
.vip-banner__right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0; /* let the panel (fixed-width CTA) shrink to the track, not overflow */
}

.vip-banner__panel {
  position: relative;
  /* Figma fill_QMP2L6 = pure white gradient with backdrop-filter blur 12px.
     Rendered glassy over dark scrim — we approximate with subtle white tint. */
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px; /* Figma 8px */
  padding: 32px 32px 28px;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
}

/* Gold shimmer line at TOP of panel — Figma Rectangle 71 (408×2 gold 50% opacity) */
.vip-banner__panel-shimmer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(251, 191, 36, 0) 10%, rgba(251, 191, 36, 1) 50%, rgba(251, 191, 36, 0) 90%);
  opacity: 0.5;
  pointer-events: none;
}

/* Diamond — 48×48, top-right of panel (Figma x=968 panel-left=672 → 296 from panel-left,
   y=124 panel-top=64 → 60 from panel-top). Panel width 408, diamond width 48,
   so diamond-right = 408-(296+48) = 64. */
.vip-banner__diamond {
  position: absolute;
  top: 60px;
  right: 64px;
  width: 48px;
  height: 48px;
  pointer-events: none;
}

/* Points number — Figma "1,000" — 48/48 Bold, letter-spacing -4.17% (-2px), gold, uppercase */
.vip-banner__points {
  margin: 0;
  font-family: 'Nationale', sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 36px;
  letter-spacing: -1.5px;
  color: #fbbf24;
  text-transform: uppercase;
}

/* Points label — Figma "Points" — 18/28 Bold, letter-spacing 11.11% (2px), white, uppercase */
.vip-banner__points-label {
  margin: 12px 0 0 0;
  font-family: 'Nationale', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 1.56px; /* 11.11% of 14 */
  text-transform: uppercase;
  color: #ffffff;
}

.vip-banner__price-row {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 32px;
}

/* £49.99 — Figma 36/40 DemiBold 600 letter-spacing -5.56% (-2px) white */
.vip-banner__price {
  font-family: 'Nationale', sans-serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 32px;
  letter-spacing: -1.5px;
  color: #ffffff;
  text-transform: uppercase;
}

/* £100 — Figma 24/32 Medium 500 letter-spacing -8.33% (-2px) color #94A3B8 */
.vip-banner__price-old {
  position: relative;
  font-family: 'Nationale', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -1.5px;
  color: #94a3b8;
}

/* Figma Rectangle 58 — 60×2 line, rotated -12°, color #94A3B8.
   Applied as ::after rotating across "£100". */
.vip-banner__price-old::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  top: 50%;
  height: 2px;
  background: #94a3b8;
  transform: translateY(-50%) rotate(-12deg);
  border-radius: 1px;
}

/* CTA — Figma Frame 103 — width 280, height 56 (=4+48 disc), gold fill, padding 4 32 4 4,
   gap 12, border-radius 32. Disc 48×48 dark fill #0E111B, arrow 24×24 inside.
   Text "Get VIP Membership" font 18 DemiBold 600 color #0B0E16. */
.vip-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding: 4px 32px 4px 4px;
  background: #fbbf24;
  color: #0b0e16;
  border: 0;
  border-radius: 32px;
  text-decoration: none;
  cursor: pointer;
  height: 56px;
  width: 280px;
  max-width: 100%;
  box-sizing: border-box;
  font-family: 'Nationale', sans-serif;
  font-weight: 600;
  transition: opacity 0.18s ease;
  align-self: flex-start;
}
.vip-banner__cta:hover { opacity: 0.92; }
.vip-banner__cta:active { opacity: 0.86; }
.vip-banner__cta:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.vip-banner__cta-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Solid always-dark disc per Figma node 1658:2302 (Frame 107 — fill_BV1HP0 #0E111B).
     Wave 5d fix preserved — must remain solid (#0E111B), not the gold underlay. */
  background: #0e111b;
  border-radius: 50%;
}

.vip-banner__cta-icon img {
  width: 24px;
  height: 24px;
  display: block;
  /* Arrow SVG is gold (#FBBF24) on transparent — renders correctly on the dark disc. */
}

.vip-banner__cta-text {
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  flex: 1 1 auto;
  text-align: center;
  white-space: nowrap;
}

/* Floor row — Figma Group 19 INSIDE panel at y=388 (panel-rel) = panel-bottom area.
   Width 280, height 32. Heart at x=0 size 14×14, text at x=20 width 260 line-height 16. */
.vip-banner__floor {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 16px;
  width: 100%;
  max-width: 280px;
}

.vip-banner__heart {
  flex-shrink: 0;
  margin-top: 1px;
  width: 14px;
  height: 14px;
}

/* Figma style_ZBNSZ8 — 12/16 Regular 400. Bold "1967" weight 500 (per ts1 boldWeight).
   Color #CBD5E1 throughout. */
.vip-banner__floor-text {
  margin: 0;
  font-family: 'Nationale', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: #cbd5e1;
}

.vip-banner__floor-text strong {
  font-weight: 500;
  color: #cbd5e1;
}

/* ─── Tablet ─────────────────────────────────────────── */
@media (min-width: 768px) {
  .vip-banner {
    min-height: 520px;
  }

  .vip-banner__inner {
    padding: 56px 48px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
  }

  .vip-banner__title {
    font-size: 40px;
    line-height: 44px;
  }

  .vip-banner__points {
    font-size: 42px;
    line-height: 42px;
    letter-spacing: -1.8px;
  }

  .vip-banner__points-label {
    font-size: 16px;
    letter-spacing: 1.78px;
  }

  .vip-banner__price {
    font-size: 32px;
    line-height: 36px;
    letter-spacing: -1.8px;
  }

  .vip-banner__price-old {
    font-size: 22px;
    line-height: 30px;
    letter-spacing: -1.8px;
  }

  .vip-banner__cta-text {
    font-size: 17px;
  }
}

/* ─── Desktop (≥1024) — 1:1 Figma pin ───────────────── */
@media (min-width: 1024px) {
  .vip-banner {
    min-height: 548px;
  }

  .vip-banner__inner {
    /* Figma left col origin x=96, right panel x=552, gap = 552-(96+456)=0. So 96px outer pad
       + LEFT 456px + a flexible gap + RIGHT 408px panel + 96px outer pad ≈ 1056 of 1200.
       Remaining 144px sits as gap between columns. */
    padding: 64px 96px;
    grid-template-columns: 456px 408px;
    gap: 144px;
    align-items: start;
  }

  .vip-banner__title {
    margin-bottom: 48px;
    font-size: 48px;
    line-height: 48px;
    letter-spacing: 0;
  }

  .vip-banner__benefits {
    gap: 24px;
  }

  .vip-banner__panel {
    padding: 64px 64px 32px;
    /* Panel content area — Figma 408px wide, 420px tall fixed */
    min-height: 420px;
  }

  .vip-banner__diamond {
    top: 60px;
    right: 64px;
  }

  .vip-banner__points {
    font-size: 48px;
    line-height: 48px;
    letter-spacing: -2px;
  }

  .vip-banner__points-label {
    margin-top: 16px;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 2px;
  }

  .vip-banner__price-row {
    margin-top: 32px;
  }

  .vip-banner__price {
    font-size: 36px;
    line-height: 40px;
    letter-spacing: -2px;
  }

  .vip-banner__price-old {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -2px;
  }

  .vip-banner__cta {
    margin-top: 24px;
  }

  .vip-banner__cta-text {
    font-size: 18px;
    line-height: 22px;
  }

  .vip-banner__floor {
    margin-top: 28px;
  }
}

/* ─── STACKED VARIANT (--stacked) ────────────────────────────────────────
   Narrow column layout used on /about/ page (Figma 588×950).
   Frame 588×950: eyebrow+title at top, benefits list, glow image, panel BELOW.
   Inner grid stays 1-col across ALL breakpoints. Panel width matches banner width. */
.vip-banner--stacked {
  max-width: 588px;
  min-height: 950px;
}

.vip-banner--stacked .vip-banner__inner {
  /* Always 1-col, regardless of media query */
  display: flex;
  flex-direction: column;
  padding: 64px 64px 32px;
  gap: 0;
  height: auto;
}

/* Glow image — Figma Ellipse 9 (588×384 at y=212 of frame). Sits behind panel. */
.vip-banner--stacked .vip-banner__glow {
  top: auto;
  bottom: 0;
  height: 384px;
  z-index: 2;
}

.vip-banner--stacked .vip-banner__left {
  /* Eyebrow + title + benefits all in left, full width */
  width: 100%;
}

.vip-banner--stacked .vip-banner__eyebrow {
  margin: 0 0 8px 0;
}

.vip-banner--stacked .vip-banner__title {
  /* Figma 48/48 Bold at x=490 y=1684, width 261 — but actual text wraps single line "Benefits of VIP" */
  margin: 0 0 24px 0;
  font-size: 36px;
  line-height: 40px;
}

.vip-banner--stacked .vip-banner__benefits {
  gap: 24px;
  margin-bottom: 48px;
}

.vip-banner--stacked .vip-banner__right {
  /* The panel block flows below the benefits in vertical stack */
  width: 100%;
}

.vip-banner--stacked .vip-banner__panel {
  /* Panel takes full inner width (460px after 64px padding x2 in a 588 frame) */
  width: 100%;
  min-height: 420px;
  padding: 32px;
}

.vip-banner--stacked .vip-banner__diamond {
  top: 32px;
  right: 32px;
  width: 48px;
  height: 48px;
}

.vip-banner--stacked .vip-banner__points {
  font-size: 48px;
  line-height: 48px;
  letter-spacing: -2px;
}

.vip-banner--stacked .vip-banner__points-label {
  margin-top: 12px;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 2px;
}

.vip-banner--stacked .vip-banner__price-row {
  margin-top: 24px;
}

.vip-banner--stacked .vip-banner__price {
  font-size: 36px;
  line-height: 40px;
  letter-spacing: -2px;
}

.vip-banner--stacked .vip-banner__price-old {
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -2px;
}

.vip-banner--stacked .vip-banner__cta {
  margin-top: 24px;
  width: 100%;
  max-width: 332px;
}

.vip-banner--stacked .vip-banner__floor {
  margin-top: 24px;
  max-width: 332px;
}

/* Stacked variant mobile — same vertical, just trim padding for small screens */
@media (max-width: 767px) {
  .vip-banner--stacked .vip-banner__inner {
    padding: 32px 24px 24px;
  }
  .vip-banner--stacked .vip-banner__title {
    font-size: 28px;
    line-height: 32px;
  }
  .vip-banner--stacked .vip-banner__panel {
    padding: 24px 20px;
  }
  .vip-banner--stacked .vip-banner__points {
    font-size: 36px;
    line-height: 36px;
  }
  .vip-banner--stacked .vip-banner__price {
    font-size: 28px;
    line-height: 32px;
  }
  .vip-banner--stacked .vip-banner__price-old {
    font-size: 18px;
    line-height: 24px;
  }
}

/* === sections/wide-stats-bar/wide-stats-bar.css === */
/* wide-stats-bar — single page 7-column horizontal stats bar (Figma 1750:207 Rectangle 214, y=1116, 1200×124).
   Background: mute (light) / soft (dark). 7 equal columns.
   Each col: icon 36 + label 16/24 (subs color).
   Mobile-first: stack to 2-3 cols on small viewports, full 7 cols at ≥1024. */

.wide-stats-bar {
	width: 100%;
	border-radius: 8px;
	background: rgb(var(--color-mute));
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px 0;
	padding: 16px 8px;
	box-sizing: border-box;
	font-family: 'Nationale', system-ui, sans-serif;
}

.dark .wide-stats-bar {
	background: rgb(var(--color-soft));
}

@media (min-width: 640px) {
	.wide-stats-bar {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 1024px) {
	.wide-stats-bar {
		grid-template-columns: repeat(7, 1fr);
		height: 124px;
		align-items: center;
		padding: 0 12px;
		gap: 0;
	}
}

.wide-stats-bar__col {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 0 12px;
	box-sizing: border-box;
}

.wide-stats-bar__icon {
	width: 36px;
	height: 36px;
	font-size: 36px;
	/* Figma uses --color-text (#94A3B8 dark / #64748B light), not --color-subs */
	color: rgb(var(--color-text));
	flex-shrink: 0;
}

.wide-stats-bar__icon--text {
	background: none;
	-webkit-mask: none;
	mask: none;
	font-size: 28px;
	font-weight: 700;
	color: rgb(var(--color-text));
	line-height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wide-stats-bar__label {
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	color: rgb(var(--color-text));
	white-space: nowrap;
}