/* 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: var(--rust);
  --info: var(--muted);
  --dark: #17201B;
  --serif: 'Noto Serif Georgian', serif;
  --sans: 'Noto Sans Georgian', sans-serif;
  --mono: 'Space Mono', monospace;
}

* { 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: 1000; 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); }
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: 10;
  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: 0 0 0 3px rgba(31,58,46,.15); }
.header-search input {
  border: none; background: transparent; font-size: 14px; color: #17201B;
  outline: none; width: 100%; align-self: stretch; font-family: var(--sans);
}
.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;
}
.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: 0 12px 24px rgba(23, 32, 27, .08);
  }
  /* 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 .18s 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 .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 .2s, box-shadow .2s, background .2s, border .15s; }
.btn-primary { background: var(--green); color: var(--bg); font-size: 16px; padding: 17px 30px; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(22, 48, 43, .25); color: var(--bg); }
.btn-rust { background: var(--rust); color: #fff; font-size: 16px; padding: 17px 40px; }
.btn-rust:hover { transform: translateY(-2px); color: #fff; }
.btn-outline { border: 1px solid var(--border); background: transparent; color: var(--green); font-size: 15px; font-weight: 600; padding: 14px 32px; }
.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 .2s; flex-shrink: 0;
}
.icon-btn:hover { background: var(--rust); color: var(--bg); }

/* ---------- Cards / tags ---------- */
.card { background: #fff; border-radius: 16px; border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(20,25,20,.04); }
.card-pad { padding: clamp(20px, 3vw, 32px); }
.hover-lift { transition: transform .2s, box-shadow .2s; }
.hover-lift:hover { transform: translateY(-5px); box-shadow: 0 18px 36px rgba(22, 48, 43, .14); }

.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); border-radius: var(--r-ctrl);
  font-size: 14px; 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(--rust); background: #FDF4F0;
}
.input[aria-invalid="true"]:focus { outline-color: var(--rust); }
.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); 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: 0 1px 2px rgba(20,25,20,.04); 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; }
.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: 1; }
.card-tag-right { position: absolute; top: 16px; right: 16px; z-index: 1; 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 .15s, background .15s;
}
.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: 20;
  background: var(--green); color: var(--bg); border-radius: var(--r-pill); padding: 14px 24px;
  box-shadow: 0 16px 40px rgba(22, 48, 43, .3);
  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: 12px; 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; }
.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; }

