/* ==========================================================================
   Self-hosted webfonts — generated by scripts/gen-fonts.mjs, do not hand-edit.

   These replace a render-blocking <link> to fonts.googleapis.com. Two reasons
   it had to go, and the first one is the serious one:

   1. Archivo and Hanken Grotesk DO NOT SHIP BULGARIAN CYRILLIC. Archivo serves
      latin / latin-ext / vietnamese only; Hanken Grotesk adds cyrillic-ext
      (U+0460-052F), the historic and minority-Slavic block. Bulgarian lives in
      U+0410-044F. So every Bulgarian word on this shop — every heading, product
      name and button — rendered in whatever sans the visitor's OS supplied, and
      looked different on every device. The brand face applied to "OutletOne"
      and to nothing else. Montserrat and Onest have real Cyrillic cuts.

   2. It was a third-party render-blocking request. Measured cold on mobile with
      fonts.googleapis.com unreachable: FCP 12.9s, against 0.26s with the request
      cut. Self-hosted, first paint can no longer be held hostage by Google — and
      the visitor's IP stops being sent there before any consent, which is what
      the shop's own GDPR policy promises.

   Variable fonts: one file per subset covers every weight the design uses, and
   unicode-range means a Bulgarian page never downloads the latin-ext cut.
   ========================================================================== */

/* Montserrat — latin */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  src: url("/assets/fonts/montserrat-latin.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Montserrat — latin-ext */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  src: url("/assets/fonts/montserrat-latin-ext.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Montserrat — cyrillic */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  src: url("/assets/fonts/montserrat-cyrillic.woff2") format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Onest — latin */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/onest-latin.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Onest — latin-ext */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/onest-latin-ext.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Onest — cyrillic */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/onest-cyrillic.woff2") format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  --bg: #f4f1ec;
  --bg-soft: #fffdf8;
  --bg-muted: #ebe5dc;
  --surface-pop: #fffefb;
  --text: #161312;
  --muted: #716a64;
  --border: #d8cec2;
  --accent: #181818;
  --accent-2: #b2252a;
  --accent-3: #a98a5b;
  --accent-soft: #f4d9d6;
  --metal: #b99a61;
  --sun: #cdb079;
  --btn-text: var(--paper);
  /* Two tokens per state, because one cannot do both jobs: --danger/--success
     are read AS TEXT on a page background, --danger-fill/--success-fill are
     painted BEHIND white text. Lightening one to pass AA darkens the other. */
  --danger: #b42318;
  --success: #23724a;
  --danger-fill: #b42318;
  --success-fill: #23724a;
  --shadow: 0 18px 46px rgba(20, 17, 15, 0.11);
  --shadow-lift: 0 22px 54px rgba(20, 17, 15, 0.16);
  --shadow-sm: 0 10px 22px rgba(20, 17, 15, .12);
  --radius: 8px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-pill: 999px;
  /* This block used to be one of ten :root blocks. Six tokens were redefined
     four to six times each, in three colour spaces, and only the last copy of
     each ever rendered — so every documented contrast calculation above it was
     fiction. The values below are the ones that WON that cascade, gathered
     here once. Add a token here or nowhere. */
  --carbon: #1a1512;            /* deep warm slab: footer, hero, brand strip, account rail */
  --carbon-soft: #2b2825;       /* the slab's lighter top stop */
  --accent-hover: oklch(0.40 0.024 55); /* primary-button hover, 1.9:1 from --accent so it reads */
  --ink-soft: #4a4540;          /* secondary text, AA on cream */
  --border-strong: #b3a597;     /* stronger hairline than --border */
  --field-border: #9b9085;      /* form-control boundary, >=3:1 on --bg-soft (WCAG 1.4.11) */
  --accent-label: oklch(0.475 0.095 72); /* gold that clears AA (~4.7:1) on cream */
  --accent-2-deep: #8f1f23;     /* red hover/active */
  --red-fill: var(--accent-2);  /* red beneath white text */
  /* One warm near-white, because the design forbids pure #fff and the file had
     agreed on that in a token before ignoring it fifty times. */
  --paper: #fdfbf7;
  --on-red: var(--paper);       /* text on a red or carbon fill, both themes */
  /* Editorial type system ported from our-redesign */
  --font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-poster: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-body: "Onest", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  /* Type scale, 1.25 ratio. The file previously held 24 distinct sizes below
     1rem in 0.02rem steps — a 1.026 ratio is a third of a pixel, which is
     noise, not a hierarchy step. Every fixed size maps onto one of these. */
  --fs-100: .75rem;    /* micro labels, badges, legal */
  --fs-200: .875rem;   /* secondary UI, meta, helper text */
  --fs-300: 1rem;      /* body */
  --fs-400: 1.25rem;   /* card and block headings */
  --fs-500: 1.563rem;  /* section headings */
  --fs-600: 1.953rem;  /* page headings */
  --fs-700: 2.441rem;  /* display */
  /* Fluid steps for the three headline roles, same ladder, same ratio. */
  --fs-display: clamp(2.441rem, 5.2vw, 4.2rem);  /* hero, film band */
  --fs-h1: clamp(1.953rem, 3.8vw, 3rem);         /* page title */
  --fs-h2: clamp(1.563rem, 2.6vw, 2.2rem);       /* section title */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: var(--ease-expo);
  --ease-premium: var(--ease-expo);
  --dur-fast: 180ms; --dur-base: 240ms; --dur-slow: 300ms;
  --shadow-hard: 6px 6px 0 var(--accent);
  /* Glass (floating/overlay surfaces only) + lit gold */
  --glass-bg: rgba(255, 255, 255, 0.10);
  --glass-bg-strong: rgba(255, 255, 255, 0.16);
  --glass-border: rgba(255, 255, 255, 0.22);
  --glass-blur: 16px;
  --glass-fallback: rgba(30, 26, 24, 0.72); /* opaque-ish when backdrop-filter unsupported */
  --glow-gold: 0 0 0 1px rgba(185, 154, 97, .0), 0 6px 22px rgba(185, 154, 97, .28);
  --glow-gold-strong: 0 8px 30px rgba(185, 154, 97, .42);
  --shadow-glass: 0 24px 60px rgba(20, 17, 15, .28), inset 0 1px 0 rgba(255, 255, 255, .16);
}

body.dark {
  --bg: #11100f;
  --bg-soft: #191716;
  --bg-muted: #24211f;
  --surface-pop: #201d1b;
  --text: #f6f1ea;
  --muted: #b7aea5;
  --border: #38302b;
  --accent: #f2f4ef;
  --accent-2: #d63b42;
  --accent-3: #d1a96b;
  --accent-soft: #3b2020;
  --metal: #d1a96b;
  --sun: #e7cf9c;
  --btn-text: #111512;
  /* Missing here until now, so every error and success line on the site fell
     back to the light-theme values and rendered at 2.4-3.2:1 on the dark
     surfaces. Text tokens pass AA against --bg, --bg-soft and --bg-muted;
     fill tokens stay dark enough to carry white text. */
  --danger: #f07a70;
  --success: #4fbf85;
  --danger-fill: #a01f16;
  --success-fill: #1f6642;
  --shadow: 0 14px 38px rgba(0, 0, 0, 0.3);
  --shadow-lift: 0 22px 56px rgba(0, 0, 0, 0.42);
  --shadow-sm: 0 10px 22px rgba(0, 0, 0, .5);
  /* Dark half of the consolidation: the values that won across eleven
     body.dark blocks, now stated once. --on-red and --paper do not flip. */
  --carbon: #0f0d0c;
  --carbon-soft: #1d1a18;
  --accent-hover: oklch(0.34 0.018 55);
  --ink-soft: #c9bfb5;
  --border-strong: #6a5f57;
  --field-border: #6f655d;
  --accent-label: oklch(0.80 0.082 84); /* ~7:1 on carbon */
  --accent-2-deep: #e05057;
  --red-fill: #c0383f;                  /* darker red so white text stays AA */
  --glass-bg: rgba(28, 25, 23, 0.44);
  --glass-bg-strong: rgba(34, 30, 28, 0.62);
  --glass-border: rgba(209, 169, 107, 0.22);
  --glass-fallback: rgba(16, 14, 13, 0.82);
  --shadow-glass: 0 26px 64px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
}

* { box-sizing: border-box; }

/* The `hidden` attribute hides an element only because the UA stylesheet says
   so — and a UA rule loses to ANY author rule that sets display. So every
   component here with `display: grid` or `display: inline-flex` ignored it, and
   the markup's own `hidden` did nothing.

   That is how #recoverForm — the "Забравена парола?" panel — sat open on the
   login screen from first paint, under the login form, on every visit. The same
   hole had the admin panel's "Зареди още" button showing when there was nothing
   more to load.

   The stylesheet had grown ten one-off escapes (.nav-count[hidden],
   .filter-chips[hidden], .rail-count[hidden], …), one per component that hit
   this. Which means every new component starts broken and stays broken until
   somebody notices. This is the rule those ten were each re-deriving; they all
   set `display: none` too, so it changes nothing for them.

   !important is not decoration: `[hidden]` and `.acct-form` are both (0,1,0)
   specificity, so without it the winner is whichever appears later in the file —
   a fact about line order, not about intent. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 126px;
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-300);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* <html lang="bg"> makes Montserrat swap in its Bulgarian localised Cyrillic
     via the `locl` OpenType feature: т renders as an m-shape, п as n, и as u,
     д with a descender. Those forms are correct Bulgarian typography — and they
     are also almost unheard of on Bulgarian websites, where standard Cyrillic is
     the norm. A product called "Тоут чанта" arriving as "Тоуm чанmа" reads as a
     rendering fault to a shopper, not as craft. Standard forms it is.
     Independent of font-variant-numeric, so tabular figures still apply. */
  font-feature-settings: "locl" 0;
  transition: background .25s var(--ease), color .25s var(--ease);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

a { color: inherit; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img { display: block; }
main,
section,
article,
aside,
div {
  min-width: 0;
}

.container {
  width: min(1220px, calc(100% - 32px));
  margin: 0 auto;
}

/* ===== Mobile nav (injected hamburger + slide-in overlay) + header search ===== */
.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-soft); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s var(--ease); }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-backdrop { position: fixed; inset: 0; background: rgba(12, 9, 8, .46); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); z-index: 150; }
body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
@media (max-width: 1120px) {
  .nav-toggle { display: inline-flex; }
  .main-nav {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto;
    width: min(84vw, 360px); transform: translateX(105%);
    transition: transform .32s var(--ease);
    background: var(--bg-soft); border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lift);
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 84px 22px 28px; overflow-y: auto; z-index: 200;
  }
  body.nav-open .main-nav { transform: none; }
  .main-nav > a, .main-nav .nav-dropdown { width: 100%; }
  .main-nav > a { padding: 13px 6px; font-size: var(--fs-300); border-bottom: 1px solid var(--border); }
  .main-nav .nav-dropdown > summary { padding: 13px 6px; font-size: var(--fs-300); border-bottom: 1px solid var(--border); }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-soft) 90%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--paper) 50%, transparent), var(--shadow-sm);
  backdrop-filter: blur(18px);
}

.brand-strip {
  color: var(--paper);
  background:
    linear-gradient(90deg, #111 0, #1b1817 46%, #5c1114 75%, #a98a5b 115%);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.brand-strip-inner {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-size: var(--fs-100);
  font-weight: 800;
  text-transform: uppercase;
}

.brand-strip-inner span:first-child {
  color: var(--paper);
  letter-spacing: 0;
}

.brand-strip-inner span:nth-child(2) {
  color: color-mix(in srgb, var(--paper) 72%, transparent);
}

.brand-strip-inner a {
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid var(--metal);
}

.header-wrap {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
  line-height: 0;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .18));
}

body.dark .brand-mark img {
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .36));
}

/* =========================================================================
   Primary navigation
   -------------------------------------------------------------------------
   Four destinations, no duplicates, and one flat category panel — an outlet
   shopper should reach "дамски обувки" in one click, not three.

   Colour discipline: GOLD (--metal) marks structure and state; SCARLET
   (--accent-2) is reserved for a price drop and appears nowhere else here.
   ========================================================================= */

.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.main-nav > a,
.nav-dropdown > summary {
  position: relative;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border-radius: 0;
  text-decoration: none;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-base) var(--ease);
}

.nav-dropdown > summary::-webkit-details-marker { display: none; }

/* A caret drawn from two rules rather than a glyph, so it rotates cleanly and
   keeps the hairline language of the rest of the header. */
.nav-dropdown > summary::before {
  content: "";
  order: 2;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur-base) var(--ease-premium);
}

.nav-dropdown[open] > summary::before {
  transform: translateY(1px) rotate(-135deg);
}

.main-nav > a:hover,
.main-nav > a:focus-visible,
.main-nav > a.active,
.nav-dropdown > summary:hover,
.nav-dropdown[open] > summary,
.nav-dropdown.active > summary {
  color: var(--text);
  background: transparent;
}

/* One hover idiom for the whole header: a gold rule that wipes in from the
   left. Replaces the old scarlet pill and a second competing ::after. */
.main-nav > a::after,
.nav-dropdown > summary::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  height: 2px;
  background: var(--metal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-premium);
}

.main-nav > a:hover::after,
.main-nav > a:focus-visible::after,
.main-nav > a.active::after,
.nav-dropdown > summary:hover::after,
.nav-dropdown[open] > summary::after,
.nav-dropdown.active > summary::after {
  transform: scaleX(1);
}

.main-nav > a:focus-visible,
.nav-dropdown > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Live counts. Hidden until there is a number worth reporting. */
.nav-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--metal);
  color: var(--carbon);
  font-family: var(--font-body);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0;
}
.nav-count[hidden] { display: none; }

/* ---- Category panel ----------------------------------------------------- */

.nav-dropdown { position: relative; }

.nav-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  translate: -50% 0;
  z-index: 90;
  width: max-content;
  max-width: min(760px, calc(100vw - 32px));
  overflow: hidden;
  border: 1px solid var(--border);
  border-top: 2px solid var(--metal);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  box-shadow: var(--shadow-lift);
}

.nav-dropdown[open] .nav-menu {
  animation: navPanelIn var(--dur-base) var(--ease-expo) both;
}

@keyframes navPanelIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.nav-mega {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) minmax(168px, auto);
  gap: clamp(20px, 3vw, 38px);
  padding: clamp(20px, 2.6vw, 28px);
}

.nav-col { min-width: 0; }

/* Poster-scale headings: the one place the display face is allowed to shout. */
.nav-col-title {
  position: relative;
  margin: 0 0 14px;
  padding-bottom: 10px;
  font-family: var(--font-poster);
  font-size: var(--fs-400);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--text);
}

.nav-col-title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--metal);
  transform: scaleX(0);
  transform-origin: left;
}

.nav-dropdown[open] .nav-col-title::after {
  animation: navRuleWipe 420ms var(--ease-expo) 60ms both;
}

@keyframes navRuleWipe {
  to { transform: scaleX(1); }
}

.nav-col-list {
  display: grid;
  gap: 1px;
}

.nav-menu a {
  position: relative;
  display: block;
  padding: 8px 0 8px 16px;
  border-radius: 0;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--fs-200);
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  will-change: transform;
  transition: color var(--dur-fast) var(--ease), transform var(--dur-base) var(--ease-premium);
}

/* A gold rule that slides out of the left margin on hover; the list stays
   perfectly flush when idle. */
.nav-menu a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 1px;
  background: var(--metal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-premium);
}

/* The nudge is a transform, not a padding change: padding reflows the whole
   category panel on every mouse-over. */
.nav-menu a:hover,
.nav-menu a:focus-visible,
.nav-menu a.active {
  color: var(--text);
  transform: translateX(6px);
  background: transparent;
}

.nav-menu a:hover::before,
.nav-menu a:focus-visible::before,
.nav-menu a.active::before {
  transform: scaleX(1);
}

.nav-menu a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.nav-col-all {
  font-weight: 800;
  color: var(--text);
}

/* Stagger the links in as the panel opens — one orchestrated moment. */
.nav-dropdown[open] .nav-col-list a {
  animation: navItemIn 320ms var(--ease-expo) both;
}
.nav-dropdown[open] .nav-col-list a:nth-child(1) { animation-delay: 70ms; }
.nav-dropdown[open] .nav-col-list a:nth-child(2) { animation-delay: 94ms; }
.nav-dropdown[open] .nav-col-list a:nth-child(3) { animation-delay: 118ms; }
.nav-dropdown[open] .nav-col-list a:nth-child(4) { animation-delay: 142ms; }
.nav-dropdown[open] .nav-col-list a:nth-child(5) { animation-delay: 166ms; }
.nav-dropdown[open] .nav-col-list a:nth-child(n+6) { animation-delay: 190ms; }

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

/* ---- The markdown tag --------------------------------------------------- */
/* An outlet's own artifact: the swing ticket off a marked-down garment. Flat
   and typographic — the punched hole and the proportion carry the idea, so it
   needs no texture, no shadow and no string. The numbers come from the catalog. */

.nav-deal {
  position: relative;
  align-self: start;
  display: grid;
  gap: 2px;
  padding: 30px 18px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  text-align: center;
}
.nav-deal[hidden] { display: none; }

.nav-deal::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 50%;
  translate: -50% 0;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--bg-soft);
}

.nav-deal-eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav-deal-figure {
  margin: 2px 0 0;
  font-family: var(--font-poster);
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -0.02em;
  color: var(--accent-2);
}

.nav-deal-name {
  margin: 4px 0 12px;
  font-family: var(--font-body);
  font-size: var(--fs-100);
  font-weight: 600;
  line-height: 1.3;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nav-menu .nav-deal-link {
  padding: 9px 12px;
  border: 1px solid var(--text);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.nav-menu .nav-deal-link::before { content: none; }
.nav-menu .nav-deal-link:hover,
.nav-menu .nav-deal-link:focus-visible {
  padding-left: 12px;
  background: var(--text);
  color: var(--bg-soft);
}

/* ---- Utility row -------------------------------------------------------- */

.nav-mega-foot {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 2.4vw, 26px);
  padding: 13px clamp(20px, 2.6vw, 28px);
  border-top: 1px solid var(--border);
  background: var(--bg-muted);
}

.nav-menu .nav-mega-foot a {
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.nav-menu .nav-mega-foot a::before { content: none; }
.nav-menu .nav-mega-foot a:hover,
.nav-menu .nav-mega-foot a:focus-visible {
  padding-left: 0;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--metal);
}

@media (prefers-reduced-motion: reduce) {
  .nav-dropdown[open] .nav-menu,
  .nav-dropdown[open] .nav-col-list a,
  .nav-dropdown[open] .nav-col-title::after {
    animation: none;
  }
  .nav-col-title::after { transform: scaleX(1); }
}


.header-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Button geometry and voice live in ONE place: the tiered system further down
   ("Buttons — one system"). Two earlier base declarations used to sit here and
   were overridden property for property, so anyone tuning padding here saw
   nothing change. */

#themeToggle {
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  padding: 0;
  font-size: var(--fs-400);
  line-height: 1;
}

.cart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--btn-text);
  border-color: var(--accent);
  text-decoration: none;
}

/* Cart toggle = ink (navigation, opens the drawer — not a "buy" action).
   Red is reserved for sale + the buy button. Was a red->black gradient,
   which is exactly the button/colour "chaos" to remove. */
body:not(.dark) .cart-btn {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--btn-text);
  text-shadow: none;
}

.cart-btn span {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--metal);
  color: var(--carbon);
  font-size: var(--fs-200);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
}

/* Hover and press states are per tier — see the CONTROLS section at the end
   of this file. A shared opacity nudge told the customer nothing. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 68%, transparent);
  outline-offset: 3px;
}

/* The footer slab, its top rule and its padding are declared further down the
   file; this block only ever contributed a 4px scarlet rule that has not
   rendered since. Deleted with the .footer-grid / .footer-contact / .footer-map
   design it belonged to — that whole footer was replaced and never removed. */

.footer-logo {
  width: 178px;
  height: 62px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}
/* Footer slab is always dark → render the (red) logo as a clean light wordmark
   for contrast/readability (header + 404 logos on light bg stay untouched). */
.footer-logo img {
  filter: brightness(0) invert(1);
  opacity: .92;
}

.social-links {
  display: flex;
  gap: 10px;
  align-items: center;
}

.social-btn {
  width: 46px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-pill);
  color: var(--paper);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, opacity .18s ease;
}

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

.social-btn svg {
  width: 23px;
  height: 23px;
  fill: currentColor;
}

.social-btn.instagram svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
}

.facebook {
  background: #1877f2;
}

.instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0 12%, #fd5949 42%, #d6249f 62%, #285aeb 100%);
}

/* Solid paper — primary action on dark media (hero/film). Flattened from a
   white->gold gradient to one clean surface. */
.btn-light {
  background: oklch(0.99 0.004 85);
  color: #151312;
  border-color: color-mix(in srgb, var(--paper) 92%, transparent);
}

.btn-secondary {
  background: transparent;
  color: var(--text);
}

.danger-btn {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 38%, var(--border));
}

.btn:disabled,
.theme-btn:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.account-btn {
  white-space: nowrap;
}

.store-hero {
  position: relative;
  /* Fill the first screen MINUS the bars stacked above it on load
     (brand-strip ~32px + sticky header ~77px). Clamped so it never
     overflows short/scaled laptops nor letterboxes on tall monitors. */
  min-height: clamp(420px, calc(100svh - 108px), 680px);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  color: var(--paper);
  background: var(--carbon);
}

/* legacy skewed-red column + vertical "OUTLET DROP" retired (the
   cinematic video layer + ink scrim replace them) */
.store-hero::before,
.store-hero::after { content: none; display: none; }

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: min(1220px, 100%);
  padding: clamp(56px, 10vh, 112px) 0 clamp(52px, 9vh, 88px);
}

.hero-badge,
.eyebrow,
.tag,
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-md);
  padding: 7px 10px;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: var(--fs-200);
  font-weight: 800;
}

.store-hero .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .3);
  color: var(--paper);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: none;
  box-shadow: none;
  backdrop-filter: blur(6px);
}
.store-hero .hero-badge::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--metal);
}

/* Text headline (editorial) replaces the logo-as-title — the logo already
   lives in the header, and a value-proposition headline is a stronger hook.
   Red survives on one word only: the discount. */
.store-hero .hero-title {
  margin: 14px 0 16px;
  max-width: 18ch;
  font-size: var(--fs-display);
  line-height: .97;
  letter-spacing: -0.02em;
  text-shadow: 0 6px 34px rgba(0, 0, 0, .5);
}
.store-hero .hero-title span { display: block; }
.hero-em { color: oklch(0.635 0.214 27); }

.hero-logo {
  width: min(420px, 80vw);
  height: auto;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .5));
}

.hero-copy {
  max-width: 48ch;
  margin: 0;
  color: color-mix(in srgb, var(--paper) 88%, transparent);
  font-size: var(--fs-300);
  line-height: 1.7;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .4);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(28px, 4vh, 40px);
}

/* Hero secondary = white ghost, paired with the paper primary (one clear
   primary, one quiet alternative — no two competing solids). */
.btn-ghost-light {
  background: transparent;
  color: var(--paper);
  border-color: color-mix(in srgb, var(--paper) 55%, transparent);
  box-shadow: none;
}
.btn-ghost-light:hover {
  background: rgba(255, 255, 255, .12);
  border-color: var(--paper);
  color: var(--paper);
}

/* Declutter (owner: премахни clutter-а): hide the Martin-merge floating
   action buttons (back-to-top + quick-call). Their JS still runs untouched;
   this only hides them for the premium-minimal direction. */
.scroll-top-btn,
.quick-call-btn { display: none !important; }

.service-strip {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent-3) 10%, var(--bg-soft)), var(--bg-soft) 32%, color-mix(in srgb, var(--sun) 14%, var(--bg-soft)));
  border-bottom: 1px solid var(--border);
}

/* Four tiles, four columns. Three columns left the fourth alone on its own row
   at a third of the width — the strip is authored in products.html with four
   children, so the grid has to say four. */
.service-strip-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 14px 0;
  background: transparent;
}

@media (max-width: 1000px) {
  .service-strip-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.service-strip-inner > div {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 4px;
  padding: 17px 18px 17px 22px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-pop) 86%, transparent);
  box-shadow: var(--shadow-sm);
}

/* Side-stripe removed (banned). ::before now carries a gold line-icon so each
   tile is scannable at a glance (text→visual), masked = single-colour, theme-safe. */
