/* ============================================================
   Mirai Sekkai — site stylesheet
   Direction B, "Refined Marketplace": YesStyle's structure,
   Mirai Sekkai's restraint.
   ============================================================ */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.6;
  color: var(--dark);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 3px; }

/* ---- Layout ---- */
.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--s4); }
.section--tight { padding-block: var(--s4); }

.label {
  font-size: var(--step--2);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}
.display { font-family: var(--font-display); font-weight: 300; line-height: 1.12; }
.display em { font-style: italic; font-weight: 400; }

.sec-head { display: flex; align-items: flex-end; gap: var(--s4); margin-bottom: var(--s4); flex-wrap: wrap; }
.sec-head h2 { font-family: var(--font-display); font-weight: 300; font-size: var(--step-3); letter-spacing: -.01em; }
.sec-head h2 em { font-style: italic; }
.sec-head .sub { color: var(--muted); font-size: var(--step--1); padding-bottom: 5px; }
.sec-head .more { margin-left: auto; color: var(--green); font-weight: 600; font-size: var(--step--1); padding-bottom: 5px; white-space: nowrap; }
.sec-head .more:hover { color: var(--green-dark); }

.icon { width: 20px; height: 20px; }
/* Generic inline icon (see Helpers/Icons.cs) - 1em so it auto-scales with whatever text it sits
   next to (a button, a heading, a tab label) instead of needing a size override per spot. */
.i { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; flex: none; }

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

/* ============================================================
   Header & Utility Bar
   ============================================================ */
.utility {
  background: var(--dark);
  color: rgba(255, 255, 255, .78);
  font-size: 11.5px;
  letter-spacing: .02em;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.utility .shell { display: flex; align-items: center; justify-content: space-between; height: 36px; gap: var(--s4); }
.utility a { color: rgba(255, 255, 255, .78); text-decoration: none; transition: color var(--fast) var(--ease); }
.utility a:hover { color: #fff; }
.utility .u-left { display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.utility .u-badge { background: var(--green); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: var(--radius-pill); text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0; }
.utility .u-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.utility .u-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; white-space: nowrap; }
.utility .u-link { color: rgba(255, 255, 255, .78); }
.utility .u-admin { color: var(--sage); font-weight: 700; }
.utility .dot { opacity: .35; }

.lang { display: inline-flex; border: 1px solid rgba(255,255,255,.25); border-radius: var(--radius-pill); overflow: hidden; }
.lang button { padding: 2px 10px; font-size: var(--step--2); color: rgba(255,255,255,.7); transition: background var(--fast) var(--ease); }
.lang button[aria-pressed="true"] { background: var(--green); color: #fff; }

.masthead { background: var(--white); border-bottom: 1px solid var(--line); }
.masthead .shell { display: flex; align-items: center; gap: var(--s6); height: 76px; }
.brand img { width: 168px; height: auto; }

.search { flex: 1; position: relative; max-width: 620px; }
.search-box {
  display: flex; align-items: center; height: 44px;
  background: var(--cream); border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill); padding: 0 5px 0 20px;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.search-box:focus-within { border-color: var(--green); background: var(--white); }
.search-box input { flex: 1; border: 0; background: none; outline: none; font-size: var(--step-0); }
.search-box input::placeholder { color: var(--muted-soft); }
.search-go {
  width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: #fff;
  display: grid; place-items: center; flex: none; transition: background var(--fast) var(--ease);
}
.search-go:hover { background: var(--green-dark); }
.search-go .icon { width: 17px; height: 17px; }

.suggest {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); overflow: hidden; z-index: var(--z-mega); display: none;
}
.suggest.open { display: block; }
.suggest-item { display: flex; align-items: center; gap: var(--s3); padding: 9px var(--s4); cursor: pointer; }
.suggest-item:hover, .suggest-item.active { background: var(--green-wash); }
.suggest-item img { width: 40px; height: 40px; object-fit: contain; background: var(--cream); border-radius: var(--radius-sm); flex: none; }
.suggest-item .s-name { flex: 1; font-size: var(--step--1); line-height: 1.35; }
.suggest-item .s-price { font-weight: 600; font-size: var(--step--1); white-space: nowrap; }
.suggest-all { display: block; padding: 11px var(--s4); background: var(--cream); font-size: var(--step--1); font-weight: 600; color: var(--green); text-align: center; }
.suggest-empty { padding: var(--s5); text-align: center; color: var(--muted); font-size: var(--step--1); }

.actions { display: flex; align-items: center; gap: var(--s5); margin-left: auto; }
.action { position: relative; display: grid; place-items: center; color: var(--dark); transition: color var(--fast) var(--ease); }
.action:hover { color: var(--green); }
.action .icon { width: 21px; height: 21px; }
.badge {
  position: absolute; top: -6px; right: -9px; min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--green); color: #fff; border-radius: var(--radius-pill);
  font-size: 10px; font-weight: 700; display: grid; place-items: center; line-height: 1;
}

/* ---- Category nav + mega-menu ---- */
.catnav { background: var(--white); border-bottom: 1px solid var(--line); position: relative; }
/* Direct child only. The mega-menu panel nests its own .shell inside .catnav,
   and a descendant selector here would clamp that panel to 46px and leak
   align-items onto its columns. */
.catnav > .shell { display: flex; align-items: center; gap: var(--s5); height: 46px; }
/* Same reasoning as .catnav > .shell above: without the direct-child scope, these leaked into
   every link inside the nested .mega panel too (height:46px box, green hover underline stretched
   to the link's full flex width) - not just the five top-row nav links they're meant for. */
.catnav > .shell > a { font-size: var(--step--1); font-weight: 500; height: 46px; display: inline-flex; align-items: center; border-bottom: 2px solid transparent; white-space: nowrap; transition: color var(--fast) var(--ease); }
.catnav > .shell > a:hover, .catnav > .shell > a.on { color: var(--green); border-bottom-color: var(--green); }
.catnav .offers { margin-left: auto; color: var(--green); font-weight: 600; }
.catnav-home { color: var(--muted); }
.catnav-home:hover { color: var(--green); border-bottom-color: transparent; }
.catnav-home svg { width: 18px; height: 18px; }

.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--white); border-top: 1px solid var(--line);
  box-shadow: var(--shadow-lg); z-index: var(--z-mega);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease), visibility var(--fast);
}
.mega.open { opacity: 1; visibility: visible; transform: none; }
.mega .shell {
  display: grid; grid-template-columns: 1fr 1fr 1fr 0.9fr;
  gap: var(--s7); padding-block: var(--s3) var(--s5);
  height: auto; align-items: start;
}
.mega h4 { font-size: var(--step--2); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); margin-bottom: var(--s3); font-weight: 600; }
.mega li { margin-bottom: 7px; }
/* Not space-between: at this column's width, that stretched short labels and their count far
   apart with a big empty gap in between. A count now sits right after its label instead.
   inline-flex (not flex) so the box shrink-wraps the label+count instead of stretching to the
   column's full width - otherwise the hover underline below stretches out past the text too. */
.mega li a { font-size: var(--step-0); display: inline-flex; align-items: baseline; gap: 6px; padding-bottom: 4px; border-bottom: 2px solid transparent; }
.mega li a:hover { color: var(--green); border-bottom-color: var(--green); }
.mega li .n { color: var(--muted-soft); font-size: var(--step--1); }
/* Beauty's nested mega panel: a sub-nav strip (styled like the old top-level catnav links) up
   top, and the same concern/tag/brand columns any of those used to show directly below it.
   Columns are content-sized (minmax + justify-content:start) rather than stretched to fill the
   full shell width - with only a handful of list items per column, a full-bleed 4-column grid
   left a huge, sparse-looking empty area on wide screens. */
.mega-beauty { grid-column: 1 / -1; }
.mega-subnav { display: flex; flex-wrap: wrap; gap: var(--s5); border-bottom: 1px solid var(--line); margin-bottom: var(--s3); }
/* padding-block (not a fixed height) so the hover/active underline sits close under the text
   instead of at the bottom of an oversized box; line-height: 1 drops the body copy's 1.6 leading
   that was otherwise padding the gap out further still. */
.mega-subnav-item { font-size: var(--step--1); font-weight: 500; line-height: 1; padding-block: 3px 6px; display: inline-flex; align-items: center; border-bottom: 2px solid transparent; white-space: nowrap; color: var(--dark); transition: color var(--fast) var(--ease); }
.mega-subnav-item:hover, .mega-subnav-item.active { color: var(--green); border-bottom-color: var(--green); }
.mega-subnav-content { display: grid; grid-template-columns: repeat(4, minmax(140px, 200px)); justify-content: start; gap: calc(var(--s8) + var(--s6)); }
.mega-promo { display: flex; gap: var(--s4); background: var(--cream); border-radius: var(--radius); padding: var(--s4); align-items: center; }
.mega .mega-promo { height: auto; display: flex; align-items: center; border-bottom: 0; white-space: normal; color: var(--dark); min-width: 0; }
.mega .mega-promo:hover { border-bottom: 0; color: var(--dark); }
.mega .mega-promo > span { min-width: 0; }
.mega-promo img { width: 96px; height: 96px; object-fit: contain; background: #fff; border-radius: var(--radius-sm); flex: none; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  height: 44px; padding: 0 26px; border-radius: var(--radius-pill);
  font-size: var(--step--1); font-weight: 600; white-space: nowrap;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
              border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--green); color: #fff; }