/* ---------- Headings ---------- */
.h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 3.4vw, 42px); color: var(--green); margin: 0; letter-spacing: -0.02em; }
.h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(26px, 2.6vw, 34px); color: var(--green); margin: 0; letter-spacing: -0.02em; }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* ---------- Color swatches ---------- */
.swatch { width: 36px; height: 36px; border-radius: 50%; cursor: pointer; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--border); 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 ---------- */
body.admin { background: var(--bg-admin); }
.admin-shell { display: flex; min-height: 100vh; }
.admin-compact-header, .admin-side-close, .admin-nav-backdrop { display: none; }
.admin-side { width: 236px; flex-shrink: 0; background: #16241C; padding: 22px 16px; display: flex; flex-direction: column; }
.admin-side-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-side .alogo { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 700; font-size: 17px; color: #fff; margin-bottom: 0; padding: 0 8px; }
.admin-side .alogo span { color: #8FA896; font-weight: 500; font-size: 13px; }
.alogo-mark {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 8px; background: #B4552D;
  color: #fff !important; font-size: 16px !important; font-weight: 700 !important;
}
.admin-side-search {
  display: flex; align-items: center; gap: 8px; margin: 18px 0 6px;
  padding: 10px 12px; border-radius: 9px; background: #20362A; color: #7E9186;
}
.admin-side-search:focus-within {
  outline: 2px solid var(--rust-on-dark); outline-offset: 2px;
}
.admin-side-search svg { width: 15px; height: 15px; flex-shrink: 0; }
.admin-side-search input {
  width: 100%; border: none; background: none; outline: none;
  color: #E9E6DE; font: 13px var(--sans);
}
.admin-side-search input::placeholder { color: #7E9186; }
.admin-side nav { display: grid; grid-template-columns: 1fr; gap: 4px; }
.admin-nav-group {
  margin: 16px 12px 6px; font-family: var(--mono, 'Space Mono', monospace); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: #5E6D62;
}
.admin-nav-group:first-child { margin-top: 8px; }
.admin-nav-group[hidden] { display: none; }
.admin-side-user { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding: 10px 12px; border-radius: 12px; background: #20362A; }
.admin-side-avatar {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: var(--r-pill); background: #B4552D;
  color: #fff; font-size: 14px; font-weight: 700;
}
.admin-side-who { display: grid; min-width: 0; }
.admin-side-who strong { color: #fff; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.admin-side-who small { color: #8FA896; font-size: 11px; text-transform: capitalize; }
.admin-side-links { display: flex; flex-direction: column; gap: 12px; padding: 0 8px; }
.admin-tab { min-height: 44px; display: flex; align-items: center; gap: 11px; text-align: left; text-decoration: none; background: transparent; color: #AEB6AC; border: none; border-radius: 9px; padding: 10px 12px; font-family: var(--sans); font-size: 14px; font-weight: 500; line-height: 1.35; cursor: pointer; transition: background-color .16s ease, color .16s ease; }
.admin-tab[hidden] { display: none; }
/* 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. */
body.admin {
  --rust: #B4552D;
  --rust-hover: #96431F;
  --muted: #6B7469;
  --eyebrow: #8A8578;
  --hairline: #E1DCD1;
}
/* 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. */
body.admin .chip--bad { color: #8D3821; }

/* Mono eyebrow labels — the one role the comp gives #8A8578. */
body.admin .mini-lbl {
  font-family: var(--mono, 'Space Mono', monospace); font-size: 10px; font-weight: 400;
  letter-spacing: .14em; color: var(--eyebrow);
}

/* 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. */
.order-detail-grid > div:nth-child(1) { order: 2; }
.order-detail-grid > div:nth-child(2) { order: 1; }

/* Status filter chips — the comp's row of pills above a list. */
.ad-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.ad-chip {
  min-height: 38px; padding: 9px 16px; border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid #DDD8CC; background: #fff; color: var(--body-3);
  font: 500 13px/1 var(--sans); transition: background .15s, border-color .15s, color .15s;
}
.ad-chip:hover { border-color: var(--green); color: var(--green); }
.ad-chip.is-on { background: var(--green); border-color: var(--green); color: #fff; }
.ad-chip:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* Order timeline marker */
.tl-mark {
  position: absolute; left: -10px; top: 12px; display: flex; align-items: center;
  justify-content: center; width: 20px; height: 20px; border-radius: 50%;
  background: #E7E3DA; color: var(--muted);
}
.tl-mark.is-done { background: var(--green); color: #fff; }
.tl-mark svg { width: 12px; height: 12px; }

/* ---------- Notifications (გაგზავნის ცენტრი) ---------- */
.ntf-alerts { padding: 20px; margin-bottom: 18px; border-color: #E4B5A5; }
.ntf-alerts h2 { margin: 0 0 12px; font-family: var(--serif); font-size: 16px; color: #8D3821; }
.ntf-alert { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--bg-admin); }
.ntf-alert:last-child { border-bottom: none; }
.ntf-alert strong { color: var(--green); font-size: 14px; }
.ntf-alert span { color: var(--muted); font-size: 12px; }

.ntf-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ntf-search { display: flex; align-items: center; gap: 8px; min-width: 240px; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--r-pill); background: #fff; }
.ntf-search svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted); }
.ntf-search input { border: none; background: none; outline: none; width: 100%; font: 13px var(--sans); color: var(--ink); padding: 0; }

.ntf-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--r-card); background: #fff; overflow: hidden; }
.ntf-item + .ntf-item { border-top: 1px solid var(--border); }
.ntf-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto auto; align-items: center; gap: 12px; padding: 12px 16px; }
.ntf-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; }
.ntf-icon svg { width: 17px; height: 17px; }
.ntf-icon--ok { background: var(--success-bg); color: var(--sage); }
.ntf-icon--bad { background: var(--danger-bg); color: var(--rust); }
.ntf-icon--neutral { background: var(--input-bg); color: var(--muted); }
.ntf-body { min-width: 0; display: grid; gap: 3px; }
.ntf-to { display: flex; align-items: center; gap: 8px; color: var(--green); font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
/* An order with no address is a state worth reading as such, not a dash. */
.ntf-nocontact { color: var(--muted); font-style: italic; }
.ntf-channel { flex-shrink: 0; padding: 2px 8px; border-radius: var(--r-pill); background: var(--input-bg); color: var(--muted); font-size: 11px; font-weight: 500; }
.ntf-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--muted); font-size: 12px; }
.ntf-meta code { font: 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--body-3); }
.ntf-err { color: var(--rust); }
.ntf-time { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ntf-history { grid-column: 1 / -1; padding: 4px 16px 12px 62px; }
.ntf-history summary { color: var(--rust); font-size: 13px; cursor: pointer; }
.ntf-attempt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; font-size: 12px; color: var(--muted); }
@media (max-width: 768px) {
  .ntf-row { grid-template-columns: 30px minmax(0, 1fr) auto; row-gap: 8px; }
  .ntf-time { grid-column: 2 / -1; }
  .ntf-history { padding-left: 16px; }
}

/* ---------- Admin dashboard ---------- */
.dash-greet { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.dash-greet h2 { margin: 0 0 4px; font-family: var(--serif); font-weight: 600; font-size: 26px; color: var(--green); }
.dash-greet p { margin: 0; font-size: 13px; color: var(--muted); }

.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.kpi-card { padding: 20px; border: 1px solid #E7E3DA; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(20,25,20,.04); }
.kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.kpi-head .lbl { color: var(--muted); font-size: 12px; }
.kpi-card .val { color: var(--green); font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi-card .val.is-warn { color: var(--rust); }
.kpi-trend { padding: 3px 8px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; white-space: nowrap; }
.kpi-trend--up { background: var(--success-bg); color: var(--success); }
.kpi-trend--down { background: var(--danger-bg); color: var(--danger); }
.kpi-trend--flat { background: var(--input-bg); color: var(--info); }

.dash-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; }
.dash-panel { padding: 22px; border: 1px solid #E7E3DA; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(20,25,20,.04); }
.dash-panel--wide { grid-column: 1 / -1; }
.dash-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.dash-panel-head h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--green); }
.dash-panel-head strong { color: var(--green); font-size: 15px; font-variant-numeric: tabular-nums; }
.dash-panel-head a { font-size: 13px; color: var(--rust); text-decoration: none; }

.dash-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; align-items: end; height: 160px; }
.dash-bar { display: grid; grid-template-rows: 1fr auto; gap: 8px; height: 100%; }
.dash-bar-track { display: flex; align-items: flex-end; height: 100%; }
.dash-bar-fill { width: 100%; border-radius: 6px 6px 2px 2px; background: var(--green); }
.dash-bar span { color: var(--muted); font-size: 11px; text-align: center; }
.admin-vertical-bar { display: block; width: 100%; height: 100%; min-height: 2px; overflow: hidden; }
.admin-vertical-bar--dashboard { flex: 1 1 auto; height: 136px; max-height: 136px; }
.admin-vertical-bar rect { fill: var(--green); }
.admin-status-progress { display: block; width: 100%; height: 8px; overflow: hidden; border: 0; border-radius: 100px; background: var(--bg-admin); appearance: none; }
.admin-status-progress::-webkit-progress-bar { border-radius: 100px; background: var(--bg-admin); }
.admin-status-progress::-webkit-progress-value { border-radius: 100px; background: var(--green); }
.admin-status-progress::-moz-progress-bar { border-radius: 100px; background: var(--green); }
.admin-status-progress--received::-webkit-progress-value { background: var(--rust); }
.admin-status-progress--received::-moz-progress-bar { background: var(--rust); }
.admin-status-progress--processing::-webkit-progress-value { background: #785C11; }
.admin-status-progress--processing::-moz-progress-bar { background: #785C11; }
.admin-status-progress--shipped::-webkit-progress-value { background: var(--sage); }
.admin-status-progress--shipped::-moz-progress-bar { background: var(--sage); }
.admin-status-progress--completed::-webkit-progress-value { background: var(--green); }
.admin-status-progress--completed::-moz-progress-bar { background: var(--green); }

.dash-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dash-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.dash-list li:last-child { border-bottom: none; }
.dash-list-name { color: var(--body-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dash-qty { color: var(--green); font-weight: 600; white-space: nowrap; }
.dash-qty.is-out { color: var(--rust); }
.dash-empty { margin: 0; padding: 18px 0; color: var(--faint); font-size: 13px; }

.dash-list--orders li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; }
.dash-order-id { color: var(--muted); font: 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.dash-who { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--body-3); }
.dash-who > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-avatar { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--input-bg); border: 1px solid var(--border); color: var(--green); font-size: 12px; font-weight: 700; }
.dash-total { color: var(--green); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.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); }
.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); }
.admin-import-apply { margin-top: 12px; color: #fff; background: var(--green); }
.publish-state { color: var(--green); }
.publish-state--published { background: var(--success-bg); }
.publish-state--draft { background: var(--bg-admin); }
.wizard-step { white-space: nowrap; color: var(--green); background: var(--bg-admin); }
.wizard-step.is-active { color: #fff; background: var(--green); }
.customer-segment { font-size: 11px; }
.customer-segment--vip { color: #fff; background: var(--rust); }
.customer-segment--new { color: var(--green); background: var(--success-bg); }
.customer-segment--active { color: var(--body-3); background: #E8E1D4; }
.customer-segment--empty { color: var(--muted); background: var(--bg-admin); }
.customer-status-action { margin-top: 10px; }
.customer-status-action--unblock { color: var(--green); background: var(--success-bg); }
.customer-status-action--block { color: var(--rust); background: var(--danger-bg); }
.coupon-state--active { color: var(--green); background: var(--success-bg); }
.coupon-state--inactive { color: var(--rust); background: var(--danger-bg); }
.admin-setting-toggle { position: relative; width: 48px; height: 26px; padding: 0; border: 0; border-radius: 13px; background: var(--border); cursor: pointer; transition: background .2s; }
.admin-setting-toggle.is-on { background: var(--green); }
.admin-setting-toggle > span { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.15); transition: transform .2s; }
.admin-setting-toggle.is-on > span { transform: translateX(22px); }
.admin-2fa-state { font-size: 11px; }
.admin-2fa-state--enabled { color: var(--green); background: var(--success-bg); }
.admin-2fa-state--disabled { color: var(--muted); 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; }
.admin-message--success { color: var(--green); background: var(--success-bg); }
.admin-message--error { color: var(--rust); background: var(--danger-bg); }
.custom-design-admin-preview { position: relative; width: 100%; overflow: hidden; border: 1px dashed var(--rust); border-radius: var(--r-card); background: #F4EFE4; }
.custom-design-admin-preview > svg { display: block; width: 100%; height: auto; }
.custom-design-admin-preview image { image-rendering: auto; }
.custom-design-admin-safe-border { fill: none; stroke: color-mix(in srgb, var(--rust) 55%, transparent); stroke-width: .35; stroke-dasharray: 1.5 1.5; vector-effect: non-scaling-stroke; pointer-events: none; }

@media (max-width: 1024px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .dash-list--orders li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .dash-order-id { grid-column: 1 / -1; }
}

.admin-route-error { padding: 64px 24px; text-align: center; }
.admin-route-error h2 { margin: 0 0 10px; color: var(--green); font-family: var(--serif); }
.admin-route-error p { margin: 0 0 22px; color: var(--muted); }
.admin-route-skeleton { display: grid; gap: 14px; min-height: 280px; }
.admin-skeleton-toolbar,
.admin-skeleton-row { position: relative; overflow: hidden; border: 1px solid rgba(22, 48, 43, .06); background: #fff; box-shadow: 0 4px 16px rgba(22, 48, 43, .04); }
.admin-skeleton-toolbar { min-height: 112px; border-radius: 18px; }
.admin-skeleton-row { min-height: 118px; border-radius: 16px; }
.admin-route-skeleton--dashboard { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.admin-route-skeleton--dashboard .admin-skeleton-toolbar { grid-column: 1 / -1; }
.admin-route-skeleton--dashboard .admin-skeleton-row { min-height: 180px; }
.admin-skeleton-toolbar::after,
.admin-skeleton-row::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(248, 244, 234, .75), transparent); animation: admin-skeleton-sweep 1.25s ease-in-out infinite; }
@keyframes admin-skeleton-sweep { to { transform: translateX(100%); } }
@media (max-width: 768px) {
  .admin-route-skeleton--dashboard { grid-template-columns: 1fr; }
  .admin-route-skeleton--dashboard .admin-skeleton-toolbar { grid-column: auto; }
  .admin-skeleton-toolbar { min-height: 96px; }
  .admin-skeleton-row,
  .admin-route-skeleton--dashboard .admin-skeleton-row { min-height: 128px; }
}
@media (prefers-reduced-motion: reduce) {
  .admin-skeleton-toolbar::after,
  .admin-skeleton-row::after { animation: none; }
}
.admin-upload-progress { margin-top: 12px; display: grid; gap: 7px; font-size: 13px; color: var(--muted); }
.admin-upload-progress progress { width: 100%; accent-color: var(--green); }
.admin-upload-items { display: grid; gap: 8px; margin-top: 6px; }
.admin-upload-item { display: grid; grid-template-columns: 48px minmax(0,1fr) minmax(90px,180px); align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.admin-upload-item img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; }
.admin-upload-item strong, .admin-upload-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-upload-item small { margin-top: 3px; color: var(--muted); }
.admin-upload-item.failed { border-color: rgba(193,80,46,.35); }
.admin-upload-item.failed small { color: var(--rust); }
.admin-upload-item.success progress { accent-color: #3f765f; }
.admin-upload-retry { display: grid; gap: 10px; margin: 12px 0; padding: 12px; border: 1px solid rgba(193,80,46,.35); border-radius: var(--r-card); background: #fff7f2; }
.admin-upload-retry > .btn { justify-self: start; }
.admin-drop-zone { border: 1px dashed var(--border); border-radius: var(--r-card); padding: 14px; transition: border-color .15s ease, background-color .15s ease; }
.admin-drop-zone.dragover { border-color: var(--rust); background: var(--bg-alt); }
@media (max-width: 640px) { .admin-upload-item { grid-template-columns: 48px minmax(0,1fr); } .admin-upload-item progress { grid-column: 1 / -1; } }
.admin-seo-panel { display: grid; gap: 14px; }
.admin-seo-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.admin-field small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }
.admin-checkbox-field { display: flex; align-items: center; gap: 9px; min-height: 48px; padding-top: 18px; }
.seo-preview-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(240px,.75fr); gap: 14px; }
.seo-snippet { min-width: 0; padding: 18px; border: 1px solid var(--border); border-radius: var(--r-card); background: #fff; font-family: Arial,sans-serif; }
.seo-snippet small { display: block; margin-bottom: 12px; color: var(--muted); }
.seo-snippet a { display: block; overflow: hidden; color: #1a0dab; font-size: 20px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.seo-snippet span { display: block; margin: 5px 0; overflow: hidden; color: #188038; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.seo-snippet p { display: -webkit-box; overflow: hidden; margin: 0; color: #4d5156; font-size: 13px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.seo-snippet.mobile { max-width: 390px; }
.seo-checklist { display: flex; flex-wrap: wrap; gap: 8px; }
.seo-checklist span { padding: 7px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; }
.seo-checklist .ready { background: var(--success-bg); color: var(--green); }
.seo-checklist .warning { background: #fff3df; color: #8a5a12; }
@media (max-width: 768px) { .admin-seo-fields,.seo-preview-grid { grid-template-columns: 1fr; } }
.product-import-summary { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; padding: 12px; border-radius: 12px; background: var(--bg-alt); }
.product-import-summary span { padding: 5px 9px; border-radius: var(--r-pill); font-size: 12px; }
.product-import-summary .ready { background: var(--success-bg); color: var(--green); }
.product-import-summary .error { background: #fbefea; color: var(--rust); }
.product-import-summary .warning { background: #fff3df; color: #8a5a12; }
.product-import-results { display: grid; gap: 8px; max-height: 360px; overflow: auto; margin-top: 12px; }
.product-import-results > div { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-ctrl); background: #fff; }
.product-import-results span,.product-import-results small { font-size: 12px; color: var(--muted); }
.product-import-results small.error { color: var(--rust); }
.product-import-results small.warning { color: #8a5a12; }
.admin-tab svg { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.admin-tab:hover { background: rgba(248, 244, 234, .07); color: #fff; }
.admin-tab.active { background: #294A38; color: #fff; font-weight: 600; }
.admin-tab:focus-visible { outline-color: var(--rust); outline-offset: 2px; }
.admin-side-footer { margin-top: 40px; padding: 0 8px; display: flex; flex-direction: column; gap: 12px; }
.admin-side-footer a, .admin-side-footer button { color: #9BA79E; font-family: var(--sans); font-size: 13px; line-height: 1.4; text-decoration: none; }
.admin-side-footer a:hover, .admin-side-footer button:hover { color: var(--bg); }
.admin-side-footer button { background: none; border: none; cursor: pointer; text-align: left; padding: 0; }
.admin-main { flex: 1; min-width: 0; padding: 40px 48px; }
.stat-card { background: #fff; border-radius: 16px; border: 1px solid var(--border); padding: 26px; box-shadow: 0 1px 2px rgba(20,25,20,.04); }
.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); }
.admin-card { background: #fff; border-radius: 16px; box-shadow: 0 4px 16px rgba(22, 48, 43, .06); }
.status-select { padding: 9px 14px; border-radius: 100px; border: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--green); background: var(--input-bg); cursor: pointer; }
/* 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. */
.status-select--todo { color: #7A4A12; background: var(--warning-bg); border-color: #E0CFA8; }
.status-select--doing { color: var(--muted); background: var(--input-bg); border-color: var(--border); }
.status-select--moving { color: var(--green); background: #E7EFE7; border-color: #C6D8C6; }
.status-select--done { color: #14301F; background: var(--success-bg); border-color: #BBD4BB; }
.status-select--alert { color: var(--rust); background: var(--danger-bg); border-color: #E8C9B6; }
.status-select.payment-state--paid { color: #14301F; background: var(--success-bg); border-color: #BBD4BB; }
.status-select.payment-state--pending { color: #7A4A12; background: var(--warning-bg); border-color: #E0CFA8; }
.admin-input { padding: 13px; border: 1px solid var(--border); border-radius: 12px; font-size: 14px; background: var(--input-bg); width: 100%; }
.admin-input-white { background: #fff; }
.admin-inline-error { margin-top: 10px; padding: 10px 12px; border-radius: var(--r-ctrl); background: var(--danger-bg); color: #9A3F25; font-size: 13px; }
#login-error { color: #9A3F25 !important; }
.admin-toast-region { position: fixed; z-index: 1200; right: 20px; bottom: 20px; display: grid; gap: 8px; width: min(360px, calc(100vw - 32px)); pointer-events: none; }
.admin-toast { padding: 13px 16px; border-radius: 12px; color: #fff; background: var(--green); box-shadow: 0 12px 32px rgba(22,48,43,.22); font-size: 14px; }
.admin-toast.error { background: var(--rust); }
.admin-confirm { width: min(430px, calc(100vw - 32px)); border: 0; border-radius: 18px; padding: 0; color: var(--green); box-shadow: 0 24px 70px rgba(22,48,43,.25); }
.admin-confirm::backdrop { background: rgba(8,25,22,.58); }
.admin-confirm form { padding: 28px; }
.admin-confirm h2 { margin: 0 0 10px; font-family: var(--serif); font-size: 22px; }
.admin-confirm p { color: var(--muted); line-height: 1.6; }
.admin-confirm form > div { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.mini-lbl { font-size: 12px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.admin-main { overflow-anchor: none; }
.order-detail-panel { scroll-margin-top: 24px; }
.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; }
.admin-products-list { display: grid; gap: 14px; }
.admin-product-card { overflow: hidden; }
/* რაოდენობა 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. */
.admin-table { width: 100%; }

/* 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. */
.order-filter-grid > label { margin-bottom: 0; }
.admin-table td .aempty { margin-inline: auto; }

.admin-product-grid { display: grid; grid-template-columns: 32px minmax(200px, 1fr) 65px 62px 90px 132px 168px 140px; gap: 10px; align-items: center; }
/* 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. */
.admin-product-row > *:not(:nth-child(-n+2)) { display: flex; align-items: center; justify-content: center; }
.admin-product-header { padding: 0 24px; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.admin-product-header > span:not(:nth-child(-n+2)) { text-align: center; }
.admin-product-row { min-height: 96px; padding: 18px 24px; }
.admin-product-main { min-width: 0; }
.admin-product-select { display: flex; align-items: center; justify-content: center; }
.admin-product-select input, .admin-product-header input { width: 18px; height: 18px; accent-color: var(--green); }
.admin-product-main-content { min-width: 0; display: flex; align-items: center; gap: 13px; }
.admin-product-main img { width: 56px; height: 56px; flex: 0 0 56px; object-fit: cover; border-radius: 12px; background: var(--bg-alt); }
.admin-product-name { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--green); font-size: 14px; font-weight: 700; line-height: 1.35; }
.admin-product-category { margin-top: 4px; color: var(--faint); font-size: 12px; }
.admin-readiness-badge { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 4px 8px; border: 1px solid transparent; border-radius: 100px; background: transparent; color: var(--green); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.admin-readiness-badge:hover, .admin-readiness-badge:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.admin-readiness-badge.ready { color: #2F684F; background: var(--success-bg); }
.admin-readiness-badge.warning { color: #755D16; background: #FFF5D5; border-color: #E4D5A9; }
.admin-readiness-badge.error { color: #9A3F25; background: var(--danger-bg); border-color: #E9BBAA; }
.admin-readiness-disclosure { padding: 18px 24px; border-top: 1px solid var(--border); background: #FAF9F6; }
.admin-readiness-disclosure > div:first-child { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 12px; color: var(--green); }
.admin-readiness-disclosure > div:first-child span { color: var(--muted); font-size: 12px; }
.admin-readiness-actions { display: grid; gap: 8px; }
.admin-readiness-actions button { width: 100%; display: grid; grid-template-columns: minmax(140px, .5fr) minmax(220px, 1fr) auto; gap: 12px; align-items: center; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--r-ctrl); background: #fff; color: var(--green); text-align: left; cursor: pointer; }
.admin-readiness-actions button:hover, .admin-readiness-actions button:focus-visible { border-color: var(--green); outline: 2px solid rgba(22,48,43,.18); outline-offset: 1px; }
.admin-readiness-actions button span { color: var(--muted); font-size: 12px; line-height: 1.45; }
.admin-media-empty { display: flex; align-items: center; gap: 16px; padding: 18px; border: 1px dashed var(--border); border-radius: var(--r-card); background: #fff; color: var(--muted); }
.admin-media-empty img { width: 92px; height: 92px; border-radius: 12px; object-fit: contain; }
.admin-media-empty p { margin: 0; line-height: 1.55; }
.admin-invite-grid, .admin-account-grid { min-width: 0; }
.admin-invite-grid > *, .admin-account-grid > * { min-width: 0; }
.admin-product-price { color: var(--green); font-family: var(--serif); font-size: 15px; font-weight: 700; text-align: right; white-space: nowrap; }
.admin-product-photo-count { color: var(--faint); font-size: 12px; text-align: center; white-space: nowrap; }
.admin-product-row > [data-label]:not(.admin-product-main) { display: flex; align-items: center; justify-content: center; min-width: 0; }
.admin-stock-badge { display: inline-flex; justify-content: center; min-width: 86px; padding: 7px 10px; border-radius: 100px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.admin-stock-badge.in-stock { color: var(--green); background: var(--success-bg); }
.admin-stock-badge.out-of-stock { color: var(--rust); background: var(--danger-bg); }
.admin-stock-stepper { display: grid; grid-template-columns: 44px 40px 44px; align-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 100px; background: #fff; }
.admin-stock-stepper button { width: 44px; height: 44px; border: 0; background: #fff; color: var(--green); cursor: pointer; font-size: 16px; }
.admin-stock-stepper button:hover { background: var(--input-bg); }
.admin-stock-stepper div { text-align: center; color: var(--green); font-size: 13px; font-weight: 700; }
.admin-product-action { width: 100%; padding-inline: 10px; white-space: nowrap; }
.admin-product-row > [data-label="გამოქვეყნება"] { padding-inline: 3px; }
.product-readiness-list { display: grid; gap: 8px; }
.product-readiness-item { width: 100%; display: grid; grid-template-columns: 24px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: #fff; color: var(--green); text-align: left; cursor: pointer; }
.product-readiness-item small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.product-readiness-item > span:last-child { color: var(--faint); font-size: 11px; }
.product-readiness-item.error { border-color: #E9BBAA; background: var(--danger-bg); color: var(--rust); }
.product-readiness-item.warning { border-color: #E4D5A9; background: #FFF9E8; }
.product-readiness-item.ready > span:first-child { color: #3E755E; }
/* ---------- Security log ---------- */
.slog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; margin-bottom: 18px; }
.slog-head h2 { margin: 4px 0 6px; color: var(--green); font-family: var(--serif); font-size: 22px; }
.slog-head p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; max-width: 52ch; }
.slog-summary { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }
.slog-summary > div { min-width: 92px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.slog-summary dt { margin: 0 0 2px; color: var(--faint); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.slog-summary dd { margin: 0; color: var(--green); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.slog-summary .is-danger dd { color: var(--rust); }
.slog-summary-last dd { font-size: 12px; font-weight: 500; color: var(--body-3); }

.slog-quick { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.slog-chip {
  min-height: 38px; padding: 8px 16px; border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid var(--border); background: #fff; color: var(--body-3);
  font: 500 13px/1 var(--sans); transition: background .15s, border-color .15s, color .15s;
}
.slog-chip:hover { border-color: var(--green); color: var(--green); }
.slog-chip.is-on { background: var(--green); border-color: var(--green); color: var(--bg); }
.slog-chip--ghost { margin-left: auto; }

.slog-feed { display: grid; gap: 18px; }
.slog-day-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0 0 8px; padding: 0 4px; color: var(--green); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}
.slog-day-head small { color: var(--faint); font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.slog-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--r-card); background: #fff; overflow: hidden; }
.slog-item + .slog-item { border-top: 1px solid var(--border); }

.slog-row {
  width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 20px;
  align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px;
  border: none; background: none; text-align: left; font: inherit; color: inherit;
}
button.slog-row { cursor: pointer; }
button.slog-row:hover { background: var(--input-bg); }
button.slog-row:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.slog-row--static { cursor: default; }

/* Severity reads from the icon shape and the text label too, never colour alone. */
.slog-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; }
.slog-icon svg { width: 18px; height: 18px; }
.slog-icon--danger { background: var(--danger-bg, #F6E7DE); color: var(--danger); }
.slog-icon--success { background: var(--success-bg, #E4EEE8); color: var(--success-strong); }
.slog-icon--neutral { background: var(--input-bg); color: var(--info); }

.slog-body { min-width: 0; display: grid; gap: 3px; }
.slog-title { color: var(--green); font-size: 14px; font-weight: 600; }
.slog-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.slog-account { color: var(--body-3); font-weight: 500; }
.slog-dot { color: var(--faint); }
.slog-reason { color: var(--faint); }
.slog-time { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.slog-chevron { display: flex; color: var(--faint); transition: transform .18s ease-out; }
.slog-chevron svg { width: 18px; height: 18px; }
.slog-chevron--none { visibility: hidden; }
.slog-item.is-open .slog-chevron { transform: rotate(180deg); }

.slog-details { padding: 4px 16px 18px 62px; background: var(--input-bg); border-top: 1px solid var(--border); }
.slog-details-grid { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 14px; }
.slog-details-lbl { display: block; margin-bottom: 4px; color: var(--faint); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.slog-details code { color: var(--body-3); font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.slog-details-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.slog-details pre {
  max-height: 280px; overflow: auto; margin: 0; padding: 12px;
  border: 1px solid var(--border); border-radius: var(--r-ctrl); background: #fff; color: var(--body-3);
  font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere;
}

.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) {
  .slog-summary { width: 100%; }
  .slog-summary > div { flex: 1 1 84px; }
  .slog-row { grid-template-columns: 30px minmax(0, 1fr) 20px; row-gap: 4px; padding: 12px 14px; }
  .slog-icon { width: 30px; height: 30px; }
  /* The timestamp moves under the title instead of forcing a fourth column. */
  .slog-time { grid-column: 2; grid-row: 2; font-size: 12px; }
  .slog-chevron { grid-column: 3; grid-row: 1; }
  .slog-details { padding: 4px 14px 16px; }
  .security-filter-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .slog-chevron { transition: none; }
}

.admin-empty-state { padding: 64px 24px; color: var(--faint); text-align: center; }
.admin-empty-state strong { display: block; margin-bottom: 6px; color: var(--green); font-size: 15px; }
.admin-empty-state p { margin: 0 0 16px; font-size: 13px; }
.admin-pagination { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 18px 0; color: var(--muted); }
@media (max-width: 1024px) {
  .admin-shell { flex-direction: column; }
  body.admin-nav-open { overflow: hidden; }
  .admin-compact-header {
    position: sticky; top: 0; z-index: 900; display: flex; align-items: center;
    justify-content: space-between; gap: 16px; min-height: 64px; padding: 10px 20px;
    border-bottom: 1px solid rgba(255,255,255,.09); background: #16241C;
  }
  .admin-compact-header .alogo { display: flex; align-items: center; gap: 9px; color: #fff; font-family: var(--serif); font-size: 16px; }
  .admin-compact-header .alogo strong { font: inherit; }
  .admin-compact-header .alogo > span:last-child { color: #8FA896; font: 500 12px var(--sans); }
  .admin-nav-toggle, .admin-side-close {
    display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center;
    gap: 8px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 10px;
    background: #20362A; color: #fff; font: 600 13px var(--sans); cursor: pointer;
  }
  .admin-nav-toggle svg, .admin-side-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .admin-nav-toggle:focus-visible, .admin-side-close:focus-visible { outline: 3px solid var(--rust-on-dark); outline-offset: 2px; }
  .admin-side-close { flex: 0 0 44px; padding: 8px; }
  .admin-nav-backdrop {
    position: fixed; inset: 0; z-index: 990; display: block; width: 100%; height: 100%;
    border: 0; background: rgba(8,25,22,.56); cursor: default;
  }
  .admin-nav-backdrop[hidden] { display: none; }
  .admin-side {
    position: fixed; inset: 0 auto 0 0; z-index: 1000; width: min(340px, 88vw); height: 100dvh;
    padding: 18px 16px 22px; overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-102%); visibility: hidden;
    box-shadow: 18px 0 54px rgba(8,25,22,.28);
    transition: transform .2s ease, visibility 0s linear .2s;
  }
  .admin-side.is-open { transform: translateX(0); visibility: visible; transition-delay: 0s; }
  .admin-side-heading .alogo { margin-bottom: 0; }
  .admin-side-search { margin-top: 18px; }
  .admin-side nav { grid-template-columns: 1fr; }
  .admin-side-footer { margin-top: auto; padding: 0 8px; }
  .admin-main { padding: 24px 20px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .two-col { grid-template-columns: 1fr !important; }
  .order-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .order-detail-grid { 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)); }
  .admin-invite-grid, .admin-account-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .admin-product-header { display: none; }
  .admin-product-row { grid-template-columns: 1fr; gap: 12px; padding: 20px; }
  .admin-product-select { justify-content: flex-start; }
  .admin-product-row > [data-label] { display: grid !important; grid-template-columns: 110px minmax(0, 1fr); justify-content: stretch !important; text-align: left; }
  .admin-product-row > [data-label]::before { content: attr(data-label); color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
  .admin-product-main::before { align-self: center; }
  .admin-product-main-content { min-width: 0; }
  .admin-product-price, .admin-product-photo-count { text-align: left; }
  .admin-product-action { width: auto; justify-self: start; }
}

@media (min-width: 1025px) and (max-width: 1199px) {
  .order-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .admin-product-header { display: none; }
  .admin-product-row { grid-template-columns: 32px minmax(200px, 1fr) repeat(3, minmax(90px, auto)); gap: 18px 12px; }
  .admin-product-row > [data-label] { position: relative; padding-top: 15px; }
  .admin-product-row > [data-label]::before { content: attr(data-label); position: absolute; top: 0; left: 0; color: var(--faint); font-size: 9px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
  .admin-product-row > [data-label]:not(.admin-product-main) { justify-content: flex-start; }
  .admin-product-price, .admin-product-photo-count { text-align: left; }
}

@media (max-width: 640px) {
  .admin-compact-header { padding-inline: 14px; }
  .admin-nav-toggle span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .admin-side nav { grid-template-columns: 1fr; }
  .admin-tab { min-width: 0; padding: 11px 10px; font-size: 13px; }
  .admin-main { padding: 22px 16px 32px; }
  .stat-grid { grid-template-columns: 1fr !important; }
  .order-filter-grid { grid-template-columns: 1fr !important; }
  .order-card-actions { grid-template-columns: 1fr; }
  .security-filter-grid { grid-template-columns: 1fr; }
  .admin-invite-grid, .admin-account-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .admin-readiness-disclosure > div:first-child { align-items: flex-start; flex-direction: column; }
  .admin-readiness-actions button { grid-template-columns: 1fr auto; }
  .admin-readiness-actions button span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .admin-side { transition: none; }
}

/* ---------- 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: 0 16px 40px rgba(22, 48, 43, .12); 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: 0 22px 54px rgba(22,48,43,.1); 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: inset 0 0 0 12px #fff, 0 0 0 1px var(--border); }
.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); }
@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; }
.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: 0 22px 54px rgba(22,48,43,.12); }
.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 .2s, color .2s;
}
.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: 2; }

/* ---------- 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; }
.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;
}
.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);
}
.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; }
}

/* ---------- 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: clamp(23px, 3vw, 32px); 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;
}
.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; }
.link-arrow:hover { color: var(--rust-hover); }

/* Page / card titles */
.page-title { font-family: var(--serif); font-weight: 600; font-size: clamp(28px,3.2vw,38px); color: var(--green); margin: 0; }
.card-title { font-family: var(--serif); font-weight: 600; font-size: 19px; 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: 21px; color: var(--green); margin: 0 0 26px; }
.card-title-fluid { font-family: var(--serif); font-weight: 600; font-size: clamp(20px,2.2vw,26px); 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: clamp(22px,2.2vw,26px); 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: 26px; flex-wrap: wrap; }
.color-swatch-link { text-align: center; text-decoration: none; }
.color-swatch-dot { width: 66px; height: 66px; border-radius: var(--r-pill); border: 1px solid rgba(20,25,20,.08); box-shadow: 0 8px 20px rgba(20,25,20,.08); }
.color-swatch-label { font-size: 13px; color: var(--body-3); margin-top: 10px; 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: clamp(28px,3.5vw,44px); 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); }
.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-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; }
.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(--rust); border-radius: var(--r-ctrl); padding: 14px 18px; font-size: 14px; margin-top: 16px; }
.form-error-box-sm { background: var(--danger-bg); color: var(--rust); 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; }
.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: clamp(24px,2.4vw,30px); 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-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: 32px; align-items: start; }
.contact-card-pad { padding: clamp(24px,3.5vw,40px); }
.contact-list { display: flex; flex-direction: column; gap: 18px; margin-bottom: 28px; }
.contact-row { display: flex; gap: 14px; align-items: center; font-size: 15px; color: var(--body-3); text-decoration: none; }
.contact-row .icon-bubble { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-admin); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--green); }
.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: 20px; 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); }

/* 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; 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: clamp(28px,3vw,40px); }
.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; }
.catalog-color-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

@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: 980; 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: 990; 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: 0 -18px 54px rgba(8,25,22,.24);
    transform: translateY(102%); visibility: hidden;
    transition: transform .2s ease, visibility 0s linear .2s;
  }
  .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-color-row { align-items: flex-start; }
  .catalog-color-row .toolbar-label { flex: 0 0 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 */
.product-tags { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.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: "— "; }
.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; }
.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); }
.pdp-trust-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-top: 14px; }
.pdp-trust-item { display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: var(--r-ctrl); padding: 14px; }
.pdp-trust-item span { font-size: 13px; color: var(--body-3); }
.pdp-trust-item .i { color: var(--green); }
.specs-label { font-size: 13px; font-weight: 600; letter-spacing: .05em; color: var(--green); margin-bottom: 14px; text-transform: uppercase; }
.specs-list { display: flex; flex-direction: column; }
.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 .3s; }
.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; }
.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; }
.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; }
.gallery-grid { min-width: 0; display: grid; grid-template-columns: 74px 1fr; gap: 16px; }
.thumbs-col { display: flex; flex-direction: column; gap: 12px; }
.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; }
.zoom-hint {
  position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(250, 249, 246, .92); color: var(--green);
  border-radius: 50%; box-shadow: 0 2px 8px rgba(23, 32, 27, .14); pointer-events: none;
}

/* ---------- Product image viewer ---------- */
.zoom-viewer {
  position: fixed; inset: 0; z-index: 1000; 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 .2s 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;
}
.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: clamp(26px,3vw,38px); color: var(--green); margin: 0 0 14px; text-wrap: balance; }
.pdp-info { min-width: 0; }
.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: 0 4px 16px rgba(22,48,43,.06); }
.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: 1; 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: 1; 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: 0 40px 80px rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.14); }
.hero-product-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero-rating-card { position: absolute; top: 64px; left: 40px; background: rgba(255,255,255,.95); border-radius: 12px; padding: 11px 15px; box-shadow: 0 14px 34px rgba(0,0,0,.25); }
.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: 0 14px 34px rgba(0,0,0,.25); }
.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; }
.story-text { font-size: 16px; line-height: 1.75; color: var(--body-2); margin: 0 0 24px; }
.story-actions { display: flex; gap: 28px; }
@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: 1; }
.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:1;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:2;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:2}
.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 .2s ease}
.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:2}.customize-demo-overlay-text{position:absolute;left:22%;right:22%;top:53%;z-index:3;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 .15s;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; }
.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: 1; }
.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: 0 0 0 3px rgba(153, 63, 31, .18); }
.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: 200; 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: 0 12px 32px rgba(23, 32, 27, .28); }
.consent-banner[hidden] { display: none; }
.consent-text { flex: 1 1 240px; margin: 0; font-size: 13px; line-height: 1.5; }
.consent-text a { color: var(--rust-on-dark); text-decoration: underline; }
.consent-actions { display: flex; gap: 8px; flex-shrink: 0; }
.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: 0 0 0 2px var(--border); transition: box-shadow .15s;
}
.catalog-color-filter.is-active svg { box-shadow: 0 0 0 3px var(--green); }
.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 .12s; }
.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 card: icon chip + label + value + trend + sparkline --- */
.akpi { display: flex; flex-direction: column; gap: 12px; padding: 18px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: 0 1px 2px rgba(20,25,20,.04); }
.akpi-top { display: flex; align-items: center; gap: 10px; }
.akpi-ico { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: var(--r-ctrl); background: var(--sage-bg); color: var(--green); }
.akpi-ico svg { width: 17px; height: 17px; }
.akpi-ico--warn { background: var(--danger-bg); color: var(--danger); }
.akpi-ico--gold { background: #F6EFD9; color: var(--warning); }
.akpi-lbl { font-size: 12px; color: var(--muted); line-height: 1.35; }
.akpi-val { font-size: 27px; font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.akpi-val--warn { color: var(--rust); }
.akpi-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.akpi-foot:empty { display: none; }
.akpi-spark { width: 74px; height: 22px; overflow: visible; }
.akpi-spark path { fill: none; stroke: var(--sage); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.akpi-spark .akpi-spark-fill { fill: rgba(46,107,65,.10); stroke: none; }

/* --- Section eyebrow: the storefront's Mtavruli signature, kept quiet --- */
.admin-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--muted); margin-bottom: 6px; }

/* --- Rating distribution (5 -> 1) --- */
.arate { display: flex; flex-direction: column; gap: 7px; }
.arate-row { display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.arate-bar { display: block; width: 100%; height: 7px; border-radius: var(--r-pill); overflow: hidden; background: var(--input-bg); }
.arate-bar rect { fill: var(--gold); }
.arate-count { text-align: right; font-variant-numeric: tabular-nums; }
.arate-score { display: flex; align-items: baseline; gap: 6px; }
.arate-score b { font-size: 34px; font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.arate-score span { font-size: 13px; color: var(--muted); }
.arate-stars { color: var(--gold); font-size: 14px; letter-spacing: 1px; }

/* --- 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(--green); 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 --- */
.amedia { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.amedia-item { margin: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-card); background: #fff; overflow: hidden; }
.amedia-thumb { display: block; width: 100%; height: 160px; object-fit: cover; background: var(--input-bg); }
.amedia-body { display: flex; flex-direction: column; gap: 6px; padding: 12px; }
.amedia-prod { font-weight: 600; font-size: 13px; color: var(--green); text-decoration: none; }
.amedia-prod:hover { text-decoration: underline; }
.amedia-pos { font-size: 12px; color: var(--muted); }
.amedia-warn { font-size: 12px; font-weight: 600; color: var(--warning); }
.amedia-bare { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.amedia-bare a { color: var(--green); }

/* --- Empty state: an invitation to act, not a blank box --- */
.aempty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 44px 24px; text-align: center; }
.aempty-ico { width: 46px; height: 46px; display: grid; place-items: center; border-radius: var(--r-card); background: var(--input-bg); color: var(--muted); }
.aempty-ico svg { width: 22px; height: 22px; }
.aempty h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--green); }
.aempty p { margin: 0; max-width: 42ch; font-size: 13px; color: var(--muted); line-height: 1.6; }

@media (max-width: 720px) {
  .arev-item { grid-template-columns: 34px 1fr; }
  .arev-acts { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
}
.admin-mb-18 { margin-bottom: 18px; }
.admin-pad-18 { padding: 18px; }
.arate-wrap { display: grid; grid-template-columns: minmax(150px, auto) 1fr; align-items: center; gap: 12px 32px; }
.arate-head { display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 720px) { .arate-wrap { grid-template-columns: 1fr; } }

/* --- Area chart (Build 161) --- */
.achart { position: relative; }
.achart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.achart-grid line { stroke: var(--border); stroke-width: 1; }
.achart-area { fill: url(#achart-fill); }
.achart-line { fill: none; stroke: var(--green); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.achart-dot { fill: #fff; stroke: var(--green); stroke-width: 2.4; opacity: 0; transition: opacity .15s; }
.achart-hit { fill: transparent; cursor: pointer; }
.achart-xlabel { fill: var(--muted); font-size: 11px; text-anchor: middle; }
.achart-ylabel { fill: var(--muted); font-size: 10px; text-anchor: end; }
.achart-cursor { stroke: var(--green); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
.achart.is-active .achart-cursor, .achart.is-active .achart-dot { opacity: 1; }
.achart-tip { opacity: 0; transition: opacity .15s; pointer-events: none; }
.achart.is-active .achart-tip { opacity: 1; }
.achart-tip rect { fill: #17201B; rx: 8; }
.achart-tip text { fill: #fff; font-size: 11px; }
.achart-tip .achart-tip-val { font-weight: 700; font-size: 12px; }
@media (prefers-reduced-motion: reduce) {
  .achart-dot, .achart-tip { transition: none; }
}

/* --- Segmented control (Build 163) --- */
.aseg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--input-bg); border: 1px solid var(--border); }
.aseg-btn {
  border: none; background: none; cursor: pointer; padding: 7px 14px; border-radius: var(--r-pill);
  font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--muted);
  transition: background .15s, color .15s;
}
.aseg-btn:hover { color: var(--green); }
.aseg-btn.is-on { background: var(--green); color: #fff; }
.aseg-btn:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }

/* --- Dashboard actions: one primary, the rest subordinate --- */
.dash-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* --- List rows with a product thumbnail --- */
.dash-list--media li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; }
.dash-thumb { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; background: var(--input-bg); }

/* Colour carries urgency, and the number states it in words too. */
.dash-qty--danger { color: var(--danger); font-weight: 700; }
.dash-qty--warn { color: var(--warning); font-weight: 700; }
.dash-qty--low { color: var(--info); }

@media (max-width: 720px) {
  .aseg-btn { padding: 9px 12px; }
  .dash-actions { width: 100%; }
}

/* --- 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. */
body.admin .btn:not(.btn-primary):not(.btn-rust):not(.btn-outline):not(.btn-ghost):not(.btn-danger) {
  background: #fff;
  border: 1px solid var(--border-soft);
  color: var(--green);
  padding: 10px 16px;
  font-size: 13px;
  /* 38 -> 44: builds 195-199 put the storefront on a 44px target and the admin
     was left behind, which is what made these controls look under-filled. */
  min-height: 44px;
}
body.admin .btn:not(.btn-primary):not(.btn-rust):not(.btn-outline):not(.btn-ghost):not(.btn-danger):hover:not(:disabled) {
  border-color: var(--green);
  background: var(--input-bg);
}
body.admin .btn:not(.btn-primary):not(.btn-rust):not(.btn-outline):not(.btn-ghost):not(.btn-danger):disabled {
  opacity: .45;
  cursor: not-allowed;
}
/* Genuinely text-like actions opt out of the surface. */
body.admin .btn-ghost { background: none; border: 1px solid transparent; color: var(--green); padding: 10px 16px; font-size: 13px; min-height: 38px; }
body.admin .btn-ghost:hover:not(:disabled) { background: var(--input-bg); }
/* Destructive actions read as destructive, and sit apart from the rest. */
body.admin .btn-danger { background: #fff; border: 1px solid #E6CFC4; color: var(--rust); padding: 10px 16px; font-size: 13px; min-height: 38px; }
body.admin .btn-danger:hover:not(:disabled) { background: var(--danger-bg); border-color: var(--rust); }

/* --- Collapsible panel + file drop-zone (Build 164) --- */
.aopen-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; text-align: left; padding: 16px 18px;
}
.aopen-toggle strong { display: block; font-size: 14px; color: var(--green); }
.aopen-sub { display: block; margin-top: 3px; font-size: 12px; font-weight: 400; color: var(--muted); }
.aopen-chev { display: grid; place-items: center; width: 22px; height: 22px; color: var(--muted); transition: transform .2s; }
.aopen-chev svg { width: 16px; height: 16px; }
.aopen-chev.is-open { transform: rotate(180deg); }
.aopen-body { display: flex; flex-direction: column; gap: 12px; padding: 0 18px 18px; }

/* 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 .15s, background .15s;
}
.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); }
.abtn-chev { display: inline-grid; place-items: center; width: 14px; height: 14px; vertical-align: -2px; margin-left: 2px; }
.abtn-chev svg { width: 12px; height: 12px; }
.abtn-chev { transition: transform .2s; }
.abtn-chev.is-open { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .abtn-chev, .aopen-chev { transition: none; } }

/* --- 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. */
body.admin input[type="date"] { font-family: var(--sans); color: var(--green); min-height: 44px; }
body.admin input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: .5; cursor: pointer; padding: 4px; border-radius: 6px;
}
body.admin input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; background: var(--input-bg); }
body.admin input[type="date"]:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
/* An empty date reads as placeholder text rather than live content. */
body.admin input[type="date"]:not(:focus):invalid::-webkit-datetime-edit { color: var(--muted); }

/* --- 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. */
body.admin details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; }
body.admin details > summary::-webkit-details-marker { display: none; }
body.admin details > summary:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; border-radius: 6px; }
body.admin details[open] > summary .abtn-chev { transform: rotate(180deg); }

/* --- Donut + horizontal bars (Build 177) --- */
.adonut { display: grid; grid-template-columns: 160px 1fr; align-items: center; gap: 20px; }
.adonut-svg { width: 160px; height: 160px; }
.adonut-track { stroke: var(--input-bg); }
.adonut-seg { transition: opacity .15s; }
.adonut-seg:hover { opacity: .78; }
/* One class per status tone, reusing the palette the progress bars established. */
.adonut-seg--received { stroke: var(--danger); }
.adonut-seg--processing { stroke: var(--warning); }
.adonut-seg--shipped { stroke: var(--success); }
.adonut-seg--completed { stroke: var(--success-strong); }
.adonut-seg--neutral { stroke: var(--info); }
.adonut-total { fill: var(--green); font-family: var(--sans); font-size: 30px; font-weight: 700; }
.adonut-cap { fill: var(--muted); font-family: var(--sans); font-size: 11px; }

.adonut-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.adonut-legend li { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 9px; font-size: 13px; color: var(--body-2); }
.adonut-dot { width: 10px; height: 10px; border-radius: 3px; }
.adonut-dot--received { background: var(--danger); }
.adonut-dot--processing { background: var(--warning); }
.adonut-dot--shipped { background: var(--success); }
.adonut-dot--completed { background: var(--success-strong); }
.adonut-dot--neutral { background: var(--info); }
.adonut-val { font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; }

.abars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.abars-row { display: grid; grid-template-columns: minmax(90px, 34%) 1fr auto; align-items: center; gap: 12px; }
.abars-lbl { font-size: 13px; color: var(--body-2); }
.abars-track { display: block; width: 100%; height: 10px; border-radius: var(--r-pill); overflow: hidden; background: var(--input-bg); }
.abars-track rect { fill: var(--green); }
.abars-row:hover .abars-track rect { fill: var(--sage); }
.abars-val { font-size: 13px; font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; text-align: right; }
.abars-note { display: block; font-size: 11px; font-weight: 400; color: var(--muted); }

@media (max-width: 720px) {
  .adonut { grid-template-columns: 1fr; justify-items: center; }
  .adonut-legend { width: 100%; }
  .abars-row { grid-template-columns: 1fr auto; }
  .abars-track { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .adonut-seg { transition: none; } }

/* --- 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; }
  .adates .aseg { flex-wrap: wrap; }
}