.service-strip-inner > div::before {
  content: "";
  width: 26px;
  height: 26px;
  margin-bottom: 2px;
  background: var(--accent-label);
  /* The `, none` fallback is load-bearing: an undefined --svc-ico makes the
     whole mask declaration invalid, mask falls back to none, and the tile
     paints a solid gold rectangle instead of an icon. */
  -webkit-mask: var(--svc-ico, none) center / contain no-repeat;
  mask: var(--svc-ico, none) center / contain no-repeat;
}
.service-strip-inner > div:nth-child(1) { --svc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h11v10H3z'/%3E%3Cpath d='M14 10h4l3 3v4h-7z'/%3E%3Ccircle cx='7' cy='18' r='1.6'/%3E%3Ccircle cx='17.5' cy='18' r='1.6'/%3E%3C/svg%3E"); }
.service-strip-inner > div:nth-child(2) { --svc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E"); }
.service-strip-inner > div:nth-child(3) { --svc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8l-9-5-9 5v8l9 5z'/%3E%3Cpath d='M3.3 7.5 12 12l8.7-4.5'/%3E%3Cpath d='M12 12v9.5'/%3E%3C/svg%3E"); }
/* The pin belongs to the shop tile, not the delivery one — tile 1 now carries
   a van, tile 4 the location it ships from. */
.service-strip-inner > div:nth-child(4) { --svc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }

.service-strip strong {
  font-size: var(--fs-200);
  font-weight: 600;
}

.service-strip span {
  color: var(--muted);
  font-size: var(--fs-200);
}

/* Global scroll-reveal — sections rise as they enter the viewport. Pure CSS
   scroll-driven animation; gated so non-supporting browsers + reduced-motion
   users see content normally (no JS, app.js untouched). */
@keyframes revealUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .service-strip,
    .catalog-head,
    .film-band,
    .product-detail-grid {
      animation: revealUp .8s var(--ease) both;
      animation-timeline: view();
      animation-range: entry 2% entry 56%;
    }
  }
}

.catalog-section,
.auth-section,
.admin-section,
.product-detail-section {
  padding: 46px 0 62px;
}

.page-main {
  min-height: calc(100svh - 72px);
}

.back-link {
  display: inline-flex;
  margin-bottom: 18px;
  color: var(--muted);
  font-weight: 800;
  text-decoration: none;
}

.product-detail-section .back-link {
  position: static;
  align-items: center;
  min-height: 0;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--muted);
  box-shadow: none;
  backdrop-filter: none;
}
.product-detail-section .back-link::before { content: "\2190\00a0"; }

.back-link:hover {
  color: var(--text);
}

.catalog-section {
  scroll-margin-top: 126px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-3) 7%, transparent), transparent 24rem),
    linear-gradient(180deg, var(--surface-pop) 0, color-mix(in srgb, var(--bg) 70%, var(--bg-soft)) 100%);
  border-top: 0;
}

.catalog-head,
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 18px;
}

.catalog-head h2 {
  position: relative;
  width: fit-content;
}

.catalog-head h2::after {
  content: "";
  position: absolute;
  left: 2px;
  bottom: -12px;
  width: min(72px, 46%);
  height: 5px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--metal), var(--sun), var(--accent-3));
}

.catalog-head h2,
.section-heading h1,
.section-heading h2 {
  margin: 7px 0 0;
  font-size: var(--fs-700);
  line-height: 1;
  letter-spacing: 0;
}

.search-input,
.filters select,
.price-inputs input,
.admin-search input,
.admin-promo-form input,
.admin-promo-form select,
.promo-admin-view select,
.admin-product-form input,
.admin-product-form select,
.admin-product-form textarea,
.form-grid input,
.checkout-form input,
.checkout-form select,
.checkout-form textarea,
.promo-code-form input,
.excel-form input[type="file"] {
  width: 100%;
  /* Same boundary token as the global field rule. When this said --border, a
     <select> kept the pale hairline while the text input directly above it took
     the darker one from the global rule, on the panel the owner uses daily. */
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  color: var(--text);
  padding: 13px 14px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.search-input {
  max-width: 380px;
  min-height: 48px;
  box-shadow: none;
}

.page-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 20px 0 18px;
}

.page-btn.active {
  background: var(--accent);
  color: var(--btn-text);
  border-color: var(--accent);
}

.filters {
  display: grid;
  grid-template-columns: minmax(260px, 1.2fr) minmax(180px, .9fr) minmax(180px, .9fr);
  gap: 18px;
  padding: 20px 22px;
  align-items: start;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  box-shadow: var(--shadow);
}

.filter-toggle {
  display: none;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-soft);
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.filter-clear {
  align-self: end;
  justify-self: start;
  min-height: 0;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-muted);
  color: var(--ink-soft);
  font-size: var(--fs-200);
  font-weight: 600;
}

.price-filter,
.range-stack {
  display: grid;
  gap: 10px;
}

/* .range-row dual-track slider styling moved to the editorial block in appendStyles (single track + red fill between thumbs). */

.price-inputs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.filters label,
.form-grid label,
.checkout-form label,
.payment-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 800;
}

.products-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 26px 0 16px;
  scroll-margin-top: 128px;
  gap: 16px;
}

/* ===== Catalog controls: sort + filter chips + skeleton + empty state ===== */
.catalog-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sort-field { display: flex; align-items: center; gap: 8px; }
.sort-label { font-size: var(--fs-200); color: var(--muted); font-weight: 600; white-space: nowrap; }
.select-wrap-sm { min-width: 196px; }
.select-wrap-sm select { padding-top: 9px; padding-bottom: 9px; font-size: var(--fs-200); }

.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.filter-chips[hidden] { display: none; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--bg-soft); color: var(--text); font-family: var(--font-body);
  font-size: var(--fs-200); font-weight: 600; cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.filter-chip .chip-x { font-size: var(--fs-300); line-height: 1; color: var(--muted); margin-top: -1px; }
.filter-chip:hover { border-color: var(--accent); }
.filter-chip:hover .chip-x { color: var(--text); }
.filter-chip-clear { background: transparent; color: var(--muted); font-weight: 600; border-style: dashed; }
.filter-chip-clear:hover { color: var(--accent-2); border-color: var(--accent-2); }
.filter-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@keyframes skShimmer { 0% { background-position: -460px 0; } 100% { background-position: 460px 0; } }
.skeleton-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-soft); }
.skeleton-card .sk-img { aspect-ratio: 4 / 5; }
.skeleton-card .sk-line { height: 11px; border-radius: var(--radius-md); margin: 12px 14px 0; }
.skeleton-card .sk-line.sk-sm { width: 42%; height: 9px; margin-top: 14px; }
.skeleton-card .sk-line.sk-x { width: 60%; margin-bottom: 16px; }
.skeleton-card .sk-img,
.skeleton-card .sk-line {
  background: linear-gradient(90deg, var(--bg-muted) 25%, color-mix(in srgb, var(--bg-muted) 55%, var(--bg-soft)) 50%, var(--bg-muted) 75%);
  background-size: 920px 100%;
  animation: skShimmer 1.25s linear infinite;
}

#emptyState.hidden { display: none; }
#emptyState:not(.hidden) {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 6px; padding: 56px 24px;
}
.empty-icon { width: 46px; height: 46px; color: var(--metal); margin-bottom: 6px; }
.empty-title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-400); margin: 0; }
.empty-sub { color: var(--muted); margin: 0 0 8px; max-width: 42ch; }
.empty-clear { margin-top: 4px; }

.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; }

.product-count {
  color: var(--muted);
  font-size: var(--fs-200);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
  min-height: 1.2em;
  line-height: 1.2;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

/* Explicit steps, not auto-fit arithmetic. auto-fit produced a card that got
   WIDER as the viewport got narrower (356px at 759px, 231px at 760px, one
   516px card per row at 540px). Column count now only ever goes up. */
@media (min-width: 700px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.product-card,
.card {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.product-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  box-shadow: none;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.product-media-link,
.product-title-link {
  color: inherit;
  text-decoration: none;
}

.product-media-link {
  position: relative;
  display: block;
}

.product-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--carbon) 32%, var(--border));
  box-shadow: var(--shadow-lift);
}

body.dark .product-card:hover {
  border-color: color-mix(in srgb, var(--metal) 60%, var(--border));
}

.product-card:hover .product-title-link {
  color: var(--accent-label);
}

.product-media {
  position: relative;
  overflow: hidden;
  background: #151312;
  border-radius: 0;
  aspect-ratio: 4 / 5;
}

/* OUR hover-reveal strip — full-bleed gradient label rising from the bottom */
.product-media::after {
  content: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-200);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  background: linear-gradient(0deg, color-mix(in srgb, var(--carbon) 82%, transparent), transparent);
  transform: translateY(100%);
  opacity: 0;
  transition: transform .34s var(--ease-expo), opacity .34s var(--ease);
  pointer-events: none;
}

.product-card:hover .product-media::after {
  opacity: 1;
  transform: translateY(0);
}

.product-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 65%, transparent);
  outline-offset: 3px;
}

.product-image {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--bg-muted);
  transition: transform .32s ease, filter .32s ease;
}

.product-card:hover .product-image {
  transform: scale(1.055);
  filter: saturate(1.09) contrast(1.04);
}

.favorite-btn {
  width: 44px;
  height: 44px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg-soft) 92%, transparent);
  color: var(--accent-2);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
}

.product-media .favorite-btn {
  position: absolute;
  top: 12px;
  right: 12px;
}

/* OUR bold discount slab — sharp solid red signal anchored to the top-left corner, NO glow */
.discount-badge,
.promo-badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  min-width: 0;
  padding: 9px 13px;
  border-radius: 0;
  background: var(--red-fill);
  color: var(--on-red);
  font-family: var(--font-poster);
  font-size: var(--fs-300);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  box-shadow: none;
}

/* HIS is_promo, restyled in OUR aesthetic: a quiet carbon slab (red stays the sale-only signal) */
.promo-badge {
  background: var(--carbon);
  /* --on-red is light in BOTH themes; --btn-text flips to near-black in dark and
     vanished on the carbon slab (~1.05:1). Never pair --btn-text with --carbon. */
  color: var(--on-red);
  font-size: var(--fs-100);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.favorite-btn.active {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: var(--paper);
}
.favorite-btn svg { width: 22px; height: 22px; }
.favorite-btn.active svg { fill: currentColor; }

.product-content {
  gap: 5px;
  padding: 15px 15px 17px;
  display: flex;
  flex: 1;
  flex-direction: column;
}

/* OUR card: brand·category as a small uppercase gold eyebrow ABOVE the title */
.product-content .product-meta {
  order: -1;
  margin: 0;
  color: var(--accent-label);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.product-content h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-300);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.16;
}

.product-head,
.section-row,
.profile-head,
.summary-line,
.price-row,
.cart-line,
.cart-item-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.product-head h3,
.cart-header h3,
.section-row h4,
.section-row h3,
.profile-head h3 {
  margin: 0;
}

.product-head h3 {
  font-size: var(--fs-300);
  line-height: 1.28;
}

.product-meta {
  margin: 7px 0 0;
  line-height: 1.35;
}

.tag-list {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 6px 0;
}

.tag {
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  color: var(--muted);
  font-size: var(--fs-100);
  background: color-mix(in srgb, var(--bg-soft) 66%, var(--bg-muted));
}

.discount-tag {
  background: color-mix(in srgb, var(--danger) 10%, var(--bg-muted));
  color: var(--danger);
  font-weight: 800;
}

.description {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  min-height: 0;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.small-note,
.product-meta,
.upload-message,
.empty-message,
.order-meta,
.order-sub,
.stat-card span {
  color: var(--muted);
}

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
  margin-top: 9px;
  padding-top: 0;
  flex-wrap: wrap;
}

.price-block {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.product-content .price { font-size: var(--fs-400); }
.product-content .price-bgn { font-size: var(--fs-100); }
.product-content .old-price { font-size: var(--fs-100); }

.price {
  font-size: var(--fs-400);
  font-weight: 800;
  white-space: nowrap;
}

.price-bgn {
  color: var(--muted);
  font-weight: 800;
  white-space: nowrap;
}

.old-price {
  order: -1;
  text-decoration: line-through;
  color: var(--muted);
  font-size: var(--fs-200);
  line-height: 1.25;
  white-space: normal;
}

.discount-line {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 7px 10px;
  border-radius: var(--radius-pill);
  /* --red-fill, not --accent-2: in dark theme --red-fill is a darker red so
     white text clears WCAG AA (4.5:1). The pill shows on nearly every card. */
  background: var(--red-fill);
  color: var(--on-red);
  font-size: var(--fs-200);
  font-weight: 800;
  letter-spacing: 0;
}

/* App toasts — premium ink pill + slide-up. Overrides app.js inline styles via
   class hooks (!important); app.js logic/behaviour untouched. */
.app-toast {
  background: var(--carbon) !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  padding: 11px 22px !important;
  box-shadow: var(--shadow) !important;
  transform: translateY(14px);
  transition: opacity .26s var(--ease-out), transform .26s var(--ease-out) !important;
}
.app-toast[style*="opacity: 1"] { transform: translateY(0); }
.app-toast.app-toast-success { background: var(--success-fill) !important; }
.app-toast.app-toast-error { background: var(--danger-fill) !important; }

.empty-state,
.admin-card {
  padding: 22px;
}

.hidden { display: none !important; }

.auth-grid,
.admin-grid,
.admin-stats-grid {
  display: grid;
  gap: 18px;
}

.auth-grid {
  grid-template-columns: repeat(2, 1fr);
}

.form-grid {
  display: grid;
  gap: 14px;
}

.orders-wrap {
  margin-top: 22px;
}

.order-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.order-card,
.cart-item,
.stat-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--bg-soft);
}

.order-card strong,
.stat-card strong {
  display: block;
  font-size: var(--fs-300);
  margin-bottom: 6px;
}

.order-sub,
.order-meta {
  line-height: 1.55;
}

/* ---- Admin order card ----------------------------------------------------
   The number, the status and the date are one row, because those three answer
   "which order is this and does it need me" without reading further. Everything
   below is detail for the orders that do. */
.order-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}

.order-card-date {
  margin-left: auto;
  color: var(--muted);
  font-size: var(--fs-100);
  font-variant-numeric: tabular-nums;
}

/* Restrained on purpose: only the status that needs her carries the accent.
   Colouring all five would make the wall of cards a wall of colour, which is
   the same as no signal at all. */
.order-status-badge {
  padding: 2px var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
  font-size: var(--fs-100);
  font-weight: 700;
  white-space: nowrap;
}

.order-status-badge[data-status="Нова"] {
  border-color: var(--accent-2);
  background: var(--accent-2);
  color: var(--on-red);
}

.order-status-badge[data-status="Доставена"] {
  border-color: var(--success);
  color: var(--success);
}

.order-status-badge[data-status="Отказана"] {
  color: var(--muted);
  text-decoration: line-through;
}

.order-card-who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-1);
}

.order-card-who strong {
  display: inline;
  margin: 0;
  font-size: var(--fs-300);
}

/* A parcel that needs a word gets one from here. Padded to clear the 24px tap
   minimum without pushing the row apart. */
.order-card-phone {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 var(--space-1);
  margin-inline-start: calc(var(--space-1) * -1);
  border-radius: var(--radius-sm);
  color: var(--accent-2);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-decoration: none;
}

.order-card-phone:hover,
.order-card-phone:focus-visible {
  text-decoration: underline;
}

.order-card-total {
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--fs-200);
}

.order-card-total strong {
  display: inline;
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--fs-400);
  font-variant-numeric: tabular-nums;
}

.order-items {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-muted);
}

.order-items-title {
  font-weight: 800;
}

.order-item-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.order-item-row strong,
.order-item-row span {
  display: block;
}

.order-item-row span {
  margin-top: 3px;
  color: var(--muted);
  font-size: var(--fs-200);
}

.order-item-row em {
  flex: 0 0 auto;
  color: var(--text);
  font-style: normal;
  font-weight: 800;
  text-align: right;
}

.order-admin-actions {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.order-status-form {
  display: flex;
  align-items: end;
  gap: 10px;
  flex: 1 1 320px;
  flex-wrap: wrap;
}

.order-status-form label {
  display: grid;
  gap: 6px;
  min-width: 190px;
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.order-status-form select {
  min-height: 42px;
}

.order-status-form .theme-btn {
  min-height: 42px;
}

.danger-order-btn {
  min-height: 42px;
  border-color: color-mix(in srgb, var(--danger) 38%, var(--border));
  color: var(--danger);
}

.danger-order-btn:hover {
  background: color-mix(in srgb, var(--danger) 9%, var(--bg-soft));
}

.order-status-message,
.order-delete-message {
  flex: 1 1 100%;
  margin: 0;
}

.admin-stats-grid {
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 18px;
}

.stat-card strong {
  font-size: var(--fs-600);
  margin-top: 6px;
}

.admin-grid {
  grid-template-columns: 1.2fr .8fr;
  margin-bottom: 18px;
}

/* ===== Admin panel shell =================================================
   A workplace, not a showcase. The owner runs the shop floor and the site with
   the same pair of hands, opens this between customers, often on a phone behind
   the counter. Density and one-press reach beat spaciousness.

   This replaced four stacked <details>: reaching "Артикули" was a scroll past
   every order and the whole promo form.
   ========================================================================= */

/* The status strip. Deliberately NOT three big-number cards across the top —
   that is the dashboard cliché, and two of these figures are things she acts on,
   not things she admires. They are buttons at label size, in a row, and pressing
   one does what she was going to do next anyway. */
.admin-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.admin-stat {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-soft);
  color: var(--text);
  font: inherit;
  text-align: left;
}

.admin-stat strong {
  font-family: var(--font-display);
  font-size: var(--fs-400);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.admin-stat span {
  color: var(--muted);
  font-size: var(--fs-200);
  font-weight: 600;
}

/* Only the two that DO something get the affordance. The third is a fact. */
.admin-stat-act {
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.admin-stat-act:hover {
  border-color: var(--border-strong);
  background: var(--surface-pop);
}

.admin-stat-act:active {
  background: var(--bg-muted);
}

/* Pending orders is the one number that means "there is work". It carries the
   red only when it is a button — the accent marks the thing to act on, never
   decoration. */
#statNewOrdersBtn strong {
  color: var(--accent-2);
}

.admin-tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  /* The four tabs measure 495px against a 375px phone, so this row scrolls and
     the last one starts off-screen. A hidden scrollbar with no other cue is a
     row that looks like it ends at "Промокодове". The mask fades the overflowing
     edge so there is visibly more to reach; it collapses to nothing once
     everything fits, because a fade over a full row is decoration. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  scroll-snap-type: x proximity;
}

@media (min-width: 620px) {
  .admin-tabs {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

.admin-tabs::-webkit-scrollbar { display: none; }

.admin-tab {
  flex: 0 0 auto;
  scroll-snap-align: start;
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: var(--fs-200);
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.admin-tab:hover {
  color: var(--text);
}

.admin-tab.is-selected {
  border-bottom-color: var(--accent-2);
  color: var(--text);
}

.admin-pane {
  margin-bottom: var(--space-5);
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  background: color-mix(in srgb, var(--bg-soft) 72%, var(--bg-muted));
  overflow: clip;
}

/* The pane takes focus when a tab opens it, so the next Tab lands inside the
   section rather than back at the top of the page. That focus ring would
   otherwise draw a box around the whole panel for no reason. */
.admin-pane:focus { outline: none; }
.admin-pane:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: -2px;
}

.admin-pane-body {
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.admin-pane-body.admin-grid {
  margin-bottom: 0;
}

#adminPromoDetails {
  overflow: visible;
}

.promo-admin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, .92fr);
  gap: 16px;
  align-items: start;
}

.admin-promo-form,
.promo-admin-view {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-soft);
}

.admin-promo-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-promo-form label,
.promo-admin-view label {
  display: grid;
  gap: 8px;
  font-weight: 800;
}

/* No `width: auto` here — it would undo the 24px tap minimum the base rule sets. */
.admin-promo-form input[type="checkbox"] {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.promo-date-field {
  position: relative;
  display: grid;
  gap: 8px;
  font-weight: 800;
}

.promo-date-label {
  display: block;
}

.promo-date-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 49px;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-soft);
  color: var(--muted);
  text-align: left;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.promo-date-trigger:hover,
.promo-date-trigger[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--text);
}

.promo-date-trigger.has-value {
  color: var(--text);
}

.promo-date-icon {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: var(--radius-sm);
}

.promo-date-icon::before,
.promo-date-icon::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  background: currentColor;
}

.promo-date-icon::before {
  top: 4px;
  height: 2px;
}

.promo-date-icon::after {
  top: -4px;
  left: 3px;
  right: 3px;
  height: 5px;
  background:
    linear-gradient(90deg, currentColor 0 2px, transparent 2px calc(100% - 2px), currentColor calc(100% - 2px));
}

.promo-date-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  width: min(360px, calc(100vw - 32px));
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--metal) 40%, var(--border));
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--shadow-lift);
}

.promo-calendar-head {
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.promo-calendar-head strong {
  text-align: center;
  text-transform: capitalize;
}

.promo-calendar-nav {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-soft);
  color: var(--text);
  font-size: var(--fs-400);
  font-weight: 800;
  cursor: pointer;
}

.promo-calendar-weekdays,
.promo-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.promo-calendar-weekdays {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.promo-calendar-empty,
.promo-calendar-day {
  min-height: 36px;
}

.promo-calendar-day {
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
}

.promo-calendar-day:hover {
  border-color: var(--border);
  background: var(--bg-soft);
}

.promo-calendar-day.is-today {
  border-color: color-mix(in srgb, var(--accent-2) 38%, var(--border));
  color: var(--accent-2);
}

.promo-calendar-day.is-selected {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--btn-text);
}

.promo-calendar-time {
  margin: 12px 0;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-soft);
}

.promo-calendar-time label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.promo-calendar-time input {
  min-height: 42px;
  padding: 10px 12px;
}

.promo-calendar-shortcuts,
.promo-calendar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.promo-calendar-shortcuts {
  margin-bottom: 12px;
}

.promo-calendar-shortcuts button {
  flex: 1 1 auto;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-soft);
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
}

.promo-calendar-actions {
  justify-content: flex-end;
}

.promo-calendar-actions .btn,
.promo-calendar-actions .theme-btn {
  min-height: 38px;
  padding: 9px 14px;
}

.promo-category-panel {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg-muted);
}

.promo-category-panel legend {
  padding: 0 6px;
  font-weight: 800;
}

.promo-category-panel .small-note {
  margin: 0;
}

.promo-category-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.promo-category-options.empty-message {
  display: block;
}

.promo-category-chip {
  display: inline-flex !important;
  align-items: center;
  gap: 8px !important;
  width: auto;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-soft);
  color: var(--text);
  font-size: var(--fs-200);
  line-height: 1;
  cursor: pointer;
}

/* The base rule owns the size, this owns the chrome. flex-shrink pinned because
   the chip is a flex row and a long category name would squeeze the box. */
.promo-category-chip input {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  accent-color: var(--accent);
}

.promo-category-chip:has(input:checked) {
  border-color: color-mix(in srgb, var(--metal) 60%, var(--border));
  background: color-mix(in srgb, var(--metal) 14%, var(--bg-soft));
  color: var(--accent-label);
}

.promo-admin-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg-muted);
}

.promo-admin-details.empty-message {
  display: block;
}

/* The two questions a promo code raises — is it still working, and how much is
   left — led by the code itself. Spans both columns; the detail rows below it
   keep the grid. */
/* Scoped, not bare: `.promo-admin-details div` below is (0,1,1) and would beat a
   lone `.promo-admin-lead` (0,1,0), turning this row back into a padded grid
   cell. Specificity here is load-bearing, not habit. */
.promo-admin-details .promo-admin-lead {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  padding: 0 0 var(--space-3);
  border-bottom: 1px solid var(--border);
}

.promo-admin-code {
  font-family: var(--font-display);
  font-size: var(--fs-400);
  font-weight: 800;
  letter-spacing: .02em;
}

.promo-admin-state {
  padding: 2px var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
  font-size: var(--fs-100);
  font-weight: 700;
}

/* A code whose allowance is gone stops being a live campaign, so it stops
   reading like one. Only this state is coloured — everything else here is
   neutral, and a red badge on a healthy code would mean nothing. */
.promo-admin-state[data-spent="true"] {
  border-color: var(--danger);
  color: var(--danger);
}

.promo-admin-left {
  margin-left: auto;
  color: var(--muted);
  font-size: var(--fs-200);
  font-variant-numeric: tabular-nums;
}

.promo-admin-details div {
  display: grid;
  gap: 5px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--bg-soft) 86%, transparent);
}

.promo-admin-details span {
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 600;
}

.promo-admin-details strong {
  font-size: var(--fs-300);
  overflow-wrap: anywhere;
}