.btn--primary:hover { background: var(--green-dark); }
.btn--dark { background: var(--dark); color: #fff; }
.btn--dark:hover { background: var(--dark-soft); }
.btn--ghost { border: 1.5px solid var(--green); color: var(--green); }
.btn--ghost:hover { background: var(--green); color: #fff; }
.btn--light { background: #fff; color: var(--dark); }
.btn--onDark { border: 1.5px solid rgba(255,255,255,.6); color: #fff; }
.btn--onDark:hover { background: rgba(255,255,255,.14); }
.btn--sm { height: 36px; padding: 0 18px; font-size: var(--step--2); }
.btn--block { display: flex; width: 100%; }
.btn[disabled] { opacity: .42; cursor: not-allowed; }
.btn[disabled]:active { transform: none; }

/* ============================================================
   Product card (4 per row — balanced fit)
   ============================================================ */
.grid { display: grid; gap: var(--s4); }
.grid--5, .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  position: relative; display: flex; flex-direction: column;
  transition: transform var(--normal) var(--ease), box-shadow var(--normal) var(--ease), border-color var(--normal) var(--ease);
  z-index: 1;
}
.card:hover {
  border-color: var(--sage);
  box-shadow: 0 14px 34px rgba(25, 49, 56, 0.16);
  transform: scale(1.05) translateY(-4px);
  z-index: 15;
}
.card--out { opacity: .62; }

.card-media { position: relative; height: 165px; background: #FBFAF7; padding: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; }
.card-media img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--normal) var(--ease); }
.card:hover .card-media img { transform: scale(1.08); }

.tag {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  padding: 3px 8px; border-radius: var(--radius-pill);
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
}
.tag--off { background: var(--dark); color: #fff; }
.tag--out { background: var(--muted); color: #fff; left: auto; right: 8px; top: 8px; }

.wish {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; color: var(--muted-soft);
  background: rgba(255,255,255,.85); backdrop-filter: blur(4px);
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.wish .icon { width: 14px; height: 14px; }
.wish:hover { color: var(--sale); background: #fff; }
.wish.on { color: var(--sale); }

.quickview {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 2;
  height: 30px; border-radius: var(--radius-sm); background: rgba(25,49,56,.92); color: #fff;
  font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--normal) var(--ease), transform var(--normal) var(--ease);
}
.card:hover .quickview { opacity: 1; transform: none; }
@media (hover: none) { .quickview { display: none; } }

.card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1; }
.card-brand { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--green); font-weight: 600; margin-bottom: 3px; line-height: 1.2; }
.card-name {
  font-size: 13px; line-height: 1.4; min-height: 2.8em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-rate { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 11.5px; color: var(--muted); }
.stars { color: #E8A317; font-size: 12px; display: inline-flex; align-items: center; gap: 1px; }
.stars .star { width: 1em; height: 1em; flex: none; }
.card-price { display: flex; align-items: baseline; gap: 6px; margin-top: 5px; margin-bottom: 8px; }
.price { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.price--was { font-size: 12px; color: var(--muted-soft); text-decoration: line-through; font-weight: 400; }
.price--ask { font-size: 12px; color: var(--muted); font-weight: 500; font-style: italic; }
.card-cta, .card-add, .card-body > .btn { margin-top: auto; }
.card .btn, .card .card-add { height: 34px; font-size: 12px; padding: 0 12px; border-radius: var(--radius-sm); font-weight: 600; }

/* ============================================================
   Hero
   ============================================================ */
.hero { display: grid; grid-template-columns: 1fr 288px; gap: var(--s4); padding-top: var(--s4); margin-bottom: var(--s4); }
.hero-main {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  min-height: 430px; padding: var(--s8) var(--s7);
  display: flex; align-items: center;
  background: linear-gradient(104deg, var(--dark) 0%, var(--green) 58%, var(--sage) 100%);
  color: #fff;
}
/* Approved hero artwork from the client's own website design file.
   Bottom-anchored so the leaf meets the panel edge, as in the original. */
.hero-img {
  position: absolute; right: 0; bottom: 0;
  height: 100%; width: auto; max-width: 52%;
  object-fit: contain; object-position: bottom right;
  pointer-events: none; user-select: none;
}
/* min-width:0 overrides the flex-item default (min-width:auto), which otherwise refuses to
   shrink this item below its text's unwrapped intrinsic width - on a narrow viewport that pushes
   the whole box wider than the page instead of letting the heading/subtitle wrap, cutting text off
   at the screen edge. Same reasoning applies to .mid-promo-copy below. */
.hero-copy { position: relative; z-index: 1; max-width: 30rem; min-width: 0; }
.hero-eyebrow { font-size: var(--step--2); letter-spacing: .28em; color: rgba(255,255,255,.72); }
.hero-main h1, .hero-main .hero-title { font-family: var(--font-display); font-weight: 300; font-size: var(--step-4); line-height: 1.1; margin-top: var(--s4); max-width: 13ch; }
.hero-main h1 em { font-style: italic; font-weight: 400; }
.hero-sub { color: rgba(255,255,255,.85); font-weight: 300; margin-top: var(--s4); max-width: 38ch; }
.hero-cta { display: flex; gap: var(--s3); margin-top: var(--s6); flex-wrap: wrap; }

/* Admin-managed promo banner (Admin > Banners & Sliders) - shared by the homepage "Home Middle
   Promo" slot and the shop listing page's "Category Header" slot. */
.mid-promo {
    position: relative;
    display: flex;
    align-items: center;
    /* width:100% keeps this block-level box filling its container at every size - without it,
       aspect-ratio + min-height let the browser derive width from height x ratio (260px x 3 =
       780px) instead of the container's actual (often narrower) width, overflowing the page. */
    width: 100%;
    box-sizing: border-box;
    /* Recommended banner photo: ~3:1 (e.g. 1800x600px). aspect-ratio keeps the box close to that
       shape at any page width, down to the 260px floor on narrow viewports (where the box would
       otherwise get too short for the title/subtitle/button) - a 220px fixed height stretched to
       the page's full 1440px width gave a ~6.5:1 box, which cropped all but a thin middle strip
       out of any normally-proportioned photo. */
    aspect-ratio: 3;
    min-height: 260px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    padding: var(--s7);
    text-decoration: none;
    color: #fff;
    background: linear-gradient(104deg, var(--dark) 0%, var(--green) 58%, var(--sage) 100%);
}
.mid-promo-copy { position: relative; z-index: 1; max-width: 32rem; min-width: 0; }
.mid-promo-copy h2 { font-family: var(--font-display); font-weight: 300; font-size: var(--step-3); line-height: 1.15; margin: 0; }
.mid-promo-copy p { color: rgba(255,255,255,.85); font-weight: 300; margin-top: var(--s3); max-width: 40ch; }
.mid-promo-copy .btn { margin-top: var(--s5); }

/* Category Header sits above a product grid, in the narrower main column next to the filters
   sidebar - a shorter, more compact strip than the homepage's Middle Promo. Recommended photo:
   ~4:1 (e.g. 1600x400px). */
.mid-promo--category { aspect-ratio: 4; min-height: 200px; padding: var(--s6) var(--s7); }
.mid-promo--category .mid-promo-copy h2 { font-size: var(--step-2); }

/* Shared by every admin-managed banner slot (Home Hero, Home Middle Promo, Category Header).
   --bn-img/--bn-img-mobile are set inline per-banner to the resolved Desktop/Mobile Background
   URLs; the .has-mobile-bg modifier (added only when a Mobile Background was actually uploaded)
   swaps in --bn-img-mobile below the breakpoint, so a banner with no mobile image just keeps
   using its desktop photo at every width instead of going blank. Declared AFTER .mid-promo so
   this background-image wins over its plain-gradient fallback (background is a shorthand that
   would otherwise reset it back to none if this rule came first in the cascade). */
.banner-photo {
    --bn-img: none;
    background-image: linear-gradient(90deg, rgba(10,20,16,.6) 0%, rgba(10,20,16,.32) 28%, rgba(10,20,16,0) 52%), var(--bn-img);
    background-size: cover;
    background-position: right center;
}
@media (max-width: 700px) {
    .banner-photo.has-mobile-bg { background-image: linear-gradient(90deg, rgba(10,20,16,.6) 0%, rgba(10,20,16,.32) 28%, rgba(10,20,16,0) 52%), var(--bn-img-mobile); }
}

.hero-rail { display: grid; grid-template-rows: 1fr 1fr; gap: var(--s4); }
.hero-card { border-radius: var(--radius); padding: var(--s5); display: flex; flex-direction: column; justify-content: center; }
.hero-card h3 { font-size: var(--step-1); font-weight: 600; }
.hero-card p { font-size: var(--step--1); color: var(--muted); margin-top: 4px; }
.hero-card--deal { background: var(--white); border: 1px solid var(--line); }
.hero-card--trust { background: var(--sand); }
.hero-card--trust p { color: #6F6A5C; }

.countdown { display: flex; gap: 5px; margin-top: var(--s3); }
.countdown span {
  background: var(--dark); color: #fff; border-radius: var(--radius-sm);
  padding: 5px 8px; font-size: var(--step--1); font-weight: 700;
  font-variant-numeric: tabular-nums; min-width: 30px; text-align: center;
}

/* ---- Trust strip ---- */
.trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); padding-block: var(--s4); border-bottom: 1px solid var(--line); margin-bottom: var(--s4); }
.trust div { display: flex; align-items: center; gap: var(--s3); font-size: var(--step--1); }
.trust svg, .trust .icon { width: 22px; height: 22px; color: var(--green); flex: none; }

/* ---- Category tiles ---- */
/* Full-width bordered cards on web (the original tile shape); mobile switches to a compact
   stacked circle - see the max-width:620px override below. */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.tile {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s5); display: flex; align-items: center; gap: var(--s4);
  text-align: left; transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.tile:hover { border-color: var(--green); transform: translateY(-2px); }
.tile img { width: 62px; height: 62px; object-fit: contain; background: var(--cream); border-radius: var(--radius-sm); flex: none; }
.tile h3 { font-size: var(--step-1); font-weight: 500; }
.tile .n { font-size: var(--step--1); color: var(--muted); margin-top: 2px; }

/* ---- Deal strip ---- */
.dealbar {
  background: var(--dark); color: #fff; border-radius: var(--radius);
  padding: var(--s4) var(--s5); display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s4);
}
.dealbar .t { font-weight: 700; letter-spacing: .04em; }
.dealbar .more { margin-left: auto; font-size: var(--step--1); font-weight: 600; color: var(--sage); }

/* ---- Auto-curated promo banners (admin-configured theme + live product rule) ---- */
.promo-banner {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  min-height: 460px; padding: var(--s8) var(--s7);
  display: flex; align-items: center; margin-bottom: var(--s4);
}
.promo-banner::after {
  content: ''; position: absolute; right: -40px; bottom: -40px; width: 260px; height: 260px;
  opacity: .1; background: var(--mark) center/contain no-repeat; pointer-events: none;
}
.promo-banner--flash-deals { background: linear-gradient(104deg, var(--dark) 0%, var(--green) 58%, var(--sage) 100%); color: #fff; }
.promo-banner--new-arrivals { background: linear-gradient(120deg, var(--cream) 0%, var(--sand) 100%); color: var(--dark); }
.promo-banner--new-arrivals::after { opacity: .06; }
.promo-banner--category { background: var(--green-wash); color: var(--dark); }
.promo-banner-category-bg {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end;
  font-family: var(--font-display); font-weight: 300; font-size: 11rem; line-height: 1;
  color: rgba(25,49,56,.06); white-space: nowrap; overflow: hidden; padding-right: var(--s5); pointer-events: none;
}

.promo-banner-body { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--s7); width: 100%; flex-wrap: wrap; }
.promo-banner-copy { max-width: 26rem; flex: none; }
.promo-banner-eyebrow { font-size: var(--step--2); letter-spacing: .28em; font-weight: 700; }
.promo-banner--flash-deals .promo-banner-eyebrow { color: rgba(255,255,255,.72); }
.promo-banner--new-arrivals .promo-banner-eyebrow,
.promo-banner--category .promo-banner-eyebrow { color: var(--green-dark); }
.promo-banner-copy h1, .promo-banner-copy h2 { font-family: var(--font-display); font-weight: 300; margin-top: var(--s3); line-height: 1.12; }
.promo-banner--flash-deals .promo-banner-copy h1 { font-size: var(--step-4); max-width: 13ch; }
.promo-banner--new-arrivals .promo-banner-copy h2,
.promo-banner--category .promo-banner-copy h2 { font-size: var(--step-3); max-width: 14ch; }
.promo-banner-copy h1 em, .promo-banner-copy h2 em { font-style: italic; font-weight: 400; }
.promo-banner-sub { font-weight: 300; margin-top: var(--s3); max-width: 36ch; }
.promo-banner--flash-deals .promo-banner-sub { color: rgba(255,255,255,.85); }
.promo-banner--new-arrivals .promo-banner-sub,
.promo-banner--category .promo-banner-sub { color: var(--muted); }
.promo-banner-cta { margin-top: var(--s5); }

.promo-banner-cluster {
  display: flex; gap: 14px; flex: 1; min-width: 0; flex-wrap: wrap; justify-content: flex-end;
  position: relative; z-index: 1;
}
.promo-banner--flash-deals .promo-tile:nth-child(2n) { transform: translateY(10px) rotate(-1.5deg); }
.promo-banner--flash-deals .promo-tile:nth-child(3n) { transform: translateY(-8px) rotate(1.5deg); }

.promo-tile {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); width: 128px; flex: none; overflow: hidden; text-decoration: none;
  color: var(--dark); transition: transform var(--fast) var(--ease);
}
.promo-tile:hover { transform: translateY(-4px) rotate(0deg) !important; }
.promo-tile-media { position: relative; height: 100px; background: #FBFAF7; display: flex; align-items: center; justify-content: center; }
.promo-tile-media img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.promo-tile-badge {
  position: absolute; top: 6px; left: 6px; font-size: 10px; font-weight: 700; color: #fff;
  padding: 3px 7px; border-radius: var(--radius-pill); letter-spacing: .01em;
}
.promo-tile-badge--sale { background: var(--sale); }
.promo-tile-badge--new { background: var(--green); }
.promo-tile-body { padding: 8px 10px 10px; }
.promo-tile-name { font-size: 11.5px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; min-height: 2.6em; }
.promo-tile-price { font-size: 12.5px; font-weight: 700; margin-top: 4px; }
.promo-tile-price .was { font-size: 10.5px; color: var(--muted-soft); text-decoration: line-through; font-weight: 400; margin-left: 4px; }

@media (max-width: 900px) {
  .promo-banner-body { flex-wrap: nowrap; }
  .promo-banner-cluster {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; justify-content: flex-start;
    padding-bottom: 4px; margin: 0 calc(var(--s7) * -1); padding-left: var(--s7); padding-right: var(--s7);
  }
  .promo-tile { scroll-snap-align: start; }
  .promo-banner--flash-deals .promo-tile:nth-child(2n),
  .promo-banner--flash-deals .promo-tile:nth-child(3n) { transform: none; }
  .promo-banner-category-bg { font-size: 6rem; }
}
@media (max-width: 620px) {
  .promo-banner { padding: var(--s6) var(--s5); min-height: 0; }
  .promo-banner-body { flex-direction: column; align-items: flex-start; }
  .promo-banner-cluster { width: 100%; margin: 0 calc(var(--s5) * -1); padding-left: var(--s5); padding-right: var(--s5); }
}

/* ---- Brand chips ---- */
.chips { display: flex; flex-wrap: wrap; gap: var(--s4); }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 10px 20px; font-size: var(--step--1); font-weight: 500;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.chip-logo { width: 140px; height: 44px; object-fit: contain; border-radius: 3px; flex: none; }
.chip:hover { border-color: var(--green); color: var(--green); }
.chip .n { color: var(--muted-soft); margin-left: 6px; font-size: var(--step--2); }

/* ---- Story band ---- */
.story {
  background: var(--dark); color: #fff; border-radius: var(--radius-lg);
  padding: var(--s8) var(--s7); position: relative; overflow: hidden;
}
.story::after {
  content: ''; position: absolute; right: -60px; top: -60px; width: 340px; height: 340px;
  opacity: .09; background: var(--mark) center/contain no-repeat;
}
.story blockquote { font-family: var(--font-display); font-weight: 300; font-size: var(--step-3); line-height: 1.35; max-width: 26ch; position: relative; }
.story p { color: rgba(255,255,255,.72); font-weight: 300; margin-top: var(--s4); max-width: 52ch; }

/* ============================================================
   Category / Shop page
   ============================================================ */
.crumbs { display: flex; gap: var(--s2); align-items: center; font-size: var(--step--1); color: var(--muted); padding-block: var(--s3); flex-wrap: wrap; }
.crumbs a { color: var(--muted); transition: color var(--fast) var(--ease); }
.crumbs a:hover { color: var(--green); }
.crumbs .sep { opacity: .4; }
.crumbs span:last-child { color: var(--dark); font-weight: 500; }

.shop-header { margin-bottom: var(--s4); }
.shop-title { font-family: var(--font-display); font-size: var(--step-3); font-weight: 300; line-height: 1.15; color: var(--dark); }
.shop-subtitle { font-size: var(--step--1); color: var(--muted); margin-top: 4px; }

.listing { display: grid; grid-template-columns: 260px 1fr; gap: var(--s5); align-items: start; }
/* Grid items default to min-width:auto (their content's max-content size) - an aspect-ratio-sized
   banner's natural width can exceed this 1fr track's actual space at any viewport, inflating the
   track and overflowing the page instead of letting the banner's own width:100% take effect. */
.listing main { min-width: 0; }

.facets { position: sticky; top: var(--s4); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4); }
.facets-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--s3); border-bottom: 1px solid var(--line); margin-bottom: var(--s3); }
.facets-title { display: flex; align-items: center; gap: 8px; font-size: var(--step-0); font-weight: 700; color: var(--dark); }
.facets-title svg { color: var(--green); }
.facets-reset { font-size: var(--step--2); font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: .06em; transition: color var(--fast) var(--ease); }
.facets-reset:hover { color: var(--green-dark); }

.facet { border-bottom: 1px solid var(--line); padding-block: var(--s4); }
.facet:first-of-type { padding-top: 0; }
.facet:last-child { border-bottom: 0; padding-bottom: 0; }
.facet h3 { font-size: var(--step--2); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: var(--s3); }
.facet-list { max-height: 250px; overflow-y: auto; margin-right: -6px; padding-right: 6px; }
.facet-list::-webkit-scrollbar { width: 4px; }
.facet-list::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 2px; }
.check {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--step--1);
  color: var(--dark);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
  user-select: none;
}
.check:hover {
  background: var(--green-wash);
  color: var(--dark);
}
.check input[type="radio"],
.check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  outline: none;
  background: var(--white);
  display: grid;
  place-content: center;
  flex: none;
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.check input[type="checkbox"] {
  border-radius: 4px;
}
.check input[type="radio"]::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: scale(0);
  transition: transform var(--fast) var(--ease);
  background-color: var(--green);
}
.check input[type="checkbox"]::before {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(0);
  transition: transform var(--fast) var(--ease);
  margin-bottom: 2px;
}
.check input:checked {
  border-color: var(--green);
}
.check input[type="radio"]:checked::before {
  transform: scale(1);
}
.check input[type="checkbox"]:checked {
  background: var(--green);
}
.check input[type="checkbox"]:checked::before {
  transform: rotate(-45deg) scale(1);
}
.check:has(input:checked) {
  font-weight: 600;
  color: var(--dark);
  background: var(--green-wash);
}
.check .n { margin-left: auto; color: var(--muted); font-size: var(--step--2); }

