/* Stanley 1913 Georgia — stenley.ge
   Design tokens & components (from Claude Design project) */

:root {
  --bg: #E9E6DE;
  --bg-alt: #F1EFE9;
  --bg-admin: #F4F3EF;
  --ink: #17201B;
  --green: #1F3A2E;
  --rust: #993F1F;
  /* Lighter tonal variant of --rust for dark surfaces. The brand rust only
     reaches 1.8:1 on the green footer; this clears the 3:1 large-text bar. */
  --rust-on-dark: #CE7550;
  --muted: #686359;
  --faint: #69645A;
  --border: #E7E3DA;
  --strike: #69645A;
  --input-bg: #FAF9F6;
  --success-bg: #E4EFE4;
  --danger-bg: #F6E7DE;
  --gold: #785C11;
  --sage: #2E6B41;
  --body-2: #4C554F;
  --body-3: #3A423C;
  --rust-hover: #85371B;
  --footer-muted: #9BB0A5;
  --sage-bg: #EAEEE7;
  /* Semantic status colours. Each aliases a brand value already in use, so
     these add a name rather than a new colour. --rust is not renamed to
     --danger wholesale: it is also the brand accent on prices, review stars
     and the wishlist button, where "danger" would be the wrong word. */
  --success: var(--sage);
  --success-strong: var(--green);
  --warning: var(--gold);
  --warning-bg: #F3EDE0;
  --danger: #a4304a;
  --info: #3a5a7a;
  --dark: #17201B;
  /* ── Stanley Storefront design-system tokens (build 317). Canonical semantic
     names adopted from the design system; older names kept as aliases so every
     existing selector keeps working. Two deliberate improvements from the DS:
     (1) --danger is now a distinct crimson, no longer var(--rust) — errors and
     out-of-stock no longer read as the brand rust used on prices/stars/wishlist
     (which still use --rust directly); --info is a distinct cool blue.
     (2) --border-strong is a higher-contrast edge (3:1+) for meaningful controls
     — inputs, outline buttons, steppers — while decorative dividers keep the
     lighter --border (aliased here as --border-subtle). */
  --surface-page: var(--bg);
  --surface-card: #ffffff;
  --surface-plate: var(--bg-alt);
  --surface-sunken: #dedad0;
  --border-subtle: var(--border);
  --border-strong: #7d745f;
  --ink-muted: var(--body-3);
  --ink-on-brand: var(--footer-muted);
  --brand: var(--green);
  --brand-hover: #16281f;
  --on-brand: #ffffff;
  --accent: var(--rust);
  --accent-hover: var(--rust-hover);
  --on-accent: #ffffff;
  --focus-ring: var(--green);
  /* docs/tasks/HOMEPAGE_FONT_SWAP_LAYOUT_SHIFT.md: the named Fallback faces carry
     metric-override descriptors matching Noto Sans/Serif Georgian's real ascent/descent/line-gap
     (assets/css/fonts.css), so font-display:swap's fallback-then-real-font transition no longer
     moves or resizes anything - only the letterforms change. */
  --serif: 'Noto Serif Georgian', 'Noto Serif Georgian Fallback', serif;
  --sans: 'Noto Sans Georgian', 'Noto Sans Georgian Fallback', sans-serif;
  --mono: 'Space Mono', monospace;
  /* Stage 3 DS type scale: one set of steps so ~13 near-identical heading
     classes resolve to four sizes. Values track the dominant existing sizes,
     so remapped headings shift at most ~4px. */
  --fs-display: clamp(30px, 3.4vw, 42px);
  --fs-h1: clamp(28px, 3vw, 38px);
  --fs-h2: clamp(22px, 2.4vw, 30px);
  --fs-h3: 20px;
  /* Idle auto-logout modal accents (admin remaps these to brass in admin.css). */
  --idle-accent: var(--green);
  --idle-ring: var(--rust);
}

/* Elevation, stacking and motion tokens (build449). Values are the ones the rules used before, verbatim --
   this only gives them ONE home (nothing below hand-writes a box-shadow, z-index or duration).
   Rings: focus/selection outlines. Elevation 1: resting, 2: hover/dropdown, 3: floating surfaces. */
