/* =========================================================================
   Floral Finesse storefront — self-contained stylesheet (no build step).
   Premium light theme: white, charcoal and grey (Tailwind neutral).
   ========================================================================= */

:root {
  /* Tailwind white + neutral greys (charcoal = neutral-800). */
  --white: #ffffff;
  --grey-50: #f5f5f5;        /* neutral-100 */
  --grey-100: #e5e5e5;       /* neutral-200 */
  --grey: #a3a3a3;           /* neutral-400 */
  --charcoal: #262626;       /* neutral-800 */
  --charcoal-dark: #171717;  /* neutral-900 */
  --ink: #171717;            /* neutral-900 */
  --ink-soft: #404040;       /* neutral-700 */
  --muted: #737373;          /* neutral-500 */
  --line: #e5e5e5;           /* neutral-200 */
  --bg: var(--white);
  --card: var(--white);
  --danger: #b91c1c;
  /* Stand-in for a missing photo (dropdown banner, drawer card, category tile). */
  --placeholder: linear-gradient(160deg, #737373, #262626);
  --radius: 14px;
  /* Single source of truth for the page gutter — the header, every .container
     and the flash stack all read it, so they stay flush at any width. */
  --gutter: 32px;
  /* Top bar + header (+ link row on desktop); the header scrolls away. */
  --header-h: 180px;
  /* Phone tab bar height (0 where the bar is hidden); content clears it. */
  --bnav-h: 0px;
  --shadow-sm: 0 1px 2px rgba(23, 23, 23, .06);
  --shadow: 0 6px 24px rgba(23, 23, 23, .08);
  --shadow-lg: 0 18px 50px rgba(23, 23, 23, .12);
  /* Content runs edge to edge; only the gutter keeps it off the screen edge. */
  --maxw: none;

  /* ---- Liquid glass system -------------------------------------------- */
  --glass-bg: rgba(255, 255, 255, .55);
  --glass-bg-strong: rgba(255, 255, 255, .72);
  --glass-bg-soft: rgba(255, 255, 255, .38);
  --glass-blur: saturate(1.7) blur(16px);
  --glass-blur-lg: saturate(1.8) blur(24px);
  --glass-border: rgba(255, 255, 255, .55);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .8),
                     inset 0 0 0 1px rgba(255, 255, 255, .18);
  --glass-shadow: 0 8px 32px rgba(23, 23, 23, .12), 0 2px 8px rgba(23, 23, 23, .06);
  --glass-shadow-lg: 0 20px 60px rgba(23, 23, 23, .18), 0 4px 12px rgba(23, 23, 23, .08);
  --glass-tint: rgba(38, 38, 38, .06);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* Scroll-scrubbed silk fabric sequence — sits at the very back of the site. */
#silk-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
  display: block;
  pointer-events: none;
}

/* Light scrim + ambient brand glows over the silk, so the fabric reads as a
   faint luxury texture and dark text stays fully legible. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  /* background:
    radial-gradient(38rem 30rem at 8% -6%, rgba(38, 38, 38, .16), transparent 60%),
    radial-gradient(34rem 28rem at 100% 4%, rgba(163, 163, 163, .14), transparent 58%),
    radial-gradient(40rem 34rem at 50% 108%, rgba(38, 38, 38, .12), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .74), rgba(250, 250, 250, .8)); */
    background:
    radial-gradient(38rem 30rem at 8% -6%, rgba(38, 38, 38, 0.08), transparent 60%),
    radial-gradient(34rem 28rem at 100% 4%, rgba(163, 163, 163, 0.07), transparent 58%),
    radial-gradient(40rem 34rem at 50% 108%, rgba(38, 38, 38, 0.06), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(250, 250, 250, 0.95));
}

/* Reusable glass surface — apply the visual language consistently. */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
}

h1, h2, h3, h4 {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 .4em;
  font-weight: 600;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding: 56px 0; }
.section-tight { padding: 32px 0; }

.muted { color: var(--muted); }
.center { text-align: center; }
.flex { display: flex; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.gap-sm { gap: 8px; }

.section-head { display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }
.section-head h2 { font-size: 28px; margin: 0; }
.section-head .eyebrow { color: var(--charcoal); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; font-size: 12px; display: block; margin-bottom: 4px; }

/* ---- Buttons ---------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: 999px; cursor: pointer;
  font: inherit; font-weight: 600; padding: 11px 22px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space: nowrap; overflow: hidden;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
/* Specular sheen shared by every button. */
.btn::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0) 45%);
  opacity: .8;
}
.btn-primary { background: linear-gradient(180deg, rgba(64,64,64,.92), rgba(38,38,38,.92));
  color: #fff; border-color: rgba(255,255,255,.25);
  box-shadow: var(--glass-highlight), 0 6px 18px rgba(38,38,38,.35); }
.btn-primary:hover { transform: translateY(-1px);
  box-shadow: var(--glass-highlight), 0 12px 28px rgba(38,38,38,.42); }
.btn-ghost { background: var(--glass-bg); border-color: var(--glass-border);
  color: var(--ink); box-shadow: var(--glass-highlight), var(--shadow-sm); }
.btn-ghost:hover { border-color: rgba(38,38,38,.5); color: var(--charcoal);
  transform: translateY(-1px); box-shadow: var(--glass-highlight), var(--shadow); }
.btn-dark { background: linear-gradient(180deg, rgba(38,38,38,.9), rgba(10,10,10,.92));
  color: #fff; border-color: rgba(255,255,255,.15);
  box-shadow: var(--glass-highlight), var(--shadow); }
.btn-dark:hover { transform: translateY(-1px);
  box-shadow: var(--glass-highlight), var(--shadow-lg); }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---- Header ----------------------------------------------------------- */
/* Announcement strip, then a white header: centred logo between the menu
   button and the search/cart icons, with the link row underneath on desktop.
   Header and footer use Figtree at light weights. */
.ff-topbar { background: #272727; color: #fff; text-align: center;
  font-family: 'Figtree', sans-serif; font-weight: 300; font-size: 18px; line-height: 30px;
  padding: 0 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ff-topbar a { color: inherit; }

.site-header { position: relative; z-index: 60;
  /* Colours live in variables so the home page can flip the whole bar to
     transparent (over the hero) in one rule. */
  --hdr-bg: #fff; --hdr-fg: #050505; --hdr-line: #e3e3e3;
  --hdr-badge-bg: #000; --hdr-badge-fg: #fff;
  --hdr-logo-dark: block; --hdr-logo-light: none;
  background: var(--hdr-bg); color: var(--hdr-fg);
  font-family: 'Figtree', sans-serif; font-weight: 300; font-size: 14px; }
.hdr-mid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  min-height: 80px; margin: 0 30px; border-bottom: 1px solid var(--hdr-line); }
.hdr-col { display: flex; align-items: center; min-width: 0; }
.hdr-col--center { justify-content: center; }
.hdr-col--right { justify-content: flex-end; gap: 16px; }