.price-slider { position: relative; height: 28px; margin-bottom: var(--s2); }
.price-slider-track {
  position: absolute; top: 50%; left: 8px; right: 8px; height: 4px;
  background: var(--line-strong); border-radius: var(--radius-pill); transform: translateY(-50%);
}
.price-slider-range {
  position: absolute; top: 50%; height: 4px;
  background: var(--green); border-radius: var(--radius-pill); transform: translateY(-50%);
}
.price-slider-input {
  position: absolute; top: 0; left: 8px; right: 8px; width: auto; margin: 0; height: 28px;
  transform: none;
  -webkit-appearance: none; appearance: none;
  background: transparent; pointer-events: none;
}
.price-slider-input:focus { outline: none; }
.price-slider-input::-webkit-slider-runnable-track { -webkit-appearance: none; background: transparent; height: 4px; }
.price-slider-input::-moz-range-track { background: transparent; height: 4px; border: none; }
.price-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 16px; height: 16px; margin-top: -6px; border-radius: 50%;
  background: var(--white); border: 2.5px solid var(--green);
  cursor: pointer; box-shadow: 0 1px 3px rgba(25, 49, 56, .25);
  transition: transform var(--fast) var(--ease);
}
.price-slider-input::-webkit-slider-thumb:hover,
.price-slider-input::-webkit-slider-thumb:active { transform: scale(1.15); }
.price-slider-input::-moz-range-thumb {
  pointer-events: auto; width: 16px; height: 16px; border-radius: 50%;
  background: var(--white); border: 2.5px solid var(--green);
  cursor: pointer; box-shadow: 0 1px 3px rgba(25, 49, 56, .25);
}

