/*
 * Glossy Fashion — design system: tokens, typography, materials, motion and accessibility.
 * Components live in theme.css; store/page/admin additions in store.css, pages.css, admin.css.
 */

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body {
  width: 100%;
  overflow-x: clip;
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

img, svg, video { max-width: 100%; }
img { display: block; height: auto; }

/* ============================================================
   DESIGN TOKENS — LIGHT (DEFAULT)
   ============================================================ */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Neutrals */
  --bg: #ffffff;
  --surface: #f5f5f5;
  --surface2: #ebebeb;
  --text: #1d1d1d;
  --muted: #6e6e6e;
  --line: #d4d4d4;
  --ph: #f5f5f5;
  --phline: #ebebeb;
  --inv-bg: #1d1d1d;
  --inv-text: #f5f5f5;
  --accent: #000000;
  --accent-strong: #000000;
  --on-accent: #ffffff;
  --danger: #d70015; /* errors are the one colour on the site (owner request) */
  --success: #000000;

  /* Materials — translucent layers that content scrolls under */
  --glass: rgba(255, 255, 255, .72);
  --glass-thick: rgba(250, 250, 250, .86);
  --glass-edge: rgba(255, 255, 255, .55);
  --scrim: rgba(0, 0, 0, .32);

  /* Depth — bigger surfaces read as thicker */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04), 0 2px 8px rgba(0, 0, 0, .04);
  --shadow: 0 2px 6px rgba(0, 0, 0, .04), 0 12px 32px rgba(0, 0, 0, .08);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, .06), 0 24px 64px rgba(0, 0, 0, .14);
}

/* ============================================================
   DESIGN TOKENS — DARK
   ============================================================ */
[data-theme="dark"] {
  color-scheme: dark;

  --bg: #000000;
  --surface: #161616;
  --surface2: #1d1d1d;
  --text: #f5f5f5;
  --muted: #878787;
  --line: #434343;
  --ph: #161616;
  --phline: #242424;
  --inv-bg: #f5f5f5;
  --inv-text: #1d1d1d;
  --accent: #ffffff;
  --accent-strong: #ffffff;
  --on-accent: #000000;
  --danger: #ff453a;
  --success: #ffffff;

  --glass: rgba(22, 22, 22, .72);
  --glass-thick: rgba(29, 29, 29, .86);
  --glass-edge: rgba(255, 255, 255, .08);
  --scrim: rgba(0, 0, 0, .56);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 2px 6px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .5);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, .5), 0 24px 64px rgba(0, 0, 0, .7);
}

/* ============================================================
   ROKH — the Dari and Pashto typeface (self-hosted, assets/fonts/rokh).
   Used on Dari and Pashto pages, and on Dari/Pashto bits of English pages
   (language names, the admin's Dari and Pashto fields) via :lang() / dir.
   Never put it in the English font stack: its deep line metrics would shift
   every English line (text sitting high in buttons).
   ښ's joined forms were connected in these files (see assets/fonts/rokh/README.txt).
   ============================================================ */
