/* ============================================================
   GoGurll — women's western wear storefront UI
   Brand kit tokens: GoGurll Red #E01A23 · Brand Grey #58585A ·
   Charcoal #2F2F31 · White #FFFFFF · Grey-50 #F4F4F6

   LAYOUT SYSTEM (2026-08-23): the content column is a FIXED width
   chosen per breakpoint band and centred — never a percentage and
   never a fluid max-width. Every other width on the site is a
   fraction of it, which is what lets a four-up grid, a five-column
   footer and the 5+1+6 product page all land on whole pixels at
   every size. Each step divides cleanly by 12 and by 4.

   Corners are square, cards carry no chrome, and the type is one
   family in two weights with POSITIVE tracking. Red is an accent
   used once per screen; primary actions are charcoal.
   ============================================================ */
:root {
  --ink: #212121;              /* all text · primary button · badge border */
  --ink-soft: #58585A;         /* brand grey — the logo's own grey */
  --muted: #757575;            /* secondary text · inactive tabs · view-all */
  --faint: #C2C2C2;            /* struck-through price, and nothing else */
  --bg: #FFFFFF;
  --bg-soft: #FAFAFA;          /* quiet bands — footer, disabled states */
  --bg-bar: #EAEAEA;           /* the top utility bar only */
  --line: #DBDBDB;             /* chip borders · rules */
  --line-dark: #D8D8D8;        /* section separators */
  --pink: #E01A23;             /* GoGurll red — the accent (var name kept for compatibility) */
  --pink-deep: #B31119;
  --pink-soft: #FFF3F7;        /* the only pink surface: swatch hover */
  --green: #3E6B57;            /* success — a status colour, not a brand colour */
  --green-soft: #E2EDE7;
  --amber: #8a6a24;            /* warning — a status colour, not a brand colour */
  --amber-soft: #F0E3C6;
  --gold-brand: #C99B3F;       /* rating gold — STAR RATINGS ONLY, never a brand accent */
  --blue: #23608f;
  --blue-soft: #e3eef8;
  --violet: #55418a;
  --violet-soft: #ece7f7;
  --coral: #E01A23;
  --coral-soft: #FBD8DA;
  --night: #212121;            /* dark surfaces are the same charcoal as text */

  /* Square by default. --radius-hair is the 1-2px used on badges and
     inputs; nothing in the storefront is rounder than that. */
  --radius: 0px;
  --radius-hair: 2px;
  --shadow: 0 1px 3px rgba(33, 33, 33, .10);
  --shadow-sm: 0 1px 2px rgba(33, 33, 33, .07);

  --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font);
  --font-condensed: var(--font);
  --font-accent: var(--font);
  --font-ar: 'Manjari', 'Noto Sans Malayalam', sans-serif;
  --w-medium: 500;             /* body weight */
  --w-demi: 700;               /* everything emphasised — headings, labels, prices */
  --ease: cubic-bezier(.22, .8, .32, 1);

  /* The content column. Overridden per band below; this is the phone value. */
  --col: 90%;
  --gutter: 8px;               /* the inset carousel cards carry, which headings match */

  /* legacy aliases used by older templates */
  --plum: var(--ink);
  --plum-deep: var(--night);
  --gold: var(--pink);
  --gold-soft: var(--pink-soft);
  --saffron: var(--gold-brand);
  --saffron-deep: var(--pink);
  --saffron-soft: var(--pink-soft);
  --rose: var(--pink);
  --red: var(--pink);
  --sea: var(--green);
  --sand: var(--bg-soft);
  --mist: var(--bg-soft);
  --cream: var(--bg);
  --pearl: var(--bg);
  --surface: var(--bg);
  --font-serif: var(--font-display);
  --font-sans: var(--font);
  --font-body: var(--font);
}

/* The ladder. Fixed pixel columns, centred — the single decision the whole
   layout hangs off. Below 1079 it inverts to a percentage, which is the
   phone layout. */
@media (min-width: 1080px) { :root { --col: 1020px; } }
@media (min-width: 1280px) { :root { --col: 1152px; } }
@media (min-width: 1440px) { :root { --col: 1296px; } }
@media (min-width: 1680px) { :root { --col: 1512px; } }
@media (min-width: 1920px) { :root { --col: 1728px; } }
@media (min-width: 2560px) { :root { --col: 2304px; } }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.45; font-size: 13px; font-weight: var(--w-medium); letter-spacing: .2px; -webkit-font-smoothing: antialiased; }
[dir="rtl"] body, html[lang="ml"] body { font-family: var(--font-ar), var(--font); font-size: 1.06em; letter-spacing: normal; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; border-radius: 0; }
::selection { background: var(--pink-soft); }

.container { width: var(--col); max-width: 100%; margin: 0 auto; padding: 0; }

/* Type ladder. Sizes are named, not per-component, and tracking is always
   POSITIVE — +0.2 on body, +0.4 on labels, +0.6 on headings. */
h1, h2, h3, h4, h5, h6 { font-family: var(--font); font-weight: var(--w-demi); color: var(--ink); letter-spacing: .6px; line-height: 1.33; }
h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; letter-spacing: .4px; }
h5 { font-size: 14px; letter-spacing: .4px; }
h6 { font-size: 13px; letter-spacing: .4px; }
@media (max-width: 1279px) { h1 { font-size: 20px; } h2 { font-size: 18px; } h3 { font-size: 16px; } h4 { font-size: 14px; } }
.serif { font-family: var(--font); font-weight: var(--w-demi); }
.kicker, .eyebrow { text-transform: uppercase; letter-spacing: 1.6px; font-size: 11px; font-weight: var(--w-demi); font-family: var(--font); }

/* ---------- Band 1: utility bar ----------
   32px, #EAEAEA. Vertical tabs left, promo sentence right. This is the band
   that reads "department store" rather than "boutique". */
.announce { background: var(--bg-bar); color: var(--muted); font-size: 13px; letter-spacing: .2px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: flex-end; gap: 22px; }
.announce > .container { display: flex; align-items: center; gap: 22px; height: 100%; }
.announce a { color: var(--ink); }
.announce a:hover { color: var(--pink); }
.announce .grow { margin-right: auto; color: var(--ink); }
[dir="rtl"] .announce .grow { margin-right: 0; margin-left: auto; }
/* An admin-set announcement colour still wins, as it always did. */
.announce.ann-custom { color: var(--ann-tc, var(--ink)); }
.announce.ann-custom a, .announce.ann-custom .grow { color: inherit; }

/* Department tabs. Active is charcoal with a 2px underline; inactive is grey —
   an underline rather than a fill, because the band is already tinted. */
.dept-tabs { display: flex; align-self: stretch; }
.dept-tabs a { display: flex; align-items: center; padding: 0 12px; font-size: 12px; font-weight: var(--w-demi); letter-spacing: .4px; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid transparent; }
.dept-tabs a:hover { color: var(--ink); }
.dept-tabs a.on { color: var(--ink); border-bottom-color: var(--ink); }
.dept-more { display: flex; }
.dept-more > a { border-bottom: 2px solid transparent; }
.dept-more .dropdown { top: 100%; z-index: 70; }
.dept-more .chev { display: inline-flex; align-items: center; color: inherit; }
@media (max-width: 900px) { .dept-tabs { display: none; } }

/* ---------- Band 2: wordmark row ----------
   Currency left · logo optically centred · icon actions right. The logo is
   centred in the column, NOT placed after the nav — that centring is most of
   what makes the header read the way it does. */
.sticky-header-wrapper { position: sticky; top: 0; z-index: 50; background: var(--bg); }
header.site { background: var(--bg); position: relative; z-index: 2; }
.nav-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; min-height: 80px; }
.nav-lead { display: flex; align-items: center; gap: 12px; justify-self: start; }
.logo { font-size: 24px; font-weight: 800; letter-spacing: .5px; color: var(--pink); white-space: nowrap; justify-self: center; }
.logo img { height: 52px; width: auto; }
.burger-menu-btn { display: none; }

/* The search field is a rounded pill with the magnifier on the right. */
.search-form { position: relative; width: 240px; max-width: 240px; }
[dir="rtl"] .search-form { margin-left: 0; margin-right: auto; }
.search-form input[type=text] { width: 100%; border: 1px solid var(--line-dark); background: var(--bg); border-radius: 999px; padding: 9px 40px 9px 18px; font-size: 13px; letter-spacing: .2px; outline: none; font-family: inherit; color: var(--ink); transition: border-color .2s; }
[dir="rtl"] .search-form input[type=text] { padding: 9px 18px 9px 40px; }
.search-form input::placeholder { color: var(--muted); }
.search-form input:focus { border-color: var(--ink); }
.search-form .cam { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); color: var(--muted); background: none; border: none; cursor: pointer; padding: 6px; display: flex; align-items: center; }
.search-form .cam:hover { color: var(--ink); }
[dir="rtl"] .search-form .cam { right: auto; left: 5px; }
/* Track-order link now lives in the utility bar. */
.util-track { display: inline-flex; align-items: center; gap: 5px; }
/* Main nav links, inline on the header row (desktop). Mobile uses the burger
   drawer and the swipeable category strip below instead. */
.nav-menu { display: none; align-items: center; gap: 0; }
/* The search icon that opens the field on mobile; desktop uses the pill instead. */
.search-toggle { background: none; border: none; cursor: pointer; padding: 6px; }
.icon-link.search-toggle { display: none; }
.nav-menu a { padding: 8px 9px; font-size: 12px; font-weight: var(--w-medium); letter-spacing: .2px; text-transform: uppercase; font-family: var(--font); color: var(--ink); white-space: nowrap; transition: color .15s; }
.nav-menu a:hover { color: var(--pink); }
.nav-menu a.hot { color: var(--pink); font-weight: var(--w-demi); }
/* The menu sits on the header row now, so the standalone category bar is hidden
   on desktop; it returns as the swipeable strip on mobile. */
/* Single row only where there is room for menu + logo + search + icons; below
   1080 the menu drops to the category bar under the logo.

   Room is not a question about the viewport alone: the menu is theme.navigation,
   so how wide it is depends on how many items the SHOP configured and how long
   their labels are. When it outgrows the row, .nav-lead's min-content pushes the
   logo's `auto` track to zero width — and because the sheet's global
   `img { max-width: 100% }` then resolves to 0, the logo does not shrink or
   overflow, it DISAPPEARS. That is what adding nine category and collection
   links to the header did.

   So .nav-stacked is set by measurement (the script in views/partials/header.ejs)
   and it drops the menu to the band below — the two-row layout the sub-1080
   breakpoint already uses. Without JavaScript the class is never set and the
   header behaves exactly as it did before. */
@media (min-width: 1080px) {
  .sticky-header-wrapper:not(.nav-stacked) .nav-menu { display: flex; }
  .sticky-header-wrapper:not(.nav-stacked) .catnav { display: none; }
  /* .catnav carries its own top hairline, so the header only draws one when the
     menu is on its row and there is no band below it. */
  .sticky-header-wrapper:not(.nav-stacked) header.site { border-bottom: 1px solid var(--line); }
}