.hdr-logo { display: flex; align-items: center; padding: 6px 0; }
.hdr-logo img { width: auto; height: 84px; flex: none; }
.hdr-burger, .hdr-icon { display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.hdr-burger { display: none; width: 30px; height: 30px; }
.hdr-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hdr-cart { position: relative; }
.hdr-count { position: absolute; top: -4px; right: -6px; min-width: 15px; height: 15px;
  padding: 0 3px; border-radius: 15px; background: var(--hdr-badge-bg); color: var(--hdr-badge-fg);
  font-size: 10px; font-weight: 400; line-height: 15px; text-align: center; }

.hdr-nav { text-align: center; }
.hdr-nav__ul { display: inline-flex; flex-wrap: wrap; justify-content: center;
  list-style: none; margin: 0; padding: 0; }
/* Vertical padding fills the 53px row, so the pointer can travel from a link
   down into its dropdown without leaving the item. */
.hdr-nav__item { position: relative; padding: 15px 0; }
.hdr-nav__link { display: flex; align-items: center; padding: 5px 17.5px; line-height: 13px;
  font-size: 13px; font-weight: 500; text-transform: uppercase; color: var(--hdr-fg); }
/* Sale stands out by weight, not colour, so it works on white and over the hero. */
.hdr-nav__link.is-accent { font-weight: 700; }

.hdr-sub { position: absolute; top: 100%; left: 0; z-index: 5; display: flex; gap: 10px;
  width: 440px; padding: 20px; background: #fff; text-align: left;
  box-shadow: 0 0 3px rgba(0, 0, 0, .15);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(15px);
  transition: opacity .2s, visibility .2s, transform .2s; }
.hdr-nav__item:hover > .hdr-sub, .hdr-nav__item:focus-within > .hdr-sub {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.hdr-sub__links { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.hdr-sub__links a { font-size: 13px; font-weight: 300; line-height: 1.5; color: #000;
  padding: 3px 0; }
.hdr-sub__links a:hover { color: #737373; }
.hdr-sub__links .hdr-sub__heading { font-weight: 600; color: #222; text-transform: uppercase;
  padding: 0 0 8px; margin-bottom: 6px; border-bottom: 1px solid #eee; }
.hdr-sub__links .hdr-sub__all { font-weight: 600; color: #262626; text-decoration: underline;
  text-underline-offset: 3px; }
.hdr-sub__banner { flex: 1 1 0; min-width: 0; aspect-ratio: 4 / 5; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 12px; text-align: center; color: #fff; overflow: hidden;
  background: var(--placeholder) center / cover no-repeat; }
.hdr-sub__banner::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .18); }
.hdr-sub__banner > span { position: relative; }
.hdr-sub__banner-title { font-size: 18px; font-weight: 500; line-height: 1.35; }
.hdr-sub__banner-cta { font-size: 14px; font-weight: 400; }

/* ---- Drawers (menu: left, search: right) ------------------------------ */
.ff-overlay { position: fixed; inset: 0; z-index: 468; background: rgba(0, 0, 0, .7);
  opacity: 0; transition: opacity .5s cubic-bezier(.645, .045, .355, 1); }
.ff-overlay.is-open { opacity: 1; }
.ff-drawer { position: fixed; top: 0; bottom: 0; z-index: 469; width: 340px; max-width: 90vw;
  display: flex; flex-direction: column; background: #fff; color: #222;
  font-family: 'Figtree', sans-serif; font-weight: 300; font-size: 14px;
  visibility: hidden;
  transition: transform .5s cubic-bezier(.645, .045, .355, 1), visibility .5s cubic-bezier(.645, .045, .355, 1); }
.ff-drawer--left { left: 0; transform: translateX(-100%); }
.ff-drawer--right { right: 0; transform: translateX(100%); }
.ff-drawer.is-open { visibility: visible; transform: none; }
.ff-drawer__head { display: flex; align-items: center; justify-content: space-between;
  min-height: 50px; padding-left: 20px; border-bottom: 1px solid rgba(129, 129, 129, .2); flex: none; }
.ff-drawer__title { font-family: 'EB Garamond', serif; font-size: 16px; font-weight: 600;
  text-transform: uppercase; color: #222; }
.ff-drawer__close { flex: none; width: 50px; height: 50px; display: inline-flex;
  align-items: center; justify-content: center; padding: 0; border: 0; background: none;
  color: #000; cursor: pointer; }
.ff-drawer__close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ff-drawer__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; }

.mb-menu, .mb-sub { list-style: none; margin: 0; padding: 0; }
.mb-menu__search button { display: flex; align-items: center; gap: 6px; width: 100%;
  min-height: 32px; padding: 5px 20px; border: 0; background: none; cursor: pointer;
  font: inherit; color: #222; text-align: left; }
.mb-menu__search svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.mb-card { position: relative; display: flex; align-items: center; height: 75px; margin: 8px;
  border-radius: 15px; overflow: hidden;
  background: var(--placeholder) center / cover no-repeat; }
.mb-card__link { flex: 1; align-self: stretch; display: flex; align-items: center;
  padding: 5px 20px; color: #fff; font-size: 14px; font-weight: 300; }
.mb-card__link.is-accent { font-weight: 700; }
/* White disc with a plus; the vertical bar turns flat for "minus". */
.mb-card__toggle { position: relative; flex: none; width: 25px; height: 25px; margin-right: 12px;
  padding: 0; border: 0; border-radius: 50px; background: #fff; cursor: pointer; }
.mb-card__toggle::before, .mb-card__toggle::after { content: ""; position: absolute;
  top: 50%; left: 50%; width: 10px; height: 1px; margin: -.5px 0 0 -5px; background: #000;
  transition: transform .3s; }
.mb-card__toggle::after { transform: rotate(90deg); }
.mb-card__toggle[aria-expanded="true"]::after { transform: rotate(0deg); }
.mb-sub a { display: flex; align-items: center; min-height: 32px; padding: 5px 20px 5px 30px;
  color: #000; font-size: 14px; }
.mb-sub .mb-sub__all { margin: 5px 20px; padding: 5px 20px 5px 10px; font-weight: 600;
  border-top: 1px solid rgba(0, 0, 0, .15); }

.ff-search__head { display: flex; align-items: center; gap: 4px; padding: 10px 0 10px 15px;
  flex: none; }
.ff-search__form { flex: 1; display: flex; align-items: center; height: 40px;
  border: 1px solid #ddd; border-radius: 4px; padding: 0 6px 0 12px; }
.ff-search__form input { flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  font: inherit; font-size: 13px; color: #222; }
.ff-search__form button { display: inline-flex; padding: 4px; border: 0; background: none;
  color: #222; cursor: pointer; }
.ff-search__form svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ff-search__head .ff-drawer__close { width: 40px; height: 40px; }
.ff-search__head .ff-drawer__close svg { width: 16px; height: 16px; }
.ff-search__body { padding: 10px 15px 20px; }
.ff-search__label { margin: 0 0 8px; font-weight: 500; font-size: 13px; }
.ff-search__quick { list-style: none; margin: 0 0 20px; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.ff-search__quick a { font-size: 13px; color: #222; }
.ff-search__quick a:hover, .ff-search__all:hover { color: #737373; }
.ff-search__all { font-size: 12px; font-weight: 500; text-transform: uppercase; color: #222; }

body.has-drawer { overflow: hidden; }

.icon { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }

/* ---- Category carousel --------------------------------------------- */
/* A scroll-snapping row of photo cards: swipe or trackpad-scroll it, or use
   the arrows. The column width sets how many fit (5 → 4 → 3, then a peek of
   the next card on phones so the row reads as scrollable). */
.cat-nav { display: flex; align-items: center; gap: 8px; }
.cat-arrow { display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 50%;
  background: var(--white); color: var(--ink); cursor: pointer; transition: .18s; }
.cat-arrow[hidden] { display: none; }
.cat-arrow:hover:not(:disabled) { border-color: var(--charcoal); }
.cat-arrow:disabled { opacity: .35; cursor: default; }
.cat-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.cat-rail { --cat-cols: 5; --cat-gap: 16px;
  display: grid; grid-auto-flow: column; gap: var(--cat-gap);
  grid-auto-columns: calc((100% - var(--cat-gap) * (var(--cat-cols) - 1)) / var(--cat-cols));
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cat-rail::-webkit-scrollbar { display: none; }
.cat-rail:focus-visible { outline: 2px solid var(--charcoal); outline-offset: 4px; }
.cat-tile { position: relative; display: flex; align-items: flex-end; aspect-ratio: 3 / 4;
  overflow: hidden; border-radius: var(--radius); scroll-snap-align: start; color: #fff;
  background: var(--placeholder); isolation: isolate; }
.cat-tile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; object-position: center 20%; transition: transform .6s ease; }
.cat-tile::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.6) 100%); }
.cat-tile:hover img { transform: scale(1.05); }
.cat-tile__body { display: flex; flex-direction: column; gap: 2px; padding: 18px; }
.cat-tile__name { font-family: 'Playfair Display', Georgia, serif; font-size: 20px;
  font-weight: 600; line-height: 1.2; }
.cat-tile__count { font-size: 13px; opacity: .85; }
.cat-tile__cta { margin-top: 8px; font-size: 13px; font-weight: 600; letter-spacing: .04em; }

@media (max-width: 1200px) { .cat-rail { --cat-cols: 4; } }
@media (max-width: 900px) { .cat-rail { --cat-cols: 3; } }
@media (max-width: 600px) {
  .cat-rail { --cat-cols: 2.3; --cat-gap: 10px; }
  .cat-arrow { display: none; }
  .cat-tile__body { padding: 12px; }
  .cat-tile__name { font-size: 16px; }
  .cat-tile__count, .cat-tile__cta { font-size: 12px; }
}

/* ---- Product grid + cards -------------------------------------------- */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.product-card { background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: var(--radius);
  overflow: hidden; transition: .18s; display: flex; flex-direction: column;
  box-shadow: var(--glass-highlight), var(--shadow-sm); }
.product-card:hover { transform: translateY(-3px);
  box-shadow: var(--glass-highlight), var(--glass-shadow); border-color: rgba(38,38,38,.35); }
.product-thumb { position: relative; aspect-ratio: 3/4; overflow: hidden; }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; transition: .3s; }
.product-card:hover .product-thumb img { transform: scale(1.04); }
/* Colour collage shown when a product has no image. The layout is picked from
   the number of tiles (1–9) so the frame is always completely filled, with a
   lead tile spanning extra cells; `dense` packs the rest around it. */
.thumb-fallback { width: 100%; height: 100%; display: grid; gap: 3px; grid-auto-flow: dense;
  grid-template-columns: 1fr; grid-template-rows: 1fr; background: var(--white); }
.thumb-fallback span { display: block; min-width: 0; min-height: 0; }
/* 2: stacked, big over small */
.thumb-fallback:has(> span:nth-child(2):last-child) { grid-template-rows: 3fr 2fr; }
/* 3: wide lead on top, two below */
.thumb-fallback:has(> span:nth-child(3):last-child) {
  grid-template-columns: 1fr 1fr; grid-template-rows: 3fr 2fr; }
.thumb-fallback:has(> span:nth-child(3):last-child) > span:first-child { grid-column: span 2; }
/* 4: tall lead on the left, three stacked on the right */
.thumb-fallback:has(> span:nth-child(4):last-child) {
  grid-template-columns: 3fr 2fr; grid-template-rows: repeat(3, 1fr); }
.thumb-fallback:has(> span:nth-child(4):last-child) > span:first-child { grid-row: span 3; }
/* 5: wide lead on top, 2x2 below */
.thumb-fallback:has(> span:nth-child(5):last-child) {
  grid-template-columns: 1fr 1fr; grid-template-rows: 2fr 1fr 1fr; }
.thumb-fallback:has(> span:nth-child(5):last-child) > span:first-child { grid-column: span 2; }
/* 6–9: 3x3 base */
.thumb-fallback:has(> span:nth-child(6)) {
  grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
/* 6: 2x2 lead, five around it */
.thumb-fallback:has(> span:nth-child(6):last-child) > span:first-child {
  grid-column: span 2; grid-row: span 2; }
/* 7: two wide tiles */
.thumb-fallback:has(> span:nth-child(7):last-child) > span:is(:nth-child(1), :nth-child(5)) {
  grid-column: span 2; }
/* 8: one wide lead */
.thumb-fallback:has(> span:nth-child(8):last-child) > span:first-child { grid-column: span 2; }
.thumb-logo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; }
.thumb-logo span { background: rgba(255,255,255,.82); color: var(--ink); font-weight: 700;
  font-family: 'Playfair Display', serif; padding: 6px 12px; border-radius: 999px; font-size: 13px;
  letter-spacing: .03em; }
.badge-row { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.badge { font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; }
.badge-sale { background: var(--grey); color: #171717; }
.badge-new { background: var(--charcoal); color: #fff; }
.badge-soft { background: var(--grey-50); color: var(--charcoal-dark); }
.product-body { padding: 14px 15px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-meta { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.product-name { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 15px; color: var(--ink);
  line-height: 1.35; margin: 0; }
.swatch-row { display: flex; gap: 5px; margin-top: 2px; }
.swatch { width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15);
  box-shadow: inset 0 0 0 2px #fff; }
.price-row { margin-top: auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  padding-top: 8px; }
.price { font-weight: 800; font-size: 17px; color: var(--ink); white-space: nowrap; }
.price-old { color: var(--muted); text-decoration: line-through; font-size: 13px; }
.price-off { color: var(--charcoal); font-size: 12px; font-weight: 700; }

/* ---- Shop layout: filters + results ---------------------------------- */
.shop-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; }
.filters { position: sticky; top: 20px; background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius); padding: 18px;
  box-shadow: var(--glass-highlight), var(--shadow-sm); }
.filters h4 { font-family: 'Inter', sans-serif; font-size: 12px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); margin: 18px 0 8px; }
.filters h4:first-child { margin-top: 0; }
/* The filter panel is a <details> so it can collapse on narrow screens with no
   JS; the summary is hidden on desktop, where it is always open. */
.filters > summary { display: none; }
.filters-summary { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; cursor: pointer; list-style: none; font-weight: 700; min-height: 24px; }
.filters-summary::-webkit-details-marker { display: none; }
.filters-summary .chev { transition: transform .2s ease; color: var(--muted); }
.filters[open] > .filters-summary .chev { transform: rotate(180deg); }
.filters-summary .n { background: var(--charcoal); color: #fff; border-radius: 999px;
  font-size: 11px; font-weight: 800; padding: 1px 7px; margin-left: auto; }
.filter-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.filter-list a { display: flex; justify-content: space-between; padding: 6px 10px; border-radius: 8px;
  color: var(--ink-soft); font-size: 14px; }
.filter-list a:hover { background: var(--grey-50); }
.filter-list a.active { background: var(--charcoal); color: #fff; font-weight: 600; }
/* Colour filter as a collage: a repeating 7-tile block (big, small, tall, small,
   wide, small, small) that exactly fills 4 columns x 3 rows, so the mosaic has
   no holes. `dense` back-fills any gaps left by a partial final block. */
.color-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 36px;
  grid-auto-flow: dense; gap: 4px; border-radius: 12px; overflow: hidden; }
.color-grid a { position: relative; display: block; border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); transition: filter .15s, box-shadow .15s; }
.color-grid a:nth-child(7n+1) { grid-column: span 2; grid-row: span 2; }
.color-grid a:nth-child(7n+3) { grid-row: span 2; }
.color-grid a:nth-child(7n+5) { grid-column: span 2; }
.color-grid a:hover { filter: brightness(1.08) saturate(1.1);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.7), inset 0 0 0 3px rgba(0,0,0,.12); }
.color-grid a.active { box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px var(--charcoal); }
.color-grid a.active::after { content: "✓"; position: absolute; top: 4px; right: 4px;
  width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center;
  background: var(--charcoal); color: #fff; font-size: 10px; font-weight: 800; line-height: 1; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 20px; flex-wrap: wrap; }
.toolbar .count { color: var(--muted); font-size: 14px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--glass-tint);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(38,38,38,.18);
  color: var(--charcoal-dark); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600;
  box-shadow: var(--glass-highlight); }
.chip a { color: var(--charcoal-dark); font-weight: 800; }
select.sort, .field-input { font: inherit; padding: 9px 12px; border: 1px solid var(--glass-border);
  border-radius: 10px; background: var(--glass-bg-soft);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  color: var(--ink); outline: none; box-shadow: var(--glass-highlight); }
.field-input:focus, select.sort:focus { border-color: rgba(38,38,38,.5);
  background: var(--glass-bg-strong);
  box-shadow: var(--glass-highlight), 0 0 0 3px var(--glass-tint); }

/* ---- Pagination ------------------------------------------------------- */
.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }
.pagination a, .pagination span { padding: 8px 13px; border-radius: 9px; border: 1px solid var(--glass-border);
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  color: var(--ink-soft); font-weight: 600; box-shadow: var(--glass-highlight); }
.pagination .current { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }
.pagination a:hover { border-color: var(--charcoal); color: var(--charcoal); }

/* ---- Product detail --------------------------------------------------- */
/* The site runs full width, but a product (and its breadcrumb) reads better
   held to the old 1400px container, less its 32px gutters. */
.pdp-crumbs { max-width: 1336px; margin-left: auto; margin-right: auto; }
.pdp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 44px;
  align-items: start; max-width: 1336px; margin: 0 auto; }
.gallery .main { aspect-ratio: 3/4; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--glass-border); background: var(--glass-bg);
  box-shadow: var(--glass-highlight), var(--shadow-sm); }
.gallery .main img, .gallery .main .thumb-fallback { width: 100%; height: 100%; object-fit: cover; }
/* Several shots: a thumbnail rail beside the main image. The rail is sized to
   nothing (height 0, min-height 100%) so the main image alone sets the row
   height and a long rail scrolls instead of stretching the gallery. */
.gallery.has-thumbs { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; }
.gallery.has-thumbs .main { grid-column: 2; grid-row: 1; position: relative; touch-action: pan-y; }
.gallery-thumbs { grid-column: 1; grid-row: 1; height: 0; min-height: 100%;
  display: flex; flex-direction: column; gap: 10px; overflow-y: auto; scrollbar-width: thin; }
.gallery-thumb { flex: none; display: block; aspect-ratio: 3/4; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--glass-border); opacity: .6; transition: opacity .15s, border-color .15s; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb:hover, .gallery-thumb.is-active { opacity: 1; }
.gallery-thumb.is-active { border-color: var(--charcoal); box-shadow: inset 0 0 0 1px var(--charcoal); }
.gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px;
  border-radius: 50%; border: 0; background: rgba(255,255,255,.85); color: var(--charcoal);
  font-size: 26px; line-height: 1; cursor: pointer; box-shadow: var(--shadow-sm);
  display: none; align-items: center; justify-content: center; padding-bottom: 3px; }
.gallery-nav.prev { left: 12px; }
.gallery-nav.next { right: 12px; }
.gallery.is-live .gallery-nav { display: inline-flex; }
.gallery-count { position: absolute; right: 12px; bottom: 12px; padding: 4px 10px; border-radius: 999px;
  background: rgba(38,38,38,.7); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.pdp h1 { font-size: 34px; margin-top: 6px; }
.pdp .meta { color: var(--muted); text-transform: uppercase; letter-spacing: .07em; font-size: 12px; }
.pdp .price-row { font-size: 22px; }
.pdp .price { font-size: 28px; }
.pdp .lead { color: var(--ink-soft); margin: 16px 0; }
.option-block { margin: 22px 0; }
.option-block label.h { display: block; font-weight: 700; margin-bottom: 10px; font-size: 14px; }
.opt-colors { display: flex; gap: 10px; flex-wrap: wrap; }
.opt-color { cursor: pointer; }
.opt-color input { position: absolute; opacity: 0; pointer-events: none; }
.opt-color .dot { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15);
  box-shadow: inset 0 0 0 3px #fff; transition: .15s; display: block; }
.opt-color input:checked + .dot { outline: 2px solid var(--charcoal); outline-offset: 2px; }
.opt-color .nm { display: block; text-align: center; font-size: 11px; color: var(--muted); margin-top: 4px; }
.size-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.size-head label.h { margin-bottom: 10px; }
.size-guide-link { font-size: 13px; font-weight: 600; color: var(--ink-soft);
  text-decoration: underline; text-underline-offset: 3px; }
.size-guide-link:hover { color: var(--charcoal); }
.opt-sizes { display: flex; gap: 8px; flex-wrap: wrap; }
.opt-size { cursor: pointer; position: relative; }
/* Kept focusable and in place (not display:none) so the browser's
   "please choose a size" bubble can point at the picker. */
.opt-size input { position: absolute; inset: 0; opacity: 0; margin: 0; pointer-events: none; }
.opt-size span { display: inline-flex; align-items: center; justify-content: center;
  min-width: 48px; height: 40px; padding: 0 12px; border-radius: 10px;
  border: 1px solid rgba(0,0,0,.15); background: var(--glass-bg-soft);
  font-weight: 600; font-size: 14px; transition: .15s; }
.opt-size:hover span { border-color: var(--charcoal); }
.opt-size input:checked + span { background: var(--charcoal); border-color: var(--charcoal); color: #fff; }
.opt-size input:focus-visible + span { outline: 2px solid var(--charcoal); outline-offset: 2px; }
/* Sold out: struck through and not selectable. */
.opt-size.is-out { cursor: not-allowed; }
.opt-size.is-out span { color: var(--grey); text-decoration: line-through; border-style: dashed; }
.opt-size.is-out:hover span { border-color: rgba(0,0,0,.15); }
.opt-color.is-out .dot { opacity: .45;
  background-image: linear-gradient(to top right, transparent 47%, var(--charcoal) 47% 53%, transparent 53%) !important; }
.stock-note { margin: 10px 0 0; font-size: 13px; font-weight: 600; color: #b45309; min-height: 1em; }
.stock-note:empty { display: none; }
.stock-note.is-out { color: var(--danger); }

/* ---- Size guide (popup on the product page + its own page) ------------- */
.size-guide { font-size: 14px; }
.sg-intro { color: var(--muted); margin: 0 0 18px; }
.sg-title { font-family: 'Playfair Display', Georgia, serif; font-size: 18px; font-weight: 600;
  margin: 22px 0 10px; }
.sg-scroll { overflow-x: auto; }
.sg-table { width: 100%; border-collapse: collapse; text-align: center; }
.sg-table th, .sg-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.sg-table thead th { background: var(--grey-50); color: var(--ink-soft); font-size: 12px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.sg-table tbody th { font-weight: 700; }
.sg-note { margin-top: 22px; padding: 14px 16px; border-radius: 10px; background: var(--grey-50);
  display: grid; gap: 4px; }
.sg-note span { color: var(--muted); font-size: 13px; }
.size-guide-page { max-width: 720px; }
.size-guide-page h1 { margin: 6px 0 18px; }
.sg-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px);
  border: 0; border-radius: var(--radius); padding: 0; box-shadow: var(--shadow-lg);
  background: var(--card); color: var(--ink); }
.sg-dialog-inner { padding: 22px 24px 24px; }
.sg-dialog::backdrop { background: rgba(23, 23, 23, .45); }
.sg-dialog-head { display: flex; align-items: center; justify-content: space-between; }
.sg-dialog-head h2 { font-size: 24px; margin: 0; }
.sg-close { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line);
  background: transparent; font-size: 22px; line-height: 1; cursor: pointer; }
.sg-close:hover { border-color: var(--charcoal); }
.meter-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--glass-border);
  border-radius: 10px; overflow: hidden; background: var(--glass-bg-soft);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-highlight); }
.qty button { border: 0; background: rgba(255,255,255,.35); width: 38px; height: 40px;
  font-size: 18px; cursor: pointer; transition: background .15s; }
.qty button:hover { background: rgba(255,255,255,.6); }
.qty input { width: 48px; height: 40px; text-align: center; border: 0; outline: 0; font: inherit; }
.pdp .actions { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.spec-table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 14px; }
.spec-table th, .spec-table td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--line); }
.spec-table th { color: var(--muted); font-weight: 600; width: 40%; }
.trust { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 18px; color: var(--ink-soft);
  font-size: 13px; }
.trust div { display: flex; align-items: center; gap: 7px; }

/* ---- Cart / checkout -------------------------------------------------- */
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
.panel { background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: var(--radius);
  box-shadow: var(--glass-highlight), var(--shadow-sm); }
.panel .panel-head { padding: 16px 20px; border-bottom: 1px solid var(--glass-border);
  font-weight: 700; background: linear-gradient(180deg, rgba(255,255,255,.5), transparent); }
.panel .panel-body { padding: 20px; }
/* Summary rows are "label … amount" pairs: let the label wrap, never the
   amount, and keep a gap so the two can't collide on a narrow screen. */
.panel-body .row { gap: 12px; }
.panel-body .row > :last-child { white-space: nowrap; }
.summary { position: sticky; top: 20px; }
.summary .row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0;
  color: var(--ink-soft); }
.summary .row.total { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 14px;
  font-size: 19px; font-weight: 800; color: var(--ink); }
.cart-item { display: grid; gap: 6px 16px; padding: 16px 0;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  grid-template-areas: "thumb info  total"
                       "thumb acts  total";
  border-bottom: 1px solid var(--line); align-items: center; }
.cart-item:last-child { border-bottom: 0; }
.cart-item > .thumb { grid-area: thumb; align-self: center; }
.cart-item > .ci-info { grid-area: info; min-width: 0; align-self: end; }
.cart-item > .ci-actions { grid-area: acts; align-self: start;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.cart-item > .ci-total { grid-area: total; text-align: right; white-space: nowrap; }
.cart-item .thumb { width: 84px; height: 104px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); }
.cart-item .thumb img, .cart-item .thumb .thumb-fallback { width: 100%; height: 100%; object-fit: cover; }
.cod-banner { display: flex; gap: 10px; align-items: center; background: var(--glass-tint);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  color: var(--charcoal-dark); border: 1px solid rgba(38,38,38,.2); border-radius: 12px;
  padding: 12px 14px; font-weight: 600; font-size: 14px;
  box-shadow: var(--glass-highlight); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 600; font-size: 13px; }
.field .field-input, .field select, .field textarea { width: 100%; }
.field .errorlist { color: var(--danger); font-size: 12px; margin: 2px 0 0; padding-left: 16px; }
.empty { text-align: center; padding: 70px 20px; }
.empty .big { font-size: 54px; margin-bottom: 8px; }

/* ---- Messages --------------------------------------------------------- */
.flash-wrap { position: fixed; top: calc(var(--header-h) + 4px); right: var(--gutter);
  left: auto; z-index: 80; display: flex;
  flex-direction: column; gap: 10px; width: 340px; max-width: calc(100vw - var(--gutter) * 2); }
.flash { background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur-lg); backdrop-filter: var(--glass-blur-lg);
  border: 1px solid var(--glass-border); border-left: 4px solid var(--charcoal);
  border-radius: 10px; padding: 12px 16px; box-shadow: var(--glass-highlight), var(--glass-shadow);
  font-size: 14px; animation: slideIn .25s ease; }
.flash.error { border-left-color: var(--danger); }
.flash.info { border-left-color: var(--grey); }
.flash.warning { border-left-color: #b45309; }
@keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

/* ---- Footer ----------------------------------------------------------- */
.site-footer { margin-top: 64px; background: #313131; color: #fff;
  font-family: 'Figtree', sans-serif; font-weight: 200; font-size: 16px; line-height: 24px; }
.ftr-inner { max-width: 1410px; margin: 0 auto; padding: 30px 30px 20px; }
.ftr-logo { display: block; width: max-content; margin: 0 auto 30px; }
.ftr-logo img { display: block; width: auto; height: 130px; }
.ftr-grid { display: grid; grid-template-columns: 25fr 20fr 20fr 35fr; gap: 30px;
  max-width: 1350px; margin: 0 auto; }
.ftr-heading { margin: 0 0 30px; font-family: inherit; font-size: 18px; font-weight: 500; line-height: 26px;
  letter-spacing: 4px; text-transform: uppercase; color: #fff; }
.ftr-col ul { list-style: none; margin: 0; padding: 0; }
.ftr-col li { margin-bottom: 10px; }
.ftr-col a { color: #fff; transition: opacity .2s; }
.ftr-col a:hover { opacity: .7; }
.ftr-col p { margin: 0 0 18px; }
.ftr-social { display: flex; gap: 8px; margin-top: 4px; }
.ftr-social a { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; }
.ftr-social svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
.ftr-form { display: flex; align-items: center; gap: 8px; padding-bottom: 8px;
  border-bottom: 1px solid #ddd; }
.ftr-form input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 0;
  color: #fff; font: inherit; font-size: 13px; }
.ftr-form input::placeholder { color: #fff; opacity: 1; }
.ftr-form button { display: inline-flex; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
.ftr-form svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
.ftr-bottom { padding: 10px 15px; text-align: center; font-size: 14px; font-weight: 400;
  line-height: 21px; color: #fff; background: #313131; }

/* ---- App download prompt ---------------------------------------------- */
/* Floating card offering the Android APK. store.js unhides it (and remembers a
   dismissal), so it never flashes on screen for people who closed it. */
.app-promo {
  position: fixed; z-index: 90;
  right: var(--gutter); bottom: 24px; width: 320px; max-width: calc(100vw - var(--gutter) * 2);
  display: flex; gap: 14px; padding: 16px 16px 16px 14px;
  border-radius: 18px; border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur-lg); backdrop-filter: var(--glass-blur-lg);
  box-shadow: var(--glass-highlight), var(--glass-shadow-lg);
  animation: promoIn .32s cubic-bezier(.22, 1, .36, 1);
}
/* [hidden] loses to the display:flex above without this. */
.app-promo[hidden] { display: none; }
.app-promo.is-leaving { animation: promoOut .22s ease forwards; }
.app-promo-logo { width: 52px; height: 60px; object-fit: contain; flex: none; align-self: flex-start; }
.app-promo-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.app-promo-body strong { font-family: 'Playfair Display', serif; font-size: 17px; letter-spacing: .01em; }
.app-promo-body p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.app-promo-cta { align-self: flex-start; margin-top: 4px; padding: 9px 18px; font-size: 14px; }
.app-promo-cta .icon { width: 17px; height: 17px; }
.app-promo-hint { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.app-promo-close {
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.app-promo-close:hover { background: rgba(23,23,23,.07); color: var(--ink); }
.app-promo-close .icon { width: 16px; height: 16px; }
@keyframes promoIn { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes promoOut { to { opacity: 0; transform: translateY(12px) scale(.97); } }

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 1200px) {
  :root { --gutter: 24px; }
}

/* Below 1025px the link row gives way to the menu drawer. */
@media (max-width: 1024px) {
  /* 30px strip + 63px bar (50px logo, 6px padding, 1px rule). */
  :root { --header-h: 93px; }
  .hdr-nav { display: none; }
  .hdr-burger { display: inline-flex; }
  .hdr-mid { min-height: 60px; margin: 0 15px; }
  .hdr-logo img { height: 50px; }
  .ftr-grid { grid-template-columns: 1fr 1fr; }
}

/* With the filter rail taking 240px, four cards get too narrow to read on a
   tablet — drop to three before the layout itself changes. */
@media (max-width: 1100px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pdp { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .gallery .main { max-width: 460px; }
  /* Stacked layout: the thumbnails become a swipeable row under the photo. */
  .gallery.has-thumbs { grid-template-columns: minmax(0, 1fr); max-width: 460px; }
  .gallery.has-thumbs .main { grid-column: 1; }
  .gallery-thumbs { grid-column: 1; grid-row: 2; height: auto; min-height: 0;
    flex-direction: row; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }
  .gallery-thumb { width: 72px; }
  .cols { grid-template-columns: minmax(0, 1fr); }
  .summary { position: static; }
}

@media (max-width: 900px) {
  /* The 240px filter rail squeezes the cards past readable below this, so it
     becomes a collapsed disclosure above the results instead. */
  .shop-layout { grid-template-columns: minmax(0, 1fr); }
  .filters { position: static; padding: 14px 16px; }
  .filters > summary { display: flex; }
  .filters[open] > summary { margin-bottom: 6px; }
  .color-grid { grid-auto-rows: 44px; }
}

@media (max-width: 767px) {
  :root { --bnav-h: 58px; }
  body { padding-bottom: calc(var(--bnav-h) + env(safe-area-inset-bottom)); }
  .ff-topbar { font-size: 14px; }

  /* Minimal footer: the tab bar already covers the shop menu and search, so
     phones get the logo, one centred line of links each for information and
     contact, the social icons and the copyright. */
  .ftr-inner { padding: 24px 15px 14px; }
  .ftr-logo { margin-bottom: 16px; }
  .ftr-logo img { height: 96px; }
  .ftr-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; text-align: center; }
  .ftr-col--shop, .ftr-col--wide, .ftr-heading { display: none; }
  .ftr-col ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px;
    font-size: 13px; }
  .ftr-col li { margin: 0; }
  .ftr-social { justify-content: center; margin-top: 10px; }
  .ftr-bottom { font-size: 12px; }
}

@media (max-width: 760px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .section { padding: 40px 0; }
  .section-head h2 { font-size: 24px; }
  .pdp h1 { font-size: 27px; }
  /* 16px is the threshold below which iOS Safari zooms the page on focus. */
  .field-input, select.sort, .qty input,
  input[type="text"], input[type="tel"], input[type="email"], textarea, select { font-size: 16px; }
  .qty button { width: 44px; height: 44px; }
  .qty input { height: 44px; }
}

@media (max-width: 560px) {
  .cart-item { grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas: "thumb info"
                         "thumb total"
                         "acts  acts"; }
  .cart-item > .thumb { align-self: start; }
  .cart-item > .ci-info { align-self: start; }
  .cart-item > .ci-total { text-align: left; align-self: start; }
  .cart-item > .ci-actions { margin-top: 12px; }
  .cart-item .thumb { width: 72px; height: 90px; }
  .trust { gap: 10px 16px; }
  .pdp .actions { flex-direction: column; align-items: stretch; }
  .pdp .actions .btn { width: 100%; }
  /* Phones get a bottom sheet instead of a corner card — it is the device the
     APK is actually for, so the offer earns the full width. */
  .app-promo { left: 10px; right: 10px; width: auto; max-width: none;
    bottom: calc(var(--bnav-h) + 10px + env(safe-area-inset-bottom)); border-radius: 20px; }
  .app-promo-cta { align-self: stretch; }
}

@media (max-width: 420px) {
  :root { --gutter: 16px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .product-body { padding: 12px 12px 14px; }
  .price { font-size: 15px; }
}

/* ---- Graceful degradation for the liquid-glass layer ------------------ */
/* Browsers without backdrop-filter get solid surfaces so nothing turns to
   an unreadable transparent wash. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .product-card, .filters, .panel,
  .gallery .main, .pagination a, .pagination span, .flash, .btn-ghost,
  select.sort, .field-input, .app-promo { background: var(--card); }
  .chip, .cod-banner { background: var(--grey-50); }
}

/* Respect users who ask the OS to reduce transparency. */
@media (prefers-reduced-transparency: reduce) {
  body::before { background: linear-gradient(180deg, #ffffff, var(--bg)); }
  .flash { background: #fff; }
  .product-card, .filters, .panel, .gallery .main,
  .pagination a, .pagination span, .btn-ghost, select.sort, .field-input,
  .app-promo { background: var(--card); }
  .chip, .cod-banner { background: var(--grey-50); }
}

/* ===== Floral Finesse hero ===== */

.hero-ff {
  /* Theme greys: charcoal ground, light-grey type and accents. */
  --ff-charcoal: #262626;
  --ff-light: #e5e5e5;
  --ff-mist: #a3a3a3;

  position: relative;
  overflow: hidden;
  /* Fluid vertical rhythm: ~40px on phones up to ~88px on wide screens. */
  padding: clamp(40px, 7vw, 88px) 0 clamp(48px, 8vw, 96px);
  color: var(--ff-light);
  background-color: var(--ff-charcoal);
  background-image:
    radial-gradient(ellipse at 70% 45%, rgba(229,229,229,.16), transparent 55%),
    radial-gradient(ellipse at 15% 0%, rgba(229,229,229,.08), transparent 50%),
    /* botanical line-art pattern, echoing the logo background */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260' fill='none' stroke='%23a3a3a3' stroke-opacity='.18' stroke-width='1.4'><g><path d='M60 70c-22-30 6-58 30-40 16 12 6 40-30 40z'/><path d='M60 70c-8-14-8-26 0-38M60 70c10-12 20-20 30-30'/><circle cx='60' cy='70' r='5'/></g><g><path d='M190 190c-24-6-34 22-14 38 14 10 34-6 14-38z'/><path d='M190 190c-8 10-12 22-14 38'/></g><g><path d='M200 40c10-22 36-14 34 6-2 18-26 20-34-6z'/><path d='M200 40l24 12'/></g><g><path d='M30 200c18-14 36 4 22 22-12 14-34 2-22-22z'/></g><circle cx='130' cy='130' r='3'/><circle cx='150' cy='110' r='2'/></svg>");
  background-size: auto, auto, 260px 260px;
}

.hero-ff__grid {
  display: grid;
  /* minmax(0, …) lets the columns shrink below their content's min width,
     so long words or the SVG never push the page wider than the viewport. */
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

/* ---- copy ---- */
.hero-ff__eyebrow {
  display: inline-block;
  padding: 6px 16px;
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ff-charcoal);
  background: var(--ff-light);
  border: 2px dashed var(--ff-mist);           /* stitched label */
  border-radius: 999px;
}

.hero-ff h1 {
  margin: 0 0 16px;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: clamp(2rem, 1.1rem + 3.4vw, 3.6rem);
  line-height: 1.08;
  text-wrap: balance;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.35);
}
.hero-ff h1 em {
  font-style: italic;
  color: var(--ff-mist);
}

.hero-ff__copy p {
  max-width: 54ch;
  margin: 0 0 26px;
  font-size: clamp(.98rem, .9rem + .3vw, 1.05rem);
  line-height: 1.65;
  color: rgba(255,255,255,.92);
  text-wrap: pretty;
}

.hero-ff__cta .btn-primary { background: var(--ff-light); color: var(--ff-charcoal);
  border-color: var(--ff-light); box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.hero-ff__cta .btn-primary:hover { background: #fff; }
.hero-ff__cta .btn-ghost { background: transparent; color: var(--ff-light);
  border-color: rgba(229,229,229,.55); box-shadow: none; }
.hero-ff__cta .btn-ghost:hover { border-color: var(--ff-light); color: #fff; }
.hero-ff__cta .btn-ghost::before { display: none; }
.hero-ff__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero-ff__trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding: 0;
  margin: 28px 0 0;
  font-size: .92rem;
  font-weight: 600;
  color: #fff;
}
.hero-ff__trust li::before {
  content: "✿";
  margin-right: 8px;
  color: var(--ff-mist);
}

/* ---- emblem ---- */
.hero-ff__art {
  display: flex;
  justify-content: center;
}
.hero-ff__art img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(460px, 56vh);
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.4));
}

/* ---- responsive ---- */
/* Narrow laptops / landscape tablets: keep two columns but give the copy
   more of the row so the headline doesn't wrap word-by-word. */
@media (max-width: 1100px) {
  .hero-ff__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

/* Tablets and phones: stack, emblem on top, everything centred. */
@media (max-width: 860px) {
  .hero-ff__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; text-align: center; }
  .hero-ff__copy p { margin-left: auto; margin-right: auto; }
  .hero-ff__cta, .hero-ff__trust { justify-content: center; }
  .hero-ff__art { order: -1; }
  .hero-ff__art img { max-height: 300px; }
}

/* Phones: shrink the emblem so the headline and CTAs reach the first screen,
   and let the stitched eyebrow pill wrap instead of overflowing. */
@media (max-width: 560px) {
  .hero-ff__grid { gap: 22px; }
  .hero-ff__art img { max-height: 240px; }
  .hero-ff__eyebrow { padding: 5px 12px; margin-bottom: 14px; font-size: 11px;
    letter-spacing: .12em; max-width: 100%; }
  .hero-ff__copy p { margin-bottom: 22px; }
  .hero-ff__trust { gap: 8px 16px; margin-top: 22px; font-size: .86rem; }
}

/* Small phones: full-width stacked buttons are easier to tap. */
@media (max-width: 420px) {
  .hero-ff__cta { flex-direction: column; gap: 10px; }
  .hero-ff__cta .btn { width: 100%; }
}

/* Short landscape phones: the stacked emblem would fill the whole screen. */
@media (max-width: 860px) and (max-height: 500px) and (orientation: landscape) {
  .hero-ff__art { display: none; }
}

/* ===== Home hero carousel ===== */
/* The hero fills the screen under the announcement strip and slides up
   beneath the header, which stays transparent while the whole hero is in
   view (store.js adds .is-solid once it starts scrolling away). */
.page-home .site-header { position: sticky; top: 0;
  transition: background-color .35s ease, color .35s ease, box-shadow .35s ease; }
.page-home .site-header.is-solid { box-shadow: 0 1px 10px rgba(0, 0, 0, .08); }
.page-home .site-header:not(.is-solid):not(:has(:focus-visible)) {
  --hdr-bg: transparent; --hdr-fg: #fff; --hdr-line: rgba(255, 255, 255, .35);
  --hdr-badge-bg: #fff; --hdr-badge-fg: #000;
  --hdr-logo-dark: none; --hdr-logo-light: block; }
/* Pointing at the bar (e.g. to open a dropdown) brings the white back. */
@media (hover: hover) {
  .page-home .site-header:not(.is-solid):hover {
    --hdr-bg: #fff; --hdr-fg: #050505; --hdr-line: #e3e3e3;
    --hdr-badge-bg: #000; --hdr-badge-fg: #fff;
    --hdr-logo-dark: block; --hdr-logo-light: none; }
}
.hdr-logo__dark { display: var(--hdr-logo-dark); }
.hdr-logo__light { display: var(--hdr-logo-light); }
.hdr-mid { transition: border-color .35s ease; }

.hero-slider { position: relative; display: grid; color: #fff;
  /* Exactly one screen below the 30px strip, so it is fully visible at the top. */
  min-height: calc(100vh - 30px - var(--bnav-h));
  min-height: calc(100svh - 30px - var(--bnav-h) - env(safe-area-inset-bottom));
  margin-top: calc(30px - var(--header-h));
  touch-action: pan-y; }
/* Every slide shares one grid cell: the tallest sets the height, and they
   cross-fade in place. */
.hs-slide { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden;
  transition: opacity .9s ease, visibility 0s linear .9s; }
.hs-slide.is-active { z-index: 1; opacity: 1; visibility: visible;
  transition: opacity .9s ease, visibility 0s; }

/* Slide 1: the brand hero, its copy pushed below the overlaid header. */
.hero-slider .hero-ff { display: flex; align-items: center;
  padding: calc(var(--header-h) - 30px + clamp(24px, 4vw, 56px)) 0 clamp(80px, 9vw, 110px); }

/* Category slides: full-bleed photo, scrims top (header) and bottom (caption). */
.hs-slide--image { position: relative; overflow: hidden; display: flex;
  align-items: flex-end; justify-content: center; background: #262626; }
.hs-img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%;
  transform: scale(1.08); transition: transform 7s ease-out; }
.hs-slide.is-active .hs-img { transform: none; }
.hs-slide--image::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0, rgba(0, 0, 0, 0) 26%,
    rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .62) 100%); }
.hs-caption { position: relative; z-index: 1; max-width: 760px; text-align: center;
  padding: 0 var(--gutter) clamp(96px, 13vh, 140px);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.hs-caption > * { opacity: 0; transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease; }
.hs-slide.is-active .hs-caption > * { opacity: 1; transform: none; }
.hs-slide.is-active .hs-caption > :nth-child(1) { transition-delay: .3s; }
.hs-slide.is-active .hs-caption > :nth-child(2) { transition-delay: .42s; }
.hs-slide.is-active .hs-caption > :nth-child(3) { transition-delay: .54s; }
.hs-slide.is-active .hs-caption > :nth-child(4) { transition-delay: .66s; }
.hs-eyebrow { display: block; font-family: 'Figtree', sans-serif; font-size: 13px;
  font-weight: 400; letter-spacing: .32em; text-transform: uppercase; }
.hs-title { margin: 10px 0 12px; font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: clamp(2.5rem, 1.5rem + 4vw, 4.75rem); font-weight: 600; line-height: 1.04;
  color: #fff; text-wrap: balance; }
.hs-text { max-width: 46ch; margin: 0 auto 28px; font-size: clamp(.98rem, .9rem + .3vw, 1.1rem);
  line-height: 1.6; color: rgba(255, 255, 255, .92); }
.hs-btn { display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 36px; border: 1px solid #fff; color: #fff;
  font-family: 'Figtree', sans-serif; font-size: 13px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; text-shadow: none;
  transition: background-color .25s, color .25s; }
.hs-btn:hover, .hs-btn:focus-visible { background: #fff; color: #111; }

/* Prev · dots · next · pause, centred along the bottom edge. */
.hs-controls { position: absolute; left: 0; right: 0; bottom: clamp(18px, 4vh, 34px); z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 6px; }
.hs-controls[hidden] { display: none; }
.hs-dots { display: flex; }
.hs-dot, .hs-btn-icon { display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
.hs-dot { width: 26px; height: 32px; }
.hs-dot::before { content: ""; width: 8px; height: 8px; border-radius: 8px;
  background: rgba(255, 255, 255, .55); box-shadow: 0 0 4px rgba(0, 0, 0, .25);
  transition: width .3s ease, background-color .3s ease; }
.hs-dot[aria-current="true"]::before { width: 22px; background: #fff; }
.hs-btn-icon { width: 36px; height: 36px; border-radius: 50%; transition: background-color .2s; }
.hs-btn-icon:hover { background: rgba(255, 255, 255, .18); }
.hs-btn-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, .3)); }
.hs-pause { margin-left: 4px; }
.hs-pause svg { width: 16px; height: 16px; }
.hs-pause__on { fill: currentColor; }
.hs-pause .hs-pause__on, .hs-pause.is-paused .hs-pause__off { display: none; }
.hs-pause.is-paused .hs-pause__on { display: block; }

/* Phones and portrait tablets: slide 1 must fit one screen like the photo
   slides, so the hero gets a fixed height, the copy tightens up and the
   emblem takes whatever room is left. */
@media (max-width: 860px) and (min-height: 560px) {
  .hero-slider { height: calc(100vh - 30px - var(--bnav-h));
    height: calc(100svh - 30px - var(--bnav-h) - env(safe-area-inset-bottom)); }
  .hero-slider .hero-ff { align-items: stretch;
    padding: calc(var(--header-h) - 30px + 16px) 0 72px; }
  .hero-slider .hero-ff__grid { display: flex; flex-direction: column; justify-content: center;
    gap: 18px; }
  .hero-slider .hero-ff__copy { flex: none; }
  .hero-slider .hero-ff__art { flex: 0 1 min(300px, 36svh); min-height: 0; }
  .hero-slider .hero-ff__art img { height: 100%; max-height: none; max-width: 72vw; }
}
@media (max-width: 560px) and (min-height: 560px) {
  .hero-slider .hero-ff__eyebrow { margin-bottom: 12px; }
  .hero-slider .hero-ff h1 { margin-bottom: 12px; }
  .hero-slider .hero-ff__copy p { margin-bottom: 16px; font-size: .92rem; line-height: 1.55; }
  .hero-slider .hero-ff__cta { flex-direction: row; gap: 10px; }
  .hero-slider .hero-ff__cta .btn { width: auto; padding: 12px 18px; }
  .hero-slider .hero-ff__trust { gap: 6px 12px; margin-top: 16px; font-size: .78rem; }
  .hero-slider .hero-ff__trust li::before { margin-right: 4px; }
}

/* Short phones, now also minus the tab bar: the trust line repeats the top
   strip, so it gives its room to the emblem. */
@media (max-width: 560px) and (min-height: 560px) and (max-height: 740px) {
  .hero-slider .hero-ff__trust { display: none; }
}

@media (max-width: 560px) {
  .hs-caption { padding-bottom: 92px; }
  .hs-text { margin-bottom: 22px; }
  .hs-btn { min-height: 46px; padding: 0 26px; letter-spacing: .16em; }
  .hs-dot { width: 20px; }
  .hs-dot::before { width: 6px; height: 6px; }
  .hs-dot[aria-current="true"]::before { width: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .hs-slide, .hs-slide.is-active, .hs-caption > * { transition-duration: .01s; transition-delay: 0s !important; }
  .hs-img { transform: none; transition: none; }
}

/* ===== Phone tab bar ===== */
/* Fixed to the bottom on phones only; sits under
   the drawer overlay so an open drawer covers it. */
.ff-bnav { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 400;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  height: calc(var(--bnav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: #fff; border-top: 1px solid #e3e3e3; box-shadow: 0 -2px 12px rgba(0, 0, 0, .05);
  font-family: 'Figtree', sans-serif; }
.ff-bnav__item { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-width: 0; padding: 0; border: 0; background: none; cursor: pointer;
  color: #737373; font: inherit; font-size: 12px; font-weight: 500; line-height: 1;
  -webkit-tap-highlight-color: transparent; }
.ff-bnav__item svg { width: 24px; height: 24px; fill: none; stroke: currentColor;
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ff-bnav__item[aria-current="page"] { color: #171717; font-weight: 600; }
.ff-bnav__item[aria-current="page"] svg { stroke-width: 1.7; }
.ff-bnav__item:active { opacity: .6; }
@media (max-width: 767px) {
  .ff-bnav { display: grid; }
  /* Keep the app offer above the bar. */
  .app-promo { bottom: calc(var(--bnav-h) + 12px + env(safe-area-inset-bottom)); }
}