.price-row { display: flex; align-items: center; gap: var(--s2); }
.price-row input {
  width: 100%; height: 36px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 0 10px; background: var(--white); font-size: var(--step--1); outline: none;
}
.price-row input:focus { border-color: var(--green); }
.price-row input::-webkit-outer-spin-button,
.price-row input::-webkit-inner-spin-button { margin: 0; }

.rating-pick { display: inline-flex; align-items: center; gap: 6px; }
.rating-pick .stars { font-size: 14px; letter-spacing: -1px; }

.toolbar { display: flex; align-items: center; justify-content: space-between; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px var(--s4); margin-bottom: var(--s4); flex-wrap: wrap; gap: var(--s3); min-height: 48px; }
.toolbar .count { font-size: var(--step--1); color: var(--muted); }
.toolbar .count b { color: var(--dark); font-weight: 700; }
.filter-toggle-btn { display: none; }
.sort { margin-left: auto; display: flex; align-items: center; gap: var(--s2); font-size: var(--step--1); color: var(--dark); font-weight: 600; }
.sort select {
  height: 34px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  padding: 0 32px 0 14px; background: var(--cream); font-size: var(--step--1); font-weight: 500; color: var(--dark); cursor: pointer;
  appearance: none; outline: none; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23193138' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.sort select:focus, .sort select:hover { border-color: var(--green); background: var(--white); }

.pills { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); align-items: center; }
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--green-wash); border: 1px solid var(--sage); color: var(--dark);
  border-radius: var(--radius-pill); padding: 4px 12px; font-size: var(--step--2); font-weight: 600;
}
.pill a { color: var(--muted); font-size: 13px; line-height: 1; transition: color var(--fast) var(--ease); }
.pill a:hover { color: var(--sale); }
.pills .clear { color: var(--sale); font-size: var(--step--2); font-weight: 700; margin-left: var(--s2); text-decoration: underline; }

.pager { display: flex; justify-content: center; align-items: center; gap: var(--s2); margin-top: var(--s7); flex-wrap: wrap; }
.pager button {
  min-width: 38px; height: 38px; padding: 0 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--white); font-size: var(--step--1);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.pager button:hover:not([disabled]) { border-color: var(--green); color: var(--green); }
.pager button.on { background: var(--dark); border-color: var(--dark); color: #fff; font-weight: 600; }
.pager button[disabled] { opacity: .35; cursor: not-allowed; }
.pager .gap { color: var(--muted-soft); padding: 0 2px; }

.empty { text-align: center; padding: var(--s8) var(--s5); }
.empty h3 { font-family: var(--font-display); font-weight: 300; font-size: var(--step-2); }
.empty p { color: var(--muted); margin: var(--s3) 0 var(--s5); }

/* ============================================================
   Product detail
   ============================================================ */
.pdp { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--s8); padding-top: var(--s5); align-items: start; }
.pdp-media-wrap { position: relative; }
.pdp-media { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s7); position: relative; aspect-ratio: 1; box-sizing: border-box; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pdp-media img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }

/* Hover-to-zoom: a small lens follows the cursor over the image, and a
   matching magnified crop is shown in a panel beside it (not on top of the
   image itself), like a loupe. Desktop-only — there's no hover on touch,
   and the .pdp column stacks to one-wide below 980px so there's no room
   beside the image for the panel. */
.pdp-lens { position: absolute; box-sizing: border-box; width: 110px; height: 110px; border: 1px solid rgba(25, 49, 56, .3); background: rgba(255, 255, 255, .45); opacity: 0; pointer-events: none; transition: opacity var(--fast) var(--ease); z-index: 3; }
.pdp-lens.on { opacity: 1; }
.pdp-zoom-pane { position: absolute; top: 0; left: calc(100% + var(--s5)); width: 400px; height: 100%; border: 1px solid var(--line); border-radius: var(--radius-lg); background-color: var(--white); background-repeat: no-repeat; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--fast) var(--ease); z-index: 20; }
.pdp-zoom-pane.on { opacity: 1; visibility: visible; }
@media (hover: none), (pointer: coarse), (max-width: 980px) {
  .pdp-lens, .pdp-zoom-pane { display: none; }
}
.pdp-thumbs { display: flex; gap: var(--s3); margin-top: var(--s4); }
.pdp-thumbs div { width: 64px; height: 64px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px; background: #fff; box-sizing: border-box; overflow: hidden; flex: none; }
.pdp-thumbs img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pdp-thumbs div.on { border-color: var(--green); }

.pdp-brand { font-size: var(--step--2); letter-spacing: .1em; text-transform: uppercase; color: var(--green); font-weight: 600; }
.pdp h1 { font-family: var(--font-display); font-weight: 300; font-size: var(--step-3); line-height: 1.2; margin-top: var(--s3); }
.pdp-rate { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s4); font-size: var(--step--1); color: var(--muted); }
.pdp-price { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.pdp-price .price { font-size: 1.75rem; }
.pdp-review-inline { margin-left: auto; white-space: nowrap; }
.pdp-stock { margin-top: var(--s3); font-size: var(--step--1); font-weight: 600; color: var(--green); }
.pdp-stock.out { color: var(--sale); }
.pdp-buy { display: flex; gap: var(--s3); margin-top: var(--s6); align-items: center; }
.pdp-tabs { display: flex; flex-wrap: wrap; gap: var(--s6); border-bottom: 1px solid var(--line); margin-top: var(--s5); }
.pdp-tab { padding-block: var(--s3); font-size: var(--step-0); font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; transition: color var(--fast) var(--ease); }
.pdp-tab:hover { color: var(--dark); }
.pdp-tab.active { color: var(--green); border-bottom-color: var(--green); }
.pdp-description { margin-top: var(--s4); color: var(--dark); font-size: var(--step-0); line-height: 1.7; text-align: justify; }
.pdp-description > :first-child { margin-top: 0; }
.pdp-description > :last-child { margin-bottom: 0; }
.pdp-description p { margin: 0 0 var(--s3); }
.pdp-description p:empty, .pdp-description div:empty, .pdp-description p:has(> br:only-child) { display: none; }
.pdp-description ul, .pdp-description ol { margin: 0 0 var(--s3); padding-left: 1.4em; }

.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); height: 44px; background: var(--white); }
.stepper button { width: 40px; height: 100%; font-size: 17px; color: var(--muted); }
.stepper button:hover { color: var(--green); }
.stepper span { min-width: 30px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }

.acc { border-top: 1px solid var(--line); margin-top: var(--s7); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { padding: var(--s4) 0; font-weight: 600; font-size: var(--step-0); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: '+'; color: var(--muted); font-size: 17px; }
.acc details[open] summary::after { content: '−'; }
.acc .acc-body { padding-bottom: var(--s4); color: var(--muted); font-size: var(--step--1); line-height: 1.7; }

.reviews { margin-top: var(--s7); }
.review { border-top: 1px solid var(--line); padding-block: var(--s4); }
.review .who { display: flex; align-items: center; gap: var(--s3); font-size: var(--step--1); }
.review .who b { font-weight: 600; }
.review .when { color: var(--muted-soft); font-size: var(--step--2); margin-left: auto; }
.review p { color: var(--muted); font-size: var(--step--1); margin-top: var(--s2); }

/* ============================================================
   Cart / checkout
   ============================================================ */
.two-col { display: grid; grid-template-columns: 1fr 372px; gap: var(--s7); align-items: start; padding-top: var(--s5); }
.panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5); }
.panel + .panel { margin-top: var(--s4); }
.panel h2 { font-family: var(--font-display); font-weight: 300; font-size: var(--step-2); margin-bottom: var(--s4); }
.panel h3 { font-size: var(--step-0); font-weight: 600; margin-bottom: var(--s3); }

/* The cart drawer is always a narrow fixed-width panel (width: min(400px, 100vw)) regardless of
   the browser window's own width, so .line needs this compact layout unconditionally - a
   @media viewport breakpoint can't key off an element's own width, only the window's. */
.line { display: grid; grid-template-columns: 64px 1fr; column-gap: var(--s3); row-gap: 4px; padding-block: var(--s4); border-bottom: 1px solid var(--line); }
.line:last-child { border-bottom: 0; }
.line-img { grid-row: span 2; width: 64px; height: 64px; background: #FBFAF7; border-radius: var(--radius-sm); padding: var(--s2); }
.line-img img { width: 100%; height: 100%; object-fit: contain; }
.line-name { font-size: var(--step--1); line-height: 1.45; }
.line-meta { font-size: var(--step--2); color: var(--muted); margin-top: 3px; }
.line-right { text-align: left; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s2); width: 100%; }
.line-total { font-weight: 600; }
.line-remove { font-size: var(--step--2); color: var(--muted); }
.line-remove:hover { color: var(--sale); }

.sum-row { display: flex; justify-content: space-between; padding-block: 9px; font-size: var(--step-0); }
.sum-row.total { border-top: 1px solid var(--line); margin-top: var(--s3); padding-top: var(--s4); font-size: var(--step-1); font-weight: 700; }
.sum-row .free { color: var(--green); font-weight: 600; }
.sum-row.saving { color: var(--sale); }

.progress { height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; margin-top: var(--s2); }
.progress i { display: block; height: 100%; background: var(--green); border-radius: 3px; transition: width var(--slow) var(--ease); }
.ship-hint { font-size: var(--step--2); color: var(--muted); margin-top: var(--s3); }
.ship-hint b { color: var(--dark); }

.promo { display: flex; gap: var(--s2); margin-top: var(--s4); }
.promo input {
  flex: 1; height: 42px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  padding: 0 18px; background: var(--cream); outline: none; font-size: var(--step--1);
}
.promo input:focus { border-color: var(--green); background: #fff; }
.promo-msg { font-size: var(--step--2); margin-top: var(--s2); }
.promo-msg.ok { color: var(--green); }
.promo-msg.no { color: var(--sale); }

.field { margin-bottom: var(--s4); }
.field label { display: block; font-size: var(--step--2); font-weight: 600; color: var(--muted); margin-bottom: 6px; letter-spacing: .03em; }
.field input, .field select, .field textarea {
  width: 100%; height: 44px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 0 14px; background: var(--white); outline: none; font-size: var(--step-0);
  transition: border-color var(--fast) var(--ease);
}
.field textarea { height: auto; padding: 12px 14px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }

.pay { display: grid; gap: var(--s3); }
.pay-opt {
  display: flex; align-items: center; gap: var(--s3);
  border: 1px solid var(--line-strong); border-radius: var(--radius); padding: var(--s4);
  cursor: pointer; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.pay-opt:hover { border-color: var(--sage); }
.pay-opt input { accent-color: var(--green); width: 17px; height: 17px; }
.pay-opt.on { border-color: var(--green); background: var(--green-wash); }
.pay-logo {
  width: 46px; height: 30px; border-radius: 4px; display: grid; place-items: center;
  font-size: 9px; font-weight: 800; color: #fff; letter-spacing: .02em; flex: none;
}
.pay-name { font-size: var(--step-0); font-weight: 600; }
.pay-desc { font-size: var(--step--2); color: var(--muted); }

.done { text-align: center; padding: var(--s8) var(--s5); }
.done .mark { width: 66px; height: 66px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; margin: 0 auto var(--s5); font-size: 30px; }
.done h2 { font-family: var(--font-display); font-weight: 300; font-size: var(--step-3); }
.done p { color: var(--muted); margin-top: var(--s3); }
.done .ref { font-weight: 700; color: var(--dark); }

/* ============================================================
   Modal + drawer
   ============================================================ */
.scrim {
  position: fixed; inset: 0; background: rgba(12,12,12,.45); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity var(--normal) var(--ease), visibility var(--normal);
  z-index: var(--z-modal);
}
.scrim.open { opacity: 1; visibility: visible; }

.modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -46%) scale(.98);
  width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 64px); overflow-y: auto;
  background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; z-index: calc(var(--z-modal) + 1);
  transition: opacity var(--normal) var(--ease), transform var(--normal) var(--ease), visibility var(--normal);
}
.modal.open { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
.modal-close { position: absolute; top: var(--s4); right: var(--s4); width: 32px; height: 32px; border-radius: 50%; background: var(--cream); display: grid; place-items: center; font-size: 17px; color: var(--muted); z-index: 2; }
.modal-close:hover { background: var(--sand); }
.qv { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); padding: var(--s6); }
.qv-media { background: #FBFAF7; border-radius: var(--radius); padding: var(--s5); }
.qv-media img { width: 100%; aspect-ratio: 1; object-fit: contain; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 100vw);
  background: var(--white); box-shadow: var(--shadow-lg); z-index: calc(var(--z-modal) + 1);
  transform: translateX(100%); transition: transform var(--normal) var(--ease);
  display: flex; flex-direction: column;
}
.drawer.open { transform: none; }
.drawer-head { display: flex; align-items: center; padding: var(--s5); border-bottom: 1px solid var(--line); }
.drawer-head h3 { font-weight: 600; font-size: var(--step-1); }
.drawer-head button { margin-left: auto; font-size: 20px; color: var(--muted); }
.drawer-body { flex: 1; overflow-y: auto; padding: 0 var(--s5); }
.drawer-foot { padding: var(--s5); border-top: 1px solid var(--line); background: var(--cream); }

/* ============================================================
   Footer
   ============================================================ */