@font-face { font-family: "Rokh"; src: url("../fonts/rokh/Rokh-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Rokh"; src: url("../fonts/rokh/Rokh-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Rokh"; src: url("../fonts/rokh/Rokh-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Rokh"; src: url("../fonts/rokh/Rokh-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Rokh"; src: url("../fonts/rokh/Rokh-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ============================================================
   SHARED TOKENS — TYPE, SHAPE, MOTION
   ============================================================ */
:root {
  /* System typography first: optical sizing and tracking tables come for free */
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-label: var(--font-text);
  --font-main: var(--font-text);

  /* Shape */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 980px;

  /* Layout */
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1280px;
  --nav-h: 52px;

  /* Motion — one curve family for the whole theme */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-press: 120ms;
  --dur-fast: 180ms;
  --dur-base: 240ms;
  --dur-sheet: 420ms;
  --dur-reveal: 800ms;
}

/* Dari and Pashto pages: Rokh for everything, Latin and numbers included */
[dir="rtl"] {
  --font-text: "Rokh", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Rokh", -apple-system, BlinkMacSystemFont, sans-serif;
}
/* Dari and Pashto inside English pages: the language switcher, the admin's Dari and Pashto fields */
html:not([dir="rtl"]) :is(:lang(fa), :lang(ps), [dir="rtl"]) {
  --font-text: "Rokh", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Rokh", -apple-system, BlinkMacSystemFont, sans-serif;
  font-family: var(--font-text);
}

/* ============================================================
   BODY & TYPOGRAPHY
   Tracking and leading are size-specific: tight on display,
   near zero on body, slightly open on small labels.
   ============================================================ */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -.022em;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .gf-disp {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.1;
  text-wrap: balance;
}

p { text-wrap: pretty; }

.gf-mono {
  font-family: var(--font-label);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

[dir="rtl"] body,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] .gf-disp {
  letter-spacing: 0;
}

/* Type scale */
.gf-t-hero {
  font-size: clamp(44px, 7.4vw, 96px);
  line-height: 1.04;
  letter-spacing: -.028em;
  font-weight: 700;
}
.gf-t-headline {
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.07;
  letter-spacing: -.024em;
  font-weight: 700;
}
.gf-t-title {
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.125;
  letter-spacing: -.016em;
  font-weight: 600;
}
.gf-t-sub {
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.33;
  letter-spacing: -.012em;
  font-weight: 400;
  color: var(--muted);
}
.gf-t-eyebrow {
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: -.008em;
  font-weight: 600;
  color: var(--muted);
}
.gf-t-caption {
  font-size: 12px;
  line-height: 1.33;
  letter-spacing: -.004em;
  color: var(--muted);
}

/* "The latest. Take a look at what's new." — Apple shelf header */
.gf-shelf-title {
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -.02em;
  font-weight: 600;
}
.gf-shelf-title span { color: var(--muted); }

/* ============================================================
   LINKS & INTERACTIVE
   ============================================================ */
a {
  color: inherit;
  text-decoration: none;
}

a, button, [role="button"], input, label, select, summary {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
  border-radius: 4px;
}

.gf-link {
  cursor: pointer;
  transition: opacity var(--dur-fast) ease, color var(--dur-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
  .gf-link:hover { opacity: .64; }
}
.gf-link:active { opacity: .4; }

/* Inline text link with chevron — "Shop now ›" */
.gf-more {
  color: var(--accent);
  font-size: inherit;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  cursor: pointer;
}
.gf-more::after {
  content: '';
  width: .42em;
  height: .42em;
  border-top: 1.5px solid currentColor;
  border-inline-end: 1.5px solid currentColor;
  transform: translateX(-1px) rotate(45deg);
  margin-inline-start: .3em;
  transition: transform var(--dur-fast) var(--ease-out);
}
[dir="rtl"] .gf-more::after { transform: translateX(1px) rotate(-45deg); }
@media (hover: hover) and (pointer: fine) {
  .gf-more:hover { text-decoration: underline; text-underline-offset: .18em; }
  .gf-more:hover::after { transform: translateX(2px) rotate(45deg); }
  [dir="rtl"] .gf-more:hover::after { transform: translateX(-2px) rotate(-45deg); }
}

/* ============================================================
   BUTTONS — feedback on press, never on release
   ============================================================ */
button {
  cursor: pointer;
  font-family: inherit;
  letter-spacing: inherit;
  color: inherit;
  transition: transform var(--dur-press) var(--ease-out), opacity var(--dur-fast) ease;
}

button:active:not(:disabled) { transform: scale(.97); }
button:disabled { opacity: .45; cursor: default; }

/* ============================================================
   FORMS
   ============================================================ */
input, select, textarea {
  font-family: inherit;
  font-size: 17px; /* ≥16px stops iOS zooming the page on focus */
  letter-spacing: -.022em;
  outline: none;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

/* Fields show their own ring (below), so drop the generic outline */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

input:focus, select:focus, textarea:focus {
  border-color: var(--accent-strong) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-strong) 22%, transparent);
}

select {
  -webkit-appearance: none;
  appearance: none;
  padding-inline-end: 38px !important;
  background-repeat: no-repeat;
  background-position: calc(100% - 14px) 50%;
  background-size: 11px 7px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 7'%3E%3Cpath fill='%23878787' d='M5.5 7L0 1.4 1.4 0 5.5 4.2 9.6 0 11 1.4z'/%3E%3C/svg%3E");
}

[dir="rtl"] select { background-position: 14px 50% !important; }

/* ============================================================
   LAYOUT — FRAME
   ============================================================ */
.gf-frame {
  background: var(--bg);
  color: var(--text);
  width: 100%;
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
}

.gf-container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.gf-theme-icon-light,
.gf-theme-icon-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Only the icon for the current theme shows */
[data-theme="light"] .gf-theme-icon-dark,
[data-theme="dark"] .gf-theme-icon-light { display: none; }

/* ============================================================
   RESPONSIVE GRIDS
   ============================================================ */
.gf-g6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.gf-g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.gf-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gf-g2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.gf-mainnav { display: flex; }
.gf-burger { display: none; }

/* ============================================================
   ICON BUTTONS
   ============================================================ */
.gf-ico-btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  color: var(--text);
  opacity: .84;
  transition: opacity var(--dur-fast) ease, background-color var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .gf-ico-btn:hover { opacity: 1; background: color-mix(in srgb, var(--text) 7%, transparent); }
}
.gf-ico-btn:active { transform: scale(.92); }

.gf-ico-btn .gf-ico-out,
.gf-ico-btn .gf-ico-fill {
  flex: none;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.gf-ico-btn svg { width: 18px; height: 18px; }

.gf-ico-btn .gf-ico-fill { display: none; }
.gf-ico-btn[data-active="true"] .gf-ico-out { display: none; }
.gf-ico-btn[data-active="true"] .gf-ico-fill { display: inline-flex; }
.gf-ico-btn[data-active="true"] { opacity: 1; }

/* ============================================================
   NOTIFICATION BADGE
   ============================================================ */
.gf-badge {
  position: absolute;
  top: 3px;
  inset-inline-end: 1px;
  background: var(--text);
  color: var(--bg);
  border-radius: var(--r-pill);
  min-width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  line-height: 1;
  padding: 0 4px;
  transition: transform var(--dur-base) var(--ease-out);
}
.gf-badge.gf-bump { transform: scale(1.25); transition-duration: 90ms; }

/* ============================================================
   PLACEHOLDER IMAGES
   ============================================================ */
.gf-ph {
  background-color: var(--ph);
  background-image: radial-gradient(120% 90% at 50% 0%, var(--phline) 0%, transparent 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
}

.gf-ph > span {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--muted);
  text-transform: uppercase;
  position: relative;
  z-index: 2;
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; border: 3px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   KEYFRAMES
   Kept only for one-shot or constant motion. Anything a person
   can trigger twice in a second uses transitions instead.
   ============================================================ */
@keyframes gfmarq {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
[dir="rtl"] [style*="gfmarq"] { animation-direction: reverse !important; }

@keyframes gf-spin {
  to { transform: rotate(360deg); }
}
@keyframes gfblink {
  0%, 80%, 100% { opacity: .3; }
  40% { opacity: 1; }
}
@keyframes gfMsgIn {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes gfLdBrand {
  from { opacity: 0; transform: scale(.96); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes gfLdOut {
  to { opacity: 0; visibility: hidden; }
}
@keyframes gfFade {
  from { opacity: 0; }
}
/* Coming soon keeps its starfield, but no glitch/float loops */
@keyframes gfCsOrbit { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes gfCsOrbitR { to { transform: translate(-50%, -50%) rotate(-360deg); } }

/* ============================================================
   LOADING SCREEN
   First visit per session only, short, never blocks input.
   ============================================================ */
.gf-loading-screen {
  position: fixed;
  inset: 0;
  z-index: 999990;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: gfLdOut 360ms var(--ease-out) 760ms forwards;
}

.gf-ld-brand {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
  animation: gfLdBrand 600ms var(--ease-out) both;
}

.gf-ld-line { display: none; }

.gf-no-loader .gf-loading-screen { display: none; }

/* ============================================================
   PAGE TRANSITIONS — native cross-document view transitions.
   No click hijacking, no added latency on navigation.
   ============================================================ */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
  animation-timing-function: var(--ease-out);
}

#gf-header { view-transition-name: gf-header; }
::view-transition-group(gf-header) { animation-duration: 0s; }

/* Legacy class kept as a no-op hook for templates */
.gf-page-in { }

/* ============================================================
   COMING SOON (shared bits)
   ============================================================ */
.gf-cs-wrap {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  background: #000;
  color: #f5f5f5;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
}

.gf-cs-title {
  color: #f5f5f5;
  font-family: var(--font-display);
  font-size: clamp(48px, 9vw, 112px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  text-align: center;
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, #ffffff 30%, #878787 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   PRICE RANGE SLIDER
   ============================================================ */
.gf-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: transparent;
  outline: none;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
}

.gf-range::-webkit-slider-runnable-track { height: 4px; background: transparent; }
.gf-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #fff;
  cursor: grab;
  pointer-events: all;
  border: none;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.04), 0 3px 8px rgba(0,0,0,.15), 0 3px 1px rgba(0,0,0,.06);
  margin-top: -10px;
  transition: transform var(--dur-press) var(--ease-out);
}
.gf-range:active::-webkit-slider-thumb { transform: scale(1.12); cursor: grabbing; }

.gf-range::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #fff;
  cursor: grab;
  pointer-events: all;
  border: none;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.04), 0 3px 8px rgba(0,0,0,.15);
}

/* ============================================================
   RTL FIXES
   ============================================================ */
[dir="rtl"] .gf-mono { unicode-bidi: plaintext; }

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

/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */
@media (max-width: 1024px) {
  .gf-g6 { grid-template-columns: repeat(3, 1fr); }
  .gf-g4 { grid-template-columns: repeat(3, 1fr); }
  .gf-g3 { grid-template-columns: repeat(2, 1fr); }
  .gf-hero-col { padding: 48px 30px !important; }
  .gf-footer-bar { flex-wrap: wrap !important; }
  section:not(.gf-sec) { padding-inline: 30px !important; }
  .gf-cart-row { gap: 20px !important; }
  .gf-aside { width: 260px !important; }
  .gf-sec-pad { padding-left: 30px !important; padding-right: 30px !important; }
  .gf-stack-t { flex-direction: column !important; }
  .gf-h1 { font-size: 52px !important; }
  .gf-help-cats { grid-template-columns: repeat(3, 1fr) !important; }
  .gf-blog-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */
@media (max-width: 833px) {
  .gf-mainnav { display: none; }
  .gf-burger { display: inline-flex !important; }
  .gf-hide-m { display: none !important; }
}

@media (max-width: 767px) {
  .gf-h1 { font-size: 38px !important; line-height: 1.05 !important; }
  .gf-hero-col { padding: 44px 20px !important; }
  .gf-full-m { width: 100% !important; }
  .gf-stack-m { flex-direction: column !important; }

  section:not(.gf-sec), .gf-sec-pad {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .gf-aside { width: 100% !important; flex: none !important; min-width: 0 !important; }
  .gf-g6 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .gf-g4 { grid-template-columns: repeat(2, 1fr); gap: 32px 12px; }
  .gf-g3 { grid-template-columns: 1fr 1fr !important; gap: 12px; }
  .gf-g2 { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .gf-card { min-width: 0; }

  .gf-policy-body { padding: 24px 16px !important; }
  .gf-policy-body h1 { font-size: 32px !important; }
  .gf-help-cats { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .gf-faq-wrap { padding: 24px 16px !important; }
  .gf-faq-wrap h1 { font-size: 32px !important; }
  .gf-cookie-wrap { padding: 24px 16px !important; }
  .gf-ship-rates { padding: 24px 16px !important; }
  .gf-about-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .gf-about-hero { padding: 40px 16px !important; }
  .gf-contact-wrap { flex-direction: column !important; padding: 24px 16px !important; }
  .gf-blog-grid { grid-template-columns: 1fr !important; }
  .gf-acc-wrap { flex-direction: column !important; padding: 24px 16px !important; }
  .gf-acc-sidebar { width: 100% !important; flex: none !important; }
  .gf-track-wrap { padding: 24px 16px !important; }
  .gf-404-wrap { padding: 60px 24px !important; }
  .gf-404-wrap h1 { font-size: 80px !important; }
  .gf-testi-page { padding: 24px 16px !important; }
  .gf-checkout-aside { width: 100% !important; }
  .gf-ship-calc { flex-direction: column !important; gap: 12px !important; }
  .gf-cs-wrap { padding: 40px 16px !important; }
  .gf-cs-title { font-size: clamp(42px, 15vw, 72px) !important; }
  .gf-cs-countdown { gap: 4px !important; }
}

/* ============================================================
   WOOCOMMERCE BASE OVERRIDES
   ============================================================ */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info {
  border-top-color: var(--text);
  background: var(--surface);
  color: var(--text);
}

/* ============================================================
   ACCESSIBILITY — motion, transparency, contrast
   Reduced motion means gentler, not none: keep fades, drop travel.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
  }
  [style*="gfmarq"] { animation: none !important; }
  .gf-loading-screen { display: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 120ms; }
}

@media (prefers-reduced-transparency: reduce) {
  :root, [data-theme="light"] { --glass: #ffffff; --glass-thick: #ffffff; }
  [data-theme="dark"] { --glass: #161616; --glass-thick: #1d1d1d; }
}

@media (prefers-contrast: more) {
  :root, [data-theme="light"] { --muted: #434343; --line: #878787; }
  [data-theme="dark"] { --muted: #d4d4d4; --line: #878787; }
}