.admin-list {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.8;
}

.excel-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.excel-form input[type="file"] {
  flex: 1;
}

.upload-message.success { color: var(--success); }
.upload-message.error { color: var(--danger); }

.product-admin-card {
  margin-bottom: 18px;
}

.admin-products-head {
  align-items: center;
  margin-bottom: 18px;
}

.admin-search {
  display: flex;
  gap: 10px;
  width: min(520px, 100%);
}

.admin-products-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}

.admin-products-layout.editing {
  grid-template-columns: minmax(280px, .9fr) minmax(340px, 1.1fr);
}

.admin-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.admin-product-tile {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-soft);
  color: var(--text);
  padding: 0;
  transition: transform .15s ease, border-color .18s ease, box-shadow .18s ease;
}

.admin-product-tile:hover {
  transform: translateY(-2px);
  border-color: var(--accent-2);
  box-shadow: var(--shadow-sm);
}

.admin-product-tile img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--bg-muted);
}

.admin-product-tile-content {
  display: grid;
  gap: 5px;
  padding: 10px;
}

.admin-product-tile-content strong {
  line-height: 1.25;
}

.admin-product-tile-content span {
  color: var(--muted);
  font-size: var(--fs-200);
  line-height: 1.35;
}

.admin-product-pill {
  justify-self: start;
  padding: 4px 7px;
  border-radius: var(--radius-pill);
  background: var(--bg-muted);
  color: var(--accent-2) !important;
  font-weight: 800;
}

.admin-product-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-soft);
}

.admin-product-form label {
  display: grid;
  gap: 8px;
  font-weight: 800;
}

/* Fifteen fields in one undifferentiated grid meant reading all of them to find
   the one you came for. Three groups, each with a quiet rule and a caption, so
   "цената" and "показвай ли се" are places rather than positions.

   A <fieldset> and not a wrapper div: form.elements still reaches every control
   through it, which is how app.js reads and writes this form, and a screen
   reader gets the caption announced with each field inside it. */
.admin-form-group {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-inline-size: 0;
  margin: 0;
  padding: var(--space-4) 0 0;
  border: 0;
  border-top: 1px solid var(--border);
}

/* The first group needs no rule above it — there is nothing to separate it from. */
.admin-form-group:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.admin-form-group > legend {
  float: left;
  width: 100%;
  margin-bottom: var(--space-1);
  padding: 0;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 620px) {
  .admin-form-group {
    grid-template-columns: 1fr;
  }
}

.admin-form-title {
  margin: 0;
}

.admin-size-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg-muted);
}

.stock-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg-muted);
}

.stock-panel h4 {
  margin: 0;
}

.stock-panel-head {
  align-items: center;
}

.stock-rows {
  display: grid;
  gap: 10px;
}

.stock-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(110px, .7fr) auto;
  gap: 10px;
  align-items: center;
}

/* Fifteen fields, and the owner usually came to change one of them — a price, or
   the "Показвай в магазина" tick. Запази sat past all fifteen, so a one-field
   correction ended in a scroll to the bottom to commit it. It rides the bottom
   of the form instead, inside the form's own scroll context, so the button that
   ends the task is always the one in reach.

   Backed by the surface rather than left transparent: it sits over inputs, and a
   see-through action bar over a text field is unreadable the moment they meet. */
.admin-form-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: var(--space-2) calc(var(--space-4) * -1) calc(var(--space-4) * -1);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
}

/* A form short enough to see whole does not need a bar pinned to its floor. */
@media (max-height: 560px) {
  .admin-form-actions {
    position: static;
    margin: 0;
    padding: 0;
    border-top: 0;
    background: none;
  }
}

.admin-image-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg-muted);
  padding: 12px;
}

.admin-image-preview figure {
  display: grid;
  gap: 6px;
  margin: 0;
}

.admin-image-preview img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.admin-image-preview figcaption {
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 800;
}

.checkbox-row {
  display: flex !important;
  align-items: center;
  gap: 10px;
}

/* Was `width: auto`, which undid the 24px minimum above and put the admin form's
   own boxes — "Показвай в магазина", "Показвай в раздел Промоции" — back at the
   browser default. The base rule already sizes them. */
.checkbox-row input {
  flex: 0 0 auto;
}

.form-wide {
  grid-column: 1 / -1;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(640px, calc(100% - 24px));
  height: 100dvh;
  z-index: 120;
  background: var(--bg);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 0;
  transform: translateX(100%);
  transition: transform .25s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.product-detail-grid {
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.product-gallery {
  display: grid;
  gap: 12px;
  position: sticky;
  top: 92px;
}

.detail-product-image {
  width: 100%;
  aspect-ratio: 6 / 7.5;
  /* contain (not cover) so the garment is NEVER cropped — a fashion PDP must
     show the full silhouette; cover was decapitating the on-model shots */
  object-fit: contain;
  object-position: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-muted);
  box-shadow: var(--shadow);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.detail-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 10px;
}

.detail-thumb {
  position: relative;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  background: var(--bg-muted);
  aspect-ratio: 1;
}

.detail-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-thumb.active {
  border-color: var(--metal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--metal) 22%, transparent);
}

.product-detail-info {
  display: block;
  align-content: start;
  padding-top: 4px;
}

.product-detail-info h1 {
  margin: 0 0 20px;
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.detail-price-block {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin: 0 0 26px;
}

.detail-price-block .price {
  font-size: var(--fs-600);
}

.detail-price-block .price-bgn {
  font-size: var(--fs-300);
}

.detail-price-block .old-price {
  font-size: var(--fs-300);
}

/* PDP primary buy = clean flat red — the single "this spends money" colour,
   matching cart "Към поръчката" + checkout. Was ink (identical to navigation),
   the core of the button inconsistency. */
.detail-cart-btn { flex: 1 1 auto; }

.detail-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 24px;
}

.detail-favorite-btn {
  flex: 0 0 auto;
  position: static;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-400);
}

.detail-favorite-btn svg {
  width: 22px;
  height: 22px;
}

.detail-favorite-btn.active {
  background: transparent;
  color: var(--accent-2);
  border-color: var(--accent-2);
}

.size-picker {
  display: grid;
  gap: 10px;
}

.size-picker-title {
  font-weight: 800;
}

.size-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.size-option {
  display: inline-grid;
  grid-template-columns: 1fr;
  gap: 2px;
  min-width: 58px;
  min-height: 46px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text);
  text-align: center;
}

.size-option span {
  font-weight: 800;
  line-height: 1.05;
}

.size-option small {
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 800;
  line-height: 1.05;
}

.size-option:not(.is-selected):not(.is-unavailable):hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.size-option.is-selected {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--btn-text);
  box-shadow: var(--shadow);
}

.size-option.is-selected small {
  color: currentColor;
}

.size-option.is-unavailable {
  cursor: not-allowed;
  color: var(--muted);
  background: var(--bg-muted);
  border-color: var(--border);
  box-shadow: none;
}

.size-option.is-unavailable span {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.cart-drawer.open {
  transform: translateX(0);
}

.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 11, .45);
  opacity: 0;
  pointer-events: none;
  z-index: 110;
  transition: opacity .25s ease;
}

.drawer-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 24px 26px 18px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
}

.cart-header h3 {
  font-size: var(--fs-500);
}

.cart-header .small-note {
  margin: 6px 0 0;
}

.cart-header .theme-btn {
  flex: 0 0 auto;
}

.cart-items {
  flex: 1 1 280px;
  min-height: 220px;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 18px 24px;
  background: var(--bg-muted);
  scrollbar-width: thin;
}

.cart-items-empty {
  place-items: center;
  align-content: center;
  background: var(--bg-soft);
}

.cart-empty-state {
  width: min(420px, 100%);
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
  padding: 44px 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.cart-empty-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--muted);
  font-weight: 800;
}

.cart-empty-state strong {
  font-size: var(--fs-400);
}

.cart-empty-state span {
  color: var(--muted);
  line-height: 1.45;
}

.cart-empty-state .theme-btn {
  margin-top: 6px;
  text-decoration: none;
}

.cart-item {
  display: grid;
  grid-template-columns: 98px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  padding: 12px;
  box-shadow: var(--shadow-sm);
}

.cart-item-image {
  width: 100%;
  min-height: 124px;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--bg-muted);
}

.cart-item-main {
  display: grid;
  gap: 12px;
  align-content: space-between;
  min-width: 0;
}

.cart-item .cart-item-top {
  align-items: flex-start;
}

.cart-item-title {
  font-weight: 800;
  font-size: var(--fs-300);
  line-height: 1.28;
}

.cart-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 7px;
  color: var(--muted);
  font-size: var(--fs-200);
  font-weight: 600;
}

.cart-item-meta span {
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-muted);
}

.qty-row {
  display: flex;
  align-items: center;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-soft);
  flex: 0 0 auto;
}

.qty-row span {
  min-width: 64px;
  text-align: center;
  padding: 0 8px;
  font-weight: 800;
}

.qty-btn,
.remove-btn {
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text);
  border-radius: var(--radius-md);
  padding: 7px 11px;
}

.qty-btn {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  font-weight: 800;
}

.qty-btn:hover {
  background: var(--bg-muted);
}

.remove-btn {
  position: relative;
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  padding: 0;
  font-size: 0;
  line-height: 0;
  background: color-mix(in srgb, var(--danger) 8%, var(--bg-soft));
  color: var(--danger);
}

.remove-btn::before {
  content: "×";
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: var(--fs-500);
  font-weight: 800;
  line-height: 1;
  transform: translateY(-1px);
}

.remove-btn:hover {
  background: color-mix(in srgb, var(--danger) 14%, var(--bg-soft));
}

.cart-line {
  align-items: center;
  flex-wrap: wrap;
}

.cart-line-price {
  display: grid;
  gap: 2px;
  margin-left: auto;
  text-align: right;
}

.cart-line-price span {
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 600;
}

.cart-line-price strong {
  font-size: var(--fs-300);
}

.cart-summary {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 0;
  padding: 18px 24px;
  background: var(--bg-soft);
}

.cart-summary .summary-line {
  align-items: center;
}

.cart-summary span {
  color: var(--muted);
  font-weight: 800;
}

.cart-summary strong {
  font-size: var(--fs-400);
  text-align: right;
}

.discount-summary strong {
  color: var(--success);
}

.promo-code-section {
  display: grid;
  gap: 10px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}

.promo-code-head {
  display: grid;
  gap: 3px;
}

.promo-code-head span {
  font-weight: 800;
}

.promo-code-head small {
  color: var(--muted);
  font-weight: 600;
}

.promo-code-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.promo-code-form .theme-btn {
  min-width: 104px;
}

.promo-code-message {
  min-height: 1.2em;
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-200);
  font-weight: 800;
}

.promo-code-message.error {
  color: var(--danger);
}

.promo-code-message.success {
  color: var(--success);
}

.cart-checkout-actions {
  padding: 18px 24px 24px;
  background: var(--bg-soft);
}

.cart-checkout-actions .btn {
  width: 100%;
}

.checkout-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.checkout-modal.open {
  opacity: 1;
  pointer-events: auto;
}

body.checkout-active .cart-drawer {
  transform: translateX(100%);
  pointer-events: none;
}

.checkout-panel {
  width: min(640px, calc(100vw - 32px));
  max-height: min(88vh, 760px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--shadow-lift);
  transform: translateY(14px) scale(.98);
  transition: transform .2s ease;
}

.checkout-modal.open .checkout-panel {
  transform: translateY(0) scale(1);
}

.checkout-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}

.checkout-modal-head h3 {
  margin: 0;
  font-size: var(--fs-500);
}

.checkout-modal-head .small-note {
  margin: 6px 0 0;
}

.checkout-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  overflow: auto;
  padding: 18px 24px 24px;
  background: var(--bg-soft);
  flex: 0 1 auto;
  max-height: min(48vh, 470px);
  scrollbar-width: thin;
}

.checkout-modal .checkout-form {
  flex: 1 1 auto;
  max-height: none;
}

.checkout-form > label,
.card-fields label {
  display: grid;
  gap: 7px;
  margin: 0;
}

.checkout-form > label:nth-of-type(3),
.checkout-form > label:nth-of-type(4),
.checkout-form .payment-wrap,
.checkout-form .card-fields,
.checkout-form #checkoutMessage,
.checkout-form #checkoutBtn {
  grid-column: 1 / -1;
}

.payment-wrap,
.delivery-wrap,
.card-fields {
  display: grid;
  gap: 10px;
}

.delivery-wrap {
  grid-column: 1 / -1;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-muted);
}

.delivery-head {
  display: grid;
  gap: 3px;
}

.delivery-head span {
  font-weight: 800;
}

.delivery-head small {
  color: var(--muted);
  font-weight: 600;
}

.delivery-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.delivery-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-soft);
  cursor: pointer;
}

.delivery-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--metal) 60%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--metal) 14%, transparent);
}

.delivery-option input {
  width: auto;
}

.delivery-option span {
  display: grid;
  gap: 2px;
}

.delivery-option strong {
  font-size: var(--fs-200);
}

.delivery-option small {
  color: var(--muted);
  font-weight: 800;
}

.delivery-fields {
  display: grid;
  grid-template-columns: minmax(120px, .65fr) minmax(160px, 1fr) minmax(180px, 1.25fr);
  gap: 10px;
}

.delivery-fields label {
  display: grid;
  gap: 7px;
  margin: 0;
}

.delivery-summary-box {
  padding: 12px 14px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  color: var(--muted);
  font-size: var(--fs-200);
  font-weight: 800;
  background: var(--bg-soft);
}

.delivery-summary-box.success {
  border-color: color-mix(in srgb, var(--success) 45%, var(--border));
  color: var(--success);
}

.delivery-summary-box.error {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
  color: var(--danger);
}

.payment-wrap {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.payment-label {
  grid-column: 1 / -1;
}

.card-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.checkout-form .payment-option {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin: 0;
  background: var(--bg-muted);
}

.checkout-form .payment-option:has(input:disabled) {
  opacity: .58;
  cursor: not-allowed;
}

/* `width: auto` lived here and was only harmless because the base rule's
   min-width outranks it — delete that min and the payment radio silently returns
   to a 13px target. The base rule owns the size; this row owns nothing. */
.payment-option input {
  flex: 0 0 auto;
}

#checkoutMessage {
  margin: 0;
}

.checkout-modal {
  align-items: center;
}

.checkout-panel {
  width: min(1060px, calc(100vw - 32px));
  max-height: min(92vh, 820px);
  background: var(--bg);
}

.checkout-modal-head {
  align-items: center;
  padding: 22px 26px;
}

.checkout-kicker {
  display: inline-flex;
  margin-bottom: 6px;
  color: var(--accent);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.checkout-close-btn {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  font-size: var(--fs-400);
  line-height: 1;
}

.checkout-form {
  display: block;
  max-height: none;
  padding: 0;
  overflow: auto;
  background: var(--bg);
  flex: 1 1 auto;
  min-height: 0;
}

.checkout-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
  align-items: start;
  gap: 0;
  min-height: 0;
}

.checkout-flow {
  display: grid;
  gap: 16px;
  padding: 22px 24px 26px;
  background: var(--bg);
}

.checkout-section {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  border-radius: var(--radius);
  background: var(--bg-soft);
  box-shadow: none;
}

.checkout-section-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.checkout-step {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--border-strong);
  font-size: var(--fs-200);
  font-weight: 600;
}

.checkout-section-head h4 {
  margin: 0;
  font-size: var(--fs-300);
  line-height: 1.2;
}

.checkout-section-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--fs-200);
  font-weight: 600;
}

.checkout-field-grid,
.delivery-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.checkout-field-grid label,
.delivery-fields label,
.card-fields label {
  display: grid;
  gap: 7px;
  margin: 0;
  color: var(--text);
  font-size: var(--fs-200);
  font-weight: 800;
}

.checkout-field-wide {
  grid-column: 1 / -1;
}

.delivery-wrap {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-soft) 92%, var(--paper)), var(--bg-soft));
}

/* The number of delivery methods is decided by the server (couriers configured
   + store pickup), so the grid auto-fits instead of assuming exactly four. */
.delivery-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.delivery-options-loading {
  margin: 0;
  padding: 14px;
  color: var(--muted);
  font-weight: 600;
}

.delivery-option {
  position: relative;
  min-height: 76px;
  align-items: flex-start;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: none;
}

.delivery-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* The native radio is visually hidden, so the label carries the focus ring. */
.delivery-option:has(input:focus-visible) {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.delivery-option-body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.delivery-option-body small {
  overflow-wrap: anywhere;
}

.delivery-option-price {
  margin-left: auto;
  align-self: center;
  white-space: nowrap;
  font-size: var(--fs-100);
  font-weight: 800;
  color: var(--accent-label);
}

.delivery-option-pickup .delivery-option-price {
  color: var(--success);
}

.delivery-pickup-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--bg-soft);
  color: var(--muted);
  font-size: var(--fs-200);
  font-weight: 600;
  line-height: 1.5;
}

.delivery-option-mark {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-top: 1px;
  border: 2px solid color-mix(in srgb, var(--muted) 38%, var(--border));
  border-radius: var(--radius-pill);
  background: var(--bg-soft);
}

/* Selected reads as the whole hairline going to ink, doubled inward for weight
   — not a stripe down one edge (banned, and it looked like a render fault). */
.delivery-option:has(input:checked) {
  border-color: var(--accent);
  background: var(--bg-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.delivery-option:has(input:checked) .delivery-option-mark {
  border-color: var(--accent);
  background: radial-gradient(circle, var(--accent) 42%, transparent 46%);
}

.delivery-option strong,
.payment-option strong {
  display: block;
  font-size: var(--fs-300);
  line-height: 1.2;
}

.delivery-option small,
.payment-option small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 800;
}

.delivery-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
}

.delivery-actions .theme-btn {
  min-width: 170px;
  justify-content: center;
}

.delivery-summary-box {
  display: flex;
  align-items: center;
  min-height: 48px;
  border-style: solid;
  background: var(--bg);
}

.payment-wrap {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.checkout-form .payment-option {
  align-items: flex-start;
  min-height: 68px;
  padding: 14px;
  background: var(--bg);
}

.payment-option input {
  margin-top: 2px;
}

.checkout-summary-panel {
  position: sticky;
  top: 0;
  align-self: start;
  min-height: min(100%, 620px);
  max-height: calc(min(92vh, 820px) - 96px);
  display: grid;
  gap: 16px;
  padding: 22px;
  border-left: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-muted) 76%, var(--bg-soft));
  overflow: auto;
}

.checkout-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.checkout-summary-head span {
  font-size: var(--fs-300);
  font-weight: 800;
}

.checkout-summary-head strong {
  color: var(--muted);
  font-size: var(--fs-200);
  font-weight: 800;
}

.checkout-summary-items {
  display: grid;
  gap: 12px;
  max-height: 270px;
  overflow: auto;
  padding-right: 3px;
}

.checkout-summary-empty {
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  font-weight: 800;
}

.checkout-summary-item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  position: relative;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: var(--radius);
  background: var(--bg-soft);
}

.checkout-summary-item img {
  width: 54px;
  height: 66px;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--bg-muted);
}

.checkout-summary-item strong,
.checkout-summary-item span {
  display: block;
}

.checkout-summary-item strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-200);
}

.checkout-summary-item span {
  margin-top: 3px;
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 800;
}

.checkout-summary-item em {
  grid-column: 2;
  color: var(--text);
  font-size: var(--fs-200);
  font-style: normal;
  font-weight: 800;
}

.checkout-totals {
  display: grid;
  gap: 10px;
  padding-top: 4px;
}

.checkout-totals > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  color: var(--muted);
  font-size: var(--fs-200);
  font-weight: 800;
}

.checkout-totals strong {
  color: var(--text);
  text-align: right;
}

.checkout-total-discount strong {
  color: var(--success);
}

.checkout-grand-total {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.checkout-grand-total span {
  color: var(--text);
}

.checkout-grand-total strong {
  font-size: var(--fs-400);
}

.checkout-summary-panel #checkoutMessage {
  min-height: 42px;
  display: flex;
  align-items: center;
}

.checkout-summary-panel #checkoutBtn {
  width: 100%;
  min-height: 50px;
}

.empty-message {
  padding: 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

@media (max-width: 1120px) {
  .header-wrap {
    flex-wrap: wrap;
  }

  .main-nav {
    justify-content: flex-start;
    padding-bottom: 4px;
  }

  .filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-grid,
  .admin-products-layout,
  .admin-products-layout.editing,
  .auth-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .container {
    width: min(100% - 24px, 1220px);
  }

  .brand-strip-inner {
    min-height: 36px;
    justify-content: center;
    gap: 12px;
    text-align: center;
  }

  .brand-strip-inner span:nth-child(2) {
    display: none;
  }

  .header-wrap,
  .catalog-head,
  .section-heading,
  .price-row,
  .profile-head,
  .cart-header,
  .cart-item-top,
  .summary-line {
    flex-direction: column;
    align-items: stretch;
  }

  /* One row, always: the icon controls keep their natural size and the cart
     absorbs the remaining width. Wrapping put the tools on two or three rows
     once ui-enhance.js injected the hamburger and the search button. */
  .header-tools {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

  .header-tools > * {
    flex: 0 0 auto;
    min-width: 0;
  }

  .header-tools > .cart-btn {
    flex: 0 1 auto;
    min-width: 0;
  }

  .main-nav {
    gap: 8px;
  }

  .logo {
    align-self: center;
  }

  .main-nav a {
    padding: 4px 0 8px;
  }

  .nav-dropdown summary {
    padding: 10px 12px;
  }

  .nav-menu a {
    padding: 10px 12px;
  }

  .store-hero {
    min-height: 72svh;
  }

  .hero-logo {
    width: min(360px, 86vw);
  }

  .hero-copy {
    font-size: var(--fs-300);
  }

  .hero-inner {
    padding: 52px 0;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .catalog-head h2,
  .section-heading h1,
  .section-heading h2 {
    font-size: var(--fs-600);
  }

  .search-input {
    max-width: 100%;
  }

  .filters,
  .admin-stats-grid,
  .promo-admin-layout,
  .admin-promo-form,
  .promo-admin-details,
  .admin-product-form,
  .admin-size-fields,
  .stock-row,
  .product-detail-grid {
    grid-template-columns: 1fr;
  }

  .admin-search,
  .excel-form {
    flex-direction: column;
    align-items: stretch;
  }

  .form-wide {
    grid-column: auto;
  }

  .product-detail-info h1 {
    font-size: var(--fs-700);
  }

  .detail-price-block .price {
    font-size: var(--fs-500);
  }

  .detail-actions {
    align-items: stretch;
  }

  .order-item-row {
    flex-direction: column;
  }

  .order-item-row em {
    text-align: left;
  }

  .cart-drawer {
    width: 100%;
  }

  .cart-header,
  .cart-item .cart-item-top,
  .cart-summary .summary-line {
    flex-direction: row;
    align-items: flex-start;
  }

  .cart-items {
    min-height: 200px;
    padding: 14px;
  }

  .cart-item {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 12px;
  }

  .cart-item-image {
    min-height: 112px;
  }

  .checkout-form,
  .payment-wrap,
  .delivery-options,
  .delivery-fields,
  .checkout-body,
  .checkout-field-grid,
  .delivery-actions,
  .card-fields {
    grid-template-columns: 1fr;
  }

  .checkout-form {
    max-height: none;
    padding: 0;
  }

  .checkout-flow {
    padding: 16px;
  }

  .checkout-section {
    padding: 15px;
  }

  .checkout-summary-panel {
    position: static;
    min-height: auto;
    max-height: none;
    padding: 16px;
    border-left: 0;
    border-top: 1px solid var(--border);
  }

  .checkout-summary-items {
    max-height: 220px;
  }

  .delivery-actions .theme-btn {
    width: 100%;
    min-width: 0;
  }

  .checkout-modal {
    padding: 12px;
    align-items: end;
  }

  .checkout-panel {
    width: 100%;
    height: 96dvh;
    max-height: 96dvh;
  }

  .checkout-modal-head {
    padding: 18px 16px 14px;
  }

  .checkout-modal-head .theme-btn {
    width: auto;
    min-width: 44px;
  }

  .checkout-modal .checkout-form {
    max-height: none;
  }

  .cart-checkout-actions {
    padding: 16px;
  }

  .promo-code-section {
    padding: 16px;
  }

  .promo-code-form {
    grid-template-columns: 1fr;
  }

  .promo-code-form .theme-btn {
    width: 100%;
  }

  .promo-date-popover {
    width: min(100%, calc(100vw - 48px));
  }

  .promo-calendar-actions .btn,
  .promo-calendar-actions .theme-btn {
    flex: 1 1 calc(50% - 6px);
  }

  .cart-summary {
    padding: 16px;
  }

}

@media (max-width: 520px) {
  .container {
    width: min(100% - 20px, 1220px);
  }

  .brand-strip {
    display: none;
  }

  .header-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 10px 0;
  }

  .footer-logo {
    width: 158px;
    height: 56px;
  }

  .hero-logo {
    width: min(260px, 78vw);
  }

  .header-tools {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 8px;
  }

  .header-tools > * {
    min-width: 0;
    flex-basis: auto;
  }

  #themeToggle {
    width: 44px;
    min-width: 44px;
  }

  .account-btn,
  .cart-btn {
    min-width: 0;
    padding-inline: 8px;
  }

  .account-btn {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .cart-btn {
    grid-column: 1 / -1;
  }

  .nav-dropdown {
    flex: 1 1 auto;
  }

  .nav-dropdown summary {
    justify-content: center;
    width: 100%;
    border: 1px solid var(--border);
    background: var(--bg-soft);
  }

  .nav-menu {
    position: static;
    margin-top: 6px;
    min-width: 100%;
  }

  .theme-btn,
  .cart-btn,
  .btn {
    width: 100%;
  }

  #themeToggle {
    width: 44px;
  }

  .main-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    width: 100%;
  }

  .nav-dropdown {
    grid-column: 1 / -1;
  }

  .main-nav a,
  .nav-dropdown summary {
    justify-content: center;
    padding-inline: 4px;
    font-size: var(--fs-200);
  }

  .catalog-section,
  .auth-section,
  .admin-section,
  .product-detail-section {
    padding: 32px 0 44px;
  }

  .filters,
  .admin-card {
    padding: 16px;
  }

  .price-inputs {
    grid-template-columns: 1fr;
  }

  .product-content {
    padding: 13px;
  }

  .product-grid {
    gap: 14px;
  }

  .cart-drawer {
    width: 100%;
    padding: 0;
  }

  .cart-header {
    padding: 18px 16px 14px;
  }

  .cart-header .theme-btn {
    width: auto;
    min-width: 44px;
  }

  .cart-item {
    grid-template-columns: 74px minmax(0, 1fr);
    padding: 10px;
  }

  .cart-item-image {
    min-height: 102px;
  }

  .cart-line-price {
    width: 100%;
    margin-left: 0;
    text-align: left;
  }

  .site-footer {
    padding: 26px 0;
  }

}