.foot { background: var(--dark); color: rgba(255,255,255,.72); margin-top: var(--s8); }
.foot-top { display: flex; flex-wrap: wrap; gap: var(--s6) var(--s7); padding-block: var(--s8) var(--s7); }
.foot-top > * { flex: 1 1 150px; min-width: 0; }
.foot-top > :first-child { flex: 1.6 1 260px; }
.foot h4 { color: #fff; font-size: var(--step--2); letter-spacing: var(--tracking-label); text-transform: uppercase; margin-bottom: var(--s4); font-weight: 600; }
.foot li { margin-bottom: 9px; font-size: var(--step--1); }
.foot a:hover { color: #fff; }
.foot .brand img { width: 180px; }
.foot .blurb { font-size: var(--step--1); font-weight: 300; line-height: 1.75; margin-top: var(--s4); max-width: 34ch; }
.foot-contact { display: flex; align-items: center; gap: var(--s2); font-size: var(--step--1); margin-bottom: 9px; }
.foot-contact .icon { width: 15px; height: 15px; color: var(--sage); flex: none; }

.pays { display: flex; gap: 7px; flex-wrap: wrap; margin-top: var(--s4); }
.pays span { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-radius: 5px; padding: 6px 11px; font-size: 10px; font-weight: 700; color: #fff; letter-spacing: .02em; }

.foot-bot { border-top: 1px solid rgba(255,255,255,.13); padding-block: var(--s5); display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; font-size: var(--step--2); }
.disclaimer {
  background: rgba(255,255,255,.07); border: 1px dashed rgba(255,255,255,.24);
  border-radius: var(--radius-sm); padding: 11px var(--s4); font-size: var(--step--2);
  color: rgba(255,255,255,.8); margin-bottom: var(--s5);
}

/* ============================================================
   Page-load reveal — one orchestrated moment, not scattered fidgets
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(10px); animation: rise var(--slow) var(--ease) forwards; }
  .reveal:nth-child(1) { animation-delay: 40ms; }
  .reveal:nth-child(2) { animation-delay: 90ms; }
  .reveal:nth-child(3) { animation-delay: 140ms; }
  .reveal:nth-child(4) { animation-delay: 190ms; }
  .reveal:nth-child(5) { animation-delay: 240ms; }
  @keyframes rise { to { opacity: 1; transform: none; } }
}

/* ============================================================
   Responsive
   ============================================================ */
/* Hero gets its own band, wider than the grid breakpoint below. Between
   ~981px and ~1340px the hero is still two-column (the 288px rail), so
   hero-main is narrow while the copy and artwork are still at desktop size
   and they collide. Verified clear at 320–1600. */
@media (max-width: 1340px) {
  .hero-copy { max-width: 18rem; }
  .hero-img { max-width: 40%; }
  .hero-main h1, .hero-main .hero-title { font-size: 2.1rem; }
  .hero-main { padding: var(--s7) var(--s6); }
}

/* Below this the artwork would sit behind the headline whatever we do to the
   copy width, so it drops out and the copy takes the full panel. */
@media (max-width: 800px) {
  .hero-img { display: none; }
  .hero-copy { max-width: none; }
}

@media (max-width: 1180px) {
  .grid--5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .listing { grid-template-columns: 216px 1fr; gap: var(--s5); }
  .two-col { grid-template-columns: 1fr 320px; gap: var(--s5); }
}

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .hero-rail { grid-template-rows: auto; grid-template-columns: 1fr 1fr; }
  /* Full-width hero here, so the artwork has room to grow again. */
  .hero-img { max-width: 44%; }
  .hero-copy { max-width: 26rem; }
  .pdp { grid-template-columns: 1fr; gap: var(--s6); }
  .two-col { grid-template-columns: 1fr; }
  .foot-top { grid-template-columns: 1fr 1fr; gap: var(--s6); }
  .mega .shell { grid-template-columns: 1fr 1fr; }
  .mega-subnav-content { grid-template-columns: repeat(2, minmax(140px, 200px)); gap: var(--s7); }
  .mega-promo { display: none; }
}

/* ============================================================
   Authentication & Account Pages (Pure CSS)
   ============================================================ */
.auth-page { display: flex; justify-content: center; padding: var(--s4); }
.auth-card {
  width: 100%; max-width: 460px; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--s4) var(--s5); box-shadow: var(--shadow);
}
.auth-header { text-align: center; margin-bottom: var(--s3); }
.auth-header h1 { font-family: var(--font-display); font-size: var(--step-2); font-weight: 400; }
.auth-header h1 em { font-style: italic; font-weight: 500; }
.auth-header p { font-size: var(--step--2); color: var(--muted); margin-top: 4px; }

.auth-tabs { display: flex; border-bottom: 1px solid var(--line); margin-bottom: var(--s3); }
.auth-tab {
  flex: 1; text-align: center; padding: var(--s2) 0; font-size: var(--step--1); font-weight: 600;
  color: var(--muted); border-bottom: 2px solid transparent; cursor: pointer; transition: all var(--fast) var(--ease);
}
.auth-tab:hover { color: var(--dark); }
.auth-tab.active { color: var(--green); border-bottom-color: var(--green); }

.auth-form { display: flex; flex-direction: column; gap: var(--s2); }
.auth-form .btn { height: 40px; }
.auth-field { display: flex; flex-direction: column; gap: 4px; }
.auth-label { font-size: var(--step--2); font-weight: 600; color: var(--dark); letter-spacing: .02em; }
.auth-input {
  width: 100%; height: 40px; padding: 0 14px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); font-size: var(--step-0); background: var(--white); outline: none;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.auth-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-wash); }
.auth-help { font-size: var(--step--2); color: var(--muted); }
.auth-error-box { background: #FAECE9; border: 1px solid rgba(178, 58, 46, 0.25); color: var(--sale); padding: 10px 14px; border-radius: var(--radius-sm); font-size: var(--step--1); }

.auth-divider { display: flex; align-items: center; margin: var(--s3) 0; color: var(--muted); font-size: var(--step--2); }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.auth-divider span { padding: 0 var(--s3); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }

.auth-btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 40px;
  background: var(--white); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font-size: var(--step--1); font-weight: 600; color: var(--dark); text-decoration: none;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.auth-btn-google:hover { background: var(--cream); border-color: var(--line-strong); box-shadow: var(--shadow-sm); }

.auth-footer { text-align: center; margin-top: var(--s3); font-size: var(--step--1); color: var(--muted); }
.auth-footer a { color: var(--green); font-weight: 600; text-decoration: underline; }
.auth-footer a:hover { color: var(--green-dark); }

/* ============================================================
   Checkout Modern Layout (Pure CSS)
   ============================================================ */
.checkout-grid { display: grid; grid-template-columns: 1fr 380px; gap: var(--s6); align-items: start; margin-top: var(--s4); }
.checkout-panel {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s5); margin-bottom: var(--s5);
}
.checkout-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s4); }
.checkout-panel-title { font-size: var(--step-0); font-weight: 700; color: var(--dark); margin: 0; }
.checkout-badge-user {
  display: inline-flex; align-items: center; gap: 8px; background: var(--green-wash);
  border: 1px solid var(--sage); padding: 6px 14px; border-radius: var(--radius-pill);
  font-size: var(--step--1); color: var(--dark);
}
.checkout-badge-user a { color: var(--sale); font-weight: 600; text-decoration: underline; margin-left: 6px; white-space: nowrap; }

.checkout-pay-list { display: flex; flex-direction: column; gap: var(--s3); }
.checkout-pay-card {
  display: flex; align-items: center; gap: var(--s3); padding: var(--s4);
  border: 1px solid var(--line-strong); border-radius: var(--radius); cursor: pointer;
  transition: all var(--fast) var(--ease); background: var(--white);
}
/* .checkout-pay-card sets its own display:flex, which would otherwise override the
   browser's default [hidden] rule (author styles beat user-agent styles regardless of
   specificity) - this makes `hidden` actually take effect on payment options we hide. */
.checkout-pay-card[hidden] { display: none; }
.checkout-pay-card:hover { border-color: var(--sage); }
.checkout-pay-card.active { border-color: var(--green); background: var(--green-wash); }
.checkout-pay-card input { accent-color: var(--green); width: 18px; height: 18px; }

/* ============================================================
   Profile & Orders Tracking (Pure CSS)
   ============================================================ */
.profile-wrap { padding-top: var(--s4); }
.profile-hero {
  background: var(--dark); color: #fff; border-radius: var(--radius-lg);
  padding: var(--s6) var(--s6); display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: var(--s4); margin-bottom: var(--s6);
}
.profile-avatar-row { display: flex; align-items: center; gap: var(--s4); }
.profile-avatar {
  width: 64px; height: 64px; border-radius: 50%; background: var(--green);
  color: #fff; display: grid; place-items: center; font-size: 24px; font-weight: 700;
}
.profile-name { font-size: var(--step-2); font-weight: 600; margin: 0; }
.profile-meta { font-size: var(--step--1); color: rgba(255,255,255,.75); margin-top: 4px; }
.profile-orders-grid { display: grid; gap: var(--s4); }
.order-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s5); transition: border-color var(--fast) var(--ease);
}
.order-card:hover { border-color: var(--line-strong); }
.order-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--line); padding-bottom: var(--s3); margin-bottom: var(--s4); }
.order-ref { font-weight: 700; font-size: var(--step-0); color: var(--dark); }
.order-status-badge {
  padding: 4px 10px; border-radius: var(--radius-pill); font-size: var(--step--2);
  font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
}
.order-status-badge.confirmed { background: var(--green-wash); color: var(--green-dark); border: 1px solid var(--sage); }
.order-status-badge.processing { background: #F5EFE0; color: #7A6328; border: 1px solid var(--sand); }
.order-status-badge.dispatched { background: rgba(145, 196, 161, 0.25); color: var(--dark); border: 1px solid var(--sage); }
.order-status-badge.delivered { background: var(--green-wash); color: var(--green-dark); border: 1px solid var(--sage); }
.order-status-badge.cancelled { background: #FAECE9; color: var(--sale); border: 1px solid rgba(178, 58, 46, 0.25); }

/* ============================================================
   Shopping Bag & Cart Modern Styles (Pure CSS)
   ============================================================ */
.cart-wrap { padding-top: var(--s4); }
.cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: var(--s6); align-items: start; }
.cart-box { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5); }
.cart-item-row { display: grid; grid-template-columns: 80px 1fr auto auto; gap: var(--s4); align-items: center; border-bottom: 1px solid var(--line); padding-bottom: var(--s4); margin-bottom: var(--s4); }
.cart-item-row:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.cart-item-row img { width: 80px; height: 80px; object-fit: contain; background: var(--cream); border-radius: var(--radius-sm); }
.cart-item-title { font-weight: 600; font-size: var(--step-0); color: var(--dark); text-decoration: none; display: block; }
.cart-item-title:hover { color: var(--green); }
.cart-item-sub { font-size: var(--step--1); color: var(--muted); margin-top: 4px; }
.cart-item-tiers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cart-item-tier { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: var(--radius-pill); background: var(--cream); color: var(--muted); border: 1px solid var(--line); }
.cart-item-tier.active { background: var(--green-wash); color: var(--green-dark); border-color: var(--sage); }
.cart-qty-box { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); height: 34px; background: #fff; }
.cart-qty-box button { width: 32px; height: 100%; display: grid; place-items: center; color: var(--muted); font-size: 15px; }
.cart-qty-box button:hover { color: var(--dark); }
.cart-qty-box span { min-width: 24px; text-align: center; font-size: var(--step--1); font-weight: 600; }
.cart-item-total { font-weight: 700; font-size: var(--step-0); color: var(--dark); text-align: right; }
.cart-item-actions { text-align: right; }
.cart-item-del { background: none; border: none; color: var(--sale); font-size: var(--step--2); cursor: pointer; margin-top: 4px; }