/* Icon actions: glyph only, no caption. The label lives in the title/aria. */
.nav-actions { display: flex; align-items: center; gap: 20px; justify-self: end; }
.nav-icons { display: flex; align-items: center; gap: 20px; }
.icon-link { display: flex; align-items: center; justify-content: center; gap: 0; padding: 0; font-size: 0; color: var(--ink); border-radius: 0; position: relative; transition: color .15s; }
.icon-link svg { width: 20px; height: 20px; stroke: currentColor; }
.icon-link:hover { color: var(--pink); }
.cart-count { position: absolute; top: -5px; right: -8px; background: var(--pink); color: #fff; font-size: 10px; font-weight: var(--w-demi); border-radius: 999px; padding: 0 4px; min-width: 15px; height: 15px; line-height: 15px; text-align: center; }
.nav-actions .pill { align-self: center; border: none; padding: 0; border-radius: 0; font-size: 12px; font-weight: var(--w-demi); letter-spacing: .2px; color: var(--ink); background: none; }
.nav-actions a.pill:hover { border-color: transparent; color: var(--pink); }

/* currency switcher — opens on hover (desktop) and on tap (touch) */
.currency-switch { display: inline-flex; }
.currency-switch .currency-btn { display: inline-flex; align-items: center; gap: 4px; font-family: inherit; font-weight: var(--w-demi); font-size: 12px; letter-spacing: .2px; color: var(--ink); background: none; border: none; cursor: pointer; }
.currency-switch .currency-btn:hover { border-color: transparent; color: var(--pink); }
.currency-switch.open .dropdown { opacity: 1; visibility: visible; transform: none; }
/* Two copies of the picker exist: a desktop one in the utility bar, a mobile one
   in the header row. Each shows only at its own breakpoint. */
.curr-mobile { display: none; }
/* In the utility bar the picker sits at the right edge, so its menu opens
   flush-right and above the sticky header — the same lift .dept-more uses. */
.announce .currency-switch .dropdown { left: auto; right: 0; z-index: 71; }
[dir="rtl"] .announce .currency-switch .dropdown { left: 0; right: auto; }

@media (max-width: 1079px) {
  .nav-row { grid-template-columns: auto 1fr auto; min-height: 64px; }
}

/* ---------- Band 3: category menu ----------
   28px, centred, 12px medium uppercase. SALE is the one red item. A panel
   opens on hover. No border under the header — the hero starts the page. */
/* The hairline above separates the logo row from the menu bar, and matches
   the one below it — the two rows had nothing between them. It costs
   nothing on desktop, where .catnav is display:none and header.site
   carries its own bottom border instead. */
.catnav { background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; }
.catnav-inner { display: flex; gap: 0; flex-wrap: wrap; width: var(--col); max-width: 100%; margin: 0 auto; padding: 0; justify-content: center; }
@media (max-width: 1400px) { .catnav-inner { justify-content: flex-start; } }
.catnav-inner::-webkit-scrollbar { display: none; }
.catnav-item { position: relative; flex-shrink: 0; }
.catnav-item > a { display: flex; align-items: center; gap: 5px; padding: 9px 10px; font-size: 12px; font-weight: var(--w-medium); letter-spacing: .2px; text-transform: uppercase; font-family: var(--font); color: var(--ink); white-space: nowrap; transition: color .15s; }
.catnav-item > a:hover { color: var(--pink); }
.catnav-item > a.hot { color: var(--pink); font-weight: var(--w-demi); }
.catnav-item .chev { font-size: 10px; color: var(--muted); transition: transform .2s; }
.catnav-item:hover .chev { transform: rotate(180deg); color: var(--pink); }
/* dropdown */
.dropdown { position: absolute; top: 100%; left: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 0; box-shadow: var(--shadow); min-width: 230px; padding: 10px 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s; z-index: 60; }
[dir="rtl"] .dropdown { left: auto; right: 0; }
.catnav-item:hover .dropdown, .catnav-item:focus-within .dropdown { opacity: 1; visibility: visible; transform: none; }
.dropdown a { display: block; padding: 8px 18px; font-size: 13px; letter-spacing: .2px; color: var(--ink); }
.dropdown a:hover { background: var(--bg-soft); color: var(--pink); }
.dropdown .dd-head { padding: 8px 18px 4px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); font-weight: var(--w-demi); }
.dropdown hr { border: none; border-top: 1px solid var(--line); margin: 8px 0; }
.catnav-arrow { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 0; border: 1px solid var(--line); background: var(--bg); cursor: pointer; box-shadow: none; font-size: 12px; color: var(--ink); z-index: 5; }
.catnav-arrow:hover { color: var(--pink); border-color: var(--pink); }
[dir="rtl"] .catnav-arrow { right: auto; left: 8px; }

/* ---------- Buttons ----------
   Flat, square, static. Primary is charcoal — NOT red: red is an accent used
   once per screen (the discount, SALE, the selected size), and a red button
   everywhere would spend it. `.btn.hot` is the deliberate exception. */