@media (max-width: 760px) {
  html {
    scroll-padding-top: 118px;
  }

  .product-detail-section .back-link {
    top: auto;
    bottom: 16px;
    left: 16px;
    z-index: 105;
  }

  .catalog-section {
    scroll-margin-top: 118px;
  }

  .service-strip-inner {
    grid-template-columns: 1fr;
  }

  .filter-toggle {
    display: inline-flex;
    margin-bottom: 10px;
  }

  .filters {
    max-height: 0;
    overflow: hidden;
    /* max-height:0 hides the panel visually but keeps its seven controls
       focusable; visibility is what removes them from the tab order. */
    visibility: hidden;
    padding: 0 16px;
    border-width: 0;
    opacity: 0;
    box-shadow: none;
      transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
    transform: translateY(-8px);
  }

  .filters.open {
    max-height: 860px;
    visibility: visible;
    padding: 16px;
    border-width: 1px;
    opacity: 1;
    transform: none;
    box-shadow: var(--shadow-sm);
  }

  .filter-clear {
    width: 100%;
  }

  .products-title-row {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
}

@media (max-width: 520px) {
  html {
    scroll-padding-top: 108px;
  }

  .catalog-section {
    scroll-margin-top: 108px;
  }

  .header-wrap {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 6px 0;
  }

  .logo {
    grid-column: 1;
    justify-self: start;
    width: 96px;
    height: 38px;
  }

  /* Flex, not a fixed 3-column grid: ui-enhance.js injects the hamburger and the
     search button into this row at runtime, so the child count is not known in
     CSS. Icon affordances keep their 40px square; the cart takes what is left. */
  .header-tools {
    grid-column: 2;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
  }

  .header-tools > #themeToggle,
  .header-tools > .account-btn,
  .header-tools > .nav-toggle {
    flex: 0 0 44px;
  }

  .header-tools > .cart-btn {
    flex: 1 1 auto;
    min-width: 0;
  }

  .header-tools > * {
    min-width: 0;
  }

  #themeToggle {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    flex: 0 0 auto;
  }

  /* Auth control collapses to an icon-only person glyph (text hidden via CSS,
     not markup). 40px square keeps a comfortable tap target without eating the
     row width the cart needs. */
  .account-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    flex: 0 0 auto;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    white-space: nowrap;
    text-indent: 0;
  }

  /* Monochrome person glyph (currentColor) — matches the file's SVG-mask icon
     idiom rather than a colour emoji, and inherits the theme text colour. */
  .account-btn::before {
    content: "";
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21v-1a8 8 0 0 1 16 0v1'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21v-1a8 8 0 0 1 16 0v1'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .cart-btn {
    grid-column: auto;
    width: auto;
    min-width: 0;
    min-height: 40px;
    padding: 8px 10px;
    font-size: var(--fs-200);
    flex: 1 1 auto;
  }

  .cart-btn span {
    flex: 0 0 auto;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    font-size: var(--fs-100);
  }

  .main-nav {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
    width: 100%;
  }

  .main-nav > a {
    flex: 0 0 auto;
  }

  .main-nav a,
  .nav-dropdown summary {
    min-height: 38px;
    justify-content: center;
    padding: 6px 10px;
    font-size: var(--fs-100);
    white-space: nowrap;
  }

  .nav-dropdown summary {
    width: auto;
    border: 0;
    background: transparent;
  }


  .store-hero {
    min-height: 0;
  }

  .store-hero::before {
    display: none;
  }

  .hero-inner {
    padding: 36px 0;
  }

  .service-strip-inner > div {
    padding: 12px 14px;
  }
}

@media (max-width: 520px) {
  .hero-copy {
    max-width: 32ch;
  }

  /* Both hero CTAs render on mobile: stacked, full-width, ~50px tall, below copy.
     (Previously display:none here, which dropped them entirely on phones.) */
  .store-hero .hero-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 360px;
  }

  .store-hero .hero-actions .btn {
    width: 100%;
    min-height: 50px;
    justify-content: center;
  }

  .catalog-head {
    gap: 12px;
    margin-bottom: 12px;
  }

  .catalog-head h2 {
    font-size: var(--fs-500);
  }

  .search-input {
    min-height: 42px;
    padding: 10px 12px;
    font-size: var(--fs-200);
  }

  .filter-toggle {
    min-height: 44px;
    margin-bottom: 8px;
    font-size: var(--fs-200);
  }

  .filters.open {
    gap: 10px;
    padding: 12px;
  }

  .range-row,
  .price-inputs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .filters select,
  .price-inputs input {
    min-height: 40px;
    padding: 9px 10px;
    font-size: var(--fs-200);
  }

  .filters label {
    margin-bottom: 6px;
    font-size: var(--fs-200);
  }

  .products-title-row {
    margin: 16px 0 10px;
  }

  .product-count {
    font-size: var(--fs-100);
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .product-card {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .product-media { border-radius: var(--radius-sm); overflow: hidden; }

  .product-card:hover {
    transform: none;
  }

  .product-media {
    background: var(--bg-muted);
  }

  .product-media-link::after {
    display: none;
  }

  .product-image {
    aspect-ratio: 4 / 5;
    object-position: top center;
  }

  /* >=44x44 tap target (was 32x32, below the 44px minimum). */
  .favorite-btn {
    width: 44px;
    height: 44px;
    font-size: var(--fs-300);
  }

  .product-media .favorite-btn {
    top: 6px;
    right: 6px;
  }

  .discount-badge {
    top: 6px;
    left: 6px;
    min-width: 40px;
    padding: 5px 7px;
    font-size: var(--fs-100);
  }

  .discount-badge::after {
    bottom: -5px;
    border-top-width: 5px;
    border-right-width: 7px;
  }

  /* Symmetric ~16px horizontal gutter so the price no longer sits flush against
     the card/viewport edge (was 8px all round). */
  .product-content {
    gap: 5px;
    padding: 12px 16px 14px;
  }

  .product-content h3 {
    min-height: 1.15em;
    font-size: var(--fs-200);
    line-height: 1.15;
    display: -webkit-box;
    overflow: hidden;
    /* One title line, not two. The second was usually a wrapped fragment; the
       space it cost now carries the brand, which is what a shopper filters on
       in a branded-outlet shop. */
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .product-meta {
    display: block;
    font-size: var(--fs-100);
    letter-spacing: 0.08em;
  }

  .tag-list,
  .description {
    display: none;
  }

  /* Stack on the narrow 2-up grid: price line, then a near-full-width add button.
     Keeps the price readable + right-aligned with a real gutter even at 320px,
     where a side-by-side button would crush the price column. */
  .price-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
    padding-top: 4px;
  }

  /* Real rendered button is .add-btn (app.js), not .btn — the old .price-row .btn
     rule matched nothing, so the button kept its sub-44px desktop height. Target
     .add-btn and guarantee a near-full-width >=44px tap target. */
  .price-row .add-btn {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 9px 10px;
    font-size: var(--fs-100);
    line-height: 1.1;
    white-space: normal;
  }

  /* Price right-aligned inside the padded box (no longer flush to the edge). */
  .price-block {
    min-height: 0;
    justify-items: end;
    text-align: right;
    gap: 0;
  }

  .price {
    font-size: var(--fs-300);
    line-height: 1.05;
  }

  .price-bgn {
    font-size: var(--fs-200);
    line-height: 1.15;
  }

  .old-price {
    font-size: var(--fs-100);
    line-height: 1.1;
  }
}

/* ===== Phase 3: Hero ===== */

/* ============================================================
   HERO — editorial merge port (OutletOne)
   Adds tokens HIS lacked + the cinematic media layer, desktop
   centering, and hero CTA refinement. Appended last so it wins.
   ============================================================ */

/* Cinematic video hero — self-hosted loop (assets/hero). The grade lives on
   .hero-media::after so the footage/poster stays neutral while type stays
   legible. With no enhance.js loaded, the <video> shows its poster and the
   grade still applies, so the hero reads as intended. */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--carbon);
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 26%;
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
    radial-gradient(120% 95% at 80% 14%, rgba(185, 154, 97, .16), transparent 56%),
    linear-gradient(180deg, rgba(8, 7, 7, .62) 0%, transparent 20%),
    linear-gradient(92deg, rgba(8, 7, 7, .92) 0%, rgba(8, 7, 7, .5) 38%, rgba(8, 7, 7, .12) 68%, transparent 100%),
    linear-gradient(0deg, rgba(8, 7, 7, .96) 0%, rgba(8, 7, 7, .35) 32%, transparent 60%);
  background-size: 160px 160px, cover, cover, cover, cover;
}

/* Hero entrance choreography (editorial rise), reduced-motion safe.
   Targets HIS hero element classes. */
@media (prefers-reduced-motion: no-preference) {
  .store-hero .hero-badge,
  .store-hero .hero-title,
  .store-hero .hero-copy,
  .store-hero .hero-actions {
    opacity: 0;
    animation: heroRise .8s var(--ease) forwards;
  }
  .store-hero .hero-badge   { animation-delay: .12s; }
  .store-hero .hero-title   { animation-delay: .26s; }
  .store-hero .hero-copy    { animation-delay: .42s; }
  .store-hero .hero-actions { animation-delay: .56s; }
}
@keyframes heroRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* Hero CTAs: arrow slide on the primary, calmer hover. Uses HIS .btn base. */
.hero-actions .btn { display: inline-flex; align-items: center; gap: 10px; }
.hero-actions .btn::after {
  content: ""; width: 20px; height: 12px; flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h21M16 1l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h21M16 1l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur-base) var(--ease);
}
.hero-actions .btn:hover::after { transform: translateX(5px); }

/* Hero PRIMARY = solid paper — the one bright, decisive action on the dark
   cinematic stage. (Secondary is .btn-ghost-light, a white ghost.) */
.store-hero .hero-actions .btn-light {
  background: oklch(0.99 0.004 85);
  border-color: transparent;
  color: #151312;
  backdrop-filter: none;
}
.store-hero .hero-actions .btn-light:hover {
  background: var(--paper);
  border-color: transparent;
  transform: none;
}

/* Desktop composition: centre the lockup on a tall stage so the headline is
   the focal point and the frame breathes top + bottom under the sticky header.
   Mobile keeps its bottom-anchored editorial framing. */
@media (min-width: 961px) {
  .store-hero {
    align-items: center;
    /* same header-aware formula, slightly taller cap for big screens */
    min-height: clamp(460px, calc(100svh - 116px), 720px);
  }
  .hero-inner {
    /* balanced padding so the centred lockup (incl. BOTH CTAs) always
       sits above the fold — was clamp(120,15vh,184) which pushed CTAs down */
    padding-top: clamp(48px, 7vh, 96px);
    padding-bottom: clamp(40px, 6vh, 80px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .store-hero .hero-badge,
  .store-hero .hero-title,
  .store-hero .hero-copy,
  .store-hero .hero-actions { opacity: 1; animation: none; }
  .hero-actions .btn::after { transition: none; }
}

/* ===== Phase 3: Product cards + grid ===== */

/* ============================================================
   Phase 3.x — Product cards + grid: OUR editorial identity
   ============================================================ */

/* Image fills the sharp 4/5 media slot; scale a touch more on hover (OUR feel) */
.product-image { aspect-ratio: 4 / 5; height: 100%; }
.product-card:hover .product-image { transform: scale(1.06); filter: saturate(1.05) contrast(1.02); }

/* Sale price shouts in red; struck original recedes (quiet --muted, lighter weight) */
.price { font-family: var(--font-display); letter-spacing: 0; }
.product-card .price,
.detail-price-block .price { color: var(--text); }
.product-card.is-sale .price,
.detail-price-block.is-sale .price { color: var(--accent-2); }
.product-card.is-sale .price-bgn { color: var(--ink-soft); font-weight: 600; }
.old-price { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Outline add button — fills carbon on hover, red on a sale card (OUR pattern).
   Reuses HIS .price-row layout; this replaces the old .price-row .btn target. */
.add-btn {
  flex: 0 0 auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-200);
  letter-spacing: 0;
  padding: 9px 15px;
  min-height: 0;
  white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.add-btn:hover { background: var(--accent-hover); color: var(--paper); border-color: var(--accent-hover); transform: translateY(-1px); }
.add-btn:active { transform: translateY(1px); }
.product-card.is-sale .add-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--paper); }
.add-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.add-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Sold-out: dim + desaturate the media (HIS adds .is-sold on the card) */
.product-card.is-sold .product-image { opacity: .6; filter: grayscale(.35); }

/* Entrance: gentle staggered rise, fully gated behind reduced-motion */
@media (prefers-reduced-motion: no-preference) {
  .product-grid .product-card { animation: cardIn .55s var(--ease) backwards; }
  .product-grid .product-card:nth-child(2) { animation-delay: .05s; }
  .product-grid .product-card:nth-child(3) { animation-delay: .1s; }
  .product-grid .product-card:nth-child(4) { animation-delay: .15s; }
  .product-grid .product-card:nth-child(5) { animation-delay: .2s; }
  .product-grid .product-card:nth-child(6) { animation-delay: .25s; }
  .product-grid .product-card:nth-child(n+7) { animation-delay: .3s; }
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* ===== Phase 3: Filters / catalog head ===== */

/* =====================================================================
   MERGE PORT — Filters / catalog head (editorial identity from our-redesign)
   ===================================================================== */

/* --- Catalog head: eyebrow as plain tracked scarlet text (not a chip) --- */
.catalog-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-label);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* --- Search: icon + clear, flat inside a wrap --- */
.search-wrap { position: relative; display: flex; align-items: center; width: 100%; max-width: 380px; }
.search-wrap .search-input { max-width: none; padding-left: 42px; padding-right: 48px; }
.search-icon { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.search-clear {
  position: absolute;
  right: 2px;
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  min-height: 0;
  background: transparent;
  border: 0;
  color: var(--muted);
  border-radius: var(--radius);
  transition: color var(--dur-fast) var(--ease);
}
.search-clear svg { width: 15px; height: 15px; }
.search-clear:hover { color: var(--accent-label); transform: none; opacity: 1; }
.search-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.search-clear[hidden] { display: none; }

/* --- Filter card labels --- */
.filters label,
.price-filter label {
  letter-spacing: 0;
  font-size: var(--fs-200);
  font-weight: 600;
  color: var(--ink-soft);
}

/* --- Price filter head + live readout (moved to top of the stack) --- */
.filter-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.filter-head label { margin: 0; }
.price-readout {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-200);
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* --- Dual-range slider: ONE track, red fill between the thumbs.
   --minp/--maxp are set by live.js initPriceRange; #priceBgn is its live BGN.
   Thumbs are sized to a >=24px tap area (WCAG) while the visible knob stays editorial. --- */
.range-stack { display: grid; gap: 12px; }
.range-row { position: relative; display: block; height: 32px; }
.range-track {
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--border-strong);
  pointer-events: none;
}
.range-fill {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--minp, 0%);
  right: calc(100% - var(--maxp, 100%));
  background: var(--metal);
  border-radius: var(--radius-pill);
}
.range-row input[type="range"] {
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 28px;
  margin: 0; padding: 0;
  background: transparent;
  pointer-events: none;
  accent-color: var(--accent);
  -webkit-appearance: none;
  appearance: none;
}
.range-row input[type="range"]::-webkit-slider-runnable-track { height: 28px; background: transparent; border: 0; }
.range-row input[type="range"]::-moz-range-track { height: 28px; background: transparent; border: 0; }
.range-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 26px; height: 26px;
  border-radius: var(--radius-pill);
  background: var(--bg-soft);
  border: 4px solid var(--accent);
  background-clip: padding-box;
  box-shadow: 0 2px 6px rgba(20, 17, 15, .22);
  cursor: grab;
  transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
.range-row input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 26px; height: 26px;
  border: 4px solid var(--accent);
  border-radius: var(--radius-pill);
  background: var(--bg-soft);
  background-clip: padding-box;
  box-shadow: 0 2px 6px rgba(20, 17, 15, .22);
  cursor: grab;
  transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
.range-row input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.08); }
.range-row input[type="range"]:hover::-moz-range-thumb { transform: scale(1.08); }
.range-row input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.14);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent);
  cursor: grabbing;
}
.range-row input[type="range"]:active::-moz-range-thumb {
  transform: scale(1.14);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent);
}
/* A solid double ring, not the 18% wash the drag state uses — otherwise focus
   and drag read the same and neither thumb says which one has the keyboard. */
.range-row input[type="range"]:focus-visible::-webkit-slider-thumb {
  transform: scale(1.14);
  box-shadow: 0 0 0 3px var(--bg-soft), 0 0 0 6px var(--accent);
}
.range-row input[type="range"]:focus-visible::-moz-range-thumb {
  transform: scale(1.14);
  box-shadow: 0 0 0 3px var(--bg-soft), 0 0 0 6px var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  .range-row input[type="range"]::-webkit-slider-thumb { transition: none; }
  .range-row input[type="range"]::-moz-range-thumb { transition: none; }
}

/* --- € number inputs + live BGN line --- */
.price-input-field { position: relative; display: block; }
.price-input-field .cur {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-weight: 600;
  pointer-events: none;
}
.price-input-field input { padding-left: 28px; }
.price-bgn { display: block; min-height: 1.1em; font-size: var(--fs-200); color: var(--muted); font-variant-numeric: tabular-nums; }

/* --- Selects: custom chevron + filtered (active) state --- */
.select-field label { display: block; margin-bottom: 8px; }
.select-wrap { position: relative; display: block; }
.select-wrap select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 40px;
  cursor: pointer;
}
.select-chevron {
  position: absolute;
  right: 13px; top: 50%;
  transform: translateY(-50%);
  width: 17px; height: 17px;
  color: var(--muted);
  pointer-events: none;
  transition: transform .18s var(--ease), color .18s var(--ease);
}
.select-wrap select:focus ~ .select-chevron { transform: translateY(-50%) rotate(180deg); color: var(--accent-label); }
.select-wrap.is-active select { border-color: var(--metal); color: var(--accent-label); font-weight: 600; }
.select-wrap.is-active .select-chevron { color: var(--accent-label); }

/* --- Form-control borders -> calmer field boundary (WCAG 1.4.11 >=3:1) --- */
.search-input,
.filters select,
.price-inputs input {
  border-color: var(--field-border);
  border-radius: var(--radius-md);
}
/* --- Filter toggle + clear hover (editorial, no red fill) --- */
.filter-toggle:hover { border-color: var(--metal); color: var(--accent-label); background: var(--bg-soft); transform: none; opacity: 1; }
.filter-clear:hover { border-color: var(--metal); color: var(--accent-label); background: var(--bg-muted); transform: none; opacity: 1; }

/* --- live.js .catalog-clear chip (appended to .products-title-row) --- */
.catalog-meta { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.catalog-clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-muted);
  color: var(--ink-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 6px 13px;
  font-size: var(--fs-200);
  font-weight: 600;
  transition: color .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}
.catalog-clear svg { width: 13px; height: 13px; }
.catalog-clear:hover { color: var(--accent-label); border-color: var(--metal); }
.catalog-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.catalog-clear[hidden] { display: none; }

/* --- Mobile: keep HIS .filters.open collapse working with the new shape --- */
@media (max-width: 760px) {
  .filter-head { margin-bottom: 10px; }
  .products-title-row { flex-wrap: wrap; gap: 6px 14px; }
}
@media (max-width: 520px) {
  .range-row { height: 32px; }
  .price-input-field input { padding-left: 26px; }
  .price-readout { font-size: var(--fs-200); }
}

/* ===== Phase 3: Checkout modal + delivery + promo ===== */

/* =====================================================================
   MERGE — Checkout modal + delivery + promo: editorial re-skin.
   Translates OUR redesign language (clothing-shop/public styles.css
   L5120-5656 stepped checkout + L6060 ui-confirm) onto HIS legacy
   modal markup. Last in source order => wins over BOTH of HIS's
   duplicate .checkout-* blocks at matching specificity. CSS only.
   ===================================================================== */

/* --- Modal scrim: dim the page behind the panel (OUR overlays use an
   oklch scrim, L6063). HIS modal had no backdrop. --- */
.checkout-modal::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: oklch(0.16 0.014 45 / .46);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease);
}
.checkout-modal.open::before { opacity: 1; }
.checkout-modal { transition: opacity var(--dur-base) var(--ease); }
.checkout-panel { transition: transform var(--dur-base) var(--ease-out); }

/* --- Head: gold eyebrow + display-font title (OUR checkout-bar-title /
   eyebrow language). Kicker was already red in HIS — recolour to gold,
   the editorial label colour. --- */
.checkout-modal-head {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
}
.checkout-modal-head h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.checkout-kicker {
  color: var(--accent-label);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-100);
  letter-spacing: 0.16em;
}

/* --- Step sections: flat sharp cream blocks, hairline border. --- */
.checkout-section {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-soft);
}
.checkout-section-head h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0;
}
.checkout-section-head p {
  color: var(--muted);
  font-weight: 600;
}

/* --- Field labels: quiet ink-soft, lighter weight (OUR .field-label,
   L5328). HIS had near-black 850 weight. --- */