.cart-free-ship-card { background: var(--cream); padding: var(--s3) var(--s4); border-radius: var(--radius); margin-bottom: var(--s4); font-size: var(--step--1); }
.cart-free-ship-bar { background: var(--line-strong); height: 6px; border-radius: 3px; overflow: hidden; margin-top: 6px; }
.cart-free-ship-fill { background: var(--green); height: 100%; transition: width 0.3s ease; }

.summary-aside { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5); position: sticky; top: 90px; }
.summary-title { font-size: var(--step-0); font-weight: 700; border-bottom: 1px solid var(--line); padding-bottom: var(--s3); margin-top: 0; margin-bottom: var(--s4); }

/* ---- Responsive Tabbar & Media Queries ---- */
@media (max-width: 1200px) {
  .grid--5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .checkout-grid, .cart-layout { grid-template-columns: 1fr; }
  .utility .u-right a:nth-child(n+3) { display: none; }
  .utility .u-right .dot:nth-of-type(n+2) { display: none; }
}

@media (max-width: 860px) {
  .grid--5, .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trust { grid-template-columns: 1fr 1fr; gap: var(--s4); }
  .masthead .shell { height: 64px; gap: var(--s4); }
  .brand img { width: 132px; }
  .catnav { display: none; }
  .listing { grid-template-columns: 1fr; }
  .facets { position: static; display: none; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4); margin-bottom: var(--s5); background: var(--white); }
  .facets.open { display: block; }
  .qv { grid-template-columns: 1fr; gap: var(--s4); padding: var(--s5); }
  .filter-toggle-btn { display: inline-flex; align-items: center; gap: var(--s2); order: -1; }
}

@media (max-width: 720px) {
  .utility .shell { height: 32px; justify-content: center; padding-inline: 12px; }
  .utility .u-left { width: 100%; justify-content: center; text-align: center; font-size: 11px; }
  .utility .u-right { display: none; }
}

@media (max-width: 620px) {
  .grid--5, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
  /* Compact stacked circle, not the web card - image on top, label below, no border/subtext. */
  .tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); }
  .tile {
    background: transparent; border: none; border-radius: 0; padding: 0; width: 72px;
    flex-direction: column; text-align: center; gap: var(--s2);
  }
  .tile img { width: 52px; height: 52px; object-fit: cover; border-radius: 50%; border: 1px solid var(--line); }
  .tile h3 { font-size: var(--step--2); }
  .tile .n { display: none; }
  .hero-main { padding: var(--s6) var(--s5); min-height: 0; }
  .hero-rail { grid-template-columns: 1fr; }
  .section { padding-block: var(--s5); }
  .masthead .shell { flex-wrap: wrap; height: auto; padding-block: var(--s3); row-gap: var(--s3); }
  .search { order: 3; flex-basis: 100%; max-width: none; }
  .search-box { height: 40px; }
  .foot-top { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .checkout-badge-user {
    display: flex; flex-wrap: wrap; align-items: baseline; width: 100%;
    border-radius: var(--radius); gap: 4px 8px;
  }
  .checkout-badge-text { flex-basis: 100%; }
  .checkout-badge-user a { margin-left: 0; }
  .card-body { padding: var(--s3); }
  /* .pdp-price wraps at narrow widths; margin-left:auto would still shove this button to the
     far right of its own wrapped line, stranding it with a large empty gap to its left. */
  .pdp-review-inline { margin-left: 0; }
  /* The order/return reference search forms are a fixed input+button row with no wrap, which
     overflowed the viewport on narrow phones (button clipped off-screen). Stack them instead. */
  .track-search-form { flex-direction: column; }
  .track-search-form button { width: 100%; }
  .cart-item-row {
    grid-template-columns: 64px 1fr; column-gap: var(--s3); row-gap: var(--s2);
    grid-template-areas: "img info" "img qty" "img actions";
  }
  .cart-item-row img { grid-area: img; width: 64px; height: 64px; }
  .cart-item-row .cart-item-info { grid-area: info; }
  .cart-item-row .cart-qty-box { grid-area: qty; justify-self: start; }
  .cart-item-row .cart-item-actions { grid-area: actions; text-align: left; }
  .cart-item-row .cart-item-total { text-align: left; }
  body { padding-bottom: 62px; }
}

/* ---- Mobile tab bar ---- */
.tabbar { display: none; }
@media (max-width: 860px) {
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-header);
    background: var(--white); border-top: 1px solid var(--line);
    display: grid; grid-template-columns: repeat(5, 1fr); padding: 7px 0 max(7px, env(safe-area-inset-bottom));
  }
  .tabbar a { display: grid; justify-items: center; gap: 3px; font-size: 10px; color: var(--muted); position: relative; }
  .tabbar a.on { color: var(--green); }
  .tabbar .icon { width: 20px; height: 20px; }
  body { padding-bottom: 62px; }
  .filter-fab {
    position: sticky; bottom: var(--s4); z-index: 5; margin: var(--s4) auto 0; display: flex;
  }
  /* Lifted clear of the fixed .tabbar (62px tall) below it. */
  .whatsapp-fab { bottom: calc(62px + var(--s4)); right: var(--s4); width: 50px; height: 50px; }
  .whatsapp-fab svg { width: 26px; height: 26px; }
}

/* ---- WhatsApp Support FAB ---- */
.whatsapp-fab {
  position: fixed; right: var(--s5); bottom: var(--s5); z-index: 70;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: transform var(--fast) var(--ease);
}
.whatsapp-fab:hover { transform: scale(1.08); color: #fff; }
.whatsapp-fab svg { width: 30px; height: 30px; }

/* Wishlist heart on product cards (sits above .card-media, outside its link) */
.card > .wish { z-index: 3; width: 32px; height: 32px; box-shadow: 0 2px 8px rgba(25,49,56,.12); }
.card > .wish .icon { width: 16px; height: 16px; }
.wish.on svg { fill: currentColor; }
.wish:disabled { opacity: .6; cursor: progress; }

/* Product page view counter */
.pdp-views { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s2); font-size: var(--step--1); color: var(--muted); }
.pdp-views svg { width: 15px; height: 15px; color: var(--green); }
.pdp-views b { color: var(--dark); font-weight: 700; }