.btn { display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: #fff; border: 1px solid var(--ink); padding: 0 20px; min-height: 40px; border-radius: 0; font-size: 13px; font-weight: var(--w-demi); letter-spacing: .2px; cursor: pointer; text-align: center; font-family: var(--font); transition: background .15s, color .15s, border-color .15s; }
.btn:hover { background: #000; border-color: #000; color: #fff; transform: none; box-shadow: none; }
.btn:active { transform: none; }
.btn.gold { background: var(--ink); border-color: var(--ink); } .btn.gold:hover { background: #000; border-color: #000; }
.btn.hot { background: var(--pink); border-color: var(--pink); } .btn.hot:hover { background: var(--pink-deep); border-color: var(--pink-deep); }
.btn.ghost { background: #fff; color: var(--ink); border: 1px solid var(--ink); }
.btn.ghost:hover { background: var(--ink); color: #fff; box-shadow: none; }
.btn.sm { min-height: 32px; padding: 0 14px; font-size: 12px; }
.btn.danger { background: var(--coral); border-color: var(--coral); } .btn.danger:hover { background: var(--pink-deep); border-color: var(--pink-deep); }
.btn.ghost.danger { background: #fff; color: var(--coral); border-color: var(--coral); }
.btn.ghost.danger:hover { background: var(--coral); color: #fff; }
.btn.wide { width: 100%; }
/* Buttons are links as often as they are <button>s, and half a dozen container
   rules (.prose a, .page-head a, .hint a …) out-specify a bare `.btn` on colour.
   Naming the element once puts the button's own colour back on top wherever it
   is dropped, rather than patching each container as it is found. */
a.btn { color: #fff; }
a.btn.ghost, a.btn.ghost.danger { color: var(--ink); }
a.btn.ghost.danger { color: var(--coral); }
a.btn.ghost:hover { color: #fff; }
.hero-slide a.btn { color: var(--ink); }
.hero-slide a.btn:hover { color: #fff; }

/* ---------- Hero carousel ----------
   Full-bleed: the slider fills the whole viewport width with no side gutter, so
   it breaks out of the page column via .hero-full. The arrows therefore sit over
   the artwork (inset from the edge) rather than in a gutter that no longer
   exists. */
.hero-full { width: 100%; }
.hero-carousel { position: relative; margin: 0 auto; max-width: none; padding: 0; }
.hero-viewport { overflow: hidden; border-radius: 0; }
.hero-track { display: flex; transition: transform .5s var(--ease); }
.hero-slide { flex: 0 0 100%; aspect-ratio: 16 / 9; border-radius: 0; display: grid; grid-template-columns: 1fr; align-items: center; overflow: hidden; color: #fff; position: relative; }
.hero-slide .hs-text { padding: 44px 56px; padding-left: clamp(28px, 4vw, 64px); position: relative; z-index: 2; max-width: 46%; }
[dir="rtl"] .hero-slide .hs-text { padding-left: 44px; padding-right: clamp(28px, 4vw, 64px); }
.hero-slide .hs-kicker { text-transform: uppercase; letter-spacing: 1.6px; font-size: 11px; font-weight: var(--w-demi); opacity: .85; margin-bottom: 12px; }
.hero-slide h2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.15; font-weight: var(--w-demi); letter-spacing: .6px; margin-bottom: 14px; color: #fff; }
.hero-slide h2 .mega { font-size: clamp(34px, 4.2vw, 56px); display: block; line-height: 1.08; }
.hero-slide p { font-size: 13px; letter-spacing: .2px; opacity: .9; margin: 0 0 22px; max-width: 420px; }
.hero-slide .hs-img { position: absolute; inset: 0; height: 100%; width: 100%; z-index: 0; }
.hero-slide .hs-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* White copy over an unknown photograph needs a floor. The scrim is directional
   rather than a flat wash so the picture survives on the side the text is not
   on — it darkens the reading end and clears before the subject. */
.hero-slide .hs-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,20,22,.90) 0%, rgba(20,20,22,.72) 26%, rgba(20,20,22,.28) 52%, rgba(20,20,22,0) 74%); }
[dir="rtl"] .hero-slide .hs-img::after { background: linear-gradient(270deg, rgba(20,20,22,.90) 0%, rgba(20,20,22,.72) 26%, rgba(20,20,22,.28) 52%, rgba(20,20,22,0) 74%); }
/* Where the subject sits (Storefront Editor → slide → "Where is the subject?").
   The default is a subject on the right, which is the layout above. These two
   move the copy to the other side and turn the shading round with it, so the
   headline never lands on a face. Both are no-ops on a slide with no image —
   .hs-img:empty is hidden, and .hs-text has the slide to itself either way. */
.hero-slide.focal-left { justify-items: end; }
.hero-slide.focal-left .hs-text { text-align: right; padding-left: 56px; padding-right: clamp(28px, 4vw, 64px); }
[dir="rtl"] .hero-slide.focal-left .hs-text { text-align: left; padding-right: 56px; padding-left: clamp(28px, 4vw, 64px); }
.hero-slide.focal-left p { margin-left: auto; }
.hero-slide.focal-left .hs-img::after { background: linear-gradient(270deg, rgba(20,20,22,.90) 0%, rgba(20,20,22,.72) 26%, rgba(20,20,22,.28) 52%, rgba(20,20,22,0) 74%); }
[dir="rtl"] .hero-slide.focal-left .hs-img::after { background: linear-gradient(90deg, rgba(20,20,22,.90) 0%, rgba(20,20,22,.72) 26%, rgba(20,20,22,.28) 52%, rgba(20,20,22,0) 74%); }
/* A subject that cannot be moved out from under the copy gets an even wash
   instead — lighter than the directional scrim, because it covers the face too. */
.hero-slide.focal-center .hs-img::after { background: linear-gradient(180deg, rgba(20,20,22,.55) 0%, rgba(20,20,22,.62) 100%); }
[dir="rtl"] .hero-slide.focal-center .hs-img::after { background: linear-gradient(180deg, rgba(20,20,22,.55) 0%, rgba(20,20,22,.62) 100%); }
/* Explicit per-slide text placement — Storefront Editor → slide → Style. Set
   independently for desktop and mobile; the mobile half lives in the
   max-width:860px block below. Desktop is scoped to min-width:861px so a desktop
   choice cannot leak into the phone layout, and the block sits AFTER the focal
   rules so an explicit choice out-orders the focal-derived default. Each axis is
   a whitelisted class (see views/sections/hero_slider.ejs); an unset axis emits
   no class and keeps the shipped behaviour. */
@media (min-width: 861px) {
  .hero-slide.hs-h-l { justify-items: start; }
  .hero-slide.hs-h-c { justify-items: center; }
  .hero-slide.hs-h-r { justify-items: end; }
  .hero-slide.hs-h-l .hs-text { padding-left: clamp(28px, 4vw, 64px); padding-right: 56px; }
  .hero-slide.hs-h-c .hs-text { padding-left: clamp(28px, 4vw, 64px); padding-right: clamp(28px, 4vw, 64px); }
  .hero-slide.hs-h-r .hs-text { padding-left: 56px; padding-right: clamp(28px, 4vw, 64px); }
  .hero-slide.hs-v-t { align-items: start; }
  .hero-slide.hs-v-m { align-items: center; }
  .hero-slide.hs-v-b { align-items: end; }
  .hero-slide.hs-ta-l .hs-text { text-align: left; }
  .hero-slide.hs-ta-c .hs-text { text-align: center; }
  .hero-slide.hs-ta-r .hs-text { text-align: right; }
}
/* Centered / right-set copy: the capped paragraph follows the lines rather than
   staying pinned left. Covers both the desktop and mobile alignment classes. */
.hero-slide.hs-ta-c .hs-text p, .hero-slide.hs-mta-c .hs-text p { margin-left: auto; margin-right: auto; }
.hero-slide.hs-ta-r .hs-text p, .hero-slide.hs-mta-r .hs-text p { margin-left: auto; margin-right: 0; }
.hero-slide.s1 { background: linear-gradient(110deg, #1F1F21 0%, var(--night) 55%, #E01A23 145%); }
.hero-slide.s2 { background: linear-gradient(110deg, #3F3F45 0%, #6E6E76 65%, #58585A 145%); }
.hero-slide.s3 { background: linear-gradient(110deg, #B31119 0%, #E01A23 60%, #58585A 145%); }
/* On a slide the CTA is the only white thing, so it stays square and filled. */
.hero-slide .btn { background: #fff; color: var(--ink); border-color: #fff; }
.hero-slide .btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 0; background: rgba(255,255,255,.85); border: none; cursor: pointer; font-size: 14px; color: var(--ink); box-shadow: none; z-index: 5; transition: background .2s, color .2s; display: flex; align-items: center; justify-content: center; }
.hero-arrow:hover { background: var(--ink); color: #fff; }
/* The slider is full-bleed, so the arrows sit over the artwork, inset from the
   viewport edge at every width. */
.hero-arrow.prev { left: 16px; } .hero-arrow.next { right: 16px; }
.hero-dots { display: flex; gap: 6px; justify-content: center; margin-top: 14px; }
.hero-dots button { width: 7px; height: 7px; border-radius: 0; border: none; background: var(--line); cursor: pointer; transition: width .25s var(--ease), background .25s; padding: 0; }
.hero-dots button.on { width: 20px; background: var(--ink); }
/* Portrait phone slide. The copy stacks at the BOTTOM, so the scrim turns from
   directional to vertical — and the focal setting stops meaning anything, which
   is why all three variants collapse into one rule here. */
@media (max-width: 860px) {
  .hero-slide { display: grid; grid-template-columns: 1fr; aspect-ratio: 9 / 16; align-items: end; }
  .hero-slide .hs-text { padding: 34px 24px; max-width: none; }
  /* Clear to the halfway line, then a floor under the copy. The scrim used to
     start at the top edge (.30 at 0%), so on a 9:16 crop it dimmed the model's
     face and the whole upper half of the photograph for the sake of text that
     never reaches above 65%. It is fully transparent down to the centre now, and
     darker than before below it — an ease-in curve rather than a straight ramp,
     so there is no visible line where the shading begins. */
  .hero-slide .hs-img::after,
  .hero-slide.focal-left .hs-img::after,
  .hero-slide.focal-center .hs-img::after {
    background: linear-gradient(180deg,
      rgba(20,20,22,0)   0%,
      rgba(20,20,22,0)   50%,
      rgba(20,20,22,.18) 58%,
      rgba(20,20,22,.46) 66%,
      rgba(20,20,22,.74) 80%,
      rgba(20,20,22,.93) 100%);
  }
  .hero-slide.focal-left { justify-items: stretch; }
  .hero-slide.focal-left .hs-text { text-align: left; padding: 34px 24px; }
  /* Explicit per-slide text placement (mobile). 'Auto' keeps the bottom-left
     stack the rules above set; these override one axis at a time. A horizontal
     position caps the copy width so justify-items has room to move it. */
  .hero-slide.hs-mh-l { justify-items: start; }
  .hero-slide.hs-mh-c { justify-items: center; }
  .hero-slide.hs-mh-r { justify-items: end; }
  .hero-slide.hs-mh-l .hs-text, .hero-slide.hs-mh-c .hs-text, .hero-slide.hs-mh-r .hs-text { max-width: 82%; }
  .hero-slide.hs-mv-t { align-items: start; }
  .hero-slide.hs-mv-m { align-items: center; }
  .hero-slide.hs-mv-b { align-items: end; }
  .hero-slide.hs-mta-l .hs-text { text-align: left; }
  .hero-slide.hs-mta-c .hs-text { text-align: center; }
  .hero-slide.hs-mta-r .hs-text { text-align: right; }
  .hero-arrow.prev { left: 10px; }
  .hero-arrow.next { right: 10px; }
}

/* ---------- Sections ----------
   One heading treatment everywhere: 24px title left, 14px link right, 28px of
   air above. The 8px left margin is deliberate — carousel and grid cards carry
   an 8px inset, so this is what makes the title align to the PHOTOGRAPH rather
   than to the column edge. */
section.block { padding: 0 0 30px; }
section.block.alt { background: var(--bg-soft); padding: 30px 0; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin: 28px 0 12px; gap: 16px; min-height: 32px; }
.section-head h2 { font-size: 24px; color: var(--ink); font-weight: var(--w-demi); letter-spacing: .6px; text-transform: uppercase; }
.section-head a.more { font-size: 14px; color: var(--muted); font-weight: var(--w-demi); letter-spacing: .4px; text-transform: uppercase; }
.section-head a.more:hover { color: var(--pink); text-decoration: none; }
@media (max-width: 1279px) { .section-head h2 { font-size: 20px; } }

/* ---------- Category tile strip ----------
   Square tiles with the label set OVER the image, not under it — the label is
   part of the picture, which is what stops the strip reading as a file browser. */
.tile-strip { display: flex; gap: 0; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
.tile-strip { justify-content: flex-start; margin: 0 calc(var(--gutter) * -1); }
.tile { flex: 1 0 150px; max-width: 216px; text-align: center; padding: var(--gutter); position: relative; }
.tile .tile-img { width: 100%; aspect-ratio: 1; border-radius: 0; overflow: hidden; background: var(--bg-soft); border: none; position: relative; }
.tile .tile-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.tile:hover .tile-img img { transform: scale(1.04); }
/* The scrim only exists to keep white type legible on a light photograph. */
.tile .tile-img::after { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; background: linear-gradient(180deg, rgba(33,33,33,0) 0%, rgba(33,33,33,.55) 100%); pointer-events: none; }
.tile .tile-label { position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(var(--gutter) + 24px); margin: 0; font-size: 15px; font-weight: var(--w-demi); letter-spacing: .4px; color: #fff; z-index: 2; text-shadow: 0 1px 3px rgba(33,33,33,.4); }
.tile:hover .tile-label { color: #fff; }

/* ---------- Grids & product cards ----------
   The card has NO chrome: no border, no radius, no shadow, no hover lift. The
   photograph sits straight on white and carries the whole card. Three text
   slots below it, always the same three — category, name, price — because a
   card whose shape changes row to row is what makes a grid look restless.

   The 2:3 image is the ratio the whole look rests on: it is what makes a
   four-up grid read as a lookbook rather than a catalogue. */
.grid { display: grid; gap: 24px 17px; }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-6 { grid-template-columns: repeat(6, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid.cols-4, .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .grid.cols-6 { grid-template-columns: repeat(3, 1fr); } .grid.cols-2 { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .grid.cols-4, .grid.cols-3 { grid-template-columns: repeat(2, 1fr); } .grid { gap: 20px 12px; } }
@media (max-width: 560px) { .grid.cols-6 { grid-template-columns: repeat(2, 1fr); } }

.product-card { background: transparent; border: none; border-radius: 0; overflow: visible; display: flex; flex-direction: column; transition: none; position: relative; }
.product-card:hover { box-shadow: none; transform: none; }
.product-card .imgzone { position: relative; }
.product-card .imgwrap { aspect-ratio: 2/3; background: var(--bg-soft); overflow: hidden; position: relative; display: block; }
.product-card .imgwrap img { width: 100%; height: 100%; object-fit: cover; transition: none; }
.product-card:hover .imgwrap img { transform: none; }
.product-card .body { padding: 8px 0 0; flex: 1; display: flex; flex-direction: column; gap: 0; }
.product-card .brand { font-size: 13px; font-weight: var(--w-demi); letter-spacing: .4px; text-transform: uppercase; color: var(--ink); margin: 8px 0 5px; }
.product-card .pname { font-size: 13px; font-weight: var(--w-medium); color: var(--muted); letter-spacing: .2px; line-height: 1.35; margin-bottom: 12px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.product-card .price { margin-top: auto; padding-top: 0; font-weight: var(--w-demi); color: var(--ink); font-size: 13px; letter-spacing: .4px; }
/* Struck-through original in #C2C2C2 — the one place that grey is used — and the
   saving in red, which is this card's single accent. */
.price .was { color: var(--faint); text-decoration: line-through; font-weight: var(--w-demi); font-size: 13px; margin: 0 5px 0 5px; }
.price .off { color: var(--pink); font-weight: var(--w-demi); font-size: 13px; }
/* wishlist heart */
.wish-heart { position: absolute; top: 10px; right: 10px; z-index: 3; opacity: 0; transition: opacity .18s var(--ease); }
.product-card:hover .wish-heart, .product-card:focus-within .wish-heart { opacity: 1; }
@media (hover: none) { .wish-heart { opacity: 1; } }
[dir="rtl"] .wish-heart { right: auto; left: 10px; }
.wish-heart button { width: 28px; height: 28px; border-radius: 0; background: none; border: none; cursor: pointer; font-size: 15px; color: var(--ink); box-shadow: none; transition: color .15s; filter: drop-shadow(0 1px 2px rgba(255,255,255,.9)); }
.wish-heart button:hover { color: var(--pink); transform: none; }
/* quick add */
.product-card .quick-add { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; transform: none; transition: opacity .22s var(--ease); z-index: 2; }
.product-card:hover .quick-add, .product-card:focus-within .quick-add { opacity: 1; transform: none; }
.quick-add button { width: 100%; background: rgba(255,255,255,.95); color: var(--ink); border: none; border-top: 1px solid var(--line); padding: 12px; border-radius: 0; font-size: 12px; font-weight: var(--w-demi); letter-spacing: .4px; text-transform: uppercase; cursor: pointer; font-family: inherit; transition: background .15s, color .15s; }
.quick-add button:hover { background: var(--ink); color: #fff; }
@media (hover: none) { .product-card .quick-add { opacity: 1; transform: none; } .quick-add button { padding: 10px; font-size: 11px; } }

.badge { display: inline-flex; align-items: center; font-size: 10px; font-weight: var(--w-demi); padding: 0 6px; min-height: 18px; border-radius: var(--radius-hair); letter-spacing: .4px; text-transform: uppercase; }
.badge.sale { background: var(--pink); color: #fff; position: absolute; top: 10px; left: 10px; z-index: 2; }
[dir="rtl"] .badge.sale { left: auto; right: 10px; }
/* Pre-order stacks under the sale badge on the left, never on the right: the wishlist
   heart owns that corner and would sit on top of it. `.has-sale` is set on the badge
   when the card also shows a discount, so the two never overlap each other either. */
.badge.preorder { background: #5A4413; color: #fff; position: absolute; top: 10px; left: 10px; z-index: 2; }
.badge.preorder.has-sale { top: 34px; }   /* clears the sale badge above it */
[dir="rtl"] .badge.preorder { left: auto; right: 10px; }
.badge.pre { background: #F4F4F6; color: #8A6A1F; }
.badge.founder { background: var(--amber-soft); color: var(--amber); }
.badge.st-pending { background: var(--amber-soft); color: var(--amber); }
.badge.st-confirmed { background: var(--blue-soft); color: var(--blue); }
.badge.st-processing { background: var(--violet-soft); color: var(--violet); }
.badge.st-shipped { background: var(--green-soft); color: var(--green); }
.badge.st-delivered { background: var(--green); color: #fff; }
.badge.st-cancelled, .badge.st-rejected { background: var(--coral-soft); color: var(--coral); }
.badge.st-awaiting_approval, .badge.st-requested { background: var(--amber-soft); color: var(--amber); }
.badge.st-approved { background: var(--blue-soft); color: var(--blue); }
.badge.st-refunded, .badge.st-returned { background: var(--violet-soft); color: var(--violet); }
.badge.st-exchanged { background: var(--green-soft); color: var(--green); }
.badge.st-approved { background: var(--blue-soft); color: var(--blue); }
.badge.st-paid { background: var(--green); color: #fff; }
.badge.st-approved, .badge.st-paid, .badge.st-active, .badge.st-handled { background: var(--green-soft); color: var(--green); }
.badge.st-open, .badge.st-draft, .badge.st-paused { background: var(--amber-soft); color: var(--amber); }
.badge.st-forwarded { background: var(--violet-soft); color: var(--violet); }

/* offer banners (3-up strip) */
.offer-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
@media (max-width: 860px) { .offer-strip { grid-template-columns: 1fr; } }
.offer-card { border-radius: 0; padding: 26px 28px; color: #fff; display: flex; flex-direction: column; gap: 6px; min-height: 140px; justify-content: center; transition: none; }
.offer-card:hover { box-shadow: none; }
.offer-card .oc-k { text-transform: uppercase; letter-spacing: 1.2px; font-size: 10px; font-weight: var(--w-demi); opacity: .8; }
.offer-card .oc-t { font-size: 18px; font-weight: var(--w-demi); letter-spacing: .4px; line-height: 1.25; }
.offer-card .oc-s { font-size: 12px; letter-spacing: .2px; opacity: .85; }
.offer-card.o1 { background: var(--pink); }
.offer-card.o2 { background: #212121; }
.offer-card.o3 { background: #58585A; }

/* brand spotlight (portrait cards, offer line below) */
.spot-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px 18px; }
@media (max-width: 1100px) { .spot-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .spot-grid { grid-template-columns: repeat(2, 1fr); } }
.spot-card { display: block; }
.spot-card .spot-img { aspect-ratio: 2/3; border-radius: 0; overflow: hidden; position: relative; background: var(--bg-soft); }
.spot-card .spot-img > img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.spot-card:hover .spot-img > img { transform: scale(1.05); }
/* Logo above the name, both centred on the tile's bottom plate. */
.spot-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 10px 14px; background: linear-gradient(180deg, rgba(0,19,37,0) 0%, rgba(0,19,37,.5) 42%, rgba(0,19,37,.85) 100%); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 9px; font-weight: 800; font-size: 14px; line-height: 1.25; letter-spacing: .8px; text-transform: uppercase; text-align: center; overflow-wrap: break-word; }
/* Narrow tiles: shrink the name so long single-word brands still fit on one line. */
@media (max-width: 640px) { .spot-name { font-size: 12px; letter-spacing: .2px; gap: 7px; padding: 30px 6px 12px; } }
.spot-logo { width: 1.5cm; height: 1.5cm; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); background: #fff; object-fit: cover; flex-shrink: 0; box-shadow: 0 2px 10px rgba(0,19,37,.28); }
/* No tile image: drop the plate and centre the same logo + name in the tile. */
.spot-img.no-img { background: linear-gradient(160deg, var(--pink-soft), var(--bg-soft)); }
.spot-img.no-img .spot-name { top: 0; justify-content: center; padding: 14px; background: none; color: var(--ink); }
.spot-img.no-img .spot-logo { width: 2.2cm; height: 2.2cm; border-color: rgba(0,19,37,.06); box-shadow: var(--shadow); }
.spot-off { margin-top: 10px; font-weight: 800; font-size: 15px; color: var(--ink); }
.spot-card:hover .spot-off { color: var(--pink); }
.spot-sub { color: var(--muted); font-size: 13px; margin-top: 1px; }

.brand-card { background: var(--bg); border: 1px solid var(--line); border-radius: 0; padding: 24px 18px; text-align: center; transition: box-shadow .2s, transform .2s var(--ease); }
.brand-card:hover { box-shadow: none; }
.brand-card img.logo-img { width: 82px; height: 82px; border-radius: 50%; margin: 0 auto 12px; border: 1px solid var(--line); }
.brand-card h3 { color: var(--ink); font-size: 16.5px; font-weight: 700; }
.brand-card .tag { color: var(--muted); font-size: 12.5px; margin: 3px 0 8px; }

.cat-card { background: var(--bg); border: 1px solid var(--line); border-radius: 0; padding: 22px 12px; text-align: center; transition: box-shadow .2s, transform .2s var(--ease); }
.cat-card:hover { box-shadow: none; }
.cat-card .emoji { font-size: 30px; margin-bottom: 6px; }
.cat-card .name { font-weight: 600; color: var(--ink); font-size: 14px; }

/* ---------- Page shells ----------
   The listing header is a line of type on white, not a coloured banner: a
   gradient band above a grid of garments competes with the photography, which
   is the one thing the layout exists to show. */
/* Nine templates render .page-head WITHOUT a .container inside — which worked
   while it was a full-bleed centred banner and put the text at x=0 the moment
   it became left-aligned type on white. Padding it to the column fixes all nine
   at once and still lets a page set its own full-bleed background. */
.page-head { background: var(--bg); color: var(--ink); padding: 28px calc((100% - var(--col)) / 2) 4px; text-align: left; border-bottom: none; }
.page-head h1 { font-size: 24px; font-weight: var(--w-demi); letter-spacing: .6px; text-transform: uppercase; color: var(--ink); margin: 0; }
.page-head p { color: var(--muted); max-width: 640px; margin: 8px 0 0; font-size: 13px; letter-spacing: .2px; }
.page-head .eyebrow { color: var(--muted); margin-bottom: 6px; }
.page-head a { color: var(--muted); }
.page-head a:hover { color: var(--pink); }
.narrow { max-width: 760px; margin: 0 auto; }
.card { background: var(--bg); border: 1px solid var(--line); border-radius: 0; padding: 24px; }
.prose h2 { color: var(--ink); margin: 24px 0 8px; font-size: 20px; }
.prose h3 { color: var(--ink); margin: 16px 0 6px; font-size: 16px; }
.prose p, .prose li { color: var(--ink); font-size: 13px; line-height: 1.7; }
.prose ul { padding-left: 22px; margin: 8px 0; }
.prose a { color: var(--pink); }

/* ---------- Forms ---------- */
form .field { margin-bottom: 15px; }
label { display: block; font-size: 11px; font-weight: var(--w-demi); letter-spacing: .4px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=url], input[type=date], input[type=search], select, textarea {
  width: 100%; border: 1px solid var(--line-dark); background: var(--bg); border-radius: var(--radius); padding: 11px 13px; font-size: 14px; font-family: inherit; outline: none; transition: border-color .2s, box-shadow .2s; color: var(--ink); }
input[type=date] { -webkit-appearance: none; appearance: none; min-height: 42px; }

/* ---------- Admin filter toolbar ---------- */
.filter-toolbar { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; background: var(--bg); border: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; padding: 14px 0; margin-bottom: 18px; }
.filter-toolbar .field { margin: 0; min-width: 0; }
.filter-toolbar .field label { white-space: nowrap; }
.filter-toolbar input, .filter-toolbar select { height: 40px; }
.filter-toolbar .btn { height: 40px; min-height: 40px; padding: 0 22px; display: inline-flex; align-items: center; }
.filter-toolbar .clear-link { font-size: 12.5px; color: var(--muted); align-self: center; margin-top: 18px; }
.filter-toolbar .clear-link:hover { color: var(--pink); }
/* per-field widths live here (not inline) so the mobile rules below can override */
.filter-toolbar .f-search { flex: 1 1 220px; max-width: 300px; }
.filter-toolbar .f-status { width: 170px; }
.filter-toolbar .f-payment { width: 130px; }
.filter-toolbar .f-role { width: 190px; }
.filter-toolbar .f-date { width: 160px; }
@media (max-width: 700px) {
  .filter-toolbar { gap: 10px; }
  .filter-toolbar .f-search, .filter-toolbar .f-status, .filter-toolbar .f-payment, .filter-toolbar .f-role, .filter-toolbar .f-date { width: auto; max-width: none; flex: 1 1 46%; }
  .filter-toolbar .btn { flex: 1 1 100%; justify-content: center; }
  .filter-toolbar .clear-link { margin: 0 auto; }
}
input:focus, select:focus, textarea:focus { border-color: var(--ink); box-shadow: none; }
textarea { min-height: 110px; resize: vertical; }
.checkline { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink-soft); margin-bottom: 10px; font-weight: 400; }
.checkline input { margin-top: 4px; accent-color: var(--pink); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 700px) { .form-row { grid-template-columns: 1fr; } }
/* Contact: the message form beside its details panel. The old markup set
   `3fr 2fr` inline on a bare .grid, which the responsive rules only reach
   through .cols-*, so the form stayed in two squeezed columns on a phone. */
.contact-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 34px; align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 20px; } }
.hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
.hint a { color: var(--pink); }

/* ---------- Admin settings tabs ---------- */
.set-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; border-bottom: 1px solid var(--line); padding-bottom: 0; }
.set-tab { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--ink-soft); font-family: inherit; font-size: 13px; font-weight: 600; padding: 9px 14px; margin-bottom: -1px; cursor: pointer; border-radius: 8px 8px 0 0; transition: background .15s, color .15s, border-color .15s; white-space: nowrap; }
.set-tab .i { opacity: .8; }
.set-tab:hover { background: var(--bg-soft); color: var(--ink); }
.set-tab.on { color: var(--pink); border-bottom-color: var(--pink); background: var(--pink-soft); }
.set-panel { display: none; }
.set-panel.on { display: block; animation: setFade .18s var(--ease, ease); }
@keyframes setFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.set-blurb { color: var(--muted); font-size: 13px; margin: 0 0 6px; }
.set-help { display: block; font-size: 11.5px; color: var(--muted); margin-top: 4px; font-weight: 400; }
.img-field { display: flex; gap: 8px; align-items: center; }
.img-field input[type="url"] { flex: 1; min-width: 0; }
.img-field .btn { white-space: nowrap; flex-shrink: 0; }
.img-field-preview { margin-top: 8px; }
.img-field-preview img { max-height: 90px; max-width: 240px; border-radius: 8px; border: 1px solid var(--line, rgba(0,0,0,0.1)); object-fit: cover; }

/* ---------- Toasts & notices ---------- */
.flash { position: fixed; top: 16px; right: 16px; z-index: 200; max-width: 380px; padding: 13px 18px; border-radius: 10px; font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow); animation: toast-in .3s var(--ease); }
[dir="rtl"] .flash { right: auto; left: 16px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px); } }
.flash.success { background: var(--green); color: #fff; }
.flash.error { background: var(--coral); color: #fff; }
.flash a { color: inherit; text-decoration: underline; }
/* Block flow, not flex: notices contain inline markup (<strong>, <a>) that flex
   would split into separate columns. Icons align via the .notice .ico rule below. */
.notice { background: var(--bg-soft); padding: 14px 16px; border-radius: 0; font-size: 13px; letter-spacing: .2px; margin-bottom: 20px; border: none; border-left: 2px solid var(--ink); box-shadow: none; display: block; line-height: 1.55; }
.notice.gold { background: var(--bg-soft); color: var(--amber); border-left-color: var(--amber); box-shadow: none; }
.notice.sea { background: var(--bg-soft); color: var(--green); border-left-color: var(--green); box-shadow: none; }
.notice.coral { background: var(--bg-soft); color: var(--coral); border-left-color: var(--coral); box-shadow: none; }
.notice a { color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(138, 106, 28, 0.4); text-underline-offset: 2px; }
.notice a:hover { text-decoration-color: #8a6a1c; }

/* ---------- Tables ---------- */
table.list { width: 100%; border-collapse: collapse; background: var(--bg); border-radius: 0; overflow: hidden; border: none; box-shadow: none; font-size: 13px; }
table.list th { background: transparent; text-align: left; padding: 14px 16px 10px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: var(--w-demi); border-bottom: 1px solid var(--line-dark); }
[dir="rtl"] table.list th { text-align: right; }
table.list td { padding: 16px; border-top: 1px solid var(--line); vertical-align: middle; transition: background 0.2s ease; }
table.list tr:hover td { background: var(--bg-soft); }
table.list td.nowrap, table.list th.nowrap { white-space: nowrap; }
.thumb { width: 44px; height: 54px; object-fit: cover; border-radius: 0; }

/* Fulfilment buttons in the seller orders list. They stay on one line: letting them
   wrap made the column claim width the order code and date then had to wrap out of,
   so one narrow column dragged the whole table out of shape. Tighter than .btn.sm
   because up to three sit side by side in a cell that already shares ten columns. */
.ship-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; }
/* border-box plus a transparent border on the solid buttons: ghost buttons carry a
   1.5px border, so without this they stand ~3px taller and the row never lines up. */
.ship-actions .btn { box-sizing: border-box; height: 30px; padding: 0 10px; font-size: 11.5px;
  white-space: nowrap; display: inline-flex; align-items: center; border: 1.5px solid transparent; }
.ship-actions .btn .i { margin-right: 5px; }
.ship-note { font-size: 11px; color: var(--muted); margin-top: 6px; white-space: nowrap; }
/* On the mobile cards the same buttons have the full card width, so they may wrap. */
.mi-body .ship-actions { flex-wrap: wrap; }
.mi-body .ship-note { white-space: normal; }

/* Ten columns of order data plus a button group. The default 16px cell padding spent
   ~200px on gutters, squeezing the item name into a three-line column. */
table.list.dense th { padding: 16px 10px 11px; }
table.list.dense td { padding: 12px 10px; }
/* The product name is the one column worth reading at a glance; without a floor the
   auto layout gave it the leftovers and wrapped it to three lines. */
table.list.dense .item-col { min-width: 200px; }
/* Same squeeze collapsed the status select to a bare chevron with its value hidden. */
table.list.dense select { min-width: 118px; }
table.list.dense .pick-col { width: 30px; padding-right: 0; }
table.list.dense .pick-col input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--pink); }

/* Batch-print bar. Hidden until something is ticked, so it never sits there empty. */
.bulk-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 9px 14px;
  background: var(--pink-soft); border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--pink); }
.bulk-bar[hidden] { display: none; }
.bulk-bar .btn { margin-left: auto; }
.bulk-bar .btn + .btn { margin-left: 0; }
/* The select replaces the status badge that used to sit beside it, so it carries the
   badge's colour — the status still reads at a glance without a column of its own. */
.st-select { font-weight: 700; }
.st-select.st-pending { color: var(--amber); }
.st-select.st-confirmed, .st-select.st-processing { color: var(--ink); }
.st-select.st-shipped, .st-select.st-delivered { color: var(--green); }
.st-select.st-cancelled { color: var(--coral); }

/* .panel is a grid, so .main-pane inherits min-width:auto and cannot shrink below the
   widest thing inside it — a table with nowrap cells then pushes the whole page wider
   than the window and the shell scrolls sideways. min-width:0 lets the pane hold its
   track, and the wrapper gives the table somewhere to scroll instead of being clipped.
   Scoped with :has() so panes without a scroll wrapper keep today's behaviour rather
   than silently cutting a wide table off; browsers without :has() also keep it. */
.main-pane:has(.table-scroll) { min-width: 0; }
.table-scroll { overflow-x: auto; }

/* ---------- Footer ----------
   Quiet band, hairline rules, 12px uppercase column heads. Nothing is filled
   and nothing is boxed — the rules do the separating. */
footer.site { background: var(--bg-soft); color: var(--ink); margin-top: 60px; padding: 40px 0 24px; font-size: 13px; letter-spacing: .2px; border-top: 1px solid var(--line); }
footer .cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-bottom: 32px; }
@media (max-width: 1000px) { footer .cols { grid-template-columns: 1fr 1fr 1fr 1fr; } }
@media (max-width: 800px) {
  footer .cols { grid-template-columns: 1fr 1fr; gap: 24px; }
  footer .cols > .brand-col { grid-column: 1 / -1; margin-bottom: 8px; display: flex; flex-direction: column; align-items: center; text-align: center; }
}
footer h4 small { display: block; font-size: 10px; letter-spacing: .4px; text-transform: none; color: var(--muted); margin-top: 10px; font-weight: var(--w-medium); }
footer h4 { color: var(--ink); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px; font-weight: var(--w-demi); }
footer a { display: block; padding: 3px 0; color: var(--muted); transition: color .15s; } footer a:hover { color: var(--pink); }
footer .fine { border-top: 1px solid var(--line); padding-top: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 11px; letter-spacing: .4px; color: var(--muted); text-align: center; }
footer .logo { color: var(--pink); }
footer .logo span { color: var(--ink); }

/* ---------- Panel (Studio / Admin) ---------- */
.panel-top { display: flex; align-items: center; gap: 14px; padding: 12px clamp(16px, 2.5vw, 48px); background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.panel-top .logo { font-size: 21px; }
.panel-chip { background: var(--pink-soft); color: var(--pink); font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; }
.panel-user { margin-left: auto; font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
[dir="rtl"] .panel-user { margin-left: 0; margin-right: auto; }
.panel-user a { color: var(--ink); font-weight: 600; }
.panel-user a:hover { color: var(--pink); }
.panel-user .sep { color: var(--line-dark); }
.panel { display: grid; grid-template-columns: 248px 1fr; min-height: calc(100vh - 58px); }
.side { background: var(--bg); color: var(--ink-soft); padding: 22px 0; border-right: 1px solid var(--line); }
[dir="rtl"] .side { border-right: none; border-left: 1px solid var(--line); }
.side .brand-mini { padding: 0 22px 16px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.side .brand-mini .nm { color: var(--ink); font-weight: 800; font-size: 16px; }
.side .brand-mini .rl { font-size: 10px; color: var(--pink); letter-spacing: 2px; text-transform: uppercase; font-weight: 700; margin-top: 2px; }
.side a.item { display: block; padding: 11px 22px; font-size: 13.5px; color: var(--ink-soft); border-left: 3px solid transparent; font-weight: 500; transition: background .15s, color .15s; }
[dir="rtl"] .side a.item { border-left: none; border-right: 3px solid transparent; }
.side a.item:hover { background: var(--bg-soft); color: var(--ink); }
.side a.item.on { background: var(--pink-soft); color: var(--pink); border-color: var(--pink); font-weight: 700; }
.main-pane { padding: 32px 36px; background: var(--bg-soft); }
.main-pane h1 { color: var(--ink); font-size: 25px; margin-bottom: 22px; font-weight: 800; }
.main-pane h2 { font-size: 18px; }
.stat-row { display: grid; gap: 18px; margin-bottom: 32px; }
.stat-row.primary { grid-template-columns: repeat(2, 1fr); }
.stat-row.secondary { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
@media (max-width: 600px) { .stat-row.primary { grid-template-columns: 1fr; } }
.stat { background: var(--bg); border: none; border-radius: 14px; padding: 20px 22px; box-shadow: 0 4px 14px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.02); display: flex; flex-direction: column; justify-content: space-between; transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); position: relative; overflow: hidden; }
.stat::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--pink)); opacity: 0; transition: opacity 0.3s ease; }
.stat:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.08), 0 4px 10px rgba(0,0,0,0.04); }
.stat:hover::after { opacity: 1; }
.stat .stat-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: var(--bg-soft); color: var(--pink); margin-bottom: 16px; border: 1px solid var(--line); transition: background 0.3s ease, color 0.3s ease; }
.stat:hover .stat-icon { background: var(--pink); color: #fff; border-color: transparent; }
.stat .stat-icon svg { width: 22px; height: 22px; }
.stat .stat-icon.icon-green { color: #2ecc71; background: rgba(46, 204, 113, 0.1); border-color: rgba(46, 204, 113, 0.2); }
.stat:hover .stat-icon.icon-green { background: #2ecc71; color: #fff; border-color: transparent; }
.stat .stat-icon.icon-blue { color: #3498db; background: rgba(52, 152, 219, 0.1); border-color: rgba(52, 152, 219, 0.2); }
.stat:hover .stat-icon.icon-blue { background: #3498db; color: #fff; border-color: transparent; }
.stat .stat-icon.icon-purple { color: #9b59b6; background: rgba(155, 89, 182, 0.1); border-color: rgba(155, 89, 182, 0.2); }
.stat:hover .stat-icon.icon-purple { background: #9b59b6; color: #fff; border-color: transparent; }
.stat .stat-icon.icon-orange { color: #f39c12; background: rgba(243, 156, 18, 0.1); border-color: rgba(243, 156, 18, 0.2); }
.stat:hover .stat-icon.icon-orange { background: #f39c12; color: #fff; border-color: transparent; }
.stat .stat-content .v { font-size: 26px; font-weight: 800; color: var(--ink); line-height: 1.1; word-break: break-word; letter-spacing: -0.5px; }
.stat .stat-content .l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.3px; font-weight: 700; margin-top: 8px; }
@media (max-width: 860px) { .panel { grid-template-columns: 1fr; } .side, .main-pane { min-width: 0; } .side { display: flex; align-items: center; overflow-x: auto; padding: 0; border-right: none; border-bottom: 1px solid var(--line); } .side .brand-mini { display: none; } .side a.item { white-space: nowrap; border-left: none !important; border-right: none !important; border-bottom: 3px solid transparent; padding: 13px 16px; } .side a.item.on { border-color: var(--pink); background: var(--pink-soft); } .main-pane { padding: 22px 16px; } .panel-user { display: none; } }

/* ---------- Charts ---------- */
.chart { display: flex; align-items: flex-end; gap: 12px; height: 180px; background: var(--bg); border: none; border-radius: 14px; padding: 24px 24px 30px; box-shadow: 0 4px 20px rgba(0,0,0,0.03), 0 1px 3px rgba(0,0,0,0.02); background-image: repeating-linear-gradient(0deg, transparent, transparent 34px, rgba(0,0,0,0.04) 34px, rgba(0,0,0,0.04) 35px); }
.chart .bar { flex: 1; background: linear-gradient(180deg, var(--pink), var(--gold)); border-radius: 6px 6px 0 0; min-height: 4px; position: relative; transition: filter 0.2s ease, transform 0.2s ease; transform-origin: bottom; opacity: 0.9; }
.chart .bar:hover { filter: brightness(1.15); transform: scaleY(1.03); opacity: 1; }
.chart .bar span { position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--muted); white-space: nowrap; font-weight: 700; letter-spacing: 0.5px; }
.chart .bar .bar-val { position: absolute; top: -17px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 800; color: var(--plum); white-space: nowrap; }
.chart .bar.bar-empty { opacity: 0.28; }
.chart-wrap { padding-bottom: 32px; }

/* ---------- Misc ---------- */
.accordion details { background: var(--bg); border: 1px solid var(--line); border-radius: 0; margin-bottom: 10px; transition: border-color .2s; }
.accordion details[open] { border-color: var(--pink); }
.accordion summary { cursor: pointer; font-weight: 600; padding: 15px 20px; color: var(--ink); list-style: none; font-size: 14.5px; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: '+'; float: right; color: var(--pink); font-size: 18px; line-height: 1; }
[dir="rtl"] .accordion summary::after { float: left; }
.accordion details[open] summary::after { content: '–'; }
.accordion .ans { padding: 0 20px 16px; color: var(--ink-soft); font-size: 13.5px; }
.accordion .ans a { color: var(--pink); }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; } }
.step { background: var(--bg); border: 1px solid var(--line); border-radius: 0; padding: 26px 24px; text-align: center; }
.step .num { width: 34px; height: 34px; border-radius: 0; background: transparent; border: 1px solid var(--ink); color: var(--ink); font-weight: var(--w-demi); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; font-size: 14px; }
.step h3 { color: var(--ink); margin-bottom: 6px; font-size: 14px; letter-spacing: .4px; text-transform: uppercase; }
.step p { color: var(--muted); font-size: 12px; letter-spacing: .2px; }

.qty-input { width: 64px !important; text-align: center; }
.progress-track { display: flex; gap: 5px; margin: 18px 0 8px; }
.progress-track .seg { flex: 1; height: 7px; border-radius: 4px; background: var(--line); }
.progress-track .seg.done { background: var(--green); }
.muted { color: var(--muted); font-size: 12.5px; }
.right { text-align: right; } [dir="rtl"] .right { text-align: left; }
.mt { margin-top: 20px; } .mb { margin-bottom: 20px; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.score-pill { font-size: 11.5px; font-weight: 700; padding: 2px 10px; border-radius: 999px; }
.score-hi { background: var(--green-soft); color: var(--green); }
.score-mid { background: var(--amber-soft); color: var(--amber); }
.score-lo { background: var(--coral-soft); color: var(--coral); }

.gallery-main { aspect-ratio: 2/3; border-radius: 0; overflow: hidden; background: var(--bg-soft); border: 1px solid var(--line); }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.gallery-thumbs img { width: 66px; height: 82px; object-fit: cover; border-radius: 0; border: 1px solid var(--line); cursor: pointer; transition: border-color .2s; }
.gallery-thumbs img.on, .gallery-thumbs img:hover { border-color: var(--pink); }

/* ===== Designer storefront ("The Atelier") — kasavu-gold editorial masthead ===== */
.sf { --gold: var(--gold-brand); --gold-line: #D3D3D8; }

.sf-hero { position: relative; }
.sf-banner { position: relative; height: 300px; overflow: hidden;
  background: linear-gradient(115deg, #EDEDF0 0%, #F4F4F6 55%, #EDEDF0 100%); }
.sf-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* fade the (arbitrary, often busy) banner down into the cream page */
.sf-scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(24, 24, 26,.10) 0%, rgba(24, 24, 26,0) 34%, rgba(254,253,249,.35) 74%, var(--bg) 100%); }

.sf-identity { position: relative; max-width: 660px; margin: -66px auto 0; padding: 0 20px 4px; text-align: center; }

/* gold-ringed logo medallion, straddling the banner seam */
.sf-medallion { width: 120px; height: 120px; margin: 0 auto 20px; border-radius: 50%; padding: 4px;
  background: conic-gradient(from 210deg, var(--gold), #efd7a0 25%, var(--gold) 50%, #efd7a0 75%, var(--gold));
  box-shadow: 0 12px 34px rgba(24, 24, 26,.20); }
.sf-medallion img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
  background: var(--bg); border: 4px solid var(--bg); }

.sf-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin: 0; }

.sf-name { font-family: 'Fraunces', Georgia, 'Times New Roman', serif; font-weight: 600;
  font-size: clamp(32px, 5vw, 46px); line-height: 1.04; letter-spacing: -.01em; color: var(--ink);
  margin: 9px 0 0; display: inline-flex; align-items: center; gap: 11px; flex-wrap: wrap; justify-content: center; }
.sf-verified { display: inline-flex; align-items: center; }

/* the signature: twin gold hairlines flanking a small kasavu diamond */
.sf-rule { display: flex; align-items: center; justify-content: center; gap: 12px; width: 190px; margin: 18px auto 16px; }
.sf-rule span { flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--gold-line)); box-shadow: 0 3px 0 -2px var(--gold-line); }
.sf-rule span:last-child { background: linear-gradient(to left, transparent, var(--gold-line)); }
.sf-rule i { flex: 0 0 auto; width: 7px; height: 7px; transform: rotate(45deg); border: 1.5px solid var(--gold); }

.sf-tagline { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(16px, 2.4vw, 19px); color: var(--ink-soft); margin: 0 0 16px; }

.sf-stats { display: inline-flex; align-items: center; justify-content: center; gap: 13px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); margin-bottom: 18px; }
.sf-stats strong { color: var(--ink); font-weight: 700; }
.sf-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
.sf-rating { display: inline-flex; align-items: center; gap: 4px; color: var(--gold-brand); font-weight: 600; }

.sf-about { font-size: 15px; line-height: 1.75; color: var(--ink-soft); max-width: 580px; margin: 0 auto 18px; }

.sf-links { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.sf-ig { display: inline-flex; align-items: center; gap: 6px; color: var(--pink); font-weight: 600; font-size: 13.5px; text-decoration: none; }
.sf-ig:hover { text-decoration: underline; }
.sf-badge { background: var(--ink); color: var(--bg-soft); font-size: 11px; font-weight: 600; letter-spacing: .04em; padding: 5px 13px; border-radius: 999px; }

.sf-promo { margin: 30px 0 6px; border-radius: 0; overflow: hidden; box-shadow: none; }
.sf-promo img { width: 100%; display: block; }

/* section heads share the kasavu-gold eyebrow + serif */
.sf-sechead { text-align: center; margin: 46px 0 26px; }
.sf-sechead .sf-eyebrow { display: block; margin-bottom: 5px; }
.sf-sechead h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: clamp(22px, 3vw, 27px); color: var(--ink); margin: 0; }

.sf-cats-track { display: flex; flex-wrap: wrap; gap: 24px 28px; justify-content: center; }
.sf-cat { display: block; text-decoration: none; text-align: center; width: 94px; }
.sf-cat--dup { display: none; } /* second copy only used by the mobile marquee */
.sf-cat-ring { display: flex; align-items: center; justify-content: center; width: 90px; height: 90px; border-radius: 50%; margin: 0 auto; overflow: hidden; background: var(--bg-soft); border: 1px solid var(--line); color: var(--ink-soft); transition: transform .22s var(--ease), box-shadow .22s, border-color .22s; }
.sf-cat-ring img { width: 100%; height: 100%; object-fit: cover; }
.sf-cat:hover .sf-cat-ring { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(24, 24, 26,.16); border-color: var(--gold); }
.sf-cat.is-sel .sf-cat-ring { border: 2px solid var(--gold); box-shadow: 0 6px 18px rgba(201,155,63,.30); color: var(--ink); }
.sf-cat-label { display: block; margin-top: 11px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.sf-cat.is-sel .sf-cat-label { color: var(--ink); }
.sf-cat:focus-visible .sf-cat-ring { outline: 2px solid var(--gold); outline-offset: 3px; }

.sf-collections { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 22px 0 4px; }
.sf-collections a { text-decoration: none; font-size: 13px; font-weight: 600; color: var(--ink-soft); border: 1px solid var(--line-dark); border-radius: 999px; padding: 8px 17px; transition: border-color .18s, color .18s, background .18s; }
.sf-collections a span { color: var(--muted); font-weight: 500; margin-left: 2px; }
.sf-collections a:hover { border-color: var(--gold); color: var(--ink); background: var(--bg-soft); }

.sf-grid { margin-bottom: 44px; }
.sf-empty { padding: 40px 0 60px; }

/* orchestrated masthead reveal */
@keyframes sf-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.sf-identity > * { animation: sf-rise .6s var(--ease) backwards; }
.sf-medallion { animation-delay: 0s; }
.sf-eyebrow { animation-delay: .06s; }
.sf-name { animation-delay: .12s; }
.sf-rule { animation-delay: .18s; }
.sf-tagline { animation-delay: .24s; }
.sf-stats { animation-delay: .30s; }
.sf-about { animation-delay: .36s; }
.sf-links { animation-delay: .42s; }

/* mobile: categories become one seamless auto-scrolling line (marquee) */
@keyframes sf-marquee { to { transform: translateX(-50%); } }

@media (max-width: 640px) {
  .sf-banner { height: 172px; }
  .sf-identity { margin-top: -54px; }
  .sf-medallion { width: 96px; height: 96px; }
  .sf-about { font-size: 14px; }
  .sf-cat, .sf-cat-ring { width: 76px; }
  .sf-cat-ring { height: 76px; }

  .sf-cats { overflow: hidden; margin-inline: calc(-1 * clamp(16px, 2.5vw, 48px)); }
  .sf-cats-track { flex-wrap: nowrap; gap: 0; justify-content: flex-start; width: max-content; padding-block: 2px;
    animation: sf-marquee var(--sf-mq, 20s) linear infinite; }
  .sf-cat { flex: 0 0 auto; margin-right: 20px; } /* uniform spacing keeps the -50% loop seamless */
  .sf-cat--dup { display: block; }
  /* let shoppers stop the strip to tap a category */
  .sf-cats:hover .sf-cats-track,
  .sf-cats:focus-within .sf-cats-track,
  .sf-cats:active .sf-cats-track { animation-play-state: paused; }
}

@media (prefers-reduced-motion: reduce) {
  .sf-identity > * { animation: none; }
  .sf-cat:hover .sf-cat-ring { transform: none; }
}
/* reduced-motion: no auto-scroll — keep the single line but let it be swiped by hand */
@media (prefers-reduced-motion: reduce) and (max-width: 640px) {
  .sf-cats { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sf-cats-track { animation: none; }
  .sf-cat--dup { display: none; }
}

.summary-box { background: var(--bg); border: 1px solid var(--line); border-radius: 0; padding: 22px 24px; }
.summary-box .row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 14px; color: var(--ink-soft); }
.summary-box .row.total { border-top: 1px solid var(--line); margin-top: 9px; padding-top: 12px; font-weight: 800; font-size: 16px; color: var(--ink); }
.summary-box .hint a { color: var(--pink); }

/* Product "assurance" trust badges — icon chip + stacked title/desc, vertically centered */
.assurance { background: var(--bg); border: none; border-top: 1px solid var(--line); border-radius: 0; padding: 0; }
.assurance-item { display: flex; align-items: center; gap: 12px; padding: 13px 0; }
.assurance-item + .assurance-item { border-top: 1px solid var(--line); }
.assurance-ico { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 0; background: none; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
.assurance-ico .ico { margin: 0; }
.assurance-txt { display: flex; flex-direction: column; min-width: 0; }
.assurance-txt strong { color: var(--ink); font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.assurance-txt span { color: var(--muted); font-size: 13px; line-height: 1.4; margin-top: 2px; }

.empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty .big { font-size: 40px; margin-bottom: 10px; }
/* :not(.btn) matters. This rule is `.empty a` (0,1,1) and `.btn` is (0,1,0),
   so it used to win on the empty-cart button and paint the label the same
   colour as the button behind it — invisible while the button was red, red on
   charcoal after. Pre-existing; caught when the button went dark. */
.empty a:not(.btn) { color: var(--pink); font-weight: var(--w-demi); }

/* marketplace filter bar */
.filter-toggle { padding: 0; overflow: hidden; }
.filter-toggle summary { display: none; cursor: pointer; list-style: none; padding: 14px 16px; font-weight: 700; font-size: 13.5px; color: var(--ink); }
.filter-toggle summary::-webkit-details-marker { display: none; }
.filter-toggle summary::after { content: '▾'; float: right; color: var(--pink); transition: transform .2s; }
[dir="rtl"] .filter-toggle summary::after { float: left; }
.filter-toggle[open] summary::after { transform: rotate(180deg); }
@media (max-width: 860px) {
  .filter-toggle summary { display: block; }
  .filter-toggle:not([open]) { padding: 0; }
  .filter-toggle[open] summary { border-bottom: 1px solid var(--line); }
}
.filter-bar { display: grid; grid-template-columns: 2fr 1fr 1fr .7fr .7fr 1fr auto; gap: 12px; align-items: end; padding: 18px; }
@media (max-width: 1000px) { .filter-bar { grid-template-columns: repeat(3, 1fr); } .filter-bar > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 600px) { .filter-bar { grid-template-columns: 1fr 1fr; } }

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

/* edit / occasion cards on homepage */
.edit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 900px) { .edit-grid { grid-template-columns: repeat(2, 1fr); } }
.edit-card { border-radius: 0; padding: 26px 22px; min-height: 130px; display: flex; flex-direction: column; justify-content: center; gap: 4px; color: #fff; transition: none; }
.edit-card:hover { transform: none; box-shadow: none; }
.edit-card .ec-emoji { font-size: 22px; margin-bottom: 4px; }
.edit-card .ec-t { font-size: 16px; font-weight: var(--w-demi); letter-spacing: .4px; }
.edit-card .ec-s { font-size: 12px; letter-spacing: .2px; opacity: .85; }
.edit-card.e1 { background: #212121; }
.edit-card.e2 { background: #58585A; }
.edit-card.e3 { background: #3A3A3E; }
.edit-card.e4 { background: #8A8A92; }

/* occasion tiles (storefront "Collections grid" section) — 4:5 portrait, max 4 */
.occ-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 17px; }
.occ-card { position: relative; overflow: hidden; border-radius: 0; aspect-ratio: 2 / 3; display: flex; align-items: flex-end; color: #fff; background: var(--occ-bg, var(--occ-tone, var(--pink))); transition: none; }
.occ-card:hover { transform: none; box-shadow: none; }
.occ-card .occ-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.occ-card .occ-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 18%, rgba(0,0,0,.45) 58%, rgba(0,0,0,.92) 100%); opacity: calc(.35 + var(--occ-veil, .55) * .65); }
.occ-card .occ-body { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 20px 18px; width: 100%; text-shadow: 0 1px 10px rgba(0,0,0,.35); }
.occ-card .occ-ico { margin-bottom: 4px; display: block; }
.occ-card .occ-ico .ico { vertical-align: -1px; }
.occ-card .occ-t { font-size: 16px; font-weight: var(--w-demi); letter-spacing: .4px; line-height: 1.25; }
.occ-card .occ-s { font-size: 12px; letter-spacing: .2px; opacity: .9; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.occ-card.e1 { --occ-tone: linear-gradient(160deg, #3A3A3E, #212121); }
.occ-card.e2 { --occ-tone: linear-gradient(160deg, #6E6E76, #494950); }
.occ-card.e3 { --occ-tone: linear-gradient(160deg, #58585A, #2F2F31); }
.occ-card.e4 { --occ-tone: linear-gradient(160deg, #8A8A92, #58585A); }
.occ-dots { display: none; }

/* Mobile: one-card-at-a-time snap slider (autoplay driven by main.js) */
@media (max-width: 700px) {
  .occ-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .occ-grid.occ-slider { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  .occ-grid.occ-slider::-webkit-scrollbar { display: none; }
  .occ-grid.occ-slider .occ-card { flex: 0 0 76%; scroll-snap-align: center; }
  .occ-grid.occ-slider .occ-card:hover { transform: none; }
  .occ-slider + .occ-dots { display: flex; justify-content: center; gap: 7px; margin-top: 12px; }
  .occ-dots button { width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%; background: var(--line-dark); cursor: pointer; transition: width .2s, background .2s; }
  .occ-dots button.on { width: 18px; border-radius: 4px; background: var(--pink); }
}

/* ---------- Instagram reels ----------
   Six portrait (9:16) reel cards in one row, each linking out to Instagram.
   Cover image optional: without one the card falls back to a branded gradient,
   so the row still reads as reels while the admin adds artwork. */
.ig-reels { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.ig-reel { position: relative; display: block; overflow: hidden; border-radius: 0; aspect-ratio: 9 / 16; color: #fff; background: linear-gradient(150deg, #C13584 0%, #E1306C 45%, #F56040 100%); }
.ig-reel .ig-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ig-reel .ig-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 34%, rgba(0,0,0,.06) 62%, rgba(0,0,0,.72) 100%); transition: background .2s; }
.ig-reel:hover .ig-veil { background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.10) 40%, rgba(0,0,0,.28) 66%, rgba(0,0,0,.80) 100%); }
.ig-reel .ig-badge { position: absolute; top: 9px; right: 9px; z-index: 2; line-height: 0; opacity: .95; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
/* Centered play button — the reel signifier. */
.ig-reel .ig-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0,0,0,.34); border: 1.5px solid rgba(255,255,255,.85); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); transition: background .2s, transform .2s; }
.ig-reel .ig-play .ico { margin-left: 2px; }
.ig-reel:hover .ig-play { background: rgba(0,0,0,.5); transform: translate(-50%, -50%) scale(1.06); }
.ig-reel .ig-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 12px 12px 11px; font-size: 12px; font-weight: var(--w-demi); letter-spacing: .2px; line-height: 1.35; text-shadow: 0 1px 8px rgba(0,0,0,.45); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Fewer per row as the viewport narrows; a swipeable strip on phones. */
@media (max-width: 1100px) { .ig-reels { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 760px) {
  .ig-reels { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  .ig-reels::-webkit-scrollbar { display: none; }
  .ig-reel { flex: 0 0 44%; scroll-snap-align: start; }
  .ig-reel .ig-play { width: 40px; height: 40px; }
}
@media (max-width: 480px) { .ig-reel { flex-basis: 60%; } }

/* Live-embed mode: a horizontal row of Instagram players. Each keeps Instagram's
   own min width (~326px), so on desktop as many fit as the width allows and the
   rest scroll — a reel carousel rather than a fixed six-up grid. */
.ig-embeds { display: flex; gap: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; scroll-snap-type: x proximity; }
.ig-embeds .ig-embed-col { flex: 0 0 340px; max-width: 340px; scroll-snap-align: start; }
.ig-embeds .instagram-media { margin: 0 !important; min-width: 0 !important; width: 100% !important; }
@media (max-width: 480px) { .ig-embeds .ig-embed-col { flex-basis: 300px; } }

/* guide teaser cards */
.guide-card { background: #fff; border: 1px solid var(--line); border-radius: 0; padding: 20px; transition: border-color .2s; }
.guide-card:hover { border-color: var(--ink); }
.guide-card h3 { font-size: 14px; letter-spacing: .4px; margin-bottom: 6px; color: var(--ink); }
.guide-card p { font-size: 12px; letter-spacing: .2px; color: var(--muted); }
.guide-card .gc-k { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); font-weight: var(--w-demi); margin-bottom: 8px; }

/* trust strip */
.trust-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (max-width: 800px) { .trust-strip { grid-template-columns: 1fr; } }
.trust-item { text-align: center; padding: 26px 16px; }
.trust-item .ti-ico { font-size: 26px; margin-bottom: 8px; }
.trust-item h3 { font-size: 13px; letter-spacing: .4px; text-transform: uppercase; color: var(--ink); margin-bottom: 4px; }
.trust-item p { font-size: 12px; letter-spacing: .2px; color: var(--muted); }

/* breadcrumbs & breadcrumbs bar */
/* A breadcrumb is orientation, not a banner. On white it costs the page
   nothing; as a coloured band it was the loudest thing above the garment. */
.crumbs-bar {
  background: var(--bg);
  padding: 16px 0 0;
  margin-bottom: 0;
  border-bottom: none;
}
.crumbs-bar .crumbs { margin-bottom: 0; }
.crumbs { font-size: 12px; letter-spacing: .2px; color: var(--muted); margin-bottom: 14px; }
.crumbs a { color: var(--muted); font-weight: var(--w-medium); text-decoration: none; transition: color .15s; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs span { color: var(--ink); font-weight: var(--w-medium); }
.crumbs .sep { color: var(--faint); margin: 0 6px; }

.page-head .crumbs { margin-bottom: 12px; color: var(--muted); }
.page-head .crumbs a { color: var(--muted); }
.page-head .crumbs a:hover { color: var(--ink); }
.page-head .crumbs span { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .hero-track { transition: none; }
}

/* GoGurll: tabular prices */
.price, .stat .v, .summary-box .row span:last-child { font-variant-numeric: tabular-nums; }

/* ============================================================
   Mobile & tablet — app-like experience
   ============================================================ */
html { -webkit-tap-highlight-color: transparent; }
body { overscroll-behavior-y: none; }
.bottom-nav { display: none; }
.buy-row { display: flex; gap: 12px; align-items: center; }

/* Touch devices: no hover-dependent UI */
@media (hover: none) {
  .hero-arrow { display: none; }
  .btn.sm { padding: 10px 16px; }
  .wish-heart button { width: 38px; height: 38px; font-size: 17px; }
}

/* --- Mobile + small tablet: app chrome --- */
@media (max-width: 860px) {
  .catnav-item .chev { display: none !important; }
  /* mega-nav dropdowns are hover-only, so they're dead weight on touch — but the
     currency switcher is tap-driven and has to stay reachable on phones */
  .catnav-item:not(.currency-switch) .dropdown { display: none !important; }
  .currency-switch .dropdown { min-width: 190px; }
  .curr-mobile { display: inline-flex; }

  body:has(.bottom-nav) { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .container { width: 100%; padding: 0 14px; }

  /* compact header: logo + wishlist, search on its own row */
  .announce { display: none; }
  .nav-row { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto; align-items: center; gap: 10px 8px; padding-block: 10px; min-height: 0; position: relative; }
  .nav-icons { grid-row: 1; grid-column: 3; justify-self: end; gap: 2px; }
  .nav-lead { grid-row: 1; grid-column: 1; gap: 6px; }
  .nav-actions { display: contents; }
  .nav-actions .icon-link { grid-row: 1; }
  .burger-menu-btn { display: flex; align-items: center; justify-content: center; background: none; border: none; padding: 5px; color: var(--ink); cursor: pointer; }
  .nav-row .logo { grid-row: 1; grid-column: 2; justify-self: center; }
  .nav-row .logo img { height: 40px !important; }
  .tabs, .dept-tabs { display: none; }
  
  
  .nav-actions .pill:not(.currency-btn) { display: none; }
  .nav-actions .currency-btn { padding: 5px 10px; }
  .nav-actions .icon-link { font-size: 0; gap: 0; padding: 6px; }
  .nav-actions .icon-link svg { width: 23px; height: 23px; }
  .nav-actions .icon-link:not([href="/account/wishlist"]):not([href="/cart"]):not(.search-toggle) { display: none; }
  .icon-link.search-toggle { display: flex; }
  .search-form { display: none; grid-row: 2; grid-column: 1 / -1; width: 100%; max-width: none; margin-left: 0; }
  .nav-row.search-open .search-form { display: block; }
  [dir="rtl"] .search-form { margin-right: 0; }
  .search-form input[type=text] { font-size: 16px; padding-block: 10px; }
  .nav-menu { display: none; }

  /* category strip: swipeable chips */
  .catnav-inner { padding: 0 10px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
  .catnav-item > a { padding: 12px 11px; font-size: 13px; }

  /* hero */
  .hero-arrow { display: none; }
  /* portrait on a phone — the ratio is on .hero-slide in the block above */
  /* There is no hero photography yet, so .hs-img renders as an empty div — on a
     phone that was a blank gradient pane stacked ABOVE the headline. The template
     emits nothing at all when `slide.img` is unset, so :empty catches it. Hiding
     the pane is enough; the slide keeps its own min-height and the gradient fills
     it behind the text. */
  .hero-slide .hs-img:empty { display: none; }
  .hero-slide .hs-text { padding: 26px 20px !important; }
  .hero-slide p { font-size: 13.5px; margin-bottom: 16px; }

  /* rhythm & type */
  section.block { padding: 26px 0; }
  .section-head { margin-bottom: 14px; }
  .section-head h2 { font-size: 19px; }
  .page-head { padding: 20px 14px 4px; }
  .page-head h1 { font-size: 22px; }
  .page-head p { font-size: 13px; padding: 0; }
  .grid { gap: 12px; }
  .crumbs { margin-bottom: 12px; }

  /* category tiles: horizontal swipe rail */
  .tile-strip { gap: 12px; justify-content: flex-start; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .tile { flex: 0 0 132px; scroll-snap-align: start; padding: 6px; }
  .tile .tile-label { font-size: 12.5px; bottom: 14px; left: 6px; right: 6px; }

  /* product cards */
  .product-card .body { padding: 6px 0 0; }
  .product-card .brand { font-size: 12px; margin: 6px 0 4px; }
  .product-card .price { font-size: 12.5px; }

  /* forms: 16px inputs prevent iOS focus zoom */
  input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], select, textarea { font-size: 16px; }
  .btn { padding: 0 22px; min-height: 44px; }
  .card { padding: 18px 16px; }

  /* collapse inline multi-column layouts (cart, checkout, account, contact…) */
  .grid[style*="grid-template-columns"], .steps[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 20px !important; }
  .grid.cols-2[style] { gap: 24px !important; }

  /* tables scroll instead of overflowing the page */
  table.list { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* cart: rows become cards */
  .cart-table tr:first-child { display: none; }
  table.cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; width: 100%; }
  .cart-table tr { padding: 14px 14px 12px; border-top: 1px solid var(--line); position: relative; }
  .cart-table tr:first-of-type { border-top: none; }
  .cart-table td { padding: 4px 0 !important; border: none !important; }
  .cart-table td[data-label] { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
  .cart-table td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; }
  .cart-table td.cart-remove { position: absolute; top: 10px; right: 10px; width: auto; padding: 0 !important; }
  [dir="rtl"] .cart-table td.cart-remove { right: auto; left: 10px; }
  .cart-table td:first-child { padding-right: 44px !important; }

  /* product page */
  .gallery-thumbs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .gallery-thumbs img { flex-shrink: 0; }
  .buy-row { flex-wrap: wrap; }
  .buy-row .btn { flex: 1 1 auto; padding: 14px 18px; }

  /* filter bar */
  .filter-bar { padding: 14px; gap: 10px; }
  .filter-bar .btn { grid-column: 1 / -1; padding: 12px; }

  /* toasts sit above the bottom nav */
  .flash { top: auto; bottom: calc(80px + env(safe-area-inset-bottom)); left: 12px; right: 12px; max-width: none; text-align: center; }

  footer.site { margin-top: 34px; padding: 36px 0 20px; }
  footer .cols { gap: 22px; margin-bottom: 24px; }

  /* --- bottom app nav --- */
  .bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 120; justify-content: space-around; background: rgba(254, 253, 249, .96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding: 7px 4px calc(7px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 20px rgba(24, 24, 26, .07); }
  .bottom-nav a { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; color: var(--ink-soft); position: relative; padding: 2px 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
  .bottom-nav a svg { width: 22px; height: 22px; stroke: currentColor; fill: none; flex-shrink: 0; }
  .bottom-nav a.on { color: var(--pink); }
  .bottom-nav .bn-count { position: absolute; top: -2px; left: calc(50% + 4px); background: var(--pink); color: #fff; font-size: 9.5px; font-weight: 700; border-radius: 999px; min-width: 15px; height: 15px; line-height: 15px; padding: 0 4px; text-align: center; }
}

/* --- Small phones --- */
@media (max-width: 480px) {
  .hero-slide h2 { font-size: 22px; }
  .hero-slide h2 .mega { font-size: 34px; }
  .offer-card { padding: 20px 18px; min-height: 110px; }
  .edit-grid { gap: 12px; }
  .edit-card { padding: 18px 16px; min-height: 104px; }
  .main-pane { padding: 18px 12px; }
}

/* ---------- Flat icon system (replaces emoji glyphs) ---------- */
.ico { flex-shrink: 0; vertical-align: -4px; }
.i { vertical-align: -3px; margin-right: 6px; }
.i-r { vertical-align: -3px; margin-left: 6px; }
.trust-item .ti-ico { color: var(--ink); display: flex; justify-content: center; }
.step .num .ico, .edit-card .ec-emoji .ico { vertical-align: -1px; }
.empty .big { display: flex; align-items: center; justify-content: center; }
.side a.item .ico, .icon-link .ico { vertical-align: -3px; margin-right: 8px; }
[dir="rtl"] .side a.item .ico, [dir="rtl"] .icon-link .ico { margin-right: 0; margin-left: 8px; }
.wish-heart button, .catnav-arrow, .search-form .cam, .wish-heart button svg { display: flex; align-items: center; justify-content: center; }
.badge .ico { margin-right: 3px; }
.notice .ico, .hint .ico { vertical-align: -3px; margin-right: 5px; }
.step .num { color: var(--ink); }
.filter-toggle summary::after { content: none; }
.filter-toggle summary .toggle-chev { float: right; color: var(--pink); transition: transform .2s; }
[dir="rtl"] .filter-toggle summary .toggle-chev { float: left; }
.filter-toggle[open] summary .toggle-chev { transform: rotate(180deg); }
.catnav-item .chev.ico { transition: transform .2s; color: var(--muted); }
.catnav-item:hover .chev.ico { transform: rotate(180deg); color: var(--pink); }

/* --- Mobile Drawer --- */
.mobile-drawer-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.5); z-index: 100; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.mobile-drawer-overlay.drawer-open { opacity: 1; visibility: visible; }
.mobile-drawer { position: fixed; top: 0; left: -300px; width: 300px; max-width: 85vw; height: 100%; height: 100dvh; background: var(--bg); z-index: 101; transition: transform .3s ease; display: flex; flex-direction: column; box-shadow: 2px 0 10px rgba(0,0,0,0.1); }
.mobile-drawer.drawer-open { transform: translateX(300px); }
[dir="rtl"] .mobile-drawer { left: auto; right: -300px; box-shadow: -2px 0 10px rgba(0,0,0,0.1); }
[dir="rtl"] .mobile-drawer.drawer-open { transform: translateX(-300px); }

.drawer-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.drawer-title { font-weight: 700; font-size: 16px; color: var(--ink); }
.drawer-close { background: none; border: none; font-size: 0; padding: 5px; margin: -5px; cursor: pointer; color: var(--ink); }

.drawer-content { flex: 1; overflow-y: auto; padding: 20px 20px 80px 20px; -webkit-overflow-scrolling: touch; }

/* Category Grid like reference UI */
.drawer-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px 10px; margin-bottom: 25px; }
.drawer-cat-card { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
.drawer-cat-card .dcc-img { width: 100%; aspect-ratio: 1; border-radius: 0; overflow: hidden; background: #fafafa; border: 1px solid var(--line); box-shadow: none; }
.drawer-cat-card .dcc-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.drawer-cat-card span { font-size: 12px; font-weight: 600; text-align: center; line-height: 1.2; }

.drawer-links { display: flex; flex-direction: column; gap: 15px; }
.drawer-links a { font-size: 14.5px; font-weight: 500; color: var(--ink); text-decoration: none; }
.drawer-links hr { border: none; border-top: 1px solid var(--line); margin: 5px 0; }

.drawer-utility-row { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; margin-bottom: 10px; }
.drawer-utility-row a { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; color: var(--ink); text-align: center; }
.drawer-utility-row a svg { width: 20px; height: 20px; color: var(--muted); }
.drawer-utility-row .dc-item { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; color: var(--ink); }
.drawer-utility-row .dc-item svg { width: 20px; height: 20px; color: var(--muted); }
.drawer-utility-row .dc-item select { border: none; background: none; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--ink); padding: 0; cursor: pointer; }

/* ============================================================
   Seller dashboard — mobile app chrome
   Tab bar + "More" sheet markup lives in partials/seller-nav.ejs;
   table.list gets .stack + per-cell data-labels from main.js.
   ============================================================ */
.seller-tabbar, .seller-sheet, .seller-sheet-overlay, .m-list { display: none; }

@media (max-width: 860px) {
  body:has(.seller-tabbar) { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .panel:has(.seller-tabbar) .side { display: none; }
  .panel:has(.seller-tabbar) .main-pane { padding: 14px 12px 20px; }
  .main-pane h1 { font-size: 19px; margin-bottom: 12px; }
  .main-pane h2 { font-size: 16px; }
  .main-pane .notice { padding: 11px 14px; font-size: 13px; margin-bottom: 14px; border-radius: 10px; }
  .main-pane p.muted { font-size: 12.5px; }
  .main-pane .flex-between { gap: 8px; }
  .main-pane .flex-between .btn { padding: 9px 13px; font-size: 12px; }
  .main-pane .mb { margin-bottom: 12px; }

  /* --- bottom tab bar --- */
  .seller-tabbar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 120; justify-content: space-around; background: rgba(254, 253, 249, .96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding: 7px 4px calc(7px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 20px rgba(24, 24, 26, .07); }
  .seller-tabbar a, .seller-tabbar button { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; color: var(--ink-soft); background: none; border: none; font-family: inherit; cursor: pointer; padding: 2px 1px; white-space: nowrap; text-align: center; }
  .seller-tabbar svg { width: 22px; height: 22px; stroke: currentColor; fill: none; flex-shrink: 0; }
  .seller-tabbar .on { color: var(--pink); }

  /* --- "More" bottom sheet --- */
  .seller-sheet-overlay { display: block; position: fixed; inset: 0; background: rgba(54, 16, 8, .45); z-index: 130; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
  .seller-sheet-overlay.open { opacity: 1; visibility: visible; }
  .seller-sheet { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 131; background: var(--bg); border-radius: 18px 18px 0 0; padding: 8px 16px calc(18px + env(safe-area-inset-bottom)); transform: translateY(105%); transition: transform .28s var(--ease); box-shadow: 0 -12px 40px rgba(24, 24, 26, .2); max-height: 78dvh; overflow-y: auto; }
  .seller-sheet.open { transform: none; }
  .seller-sheet .sheet-grab { width: 42px; height: 4px; border-radius: 999px; background: var(--line-dark); margin: 6px auto 14px; }
  .sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
  .sheet-grid a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 15px 6px 13px; border-radius: 12px; background: var(--bg-soft); font-size: 11.5px; font-weight: 600; color: var(--ink-soft); text-align: center; }
  .sheet-grid a svg { width: 20px; height: 20px; }
  .sheet-grid a.on { background: var(--pink-soft); color: var(--pink); font-weight: 700; }
  .sheet-foot { display: flex; justify-content: space-between; margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
  .sheet-foot a { font-size: 13px; font-weight: 700; color: var(--ink-soft); padding: 6px 4px; }

  /* --- stat cards: swipeable rail --- */
  .main-pane .stat-row { display: flex; overflow-x: auto; gap: 8px; margin: 0 -12px 16px; padding: 2px 12px 6px; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .main-pane .stat-row::-webkit-scrollbar { display: none; }
  .main-pane .stat { flex: 0 0 128px; scroll-snap-align: start; padding: 11px 13px; border-radius: 11px; }
  .main-pane .stat .stat-icon { width: 28px; height: 28px; border-radius: 8px; margin-bottom: 8px; }
  .main-pane .stat .stat-icon svg { width: 15px; height: 15px; }
  .main-pane .stat .stat-content .v, .main-pane .stat .v { font-size: 17px; }
  .main-pane .stat .stat-content .l, .main-pane .stat .l { font-size: 9.5px; margin-top: 3px; letter-spacing: 1px; }

  /* --- charts: decluttered for narrow screens --- */
  .main-pane .chart { gap: 5px; height: 128px; padding: 14px 10px 24px; background-image: none; }
  .main-pane .chart-wrap { padding-bottom: 6px; }
  /* section headings carry inline desktop margins — tighten them on mobile */
  .main-pane .flex-between[style*="margin"] { margin: 12px 0 8px !important; }
  .main-pane .chart .bar .bar-val { display: none; }
  .main-pane .chart .bar:nth-child(even) span { display: none; }

  /* AI describe button: icon only (label text is JS-swapped, so hide via font-size) */
  #aiBtn { font-size: 0; padding: 10px 12px; }
  #aiBtn .i, #aiBtn svg { margin: 0; width: 16px; height: 16px; }

  /* --- app-style list views (markup in seller views; replaces the table) --- */
  .m-swap { display: none !important; }
  .m-list { display: block; }
  .m-item { display: flex; align-items: center; gap: 11px; background: var(--bg); border-radius: 11px; box-shadow: 0 3px 10px rgba(0, 0, 0, .04), 0 1px 3px rgba(0, 0, 0, .02); padding: 10px 12px; margin-bottom: 8px; position: relative; }
  .m-item .mi-thumb { width: 46px; height: 58px; border-radius: 8px; object-fit: cover; background: var(--bg-soft); flex-shrink: 0; }
  .m-item .mi-thumb.ph { display: flex; align-items: center; justify-content: center; color: var(--muted); }
  .m-item .mi-body { flex: 1; min-width: 0; }
  .m-item .mi-link { display: block; font-weight: 700; font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-item .mi-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
  .m-item .mi-sub { font-size: 12px; color: var(--ink-soft); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-item .mi-meta { font-size: 11.5px; color: var(--muted); margin-top: 3px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
  .m-item .mi-meta .score-pill { font-size: 10px; padding: 1px 8px; }
  .m-item .mi-side { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex-shrink: 0; position: relative; z-index: 2; }
  .m-item .mi-side .badge { font-size: 9.5px; padding: 2px 7px; }
  .m-item .mi-chev { color: var(--line-dark); display: flex; }
  .m-item .mi-del { width: 32px; height: 30px; border-radius: 8px; border: none; background: var(--bg-soft); color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
  .m-item .mi-del:active { background: var(--pink-soft); color: var(--pink); }

  /* --- data tables become stacked cards (labels added by main.js) --- */
  table.list.stack { display: block; overflow: visible; background: transparent; box-shadow: none; border-radius: 0; }
  table.list.stack tbody, table.list.stack tr, table.list.stack td { display: block; width: 100%; }
  table.list.stack tr.stack-head, table.list.stack thead { display: none; }
  table.list.stack tr { background: var(--bg); border-radius: 11px; box-shadow: 0 3px 10px rgba(0, 0, 0, .04), 0 1px 3px rgba(0, 0, 0, .02); margin-bottom: 8px; padding: 9px 13px; }
  table.list.stack td { border: none; padding: 2.5px 0; font-size: 13px; }
  table.list.stack tr:hover td { background: transparent; }
  table.list.stack td[data-label] { display: flex; justify-content: space-between; align-items: center; column-gap: 12px; row-gap: 1px; flex-wrap: wrap; text-align: right; min-height: 24px; }
  [dir="rtl"] table.list.stack td[data-label] { text-align: left; }
  table.list.stack td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; text-align: left; flex-shrink: 0; }
  [dir="rtl"] table.list.stack td[data-label]::before { text-align: right; }
  table.list.stack td:not([data-label]) { display: flex; align-items: center; gap: 8px; }
  table.list.stack td[data-label] > .muted { flex: 1 0 100%; text-align: inherit; font-size: 12px; }
  table.list.stack .thumb { width: 40px; height: 50px; border-radius: 7px; }
  table.list.stack .badge { padding: 2px 8px; font-size: 10px; }
  table.list.stack td form { justify-content: flex-end; }
  table.list.stack td select { width: auto; flex: 1; min-width: 0; max-width: 220px; }
}

/* ---------- Storefront editor: per-section style overrides (.ss classes are
   emitted by sectionStyleAttr() from validated style_* section settings) ---------- */
.ss-bg { background: var(--ss-bg); }
.ss-bg .block, .ss-bg .block.alt, .ss-bg .page-head { background: transparent; }
.ss-hc h1, .ss-hc h2, .ss-hc h3, .ss-hc .section-head h2 { color: var(--ss-hc); }
.ss-tc p, .ss-tc li, .ss-tc .muted, .ss-tc .eyebrow, .ss-tc .page-head p { color: var(--ss-tc); }
.ss-align .container, .ss-align .page-head { text-align: var(--ss-align); }
.ss-hs .section-head h2 { font-size: calc(24px * var(--ss-hs)); }
.ss-hs .page-head h1 { font-size: calc(28px * var(--ss-hs)); }
.ss-hs .prose h2, .ss-hs .card h2 { font-size: calc(19px * var(--ss-hs)); }
.ss-hw h1, .ss-hw h2, .ss-hw h3 { font-weight: var(--ss-hw); }
.ss-font-body h1, .ss-font-body h2, .ss-font-body h3 { font-family: var(--font); }
.ss-upper h1, .ss-upper h2 { text-transform: uppercase; letter-spacing: 0.06em; }
/* announcement bar custom colors (set inline from theme settings) */
.announce.ann-custom, .announce.ann-custom .grow, .announce.ann-custom a { color: var(--ann-tc, inherit); }

/* ---------- Storefront editor: category tile sizes + custom offer cards ---------- */
.tile-strip.tiles-small .tile { flex-basis: 110px; max-width: 150px; }
.tile-strip.tiles-large .tile { flex-basis: 190px; max-width: 260px; }
.offer-card.o-custom { background: var(--night); }

/* ===== Slide-out cart drawer ===== */
.cart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 200; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.cart-overlay.open { opacity: 1; visibility: visible; }
.cart-drawer { position: fixed; top: 0; right: -460px; width: 460px; max-width: 92vw; height: 100dvh; background: #fff; z-index: 201; display: flex; flex-direction: column; box-shadow: -4px 0 24px rgba(0,0,0,.18); transition: transform .32s ease; }
.cart-drawer.open { transform: translateX(-460px); }
.cart-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.cart-drawer-title { font-size: 22px; font-weight: 800; color: var(--ink); }
.cart-drawer-title span { color: var(--muted); font-weight: 700; }
.cart-drawer-close { background: none; border: none; cursor: pointer; color: var(--ink-soft); line-height: 0; padding: 4px; border-radius: 0; }
.cart-drawer-close:hover { background: var(--bg-soft); }

.cart-ship { padding: 16px 22px; background: var(--bg-soft); }
.cart-ship-msg { font-size: 14px; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; }
.cart-ship-msg b { color: var(--pink); font-weight: 800; }
.cart-ship-track { height: 8px; background: #fff; border-radius: 0; overflow: hidden; margin-top: 10px; border: 1px solid var(--line); }
.cart-ship-fill { height: 100%; width: 0; border-radius: 0; background: repeating-linear-gradient(45deg, var(--pink), var(--pink) 8px, var(--pink-deep) 8px, var(--pink-deep) 16px); transition: width .45s ease; }

.cart-drawer-body { flex: 1; overflow-y: auto; padding: 8px 22px; }
.cart-line { display: grid; grid-template-columns: 92px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.cart-line-img { width: 92px; height: 116px; object-fit: cover; border-radius: 0; background: var(--bg-soft); }
.cart-line-name { font-weight: 700; color: var(--ink); font-size: 15px; line-height: 1.3; text-decoration: none; display: block; }
.cart-line-name:hover { color: var(--pink); }
.cart-line-variant { font-size: 13px; color: var(--muted); margin: 3px 0; }
.cart-line-price { font-weight: 700; color: var(--ink); margin: 6px 0 10px; }
.cart-line-controls { display: flex; align-items: center; gap: 14px; }
.cart-qty { display: inline-flex; align-items: center; border: 1px solid var(--line-dark); border-radius: 0; overflow: hidden; }
.cart-qty button { width: 34px; height: 36px; border: none; background: #fff; cursor: pointer; font-size: 17px; color: var(--ink); line-height: 1; }
.cart-qty button:hover { background: var(--bg-soft); }
.cart-qty button:disabled { opacity: .4; cursor: not-allowed; }
.cart-qty span { min-width: 36px; text-align: center; font-weight: 700; font-size: 14px; }
.cart-line-remove { background: none; border: none; cursor: pointer; color: var(--muted); padding: 6px; border-radius: 0; line-height: 0; }
.cart-line-remove:hover { color: var(--pink); background: var(--pink-soft); }

.cart-empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.cart-empty .btn { margin-top: 16px; }

.cart-popular-head { font-size: 18px; font-weight: 800; color: var(--ink); margin: 26px 0 4px; }
.cart-pop { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.cart-pop img { width: 72px; height: 90px; object-fit: cover; border-radius: 0; background: var(--bg-soft); }
.cart-pop-name { font-weight: 700; color: var(--ink); font-size: 14.5px; text-decoration: none; }
.cart-pop-name:hover { color: var(--pink); }
.cart-pop-price { color: var(--ink-soft); font-size: 14px; margin: 4px 0 6px; }
.cart-pop-add { background: none; border: none; color: var(--pink); font-weight: 700; cursor: pointer; text-decoration: underline; padding: 0; font-size: 13.5px; }

.cart-drawer-foot { border-top: 1px solid var(--line); padding: 16px 22px 20px; background: #fff; }
.cart-options { display: flex; gap: 10px; margin-bottom: 12px; }
.cart-opt { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 0; padding: 10px; font-size: 13px; font-weight: 700; color: var(--ink-soft); cursor: pointer; }
.cart-opt:hover, .cart-opt.on { color: var(--pink); border-color: var(--pink); }
.cart-opt-panel { margin-bottom: 12px; }
.cart-opt-panel textarea, .cart-opt-panel input { width: 100%; border: 1px solid var(--line-dark); border-radius: 0; padding: 9px 12px; font-family: inherit; font-size: 14px; margin-bottom: 8px; }
.cart-coupon-row { display: flex; gap: 8px; }
.cart-coupon-row input { flex: 1; margin-bottom: 0; text-transform: uppercase; }
.cart-coupon-msg { font-size: 12.5px; margin-top: 6px; }
.cart-coupon-msg.ok { color: var(--green); }
.cart-coupon-msg.err { color: var(--pink); }
.cart-subtotal { display: flex; justify-content: space-between; align-items: baseline; font-weight: 800; color: var(--ink); font-size: 20px; margin-top: 4px; }
.cart-tax-note { font-size: 12.5px; color: var(--muted); margin: 4px 0 14px; }
/* flex (not block) so .btn's align/justify-center apply — text stays centered
   vertically in the 40px button rather than sitting at the top. */
.cart-checkout-btn { display: flex; }
.cart-viewcart-btn { display: flex; margin-top: 10px; }

@media (max-width: 520px) {
  .cart-drawer { right: -100vw; width: 100vw; max-width: 100vw; }
  .cart-drawer.open { transform: translateX(-100vw); }
}

/* Admin app-shell: the sidebar and the content area scroll independently
   instead of the whole page scrolling as one. Desktop only — the mobile
   layout (<=860px) turns .side into a horizontal top nav and is untouched.
   58px is the .panel-top height the grid already offsets against. */
@media (min-width: 861px) {
  .panel { height: calc(100vh - 58px); min-height: 0; }
  .side { overflow-y: auto; overscroll-behavior: contain; }
  .main-pane { overflow-y: auto; overscroll-behavior: contain; }
}