:root {
  --ring-field: 0 0 0 3px rgba(31,58,46,.15);
  --ring-error: 0 0 0 3px rgba(153, 63, 31, .18);
  --ring-green-2: 0 0 0 2px var(--green);
  --ring-green-3: 0 0 0 3px var(--green);
  --ring-border-1: 0 0 0 1px var(--border);
  --ring-border-2: 0 0 0 2px var(--border);
  --ring-orb: inset 0 0 0 12px #fff, 0 0 0 1px var(--border);
  --ring-orb-unknown: inset 0 0 0 12px #fff, 0 0 0 2px var(--gold);
  --shadow-1-card: 0 1px 2px rgba(20,25,20,.04);
  --shadow-1-hint: 0 2px 8px rgba(23, 32, 27, .14);
  --shadow-1-soft: 0 4px 16px rgba(22,48,43,.06);
  --shadow-1-dot: 0 5px 12px rgba(20,25,20,.08);
  --shadow-2-drawer: 0 12px 24px rgba(23, 32, 27, .08);
  --shadow-2-btn: 0 12px 24px rgba(22, 48, 43, .25);
  --shadow-2-blog: 0 14px 30px rgba(22, 48, 43, .12);
  --shadow-2-lift: 0 18px 36px rgba(22, 48, 43, .14);
  --shadow-3-consent: 0 12px 32px rgba(23, 32, 27, .28);
  --shadow-3-float: 0 14px 34px rgba(0,0,0,.25);
  --shadow-3-toast: 0 16px 40px rgba(22, 48, 43, .3);
  --shadow-3-login: 0 16px 40px rgba(22, 48, 43, .12);
  --shadow-3-result: 0 22px 54px rgba(22,48,43,.1);
  --shadow-3-sandbox: 0 22px 54px rgba(22,48,43,.12);
  --shadow-3-modal: 0 24px 60px -18px rgba(23,32,27,.35);
  --shadow-3-sheet: 0 -18px 54px rgba(8,25,22,.24);
  --shadow-3-hero: 0 40px 80px rgba(0,0,0,.35);
  /* Stacking scale (numbers unchanged): in-component layers, sticky header, toast, cookie banner, filter sheet, modal. */
  --z-base: 1;
  --z-raised: 2;
  --z-overlap: 3;
  --z-sticky: 10;
  --z-toast: 20;
  --z-banner: 200;
  --z-sheet-backdrop: 980;
  --z-sheet: 990;
  --z-modal: 1000;
  /* Motion */
  --dur-instant: .12s;
  --dur-fast: .15s;
  --dur-base: .2s;
  --dur-drawer: .18s;
  --dur-slow: .3s;
  --dur-slower: .45s;
  --ease-standard: ease;
  --ease-out: ease-out;
  --ease-linear: linear;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: var(--z-modal); padding: 12px 18px; border: 2px solid var(--bg); border-radius: 8px; background: var(--green); color: #fff; font-weight: 700; text-decoration: none; transform: translateY(calc(-100% - 24px)); }
.skip-link:focus, .skip-link:focus-visible { color: #fff; transform: translateY(0); outline: 3px solid var(--rust); outline-offset: 2px; }
/* A page with little content must still put its footer at the bottom of the
   screen rather than leaving it floating mid-viewport. The per-page classes
   below (.account-page, .commerce-state-page) predate this and still win on
   specificity, so they are unaffected. */
body { min-height: 100dvh; display: flex; flex-direction: column; }
body > footer { margin-top: auto; }

body { margin: 0; background: var(--bg); font-family: var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
a { color: var(--green); }
@media (hover: hover) and (pointer: fine) { a:hover { color: var(--rust-hover); } }
::selection { background: var(--rust); color: var(--bg); }

/* Accessibility: visible keyboard focus (audit fix) */
/* border-radius here applied to the focused element, not to the ring: an admin
   input with a 12px radius snapped to 4px the moment it took focus, and the
   2px-offset outline then read as detached from a box that had just changed
   shape. The outline follows the element's own radius on its own. */
:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }

/* Accessibility: respect reduced-motion (audit fix) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
input, select, textarea, button { font-family: var(--sans); }
input::placeholder, textarea::placeholder { color: var(--strike); }
img { max-width: 100%; }

.container { max-width: 1440px; margin: 0 auto; padding-left: clamp(24px, 4vw, 56px); padding-right: clamp(24px, 4vw, 56px); }
.container-narrow { max-width: 1240px; margin: 0 auto; padding-left: clamp(24px, 4vw, 56px); padding-right: clamp(24px, 4vw, 56px); }

.serif { font-family: var(--serif); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: rgba(250, 249, 246, .85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 14px clamp(24px, 4vw, 56px);
  display: flex; align-items: center; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
}
.logo { font-family: var(--serif); font-weight: 700; font-size: 24px; color: var(--green); text-decoration: none; letter-spacing: .01em; white-space: nowrap; }
.logo span { color: var(--rust); }
.main-nav { display: flex; gap: clamp(20px, 3vw, 40px); align-items: center; }
.main-nav a { font-size: 15px; font-weight: 500; text-decoration: none; color: var(--body-3); }
.main-nav a.active { font-weight: 600; color: var(--green); }
.header-side { display: flex; align-items: center; gap: 22px; }
/* The drawer wrapper is layout-neutral on desktop: `contents` lets the search
   form and nav stay direct flex children of the header, exactly as before.
   Below the mobile breakpoint it becomes a real dropdown panel. */
.header-drawer { display: contents; }
.header-search {
  /* No vertical padding: the input stretches to the full 44px instead, so the
     whole pill focuses the field rather than only the 21px of text inside it.
     min-height keeps the pill exactly the size the padding used to give it. */
  display: flex; align-items: center; min-height: 44px; gap: 8px; border: 1px solid #DDD8CC;
  border-radius: var(--r-pill); padding: 0 16px; background: #FAF9F6; flex: 0 1 260px; min-width: 180px;
}
/* The input drops its own outline, so the wrapper carries the focus ring —
   otherwise keyboard users get no indication the search box is focused. */
.header-search:focus-within { border-color: var(--green); box-shadow: var(--ring-field); }
.header-search input {
  border: none; background: transparent; font-size: 14px; color: #17201B;
  outline: none; width: 100%; align-self: stretch; font-family: var(--sans);
}
/* build454: search suggestions. The list is an overlay under the pill (absolute, so opening it moves
   nothing below the header); it is the popup of the input's combobox role. */
.header-search { position: relative; }
.search-suggest {
  position: absolute; top: calc(100% + 8px); right: 0; width: 380px; max-width: calc(100vw - 32px);
  max-height: 60vh; overflow-y: auto; margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-ctrl);
  box-shadow: var(--shadow-2-drawer); z-index: var(--z-sticky);
}
.search-suggest[hidden] { display: none; }
.search-suggest [role="option"] {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px; min-height: 56px;
  border-radius: var(--r-ctrl); cursor: pointer; font-size: 14px; color: var(--ink);
}
.search-suggest [role="option"][aria-selected="true"] { background: var(--bg-alt); outline: 2px solid var(--green); outline-offset: -2px; }
.search-suggest img, .search-suggest-noimg { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 8px; object-fit: cover; background: var(--bg-alt); }
.search-suggest-name { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.search-suggest-price { flex: 0 0 auto; font-weight: 600; color: var(--rust); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .search-suggest [role="option"]:hover { background: var(--bg-alt); } }
.nav-toggle, .drawer-only { display: none; }
.header-phone { font-size: 14px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.cart-btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; background: #17201B; border-radius: 50%; text-decoration: none; flex-shrink: 0;
}
.cart-btn .cart-icon { color: var(--bg); font-size: 17px; display: inline-flex; }
/* Header icon button (profile / secondary), light variant */
.icon-round {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; background: #fff; border: 1px solid var(--border);
  border-radius: 50%; text-decoration: none; color: var(--green); flex-shrink: 0;
}
@media (hover: hover) and (pointer: fine) { .icon-round:hover { color: var(--green); border-color: var(--green); } }
/* Inline SVG icons sit on the text baseline cleanly */
.i { width: 1em; height: 1em; vertical-align: -0.125em; flex-shrink: 0; }
.cart-badge, .wish-badge {
  position: absolute; top: -3px; right: -3px; background: var(--rust); color: #fff;
  font-size: 11px; font-weight: 700; width: 19px; height: 19px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.cart-badge[hidden], .wish-badge[hidden] { display: none; }

/* === Breakpoint System === */
/* --bp-mobile: 640px   — Single column, stacked layout */
/* --bp-tablet: 768px   — Two column, side navigation */
/* --bp-desktop: 1024px — Full layout, max content width */
/* All responsive max-width queries consolidate to these three values.
   The admin product list retains an intermediate range query
   (min-width: 1025px and max-width: 1199px) for medium desktops. */
@media (max-width: 768px) {
  /* Compact single-row bar: menu button, logo, then wishlist + cart. The nav
     links, search and account move into the drawer so the header stops eating
     a quarter of the first screen and nothing clips at the right edge. */
  .header-phone { display: none; }
  .site-header { flex-wrap: nowrap; position: relative; gap: 12px; padding: 10px clamp(16px, 4vw, 24px); }
  .logo { font-size: 21px; margin-right: auto; }
  .header-side { gap: 10px; }
  .account-icon { display: none; }
  .nav-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex-shrink: 0; padding: 0;
    background: transparent; border: 1px solid var(--border); border-radius: 50%;
    color: var(--green); cursor: pointer;
  }
  .nav-toggle-close { display: none; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-open { display: none; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-close { display: inline-flex; }
  .header-drawer {
    display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg); border-bottom: 1px solid var(--border);
    padding: 16px clamp(16px, 4vw, 24px) 20px;
    box-shadow: var(--shadow-2-drawer);
  }
  /* Visibility is carried entirely by [hidden]; the entrance is a one-shot
     animation layered on top. If animations never run — throttled tab,
     reduced motion — the panel is still fully visible and interactive. */
  .header-drawer[hidden] { display: none; }
  .header-drawer.is-open { animation: drawer-in var(--dur-drawer) var(--ease-out); }
  @keyframes drawer-in { from { opacity: 0; transform: translateY(-6px); } }
  /* Search sits first in the panel, but stays after the nav in the DOM so the
     desktop header keeps its original logo / nav / search / actions order. */
  .header-drawer .header-search { order: -1; flex: 0 0 auto; width: 100%; margin-bottom: 14px; }
  .header-drawer .search-suggest { left: 0; right: 0; width: auto; max-width: none; }
  .header-drawer .main-nav { flex-direction: column; align-items: stretch; gap: 0; }
  .header-drawer .main-nav a {
    display: flex; align-items: center; min-height: 48px; font-size: 16px;
    border-bottom: 1px solid var(--border);
  }
  .header-drawer .main-nav a:last-child { border-bottom: none; }
  .drawer-only { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .header-drawer.is-open { animation: none; }
}

/* ---------- Buttons ---------- */
.btn { display: inline-block; min-height: 44px; border: none; cursor: pointer; text-decoration: none; text-align: center; border-radius: var(--r-ctrl); font-weight: 600; transition: transform var(--dur-base), box-shadow var(--dur-base), background var(--dur-base), border var(--dur-fast); }
.btn-primary { background: var(--green); color: var(--bg); font-size: 16px; padding: 17px 30px; }
@media (hover: hover) and (pointer: fine) { .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-2-btn); color: var(--bg); } }
.btn-rust { background: var(--rust); color: #fff; font-size: 16px; padding: 17px 40px; }
@media (hover: hover) and (pointer: fine) { .btn-rust:hover { transform: translateY(-2px); color: #fff; } }
.btn-outline { border: 1px solid var(--border-strong); background: transparent; color: var(--green); font-size: 15px; font-weight: 600; padding: 14px 32px; }
@media (hover: hover) and (pointer: fine) { .btn-outline:hover { border-color: var(--green); color: var(--green); } }
.btn-sm { font-size: 13px; padding: 10px 18px; }
.icon-btn {
  width: 44px; height: 44px; border-radius: 50%; background: var(--green); color: var(--bg);
  display: flex; align-items: center; justify-content: center; text-decoration: none; border: none;
  font-size: 16px; cursor: pointer; transition: background var(--dur-base); flex-shrink: 0;
}
@media (hover: hover) and (pointer: fine) { .icon-btn:hover { background: var(--rust); color: var(--bg); } }

/* ---------- Cards / tags ---------- */
.card { background: #fff; border-radius: 16px; border: 1px solid var(--border); box-shadow: var(--shadow-1-card); }
.card-pad { padding: clamp(20px, 3vw, 32px); }
.hover-lift { transition: transform var(--dur-base), box-shadow var(--dur-base); }
@media (hover: hover) and (pointer: fine) { .hover-lift:hover { transform: translateY(-5px); box-shadow: var(--shadow-2-lift); } }
/* Gentle product image zoom on card hover — the card already clips overflow, so
   the image scales within its frame. Complements the card lift above. */
.product-card .thumb { transition: transform var(--dur-slower) var(--ease-standard); }
@media (hover: hover) and (pointer: fine) { .product-card:hover .thumb { transform: scale(1.045); } }
@media (prefers-reduced-motion: reduce) { .product-card:hover .thumb { transform: none; } }

.tag { display: inline-block; color: #fff; font-size: 11px; font-weight: 600; padding: 5px 12px; border-radius: 100px; }
.pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 100px; }

/* ---------- Inputs ---------- */
.input {
  width: 100%; padding: 15px; border: 1px solid var(--border-strong); border-radius: var(--r-ctrl);
  /* 16px, not 14: iOS auto-zooms any focused input below 16px, and WebKit doesn't
     always restore scale=1 afterwards — that's the "stuck zoomed out" bug on
     multi-step forms like checkout. 16px removes the zoom trigger entirely. */
  font-size: 16px; background: var(--input-bg); color: var(--ink);
}
.input:focus { outline: 2px solid var(--green); outline-offset: -1px; }
.input::placeholder { color: var(--strike); opacity: 1; }
.input[aria-invalid="true"] {
  border-color: var(--danger); background: #FDF4F0;
}
.input[aria-invalid="true"]:focus { outline-color: var(--danger); }
/* Redesign Phase 4: admin form controls take the design system's readable edge
   (border-strong), a white field and a brass focus ring. Scoped to body.admin so
   the storefront inputs keep their own tones. */






.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }

/* ---------- Form labels & grouped fields ---------- */
.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--body-2);
  margin-bottom: 6px;
  line-height: 1.4;
}
.form-label .req { color: var(--rust); margin-left: 2px; }
.form-label .opt { color: var(--muted); font-weight: 400; font-size: 12px; margin-left: 6px; }
.form-field { display: flex; flex-direction: column; min-width: 0; }
.form-field .input { width: 100%; }
.form-field + .form-field { margin-top: 0; }
.field-error {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--rust);
  line-height: 1.5;
}
fieldset.form-group {
  border: none; padding: 0; margin: 0; min-width: 0;
}
fieldset.form-group legend {
  font-family: var(--sans); font-weight: 600; font-size: 13px;
  color: var(--body-2); margin-bottom: 10px; padding: 0;
}
/* Compact label rows used in inline forms (e.g., coupon) */
.form-inline { display: flex; gap: 10px; align-items: flex-end; }
.form-inline .form-field { flex: 1; min-width: 0; }

/* ---------- Qty stepper ---------- */
.stepper { display: flex; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--r-ctrl); overflow: hidden; background: #fff; }
.stepper button { width: 44px; height: 48px; background: #fff; border: none; font-size: 18px; cursor: pointer; }
.stepper .qty { width: 48px; text-align: center; font-weight: 600; font-size: 16px; }
/* The variant is about type size, not target size: 38x40 was below the 44px
   this project holds itself to, and the cart is where a mis-tap costs the most. */
.stepper-sm button { width: 44px; height: 48px; font-size: 16px; }
.stepper-sm .qty { width: 40px; font-size: 14px; }

/* ---------- Product card ---------- */
.product-card { background: #fff; border-radius: 16px; border: 1px solid var(--border); overflow: hidden; position: relative; box-shadow: var(--shadow-1-card); display: flex; flex-direction: column; }
.product-card .thumb { display: block; width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; background: var(--bg-alt); }
.product-card .body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.product-card .name { font-size: 15px; font-weight: 600; color: var(--green); text-decoration: none; margin-bottom: 6px; }
.card-name-link { display: block; color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .card-name-link:hover { color: var(--green); } }
.sale-image-link { display: block; }
.product-card .cat { font-size: 13px; color: var(--faint); margin-bottom: 12px; }
.product-card .price-row { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.price { font-family: var(--sans); font-weight: 700; font-size: 20px; color: var(--rust); }
.price-old { font-size: 13px; color: var(--strike); text-decoration: line-through; }
.card-tag { position: absolute; top: 16px; left: 16px; z-index: var(--z-base); }
.card-tag-right { position: absolute; top: 16px; right: 16px; z-index: var(--z-base); background: var(--danger-bg); color: var(--rust); }

/* ---------- Steps (cart/checkout) ---------- */
.steps { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.steps .sep { width: 32px; height: 1px; background: #D9D3C2; }
.step { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.step .dot {
  width: 26px; height: 26px; border-radius: 50%; font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #D9D3C2; color: var(--faint);
}
.step .lbl { font-size: 14px; font-weight: 500; color: var(--faint); }
.step.active .dot { background: var(--rust); border-color: var(--rust); color: #fff; }
.step.active .lbl { font-weight: 600; color: var(--green); }
.step.done .dot { background: var(--green); border-color: var(--green); color: var(--bg); }
.step.done .lbl { color: var(--muted); }

/* ---------- Radio option rows (checkout) ---------- */
.opt-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px; border-radius: var(--r-card); border: 1px solid var(--border);
  cursor: pointer; background: #fff; transition: border var(--dur-fast), background var(--dur-fast);
}
.opt-row.selected { border-color: var(--green); background: var(--bg); }
.opt-row .radio {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--green);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.opt-row .radio i { width: 10px; height: 10px; border-radius: 50%; background: transparent; }
.opt-row.selected .radio i { background: var(--rust); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: var(--z-toast);
  background: var(--green); color: var(--bg); border-radius: var(--r-pill); padding: 14px 24px;
  box-shadow: var(--shadow-3-toast);
  display: flex; align-items: center; gap: 16px; font-size: 14px; font-weight: 500; white-space: nowrap;
}
.toast a { color: var(--bg); font-weight: 600; text-decoration: underline; }
.toast[hidden] { display: none; }

/* ---------- Info boxes ---------- */
.note-box { padding: 16px 18px; background: var(--bg-alt); border-radius: var(--r-card); font-size: 13px; color: var(--body-2); line-height: 1.6; }
.success-box { background: var(--success-bg); color: var(--green); border-radius: var(--r-card); padding: 14px 18px; font-size: 14px; }

/* ---------- Footer ---------- */
.footer-big { background: var(--green); padding: clamp(40px, 5vw, 64px) clamp(24px, 4vw, 56px) 32px; }
.footer-big .cols { max-width: 1440px; margin: 0 auto 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-2xl); }
.footer-big .flogo { font-family: var(--serif); font-weight: 700; font-size: 22px; color: var(--bg); margin-bottom: 14px; }
.footer-big .flogo span { color: var(--rust-on-dark); }
.footer-big p { font-size: 14px; color: var(--footer-muted); line-height: 1.6; max-width: 320px; }
.footer-big .ftitle { font-size: 14px; font-weight: 600; color: var(--bg); margin-bottom: 16px; }
.footer-big .flinks { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--footer-muted); }
.footer-big .flinks a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--footer-muted); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .footer-big .flinks a:hover { color: var(--bg); } }
.footer-big .fbottom { max-width: 1440px; margin: 0 auto; border-top: 1px solid rgba(248, 244, 234, .12); padding-top: 24px; font-size: 13px; color: var(--footer-muted); }
.footer-small { background: var(--green); padding: 32px clamp(24px, 4vw, 56px); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer-small .flogo { font-family: var(--serif); font-weight: 700; font-size: 20px; color: var(--bg); }
.footer-small .flogo span { color: var(--rust-on-dark); }
.footer-small .copy { font-size: 13px; color: var(--footer-muted); }
.footer-small a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Breadcrumb ---------- */
.crumbs { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--faint); flex-wrap: wrap; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs .here { color: var(--green); font-weight: 500; }
.crumbs > span:not(.here) { font-size: 0; }
.crumbs > span:not(.here)::after { content: "\203A"; font-size: 13px; }

/* ---------- Headings ---------- */
.h1 { font-family: var(--serif); font-weight: 600; font-size: var(--fs-display); color: var(--green); margin: 0; letter-spacing: -0.02em; }
.h2 { font-family: var(--serif); font-weight: 600; font-size: var(--fs-h2); color: var(--green); margin: 0; letter-spacing: -0.02em; }
.eyebrow { font-family: var(--mono); font-size: 12px; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } /* build476: an explicit line-height — `normal` is the font's own metric, so the box grew 14px -> 17px when Space Mono replaced the fallback and pushed the page down */

/* ---------- Color swatches ---------- */
.swatch { width: 36px; height: 36px; border-radius: 50%; cursor: pointer; border: 2px solid #fff; box-shadow: var(--ring-border-1); padding: 0; position: relative; }
/* The dot stays 36px because that is the design; the target underneath it is
   44px. Stated as a size rather than a negative inset: inset resolves against
   the padding box, so the 2px border ate into it and the measured target came
   out 40px. Centring a fixed 44px circle is immune to the box model. Dot
   centres sit 48px apart (36 + the row's 12px gap), so the circles clear each
   other and cannot steal each other's taps. */
.swatch::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%;
}
.swatch.selected { border: 3px solid var(--rust); }

/* ---------- Trust strip (was marquee) ---------- */
.trust-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); background: #17201B; color: #EDEAE1; }
.trust-strip .trust-item { padding: 26px 28px; border-right: 1px solid rgba(255,255,255,.09); display: flex; gap: 14px; align-items: center; }
.trust-strip .trust-item:last-child { border-right: none; }
.trust-strip .trust-title { font-weight: 600; font-size: 15px; }
.trust-strip .trust-sub { font-size: 13px; color: #A7ABA0; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee { background: var(--green); overflow: hidden; padding: 16px 0; }
.marquee .track { display: flex; width: max-content; animation: marquee 22s linear infinite; }
.marquee .grp { display: flex; gap: 48px; padding-right: 48px; align-items: center; }
.marquee .grp span { font-size: 14px; font-weight: 600; color: var(--bg); white-space: nowrap; }
.marquee .grp .star { color: var(--rust); }

/* ---------- Admin ---------- */



/* Phase 1: the sidebar is the same light tone as the content, split off only by
   a hairline on its right edge — the old near-black chrome is gone. */











/* Collapsible nav groups: each section = a toggle header (.admin-nav-group,
   now a <button>) + its items (.admin-nav-items). Collapsing hides the items
   and rotates the caret; the header keeps the original small-caps label look. */




















/* The 2026 comp's palette, scoped to the admin so the storefront keeps the
   darker, AA-safe tones it ships with today. Measured on the admin surfaces:
   accent 4.42:1 on #F4F3EF and 4.91:1 on a card; body muted 4.37 / 4.85;
   the eyebrow tone is 3.31 / 3.68 and is therefore only used on the mono
   labels the comp reserves it for, never on body copy. */

/* The admin's lighter accent is only 4.07:1 on the danger tint, so error chips
   there take a dedicated darker error tone (6.4:1) instead of the brand accent.
   The storefront keeps its #993F1F chip, which already passes. */


/* Mono eyebrow labels — the one role the comp gives #8A8578. */


/* The comp reads items and money first, then who and what happens next. The
   template emits the customer block first, so the order is set here rather
   than by rewriting the template. */



/* Status filter chips — the comp's row of pills above a list. */






/* Order timeline marker */




/* ---------- Notifications (გაგზავნის ცენტრი) ---------- */






















/* An order with no address is a state worth reading as such, not a dash. */











/* ---------- Admin dashboard ---------- */



























































.chip { padding: 4px 10px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; white-space: nowrap; }
.chip--ok { background: var(--success-bg); color: var(--success); }
.chip--wait { background: var(--warning-bg); color: var(--warning); }
.chip--bad { background: var(--danger-bg); color: var(--danger); }
.chip--neutral { background: var(--input-bg); color: var(--info); }
/* Redesign Phase 2: admin status badges become one four-tone system — a coloured
   dot + the word on a quiet surface-sunken pill (per the design system), so the
   tone reads even for a colour-blind viewer and never relies on fill alone. */






.payment-state--paid { color: var(--green); background: var(--success-bg); }
.payment-state--pending { color: var(--rust); background: var(--input-bg); }
.order-milestone { position: relative; margin-left: -22px; padding: 10px 0 10px 42px; border-left: 2px solid transparent; }
.order-milestone--linked { border-left-color: var(--border); }

.publish-state { color: var(--green); }
.publish-state--published { background: var(--success-bg); }
.publish-state--draft { background: var(--bg-admin); }
















.conversation-message { max-width: 82%; padding: 14px 16px; border-radius: var(--r-card); background: var(--bg-admin); }
.conversation-message--admin { margin-left: auto; background: #E4EEE8; }





















@keyframes admin-skeleton-sweep { to { transform: translateX(100%); } }




















































.stat-card { background: #fff; border-radius: var(--admin-radius-card, 16px); border: 1px solid var(--hairline, var(--border)); padding: var(--admin-space-6, 24px); box-shadow: none; }
.stat-card .lbl { font-size: 13px; color: var(--faint); margin-bottom: 10px; }
.stat-card .val { font-family: var(--serif); font-weight: 600; font-size: 28px; color: var(--green); }


/* These sit after .status-select on purpose. .payment-state--paid and --pending
   were declared 100 lines earlier at the same specificity, so the base rule won
   and every badge rendered in the same neutral grey. */










#login-error { color: #9A3F25 !important; }












.order-card-actions { display: grid; grid-template-columns: repeat(3, minmax(145px, 1fr)); gap: 10px; align-items: stretch; }
.order-card-actions > * { width: 100%; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; }


/* რაოდენობა was 110px around a 130px stepper (44+40+44 plus its border), and
   the stepper clips: the + button lost 19px to overflow: hidden. მოქმედება was
   125px around a button whose content measures 132px, so the chevron sat 8px
   outside its own border. Both columns now fit what they hold. */
/* Without this the table sizes to its content: on an empty list that is one
   colspan cell, so the header row crushed into the left third of a full-width
   card. */

/* Base cell styling (build 316): without it .admin-table fell back to raw
   browser defaults — bold CENTRED headers, left-aligned data, no padding and no
   borders — so headers floated away from their columns (worst on a wide email
   column with one row) and the table read as "misaligned". Left-align both,
   add padding + hairline separators so every column header sits over its data. */





/* Overflow hardening (build 307): the @media breakpoints already handle column
   counts, but a long UNBROKEN string — a customer email, order id, slug or URL —
   can still spill its cell or flex item at any viewport, in any language. Let
   such text wrap and let grid/flex children actually shrink (default min-width
   is auto, which refuses to), so nothing escapes its frame. Safe: overflow-wrap
   only breaks strings that have no natural break and would otherwise overflow. */
.admin-main, #tab-content { min-width: 0; }

.ntf-row, .slog-row, .admin-product-row, .acc-addr-item, .acc-addr-body { min-width: 0; }
.ntf-row > *, .slog-row > *, .acc-addr-body, .acc-addr-meta, .returns-order-card { overflow-wrap: anywhere; }

/* The filter fields are labels carrying margin-bottom: 8px; the submit button
   has none, so align-items:end lined up margin boxes and left the button 8px
   below the inputs it sits beside. Inside this grid the gap already spaces the
   row. */




/* The header centres everything past the first two columns; the rows did not,
   which is why the controls read as sitting off inside their frames. */















































/* ---------- Security log ---------- */




























/* Severity reads from the icon shape and the text label too, never colour alone. */

























.security-filter-grid { display: grid; grid-template-columns: minmax(180px, 2fr) repeat(4, minmax(120px, 1fr)) auto; gap: 10px; align-items: end; padding: 18px; margin-bottom: 18px; }
.security-filter-grid[hidden] { display: none; }

@media (max-width: 768px) {
  
  
  
  
  /* The timestamp moves under the title instead of forcing a fourth column. */
  
  
  
  .security-filter-grid { grid-template-columns: 1fr; }
}






@media (max-width: 1024px) {
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .two-col { grid-template-columns: 1fr !important; }
  
  
  .order-card-actions { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .security-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  
  
  
  
  
  
  
  
  
  
}



@media (max-width: 640px) {
  
  
  
  
  
  .stat-grid { grid-template-columns: 1fr !important; }
  
  .order-card-actions { grid-template-columns: 1fr; }
  .security-filter-grid { grid-template-columns: 1fr; }
  
  
  
  
}



/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card { background: #fff; border-radius: 18px; padding: 40px; box-shadow: var(--shadow-3-login); width: 100%; max-width: 380px; }

/* Build 11 payment status and local BOG sandbox. Existing storefront styles
   remain untouched; these selectors are used only by the two new pages. */
.payment-result-page { min-height: 68dvh; display: grid; place-items: center; padding: 50px 20px 90px; }
.payment-result-card { width: min(100%, 760px); margin: 0; padding: clamp(28px, 6vw, 54px); border-radius: 18px; background: #fff; box-shadow: var(--shadow-3-result); text-align: center; }
.payment-result-card h1, .sandbox-card h1 { font-family: var(--serif); color: var(--green); }
.payment-result-card > p, .sandbox-card > p { color: var(--muted); line-height: 1.7; }
.status-orb { width: 58px; height: 58px; margin: 0 auto 24px; border-radius: 50%; background: var(--bg-alt); box-shadow: var(--ring-orb); }
.status-orb.processing { animation: status-pulse 1.4s ease-in-out infinite; background: var(--gold); }
.status-orb.paid { background: var(--sage); }
.status-orb.failed, .status-orb.cancelled, .status-orb.expired { background: var(--rust); }
.status-orb.refunded { background: var(--green); }
/* build405: no settled answer yet — deliberately neither the success nor the
   failure colour, because claiming either would be wrong. */
.status-orb.unknown { background: var(--bg-alt); box-shadow: var(--ring-orb-unknown); }
@keyframes status-pulse { 50% { transform: scale(.9); opacity: .55; } }
.order-reference { color: var(--green) !important; font-weight: 700; }
.result-actions { display: flex; justify-content: center; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
/* CONSENT_BANNER_BUTTON_CONTRAST_FIX flagged the same root cause here: .btn-ghost has no storefront
   rule at all (only body.admin .btn-ghost in admin.css), so the "დახმარება" link fell back to the
   browser's unstyled default on this white card - scoped the same way, not touching global .btn-ghost. */
.result-actions .btn-ghost { background: transparent; border: none; color: var(--muted); }
.result-actions .btn-ghost:hover { color: var(--green); }
.form-error { margin-top: 16px; padding: 13px 15px; border-radius: var(--r-ctrl); background: #F9DED6; color: #8A2E18; font-size: 13px; line-height: 1.5; }
.sandbox-body { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: #E6EBE4; }
.sandbox-card { width: min(100%, 620px); margin: 0; padding: clamp(28px, 6vw, 52px); border-radius: 22px; background: #fff; box-shadow: var(--shadow-3-sandbox); }
.sandbox-order { margin: 28px 0; border-top: 1px solid var(--border); }
.sandbox-order > div { display: flex; justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.sandbox-order dt { color: var(--muted); }
.sandbox-order dd { margin: 0; color: var(--green); font-weight: 700; }
.sandbox-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 768px) { .sandbox-actions, .sandbox-actions .btn { width: 100%; } }

/* ---------- Wishlist heart ---------- */
.wish-btn {
  width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid var(--border);
  color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer;
  flex-shrink: 0; transition: transform var(--dur-base), color var(--dur-base);
}
@media (hover: hover) and (pointer: fine) { .wish-btn:hover { transform: translateY(-2px); } }
.wish-btn.on { color: var(--rust); }
.wish-btn.on .i { fill: var(--rust); }
.card-wish { position: absolute; top: 14px; right: 14px; z-index: var(--z-raised); }

/* ---------- Account auth tabs ---------- */
.commerce-state-page { min-height: 100dvh; display: flex; flex-direction: column; }
.commerce-state-page > .site-header, .commerce-state-page > footer { flex-shrink: 0; }
.commerce-state-main { width: 100%; flex: 1 0 auto; }
.commerce-state-page > footer { margin-top: auto; }
.commerce-loading-state, .commerce-error-state { width: min(100% - 48px, 680px); min-height: 300px; margin: 24px auto 72px; padding: 48px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 20px; background: rgba(255,255,255,.52); text-align: center; }
.commerce-loading-state strong { color: var(--green); font-family: var(--serif); font-size: 21px; }
.commerce-loading-state span { margin-top: 8px; color: var(--muted); font-size: 13px; }
.commerce-error-state h1, .commerce-error-state h2 { margin: 0 0 10px; color: var(--green); font-family: var(--serif); font-size: 24px; }
.commerce-error-state p { margin: 0 0 24px; color: var(--muted); }
.commerce-error-state > div { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.commerce-error-state .btn { text-decoration: none; }
.commerce-error-state .nf-art { width: min(220px, 60%); height: auto; margin: 0 0 22px; }
.commerce-error-state .nf-timer { margin: -6px 0 22px; font-size: 14px; color: var(--faint); }
.commerce-error-state .nf-timer span { font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; }
/* Idle auto-logout warning modal (admin + storefront; JS-injected) */
.idle-overlay { position: fixed; inset: 0; z-index: var(--z-modal); display: none; place-items: center; padding: 20px; background: rgba(23,32,27,.42); }
.idle-overlay.is-open { display: grid; }
.idle-modal { width: min(100%, 420px); background: var(--surface-card, #fff); border: 1px solid var(--border, #d8d3c8); border-radius: 20px; padding: 34px 30px 26px; text-align: center; box-shadow: var(--shadow-3-modal); }
.idle-ring { width: 88px; height: 88px; margin: 0 auto 18px; position: relative; }
.idle-ring svg { transform: rotate(-90deg); }
.idle-ring-bg { fill: none; stroke: var(--surface-sunken, #e7e3db); stroke-width: 7; }
.idle-ring-arc { fill: none; stroke: var(--idle-ring); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset var(--dur-slow) var(--ease-linear); }
.idle-num { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-size: 32px; font-weight: 700; color: var(--idle-accent); font-variant-numeric: tabular-nums; }
.idle-title { margin: 0 0 8px; font-family: var(--serif); font-size: 22px; color: var(--idle-accent); }
.idle-text { margin: 0 0 22px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.idle-actions { display: flex; flex-direction: column; gap: 10px; }
@media (prefers-reduced-motion: reduce) { .idle-ring-arc { transition: none; } }
.account-page { min-height: 100dvh; display: flex; flex-direction: column; }
.account-page > #main { flex: 1 0 auto; width: 100%; }
.account-page #account-root { flex: 1 0 auto; width: 100%; }
.account-page > footer { margin-top: auto; flex-shrink: 0; }
.auth-shell { width: 100%; max-width: 460px; margin: 0 auto; padding: clamp(20px, 3vh, 36px) clamp(24px, 4vw, 56px); }
.account-page .auth-tabs { margin-bottom: 20px; }
.auth-card { display: flex; flex-direction: column; gap: 14px; }
.auth-field { display: flex; flex-direction: column; gap: 7px; color: var(--body-2); font-size: 13px; font-weight: 600; }
.auth-help { margin: -2px 2px 0; color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.5; }
.auth-secondary {
  align-self: center; padding: 2px 4px; border: 0; background: transparent; color: var(--green);
  font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .auth-secondary:hover { color: var(--rust-hover); } }
.auth-feedback { padding: 12px 16px; border-radius: 12px; font-size: 13px; font-weight: 500; line-height: 1.5; }
.auth-feedback.error { background: var(--danger-bg); color: var(--rust); }
.auth-feedback.success { background: var(--success-bg); color: var(--green); }
.auth-tabs { display: flex; background: var(--bg-alt); border-radius: 12px; padding: 5px; margin-bottom: 26px; }
.auth-tabs button {
  flex: 1; padding: 11px; border: none; border-radius: var(--r-ctrl); font-size: 14px; font-weight: 600;
  cursor: pointer; background: transparent; color: var(--green);
}
/* docs/tasks/ACCOUNT_HUB_VISUAL_GAP_REVIEW2.md item 3: the account page's 5-tab strip (.csp-i-30e9014e59fa, the
   only .auth-tabs user with more than 2 tabs) doesn't fit at mobile widths - flex:1 above squeezes every button
   instead, wrapping one label to 2 lines and clipping the last tab entirely outside its container with no way to
   reach it (overflow-x was the default "visible", not scrollable). Scoped to this one tab strip so the 2-tab
   auth login/register view above is untouched. */
/* docs/tasks/ACCOUNT_HEADER_REGRESSION_URGENT.md: .csp-i-30e9014e59fa's own base rule
   (csp-migrated.css) caps max-width:560px - written for the 2-tab login/register view, never raised
   for this 5-tab strip. Every earlier overflow fix here was checked only on mobile, where the
   viewport itself is already under 560px, so the cap was never the visible problem; on desktop
   (~610px needed for 5 tabs) it silently clips the last tab even with overflow-x:auto providing a
   scrollbar for it. */
.csp-i-30e9014e59fa.auth-tabs { max-width: none; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-right: 14px; }
.csp-i-30e9014e59fa.auth-tabs button { flex: 0 0 auto; white-space: nowrap; }
.auth-tabs button.active { background: var(--green); color: var(--bg); }
.avatar { width: 60px; height: 60px; border-radius: 50%; background: var(--green); color: var(--bg);
  display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 600; font-size: 24px; flex-shrink: 0; }
@media (max-width: 640px) {
  .auth-shell { padding-top: 32px; padding-bottom: 48px; }
  .footer-small { align-items: flex-start; }
  /* Owner's 3rd mockup review: the order card's action row (.csp-i-e9f62da3ca63 - pay/warranty/
     cancel/reorder buttons + total) only ever had 0-order test accounts until now, so it never
     visibly overflowed. Stack it on mobile instead of relying on flex-wrap alone. */
  .csp-i-e9f62da3ca63 { flex-direction: column; align-items: stretch; width: 100%; }
  /* Owner's 4th mockup review: put the total price (.csp-i-22f9e38b3db2, unique to this row)
     above the stacked buttons instead of trailing them in DOM order. */
  .csp-i-22f9e38b3db2 { order: -1; margin-bottom: 6px; }
  /* Owner's 5th mockup review: full-width stacked buttons need display:inline-flex to actually
     center their label with justify-content - .btn is display:inline-block, where justify-content
     is a no-op; text-align:center (already on .btn) only covers single-line text, not an icon+text
     pair. Same display:inline-flex pattern as .catalog-filter-sheet-actions .btn elsewhere in this
     file. min-height:44px here is already inherited from the base .btn rule - restated for an
     explicit touch-target floor scoped to this mobile context. */
  .csp-i-e9f62da3ca63 .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
  /* Owner's 6th mockup review: "რედაქტ." became the longer "რედაქტირება" in this same build, so the
     3-button address-card row (default/edit/delete, .acc-addr-item-actions) needs its own mobile
     wrap-fallback shipped together, instead of wrapping left-aligned under the address text. */
  .acc-addr-item-actions { width: 100%; justify-content: flex-end; }
  /* Owner's 4th mockup review: the 3 order-filter pills (All/Delivered/Cancelled) wrap unevenly
     (2+1) at mobile widths because "გაუქმებული" is the longest label - same "never seen with real
     data" blind spot as the action-row overflow above. Equal 3-column grid instead. */
  .acc-order-filter { display: grid; grid-template-columns: repeat(3, 1fr); }
  /* Owner's 7th mockup review: the wishlist/catalog/recently-viewed button row
     (.csp-i-f6c350465c37) looks asymmetric on mobile - "სურვილების სია" and "კატალოგი →"
     are content-sized (flex:0 1 auto, the .btn default) so they end up visibly different
     widths. Force an even 2-up grid via flex-basis; display:inline-flex is needed for
     justify-content to center the label on .csp-i-acbe516e8006 (catalog/recently-viewed),
     which - unlike the wishlist button's own .csp-i-cd4e661f3219 - isn't already a flex
     container. */
  .csp-i-f6c350465c37 .btn { flex: 1 1 calc(50% - 6px); display: inline-flex; align-items: center; justify-content: center; }
  /* docs/tasks/ACCOUNT_HUB_VISUAL_GAP_REVIEW9.md: .acc-header-right only ever holds #logout
     (account.js:434-436). The parent row is flex-wrap:wrap + justify-content:space-between, so when
     the name/status block (.csp-i-642aafc25f9e) takes the full row width on a narrow phone,
     .acc-header-right wraps onto its own line and sits left-aligned (its own display:flex has no
     justify-content of its own) instead of lining up with the row's intended space-between edges. */
  .acc-header-right { width: 100%; justify-content: flex-end; }
}

/* ---------- Misc layout helpers ---------- */
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.grid-fill { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 24px; }
@media (max-width: 1024px) {
  .grid-cards,
  .grid-fill { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 640px) {
  .grid-cards,
  .grid-fill { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  :is(.grid-cards, .grid-fill) .product-card .body { padding: 14px 12px; }
  :is(.grid-cards, .grid-fill) .product-card .price { font-size: 17px; }
}
.catalog-empty-state {
  grid-column: 1 / -1; min-height: clamp(300px, 46vh, 440px); padding: clamp(30px, 6vw, 64px);
  display: grid; grid-template-columns: minmax(96px, 150px) minmax(0, 520px); align-items: center;
  justify-content: center; gap: clamp(24px, 5vw, 56px); border: 1px solid var(--border); border-radius: 20px;
  background: rgba(255,255,255,.58);
}
.catalog-empty-state img { width: 100%; height: auto; border-radius: 18px; }
.catalog-empty-state h2 { margin: 0 0 10px; color: var(--green); font-family: var(--serif); font-size: var(--fs-h2); line-height: 1.25; }
.catalog-empty-state p { max-width: 48ch; margin: 0 0 24px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.catalog-empty-state-filtered { min-height: 300px; }
.catalog-empty-state-error { grid-template-columns: minmax(0, 520px); text-align: center; }
.empty-suggest-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.empty-suggest {
  font-size: 13px; font-weight: 600; color: var(--green); background: var(--input-bg);
  border: 1px solid var(--border); border-radius: var(--r-pill); padding: 8px 16px; cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .empty-suggest:hover { border-color: var(--green); background: #fff; } }
.empty-suggest:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }
@media (max-width: 1024px) {
  .split-2 { grid-template-columns: 1fr !important; }
  .sticky-side { position: static !important; }
  #hero { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  .catalog-empty-state { min-height: 340px; grid-template-columns: 1fr; gap: 18px; text-align: center; }
  .catalog-empty-state img { width: 104px; margin: 0 auto; }
  .catalog-empty-state p { margin-left: auto; margin-right: auto; }
}

/* === Utility & Layout Classes ===
   Extracted from repeated inline style attributes across PHP templates.
   Values mirror the original inline declarations exactly to preserve visuals.
   Color/font values use the design tokens defined in :root above. */

:root {
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 40px;

  /* The three radii that already repeat, named by the shape they make.
     10px is what every control wears — buttons, inputs, steppers, tabs.
     14px is the card surface: KPI tiles, list panels, message bubbles.
     999px is fully rounded: chips, pills, avatars, progress tracks.
     Deliberately not folded in: 50% (a circle is not a pill), 100px (a
     different value, and changing it would move pixels), and the one-off
     radii that belong to a single element. A token is for a repeated
     decision, not for every number that happens to look similar. */
  --r-ctrl: 10px;
  --r-card: 14px;
  --r-pill: 999px;
  --border-soft: #DDD8CC;
  --hairline: #D8D3C7;
}

/* Display */
.hidden { display: none !important; }
.block { display: block; }
.inline-block { display: inline-block; }

/* Flex */
.flex-row { display: flex; align-items: center; }
.flex-col { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-10 { gap: 10px; }
.gap-md { gap: var(--space-md); }
.gap-14 { gap: 14px; }
.gap-18 { gap: 18px; }
.gap-lg { gap: var(--space-lg); }
.gap-28 { gap: 28px; }

/* Atomic flex helpers (composable; declared after .flex-* so they can refine alignment) */
.flex { display: flex; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }

/* Grid */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }

/* Width */
.w-full { width: 100%; }
.w-half { width: 50%; }
.max-w-sm { max-width: 380px; }
.max-w-md { max-width: 620px; }
.max-w-lg { max-width: 760px; }

/* Text */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-sm { font-size: 13px; }
.text-md { font-size: 14px; }
.text-lg { font-size: 16px; }

/* Backgrounds */
.bg-base { background: var(--bg); }
.bg-alt { background: var(--bg-alt); }
.bg-admin { background: var(--bg-admin); }
.bg-white { background: #fff; }
.bg-green { background: var(--green); }

/* Section padding helpers */
.section-pad-y { padding-top: clamp(48px,6vw,88px); padding-bottom: clamp(48px,6vw,88px); }
.section-pad-b { padding-bottom: clamp(48px,6vw,88px); }
.section-pad-b-sm { padding-bottom: clamp(40px,6vw,80px); }

.mb-0 { margin-bottom: 0; }
.mb-14 { margin-bottom: 14px; }
.mb-20 { margin-bottom: 20px; }
.mb-22 { margin-bottom: 22px; }
.mt-18 { margin-top: 18px; }

/* Layout containers / columns */
.inner-1440 { max-width: 1440px; margin: 0 auto; }
.sticky-side { position: sticky; top: 96px; min-width: 0; }
.split-2 { display: grid; align-items: start; }
.pt-24 { padding-top: 24px; }
.pt-28 { padding-top: 28px; }
.pt-32 { padding-top: 32px; }
.cart-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cart-split { padding-top: 32px; padding-bottom: 96px; grid-template-columns: minmax(0,1.6fr) minmax(300px,1fr); gap: clamp(24px,4vw,48px); }
.checkout-split { padding-top: 28px; padding-bottom: 96px; grid-template-columns: minmax(0,1.5fr) minmax(300px,1fr); gap: clamp(24px,4vw,48px); }
.product-split { padding-top: 28px; padding-bottom: 48px; grid-template-columns: repeat(auto-fit, minmax(340px,1fr)); gap: clamp(32px,5vw,64px); }
.checkout-stack { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.opts-stack { display: flex; flex-direction: column; gap: 12px; }

/* Section header (title + optional link) */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 26px; flex-wrap: wrap; gap: 12px; }
.section-head--tight { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 26px; }
.section-head--lg { margin-bottom: 30px; }
.link-arrow { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--green); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .link-arrow:hover { color: var(--rust-hover); } }

/* Page / card titles */
.page-title { font-family: var(--serif); font-weight: 600; font-size: var(--fs-h1); color: var(--green); margin: 0; }
.card-title { font-family: var(--serif); font-weight: 600; font-size: var(--fs-h3); color: var(--green); margin: 0; }
.card-title--mb { margin-bottom: 20px; }
.card-title--mb-lg { margin-bottom: 26px; }
.card-title-lg { font-family: var(--serif); font-weight: 600; font-size: var(--fs-h3); color: var(--green); margin: 0 0 26px; }
.card-title-fluid { font-family: var(--serif); font-weight: 600; font-size: var(--fs-h2); color: var(--green); margin: 0; }
.card-title-fluid--mb { margin: 0 0 22px; }
.eyebrow-mb { margin-bottom: 8px; }
.eyebrow-mb-lg { margin-bottom: 16px; }
.section-h2 { font-family: var(--serif); font-weight: 600; font-size: var(--fs-h2); color: var(--green); margin: 0 0 20px; }
.lead-text { font-size: 16px; color: var(--body-2); margin: 0; max-width: 620px; line-height: 1.75; }

/* Color picker (home) */
.color-picker-section { padding: 48px clamp(24px,4vw,56px); background: var(--sage-bg); }
.color-grid { display: flex; gap: 18px; flex-wrap: wrap; }
.color-swatch-link { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; width: 72px; }
/* 44px: this teaser leads into the catalog's own colour filter (28px), so it
   stays close to that scale rather than the 66px it used to be, which read
   larger than the nav and out of proportion for a 14-item quick-filter row. */
.color-swatch-dot { width: 44px; height: 44px; border-radius: var(--r-pill); border: 1px solid rgba(20,25,20,.08); box-shadow: var(--shadow-1-dot); }
.color-swatch-label { font-size: 13px; color: var(--body-3); margin-top: 8px; font-weight: 500; }

/* Review card (home) */
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,280px),1fr)); gap: var(--space-lg); }
.review-card { padding: 24px; }
.review-stars { color: var(--rust); font-size: 14px; letter-spacing: 1px; }
.review-text { font-size: 15px; line-height: 1.6; color: var(--body-3); margin: 14px 0 20px; }
.review-author { display: flex; gap: 10px; align-items: center; }
.review-avatar { width: 36px; height: 36px; border-radius: var(--r-pill); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.review-name { font-weight: 600; font-size: 14px; }
.review-verified { font-size: 12px; color: var(--sage); display: flex; align-items: center; gap: 4px; }
.reviews-score { font-family: var(--serif); font-weight: 700; font-size: 32px; }
.reviews-score .of { font-size: 18px; color: var(--muted); }

/* Summer sale banner (home) */
.sale-section { padding: 40px clamp(24px,4vw,56px); background: var(--input-bg); }
.sale-banner { max-width: 1440px; margin: 0 auto; border-radius: 22px; overflow: hidden; background: var(--ink); color: #fff; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,340px),1fr)); }
.sale-text-col { padding: clamp(36px,5vw,56px) clamp(28px,4vw,48px); display: flex; flex-direction: column; justify-content: center; }
.sale-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #C58A6A; margin-bottom: 16px; }
.sale-heading { font-family: var(--serif); font-weight: 600; font-size: var(--fs-display); line-height: 1.05; margin: 0 0 16px; letter-spacing: -.02em; color: #fff; }
.sale-body { font-size: 17px; line-height: 1.6; color: #C4CBC1; max-width: 40ch; margin: 0 0 30px; }
.sale-ends { font-family: var(--mono); font-size: 13px; color: #8FA896; }
.sale-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.sale-image-col { position: relative; background: #20362A; min-height: 340px; }
.sale-image-col img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.btn-sale { font-size: 16px; padding: 16px 28px; }

/* Cart / checkout steps */
.cart-steps { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cart-step { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--green); }
.cart-step--future { color: var(--faint); }
.cart-step .num { width: 24px; height: 24px; border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.cart-step .num--current { background: var(--green); color: #fff; }
.cart-step .num--future { background: var(--border); color: var(--muted); }
.cart-step-sep { flex: 0 0 40px; height: 1px; background: var(--hairline); }
.cart-step-sep--done { background: var(--green); }

/* Cart summary rows */
.sum-row { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--body-2); }
.sum-row--mb-sm { margin-bottom: 10px; }
.sum-row--mb-md { margin-bottom: 18px; }
.sum-row--savings { color: var(--sage); font-weight: 600; }
.muted-right { color: var(--faint); text-align: right; }
.sum-total { border-top: 1px solid var(--border); padding-top: 16px; display: flex; justify-content: space-between; font-family: var(--serif); font-weight: 600; font-size: 19px; color: var(--green); margin-bottom: 22px; }
.secure-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: 12px; color: var(--faint); }
.checkout-consent { margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--muted); text-align: center; }
.checkout-consent a { color: var(--muted); text-decoration: underline; }
.note-box-flex { border-radius: 18px; padding: 18px 22px; margin-top: 16px; display: flex; gap: 12px; align-items: flex-start; }
.note-icon { font-size: 16px; }
.cart-continue-link { font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; margin-top: 4px; }
.btn-block-pad { display: block; padding: 16px; }

/* Checkout section number + titles */
.checkout-num { width: 30px; height: 30px; border-radius: 50%; background: var(--bg-admin); color: var(--green); font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.checkout-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.coupon-row { display: flex; gap: 10px; }
.coupon-row > .input { flex: 1; min-width: 0; }
.coupon-input { flex: 1; padding: 12px 15px; text-transform: uppercase; }
.btn-coupon { background: var(--green); color: var(--input-bg); padding: 12px 20px; white-space: nowrap; }
.coupon-msg { font-size: 13px; margin-top: 10px; }
/* Build 227 checkout account gate: sign-in / register switch. The tab buttons
   reuse .btn-outline, so only the layout and the selected state live here. */
.gate-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 44px; margin-bottom: 14px; }
.gate-google-ico { flex: 0 0 18px; }
/* Rule with the word sitting on it, so "or" reads as a divider not a heading. */
.gate-or { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; color: var(--body-2); font-size: 13px; }
.gate-or::before, .gate-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.gate-tabs { display: flex; gap: 10px; margin-bottom: 18px; }
.gate-tab { flex: 1; min-height: 44px; }
.gate-tab[aria-selected="true"] { background: var(--green); color: var(--bg); border-color: var(--green); }
.gate-help { margin-top: 14px; font-size: 13px; color: var(--body-2); }

.coupon-block { border-top: 1px solid var(--border); padding-top: 16px; margin-bottom: 16px; }
.checkout-totals { border-top: 1px solid var(--border); padding-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.checkout-totals-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--body-2); }
.checkout-totals-row--savings { color: var(--sage); font-weight: 600; }
.checkout-total-row { display: flex; justify-content: space-between; font-family: var(--serif); font-weight: 600; font-size: 19px; color: var(--green); padding-top: 10px; border-top: 1px solid var(--border); }
.form-error-box { background: var(--danger-bg); color: var(--danger); border-radius: var(--r-ctrl); padding: 14px 18px; font-size: 14px; margin-top: 16px; }
.form-error-box-sm { background: var(--danger-bg); color: var(--danger); border-radius: var(--r-ctrl); padding: 12px 16px; font-size: 13px; }
.btn-place { width: 100%; margin-top: 22px; padding: 17px; }
.field-hint { font-size: 13px; color: var(--faint); margin-top: 12px; }
.otp-code { max-width: 160px; }
.otp-feedback.is-ok { color: var(--success); }
.otp-feedback.is-err { color: var(--danger); }
.addr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 14px; }
.input-mb { margin-bottom: 14px; }

/* Empty / status states */
.empty-state { margin: 0 auto; text-align: center; padding: 96px clamp(24px,4vw,56px); max-width: 600px; }
.empty-state--lg { padding: 100px clamp(24px,4vw,56px); max-width: 620px; }
.empty-state--560 { padding: 100px clamp(24px,4vw,56px); max-width: 560px; }
.empty-state--sm { padding: 56px 0; max-width: 520px; }
.empty-icon-circle { width: 80px; height: 80px; border-radius: 50%; background: var(--bg-alt); display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; color: var(--green); }
.empty-icon-circle--rust { color: var(--rust); }
.empty-icon-circle--success { width: 72px; height: 72px; background: var(--success-bg); color: var(--green); }
.empty-title { font-family: var(--serif); font-weight: 600; font-size: 26px; color: var(--green); margin: 0 0 12px; }
.empty-title--sm { font-size: 24px; }
.empty-title--lg { font-size: 30px; margin: 0 0 8px; }
.empty-text { font-size: 15px; color: var(--muted); margin: 0 0 28px; }
.order-ref { font-size: 15px; font-weight: 600; color: var(--rust); margin-bottom: 14px; }
.success-text { font-size: 16px; color: var(--body-2); line-height: 1.6; margin: 0 0 32px; }
.success-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn-cta { font-size: 15px; padding: 15px 36px; }
.btn-cta-md { font-size: 15px; padding: 14px 32px; }
.btn-cta-sm { font-size: 15px; padding: 15px 28px; }

/* Contact */
.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: clamp(32px,5vw,64px); align-items: center; scroll-margin-top: 140px; }
.image-frame { height: clamp(280px,32vw,380px); border-radius: 18px; overflow: hidden; }
.image-frame--alt { background: var(--bg-alt); }
.image-frame--base { background: var(--bg); }
.cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-title { font-family: var(--serif); font-weight: 600; font-size: var(--fs-h2); color: var(--green); margin: 0 0 20px; text-wrap: balance; }
.about-text { font-size: 16px; line-height: 1.75; color: var(--body-2); margin: 0 0 16px; }
.social-row { display: flex; gap: 16px; flex-wrap: wrap; }
.btn-social { font-size: 14px; padding: 11px 22px; }
.contact-card-pad { padding: clamp(24px,3.5vw,40px); }
/* CONTACT_PAGE_BENTO_FORM_REDESIGN -- replaces the old 2-card .contact-grid/.contact-list/.contact-row (build673
   and earlier): 4 separate bento cards, one channel each, instead of one card listing every channel as a row. */
.contact-bento { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 16px; }
.contact-bento-item { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.contact-bento-item .icon-bubble { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-admin); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--green); }
/* CONTACT_PAGE_HEADER_REMOVE_AND_BENTO_SHRINK -- a tighter padding for the bento row specifically. The shared
   .contact-card-pad (also used by .contact-form-tabs's card) is untouched, so the form card keeps its size. */
.contact-bento .contact-card-pad { padding: clamp(16px,2vw,24px); }
.contact-bento-label { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em; }
.contact-bento-row { display: flex; align-items: center; gap: 8px; }
.contact-bento-value { font-size: 16px; color: var(--body-3); text-decoration: none; font-weight: 600; }
a.contact-bento-value:hover { color: var(--green); }
.contact-bento-hours { font-size: 13px; color: var(--muted); }
.btn-copy { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--body-3); cursor: pointer; flex-shrink: 0; }
.btn-copy:hover { border-color: var(--green); color: var(--green); }
.btn-copy.is-copied { border-color: var(--green); color: var(--green); }
.tab-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }

/* CONTACT_PAGE_VISUAL_PARITY_PASS -- owner: "1=1" the redesign zip's own colors/font, this page only. Every
   selector below is scoped under #contact-page; --green/--bg/--sans and every class used by OTHER pages
   (.card/.btn-primary/.form-field/.input are all shared site-wide) are deliberately never touched. */
#contact-page {
  /* Later owner correction: background reverted to the site's own --bg value (#E9E6DE) so this section
     matches the page-head above it seamlessly -- everything else here (accent, icon tints, font) stays the
     zip's own exact values, per the owner's explicit "only the background" follow-up. */
  --contact-bg: #E9E6DE;
  --contact-accent: #1B3629;
  --contact-accent-hover: #142A20;
  --contact-ink: #131916;
  background: var(--contact-bg);
  color: var(--contact-ink);
  /* 'Plus Jakarta Sans' is intentionally dropped from the zip's own stack: it is not already loaded on this
     site and adding a new web font for one section would be a new, un-budgeted network request. 'Noto Sans
     Georgian' -- the zip stack's own first choice -- is already self-hosted site-wide (includes/head.php's
     preloads), so it carries over with zero new loading cost; everything after it falls through to system
     sans, same visual weight. */
  font-family: 'Noto Sans Georgian', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
#contact-page .card { box-shadow: 0 1px 2px rgba(0,0,0,.05); }
#contact-page .contact-bento-label, #contact-page .contact-bento-value, #contact-page .contact-bento-hours, #contact-page .form-label, #contact-page .checkout-consent { color: var(--contact-ink); }
#contact-page a.contact-bento-value:hover { color: var(--contact-accent); }
#contact-page .contact-bento-item--phone .icon-bubble, #contact-page .contact-bento-item--pickup .icon-bubble { background: #ecfdf5; color: #065f46; }
#contact-page .contact-bento-item--email .icon-bubble { background: #fffbeb; color: #92400e; }
#contact-page .btn-copy:hover, #contact-page .btn-copy.is-copied { border-color: var(--contact-accent); color: var(--contact-accent); }
/* CONTACT_PAGE_SOCIAL_LINKS_IN_PHONE_CARD -- FB/Instagram/TikTok row inside the phone card. Same visual recipe
   as .btn-copy (circle, border, transparent bg) but 36px per the task's own spec, not 28px. */
#contact-page .contact-social-row { gap: 10px; margin-top: 2px; }
#contact-page .contact-social-link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); color: var(--body-3); }
#contact-page .contact-social-link:hover { border-color: var(--contact-accent); color: var(--contact-accent); }
#contact-page .tab-list .btn-primary, #contact-page .btn-send.btn-primary { background: var(--contact-accent); color: #fff; }
#contact-page .tab-list .btn-primary:hover, #contact-page .btn-send.btn-primary:hover { background: var(--contact-accent-hover); }
#contact-page .tab-list .btn-outline { color: var(--contact-accent); }
#contact-page .tab-list .btn-outline:hover { border-color: var(--contact-accent); color: var(--contact-accent); }
#contact-page .input:focus { outline-color: var(--contact-accent); }
.msg-form { display: flex; flex-direction: column; gap: 14px; }
.btn-send { font-size: 15px; padding: 15px; }
.success-box-pad { padding: 20px; line-height: 1.6; }
.contact-lead { font-size: 16px; color: var(--muted); margin: 0; }

/* Legal docs */
.legal-doc { max-width: 760px; margin: 0 auto; padding: clamp(32px,5vw,56px) clamp(24px,4vw,56px) clamp(56px,7vw,96px); }
.legal-body { display: flex; flex-direction: column; gap: 28px; font-size: 15px; line-height: 1.8; color: var(--body-3); }
.legal-h2 { font-family: var(--serif); font-weight: 600; font-size: var(--fs-h3); color: var(--green); margin: 0 0 10px; }
.legal-p { margin: 0; }
.legal-p--note { margin: 10px 0 0; font-size: 13px; color: var(--faint); }
.legal-list { margin: 0; padding-left: 20px; }
.legal-table-wrap { overflow-x: auto; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.legal-table thead th { text-align: left; color: var(--faint); font-weight: 600; }
.legal-table th { padding: 8px 12px; }
.legal-table td { padding: 10px 12px; }
.legal-table th:first-child, .legal-table td:first-child { padding-left: 0; }
.legal-table th:last-child, .legal-table td:last-child { padding-right: 0; }
.legal-table td:last-child { white-space: nowrap; }
.legal-table tbody tr { border-top: 1px solid var(--border); }

/* FAQ accordion */
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-top: 1px solid var(--border); padding: 18px 0; }
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-q { font-family: var(--serif); font-weight: 600; font-size: 16px; color: var(--green); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after { content: '+'; font-size: 20px; color: var(--muted); flex: 0 0 auto; }
.faq-item[open] .faq-q::after { content: '−'; }
.faq-q:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; border-radius: 6px; }
.faq-a { margin: 12px 0 0; font-size: 15px; line-height: 1.7; color: var(--body-3); }

/* Catalog toolbar */
.toolbar-btn { display: flex; align-items: center; min-height: 44px; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); background: #fff; border: 1px solid var(--border-soft); border-radius: var(--r-ctrl); padding: 11px 18px; cursor: pointer; }
.toolbar-select { min-height: 44px; width: max-content; max-width: 100%; font-size: 14px; font-weight: 500; color: var(--body-3); background: #fff; border: 1px solid var(--border-soft); border-radius: var(--r-ctrl); padding: 11px 18px; cursor: pointer; }
.toolbar-label { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .03em; }
.cat-buttons { display: flex; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding: 10px 0 20px; }
.filter-chips { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; min-height: 0; padding: 18px 0; }
.filter-chips button { min-height: 44px; }
.pagination-row { display: flex; justify-content: center; gap: 8px; padding-bottom: clamp(40px,5vw,64px); }
.catalog-h1 { font-size: var(--fs-h1); }
.catalog-filter-toggle, .catalog-filter-sheet-head, .catalog-filter-sheet-actions, .catalog-filter-backdrop { display: none; }
.catalog-filter-toggle[hidden] { display: none; }
.catalog-filter-sheet > .container { max-width: 1480px; }
/* Stacked (label above, swatches below) to match .cat-buttons/"მოდელი:"
   directly above it — was align-items:center, which put "ფერით:" inline
   beside the dot row on desktop only (a mobile override already forced the
   stacked layout below 768px, so the two filter rows read inconsistently
   with each other and the row's own desktop/mobile shape didn't match). */
.catalog-color-row { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

@media (max-width: 767px) {
  body.catalog-filter-open { overflow: hidden; }
  .catalog-filter-toggle { display: inline-flex; }
  .catalog-filter-backdrop {
    position: fixed; inset: 0; z-index: var(--z-sheet-backdrop); display: block; width: 100%; height: 100%;
    border: 0; background: rgba(8,25,22,.56); cursor: default;
  }
  .catalog-filter-backdrop[hidden] { display: none; }
  .catalog-filter-sheet {
    position: fixed; inset: auto 0 0; z-index: var(--z-sheet); max-height: min(82dvh, 680px); overflow-y: auto;
    padding: 18px 0 max(20px, env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0;
    background: var(--bg); box-shadow: var(--shadow-3-sheet);
    transform: translateY(102%); visibility: hidden;
    transition: transform var(--dur-base) var(--ease-standard), visibility 0s var(--ease-linear) var(--dur-base);
  }
  .catalog-filter-sheet.is-open { transform: translateY(0); visibility: visible; transition-delay: 0s; }
  .catalog-filter-sheet-head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 0 20px 14px; border-bottom: 1px solid var(--border);
  }
  .catalog-filter-sheet-head h2 { margin: 0; font: 600 22px/1.2 var(--serif); color: var(--green); }
  .catalog-filter-close {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    border: 1px solid var(--border); border-radius: 50%; background: #fff; color: var(--green);
    font-size: 26px; line-height: 1; cursor: pointer;
  }
  .catalog-filter-sheet > .container { padding-inline: 20px; }
  .catalog-filter-sheet #catalog-toolbar { padding-top: 18px; }
  .catalog-filter-sheet .cat-buttons { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .catalog-filter-sheet .catalog-chip { justify-content: center; width: 100%; }
  .catalog-filter-sheet-actions {
    position: sticky; bottom: calc(-1 * max(20px, env(safe-area-inset-bottom)));
    display: grid; grid-template-columns: 1fr 1.35fr; gap: 10px; margin-top: 20px;
    padding: 14px 20px max(20px, env(safe-area-inset-bottom)); border-top: 1px solid var(--border);
    background: rgba(248,244,234,.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  .catalog-filter-sheet-actions .btn { display: inline-flex; align-items: center; justify-content: center; padding-inline: 14px; }
  .filter-chips { padding-top: 14px; }
}

@media (max-width: 420px) {
  .catalog-filter-sheet .cat-buttons { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-filter-sheet { transition: none; }
}

/* Product page */
.pdp-price-row { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.price--lg { font-size: 28px; }
.price-old--lg { font-size: 18px; }
.sku-line { font-size: 12px; color: var(--muted); margin-top: -14px; margin-bottom: 18px; }
.product-blurb { font-size: 15px; line-height: 1.75; color: var(--body-2); margin: 0 0 26px; }
.color-label { font-size: 13px; font-weight: 600; letter-spacing: .05em; color: var(--green); margin-bottom: 12px; text-transform: uppercase; }
.color-chosen { margin-left: 8px; font-weight: 500; color: var(--muted); text-transform: none; letter-spacing: 0; }
.color-chosen:not(:empty)::before { content: "- "; }
.color-count { color: var(--muted); font-weight: 500; text-transform: none; letter-spacing: 0; }
/* docs/tasks/PDP_SECTIONAL_REDESIGN_HANDOFF_REVIEW.md (owner, via the redesign handoff bundle): title + wishlist heart on one row,
   wishlist moved out of the buying row below. */
.pdp-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pdp-meta-row { font-size: 13px; color: var(--muted); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qty-row { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.btn-add { flex: 1; min-width: 200px; padding: 17px 24px; }
/* Exact buy-row sizing from the redesign bundle: 46px tall, 112px-wide stepper (36px buttons + 40px qty digit), 12px radius.
   Scoped to .qty-row (product.php only) so assets/js/stepper.js's shared .stepper on the cart page is untouched. */
.qty-row .stepper { box-sizing: border-box; width: 112px; height: 46px; border-radius: 12px; }
.qty-row .stepper button { width: 36px; height: 44px; }
.qty-row .stepper .qty { width: 40px; }
.qty-row .btn-add { height: 46px; min-height: 46px; min-width: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0 24px; border-radius: 12px; }
.wish-square { width: 52px; height: 52px; border: 1px solid var(--border-soft); background: #fff; border-radius: var(--r-ctrl); }
.added-row { margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; }
.added-link { font-weight: 600; color: var(--green); }
.specs-list { display: flex; flex-direction: column; }
/* docs/tasks/PDP_SECTIONAL_REDESIGN_HANDOFF_REVIEW.md Phase 2 - the 6-card sectional layout (A-E below; F is untouched).
   .card/.card-pad (already defined above, shared with "დამატებითი ინფორმაცია"/"შეფასებები") is reused as-is for every new
   card - no new background/border/shadow/radius token. */
.product-split { grid-template-columns: 7fr 5fr; }
.pdp-col-left, .pdp-col-right { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

/* A: gallery card */
.pdp-gallery-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.pdp-gallery-head .sku-line { margin: 0; }
.thumbs-row { display: flex; flex-direction: row; gap: 12px; margin-top: 14px; overflow-x: auto; }
@media (min-width: 1025px) {
  .main-img-frame { height: 460px; aspect-ratio: auto; box-shadow: 0 24px 32px -16px rgba(23,32,27,.18); }
}

/* B: spec tabs card */
/* docs/tasks/F12_PDP_TABS_VISIBILITY.md: the insulation blocks now sit above the tabs, default-visible. */
.pdp-insulation-section { margin-bottom: 18px; }
.pdp-spec-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; flex-wrap: wrap; }
.pdp-spec-tab { background: none; border: none; cursor: pointer; font: inherit; font-weight: 600; font-size: 14px; color: var(--muted); padding: 10px 4px; margin-right: 20px; border-bottom: 2px solid transparent; }
.pdp-spec-tab.active { color: var(--green); border-bottom-color: var(--green); }
.pdp-spec-panel[hidden] { display: none; }
/* Phase 4 (owner's external review, item 3): pdp_insulation_blocks_html()'s grid - 2 columns by
   default (the normal case); .pdp-insulation-blocks-1 covers the single-block fallback. No inline
   custom property (style-src-attr 'none' blocks it) - a fixed class instead. */
.pdp-insulation-blocks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.pdp-insulation-blocks-1 { grid-template-columns: 1fr; }
.pdp-insulation-block { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 18px 10px; background: var(--bg-alt); border-radius: 12px; }
.pdp-insulation-icon { font-size: 28px; line-height: 1; }
.pdp-insulation-value { font-size: 20px; font-weight: 700; color: var(--green); }
.pdp-insulation-label { font-size: 12px; color: var(--muted); }

/* D: delivery + price-alert card */
.pdp-delivery-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pdp-delivery-head .i { color: var(--green); flex-shrink: 0; }
.pdp-delivery-card .pw-box { margin-top: 18px; }

/* E: trust card (3 items; replaces the old 4-item .pdp-trust-grid, which moved into B/D above) */
.pdp-trust-grid-v2 { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.pdp-trust-item-v2 { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; font-size: 13px; color: var(--body-3); }
.pdp-trust-item-v2 .i { color: var(--green); }
.pdp-trust-sub { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
.stock-wrap { margin-top: 18px; }
.stock-bar { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; margin-bottom: 6px; }
.stock-bar > div { height: 100%; border-radius: 3px; transition: width var(--dur-slow); }
.stock-text { font-size: 13px; color: var(--muted); }
.review-summary-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.review-summary-sub { font-size: 14px; color: var(--muted); margin-top: 6px; }
.btn-write-review { font-size: 14px; padding: 10px 20px; }
/* Reserves the "no reviews yet" message's own height (measured ~67-86px
   across desktop/mobile) before the async reviews fetch resolves, so that
   result doesn't push the footer down — the reviews list/empty-state swap
   was a measured CLS source (Lighthouse: footer shift, score 0.334). */
.reviews-body { min-height: 88px; }
.reviews-list { display: flex; flex-direction: column; gap: 16px; }
.reviews-empty { font-size: 14px; color: var(--muted); text-align: center; padding: 24px 0; }
.review-form { display: flex; flex-direction: column; gap: 14px; }
.review-form-label { font-size: 13px; font-weight: 600; display: block; }
.review-form-label--mb { margin-bottom: 8px; }
.review-form-title { font-weight: 600; font-size: 18px; color: var(--green); margin: 0 0 18px; }
.star-input { display: flex; gap: 4px; font-size: 28px; cursor: pointer; user-select: none; }
.star-input .star { color: var(--border); }
.review-input { display: block; width: 100%; margin-top: 6px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--r-ctrl); font-size: 14px; }
.review-msg { border-radius: var(--r-ctrl); padding: 12px 16px; font-size: 13px; }
.btn-submit-review { align-self: flex-start; padding: 12px 28px; }
.extra-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,280px),1fr)); gap: clamp(20px,3vw,40px); }
.extra-info-title { font-size: 14px; font-weight: 600; color: var(--green); margin-bottom: 10px; }
.extra-info-text { font-size: 14px; line-height: 1.75; color: var(--body-2); margin: 0; }
.price-history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.price-history-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 1.6; }
.price-history-row .ph-date { color: var(--body-2); }
.price-history-row .ph-price { font-weight: 600; }
.prev-next { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: clamp(56px,7vw,88px); }
.prev-next-link { flex: 1; min-width: min(100%,260px); display: flex; align-items: center; gap: 14px; background: #fff; border-radius: var(--r-ctrl); padding: 12px 22px 12px 14px; border: 1px solid var(--border); text-decoration: none; }
.prev-next-link--next { justify-content: flex-end; padding: 12px 14px 12px 22px; text-align: right; }
.prev-next-arrow { width: 40px; height: 40px; border-radius: 50%; background: var(--green); color: var(--input-bg); display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.prev-next-meta { min-width: 0; }
.prev-next-cap { display: block; font-size: 12px; color: var(--faint); }
.prev-next-name { display: block; font-size: 14px; font-weight: 600; color: var(--green); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notfound-img { display: block; width: 160px; height: 160px; margin: 0 auto 24px; object-fit: contain; }
.notfound-title { font-weight: 600; font-size: 30px; color: var(--green); margin: 0 0 14px; }
.notfound-text { font-size: 15px; color: var(--muted); margin: 0 0 28px; }
.notfound-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.main-img-frame {
  aspect-ratio: 4/5; border-radius: 16px; overflow: hidden; background: var(--bg-alt);
  position: relative; display: block; width: 100%; padding: 0; border: none;
  cursor: zoom-in; font: inherit; color: inherit;
}
.main-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Phase 4 (owner's external review, item 1): at the 460px fixed height set above (min-width:1025px),
   object-fit:cover crops a square/portrait photo. contain + inner padding shows the whole photo
   instead. Mobile keeps cover (aspect-ratio:4/5 there, not a fixed height, so no cropping issue) -
   this has to come AFTER the base .main-img rule above, not inside the earlier 1025px block farther
   up the file, or the base rule's later cascade position would win despite the media query matching. */
@media (min-width: 1025px) {
  .main-img { object-fit: contain; padding: 32px; box-sizing: border-box; }
}
.zoom-hint {
  position: absolute; right: 12px; bottom: 12px; height: 40px; padding: 0 16px 0 12px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: rgba(250, 249, 246, .92); color: var(--green);
  border-radius: var(--r-pill); box-shadow: var(--shadow-1-hint); pointer-events: none;
}
.zoom-hint-text { font-size: 13px; font-weight: 600; }

/* ---------- Product image viewer ---------- */
.zoom-viewer {
  position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(20, 20, 15, .93);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.zoom-viewer[hidden] { display: none; }
.zoom-img {
  max-width: min(100%, 1200px); max-height: 100%; object-fit: contain;
  border-radius: 8px; cursor: zoom-in; transition: transform var(--dur-base) var(--ease-out);
  transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
}
.zoom-img.is-zoomed { transform: scale(2.2); cursor: zoom-out; }
.zoom-close, .zoom-nav {
  position: absolute; display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  background: rgba(250, 249, 246, .14); border: 1px solid rgba(250, 249, 246, .28);
  color: #FAF9F6; padding: 0;
}
@media (hover: hover) and (pointer: fine) { .zoom-close:hover, .zoom-nav:hover { background: rgba(250, 249, 246, .26); } }
.zoom-close { top: 20px; right: 20px; }
.zoom-prev { left: 20px; }
.zoom-next { right: 20px; }
.zoom-count {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  color: #FAF9F6; font-size: 14px; letter-spacing: .04em;
  background: rgba(20, 20, 15, .5); padding: 6px 14px; border-radius: var(--r-pill);
}
@media (max-width: 768px) {
  .zoom-viewer { padding: 12px; }
  .zoom-close { top: 12px; right: 12px; }
  .zoom-prev { left: 8px; }
  .zoom-next { right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .zoom-img { transition: none; }
}
.tag-pill-rust { background: var(--rust); color: #fff; }
.discount-pill { background: var(--success-bg); color: var(--green); }
.pdp-name { font-weight: 600; font-size: var(--fs-h1); color: var(--green); margin: 0 0 14px; text-wrap: balance; }
.card-pad-fluid { padding: clamp(24px,3.5vw,40px); }

/* Work with us */
.partner-benefits-pad { padding-top: clamp(40px,5vw,56px); padding-bottom: clamp(24px,3vw,32px); }
.partner-steps-pad { padding-top: clamp(24px,3vw,32px); padding-bottom: clamp(40px,5vw,56px); }
.partner-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 16px; }
.partner-card { background: #fff; border-radius: 16px; padding: 24px; box-shadow: var(--shadow-1-soft); }
.partner-card-title { font-weight: 600; font-size: 16px; color: var(--green); margin-bottom: 8px; }
.partner-card-text { margin: 0; font-size: 14px; line-height: 1.7; color: var(--body-3); }
.partner-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; counter-reset: step; }
.partner-step { display: flex; gap: 16px; align-items: flex-start; }
.partner-step-num { flex: 0 0 32px; height: 32px; border-radius: 100px; background: var(--green); color: var(--bg); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; }
.partner-step-title { display: block; font-weight: 600; font-size: 16px; color: var(--green); margin-bottom: 4px; }
.partner-step-text { display: block; font-size: 14px; line-height: 1.7; color: var(--body-3); }
.partner-cta { background: var(--bg-alt); border-radius: 20px; padding: clamp(28px,4vw,40px); text-align: center; }
.partner-cta-title { font-weight: 600; font-size: clamp(20px,2vw,24px); color: var(--green); margin: 0 0 10px; }
.partner-cta-text { margin: 0 0 20px; font-size: 15px; line-height: 1.75; color: var(--body-3); }
.partner-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-partner { font-size: 15px; padding: 14px 28px; }
.btn-partner-alt { font-size: 15px; padding: 13px 28px; }

/* Hero (home) */
.hero-section { position: relative; overflow: hidden; padding-top: clamp(48px,7vw,96px); padding-bottom: clamp(40px,6vw,80px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,340px),1fr)); gap: clamp(32px,5vw,72px); align-items: center; }
.hero-text-col { position: relative; z-index: var(--z-base); min-width: 0; }
.hero-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--rust); margin-bottom: 20px; }
/* Sized for Mtavruli, which is wider than Mkhedruli: at 60px the designed
   two-line heading wrapped to three. 56px is the threshold at this column
   width, so this keeps headroom for font-loading differences. */
.hero-title { font-family: var(--serif); font-weight: 600; font-size: clamp(32px,4.2vw,54px); line-height: 1.02; letter-spacing: -0.02em; color: var(--green); margin: 0 0 22px; text-wrap: balance; }
.hero-lead { font-size: clamp(15px,1.3vw,18px); color: var(--body-2); line-height: 1.6; max-width: 42ch; margin: 0 0 34px; }
.hero-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.hero-link-accent { font-size: 15px; font-weight: 600; color: var(--green); text-decoration: none; border-bottom: 1.5px solid var(--green); padding-bottom: 2px; }
.hero-media { position: relative; z-index: var(--z-base); min-height: 560px; padding: 48px; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #24422F 0%, #17201B 100%); overflow: hidden; }
.hero-watermark { position: absolute; top: 10px; right: 28px; font-family: var(--serif); font-weight: 700; font-size: 170px; line-height: 1; color: rgba(255,255,255,.06); letter-spacing: -.02em; }
.hero-blob { position: absolute; left: -60px; bottom: -80px; width: 300px; height: 300px; border-radius: var(--r-pill); background: rgba(156,183,158,.12); }
.hero-product-frame { position: relative; width: 100%; max-width: 380px; aspect-ratio: 3/4.1; border-radius: 200px 200px 24px 24px; overflow: hidden; box-shadow: var(--shadow-3-hero); border: 1px solid rgba(255,255,255,.14); }
.hero-product-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero-product-link { display: block; width: 100%; height: 100%; }
.hero-price-link { text-decoration: none; color: inherit; cursor: pointer; }
.hero-rating-card { position: absolute; top: 64px; left: 40px; background: rgba(255,255,255,.95); border-radius: 12px; padding: 11px 15px; box-shadow: var(--shadow-3-float); }
.hero-rating-card .score { font-weight: 700; font-size: 15px; }
.hero-rating-card .count { font-size: 11px; color: var(--muted); }
.hero-pill-dark { position: absolute; background: rgba(23,32,27,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-pill); padding: 10px 16px; color: #EDEAE1; font-size: 13px; font-weight: 600; display: flex; gap: 8px; align-items: center; }
.hero-pill-dark .dot { width: 8px; height: 8px; border-radius: var(--r-pill); }
.hero-price-card { position: absolute; left: 40px; bottom: 52px; background: rgba(255,255,255,.95); border-radius: var(--r-card); padding: 14px 18px; box-shadow: var(--shadow-3-float); }
.hero-price-card .cat-line { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hero-price-card .price-line { display: flex; align-items: center; gap: 10px; margin-top: 5px; }
.hero-price-card .price-val { font-weight: 700; font-size: 19px; }
.hero-price-card .price-off { font-size: 13px; font-weight: 600; color: var(--rust); }
.hero-price-card .swatches-mini { display: flex; gap: 4px; margin-left: 6px; }
.hero-price-card .swatches-mini span:not(.more) { width: 13px; height: 13px; border-radius: var(--r-pill); }
.hero-price-card .swatches-mini .more { font-size: 11px; color: var(--muted); }

/* Category cards (home) */
.cat-card { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 3/4; display: block; text-decoration: none; }
.cat-card .cover { width: 100%; height: 100%; object-fit: cover; }
.cat-card .overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,32,27,0) 40%, rgba(23,32,27,.82) 100%); }
.cat-card .label { position: absolute; left: 18px; bottom: 16px; color: #fff; }
.cat-card .label .name { font-family: var(--serif); font-weight: 600; font-size: 20px; }
.cat-card .label .count { font-size: 13px; color: #D8DBD2; margin-top: 2px; }
.cat-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,220px),1fr)); gap: var(--space-lg); }

/* Feature/how-it-works cards (home) */
.feature-card { padding: 28px; }
.feature-card .num { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--rust); margin-bottom: 14px; }
.feature-card .ft-title { font-size: 16px; font-weight: 600; color: var(--green); margin-bottom: 8px; }
.feature-card .desc { font-size: 14px; color: var(--muted); line-height: 1.65; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: var(--space-lg); }

/* Story + CTA (home) */
.story-section { background: var(--bg-alt); padding: clamp(56px,7vw,100px) clamp(24px,4vw,56px); }
.story-grid {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(280px, .82fr);
  gap: 0;
  align-items: stretch;
  overflow: hidden;
  border-radius: 20px;
  background: var(--bg-alt);
}
.heritage-mark {
  min-width: 0;
  min-height: clamp(390px,42vw,610px);
  padding: clamp(40px,6vw,88px);
  overflow: hidden;
  background: var(--green);
  color: var(--bg-alt);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.heritage-mark__brand,
.heritage-mark__caption {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.5;
  text-transform: uppercase;
}
.heritage-mark__caption {
  max-width: 22ch;
  color: var(--footer-muted);
}
.heritage-mark__year {
  display: block;
  max-width: 100%;
  font-family: var(--serif);
  font-size: clamp(88px,15vw,218px);
  font-weight: 700;
  letter-spacing: -.075em;
  line-height: .78;
  color: var(--bg-alt);
  white-space: nowrap;
}
.heritage-copy {
  min-width: 0;
  align-self: center;
  padding: clamp(40px,6vw,88px);
}
.heritage-copy__title {
  display: grid;
  margin: 14px 0 28px;
}
.heritage-copy__place,
.heritage-copy__since {
  font-family: var(--sans);
  font-size: clamp(14px,1.5vw,18px);
  font-weight: 700;
  letter-spacing: .02em;
}
.heritage-copy__year {
  display: block;
  max-width: 100%;
  font-family: var(--serif);
  font-size: clamp(72px,9vw,132px);
  font-weight: 700;
  letter-spacing: -.06em;
  line-height: .88;
  color: var(--rust);
}
.heritage-copy__since { justify-self: end; }
.story-social { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--green); text-decoration: none; white-space: nowrap; }
.story-text { font-size: 16px; line-height: 1.75; color: var(--body-2); margin: 0 0 24px; }
.story-actions { display: flex; flex-wrap: wrap; gap: 16px 28px; }
.link-arrow { white-space: nowrap; }
@media (max-width: 1024px) {
  .heritage-mark,
  .heritage-copy { padding: clamp(32px,5vw,56px); }
  .heritage-mark { min-height: 380px; }
  .heritage-mark__year { font-size: clamp(88px,14vw,150px); }
  .heritage-copy__year { font-size: clamp(64px,9vw,92px); }
}
@media (max-width: 767px) {
  .story-grid { grid-template-columns: minmax(0, 1fr); }
  .heritage-mark { min-height: 300px; padding: 32px 24px; }
  .heritage-mark__year { font-size: clamp(88px,32vw,148px); }
  .heritage-copy { padding: 36px 24px 40px; }
  .heritage-copy__title { margin-bottom: 22px; }
  .heritage-copy__year { font-size: clamp(76px,28vw,112px); }
}
.cta-band { background: var(--green); border-radius: 20px; padding: clamp(40px,6vw,72px); text-align: center; position: relative; overflow: hidden; }
.cta-glow { position: absolute; top: -100px; left: 50%; transform: translateX(-50%); width: 600px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(180,85,45,.35) 0%, transparent 70%); pointer-events: none; }
.cta-title { position: relative; font-family: var(--serif); font-weight: 600; font-size: clamp(26px,3vw,40px); color: var(--bg); margin: 0 0 16px; text-wrap: balance; }
.cta-text { position: relative; font-size: 16px; color: #A7ABA0; margin: 0 0 32px; }
.cta-action { position: relative; }
.featured-section { background: var(--input-bg); border-top: 1px solid var(--border); }

/* Additional spacing & page-chrome helpers
   Values mirror original inline declarations exactly. */
.mb-6 { margin-bottom: 6px; }
.mb-8 { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-26 { margin-bottom: 26px; }
.mb-28 { margin-bottom: 28px; }
.mb-30 { margin-bottom: 30px; }
.mb-32 { margin-bottom: 32px; }
.mb-34 { margin-bottom: 34px; }
.mb-36 { margin-bottom: 36px; }
.mt-14 { margin-top: 14px; }
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mt-26 { margin-top: 26px; }
.pt-16 { padding-top: 16px; }
.pt-20 { padding-top: 20px; }
.pt-clamp-40 { padding-top: clamp(40px,5vw,64px); }
.pt-clamp-24 { padding-top: clamp(24px,3vw,32px); }
.pb-clamp-24 { padding-bottom: clamp(24px,3vw,32px); }
.pb-clamp-40 { padding-bottom: clamp(40px,5vw,64px); }
.pb-clamp-56 { padding-bottom: clamp(56px,7vw,96px); }
.pb-clamp-88 { padding-bottom: clamp(48px,6vw,88px); }
.page-pad-top { padding-top: clamp(32px,5vw,56px); }
.page-pad-bottom { padding-bottom: clamp(56px,7vw,96px); }
.page-pad-y { padding-top: clamp(32px,5vw,56px); padding-bottom: clamp(56px,7vw,96px); }
.text-15 { font-size: 15px; }
.text-17 { font-size: 17px; }
.color-body-2 { color: var(--body-2); }
.color-body-3 { color: var(--body-3); }
.color-muted { color: var(--muted); }
.color-faint { color: var(--faint); }
.color-green { color: var(--green); }
.color-rust { color: var(--rust); }
.nowrap { white-space: nowrap; }
.resize-none { resize: none; }
.resize-vertical { resize: vertical; }
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }
.no-decoration { text-decoration: none; }
.balance { text-wrap: balance; }
.relative { position: relative; }
.z-1 { z-index: var(--z-base); }
.customize-workspace{display:grid;grid-template-columns:minmax(260px,360px) minmax(0,1fr);gap:clamp(20px,4vw,48px);padding:clamp(20px,4vw,40px);align-items:start}
.customize-controls{display:grid;gap:16px}
.customize-controls .form-label{display:grid;gap:7px;color:var(--green);font-weight:600}
.customize-actions{display:flex;gap:10px;flex-wrap:wrap}
.customize-status{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
.customize-preview{min-height:420px;display:grid;place-items:center;background:var(--bg);border-radius:18px;padding:clamp(20px,5vw,56px);overflow:hidden}
.customize-safe-area{position:relative;width:min(100%,520px);aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;border:1px dashed var(--rust);background:#f4efe4;border-radius:12px;color:var(--muted);text-align:center}
.customize-safe-area::after{content:"";position:absolute;inset:6%;border:1px dashed color-mix(in srgb,var(--rust) 55%,transparent);pointer-events:none}
.customize-photo-canvas{position:absolute;inset:0;width:100%;height:100%;z-index: var(--z-base);touch-action:none;overflow:hidden}
.customize-safe-boundary{fill:none;stroke:color-mix(in srgb,var(--rust) 55%,transparent);stroke-width:1;stroke-dasharray:4 3;vector-effect:non-scaling-stroke;pointer-events:none}
.customize-photo-frame{touch-action:none;cursor:move}
.customize-photo-hit{fill:transparent;pointer-events:all}
.customize-photo-image{pointer-events:none}
.customize-photo-outline{fill:none;stroke:color-mix(in srgb,var(--rust) 75%,transparent);stroke-width:2;vector-effect:non-scaling-stroke;pointer-events:none}
.customize-photo-handle{fill:var(--rust);stroke:var(--cream);stroke-width:2;vector-effect:non-scaling-stroke;cursor:nwse-resize;touch-action:none}
.customize-design-text{fill:var(--green);font-family:var(--sans);font-weight:700;pointer-events:none}
.customize-hint{margin:0;color:var(--muted);font-size:12px;line-height:1.4}
.customize-preview-placeholder{position:relative;z-index: var(--z-raised);font-size:14px;padding:20px;pointer-events:none}
.customize-adjustments{border:1px solid #E4DED0;border-radius:12px;padding:12px;display:grid;gap:8px}
.customize-adjustments legend{font-weight:600;color:var(--green);padding:0 4px}
.customize-adjustments label{display:grid;grid-template-columns:1fr 1.3fr;gap:8px;align-items:center;font-size:13px}
.customize-warning{color:#7A321E;background:#FFF0E8;border:1px solid #E7B49C;padding:10px 12px;border-radius:10px;font-size:13px}
.customize-empty{text-align:center}
.customize-empty p{color:var(--muted);line-height:1.6}
@media (max-width:760px){.customize-workspace{grid-template-columns:1fr}.customize-preview{min-height:300px}.customize-actions .btn{flex:1}}

/* Screenshot-parity customizer preview. Kept isolated so the storefront system remains unchanged. */
.customize-builder{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,520px);min-height:760px;background:#fff;color:#202020;border:1px solid #b8b8b8;overflow:hidden}
.customize-live{grid-template-areas:"preview controls";padding:0;border-radius:0;box-shadow:none}.customize-live .customize-preview{grid-area:preview;border-radius:0;min-height:760px;background:#fff}.customize-live .customize-controls{grid-area:controls;padding:30px 28px;border-left:1px solid #b8b8b8;background:#fff}.customize-live .customize-controls .form-label{padding:14px 0;border-bottom:1px solid #dedede}.customize-live .customize-controls .input{border:1px solid #999;border-radius:0;background:#fff}.customize-live .customize-safe-area{width:min(100%,620px);aspect-ratio:4/5;border:1px solid #aaa;border-radius:0;background:#fff}.customize-live .customize-safe-area::after{display:none}.customize-live .customize-actions{margin-top:18px}.customize-live .customize-adjustments{border-radius:0;border-color:#999}
.customize-demo-stage{position:relative;min-height:760px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.customize-demo-brand{position:absolute;top:28px;left:34px;font:800 25px/1 Arial,sans-serif;letter-spacing:-1.5px;color:#191919}
.customize-demo-zoom{position:absolute;left:36px;top:90px;display:grid;gap:12px;z-index: var(--z-raised)}
.customize-demo-zoom button{border:0;background:transparent;font:32px/1 Arial;color:#222;padding:0;cursor:pointer}
.customize-demo-product{position:relative;width:min(65%,620px);height:88%;display:grid;place-items:center;transform:scale(1);transition:transform var(--dur-base) var(--ease-standard)}
.customize-demo-zoom-75{transform:scale(.75)}.customize-demo-zoom-80{transform:scale(.8)}.customize-demo-zoom-90{transform:scale(.9)}.customize-demo-zoom-100{transform:scale(1)}.customize-demo-zoom-110{transform:scale(1.1)}.customize-demo-zoom-120{transform:scale(1.2)}.customize-demo-zoom-130{transform:scale(1.3)}.customize-demo-zoom-135{transform:scale(1.35)}
.customize-demo-product img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 20px 30px rgba(0,0,0,.08))}
.customize-demo-overlay{position:absolute!important;left:50%;top:46%;width:26%!important;height:24%!important;object-fit:contain!important;filter:none!important;z-index: var(--z-raised)}.customize-demo-overlay-text{position:absolute;left:22%;right:22%;top:53%;z-index: var(--z-overlap);text-align:center;font:700 20px/1.2 Arial;color:#202020;overflow-wrap:anywhere}.customize-demo-text-label{grid-column:1/-1;display:grid;gap:6px;font:13px Arial}.customize-demo-text-label input{border:1px solid #888;padding:10px;background:#fff;font:14px Arial}.customize-demo-file{display:none}
.customize-demo-print-line{position:absolute;width:35%;height:48%;border:2px dashed rgba(23,23,23,.36);border-radius:8px;opacity:0;transition:opacity var(--dur-fast);pointer-events:none}
.customize-demo-print-line.is-visible{opacity:1}
.customize-demo-toggle{position:absolute;bottom:28px;left:34px;display:flex;gap:8px;align-items:center;font:13px Arial;color:#262626;cursor:pointer}.customize-demo-toggle input{appearance:none;width:30px;height:17px;border-radius:20px;background:#222;position:relative;margin:0}.customize-demo-toggle input::after{content:"";position:absolute;width:11px;height:11px;left:3px;top:3px;border-radius:50%;background:#fff}
.customize-demo-share{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);border:1px solid #333;background:#fff;padding:11px 25px;font:600 14px Arial;cursor:pointer}
.customize-demo-panel{padding:30px 28px 20px;background:#fff;overflow:auto}.customize-demo-product-title{font:700 clamp(20px,1.8vw,28px)/1.2 Arial,sans-serif;margin:0 0 15px;color:#242424}.customize-demo-box{border:1px solid #999;background:#f7f7f7;padding:18px 16px;margin-bottom:12px;display:grid;gap:12px;font:14px Arial}.customize-demo-size{justify-self:start;background:#222;color:#fff;border:0;padding:12px 26px;font-weight:700}.customize-demo-swatches{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.customize-demo-swatch{width:31px;height:31px;padding:0;border-radius:4px;border:1px solid #777;background:transparent;cursor:pointer;overflow:hidden}.customize-demo-swatch-color{display:block;width:100%;height:100%}.customize-demo-swatch.is-selected{outline:2px solid #222;outline-offset:2px}.customize-demo-types{grid-template-columns:1fr 1fr;gap:10px}.customize-demo-types h2{grid-column:1/-1;text-align:center;font:700 15px Arial;margin:0 0 4px}.customize-demo-type{min-height:60px;display:flex;align-items:center;gap:10px;padding:8px;border:1px solid #888;background:#fff;text-align:left;cursor:pointer;color:#222}.customize-demo-type.is-selected{border:3px solid #252525;padding:6px}.customize-demo-type-icon{display:grid;place-items:center;width:36px;height:36px;border:1px solid #777;font:20px Arial}.customize-demo-type span:last-child{display:grid;gap:4px}.customize-demo-type strong{font:700 14px Arial}.customize-demo-type small{font:13px Arial}.customize-demo-bottom{display:grid;grid-template-columns:100px 1fr;gap:10px;align-items:end;margin-top:14px}.customize-demo-bottom>div{display:grid;gap:8px;font:13px Arial}.customize-demo-quantity{display:flex;height:44px;border:1px solid #777;align-items:center;justify-content:space-around}.customize-demo-quantity button{border:0;background:transparent;font-size:18px;cursor:pointer}.customize-demo-quantity output{font:15px Arial}.customize-demo-next{height:44px;border:0;background:#222;color:#fff;font:700 14px Arial}.customize-demo-next:disabled{opacity:1;cursor:not-allowed}.customize-demo-note{margin:16px 0 0;text-align:right;color:#a52b1c;font:12px Arial}
@media (max-width:900px){.customize-builder{grid-template-columns:1fr}.customize-live{grid-template-areas:"preview" "controls"}.customize-live .customize-preview{min-height:500px}.customize-live .customize-controls{border-left:0;border-top:1px solid #b8b8b8}.customize-demo-stage{min-height:500px}.customize-demo-panel{padding:22px 18px}.customize-demo-product{height:80%;width:min(78%,520px)}}

/* ---------- CSP-safe storefront state and dynamic visuals ---------- */
.icon-round.is-active { color: var(--rust); border-color: var(--green); }
.catalog-server-thumb { width: 100%; height: 100%; object-fit: cover; }
.color-dot { display: inline-block; flex: 0 0 auto; overflow: visible; vertical-align: middle; }
.color-dot-14 { width: 14px; height: 14px; }
.color-dot-15 { width: 15px; height: 15px; }
.color-dot-16 { width: 16px; height: 16px; }
.color-dot circle { stroke: #d9d4c8; stroke-width: 1; }
/* Sibling-colour swatch row on product cards (catalog/collection/related/
   home). Matches the existing own-colour swatch row spacing exactly
   (csp-i-508bdd4bc406 / csp-i-efad27e37cda) so SSR and JS-hydrated cards
   look identical. */
.card-swatches { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 12px; }
.card-swatch { width: 20px; height: 20px; padding: 0; border: none; border-radius: 50%; background: transparent; cursor: pointer; display: grid; place-items: center; flex: 0 0 auto; }
.card-swatch .color-dot { border-radius: 50%; transition: box-shadow var(--dur-fast); }
.card-swatch.is-active .color-dot { box-shadow: var(--ring-green-2); }
.card-swatch[data-swatch-stock="0"] { opacity: .45; }
.order-status-received { background: #F1EFE9; color: #1F3A2E; }
.order-status-processing { background: #F5EBD4; color: #8A6A1F; }
.order-status-shipped { background: #E4EFE4; color: #3C6E5B; }
.order-status-complete { background: #1F3A2E; color: #E9E6DE; }
.order-status-cancelled { background: #F6E7DE; color: #993F1F; }

/* Customer order status track and dispatch tracking (build 221). */
.order-stepper { display: flex; margin: 14px 0 2px; }
.order-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; text-align: center; }
.order-step::before { content: ""; position: absolute; top: 6px; right: 50%; width: 100%; height: 2px; background: var(--border); }
.order-step:first-child::before { display: none; }
.order-step-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--border); position: relative; z-index: var(--z-base); }
.order-step-label { font-size: 10px; color: var(--faint); line-height: 1.2; padding: 0 2px; word-break: break-word; }
.order-step--done .order-step-dot { background: var(--green); }
.order-step--done::before { background: var(--green); }
.order-step--done .order-step-label { color: var(--muted); }
.order-step--current .order-step-dot { background: var(--rust); box-shadow: var(--ring-error); }
.order-step--current::before { background: var(--green); }
.order-step--current .order-step-label { color: var(--green); font-weight: 500; }
.order-track { display: flex; align-items: center; gap: 10px; margin: 12px 0; padding: 10px 12px; background: #E4EFE4; color: #3C6E5B; border-radius: 10px; }
.order-track-courier { font-weight: 600; font-size: 13px; }
.order-track-num { font-size: 13px; }
.order-track-cancelled { margin: 12px 0; padding: 8px 12px; background: #F6E7DE; color: #993F1F; border-radius: 10px; font-size: 13px; text-align: center; }
.order-track-note { margin-top: 6px; font-size: 12px; color: #8A6A1F; }

/* Cookie consent banner (build 223). */
.consent-banner { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: var(--z-banner); width: min(680px, calc(100% - 24px)); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 18px; background: var(--green); color: var(--bg); border-radius: 14px; box-shadow: var(--shadow-3-consent); }
.consent-banner[hidden] { display: none; }
.consent-text { flex: 1 1 240px; margin: 0; font-size: 13px; line-height: 1.5; }
/* Lighter rust than --rust-on-dark (#CE7550, only 3.69:1 here): this link sits on
   the green banner and needs 4.5:1 for AA. #E9A178 gives 5.77:1 while keeping the
   warm link colour. (build330 — a11y contrast fix) */
.consent-text a { color: #E9A178; text-decoration: underline; }
.consent-actions { display: flex; gap: 8px; flex-shrink: 0; }
/* CONSENT_BANNER_BUTTON_CONTRAST_FIX: scoped to this banner only - .btn-primary/.btn-ghost are global
   classes used elsewhere (checkout, other CTAs) and must not change there. Two bugs combined: .btn-ghost
   has no storefront rule at all (only body.admin .btn-ghost in admin.css), so "უარი" fell back to the
   browser's unstyled button chrome; .btn-primary's own green-on-bg colors are the SAME green as this
   banner's own background, so "თანხმობა" was effectively invisible here specifically. */
.consent-actions .btn-primary { background: var(--bg); color: var(--green); }
.consent-actions .btn-primary:hover { background: var(--bg); opacity: .92; }
.consent-actions .btn-ghost {
  background: transparent;
  border: 1px solid rgba(233, 230, 222, .4); /* var(--bg) 40% - visible but low-attention */
  color: var(--bg);
}
.consent-actions .btn-ghost:hover { background: rgba(233, 230, 222, .12); }
/* EXTERNAL_AUDIT_REMEDIATION_TRACKER.md F-07: measured live at 375x812, the banner was 146.5px
   (16.9% viewport) - text, link and the 2 action buttons each wrapping onto their own row under
   flex-wrap. Tighter padding/gap/type shrinks that without touching functionality (still the same
   deny/grant buttons + policy link, same data-consent attributes consent.js reads). */
@media (max-width: 640px) {
  .consent-banner { padding: 10px 14px; gap: 8px; bottom: 10px; }
  .consent-text { font-size: 12px; line-height: 1.4; }
}
.customer-thread-message { max-width: 84%; padding: 14px 16px; border-radius: var(--r-card); background: #F4F3EF; }
.customer-thread-message.is-customer { margin-left: auto; background: #E4EFE4; }
.checkout-payment-option { justify-content: flex-start; }
.checkout-payment-option.is-unavailable { opacity: .55; }
.coupon-msg.is-success { color: #2E6B41; }
.coupon-msg.is-error { color: #993F1F; }
.catalog-chip {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 9px 18px; border: 1px solid #E0DBCF; border-radius: var(--r-pill);
  background: #fff; color: var(--body-3); cursor: pointer; font-size: 14px; font-weight: 500;
}
.catalog-chip.is-active { border-color: var(--green); background: var(--green); color: #fff; font-weight: 600; }
/* The button is 44x44 for touch, but the dot stays 28px + a 2px ring (32px total,
   unchanged): the ring is a box-shadow spread, which draws outside the svg without
   taking part in layout. */
.catalog-color-filter {
  width: 44px; height: 44px; padding: 0; border: none;
  border-radius: 50%; background: transparent; cursor: pointer;
  display: grid; place-items: center;
}
.catalog-color-filter svg {
  width: 28px; height: 28px; display: block; border-radius: 50%;
  box-shadow: var(--ring-border-2); transition: box-shadow var(--dur-fast);
}
.catalog-color-filter.is-active svg { box-shadow: var(--ring-green-3); }
.catalog-color-filter.is-pale svg { filter: drop-shadow(0 0 0 var(--border)); }
.catalog-page-button {
  width: 44px; height: 44px; border: 1px solid var(--border-soft); border-radius: var(--r-ctrl);
  display: flex; align-items: center; justify-content: center; background: #fff;
  color: var(--body-3); cursor: pointer;
}
.catalog-page-button.is-active { border-color: var(--green); background: var(--green); color: #fff; font-weight: 600; }
.catalog-page-button.is-disabled { opacity: .4; pointer-events: none; }
.stock-pill-in { background: var(--success-bg); color: var(--green); }
.stock-pill-out { background: var(--danger-bg); color: var(--rust); }
.stock-progress, .review-progress {
  display: block; width: 100%; border: 0; appearance: none; overflow: hidden;
  background: var(--border);
}
.stock-progress { height: 6px; border-radius: 3px; }
.stock-progress::-webkit-progress-bar, .review-progress::-webkit-progress-bar { background: var(--border); }
.stock-progress::-webkit-progress-value, .review-progress::-webkit-progress-value { background: #993F1F; }
.stock-progress::-moz-progress-bar, .review-progress::-moz-progress-bar { background: #993F1F; }
.stock-progress.is-critical::-webkit-progress-value { background: #C1502E; }
.stock-progress.is-critical::-moz-progress-bar { background: #C1502E; }
.stock-text.is-critical { color: #C1502E; }
.prev-next-link.is-hidden { visibility: hidden; }
.rating-stars-svg { display: inline-block; width: 76px; height: 16px; overflow: visible; vertical-align: -3px; }
.review-progress { height: 7px; border-radius: var(--r-pill); }
.review-progress::-webkit-progress-value { border-radius: var(--r-pill); }
.review-progress::-moz-progress-bar { border-radius: var(--r-pill); }
.product-swatches.has-axes { display: block; }
.product-swatches.has-variants { display: flex; }
.variant-color-dot { width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; }
.swatch { display: inline-grid; place-items: center; background: transparent; }
.swatch .color-dot { width: 100%; height: 100%; }
.btn-add:not(:disabled) { background: var(--green); cursor: pointer; }
.btn-add:disabled { background: var(--strike); cursor: not-allowed; }
body.is-scroll-locked { overflow: hidden; }
.zoom-x-0{--zoom-x:0%}.zoom-x-1{--zoom-x:10%}.zoom-x-2{--zoom-x:20%}.zoom-x-3{--zoom-x:30%}.zoom-x-4{--zoom-x:40%}.zoom-x-5{--zoom-x:50%}.zoom-x-6{--zoom-x:60%}.zoom-x-7{--zoom-x:70%}.zoom-x-8{--zoom-x:80%}.zoom-x-9{--zoom-x:90%}.zoom-x-10{--zoom-x:100%}
.zoom-y-0{--zoom-y:0%}.zoom-y-1{--zoom-y:10%}.zoom-y-2{--zoom-y:20%}.zoom-y-3{--zoom-y:30%}.zoom-y-4{--zoom-y:40%}.zoom-y-5{--zoom-y:50%}.zoom-y-6{--zoom-y:60%}.zoom-y-7{--zoom-y:70%}.zoom-y-8{--zoom-y:80%}.zoom-y-9{--zoom-y:90%}.zoom-y-10{--zoom-y:100%}
.star-input .star { transition: color var(--dur-instant); }
/* build451: the stars are radio inputs now -- show where keyboard focus is (ring token, no new colour). */
.star-input .star:has(input:focus-visible) { box-shadow: var(--ring-green-2); border-radius: 4px; }
.star-input .star.is-active { color: #993F1F; }
.review-msg.is-error { background: #F6E7DE; color: #993F1F; }
.review-msg.is-success { background: var(--success-bg); color: var(--green); }
@media (max-width:560px){.customize-demo-stage{min-height:420px}.customize-demo-brand{left:18px;top:18px;font-size:20px}.customize-demo-zoom{left:18px;top:70px}.customize-demo-toggle{left:18px;bottom:18px;font-size:11px}.customize-demo-share{bottom:18px;padding:9px 15px}.customize-demo-types{grid-template-columns:1fr}.customize-demo-types h2{grid-column:auto}.customize-demo-bottom{grid-template-columns:90px 1fr}.customize-demo-panel h1{font-size:18px}}

/* ============================================================
   ADMIN DESIGN SYSTEM (Build 159)
   The storefront is warm and editorial; the admin is a calm,
   precise instrument. Same brand anchor (dark green sidebar),
   different voice: quiet chrome, loud data.
   ============================================================ */

/* Headings in the admin use the sans face. The serif is the
   storefront's voice and hurts scanning in a data panel. */
body.admin h1, body.admin h2, body.admin h3,
.dash-greet h2, .stat-card .val { font-family: var(--sans); }

/* .stat-grid carried only media-query overrides and no base rule,
   so on desktop the cards stacked full width like spreadsheet rows.
   This is the base the overrides were always assuming. */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }

/* --- KPI: data first, quiet recognition cue second --- */

















/* --- Section eyebrow: the storefront's Mtavruli signature, kept quiet --- */


/* --- Rating distribution (5 -> 1) --- */










/* --- Review card (replaces the table) --- */
.arev { display: flex; flex-direction: column; gap: 12px; }
.arev-item { display: grid; grid-template-columns: 38px 1fr auto; gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-card); background: #fff; }
.arev-av { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--sage-bg); color: var(--green); font-weight: 700; font-size: 14px; }
.arev-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.arev-who { font-weight: 600; color: var(--a-ink); font-size: 14px; }
.arev-stars { color: var(--gold); font-size: 13px; letter-spacing: 1px; }
.arev-meta { font-size: 12px; color: var(--muted); }
.arev-text { font-size: 14px; color: var(--body-2); line-height: 1.6; margin: 6px 0 0; }
.arev-acts { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }

/* --- Media library: a photo grid whose real subject is the alt text --- */











/* --- Empty state: an invitation to act, not a blank box --- */






@media (max-width: 720px) {
  .arev-item { grid-template-columns: 34px 1fr; }
  .arev-acts { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
}






/* --- Area chart (Build 161) --- */


















/* --- Segmented control (Build 163) --- */






/* --- Dashboard actions: one primary, the rest subordinate --- */


/* --- List rows with a product thumbnail --- */



/* Colour carries urgency, and the number states it in words too. */






/* --- Admin buttons (Build 164) ---
   .btn declares no background and no border, so it inherits whatever the user
   agent gives the element: an <a class="btn"> renders fully transparent while a
   <button class="btn"> gets the browser's grey default. The same class was
   reading two different ways, and the anchors read as plain text rather than
   controls. Scoped to the admin, where 49 of the 50 bare .btn uses live, so the
   storefront's own variants keep their surfaces untouched. */



/* Redesign Phase 2: the single accent is burnished brass; primary buttons fill
   it, outline buttons frame with border-strong, ghost is text-like, danger fills
   solid on hover. Flat (no lift/shadow), overriding the storefront's green. */










/* --- Collapsible panel + file drop-zone (Build 164) --- */








/* The browser's default file input is a grey button with a filename beside it,
   which cannot be styled and does not belong next to the rest of the panel. */
.adrop {
  display: flex; align-items: center; gap: 12px; padding: 18px;
  border: 1.5px dashed var(--border-soft); border-radius: 12px;
  background: var(--input-bg); cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast);
}
@media (hover: hover) and (pointer: fine) { .adrop:hover { border-color: var(--green); background: #fff; } }
.adrop.has-file { border-style: solid; border-color: var(--sage); background: var(--success-bg); }
.adrop:focus-within { outline: 2px solid var(--rust); outline-offset: 2px; }
.adrop-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.adrop-ico { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: var(--r-ctrl); background: #fff; color: var(--green); }
.adrop-ico svg { width: 18px; height: 18px; }
.adrop-txt { font-size: 13px; color: var(--body-2); }






/* --- Inline icon, replacing colour emoji (Build 168) --- */
.ainline-ico { display: inline-grid; place-items: center; width: 15px; height: 15px; vertical-align: -3px; margin-right: 3px; }
.ainline-ico svg { width: 14px; height: 14px; }

/* --- Native date inputs -------------------------------------------------
   A date input cannot be fully restyled, but its calendar button and the
   dd/mm/yyyy text can be brought closer to the rest of the toolbar. */




/* An empty date reads as placeholder text rather than live content. */


/* --- Disclosure rows (Build 172) ---
   <summary> ships a native triangle whose glyph and position differ per
   browser. The admin draws its own chevron, so the native marker is removed
   and the custom one rotates on open. */





/* --- Donut + horizontal bars (Build 177) --- */





/* One class per status tone, reusing the palette the progress bars established. */






























/* --- Date presets beside the manual from/to fields (Build 180) --- */
.adates { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.adates-lbl { font-size: 12px; color: var(--muted); }
@media (max-width: 720px) {
  .adates { gap: 8px; }
  
}

/* Build 230 integration status: presence and environment at a glance, so the
   owner can confirm a pasted credential without reading a log. */
.integrations-panel { display: grid; gap: 18px; margin-bottom: 22px; }
.integration-group { border: 1px solid var(--border); border-radius: var(--r-card); padding: 16px 18px; }
.integration-title { font-weight: 600; margin-bottom: 10px; }
.integration-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; }
.integration-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.integration-dot.is-ok { background: var(--success); }
.integration-dot.is-off { background: var(--danger); }
.integration-label { min-width: 170px; }
.integration-detail { color: var(--body-2); }
.integration-hint { font-size: 13px; color: var(--body-2); margin: 12px 0 6px; }
.integration-code { display: block; word-break: break-all; font-size: 12px; padding: 10px 12px; border-radius: var(--r-ctrl); background: var(--bg-alt); }
.integration-result { margin-top: 12px; font-size: 13px; padding: 10px 12px; border-radius: var(--r-ctrl); background: var(--bg-alt); }
.integration-result.is-ok { color: var(--success); }
.integration-result.is-off { color: var(--danger); }
#integration-test-bog { margin-top: 10px; min-height: 44px; }
.capi-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.capi-actions .btn { min-height: 44px; }

/* Blog — storefront (build 274) */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 8px; }
.blog-card { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; text-decoration: none; color: inherit; transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); }
@media (hover: hover) and (pointer: fine) { .blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2-blog); } }
.blog-card-img { aspect-ratio: 16 / 10; background: var(--bg-alt); overflow: hidden; display: flex; align-items: center; justify-content: center; max-width: 100%; }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-img[data-empty] { background: var(--green); }
.blog-card-mark { font-family: var(--serif); font-weight: 700; letter-spacing: .15em; color: var(--bg); opacity: .85; font-size: 20px; }
.blog-card-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.blog-card-title { font-family: var(--serif); font-weight: 600; font-size: 19px; color: var(--green); margin: 0; line-height: 1.25; }
.blog-card-excerpt { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; flex: 1; }
.blog-card-date { color: var(--faint); font-size: 12.5px; margin-top: 2px; }
.blog-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 32px; }
.blog-pager-info { color: var(--muted); font-size: 14px; }
.blog-empty { padding: 40px; text-align: center; color: var(--muted); background: var(--bg-alt); border-radius: var(--r-card); }
.blog-article { max-width: 760px; }
.blog-article-title { margin-bottom: 8px; }
.blog-article-meta { color: var(--faint); font-size: 14px; margin-bottom: 20px; }
.blog-article-cover { border-radius: var(--r-card); overflow: hidden; margin-bottom: 24px; }
.blog-article-cover img { width: 100%; height: auto; display: block; }
.blog-article-body { display: flex; flex-direction: column; gap: 16px; font-size: 16px; line-height: 1.75; }
.blog-article-body a { color: var(--green); text-decoration: underline; }
.blog-article-foot { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border); }

/* Blog — admin (build 274) */
.blog-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.blog-table-wrap { overflow-x: auto; }
.blog-row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.blog-editor { display: flex; flex-direction: column; gap: 14px; }
.blog-body-input { font-family: inherit; line-height: 1.6; }
.blog-editor-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

/* Collections (build 276) */
.collection-intro { max-width: 70ch; }
.collection-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 14px; max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-ctrl); padding: 12px 14px; margin-top: 6px; background: var(--bg-alt); }
.collection-pick-item { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); cursor: pointer; }
.collection-pick-item input { flex: none; }

/* Bundle "what's inside" block on the product page (build 277) */
.bundle-includes { border: 1px solid var(--border); border-radius: var(--r-ctrl); padding: 14px 16px; margin: 18px 0; background: var(--bg-alt); }
.bundle-includes-label { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; font-weight: 600; }
.bundle-includes-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.bundle-includes-list a { color: var(--green); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .bundle-includes-list a:hover { text-decoration: underline; } }

/* Order fulfilment lines (admin order detail) — build 278: photo + SKU so
   staff can identify which physical product to ship, not just the name. */
.order-fulfil-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--bg-admin); }
.order-fulfil-thumb { width: 52px; height: 52px; flex: 0 0 52px; object-fit: cover; border-radius: 8px; background: var(--bg-admin); }
.order-fulfil-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.order-fulfil-name { font-weight: 600; }
.order-fulfil-meta { font-size: 12px; color: var(--body-3); font-variant-numeric: tabular-nums; }
.order-fulfil-total { white-space: nowrap; }

/* Saved address book — account panel + checkout picker (build 280) */
.acc-addr-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.acc-addr-form { display: flex; flex-direction: column; gap: 10px; }
.acc-addr-row { display: flex; gap: 12px; flex-wrap: wrap; }
.acc-addr-row > span { flex: 1 1 140px; display: flex; flex-direction: column; }
.acc-addr-check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); cursor: pointer; }
.acc-addr-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.acc-addr-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.acc-addr-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.acc-addr-body .pill { align-self: flex-start; }
.acc-addr-meta { font-size: 13px; color: var(--muted); }
.acc-addr-item-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.saved-address-picker { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.save-addr-check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); cursor: pointer; margin-top: 10px; }

/* Account hub redesign (docs/tasks/ACCOUNT_HUB_REDESIGN_FROM_MOCKUP.md, Phase A+B) - the header/quick-links/
   tab-strip/order-filter card system around the account page's existing panels (orders/addresses/designs). */
.acc-header-card { margin-bottom: 32px; }
/* docs/tasks/ACCOUNT_HUB_VISUAL_GAP_REVIEW9.md: .acc-header-card is a .card (padding+border, which
   blocks margin-collapse) - its first child's own margin-bottom:32px (csp-migrated.css) was visibly
   showing as empty space down to the card's own border whenever the profile-edit form isn't open
   (no sibling below to absorb it). Zeroed here since the card's own margin-bottom already spaces it
   from whatever comes next. */
.acc-header-card > .csp-i-d04cc531f72d { margin-bottom: 0; }
.acc-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.acc-name-row h2 { margin: 0; }
/* docs/tasks/CUSTOMER_PROFILE_SELF_EDIT.md: same small ghost-circle size/style as .btn-copy
   elsewhere in this file, under its own name since this opens the profile-edit form, not a copy action. */
.acc-profile-edit-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--body-3); cursor: pointer; flex-shrink: 0; }
@media (hover: hover) and (pointer: fine) { .acc-profile-edit-btn:hover { border-color: var(--green); color: var(--green); } }
/* docs/tasks/ACCOUNT_HEADER_REGRESSION_URGENT.md: rendered as a sibling of .csp-i-d04cc531f72d (the
   avatar/credit/logout row), never inside it - a variable-height form must never share an
   align-items:center flex row with the avatar (that's exactly what caused the "avatar floating" bug). */
.acc-profile-edit-wrap { border-top: 1px solid var(--border); margin-top: 20px; padding-top: 20px; }
.acc-profile-edit-form { max-width: 420px; }
.acc-tier-pill { background: var(--bg-alt); color: var(--green); }
.acc-contact-row { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.acc-contact-item { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.acc-contact-item svg { color: var(--muted); flex-shrink: 0; }
.acc-header-right { display: flex; align-items: flex-start; }
/* docs/tasks/ACCOUNT_HEADER_REGRESSION_URGENT.md: the separate bordered "banking widget" box
   (ACCOUNT_HUB_VISUAL_GAP_REVIEW2.md item 1's fix) didn't fit Stanley 1913's minimalist style after
   all - the owner's own, later call. Store credit is now one organic text row under the contact row,
   same column as the name/phone/email, no border/card of its own. */
.acc-credit-line { font-size: 14px; color: var(--muted); margin-top: 6px; }
.acc-credit-line strong { color: var(--green); font-weight: 700; }
.acc-credit-topup-link { background: none; border: none; padding: 0; color: var(--green); font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: underline; }
/* docs/tasks/ACCOUNT_HUB_VISUAL_GAP_REVIEW2.md item 4: every tab's bare H2 was missing the mockup's 1-line
   explanatory subtitle underneath it. */
.acc-panel-subtitle { font-size: 14px; color: var(--muted); margin: -10px 0 20px; }
.acc-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--bg); color: var(--green); font-size: 11px; font-weight: 700; }
.auth-tabs button.active .acc-tab-badge { background: rgba(255,255,255,.22); color: var(--bg); }
.acc-order-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
/* Owner's 4th mockup review: the order-card thumbnail (.csp-i-6b2eccc8a941) crops a tall bottle
   into a square with object-fit:cover. That base class is shared with cart-page.js/checkout.js/
   product.js (4 call sites), so fix it here, scoped to account.js's own wrapper marker
   (.acc-order-thumb, added alongside the shared .csp-i-87e011a604d4 sizing class), not globally. */
.acc-order-thumb .csp-i-6b2eccc8a941 { object-fit: contain; }
/* Owner's 6th mockup review: the shared .csp-i-87e011a604d4 wrapper's #F1EFE9 fill reads low-contrast
   behind a white product photo on a white card - scoped to .acc-order-thumb only, same reasoning as
   the object-fit fix above (cart-page.js/checkout.js keep the original background). */
.acc-order-thumb { background: #fff; border: 1px solid var(--border); }
.acc-order-filter-btn { border: 1px solid var(--border); background: #fff; color: var(--body-2); font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 999px; cursor: pointer; }
.acc-order-filter-btn.active { background: var(--green); border-color: var(--green); color: var(--bg); }
.acc-notif-item { display: flex; align-items: flex-start; gap: 14px; font-size: 14px; color: var(--body-2); }
.acc-notif-item.is-unread { border-left: 3px solid var(--green); }
.acc-notif-icon { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.acc-notif-icon-price { background: var(--danger-bg); color: var(--rust); }
.acc-notif-icon-order { background: var(--success-bg); color: var(--green); }
.acc-notif-icon-welcome { background: var(--bg-alt); color: var(--info); }
.acc-notif-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.acc-notif-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.acc-notif-title { color: var(--green); font-size: 15px; }
.acc-notif-desc { line-height: 1.5; }
.acc-notif-action { align-self: flex-start; background: none; border: none; padding: 0; font: inherit; font-weight: 700; font-size: 14px; color: var(--green); cursor: pointer; text-decoration: none; }
.acc-notif-pill-price { background: var(--success-bg); color: var(--green); align-self: flex-start; }
.acc-profile-notice { margin-bottom: 20px; }
.acc-topup-picker { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; max-width: 320px; text-align: left; }
.acc-topup-presets { display: flex; gap: 8px; flex-wrap: wrap; }
.acc-topup-preset { border: 1px solid var(--border); background: #fff; color: var(--body-2); }
.acc-topup-preset.active { background: var(--green); border-color: var(--green); color: var(--bg); }

/* Returns / RMA — account order card + admin panel (build 281) */
.order-return { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.order-return-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); }
.order-return-reason { font-size: 14px; color: var(--ink); }
.order-return-note { font-size: 13px; color: var(--muted); background: var(--bg-alt); border-radius: var(--r-ctrl); padding: 8px 10px; }
.order-return-form { display: flex; flex-direction: column; gap: 8px; }
.order-return-input { font-family: inherit; line-height: 1.5; }
.order-return-actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* Status pills, shared by the account card and the admin table. */
.order-return-requested { color: var(--warning); }
.order-return-approved { color: var(--green); }
.order-return-received { color: var(--success); }
.order-return-rejected { color: var(--danger); }
.order-return-closed { color: var(--muted); }
.returns-filter { margin-bottom: 12px; }
.returns-order-card { display: flex; flex-direction: column; gap: 6px; background: var(--bg-alt); border-radius: var(--r-ctrl); padding: 12px 14px; font-size: 14px; }
.returns-editor { display: flex; flex-direction: column; gap: 12px; }
.returns-reason { margin: 4px 0 0; line-height: 1.6; }

/* Related / cross-sell row on the product page (build 282) */
.related-section { margin: 40px auto 8px; }
.related-heading { font-family: var(--serif); font-size: 22px; color: var(--green); margin: 0 0 18px; }
.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px) { .related-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 480px) { .related-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* Back-in-stock signup — product page (build 284) */
.bis-box { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg-alt); }
.bis-title { font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.bis-sub { font-size: 14px; color: var(--muted); margin: 0 0 12px; }
.bis-form { display: flex; gap: 10px; flex-wrap: wrap; }
.bis-form .input { flex: 1 1 200px; }
.bis-msg { margin-top: 10px; font-size: 14px; color: var(--danger); }
.bis-msg.is-ok { color: var(--green); }
.bis-admin-hint { margin: 0 0 14px; max-width: 70ch; }

/* Footer newsletter signup (build 285) */
.news-signup { margin-top: 18px; }
.news-title { font-weight: 600; margin-bottom: 8px; color: var(--bg); }
.news-form { display: flex; gap: 8px; flex-wrap: wrap; max-width: 440px; }
.news-input { flex: 1 1 200px; }
/* Submit sits on the green footer, so a green btn-primary would vanish — use a
   cream fill with brand-green text for a legible, on-brand button. */
.news-submit { flex: 0 0 auto; background: var(--bg); color: var(--green); font-size: 15px; padding: 13px 24px; }
@media (hover: hover) and (pointer: fine) { .news-submit:hover { background: var(--bg-alt); color: var(--green); } }
.news-msg { margin-top: 8px; font-size: 13px; color: var(--rust-on-dark); }
.news-msg.is-ok { color: var(--bg); }
.news-fine { font-size: 12px; color: var(--footer-muted); margin: 8px 0 0; max-width: 440px; }
.news-fine a { color: inherit; text-decoration: underline; }

/* Wishlist share (build 286) */
.wish-share-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.wish-share-out { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wish-share-out .input { min-width: 240px; font-size: 13px; }
.wish-shared-note { margin-bottom: 20px; padding: 12px 14px; background: var(--bg-alt); border-radius: var(--r-ctrl); font-size: 14px; color: var(--muted); }
.wish-shared-note a { color: var(--green); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .wish-shared-note a:hover { text-decoration: underline; } }

/* Email campaigns admin (build 292) */
.campaign-progress { font-size: 14px; color: var(--ink); padding: 10px 12px; background: var(--bg-alt); border-radius: var(--r-ctrl); }
.campaign-test { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--bg-admin); }

/* Sales report — redesign (build 314), adapting the owner's "Coolgadget"
   design-system spec for /admin/reports: three tone-based surfaces with NO
   shadows (told apart by colour), serif headings + sans data, a pill toolbar,
   flat StatCards, a recessed BarChart panel and bordered DataTables. Values map
   to the storefront tokens — --bg-admin = surface-100 (page), --bg = surface-200
   (cards), --bg-alt = surface-300 (recessed panel), --green = ink/brand; the few
   spec-specific hues (a readable 3:1 border #7a7d70, subtle rule #ddd9d0, the
   four status tones) are literal here, per the spec's sampled values. CSP-safe:
   classes + SVG geometry only, no inline styles. */




































/* Language switcher — header (build 296) */
.lang-switch { display: inline-flex; gap: 2px; align-items: center; font-size: 12px; font-weight: 600; }
.lang-switch a { color: var(--muted); text-decoration: none; padding: 7px 8px; border-radius: 6px; line-height: 1; }
.lang-switch a.is-active { color: var(--ink); background: var(--bg-alt); }
@media (hover: hover) and (pointer: fine) { .lang-switch a:hover { color: var(--ink); } }

/* Translations admin (build 297) */
.tr-field { margin-bottom: 16px; }
.tr-source { font-size: 13px; color: var(--muted); margin-top: 4px; padding: 6px 8px; background: var(--bg-alt); border-radius: var(--r-ctrl); }


/* FAQ admin status pill (build 311) — CSP-safe class, no inline style. */


/* build407 — self-service return: item picker and window notice */
.order-return-fieldset { border: 0; margin: 0 0 12px; padding: 0; }
.order-return-fieldset legend { padding: 0; margin-bottom: 8px; }
.order-return-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.order-return-item:last-child { border-bottom: 0; }
.order-return-item input[type="checkbox"] { width: 20px; height: 20px; flex: none; }
.order-return-item-name { flex: 1 1 auto; min-width: 0; }
.order-return-qty { width: 72px; flex: none; text-align: center; }
.order-return-deadline, .order-return--closed { font-size: 0.875rem; color: var(--muted); margin: 0 0 10px; }
.order-return-items { margin: 0 0 8px; padding-left: 18px; font-size: 0.9375rem; }
.order-return-items--all { padding-left: 0; color: var(--muted); }
@media (max-width: 560px) {
  .order-return-item { flex-wrap: wrap; }
  .order-return-qty { width: 100%; text-align: left; }
}

/* build409 — reports catalog: tabs, pagination, exclusions note */
.report-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.rep-btn--tab[aria-selected="true"] { background: var(--ink); color: #fff; }
.report-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.report-pager-at { font-size: 0.875rem; color: var(--muted); }
.report-pager button[disabled] { opacity: 0.45; cursor: not-allowed; }
.report-exclusions { margin-top: 20px; font-size: 0.875rem; color: var(--muted); }
.report-exclusions summary { cursor: pointer; padding: 6px 0; }
.report-exclusions ul { margin: 6px 0 0; padding-left: 20px; }
.report-exclusions li { margin-bottom: 4px; }
.report-muted { color: var(--muted); }
@media (max-width: 560px) {
  .report-pager { justify-content: center; }
  .report-tabs .rep-btn--tab { flex: 1 1 auto; }
}

/* build410 — price-drop alert opt-in (collapsed by default: it is an offer,
   not a demand, and must not compete with the add-to-cart button) */
.pw-box { margin: 20px 0 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-alt); }
.pw-summary { cursor: pointer; font-weight: 600; list-style: none; }
.pw-summary::-webkit-details-marker { display: none; }
.pw-summary::after { content: '+'; float: right; font-weight: 400; }
.pw-box[open] .pw-summary::after { content: '−'; }
.pw-sub { margin: 10px 0; font-size: 0.875rem; color: var(--muted); }
.pw-form { display: flex; gap: 8px; flex-wrap: wrap; }
.pw-form .input { flex: 1 1 200px; min-width: 0; }
.pw-form .btn { flex: 0 0 auto; min-height: 44px; }
.pw-msg { margin-top: 10px; font-size: 0.875rem; }
.pw-msg.is-ok { color: var(--green); }
@media (max-width: 560px) { .pw-form .btn { flex: 1 1 100%; } }

/* build758 — docs/tasks/GENAI_PATTERN2_CAR_BUYER_AGENT_PROTOTYPE.md: the chat-style
   product-finder widget (catalog.php, assets/js/product-finder.js). Reuses .card's and
   .consent-banner's own tokens/conventions rather than introducing new ones. */
.product-finder { margin: 20px 0; }
.product-finder-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--r-pill); border: 1px solid var(--border); background: #fff; color: var(--accent); font-weight: 600; font-size: 14px; cursor: pointer; }
.product-finder-toggle:hover { border-color: var(--accent); }
.product-finder-toggle .i { width: 18px; height: 18px; flex-shrink: 0; }
.product-finder-panel { margin-top: 10px; border: 1px solid var(--border); border-radius: var(--r-card); background: #fff; box-shadow: var(--shadow-1-card); padding: 16px; }
.product-finder-log { display: flex; flex-direction: column; gap: 10px; max-height: 360px; overflow-y: auto; margin-bottom: 12px; }
.product-finder-msg { max-width: 86%; padding: 10px 14px; border-radius: var(--r-card); background: var(--bg-admin); font-size: 14px; line-height: 1.5; }
.product-finder-msg--user { margin-left: auto; background: var(--surface-sunken); }
.product-finder-msg a { color: var(--accent); text-decoration: underline; }
.product-finder-typing { color: var(--muted); letter-spacing: 2px; }
.product-finder-options { display: flex; flex-wrap: wrap; gap: 8px; }
.product-finder-options .btn { min-height: 40px; }
.product-finder-form { display: flex; gap: 8px; flex-wrap: wrap; }
.product-finder-form .input { flex: 1 1 200px; min-width: 0; }
.product-finder-form .btn { flex: 0 0 auto; min-height: 44px; }
.product-finder-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.product-finder-result { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border: 1px solid var(--border); border-radius: var(--r-card); background: #fff; text-align: center; text-decoration: none; color: inherit; }
.product-finder-result:hover { border-color: var(--accent-hover); }
.product-finder-result img { border-radius: 8px; object-fit: cover; }
.product-finder-result-name { font-size: 13px; font-weight: 600; line-height: 1.3; }
.product-finder-result-price { font-size: 13px; color: var(--muted); }
@media (max-width: 640px) {
  .product-finder-panel { padding: 12px; }
  .product-finder-msg { max-width: 92%; }
}