/* View count on product cards (sits at the right end of the price row) */
.card-views { order: 99; margin-left: auto; align-self: center; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.card-views svg { width: 13px; height: 13px; color: var(--green); }
/* ============================================================
   Home hero carousel - every active "Home Hero" banner from Admin > Banners & Sliders.
   Slides sit side by side in a flex track that is translated by JS (home page script).
   ============================================================ */
.hero-carousel { position: relative; min-width: 0; border-radius: var(--radius-lg); overflow: hidden; }
.hero-track { display: flex; transition: transform .7s cubic-bezier(.22,.61,.36,1); will-change: transform; }
.hero-carousel .hero-slide { flex: 0 0 100%; min-width: 0; border-radius: 0; }
.hero-carousel.is-dragging .hero-track { transition: none; }

.hero-arrow {
  position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(6px); cursor: pointer; opacity: 0;
  transition: opacity .2s ease, background .2s ease;
}
.hero-arrow svg { width: 20px; height: 20px; }
.hero-arrow--prev { left: 14px; }
.hero-arrow--next { right: 14px; }
.hero-carousel:hover .hero-arrow, .hero-arrow:focus-visible { opacity: 1; }
.hero-arrow:hover { background: rgba(255,255,255,.32); }

.hero-dots { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 3; display: flex; justify-content: center; gap: 8px; }
.hero-dot { width: 28px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.38); cursor: pointer; overflow: hidden; transition: width .3s ease, background .2s ease; }
.hero-dot span { display: block; height: 100%; width: 0; background: #fff; border-radius: inherit; }
.hero-dot.is-active { width: 44px; }
/* Progress fill on the active dot shows when the next slide is coming. */
.hero-carousel.is-playing .hero-dot.is-active span { animation: heroDotFill var(--hero-interval, 6s) linear forwards; }
.hero-carousel:not(.is-playing) .hero-dot.is-active span { width: 100%; }
@keyframes heroDotFill { from { width: 0; } to { width: 100%; } }

@media (hover: none) { .hero-arrow { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-track { transition: none; } }

/* ============================================================
   CMS pages (/page/{slug}) - About Us, Terms, Return Policy, Privacy...
   The design is fixed here; admin-entered HTML only supplies text, so inline
   fonts/colours/sizes pasted from Word are neutralised inside .cms-prose.
   ============================================================ */
.cms-preview-flag { background: var(--sale); color: #fff; text-align: center; font-size: var(--step--1); font-weight: 700; padding: 6px; letter-spacing: .04em; }
.cms-hero { background: var(--dark); color: #fff; padding-block: var(--s4) var(--s7); position: relative; overflow: hidden; }
.cms-hero::after { content: ""; position: absolute; right: -60px; bottom: -80px; width: 320px; height: 320px; background: var(--mark) no-repeat center / contain; opacity: .06; pointer-events: none; }
.cms-hero .crumbs, .cms-hero .crumbs a { color: rgba(255,255,255,.6); }
.cms-hero .crumbs a:hover, .cms-hero .crumbs span:last-child { color: #fff; }
.cms-eyebrow { margin-top: var(--s5); font-size: var(--step--2); letter-spacing: var(--tracking-label, .14em); text-transform: uppercase; color: var(--sage); font-weight: 600; }
.cms-hero h1 { font-family: var(--font-display); font-weight: 300; font-size: var(--step-4); line-height: 1.1; margin-top: var(--s3); max-width: 22ch; }
.cms-subtitle { margin-top: var(--s4); font-size: var(--step-1); font-weight: 300; line-height: 1.7; max-width: 60ch; color: rgba(255,255,255,.78); }
.cms-updated { margin-top: var(--s5); display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--step--1); color: rgba(255,255,255,.6); }
.cms-updated .icon { width: 14px; height: 14px; }


.cms-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: var(--s6); margin-top: var(--s6); align-items: start; }
.cms-aside { position: sticky; top: var(--s5); display: grid; gap: var(--s4); }
.cms-toc, .cms-help { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s5); box-shadow: 0 6px 24px rgba(25,49,56,.05); }
.cms-toc h4 { font-size: var(--step--2); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 0 0 var(--s3); }
.cms-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; border-left: 2px solid var(--line); max-height: 55vh; overflow-y: auto; }
.cms-toc li { counter-increment: toc; }
.cms-toc a { display: flex; gap: 10px; font-size: var(--step--1); color: #3B4B4F; padding: 7px 10px 7px 14px; margin-left: -2px; border-left: 2px solid transparent; line-height: 1.45; transition: color .15s ease, border-color .15s ease, background .15s ease; }
.cms-toc a::before { content: counter(toc, decimal-leading-zero); color: var(--muted-soft); font-variant-numeric: tabular-nums; font-size: var(--step--2); padding-top: 1px; }
.cms-toc a:hover { color: var(--green-dark); background: var(--green-wash); }
.cms-toc a.is-active { color: var(--green-dark); border-left-color: var(--green); font-weight: 700; }
.cms-toc a.is-active::before { color: var(--green); }

.cms-help { background: var(--green-wash); border-color: #D6EBDC; }
.cms-help-head { display: flex; gap: var(--s3); align-items: flex-start; }
.cms-help-icon { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; }
.cms-help-icon .icon { width: 18px; height: 18px; }
.cms-help h4 { margin: 0 0 2px; font-family: var(--font-display); font-weight: 500; font-size: var(--step-1); color: var(--dark); letter-spacing: 0; text-transform: none; }
.cms-help p { margin: 0; font-size: var(--step--1); color: #4E6166; line-height: 1.55; }
.cms-help-actions { display: grid; gap: var(--s2); margin-top: var(--s4); }
.cms-help-btn { display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: var(--radius-sm); font-size: var(--step--1); font-weight: 600; color: var(--dark); background: #fff; border: 1px solid var(--line-strong); transition: background .15s ease, border-color .15s ease; }
.cms-help-btn:hover { border-color: var(--green); color: var(--green-dark); }
.cms-help-btn .icon { width: 14px; height: 14px; }
.cms-help-btn--primary { background: var(--green); border-color: var(--green); color: #fff; }
.cms-help-btn--primary:hover { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.cms-prose { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s7); box-shadow: 0 12px 40px rgba(25,49,56,.06); color: var(--ink); font-family: var(--font-body); font-size: var(--step-1); line-height: 1.8; }
.cms-prose * { font-family: inherit !important; font-size: inherit; line-height: inherit !important; color: inherit; }
.cms-prose p, .cms-prose li, .cms-prose span, .cms-prose div { font-size: inherit !important; margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; }
.cms-prose span, .cms-prose strong, .cms-prose b { color: inherit !important; }
.cms-prose div { border: 0 !important; padding: 0 !important; }
.cms-prose > :first-child { margin-top: 0 !important; }
.cms-prose p { margin: 0 0 var(--s4) !important; color: #3B4B4F; }
.cms-prose h1, .cms-prose h2 { font-family: var(--font-display) !important; font-weight: 400; font-size: var(--step-3) !important; line-height: 1.25 !important; color: var(--dark) !important; margin: var(--s7) 0 var(--s4) !important; padding-top: var(--s5); border-top: 1px solid var(--line); scroll-margin-top: var(--s7); }
.cms-prose > h1:first-child, .cms-prose > h2:first-child { border-top: 0; padding-top: 0; }
.cms-prose h3 { font-family: var(--font-display) !important; font-weight: 500; font-size: var(--step-2) !important; color: var(--dark) !important; margin: var(--s6) 0 var(--s3) !important; }
.cms-prose h4 { font-weight: 700; font-size: var(--step-1) !important; color: var(--dark) !important; margin: var(--s5) 0 var(--s2) !important; }
.cms-prose ul, .cms-prose ol { margin: 0 0 var(--s4) !important; padding-left: 1.4em !important; color: #3B4B4F; }
.cms-prose ul { list-style: disc; }
.cms-prose ol { list-style: decimal; }
.cms-prose li { margin-bottom: var(--s2) !important; padding-left: 4px; }
.cms-prose li::marker { color: var(--green); }
.cms-prose a { color: var(--green-dark) !important; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.cms-prose a:hover { color: var(--green) !important; }
.cms-prose strong, .cms-prose b { font-weight: 700; color: var(--dark) !important; }
.cms-prose blockquote { margin: var(--s5) 0; padding: var(--s4) var(--s5); background: var(--green-wash); border-left: 3px solid var(--green); border-radius: var(--radius-sm); }
.cms-prose img { max-width: 100%; height: auto; border-radius: var(--radius); margin: var(--s4) 0; }
.cms-prose table { width: 100%; border-collapse: collapse; margin: var(--s4) 0 var(--s5); font-size: var(--step-0); }
.cms-prose th, .cms-prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.cms-prose th { background: var(--cream); font-weight: 700; color: var(--dark); }
.cms-prose hr { border: 0; border-top: 1px solid var(--line); margin: var(--s6) 0; }

@media (max-width: 900px) {
  .cms-layout { grid-template-columns: 1fr; gap: var(--s4); margin-top: var(--s5); }
  .cms-aside { display: contents; }
  .cms-toc { order: 1; } .cms-prose { order: 2; } .cms-help { order: 3; }
  .cms-toc ol { max-height: none; }
  .cms-prose { padding: var(--s5); margin-top: 0; }
  .cms-hero h1 { font-size: var(--step-3); }
}

/* Admin editor preview: body is click-to-edit */
.cms-prose--editable { outline: 2px dashed transparent; outline-offset: 6px; cursor: text; transition: outline-color var(--fast, .15s) ease; }
.cms-prose--editable:hover { outline-color: var(--sage); }
.cms-prose--editable:focus { outline-color: var(--green); }
body:has(.cms-preview-flag) .whatsapp-fab { display: none; }

/* Footer contacts + social icons (content from Admin > Footer) */
.foot-contacts { margin-top: var(--s4); display: grid; gap: 2px; }
a.foot-contact:hover { color: #fff; }
.foot-social { display: flex; gap: var(--s2); margin-top: var(--s4); }
.foot-social a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #fff; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.foot-social a:hover { transform: translateY(-2px); border-color: transparent; }
.foot-social svg { width: 17px; height: 17px; }
.foot-social-fb:hover { background: #1877F2; }
.foot-social-ig:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.foot-social-tt:hover { background: #000; box-shadow: -2px -2px 0 #25F4EE inset, 2px 2px 0 #FE2C55 inset; }
/* Google: white like the others, official colours on hover */
.foot-social-gg path { fill: currentColor; transition: fill .15s ease; }
.foot-social a.foot-social-gg:hover { background: #fff; }
.foot-social-gg:hover path:nth-child(1) { fill: #EA4335; }
.foot-social-gg:hover path:nth-child(2) { fill: #4285F4; }
.foot-social-gg:hover path:nth-child(3) { fill: #FBBC05; }
.foot-social-gg:hover path:nth-child(4) { fill: #34A853; }
.foot-social-gg svg { width: 18px; height: 18px; }