.checkout-field-grid label,
.delivery-fields label,
.card-fields label,
.payment-label {
  color: var(--ink-soft);
  font-weight: 600;
  letter-spacing: 0;
}
.checkout-field-grid input,
.checkout-field-grid textarea,
.delivery-fields input,
.delivery-fields textarea,
.delivery-fields select,
.card-fields input,
.promo-code-form input {
  border-color: var(--field-border);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
/* --- Delivery wrap: kill HIS gradient + leftover accent-2 left-rail; flat
   cream like a normal section. --- */
.delivery-wrap {
  border-left: 1px solid var(--border);
  background: var(--bg-soft);
}
.delivery-head span,
.promo-code-head span { font-weight: 600; }
.delivery-head small,
.promo-code-head small { color: var(--muted); font-weight: 600; }

/* --- Delivery option mark: editorial outlined radio that fills with an ink
   checkmark SVG on select (mirrors OUR rail-tick + pay-card accent). --- */
.delivery-option-mark {
  border: 1.5px solid var(--field-border);
  background: var(--bg-soft);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.delivery-option:has(input:checked) .delivery-option-mark {
  border-color: var(--accent);
  background: var(--accent);
  -webkit-mask: none;
  mask: none;
  background-image:
    linear-gradient(var(--accent), var(--accent));
}
.delivery-option:has(input:checked) .delivery-option-mark::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--btn-text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 70% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 70% no-repeat;
}
.delivery-option,
.checkout-form .payment-option {
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.delivery-option:hover,
.checkout-form .payment-option:hover { border-color: var(--border-strong); }
.delivery-option strong,
.payment-option strong { font-family: var(--font-body); font-weight: 600; }
.delivery-option small,
.payment-option small { color: var(--muted); font-weight: 600; }
.delivery-option:focus-within,
.checkout-form .payment-option:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- Payment option: selected = the whole hairline goes to ink, not a stripe
   down one edge (the stripe is banned, and it read as a rendering fault). --- */
.checkout-form .payment-option {
  border: 1px solid var(--border);
  background: var(--bg-soft);
}
.checkout-form .payment-option:has(input:checked) {
  border-color: var(--accent);
}
.payment-option input { accent-color: var(--accent); }

/* --- Delivery calc result box. --- */
.delivery-summary-box {
  border-color: var(--border);
  color: var(--ink-soft);
  font-weight: 600;
  background: var(--bg-soft);
}

/* --- Summary panel: gold accent-label head, tabular money, ink totals.
   Red kept ONLY on the discount line (OUR checkout-summary-savings is the
   single sanctioned red in totals, L5499-5507). --- */
.checkout-summary-panel {
  background: var(--bg-soft);
  border-left: 1px solid var(--border);
}
.checkout-summary-head span {
  font-family: var(--font-display);
  font-weight: 800;
}
.checkout-summary-head strong {
  color: var(--accent-label);
  font-weight: 600;
  letter-spacing: 0.08em;
}
.checkout-summary-item strong { font-family: var(--font-body); }
.checkout-summary-item em,
.checkout-totals > div,
.checkout-totals strong { font-variant-numeric: tabular-nums; }
.checkout-totals > div { color: var(--ink-soft); font-weight: 600; }
.checkout-totals strong { color: var(--text); }
.checkout-total-discount strong { color: var(--accent-2); }
.checkout-grand-total span {
  color: var(--ink-soft);
  font-weight: 600;
}
.checkout-grand-total strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-400);
}

/* --- Discount line in the cart drawer: align to editorial red signal. --- */
.discount-summary strong {
  color: var(--accent-2);
  font-variant-numeric: tabular-nums;
}

/* --- Promo field: calmer, gold focus label, sharp box (OUR field
   language). Keep error=red, success=gold-leaning ink, not loud green. --- */
.promo-code-section { background: var(--bg-soft); }
.promo-code-message { font-weight: 600; }
.promo-code-message.success { color: var(--accent-label); }

/* --- Primary CTA stays solid red (the one sanctioned red CTA, OUR
   .pay-bar-btn, L5572). Just ensure it tracks tokens + tabular total. --- */
.checkout-summary-panel #checkoutBtn { font-family: var(--font-body); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .checkout-modal,
  .checkout-modal::before,
  .checkout-panel,
  .delivery-option,
  .delivery-option-mark,
  .checkout-form .payment-option { transition: none; }
}

/* ===== Phase 3: Cart drawer (#cartDrawer) ===== */

/* ===================== MERGE: Cart drawer — OUR editorial skin (CSS-only) =====================
   Re-applies OUR approved editorial identity (ink + cream, hairline dividers,
   refined Archivo/Hanken type already ported in Phase 3.1, BGN-primary totals,
   calm motion, red reserved for sale/CTA) onto HIS existing cart-drawer DOM.
   Appended LAST so these win over HIS base rules AND HIS mobile @media cart rules
   (media queries contribute 0 specificity; equal specificity -> source order).
   No JS/HTML changes — HIS promo, checkout-modal, delivery + BG copy preserved. */

/* --- Drawer shell (spec: cream slab, hairline edge, one soft shadow, sharp) --- */
.cart-drawer {
  background: var(--bg);
  border-left: 1px solid var(--border);
  border-radius: 0;
  box-shadow: var(--shadow);
  transition: transform var(--dur-base) var(--ease);
}

/* --- Header: ink title, muted subline, calm ghost close (spec §1.3) --- */
.cart-header {
  align-items: center;
  padding: 22px 24px 18px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
}
.cart-header h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-500);
  letter-spacing: 0;
  color: var(--text);
}
.cart-header .small-note {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--fs-200);
}
/* Close = quiet ghost (drop HIS red gradient theme-btn treatment for this one). */
.cart-header .theme-btn#closeCart,
.cart-header #closeCart.theme-btn {
  min-height: 44px;
  padding: 9px 16px;
  background: transparent;
  background-image: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-weight: 600;
  text-shadow: none;
  box-shadow: none;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.cart-header .theme-btn#closeCart:hover {
  background: var(--bg-muted);
  border-color: var(--border-strong);
  color: var(--text);
  transform: none;
  opacity: 1;
}

/* --- Scroll body: cream, generous padding --- */
.cart-items {
  gap: 0;
  padding: 4px 24px;
  background: var(--bg-muted);
  scrollbar-width: thin;
}

/* --- Item rows: hairline-divided on cream (editorial rhythm), not boxed cards --- */
.cart-item {
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 14px;
  padding: 18px 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.cart-items .cart-item:last-child { border-bottom: 0; }

.cart-item-image {
  width: 84px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
}

.cart-item-title {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-300);
  line-height: 1.28;
  color: var(--text);
}

/* Variant -> plain quiet text instead of the grey chips (spec §1.4). */
.cart-item-meta {
  gap: 4px 8px;
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: var(--fs-200);
  font-weight: 600;
}
.cart-item-meta span {
  padding: 0;
  border-radius: 0;
  background: transparent;
}
.cart-item-meta span + span::before {
  content: "·";
  margin-right: 8px;
  color: var(--border-strong);
}

/* Remove: keep circular tinted × (matches OUR v2 screenshot) but calmer. */
.remove-btn {
  width: 40px;
  height: 40px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--muted);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.remove-btn::before {
  font-size: var(--fs-400);
  font-weight: 600;
}
.remove-btn:hover {
  background: color-mix(in srgb, var(--danger) 14%, var(--bg-soft));
  border-color: color-mix(in srgb, var(--danger) 42%, var(--border));
  color: var(--danger);
}

/* Qty stepper: pill (matches screenshot), refined hairline + tabular count. */
.qty-row {
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-soft);
}
.qty-btn {
  width: 44px;
  height: 44px;
  color: var(--text);
  font-weight: 600;
}
.qty-btn:hover { background: var(--bg-muted); }
.qty-row span {
  min-width: 60px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Per-line total: gold small-caps eyebrow + ink dual price. */
.cart-line-price { text-align: right; }
.cart-line-price span {
  color: var(--accent-label);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: 0.08em;
}
.cart-line-price strong {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-300);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* --- Summary / totals: BGN+EUR hierarchy, red only on the saved line --- */
.cart-summary {
  padding: 18px 24px;
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cart-summary .summary-line { align-items: baseline; }
.cart-summary span {
  color: var(--muted);
  font-weight: 600;
}
.cart-summary strong {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-300);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
/* Final "Общо" line = the loud one: large Archivo, tabular. */
.cart-summary .summary-line:last-child span {
  color: var(--ink-soft);
  font-weight: 600;
}
.cart-summary .summary-line:last-child strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-500);
  line-height: 1.05;
}
/* Saved/discount = the ONE totals element allowed red (sale signal). */
.cart-summary .discount-summary strong { color: var(--accent-2); }

/* --- Promo block: editorial, quiet --- */
.promo-code-section {
  padding: 18px 24px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
}
.promo-code-head span {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--text);
}
.promo-code-head small { color: var(--muted); font-weight: 600; }
.promo-code-form .theme-btn {
  background: transparent;
  background-image: none;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 600;
  text-shadow: none;
  box-shadow: none;
}
.promo-code-form .theme-btn:hover {
  background: var(--accent);
  color: var(--bg-soft);
  transform: none;
  opacity: 1;
}

/* --- Checkout CTA: solid editorial red, sharp, full-width, no gradient/glow --- */
.cart-checkout-actions {
  padding: 18px 24px 24px;
  background: var(--bg-soft);
}
.cart-checkout-actions .btn {
  width: 100%;
  min-height: 52px;
  background: var(--accent);
  background-image: none;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--on-red);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-300);
  letter-spacing: 0;
  text-shadow: none;
  box-shadow: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cart-checkout-actions .btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  opacity: 1;
}

/* --- Empty state: OUR editorial pattern (gold eyebrow / title / 1 sub / 1 red CTA).
   HIS app.js still renders <div class="cart-empty-icon">0</div> + <strong> + <span>
   + <a class="theme-btn">; we restyle those and HIDE the '0' icon entirely. --- */
.cart-items-empty { background: var(--bg-soft); }
.cart-empty-icon { display: none; }
.cart-empty-state strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-400);
  line-height: 1.2;
  color: var(--text);
}
.cart-empty-state span {
  max-width: 32ch;
  color: var(--muted);
  font-weight: 400;
  line-height: 1.5;
}
.cart-empty-state .theme-btn {
  margin-top: 8px;
  min-height: 48px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  background-image: none;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--btn-text);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-100);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: none;
  box-shadow: none;
  transition: background var(--dur-fast) var(--ease);
}
.cart-empty-state .theme-btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--on-red);
  transform: none;
  opacity: 1;
}

/* --- Preserve HIS responsive cart layout that the unconditioned rules above
   would otherwise stomp on small screens (media queries add 0 specificity, so
   without these the desktop values would leak to mobile). --- */
@media (max-width: 760px) {
  .cart-items { padding: 4px 16px; }
  .cart-header { padding: 18px 16px 14px; }
  .cart-item { grid-template-columns: 74px minmax(0, 1fr); gap: 12px; }
  .cart-item-image { width: 74px; }
  .cart-summary,
  .promo-code-section { padding-left: 16px; padding-right: 16px; }
  .cart-checkout-actions { padding: 16px; }
}
@media (max-width: 520px) {
  .cart-line { flex-wrap: wrap; }
  .cart-line-price { width: 100%; margin-left: 0; text-align: left; }
  .cart-line-price strong { font-size: var(--fs-300); }
}

/* Motion: respect reduced-motion for the drawer + interactive transitions. */
@media (prefers-reduced-motion: reduce) {
  .cart-drawer,
  .cart-header .theme-btn#closeCart,
  .remove-btn,
  .cart-checkout-actions .btn,
  .cart-empty-state .theme-btn { transition: none; }
}
/* ===================== /MERGE: Cart drawer ===================== */

/* ===== Phase 3: PDP layout (product detail: gallery, info column, size selector, add-to-cart, trust strip) ===== */

/* ============================================================
   PDP MERGE — OUR editorial identity ported onto HIS base.
   ============================================================ */

/* Editorial eyebrow above the H1 (brand • category • gender) */
.detail-eyebrow {
  display: block;
  margin: 0 0 12px;
  color: var(--accent-label);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.35;
  text-transform: uppercase;
}

/* Description relocated below actions: hairline rule, soft ink, measure */
.product-detail-info .description {
  display: block;
  margin: 0;
  max-width: 60ch;
  color: var(--ink-soft);
  line-height: 1.7;
  border-top: 1px solid var(--border);
  padding-top: 20px;
  -webkit-line-clamp: none;
  overflow: visible;
}

/* Trust strip — SVG-check bullets (OUR identity, Bulgarian copy) */
.detail-trust {
  list-style: none;
  margin: 20px 0 0;
  padding: 20px 0 0;
  display: grid;
  gap: 11px;
  border-top: 1px solid var(--border);
}
.detail-trust li {
  position: relative;
  padding-left: 26px;
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-200);
  line-height: 1.5;
}
.detail-trust li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: var(--accent-label);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Sale-price color parity with OUR (HIS markup has no .is-sale class on the
   block, so target the rendered old-price sibling to tint the price red when a
   discount exists). Mirrors OUR --accent-2 sale emphasis. */
.detail-price-block:has(.old-price) .price { color: var(--accent-2); }

/* Gallery stops being sticky once it stacks under the info column */
@media (max-width: 860px) {
  .product-gallery { position: static; top: auto; }
}

/* ===== Phase 3: Account forms (account.html + styles.css) ===== */

/* =================================================================
   ACCOUNT — editorial redesign (ported from our-redesign onto MARTIN base)
   Both themes; WCAG-safe; reduced-motion respected.
   ================================================================= */

body[data-page="account"] .page-main.acct { padding-bottom: var(--space-8); }
body[data-page="account"] { --acct-red-ink: var(--accent-2-deep); }
body.dark[data-page="account"] { --acct-red-ink: #e8636a; }

/* ---- Hero ---- */
.acct-hero { border-bottom: 3px solid var(--text); }
.acct-hero-inner {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  padding: clamp(0.9rem, 2.2vw, 1.4rem) 0 clamp(0.7rem, 1.3vw, 1rem);
}
.acct-eyebrow {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: 0.16em; font-size: var(--fs-100); font-weight: 600;
  color: var(--ink-soft); margin: 0 0 .55rem;
}
.acct-title {
  font-family: var(--font-poster); font-weight: 800; text-transform: uppercase;
  font-size: var(--fs-h1); line-height: .92;
  letter-spacing: -0.02em; margin: 0; color: var(--text);
}
.acct-title-accent { color: var(--accent-label); }
.acct-hero-sub { color: var(--ink-soft); margin: .9rem 0 0; max-width: 42ch; font-size: var(--fs-300); line-height: 1.5; }
.acct-pill {
  align-self: center; flex-shrink: 0;
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: 0.08em; font-size: var(--fs-100); font-weight: 600;
  color: var(--text); background: var(--bg-soft);
  border: 2px solid var(--text); border-radius: var(--radius-pill);
  padding: .5rem 1rem; white-space: nowrap;
}
body[data-page="account"].is-authed .acct-pill {
  color: var(--btn-text); background: var(--accent); border-color: var(--accent);
}

/* ---- Auth block (logged-out) ---- */
.acct-auth {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  margin-top: clamp(0.85rem, 1.8vw, 1.35rem);
  border: 3px solid var(--text); box-shadow: var(--shadow-hard);
  background: var(--bg-soft);
}
.acct-rail {
  background: var(--carbon); color: var(--on-red);
  padding: clamp(1.6rem, 3vw, 2.75rem);
  display: flex; flex-direction: column; gap: 1.2rem;
  border-right: 3px solid var(--text);
}
.acct-rail-kicker {
  font-family: var(--font-poster); font-weight: 800; text-transform: uppercase;
  font-size: var(--fs-h1); line-height: .9; letter-spacing: -0.02em;
  margin: 0; color: var(--on-red);
}
.acct-rail-lead { margin: 0; color: color-mix(in srgb, var(--paper) 84%, transparent); font-size: var(--fs-300); line-height: 1.5; }
.acct-rail-list { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; gap: .7rem; }
.acct-rail-list li {
  display: flex; gap: .65rem; align-items: baseline;
  color: color-mix(in srgb, var(--paper) 92%, transparent); font-size: var(--fs-300);
  padding-bottom: .7rem; border-bottom: 1px solid rgba(255,255,255,.14);
}
.acct-rail-list li span {
  font-family: var(--font-display); font-weight: 800; color: #e8636a;
  font-size: var(--fs-200); letter-spacing: 0.08em;
}
.acct-rail-foot { margin: auto 0 0; color: color-mix(in srgb, var(--paper) 62%, transparent); font-size: var(--fs-200); line-height: 1.45; }

.acct-panel { padding: clamp(1.5rem, 3vw, 2.5rem); display: flex; flex-direction: column; }

/* ---- Tabs ---- */
.acct-tabs {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  border-bottom: 2px solid var(--border); margin-bottom: clamp(1.4rem, 3vw, 2rem);
}
.acct-tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 600; font-size: var(--fs-200); color: var(--muted);
  padding: .7rem .25rem 1rem; min-height: 44px;
  transition: color var(--dur-fast) var(--ease);
}
.acct-tab.is-active, .acct-tab:hover { color: var(--text); }
.acct-tab-ink {
  position: absolute; bottom: -2px; left: 0; width: 50%; height: 3px;
  background: var(--metal);
  transition: transform var(--dur-base) var(--ease-expo);
}
.acct-tabs[data-active="register"] .acct-tab-ink { transform: translateX(100%); }
.acct-tabpanel { display: none; }
.acct-tabpanel.is-active { display: block; animation: acctPanelIn var(--dur-base) var(--ease-out); }
@keyframes acctPanelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- Forms ---- */
.acct-form { display: grid; gap: 1.1rem; }
.acct-field { display: grid; gap: .4rem; }
.acct-field label {
  font-family: var(--font-body); letter-spacing: 0;
  font-size: var(--fs-200); font-weight: 600; color: var(--ink-soft);
}
.acct-form input {
  width: 100%; font-family: var(--font-body); font-size: var(--fs-300); color: var(--text);
  background: var(--bg); border: 1.5px solid var(--field-border); border-radius: var(--radius);
  padding: .85rem .95rem; min-height: 48px;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.acct-form input::placeholder { color: var(--muted); opacity: 1; }
.acct-field.has-error input { border-color: var(--accent-2); box-shadow: 0 0 0 3px var(--accent-soft); }
.acct-error { min-height: 1em; font-size: var(--fs-100); color: var(--acct-red-ink); font-weight: 600; }
.acct-error:empty { min-height: 0; }
.acct-pass { position: relative; display: block; }
.acct-pass input { padding-right: 3rem; }
.acct-pass-toggle {
  position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; color: var(--muted); border-radius: var(--radius);
  transition: color var(--dur-fast);
}
.acct-pass-toggle:hover { color: var(--text); }
.acct-pass-toggle svg { width: 20px; height: 20px; }
.acct-pass-toggle .eye-off { display: none; }
.acct-pass-toggle.is-on .eye { display: none; }
.acct-pass-toggle.is-on .eye-off { display: inline; }

/* ---- Submit (sweep + offset block) ---- */
.acct-submit {
  position: relative; overflow: hidden; cursor: pointer; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; min-height: 52px; margin-top: .35rem;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.16em;
  font-weight: 600; font-size: var(--fs-200);
  color: var(--on-red); background: var(--red-fill);
  border: 2px solid var(--text); border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.acct-submit::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--accent-hover); transform: translateX(-101%);
  transition: transform var(--dur-base) var(--ease-expo);
}
.acct-submit:hover::before { transform: translateX(0); }
.acct-submit:hover { box-shadow: 3px 3px 0 var(--carbon); transform: translate(3px, 3px); }
.acct-submit:active { box-shadow: none; transform: translate(6px, 6px); }
.acct-submit svg { width: 20px; height: 20px; transition: transform var(--dur-base) var(--ease-expo); }
.acct-submit:hover svg { transform: translateX(5px); }
.acct-note { margin: .15rem 0 0; font-size: var(--fs-100); color: var(--muted); line-height: 1.45; }

/* ---- Profile (logged-in) ---- */
.acct-profile { display: none; margin-top: clamp(1.75rem, 4vw, 3rem); }
body[data-page="account"].is-authed .acct-profile { display: block; }
body[data-page="account"].is-authed .acct-auth { display: none; }
.acct-profile-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4);
  flex-wrap: wrap; padding-bottom: var(--space-4); border-bottom: 3px solid var(--text);
}
.acct-h2 {
  font-family: var(--font-poster); font-weight: 800; text-transform: uppercase;
  font-size: var(--fs-h2); line-height: .95; letter-spacing: -0.02em; margin: .35rem 0 0;
}
.acct-logout {
  appearance: none; cursor: pointer; font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; font-size: var(--fs-100);
  color: var(--text); background: none; border: 2px solid var(--text); border-radius: var(--radius);
  padding: .55rem 1.1rem; min-height: 44px; transition: color var(--dur-fast), background var(--dur-fast);
}
.acct-logout:hover { background: var(--text); border-color: var(--text); color: var(--bg-soft); }
/* The profile's answer strip. Someone opens this page to find out where their
   order is; the answer used to be two blocks down, at the top of a list. Sits
   directly under the head, states the latest order and its status, and links to
   the card it is about.

   Not a stat-card row: one sentence that is a link, and the counts trailing it
   at label size. The counts are context, not the point. */
.acct-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-soft);
}

.acct-summary-lead {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  color: inherit;
}

.acct-summary-label {
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.acct-summary-value {
  font-family: var(--font-display);
  font-size: var(--fs-300);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.acct-summary-lead:hover .acct-summary-value,
.acct-summary-lead:focus-visible .acct-summary-value {
  color: var(--accent-2);
}

.acct-summary-counts {
  display: flex;
  gap: var(--space-4);
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-200);
}

.acct-summary-counts strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.acct-blocks { display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.acct-block-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.acct-block-title {
  font-family: var(--font-poster); font-weight: 800; text-transform: uppercase;
  font-size: var(--fs-400); letter-spacing: -0.02em; margin: 0;
  display: flex; align-items: baseline; gap: .55rem;
}
/* .acct-block-idx removed with the "01 / 02" numerals it styled. Numbering two
   blocks is a brand-register device — an editorial index — on a surface whose
   job is to answer a question and get out of the way. */
.acct-ghost {
  appearance: none; cursor: pointer; font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: 0.08em; font-weight: 600; font-size: var(--fs-100); color: var(--text);
  background: none; border: 1.5px solid var(--border-strong); border-radius: var(--radius);
  padding: .45rem .8rem; min-height: 44px; transition: border-color var(--dur-fast), color var(--dur-fast);
}
.acct-ghost:hover { border-color: var(--text); }

/* Orders — editorial scarlet-edge blocks (overlay on existing .order-card) */
body[data-page="account"] .order-list .order-card { border-radius: var(--radius); }

/* ---- Focus-visible ---- */
body[data-page="account"] .acct-tab:focus-visible,
.acct-pass-toggle:focus-visible,
.acct-submit:focus-visible,
.acct-logout:focus-visible,
.acct-ghost:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---- Responsive ---- */
@media (max-width: 860px) {
  /* Mobile: login FORM first (no scroll to reach it), brand rail demoted below. */
  .acct-auth { grid-template-columns: 1fr; box-shadow: 4px 4px 0 var(--carbon); }
  .acct-panel { order: -1; }
  .acct-rail { order: 0; border-right: 0; border-top: 3px solid var(--text); border-bottom: 0; padding: clamp(1.2rem, 4vw, 1.6rem); }
  .acct-rail-foot { margin-top: 0; }
}
@media (max-width: 480px) {
  .acct-hero-inner { padding-top: 1.5rem; }
  .acct-pill { align-self: flex-start; }
  .acct-auth { box-shadow: none; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .acct-tabpanel.is-active { animation: none; }
  .acct-tab-ink, .acct-submit, .acct-submit::before, .acct-submit svg { transition: none; }
  .acct-submit:hover { transform: none; box-shadow: var(--shadow-hard); }
  .acct-submit:hover::before { transform: translateX(-101%); }
}

/* ===== Phase 3: Admin panel ===== */

/* ========================================================================
   Admin panel — editorial merge port (Phase 3.x)
   ======================================================================== */

/* Admin form controls — re-skin ONLY admin fields to OUR editorial finish
   (calmer boundary + tighter scarlet focus ring + explicit AA placeholder).
   Scoped to admin selectors so shared checkout/cart/search inputs keep their
   existing rule untouched (CSS-only, no logic, no cross-page regression). */

.admin-search input::placeholder,
.admin-promo-form input::placeholder,
.admin-product-form input::placeholder,
.admin-product-form textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}

/* Promo date trigger picks up the same calmer boundary + scarlet focus ring
   so the whole promo form reads as one editorial field set. */
.promo-date-trigger {
  border-color: var(--field-border);
}
.promo-date-trigger:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* ===== Phase 3: Footer + 404 ===== */

/* ============================================================
   MERGE PORT — Footer editorial identity (carbon slab in BOTH
   themes) + 404 button helpers. One appended block, easy to
   revert. White-alpha text kept >= .74 for AA on the dark slab.
   Overrides HIS earlier footer rules by source order (no
   body.dark footer rules exist in HIS). If color-mix(in oklch)
   is unsupported, .site-footer falls back to HIS dark base bg.
   ============================================================ */
.site-footer {
  position: relative;
  overflow: hidden;
  color: var(--paper);
  padding: clamp(30px, 3.4vw, 46px) 0 14px;
  /* layered slab: warm vertical depth + faint brass counter-glow (top-left)
     — red ember removed (colour law: red = discount/buy only) */
  background:
    radial-gradient(95% 75% at -6% -14%, color-mix(in oklch, var(--metal) 14%, transparent) 0%, transparent 50%),
    linear-gradient(180deg, var(--carbon-soft) 0%, var(--carbon) 44%);
  /* accent rule: brass hairline fading to nothing (was scarlet -> brass) */
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg,
      var(--metal) 0%, var(--metal) 40%,
      transparent 100%) 1;
  box-shadow: inset 0 1px 0 oklch(1 0 0 / .06);
}
.social-btn:focus-visible { outline: 2px solid var(--metal); outline-offset: 3px; }

/* Bottom bar */
.footer-bar {
  position: relative;
  z-index: 1;
  margin-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, oklch(1 0 0 / .16) 22%, oklch(1 0 0 / .16) 78%, transparent) 1;
}
.footer-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  padding: 16px 0 2px;
  color: color-mix(in srgb, var(--paper) 74%, transparent);
  font-size: var(--fs-200);
}
.footer-bar-note { color: color-mix(in srgb, var(--paper) 74%, transparent); }
.footer-top {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: 1px solid oklch(1 0 0 / .18);
  color: color-mix(in srgb, var(--paper) 80%, transparent);
  border-radius: var(--radius-sm);
  padding: 7px 13px;
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.footer-top svg { width: 13px; height: 13px; }
.footer-top:hover { color: var(--paper); border-color: var(--metal); }
.footer-top:focus-visible { outline: 2px solid var(--metal); outline-offset: 3px; }

@media (max-width: 620px) {
  .footer-bar-inner { justify-content: center; text-align: center; }
}

/* 404 — primary red CTA (HIS lacked .btn-hero) + outlined secondary,
   scoped to the 404 actions so other pages' .btn-secondary is untouched. */
.btn-hero {
  background: var(--accent);
  color: var(--btn-text);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--accent) 22%, transparent);
}
.btn-hero:hover { background: color-mix(in srgb, var(--accent) 88%, #000); color: var(--btn-text); }
.err-actions .btn-secondary { border: 1px solid var(--border); }

/* ===== Phase 3: In-page admin confirm modal (uiConfirm) — Phase 4.3 ===== */

/* ===== Phase 4.3 — In-page admin confirm modal (uiConfirm) =====
   Ported from OUR editorial redesign. Replaces native confirm/prompt.
   Token remap onto HIS :root: --border-strong→--border, --radius-lg→--radius,
   --field-border→--border, --on-red→--btn-text. */
.ui-confirm-overlay {
  position: fixed; inset: 0; z-index: 2000;
  display: grid; place-items: center; padding: var(--space-5, 24px);
  background: rgba(20, 17, 15, 0.55);
  opacity: 0; transition: opacity var(--dur-fast, 180ms) var(--ease);
}
.ui-confirm-overlay.is-open { opacity: 1; }
.ui-confirm {
  width: min(440px, 100%);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: var(--space-5, 24px);
  transform: translateY(8px) scale(.98);
  transition: transform var(--dur-fast, 180ms) var(--ease);
}
.ui-confirm-overlay.is-open .ui-confirm { transform: none; }
.ui-confirm-title { margin: 0 0 8px; font-family: var(--font-display); font-size: var(--fs-400); font-weight: 800; color: var(--text); }
.ui-confirm-msg { margin: 0 0 16px; color: var(--muted); }
.ui-confirm-input {
  width: 100%; min-height: 44px; margin: 0 0 16px; padding: 10px 12px; font: inherit;
  background: var(--bg); color: var(--text);
  border: 1.5px solid var(--border); border-radius: var(--radius);
}
.ui-confirm-input.is-invalid { border-color: var(--accent-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 28%, transparent); }
.ui-confirm-actions { display: flex; gap: 10px; justify-content: flex-end; }
.ui-confirm-actions button {
  min-height: 44px; padding: 0 18px; font: inherit; font-weight: 600; cursor: pointer;
  border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--bg-soft); color: var(--text);
  transition: background var(--dur-fast, 150ms) var(--ease), border-color var(--dur-fast, 150ms) var(--ease), color var(--dur-fast, 150ms) var(--ease), filter var(--dur-fast, 150ms) var(--ease);
}
.ui-confirm-actions button:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 2px; }
.ui-confirm-cancel:hover { background: var(--bg-muted); }
.ui-confirm-danger { background: var(--danger-fill); border-color: var(--danger-fill); color: var(--paper); }
.ui-confirm-danger:hover { filter: brightness(.94); }
@media (prefers-reduced-motion: reduce) {
  .ui-confirm-overlay, .ui-confirm { transition: none; }
}

/* ============================================================
   New (post-merge): products page header, film-band band,
   floating back-to-top + quick-call action buttons
   ============================================================ */
.catalog-page-head {
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
  padding: clamp(28px, 5vw, 56px) 0 clamp(18px, 3vw, 30px);
}
.catalog-page-head .eyebrow {
  margin: 0 0 6px; color: var(--accent-label);
  font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; font-size: var(--fs-100);
}
.catalog-page-head h1 {
  margin: 0 0 8px;
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -0.02em;
}
.catalog-page-sub { margin: 0; max-width: 54ch; color: var(--muted); line-height: 1.6; }

/* film-band (ported from our-redesign) */
.film-band {
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--paper); background: var(--carbon);
  border-top: 1px solid var(--border);
}
.film-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.film-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; filter: saturate(.8) contrast(1.02); }
.film-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* deeper ink scrim mutes the red bleeding through from the source photo
     (editorial-calm + better white-type contrast); warm radial stays subtle */
  background:
    radial-gradient(120% 110% at 18% 30%, oklch(0.72 0.06 85 / .12), transparent 55%),
    linear-gradient(90deg, oklch(0.07 0.02 40 / .94) 0%, oklch(0.07 0.02 40 / .64) 52%, oklch(0.07 0.02 40 / .42) 100%);
}
.film-inner { position: relative; z-index: 1; padding: clamp(64px, 13vh, 150px) 0; }
.film-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px;
  color: var(--paper); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; font-size: var(--fs-100);
}
.film-eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--metal); }
.film-title {
  margin: 0 0 18px; color: var(--paper);
  font-family: var(--font-poster); font-weight: 800; text-transform: uppercase;
  font-size: var(--fs-display); line-height: .94; letter-spacing: -0.02em;
  text-shadow: 0 16px 40px oklch(0 0 0 / .45);
}
.film-copy { max-width: 46ch; margin: 0 0 26px; color: color-mix(in srgb, var(--paper) 88%, transparent); line-height: 1.6; }
.film-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Floating action buttons (back-to-top + quick call) */
.scroll-top-btn, .quick-call-btn {
  position: fixed; right: 18px; z-index: 70;
  width: 48px; height: 48px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); box-shadow: var(--shadow); cursor: pointer;
  transition: transform .2s var(--ease), opacity .2s var(--ease), background .2s var(--ease);
}
.quick-call-btn {
  bottom: 18px; background: var(--accent-2); color: var(--paper);
  border-color: transparent; text-decoration: none;
}
.quick-call-btn svg { width: 22px; height: 22px; fill: currentColor; }
.scroll-top-btn {
  bottom: 76px; background: var(--bg-soft); color: var(--text);
  opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none;
}
.scroll-top-btn.visible { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.scroll-top-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.scroll-top-btn:hover, .quick-call-btn:hover { transform: translateY(-2px); }
@media (max-width: 520px) {
  .scroll-top-btn, .quick-call-btn { right: 12px; width: 44px; height: 44px; }
  .quick-call-btn { bottom: 14px; }
  .scroll-top-btn { bottom: 64px; }
}
@media (prefers-reduced-motion: reduce) { .scroll-top-btn, .quick-call-btn { transition: none; } }

/* ===== Account: professional login/register polish (post-merge) ===== */
.acct-panel-head { margin-bottom: clamp(1rem, 2.4vw, 1.4rem); }
.acct-panel-title {
  font-family: var(--font-poster); font-weight: 800; text-transform: uppercase;
  font-size: var(--fs-500); line-height: .98; letter-spacing: -0.02em;
  margin: .25rem 0 0; color: var(--text);
}
.acct-req { color: var(--accent-2); font-weight: 800; margin-left: .15rem; }
.acct-hint { font-size: var(--fs-100); line-height: 1.4; color: var(--muted); margin-top: -.05rem; }
.acct-strength { display: grid; gap: .35rem; margin-top: .1rem; }
.acct-strength[hidden] { display: none; }
.acct-strength-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; }
.acct-strength-bar span { height: 5px; border-radius: var(--radius-pill); background: var(--border); transition: background var(--dur-fast) var(--ease); }
.acct-strength[data-level="1"] .acct-strength-bar span:nth-child(-n+1),
.acct-strength[data-level="2"] .acct-strength-bar span:nth-child(-n+2),
.acct-strength[data-level="3"] .acct-strength-bar span:nth-child(-n+3) { background: currentColor; }
.acct-strength[data-level="1"] { color: var(--accent-2); }
.acct-strength[data-level="2"] { color: var(--accent-label); }
.acct-strength[data-level="3"] { color: var(--success); }
.acct-strength-text { margin: 0; font-size: var(--fs-100); font-weight: 600; color: currentColor; }
.acct-match { margin: 0; font-size: var(--fs-100); font-weight: 600; min-height: 1em; }
.acct-match:empty { min-height: 0; }
.acct-match[data-state="ok"] { color: var(--success); }
.acct-match[data-state="bad"] { color: var(--accent-2); }
.acct-trust {
  list-style: none; margin: clamp(1.2rem, 3vw, 1.8rem) 0 0; padding: clamp(1rem, 2.4vw, 1.3rem) 0 0;
  border-top: 1.5px solid var(--border);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.8rem, 2vw, 1.4rem);
}
.acct-trust-item { display: flex; gap: .6rem; align-items: flex-start; }
.acct-trust-item svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--accent-label); margin-top: .1rem; }
.acct-trust-item span { display: grid; gap: .1rem; font-size: var(--fs-100); line-height: 1.4; color: var(--muted); }
.acct-trust-item strong { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-100); font-weight: 600; color: var(--text); }
.acct-block-sub { margin: -.2rem 0 var(--space-3); font-size: var(--fs-200); line-height: 1.45; color: var(--muted); }
@media (max-width: 560px) { .acct-trust { grid-template-columns: 1fr; gap: .7rem; } }

/* ===== Mobile nav overlay — late + scoped (.site-header .main-nav beats earlier .main-nav media rules) ===== */
@media (max-width: 1120px) {
  .site-header .main-nav {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto;
    width: min(84vw, 360px); max-width: 360px;
    transform: translateX(105%);
    /* visibility (not just transform) is what actually removes the ~12 links
       from the tab order and the accessibility tree while the drawer is closed.
       It is deliberately NOT transitioned: the panel is off-screen either way,
       so a delayed flip buys nothing and only complicates the cascade. */
    visibility: hidden;
    transition: transform .32s var(--ease);
    background: var(--bg-soft); border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lift);
    /* `display` is stated here on purpose. An older 760px rule turns .main-nav
       into a 3-column grid; inside a 360px drawer that is nonsense, and
       flex-direction below would have been ignored. */
    display: flex;
    flex-direction: column; align-items: stretch; gap: 2px;
    /* nowrap is load-bearing: a column flex container with a definite height
       breaks its items onto new COLUMNS once they overflow, which shattered the
       open category panel sideways on tablets. */
    flex-wrap: nowrap;
    padding: 84px 22px 28px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; z-index: 200;
  }
  body.nav-open .site-header .main-nav {
    transform: none;
    visibility: visible;
  }

  /* The category menu belongs inside the drawer's flow. As `position: fixed` it
     was anchored to the viewport and opened off the bottom of the screen. */
  .site-header .main-nav .nav-menu {
    position: static;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-top: 4px;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
  }
  /* header's backdrop-filter makes it a containing block for fixed children,
     clipping the drawer to header height — drop it while the drawer is open. */
  body.nav-open .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .site-header .main-nav > a,
  .site-header .main-nav .nav-dropdown { width: 100%; }
  .site-header .main-nav > a,
  .site-header .main-nav .nav-dropdown > summary {
    justify-content: space-between;
    padding: 15px 2px;
    font-size: var(--fs-200);
    letter-spacing: 0.16em;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  /* The drawer's own hover rule: a full-width baseline instead of the inset
     desktop wipe, so it lines up with the row dividers. */
  .site-header .main-nav > a::after,
  .site-header .main-nav .nav-dropdown > summary::after {
    left: 0;
    right: 0;
    bottom: -1px;
  }

  /* The category panel becomes a stacked block in the drawer's flow: same
     poster headings, same lists, one column. */
  .site-header .main-nav .nav-mega {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 18px 0 4px;
  }

  .site-header .main-nav .nav-col-title {
    font-size: var(--fs-400);
    margin-bottom: 10px;
  }

  .site-header .main-nav .nav-menu a {
    font-size: var(--fs-300);
    padding: 11px 0 11px 16px;
  }

  .site-header .main-nav .nav-deal {
    padding: 26px 16px 16px;
  }

  .site-header .main-nav .nav-mega-foot {
    gap: 10px;
    flex-direction: column;
    margin: 4px -22px 0;
    padding: 16px 22px 4px;
    border-top: 1px solid var(--border);
    background: transparent;
  }

  .site-header .main-nav .nav-mega-foot a {
    padding: 6px 0;
    font-size: var(--fs-100);
  }
}

/* ===== Universal reduced-motion guard (covers all animation/transition globally) ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   KINETIC EDITORIAL — Phase 1 (foundation tokens + hero + header)
   Tech-premium evolve: depth, glass, kinetic motion, lit gold.
   Appended block = later-wins cascade, isolated, easy to review/revert.
   Reduced-motion is handled by the universal guard above (its !important wins).
   ============================================================================ */
/* ---- Hero: clean, elegant, minimal (2026) — no box, air + confident type - */
@media (min-width: 761px) {
  .store-hero { min-height: clamp(560px, calc(100svh - 108px), 860px); }
}
.store-hero .hero-inner {
  max-width: min(900px, 100%);
  margin-right: auto;                       /* left-anchored editorial column */
  padding: clamp(72px, 14vh, 150px) 0 clamp(64px, 11vh, 108px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(18px, 2.4vh, 28px);
}
/* clean eyebrow (no pill) with an animated gold tick */
.store-hero .hero-badge {
  background: none;
  border: none;
  padding: 0;
  gap: 14px;
  color: color-mix(in srgb, var(--paper) 82%, transparent);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.store-hero .hero-badge::before {
  width: 0;
  height: 1.5px;
  background: var(--metal);
  animation: heroLine 1s var(--ease-premium) .25s forwards;
}
@keyframes heroLine { to { width: 40px; } }
/* Confident 2-line statement. Each line is nowrap so the headline always
   breaks where it was written — at 7.4vw it used to reflow into three ragged
   lines on laptop widths, which is what made the hero read as noisy. */
.store-hero .hero-title {
  margin: 0;
  max-width: none;
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 30px rgba(0, 0, 0, .5);
}
.store-hero .hero-title span { white-space: nowrap; }
/* nowrap has no escape hatch, so the small-phone step is explicit: at 2.3rem
   the long line measures ~309px and would spill below a ~341px viewport. */
@media (max-width: 520px) {
  .store-hero .hero-title { font-size: var(--fs-h1); }
}
/* one-line, quiet subcopy */
.store-hero .hero-copy {
  max-width: 44ch;
  margin: 0;
  color: color-mix(in srgb, var(--paper) 90%, transparent);
  font-size: var(--fs-300);
  line-height: 1.6;
  /* The loop has bright frames (white shirts, shop lighting). Rather than
     darken the footage back down, the small type carries its own contrast:
     a tight shadow for edge definition plus a wide one for the halo. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 2px 20px rgba(0, 0, 0, .6);
}
.store-hero .hero-actions { margin-top: clamp(10px, 1.6vh, 20px); gap: 16px; }

/* Refined multi-stop scrim. Lighter than the first pass — the footage is the
   point, so the ink only has to carry the left column where the type sits;
   legibility there is topped up by text-shadow on the title and copy. */
.store-hero .hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(10, 8, 7, .72) 0%, rgba(10, 8, 7, .54) 30%, rgba(10, 8, 7, .18) 62%, transparent 88%),
    linear-gradient(0deg, rgba(10, 8, 7, .4), transparent 36%);
  z-index: 0;
}

/* ---- Hero video control ------------------------------------------------- */
/* An ambient loop the visitor cannot stop is a dark pattern on metered data
   and a nuisance on a laptop battery, so the hero gets one honest control.
   ui-enhance.js unhides it, and only when the sources were actually wired
   (never under prefers-reduced-motion, where the poster is all there is). */
.hero-video-toggle {
  position: absolute;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vh, 28px);
  z-index: 2;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: var(--radius-pill);
  background: rgba(12, 10, 9, .38);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: color-mix(in srgb, var(--paper) 88%, transparent);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease-premium);
}
.hero-video-toggle:hover {
  background: rgba(12, 10, 9, .68);
  border-color: var(--metal);
  color: var(--paper);
  transform: scale(1.06);
}
.hero-video-toggle:focus-visible {
  outline: 2px solid var(--metal);
  outline-offset: 3px;
}
.hero-video-toggle[hidden] { display: none; }

/* Pause bars by default; the same box becomes a play triangle when the video
   is stopped, so there is one element to animate and none to swap. */
.hero-video-icon {
  position: relative;
  display: block;
  width: 14px;
  height: 14px;
}
.hero-video-icon::before,
.hero-video-icon::after {
  content: "";
  position: absolute;
  top: 0;
  width: 4px;
  height: 14px;
  border-radius: 1px;
  background: currentColor;
}
.hero-video-icon::before { left: 0; }
.hero-video-icon::after  { right: 0; }
.hero-video-toggle[aria-pressed="false"] .hero-video-icon::before {
  left: 2px;
  width: 0;
  height: 0;
  border-radius: 0;
  background: none;
  border-left: 13px solid currentColor;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}
.hero-video-toggle[aria-pressed="false"] .hero-video-icon::after { opacity: 0; }

/* kinetic staggered entrance for the hero content */
.store-hero .hero-badge,
.store-hero .hero-title,
.store-hero .hero-copy,
.store-hero .hero-actions {
  animation: heroRise .9s var(--ease-premium) both;
}
.store-hero .hero-title   { animation-delay: .10s; }
.store-hero .hero-copy    { animation-delay: .20s; }
.store-hero .hero-actions { animation-delay: .30s; }
@keyframes heroRise {
  from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* scroll cue at the hero base */
.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  gap: 6px;
  color: color-mix(in srgb, var(--paper) 70%, transparent);
  font-size: var(--fs-100);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  pointer-events: none;
}
.hero-scroll-cue span {
  width: 22px; height: 22px;
  border-right: 2px solid var(--metal);
  border-bottom: 2px solid var(--metal);
  transform: rotate(45deg);
  animation: cueBob 1.8s var(--ease) infinite;
}
@keyframes cueBob { 0%,100% { transform: rotate(45deg) translate(0,0); opacity:.5 } 50% { transform: rotate(45deg) translate(3px,3px); opacity:1 } }

/* ---- Header: refined glass + scroll state + nav underline wipe ----------- */
.site-header {
  transition: background var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.site-header.scrolled {
  background: color-mix(in srgb, var(--bg-soft) 82%, transparent);
  border-bottom-color: var(--metal);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--metal) 35%, transparent), var(--shadow);
}
/* The nav hover idiom lives in one place — see the "Primary navigation"
   section near the top of this file. */

/* ---- Magnetic CTAs: JS sets --mx/--my; CSS applies the springy transform - */
.btn { transition: transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease), background var(--dur-base) var(--ease); }
.btn.is-magnetic { transform: translate(var(--mx, 0), var(--my, 0)); }

/* =========================================================================
   Information pages, consent banner and shared utilities
   Added with the storefront completion pass. Everything here is built from the
   design tokens in :root so both themes are covered without extra overrides.
   ========================================================================= */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 200;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  background: var(--red-fill);
  color: var(--on-red);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus-visible { transform: translateY(92px); }

/* ---- Breadcrumbs -------------------------------------------------------- */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--text); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--text); }

/* ---- Information pages -------------------------------------------------- */
.info-page { padding: 40px 0 72px; }

.info-wrap { max-width: 860px; }

.info-head { margin-bottom: 36px; }
.info-head h1 {
  margin: 6px 0 0;
  font-family: var(--font-poster);
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.info-lead {
  margin: 14px 0 0;
  max-width: 56ch;
  color: var(--muted);
  font-size: var(--fs-300);
  line-height: 1.65;
}

.info-body { display: grid; gap: 40px; }

.info-body section { display: grid; gap: 12px; }

.info-body h2 {
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: var(--fs-400);
  font-weight: 800;
  letter-spacing: 0;
}

.info-body p,
.info-body li { line-height: 1.7; }

.info-body ul,
.info-body ol { margin: 0; padding-left: 22px; display: grid; gap: 8px; }

.info-body a { color: var(--text); text-underline-offset: 3px; }
.info-body a:hover { color: var(--accent-2); }

.info-list { margin: 0; display: grid; gap: 4px; }
.info-list dt {
  margin-top: 10px;
  font-weight: 800;
  font-size: var(--fs-200);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.info-list dt:first-child { margin-top: 0; }
.info-list dd { margin: 0; line-height: 1.65; }

.info-note {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-soft);
  color: var(--muted);
  font-size: var(--fs-200);
}

/* Content the shop owner still has to supply — deliberately conspicuous so it
   cannot ship unnoticed. */
.info-todo {
  padding: 10px 12px;
  border: 1px dashed var(--accent-2);
  border-radius: var(--radius);
  color: var(--accent-2);
  font-weight: 600;
  font-size: var(--fs-200);
}

/* --accent-2 is sized for display type — as a price it is large enough to pass
   contrast at 3:1. This box is 14.4px bold, which needs 4.5:1, and the token
   measures 4.13:1 on the dark background. Lighten it here rather than moving the
   token, which would wash out every price and sale badge in dark mode. */
body.dark .info-todo {
  color: color-mix(in srgb, var(--accent-2) 62%, var(--paper));
  border-color: color-mix(in srgb, var(--accent-2) 62%, var(--paper));
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.contact-card { display: grid; gap: 8px; align-content: start; padding: 20px; }
.contact-card h2 { border: 0; padding: 0; font-size: var(--fs-300); }
.contact-card p { margin: 0; }

/* ---- Footer: information column ----------------------------------------- */
.footer-link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-link-btn:hover { color: var(--metal); }

/* ---- Cookie consent ----------------------------------------------------- */
.consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  padding: 14px;
  background: color-mix(in srgb, var(--bg-soft) 96%, transparent);
  border-top: 1px solid var(--border);
  box-shadow: 0 -14px 40px rgba(20, 17, 15, .16);
  backdrop-filter: blur(10px);
  animation: consentIn var(--dur-slow) var(--ease) both;
}

@keyframes consentIn {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .consent-banner { animation: none; }
}

.consent-inner {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.consent-copy { flex: 1 1 340px; min-width: 0; }
.consent-copy h2 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: var(--fs-300);
  font-weight: 800;
}
.consent-copy p {
  margin: 0;
  max-width: 70ch;
  color: var(--muted);
  font-size: var(--fs-200);
  line-height: 1.55;
}

.consent-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.consent-actions .btn { white-space: nowrap; }

@media (max-width: 640px) {
  .consent-actions { width: 100%; }
  .consent-actions .btn { flex: 1 1 auto; }
}

/* =========================================================================
   Storefront completion pass: scroll locking, product card, confirmation,
   consent checkbox and the product-detail skeleton.
   ========================================================================= */

/* ---- Scroll lock while any overlay layer is open ------------------------ */
body.nav-open,
body.drawer-open,
body.checkout-active {
  overflow: hidden;
}
.cart-drawer,
.checkout-modal {
  overscroll-behavior: contain;
}

/* ---- Product card: one link, whole-card hit area ------------------------ */
.product-card { position: relative; }

/* The title link stretches invisibly over the card, so the card is clickable
   without wrapping the favourite/CTA buttons in another interactive element. */
.product-title-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.product-card .favorite-btn,
.product-card .add-btn {
  position: relative;
  z-index: 2;
}
.product-card:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.product-title-link:focus-visible { outline: none; }

.product-stock {
  margin: 6px 0 0;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.product-stock.is-low { color: var(--accent-2); }
body.dark .product-stock.is-low { color: #ef6f74; }
.product-stock.is-sold { color: var(--muted); }

/* ---- Product detail: loading skeleton ---------------------------------- */
.product-detail-grid.is-loading { pointer-events: none; }
.product-detail-grid.is-loading .product-gallery,
.product-detail-grid.is-loading .product-detail-info > * {
  border-radius: var(--radius);
  background: linear-gradient(
    90deg,
    var(--bg-muted) 25%,
    color-mix(in srgb, var(--bg-muted) 60%, var(--bg-soft)) 37%,
    var(--bg-muted) 63%
  );
  background-size: 400% 100%;
  animation: skeletonSweep 1.4s ease infinite;
  color: transparent;
  min-height: 18px;
}
.product-detail-grid.is-loading .product-gallery { min-height: 420px; }
.product-detail-grid.is-loading img { visibility: hidden; }
@keyframes skeletonSweep {
  from { background-position: 100% 50%; }
  to { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .product-detail-grid.is-loading .product-gallery,
  .product-detail-grid.is-loading .product-detail-info > * { animation: none; }
}

/* ---- Consent checkbox (checkout + registration) ------------------------- */
.consent-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 12px;
  font-size: var(--fs-200);
  line-height: 1.5;
  color: var(--muted);
  cursor: pointer;
}
.consent-check input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: 0 0 18px;
  accent-color: var(--accent-2);
}
.consent-check a { color: var(--text); text-underline-offset: 3px; }
.consent-check a:hover { color: var(--accent-2); }
.consent-check:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.checkout-reassurance {
  margin: 10px 0 0;
  text-align: center;
  font-size: var(--fs-100);
  color: var(--muted);
}
.checkout-reassurance a { color: inherit; }

.promo-code-clear { white-space: nowrap; }

/* ---- Order confirmation ------------------------------------------------- */
.order-confirmation {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--success);
  border-radius: var(--radius);
  background: var(--bg-soft);
}

/* The receipt replaces the form as the panel's scrolling region. `.checkout-panel`
   is a flex column with overflow:hidden, so without min-height:0 a long receipt
   would be clipped instead of scrolling. */
.checkout-panel > .order-confirmation {
  margin: 22px 24px 26px;
  min-height: 0;
  overflow-y: auto;
  align-content: start;
}

.order-confirmation-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.order-confirmation-check {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--success-fill);
  color: var(--paper);
  font-size: var(--fs-400);
  font-weight: 800;
}
.order-confirmation-head h3 {
  margin: 0;
  font-family: var(--font-poster);
  font-size: var(--fs-400);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.order-confirmation-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--fs-200);
  line-height: 1.5;
}

.order-confirmation-items {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
}
.order-confirmation-items li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: var(--fs-200);
  line-height: 1.4;
}
.order-confirmation-items strong { white-space: nowrap; }

.order-confirmation-meta { margin: 0; display: grid; gap: 6px; }
.order-confirmation-meta > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: var(--fs-200);
}
.order-confirmation-meta dt { color: var(--muted); }
.order-confirmation-meta dd { margin: 0; font-weight: 600; }
.order-confirmation-total {
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-300);
}
.order-confirmation-total dt { color: var(--text); font-weight: 800; }

.order-confirmation-note {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-200);
  line-height: 1.6;
}

.order-confirmation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.order-confirmation-actions .btn { flex: 1 1 auto; text-align: center; }

/* ---- Size guide + sticky mobile buy bar --------------------------------- */
.size-picker-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Padding, not height: this is an inline button in a row of text, so it reaches
   the 24px tap minimum by growing its hit area rather than its type. Wrong size
   is the top return reason for a shop like this and the size guide is how a
   shopper avoids it — a 19px target was the wrong place to save four pixels. */
.size-guide-link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-100);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.size-guide-link:hover { color: var(--accent-2); }

.size-guide-modal {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(12, 9, 8, .55);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.size-guide-modal.is-open { display: flex; }

.size-guide-panel {
  width: min(640px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  display: grid;
  gap: 18px;
  padding: clamp(18px, 3vw, 28px);
  border-radius: var(--radius);
  background: var(--bg-soft);
  box-shadow: var(--shadow-lift);
}

.size-guide-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.size-guide-head h2 {
  margin: 0;
  font-family: var(--font-poster);
  font-size: var(--fs-400);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.size-guide-note {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-200);
  line-height: 1.55;
}

.size-guide-block { display: grid; gap: 10px; }
.size-guide-block h3 {
  margin: 0;
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Wide tables scroll inside their own box; the page never scrolls sideways. */
.size-guide-scroll { overflow-x: auto; }
.size-guide-scroll table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-200);
}
.size-guide-scroll th,
.size-guide-scroll td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.size-guide-scroll thead th {
  font-size: var(--fs-100);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.size-guide-scroll tbody th { font-weight: 800; }

/* Sticky buy bar: phones only, and only once the real CTA is off screen. */
.buy-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg-soft) 96%, transparent);
  border-top: 1px solid var(--border);
  box-shadow: 0 -10px 30px rgba(20, 17, 15, .14);
  backdrop-filter: blur(10px);
}
.buy-bar.is-visible { display: flex; }
/* The price is nowrap, so the column has to be allowed its natural width —
   min-width:0 let the flex row squeeze it to 94px and "24.45 лв" spilled out
   of the bar on a 390px phone. */
.buy-bar-info { display: grid; gap: 2px; flex: 0 0 auto; }
.buy-bar-price { font-size: var(--fs-300); font-weight: 800; white-space: nowrap; }
.buy-bar-size {
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.buy-bar-btn { flex: 1 1 auto; min-width: 0; }

@media (min-width: 861px) {
  .buy-bar { display: none !important; }
}

/* Keep the consent banner clear of the buy bar. `~` cannot match here: the
   banner is appended by consent.js on load, the bar only after the product
   fetch resolves, so the banner is always the EARLIER sibling. */
body:has(.buy-bar.is-visible) .consent-banner { bottom: calc(72px + env(safe-area-inset-bottom)); }

/* =========================================================================
   CONTROLS — buttons, chips and form fields
   =========================================================================
   One system for everything a customer can press or type into.

   Voice        Controls speak in the same tracked uppercase Archivo as the
                navigation and the eyebrows. Product copy stays in Hanken
                Grotesk; the interface furniture is a different register.

   Colour rule  GOLD marks structure and state. SCARLET is a PRICE and never a
                control — that is why the checkout button is ink, not red. The
                only red on a page should be money the customer is saving.

   Signature    The stamp press. A primary action rests on a hard gold offset
                block and travels into it when pressed, like a rubber stamp
                coming down on a swing ticket. This gesture already existed on
                the account submit button; it is now the system.
                Primary tier only — everything else stays flat and quiet.

   Removed      Ambient drop shadows and `opacity` hovers. Both were carried by
                every button and read as generic soft UI; hairlines and real
                colour changes do the work instead.
   ========================================================================= */

/* ---- Shared geometry + voice ------------------------------------------- */

.btn,
.theme-btn,
.page-btn,
.cart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 12px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: none;
  transition:
    background var(--dur-base) var(--ease),
    color var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

/* Long Bulgarian labels must wrap rather than overflow their container. */
.btn { max-width: 100%; white-space: normal; }

/* ---- Tier 1: primary — ink fill, gold stamp ---------------------------- */

.btn {
  background: var(--accent);
  color: var(--btn-text);
  border-color: var(--accent);
  box-shadow: 4px 4px 0 var(--metal);
}

.btn:hover {
  /* --accent-hover, not --carbon: --carbon is the deep slab (#1a1512 light) and
     sits 1.02:1 from --accent, so every primary on the site declared a hover
     colour change no eye could see. This one reads, in both themes.
     Not --btn-text either: it flips to near-black in dark and would disappear. */
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--on-red);
  opacity: 1;
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--metal);
}

.btn:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--metal);
}

/* ---- Tier 2: secondary — ink hairline that fills on hover --------------- */

.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--text);
  box-shadow: none;
}

.btn-secondary:hover {
  background: var(--text);
  color: var(--bg-soft);
  border-color: var(--text);
  transform: none;
  box-shadow: none;
}

.btn-secondary:active {
  transform: translateY(1px);
  box-shadow: none;
}

/* ---- Tier 3: quiet — utility controls next to content ------------------- */

.theme-btn,
.page-btn {
  background: var(--bg-soft);
  color: var(--text);
  border-color: var(--border);
}

.theme-btn:hover,
.page-btn:hover {
  background: var(--bg-muted);
  border-color: var(--text);
  color: var(--text);
  opacity: 1;
  transform: none;
}

.theme-btn:active,
.page-btn:active {
  transform: translateY(1px);
}

.page-btn.active {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg-soft);
}

/* ---- Cart: navigation, not a purchase ---------------------------------- */

.cart-btn {
  background: var(--accent);
  color: var(--btn-text);
  border-color: var(--accent);
  box-shadow: none;
}

body:not(.dark) .cart-btn {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--btn-text);
}

.cart-btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--on-red);
  opacity: 1;
  transform: none;
}

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

/* ---- Destructive -------------------------------------------------------- */

.danger-btn,
.danger-order-btn {
  background: transparent;
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
  box-shadow: none;
}

.danger-btn:hover,
.danger-order-btn:hover {
  background: var(--danger-fill);
  border-color: var(--danger-fill);
  color: var(--paper);
  transform: none;
  box-shadow: none;
}

/* ---- On dark media (hero, film band) ------------------------------------ */
/* No stamp here: an offset block over moving footage is noise. */

.btn-light {
  background: oklch(0.99 0.004 85);
  color: #151312;
  border-color: oklch(0.99 0.004 85);
  box-shadow: none;
}

.btn-light:hover {
  background: var(--paper);
  border-color: var(--paper);
  color: #151312;
  transform: none;
  box-shadow: none;
}

.btn-ghost-light {
  background: transparent;
  color: var(--paper);
  border-color: color-mix(in srgb, var(--paper) 55%, transparent);
  box-shadow: none;
}

.btn-ghost-light:hover {
  background: rgba(255, 255, 255, .14);
  border-color: var(--paper);
  color: var(--paper);
  transform: none;
  box-shadow: none;
}

/* 404 used its own primary; it is the same button. */
.btn-hero { background: var(--accent); color: var(--btn-text); border-color: var(--accent); box-shadow: 4px 4px 0 var(--metal); }
.btn-hero:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-red); }

/* ---- States ------------------------------------------------------------- */

.btn:disabled,
.btn[disabled],
.theme-btn:disabled,
.page-btn:disabled,
.cart-btn:disabled {
  background: var(--bg-muted);
  border-color: var(--border);
  color: var(--muted);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
  opacity: 1;
}

/* Working. app.js already sets aria-busy on the sign-in, registration, promo
   and checkout submits; until now nothing showed for it. */
.btn[aria-busy="true"],
.theme-btn[aria-busy="true"],
.acct-submit[aria-busy="true"] {
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

.btn[aria-busy="true"]::before,
.theme-btn[aria-busy="true"]::before,
.acct-submit[aria-busy="true"]::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-pill);
  animation: controlSpin .7s linear infinite;
}

@keyframes controlSpin {
  to { transform: rotate(360deg); }
}

.btn:focus-visible,
.theme-btn:focus-visible,
.page-btn:focus-visible,
.cart-btn:focus-visible {
  outline: 3px solid var(--metal);
  outline-offset: 3px;
}

/* ---- Sizes -------------------------------------------------------------- */

.btn-sm,
.select-wrap-sm .btn {
  min-height: 38px;
  padding: 9px 14px;
  font-size: var(--fs-100);
  letter-spacing: 0.08em;
}

/* Icon-only controls stay square and drop the tracking. */
#themeToggle,
.nav-toggle {
  width: 44px;
  min-width: 44px;
  flex: 0 0 44px;
  padding: 0;
  gap: 0;
  letter-spacing: 0;
}

#themeToggle { font-size: var(--fs-300); }

/* ---- Cart count badge --------------------------------------------------- */

.cart-btn span {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  margin-left: 2px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--metal);
  color: var(--carbon);
  font-family: var(--font-body);
  font-size: var(--fs-100);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1;
}

/* ---- Account submit ----------------------------------------------------- */
/* Same stamp as the primary. The wipe-in fill it used to carry as well was one
   gesture too many on a single button. */

.acct-submit {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--btn-text);
  border-radius: var(--radius-sm);
  box-shadow: 4px 4px 0 var(--metal);
}

.acct-submit::before { content: none; }

.acct-submit:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--on-red);
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--metal);
}

.acct-submit:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--metal);
}

.acct-submit:focus-visible {
  outline: 3px solid var(--metal);
  outline-offset: 3px;
}

/* ---- Product card CTA --------------------------------------------------- */

.add-btn {
  border: 1px solid var(--border-strong, var(--border));
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 14px;
  /* The earlier .add-btn block zeroes min-height, which left the catalog's
     primary CTA at ~33px on every tablet. It is a touch target. */
  min-height: 44px;
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}

.add-btn:hover {
  background: var(--text);
  color: var(--bg-soft);
  border-color: var(--text);
  transform: none;
}

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

.add-btn:disabled {
  background: transparent;
  color: var(--muted);
  border-color: var(--border);
  opacity: 1;
  cursor: not-allowed;
}

/* ---- Size picker -------------------------------------------------------- */

.size-option {
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.08em;
  box-shadow: none;
  transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}

.size-option:not(.is-selected):not(.is-unavailable):hover {
  border-color: var(--text);
  background: var(--bg-soft);
  transform: none;
  box-shadow: none;
}

.size-option.is-selected {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg-soft);
  box-shadow: none;
  transform: none;
}

.size-option.is-selected small { color: color-mix(in srgb, var(--bg-soft) 72%, transparent); }

.size-option.is-unavailable {
  background: transparent;
  border-color: var(--border);
  color: var(--muted);
  cursor: not-allowed;
}

/* ---- Quantity + remove -------------------------------------------------- */

.qty-btn {
  border-radius: var(--radius-sm);
  font-weight: 800;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.qty-btn:hover {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg-soft);
}

.remove-btn:hover { color: var(--danger); border-color: var(--danger); }

/* ---- Filter chips ------------------------------------------------------- */

.filter-chip {
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: 0;
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}

.filter-chip:hover {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg-soft);
}

.filter-chip:hover .chip-x { color: inherit; }

.filter-chip-clear:hover {
  background: transparent;
  color: var(--accent-2);
  border-color: var(--accent-2);
}

/* ---- Favourite toggle --------------------------------------------------- */

.favorite-btn {
  border-radius: var(--radius-sm);
  box-shadow: none;
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}

.favorite-btn:hover { border-color: var(--text); color: var(--text); }

/* The heart is the one place scarlet is not a price — it is the customer's own
   mark, and it reads as such because it is a heart. Outlined, not filled: a
   solid red block would compete with the discount badge on the same card. */
.favorite-btn.active {
  background: color-mix(in srgb, var(--accent-2) 10%, transparent);
  color: var(--accent-2);
  border-color: color-mix(in srgb, var(--accent-2) 45%, var(--border));
}

/* =========================================================================
   FORM FIELDS
   One surface, one hairline, one focus treatment — there was no shared
   definition before, so every form invented its own.
   ========================================================================= */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="file"],
select,
textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  /* --field-border, not --border: it clears WCAG 1.4.11 against --bg-soft, and
     it is what the scoped admin/catalog rules were reaching for one form at a
     time — which left a select darker than the text input directly above it. */
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  color: var(--text);
  font-family: var(--font-body);
  /* 16px exactly. Anything smaller makes iOS Safari zoom the page on focus,
     which threw the shopper out of the checkout layout on every field. */
  font-size: var(--fs-300);
  font-weight: 600;
  line-height: 1.4;
  transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}

textarea { min-height: 96px; padding-top: 12px; resize: vertical; }

input::placeholder,
textarea::placeholder { color: var(--muted); opacity: 1; }

input:hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled) { border-color: color-mix(in srgb, var(--text) 40%, var(--border)); }

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  background: var(--bg-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* The ring above is a soft mouse-focus treatment, not an indicator. Keyboard
   focus gets a real outline, the same 3px accent the buttons already use. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

input:disabled,
select:disabled,
textarea:disabled {
  background: var(--bg-muted);
  color: var(--muted);
  cursor: not-allowed;
}

/* An invalid field only turns red once the customer has actually left it. */
input:user-invalid,
select:user-invalid,
textarea:user-invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
}

/* These opt out of the full-width sizing every other form control gets — but
   `width: auto` handed them back to the browser default, which measures about
   13px. WCAG 2.5.8 (AA) puts the floor at 24x24 CSS px, and the two that matter
   most are both on the last screen before an order: the mandatory "Прочетох и
   приемам Общите условия" box, which the server refuses the order without, and
   the payment-method radio.

   The label is clickable too, so the row was never unusable — but the visible
   control is what a thumb aims at, and a miss on a checkout checkbox reads as
   "the button doesn't work". 24px is the floor, not a design change: the box
   grows, nothing around it moves.

   flex-shrink: 0 because .checkbox-row is a flex row and a long Bulgarian label
   would otherwise squeeze the box back below the minimum. */
input[type="checkbox"],
input[type="radio"] {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  flex: 0 0 auto;
  accent-color: var(--text);
}

/* Field labels are read, not scanned; they get weight, not shouting. */
form label {
  font-family: var(--font-body);
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted);
}

/* Values the customer types are content, not furniture. */
form label input,
form label select,
form label textarea {
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: var(--fs-300);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .acct-submit,
  .btn:hover,
  .acct-submit:hover,
  .btn:active,
  .acct-submit:active { transform: none; }
  .btn[aria-busy="true"]::before,
  .theme-btn[aria-busy="true"]::before,
  .acct-submit[aria-busy="true"]::before { animation-duration: 1.4s; }
}

/* ---- Radius normalisation ----------------------------------------------- */
/* Controls were split between --radius-sm (4px) and --radius-md (6px). One
   radius for everything a customer can press or type into; --radius-md stays
   for cards and panels. */

.filter-toggle,
.filter-clear,
.filters select,
.filters input,
.select-wrap select,
.search-input,
.add-btn,
.qty-btn,
.remove-btn,
.filter-chip,
.size-option,
.favorite-btn,
.acct-submit,
.acct-logout,
.detail-cart-btn {
  border-radius: var(--radius-sm);
}

/* The filter controls join the quiet tier. */
.filter-toggle,
.filter-clear {
  font-family: var(--font-display);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.filter-toggle:hover,
.filter-clear:hover {
  background: var(--bg-muted);
  border-color: var(--text);
  color: var(--text);
  transform: none;
  opacity: 1;
}

/* The buy button on the product page is the primary action of that page and
   carries the same stamp as every other primary. */
.detail-cart-btn {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--btn-text);
  box-shadow: 4px 4px 0 var(--metal);
  font-family: var(--font-display);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.detail-cart-btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--on-red);
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--metal);
}

.detail-cart-btn:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--metal);
}

.detail-cart-btn:disabled {
  background: var(--bg-muted);
  border-color: var(--border);
  color: var(--muted);
  box-shadow: none;
  transform: none;
}

/* Checkout submit: the last primary in the flow, same stamp. */
#checkoutBtn {
  box-shadow: 4px 4px 0 var(--metal);
}
#checkoutBtn:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--metal);
}
#checkoutBtn:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--metal);
}

@media (prefers-reduced-motion: reduce) {
  .detail-cart-btn,
  .detail-cart-btn:hover,
  .detail-cart-btn:active,
  #checkoutBtn,
  #checkoutBtn:hover,
  #checkoutBtn:active { transform: none; }
}

/* ---- Closing pass: the last controls that still spoke their own dialect ---- */

/* "Към поръчката" is the primary action of the cart, so it carries the stamp
   and the display voice like every other primary. */
.cart-checkout-actions .btn {
  font-family: var(--font-display);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 var(--metal);
}
.cart-checkout-actions .btn:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--metal);
}
.cart-checkout-actions .btn:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--metal);
}

#checkoutBtn {
  font-family: var(--font-display);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* The promo "Приложи" is a quiet utility sitting on the paper surface. */
.promo-code-form .theme-btn {
  background: var(--bg-soft);
  border-color: var(--border);
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.promo-code-form .theme-btn:hover {
  background: var(--bg-muted);
  border-color: var(--text);
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  .cart-checkout-actions .btn,
  .cart-checkout-actions .btn:hover,
  .cart-checkout-actions .btn:active { transform: none; }
}

/* The show/hide-password toggle sits inside the field, so it follows the field's
   radius rather than its own. */
.acct-pass-toggle { border-radius: var(--radius-sm); }

/* =========================================================================
   MINIMAL HOME — 2026-07-25
   Owner brief: "началната страница възможно най-минималистична, само текст и
   бутони, удобна и красива". Appended as one block so it wins on source order
   and reverts in one delete.

   What changed
   - brand-strip: flat carbon + gold hairline instead of the ink/red/gold
     gradient; collapses away once the visitor scrolls (ui-enhance.js adds
     .strip-collapsed to the header, with hysteresis so it cannot oscillate).
   - hero: badge removed in markup, shorter statement, shorter first screen so
     the catalog is reachable without hunting.
   - brand-rail (4 numbered tiles) -> .quick-cats, four plain category links.
   - service-strip (4 shadowed cards) -> .trust-line, one hairline text row.
   - catalog head: 3-colour 5px bar -> single gold hairline.
   - footer: map iframe moved to /contact, columns folded into one link row,
     ghost "ONE" watermark and coloured social chips dropped.
   The .brand-rail / .brand-tile rules that comment used to excuse are gone.
   .service-strip is NOT dead — products.html still renders it, four tiles, and
   it is styled above; do not delete it on the strength of an old note.
   ========================================================================= */

/* ---- Announcement strip: quieter, and it gets out of the way on scroll --- */
.site-header .brand-strip {
  display: grid;
  /* minmax(0, …) rather than a bare fr: an auto track minimum keeps the row at
     the child's min-content height, and the strip would stay 18px tall (its own
     vertical padding) instead of closing. */
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  background: var(--carbon);
  border-bottom: 1px solid color-mix(in srgb, var(--metal) 32%, transparent);
  /* grid-template-rows is deliberately NOT transitioned: this element is in the
     sticky header, the collapse fires on every scroll direction change, and
     animating a grid track re-laid-out the whole page once per frame. The row
     now snaps and the opacity fade carries the motion. */
  transition: opacity var(--dur-base) var(--ease),
              border-color var(--dur-slow) var(--ease);
}
.site-header.strip-collapsed .brand-strip {
  grid-template-rows: minmax(0, 0fr);
  border-bottom-color: transparent;
  opacity: 0;
}

.brand-strip-inner {
  min-height: 0;                       /* required for the 1fr -> 0fr collapse */
  padding: 9px 0;
  gap: 22px;
  font-family: var(--font-display);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.brand-strip-inner span:first-child { color: color-mix(in srgb, var(--paper) 92%, transparent); letter-spacing: 0.16em; }
.brand-strip-inner span:nth-child(2) { color: color-mix(in srgb, var(--paper) 66%, transparent); }
.brand-strip-inner a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-bottom: 0;                    /* the permanent gold rule read as noise */
  color: var(--sun);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease);
}
.brand-strip-inner a::after {
  content: "\2192";
  font-size: var(--fs-100);
  letter-spacing: 0;
  transition: transform var(--dur-base) var(--ease);
}
.brand-strip-inner a:hover { color: var(--paper); }
.brand-strip-inner a:hover::after { transform: translateX(3px); }
.brand-strip-inner a:focus-visible { outline: 2px solid var(--metal); outline-offset: 3px; }

/* The strip carries three items. Measured with the shipping type, all three sit
   on one line down to 834px and no further; the rule that drops the middle one
   fired only at 760px. That left 761-833px — iPad portrait at 768 among them —
   showing all three, each wrapping to two lines, with the arrow orphaned beside
   a stack of broken phrases. Drop the middle item while the row is still a row. */
@media (max-width: 860px) {
  .site-header .brand-strip-inner span:nth-child(2) { display: none; }
  .site-header .brand-strip-inner { justify-content: space-between; gap: 14px; }
}

/* The 520px breakpoint above hides the strip; restate it, since the rules in
   this block are more specific and would otherwise switch it back on. */
@media (max-width: 520px) {
  .site-header .brand-strip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .brand-strip { transition: none; }
}

/* ---- Hero: one statement, one line, two buttons ------------------------- */
@media (min-width: 761px) {
  /* Shorter than a full viewport on purpose: the category row below stays
     visible, so the page reads as "there is more" without needing a cue. */
  .store-hero { min-height: clamp(470px, 78svh, 700px); }
}
.store-hero .hero-inner {
  max-width: min(820px, 100%);
  padding: clamp(60px, 11vh, 116px) 0 clamp(56px, 9vh, 92px);
  gap: clamp(20px, 2.6vh, 30px);
}
.store-hero .hero-copy {
  max-width: 34ch;
  color: color-mix(in srgb, var(--paper) 82%, transparent);
}
.store-hero .hero-actions { margin-top: clamp(6px, 1vh, 14px); }

/* On a 390px phone the hero alone ran ~495px before the category row and the
   trust line, so the first product and the first price were two screens down.
   Half the vertical padding buys back a card. */
@media (max-width: 520px) {
  .store-hero .hero-inner { padding: 44px 0 40px; }
}

/* ---- Category row (replaces the numbered brand-rail) -------------------- */
.quick-cats {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
}
.quick-cats-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.quick-cats-inner a {
  position: relative;
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 12px;
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: var(--fs-300);
  font-weight: 600;
  transition: color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.quick-cats-inner a + a { border-left: 1px solid var(--border); }
.quick-cats-inner a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 15px;
  width: 28px;
  height: 1px;
  background: var(--metal);
  transform: translateX(-50%) scaleX(0);
  transition: transform var(--dur-base) var(--ease);
}
.quick-cats-inner a:hover { background: var(--bg-muted); }
.quick-cats-inner a:hover::after,
.quick-cats-inner a:focus-visible::after { transform: translateX(-50%) scaleX(1); }
.quick-cats-inner a:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

@media (max-width: 620px) {
  .quick-cats-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-cats-inner a { min-height: 58px; }
  .quick-cats-inner a:nth-child(odd) { border-left: 0; }
  .quick-cats-inner a:nth-child(n + 3) { border-top: 1px solid var(--border); }
}

/* ---- Trust row: the four service cards, as one line of text ------------- */
.trust-line {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.trust-line-inner {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px clamp(14px, 2.2vw, 24px);
  padding: 15px 0;
  color: var(--muted);
  font-size: var(--fs-200);
}
.trust-line-inner > span {
  display: inline-flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 24px);
}
/* That gap exists to space the ::before bullet from its label, and it applies to
   every flex item — so wrapping the free-delivery figure in its own element tore
   a 14-24px hole into the middle of the sentence. display:contents keeps the
   element addressable from JS while removing its box from the flex flow, so the
   figure and the words around it stay one text run. */
.trust-line-inner [data-free-delivery-threshold] {
  display: contents;
}
.trust-line-inner > span + span::before {
  content: "";
  flex: 0 0 auto;
  width: 3px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--metal);
}
.trust-line-inner a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.trust-line-inner a:hover { color: var(--text); border-bottom-color: var(--metal); }
.trust-line-inner a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Reveal the new category row the way the old sections did. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .quick-cats {
      animation: revealUp .8s var(--ease) both;
      animation-timeline: view();
      animation-range: entry 2% entry 56%;
    }
  }
}

/* ---- Catalog heading: gold hairline instead of the three-colour bar ----- */
.catalog-head h2,
.section-heading h1,
.section-heading h2 { font-size: var(--fs-h2); }
.catalog-head h2::after {
  bottom: -10px;
  width: 44px;
  height: 1px;
  border-radius: 0;
  background: var(--metal);
}

/* ---- Film band: same picture, less copy -------------------------------- */
.film-inner { padding: clamp(56px, 9vh, 104px) 0; }
.film-title { font-size: var(--fs-display); margin-bottom: 14px; }
.film-copy { margin-bottom: 22px; }

/* ---- Footer: one slab, one row of links -------------------------------- */

.footer-lead {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px clamp(20px, 3vw, 44px);
}
.footer-logo { width: 142px; height: 50px; }
.footer-tagline {
  flex: 1 1 260px;
  margin: 0;
  max-width: 44ch;
  color: color-mix(in srgb, var(--paper) 72%, transparent);
  font-size: var(--fs-200);
  line-height: 1.55;
}
.footer-reach { display: grid; gap: 5px; }
.footer-reach a {
  width: max-content;
  max-width: 100%;
  color: color-mix(in srgb, var(--paper) 84%, transparent);
  font-size: var(--fs-200);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.footer-reach a:hover { color: var(--paper); border-bottom-color: var(--metal); }
.footer-reach a:focus-visible { outline: 2px solid var(--metal); outline-offset: 3px; }

/* Outline chips: the brand-coloured Facebook blue and Instagram gradient were
   the loudest thing on the page. */
.site-footer .social-links { gap: 8px; }
.site-footer .social-btn {
  width: 36px;
  height: 36px;
  border: 1px solid oklch(1 0 0 / .2);
  border-radius: var(--radius-sm);
  background: none;
  color: color-mix(in srgb, var(--paper) 80%, transparent);
  box-shadow: none;
  transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.site-footer .social-btn svg { width: 17px; height: 17px; }
.site-footer .social-btn:hover { color: var(--paper); border-color: var(--metal); transform: none; opacity: 1; }

.footer-nav { position: relative; z-index: 1; margin-top: clamp(20px, 2.8vw, 32px); }
.footer-nav-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 11px clamp(15px, 2.2vw, 28px);
  padding-top: 18px;
  border-top: 1px solid oklch(1 0 0 / .12);
}
.footer-nav-inner a,
.footer-nav-inner .footer-link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: color-mix(in srgb, var(--paper) 74%, transparent);
  font-family: var(--font-body);
  font-size: var(--fs-200);
  font-weight: 400;
  text-decoration: none;
  transition: color var(--dur-base) var(--ease);
}
.footer-nav-inner a:hover,
.footer-nav-inner .footer-link-btn:hover { color: var(--paper); }
.footer-nav-inner a:focus-visible,
.footer-nav-inner .footer-link-btn:focus-visible { outline: 2px solid var(--metal); outline-offset: 3px; }

.footer-bar { margin-top: clamp(18px, 2.2vw, 28px); }
.footer-bar-inner { padding: 14px 0 2px; }

/* Flat text rows are only as tall as their line box (~23px). On touch layouts
   that misses the 24px WCAG 2.5.8 target, so pad them and pull the row gap in
   so the footer does not grow taller in exchange. */
@media (max-width: 760px) {
  .footer-nav-inner { gap: 3px clamp(15px, 3vw, 28px); }
  .footer-nav-inner a,
  .footer-nav-inner .footer-link-btn { padding: 7px 0; }
  .footer-reach a { padding: 5px 0; }
  .trust-line-inner { font-size: var(--fs-200); }
  .trust-line-inner a { display: inline-block; padding: 5px 0; }
}

/* ---- /contact keeps the store map that left the footer ------------------ */
.contact-map iframe {
  width: 100%;
  height: clamp(230px, 32vw, 340px);
  display: block;
  border: 0;
  border-radius: var(--radius);
  filter: saturate(.92);
}
body.dark .contact-map iframe { filter: saturate(.84) brightness(.9); }

/* ---- Header: three destinations, one icon rail --------------------------
   The header used to carry four link types side by side — two catalog filters
   ("Ново", "Промоции"), a mega panel and a personal list ("Любими") — plus
   three differently weighted controls on the right: a 44px glyph square, a
   wide "Вход / Регистрация" slab and a filled black cart. Four weights, no
   hierarchy.

   Now: navigation is Ново / Промоции / Категории, and everything that belongs
   to *you* (search, favourites, account, bag, theme) is one rail of identical
   40px icons. Promotions appear in exactly one place — the top-level link; the
   deal card inside the panel is the same destination, so it is the link now
   instead of carrying a second "Виж промоциите" of its own.
   ------------------------------------------------------------------------ */

.header-wrap {
  min-height: 66px;
  gap: clamp(10px, 2vw, 26px);
}

.logo {
  width: clamp(124px, 11vw, 150px);
  height: 50px;
}

.main-nav { gap: clamp(0px, .8vw, 8px); }

.main-nav > a,
.nav-dropdown > summary {
  min-height: 40px;
  padding: 8px clamp(9px, 1vw, 14px);
  font-size: var(--fs-200);
  letter-spacing: 0.08em;
}

/* --- the rail ----------------------------------------------------------- */
.header-tools {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

/* One shape for every control. No borders, no fills at rest — the icon is the
   whole button, and hover is the only decoration. */
.header-tools .rail-btn,
.header-tools #themeToggle,
.header-tools #cartToggle,
.header-tools #accountBtn {
  position: relative;
  flex: 0 0 auto;
  /* 44px is the floor, and these are the bag, the search and the favourites —
     at 40px with a 1px gap a thumb aiming at the bag landed on favourites. */
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--muted);
  font-size: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease);
}
.header-tools .rail-btn:hover,
.header-tools .rail-btn:focus-visible {
  background: color-mix(in srgb, var(--metal) 14%, transparent);
  color: var(--text);
}
.header-tools .rail-btn:focus-visible {
  outline: 2px solid var(--metal);
  outline-offset: 2px;
}
.header-tools .rail-btn svg { display: block; }
.header-tools .rail-btn.hidden { display: none; }

/* Signed in: a gold dot on the account icon says it without a name in the bar. */
.header-tools #accountBtn.is-authed::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--metal);
  box-shadow: 0 0 0 2px var(--bg-soft);
}

/* Counters ride the icon rather than sitting beside a word. */
.rail-count {
  position: absolute;
  top: 1px;
  right: 0;
  min-width: 17px;
  height: 17px;
  display: inline-grid;
  place-items: center;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--metal);
  color: var(--carbon);
  font-family: var(--font-body);
  font-size: var(--fs-100);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--bg-soft);
}
.rail-count[hidden] { display: none; }

/* The deal card is a link now; it must not inherit the panel links' arrow
   idiom or the active-page underline that [data-nav-page] carries. */
.nav-menu .nav-deal { text-decoration: none; }
.nav-menu .nav-deal::before { content: none; }
.nav-menu .nav-deal .nav-deal-eyebrow,
.nav-menu .nav-deal .nav-deal-figure,
.nav-menu .nav-deal .nav-deal-name { display: block; }
.nav-menu .nav-deal.active { background: inherit; }

/* --- Tablet (901-1120px): keep the words, tighten the metrics.
       The drawer used to start at 1120px, which threw the whole navigation
       away on a landscape tablet that had room for it. Undo the drawer here
       and hand the range back to the row. ---------------------------------- */
@media (max-width: 1120px) and (min-width: 901px) {
  .nav-toggle { display: none; }
  /* Scoped to .site-header on purpose: the drawer rule this undoes is itself
     written as `.site-header .main-nav` to outrank the earlier plain
     `.main-nav` media rules, so a bare .main-nav here would silently lose. */
  .site-header .main-nav {
    position: static;
    inset: auto;
    display: flex;
    /* The wider `max-width: 1120px` block sets `order: 3` so the nav can drop
       onto its own row under the logo. This block hands the range back to a
       single row but used to reset only width/justify-content — the stale
       order:3 survived, which put the icon rail BEFORE the nav and produced
       [logo][icons] ......... [nav] on every 1024-1120px laptop. Reset it. */
    order: 0;
    width: auto;
    max-width: none;
    transform: none;
    visibility: visible;
    background: none;
    border-left: 0;
    box-shadow: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0;
    overflow: visible;
    overscroll-behavior: auto;
    z-index: auto;
  }
  .site-header .main-nav > a,
  .site-header .main-nav .nav-dropdown { width: auto; }
  .site-header .main-nav > a,
  .site-header .main-nav .nav-dropdown > summary {
    justify-content: center;
    padding: 8px 8px;
    font-size: var(--fs-100);
    letter-spacing: 0.08em;
    border-bottom: 0;
  }
  /* the panel goes back to being a floating dropdown, not a drawer child */
  .site-header .main-nav .nav-menu {
    position: absolute;
    width: max-content;
    max-width: min(700px, calc(100vw - 32px));
    margin-top: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-top: 2px solid var(--metal);
    background: var(--bg-soft);
    box-shadow: var(--shadow-lift);
  }
  .header-wrap { gap: 10px; }
}

@media (max-width: 900px) {
  /* hamburger | logo | rail — one row, always. Earlier breakpoints turned this
     into a grid (and at 560px a column), which is what put the header on two
     and three rows once the hamburger was injected. */
  .header-wrap {
    min-height: 60px;
    gap: 8px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
  }
  .logo { flex: 0 0 auto; }
  .header-tools {
    width: auto;
    justify-content: flex-end;
    display: flex;
  }
  .header-wrap > .nav-toggle {
    width: 44px;
    min-width: 44px;
    flex: 0 0 44px;
    height: 44px;
    border: 0;
    background: none;
    border-radius: var(--radius-pill);
    /* The "Sizes" pass near line 7816 sets `gap: 0` on .nav-toggle, which
       stacked the three 2px bars into one 6px slab — the icon read as a
       single dash at every mobile width. Restore the spacing. */
    gap: 4px;
  }
  .header-wrap > .nav-toggle:hover {
    background: color-mix(in srgb, var(--metal) 14%, transparent);
  }
  /* Theme and account move into the drawer: on a phone the bag and search are
     what get touched, and five 40px targets crowd a 360px bar. */
  .header-tools #themeToggle,
  .header-tools #accountBtn { display: none; }
}

/* --- Phone: drawer gets the controls the rail dropped --------------------
   Base state first — these two lived after the media query and, being equally
   specific and later in the file, silently won at every width. --------------- */
.nav-drawer-tools { display: none; }
.rail-label { display: none; }

@media (max-width: 900px) {
  .main-nav { padding: 78px 20px 24px; gap: 0; }
  .main-nav > a,
  .main-nav .nav-dropdown > summary {
    padding: 14px 4px;
    font-size: var(--fs-300);
    letter-spacing: 0.08em;
  }
  .nav-drawer-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
  }
  .nav-drawer-tools .rail-btn {
    width: auto;
    min-width: 0;
    flex: 1 1 0;
    height: 44px;
    gap: 9px;
    grid-auto-flow: column;
    place-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font-display);
    font-size: var(--fs-100);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .nav-drawer-tools .rail-btn .rail-label { display: inline; }
}

/* ---- Storefront teaser: the newest arrivals, then a hand-off ------------- */
/* The full catalog moved to /products and its category addresses. What stays on
   "/" is a short strip, so it needs a way out rather than a filter bar. */
.home-teaser .catalog-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.home-teaser .catalog-head .eyebrow { margin-bottom: 6px; }
.home-teaser-foot {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: clamp(24px, 4vh, 40px);
}
@media (max-width: 560px) {
  .home-teaser .catalog-head { align-items: stretch; }
  .home-teaser .catalog-head .btn,
  .home-teaser-foot .btn { width: 100%; justify-content: center; }
}

/* ---- Off-canvas panels must not widen the page --------------------------- */
/* aside.cart-drawer sits off to the right until opened. Being position:fixed it
   still counted toward the document width, so a 375px phone had a 719px
   scrollWidth and the whole page slid sideways under the thumb. `clip` rather
   than `hidden`: it stops the scroll without turning <body> into a scroll
   container, which would break the sticky header. */
@media (max-width: 1120px) {
  html, body { overflow-x: clip; }
  /* …but an explicit overflow on <html> also stops the body-to-viewport
     propagation that `body { overflow: hidden }` relies on, so the page kept
     scrolling behind an open drawer. Lock the root element itself. */
  html:has(body.nav-open),
  html:has(body.drawer-open),
  html:has(body.checkout-active) { overflow: hidden; }
}

/* ---- 404: routes out, not just a wall ----------------------------------- */
.err-routes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  margin-top: clamp(22px, 4vh, 34px);
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.err-routes a {
  color: var(--muted);
  text-decoration: none;
  padding: 6px 2px;
  transition: color var(--dur-base) var(--ease);
}
.err-routes a:hover { color: var(--text); }

/* ---- Listing page head: a signpost, not a hero ---------------------------
   Three things were wrong here. The eyebrow inherited the shared
   .hero-badge/.eyebrow/.tag rule and rendered as a grey pill, so a label read
   as a button. The H1 used hero-scale type (up to 3.3rem) for results that are
   often two items. And the same heading appeared three times — page H1, grid
   H2, result H3 — while the products themselves sat below the fold behind a
   brand rail and four trust cards. Products come first now. */
.catalog-page-head {
  padding: clamp(20px, 3vw, 34px) 0 clamp(16px, 2.4vw, 24px);
}
.catalog-page-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--muted);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: 0.16em;
}
/* the same gold tick the hero eyebrow uses — one idiom, not two */
.catalog-page-head .eyebrow::before {
  content: "";
  width: 26px;
  height: 1.5px;
  background: var(--metal);
}
.catalog-page-head h1 {
  margin: 0;
  font-size: var(--fs-h2);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.catalog-page-head .breadcrumbs { margin-bottom: 14px; }

/* Search sits alone on its row now that the duplicated headings are gone. */
.catalog-head-search-only {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 14px;
}
.catalog-head-search-only .search-wrap {
  width: min(420px, 100%);
}
@media (max-width: 700px) {
  .catalog-head-search-only { justify-content: stretch; }
  .catalog-head-search-only .search-wrap { width: 100%; }
}

/* The result count is the heading's factual half — give it presence instead of
   letting it read as fine print beside the sort dropdown. */
.catalog-controls .product-count {
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---- Filters: a bar, not a panel ----------------------------------------
   Measured before this change: the filter block was 269px tall and pushed the
   first product row to y=790 on a 647px viewport — the shopper landed on a
   category page and saw no products at all. Same controls, one row, ~150px. */
.catalog-section .filters {
  grid-template-columns: minmax(200px, 1.1fr) minmax(140px, .8fr) minmax(140px, .8fr) auto;
  gap: 12px 18px;
  padding: 14px 16px;
  align-items: end;
}
.catalog-section .filter-head { margin-bottom: 7px; }
.catalog-section .range-stack { gap: 8px; }
.catalog-section .filters label,
.catalog-section .price-filter label { margin-bottom: 4px; }

/* The € sign sat on top of the first digit — "19" read as "€9". */
.price-input-field .cur { left: 11px; font-weight: 600; }
.price-input-field input { padding-left: 30px; }

/* "Изчисти филтрите" is an escape hatch, not a call to action: a bordered
   button gave it the same weight as the filters themselves. */
.catalog-section .filter-clear {
  align-self: end;
  padding: 0 2px;
  min-height: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: var(--fs-100);
  text-decoration: underline;
  text-underline-offset: 3px;
  box-shadow: none;
}
.catalog-section .filter-clear:hover {
  background: none;
  border: 0;
  color: var(--accent-2);
}

/* Tighter rhythm between the head, the search row and the grid. */
.catalog-page-head + .catalog-section { padding-top: clamp(14px, 2vw, 22px); }
.catalog-section .result-row,
.catalog-section .catalog-controls { margin-block: 12px; }

@media (max-width: 900px) {
  .catalog-section .filters {
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
  }
  .catalog-section .filters .price-filter { grid-column: 1 / -1; }
  .catalog-section .filter-clear { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 560px) {
  .catalog-section .filters { grid-template-columns: 1fr; }
}

/* Vertical budget on a listing page: measured 698px of chrome above the first
   product row (39 strip + 66 header + 170 head + 56 search + 181 filters + 51
   chips + 70 controls). The page head was the heaviest for the least content —
   a breadcrumb, a label and one line of heading. */
.catalog-page-head {
  padding: clamp(16px, 2vw, 22px) 0 clamp(12px, 1.6vw, 16px);
}
.catalog-page-head .breadcrumbs { margin-bottom: 10px; }
.catalog-page-head .eyebrow { margin-bottom: 7px; }
.catalog-section #filterChips { margin-bottom: 10px; }
.catalog-section .catalog-controls { margin-block: 8px; }
.catalog-section .search-input { min-height: 42px; }

/* ---- Filters collapse for real ------------------------------------------
   The toggle already existed and app.js already flipped an `open` class on the
   panel — but no rule ever consumed it, so the button did nothing and the panel
   was permanently expanded. Now it collapses, on every width. */
/* Desktop only (761px+): below that, the pre-existing mobile collapse at the
   760px breakpoint already owns this panel with its own visibility handling —
   leave it alone.

   `display` rather than max-height or the 0fr->1fr grid trick. This element is
   itself a 4-column grid and both height-based approaches left it stuck at 2px
   (its borders) no matter what the cascade said. A binary swap cannot be argued
   with; the cost is no open/close easing, which is not worth more chasing. */
/* Applied at every width. Below 760px the older rule collapsed the panel with
   max-height + visibility, which still reserved ~28px of dead space and left a
   gap under the controls. `display` reclaims it and removes the seven controls
   from the tab order at the same time — the thing that visibility was there for. */
.catalog-section #catalogFilters { display: none; }
.catalog-section #catalogFilters.open {
  display: grid;
  visibility: visible;
  max-height: none;
  margin-bottom: 14px;
}

.filter-toggle {
  display: inline-flex;
  width: auto;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-200);
}
.filter-toggle[aria-expanded="true"] {
  border-color: var(--metal);
  color: var(--accent-label);
}
.filter-toggle::after {
  content: "";
  width: 7px; height: 7px;
  margin-left: 4px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform var(--dur-base) var(--ease);
}
.filter-toggle[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-1px); }

.catalog-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.catalog-controls .sort-field { margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
  .catalog-section #catalogFilters { transition: none; }
}

/* Search now lives inside the control row: count · search · filters · sort.
   It takes the slack so the row reads as one unit instead of a stranded box. */
.catalog-controls .search-wrap {
  flex: 1 1 220px;
  min-width: 0;
  max-width: 380px;
}
.catalog-controls .search-input { min-height: 44px; }
@media (max-width: 780px) {
  .catalog-controls { gap: 10px; }
  .catalog-controls .search-wrap { flex-basis: 100%; order: -1; max-width: none; }
  .catalog-controls .sort-field { margin-left: 0; }
}

/* Phone: "Подреди" is inferable from the dropdown itself, and dropping it lets
   the sort control sit beside the filter button instead of taking its own row. */
@media (max-width: 560px) {
  .catalog-controls .sort-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .catalog-controls .product-count { flex: 0 0 auto; }
  .catalog-controls .sort-field { flex: 1 1 auto; min-width: 0; }
}

/* =========================================================================
   Hooks for markup that other files own. Each of these is the CSS half of a
   fix; the class or attribute is set by app.js / the page it belongs to.
   ========================================================================= */

/* Re-filtering a catalog that already has results: dim what is on screen
   rather than swapping it for skeletons. Opacity only, never a layout
   property, so the grid does not reflow while it waits. */
.product-grid.is-refreshing {
  opacity: .45;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease);
}

/* Each order is a heading so a returning customer can jump between them. */
.order-card-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-300);
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

/* The product shell is server-rendered with title and image already filled, so
   it can be visible before app.js finishes. Without this it stays `hidden`. */
body[data-product-ready] #productDetail.hidden { display: grid; }

/* One live proof line under the hero copy: today's deepest discount. */
.hero-proof {
  margin: 0;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--fs-200);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 2px 20px rgba(0, 0, 0, .6);
}
.hero-proof[hidden] { display: none; }

/* ---- Category menu: grouped, with depth ---------------------------------
   The panel listed 9-11 categories per gender alphabetically, so "Обувки" sat
   between "Дънки" and "Панталони" and a shopper after shoes read past the
   clothing to find them. Groups give the list a shape; the count tells them
   whether a shelf is worth the click. */
.nav-cat-group {
  margin: 14px 0 5px;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nav-cat-group:first-child { margin-top: 4px; }

.nav-menu .nav-col-list a { justify-content: space-between; }
.nav-cat-count {
  margin-left: 10px;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--fs-100);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.nav-menu .nav-col-list a:hover .nav-cat-count,
.nav-menu .nav-col-list a.active .nav-cat-count { color: var(--accent-label); }

/* ---- Progressive catalog: the "show more" row --------------------------- */
/* The grid renders in batches of 24 (see renderCatalogBatch in app.js). This row
   sits under it, states how much of the result set is on screen, and carries the
   button used when IntersectionObserver is unavailable — the observer normally
   pulls the next batch in before the shopper ever reaches it. */
.catalog-more {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 28px 0 4px;
}
.catalog-more[hidden] { display: none; }
.catalog-more-count {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-200);
  letter-spacing: 0;
}

/* =========================================================================
   Touch input sizing
   -------------------------------------------------------------------------
   iOS Safari zooms the whole page when a field smaller than 16px takes focus,
   and it does not zoom back out. On a phone that turned every search, every
   filter and every checkout field into a pinch-and-scroll fight.
   The design sizes are kept for mouse pointers; only touch gets 16px. Listed
   selector by selector, and last in the file, because several of the offenders
   are class-scoped and would otherwise out-rank a bare element rule.
   ========================================================================== */
@media (pointer: coarse) {
  input,
  select,
  textarea,
  .search-input,
  .filters select,
  .price-inputs input,
  .select-wrap-sm select,
  form label input,
  form label select,
  form label textarea {
    font-size: 16px;
  }
}