/* Suppi's Pet Grooming Studio & Stores
   ------------------------------------------------------------------
   Structure follows the reference design system: flat surfaces, light
   borders, restrained 4 to 8px rounding, Poppins for headings and system
   UI for body and utility text, sentence case throughout, and hierarchy
   built from colour blocking, image scale and type rather than shadows.

   The palette stays the greyscale one already in use: graphite takes the
   role the reference gives its accent colour, and light greys take the role
   of its secondary backdrop. No new hues are introduced.
   ------------------------------------------------------------------ */

:root {
  /* Ink and text */
  --ink: #17191c;          /* on-surface */
  --ink-soft: #55595f;     /* muted */
  --ink-faint: #8d9299;

  /* Surfaces and borders */
  --bg: #ffffff;           /* background / surface */
  --bg-1: #f6f7f8;         /* secondary backdrop, hero and bands */
  --bg-2: #eceef0;         /* medallion rings, deeper wash */
  --bg-ink: #17191c;
  --line: #e7e9ec;         /* border */
  --line-strong: #cfd3d8;

  /* Emphasis. Graphite plays the accent role. */
  --brand: #17191c;
  --brand-ink: #17191c;
  --brand-hover: #000000;

  /* Signals stay greyscale; meaning comes from wording and weight. */
  --sale: #17191c;
  --ok: #4a4e55;
  --wa: #17191c;
  --wa-hover: #000000;
  --wa-ink: #ffffff;

  /* Rounding, per reference */
  --r-sm: 4px;
  --r-md: 5px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-full: 9999px;
  /* Aliases. The admin panel and a couple of inline styles ask for these
     names; without them the border-radius declarations are invalid and the
     corners silently square off. */
  --radius: var(--r-lg);
  --radius-sm: var(--r-sm);

  /* Spacing scale, per reference */
  --s-xs: 6px;
  --s-sm: 14px;
  --s-md: 26px;
  --s-lg: 40px;
  --s-xl: 100px;

  /* Depth is used rarely and stays soft */
  --shadow-soft: 0 2px 10px rgba(23, 25, 28, 0.06);
  --shadow-pop: 0 14px 44px rgba(23, 25, 28, 0.14);

  --container: 1280px;
  /* Side gutter scales with the viewport so content never hugs the edge:
     comfortable on phones, generous on laptops and desktops. Every band uses
     the same value through .container, so widening it here moves the hero and
     the sections below it together and the vertical alignment stays intact. */
  --gutter: clamp(24px, 6.5vw, 112px);

  --font-head: Poppins, system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --paw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c9ced4'%3E%3Cellipse cx='12' cy='16' rx='5' ry='4.2'/%3E%3Cellipse cx='5.6' cy='10.6' rx='2.3' ry='2.9'/%3E%3Cellipse cx='9.6' cy='6.7' rx='2.2' ry='2.9'/%3E%3Cellipse cx='14.4' cy='6.7' rx='2.2' ry='2.9'/%3E%3Cellipse cx='18.4' cy='10.6' rx='2.3' ry='2.9'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Type: Poppins headings, compact line heights ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink);
  margin: 0 0 var(--s-sm);
  font-weight: 700;
  letter-spacing: 0;
}
h1 { font-size: clamp(26px, 4.4vw, 40px); line-height: 1.15; }
h2 { font-size: clamp(21px, 2.8vw, 32px); line-height: 1.15; }
h3 { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.3; }
h4 { font-size: 18px; font-weight: 500; line-height: 1.35; }

.promo-display { font-family: var(--font-head); font-weight: 700; font-size: clamp(32px, 6vw, 48px); line-height: 1; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
p { margin: 0 0 var(--s-sm); }

/* Small label above a heading. Sentence case, no wide tracking. */
.eyebrow {
  display: block; font-family: var(--font-body); font-size: 14px; font-weight: 500;
  color: var(--ink-soft); margin-bottom: var(--s-xs);
}

/* The container keeps its gutter even once the max width is reached, so there
   is always breathing room between content and the viewport edge. */
.container {
  width: 100%;
  max-width: calc(var(--container) + (var(--gutter) * 2));
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container--wide { max-width: calc(1560px + (var(--gutter) * 2)); }
.container--narrow { max-width: calc(860px + (var(--gutter) * 2)); }

/* padding-block, never the padding shorthand. These classes get combined with
   .container ("container section", "container hero__inner"), and a shorthand
   with a 0 horizontal value silently cancels the container's gutter, pinning
   content to the viewport edge. */
.section { padding-block: clamp(44px, 6vw, var(--s-xl)); }
.section--tight { padding-block: var(--s-lg); }
.section--flush-top { padding-block-start: 0; }
.section--grey { background: var(--bg-1); }

.lead { font-size: 16px; color: var(--ink-soft); line-height: 1.5; }
@media (min-width: 900px) { .lead { font-size: 17px; } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -999px; top: 0; z-index: 300; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--r-md) 0; }
.skip-link:focus { left: 0; }

/* ============================================================
   Buttons: utility first, restrained rounding, 45px tall
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1;
  min-height: 45px; padding: 8px 22px; border-radius: var(--r-md);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
/* Filled graphite for the single main action in a view. */
.btn--primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
/* The workhorse: outlined, quiet, matches the reference's utility feel. */
.btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: #fff; }
.btn--soft { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--soft:hover { border-color: var(--ink); }
.btn--light { background: #fff; color: var(--ink); border-color: #fff; }
.btn--light:hover { background: var(--bg-2); border-color: var(--bg-2); }
/* Text-like, low emphasis. */
.btn--text { background: transparent; color: var(--ink-soft); border: none; padding: 0; min-height: 0; }
.btn--text:hover { color: var(--ink); }
.btn--wa { background: var(--wa); color: var(--wa-ink); border-color: var(--wa); }
.btn--wa:hover { background: var(--wa-hover); border-color: var(--wa-hover); }
.btn--sm { min-height: 38px; padding: 8px 16px; font-size: 13px; }
.btn--lg { min-height: 52px; padding: 8px 30px; font-size: 16px; }
.btn--block { width: 100%; }
.btn--wide { min-width: min(300px, 100%); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn--wa svg path.fill { fill: currentColor; stroke: none; }

/* Inline text link with a quiet underline */
.link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 500; color: var(--ink);
  border-bottom: 1px solid var(--line-strong); padding-bottom: 2px;
  transition: border-color .2s var(--ease);
}
.link:hover { border-bottom-color: var(--ink); }
.link .arrow { transition: transform .25s var(--ease-out); }
.link:hover .arrow { transform: translateX(3px); }

/* Chip for deals and badges: full radius, per reference */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ink); color: #fff; border-radius: var(--r-full);
  padding: 6px 12px; font-size: 12px; font-weight: 500; line-height: 1.2;
}
.chip--quiet { background: var(--bg-2); color: var(--ink); }

/* ============================================================
   Forms: clean white surfaces, soft rounding, minimal chrome
   ============================================================ */
.input, .select, .textarea {
  width: 100%; font-family: var(--font-body); font-size: 14px; color: var(--ink);
  background: #fff; border: 1px solid var(--line-strong); border-radius: var(--r-md);
  padding: 12px; min-height: 45px; outline: none;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(23,25,28,0.07); }
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
.textarea { resize: vertical; min-height: 92px; line-height: 1.5; }
label.field { display: block; margin-bottom: var(--s-sm); }
label.field > span { display: block; font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: var(--s-xs); }
.field-hint { font-size: 12px; color: var(--ink-soft); margin-top: var(--s-xs); }
.select {
  appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355595f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}

/* ============================================================
   Header
   ============================================================ */
.topbar { background: var(--ink); color: rgba(255,255,255,0.78); font-size: 12px; }
.topbar__inner { display: flex; align-items: center; justify-content: center; gap: var(--s-sm); min-height: 36px; text-align: center; }
.topbar__inner strong { color: #fff; font-weight: 600; }
.topbar__phone a { color: #fff; font-weight: 500; }
@media (max-width: 760px) { .topbar__phone { display: none; } }

.header {
  position: sticky; top: 0; z-index: 90; background: #fff;
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s var(--ease);
}
.header.is-stuck { box-shadow: 0 4px 20px rgba(23,25,28,0.05); }
.header__bar { display: flex; align-items: center; gap: var(--s-sm); min-height: 72px; }

.wordmark { font-family: var(--font-head); font-weight: 700; font-size: 22px; color: var(--ink); line-height: 1; margin: 0 auto 0 0; display: block; letter-spacing: 0; }
.wordmark span { display: block; font-family: var(--font-body); font-size: 11px; font-weight: 400; color: var(--ink-soft); margin-top: 4px; }
.header__utils { display: flex; align-items: center; gap: 2px; }
.header__cta { margin-left: var(--s-xs); }
@media (max-width: 820px) { .header__cta { display: none; } }

/* Header search, generous and quiet, per reference */
.header__search { flex: 0 1 420px; margin: 0 var(--s-md); display: none; }
@media (min-width: 1040px) { .header__search { display: block; } }
.header__search form { display: flex; align-items: center; background: var(--bg-1); border-radius: var(--r-md); padding: 0 12px; }
.header__search input { flex: 1; border: none; background: transparent; min-height: 44px; font-size: 14px; outline: none; color: var(--ink); font-family: var(--font-body); }
.header__search input::placeholder { color: var(--ink-soft); }
.header__search button { border: none; background: transparent; cursor: pointer; color: var(--ink); display: flex; padding: 6px; }
.header__search svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  width: 44px; height: 44px; border: none; background: transparent; border-radius: var(--r-md);
  cursor: pointer; color: var(--ink); transition: background .18s var(--ease);
}
.icon-btn:hover { background: var(--bg-1); }
.icon-btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-toggle { display: none; }
@media (max-width: 1000px) { .nav-toggle { display: inline-flex; } }

.cart-count {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--ink); color: #fff; font-size: 11px; font-weight: 600;
  border-radius: var(--r-full); display: flex; align-items: center; justify-content: center;
}

/* ---------- Nav: modest system type, sentence case ---------- */
.nav { background: #fff; border-top: 1px solid var(--line); }
.nav__list { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 0; flex-wrap: wrap; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; height: 48px; padding: 0 18px;
  font-size: 14px; font-weight: 400; color: var(--ink-soft);
  transition: color .18s var(--ease);
}
.nav__link:hover, .nav__link[aria-current="true"] { color: var(--ink); }
.nav__link[aria-current="true"] { font-weight: 500; }
@media (max-width: 1000px) { .nav { display: none; } }

.mega {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, -6px);
  min-width: 520px; background: #fff; border: 1px solid var(--line);
  border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: var(--shadow-soft);
  padding: var(--s-md); opacity: 0; visibility: hidden;
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; z-index: 95;
}
.nav__item:hover .mega, .nav__item:focus-within .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mega__grid { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); gap: var(--s-xs) var(--s-md); }
.mega__col h4 { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--ink); margin: 0 0 var(--s-xs); }
/* Two shelves stacked in one Shop column (Dog Food over Cat Food). */
.mega__group + .mega__group { margin-top: var(--s-sm); padding-top: var(--s-sm); border-top: 1px solid var(--line); }
.mega__link { display: block; padding: 6px 0; color: var(--ink-soft); font-size: 14px; transition: color .16s; }
.mega__link:hover { color: var(--ink); }

/* Mobile search panel */
.search-panel { max-height: 0; overflow: hidden; transition: max-height .28s var(--ease); background: var(--bg-1); }
.search-panel.open { max-height: 110px; }
.search-panel__form { display: flex; gap: var(--s-xs); padding: var(--s-sm) 0; }

/* ============================================================
   Hero: full-width promotional band on the light backdrop
   ============================================================ */
.hero { background: var(--bg-1); overflow: hidden; }
.hero__inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, var(--s-lg));
  align-items: center;
  /* Vertical only. This element also carries .container, whose horizontal
     gutter must survive. */
  padding-block: clamp(36px, 5vw, 72px);
}
.hero__copy { max-width: 46ch; }
.hero h1 { margin-bottom: var(--s-sm); }
.hero p { color: var(--ink-soft); font-size: 16px; }
.hero__actions { display: flex; gap: var(--s-xs); flex-wrap: wrap; margin-top: var(--s-md); }
.hero__media { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4/3; background: var(--bg-2); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__badges { display: flex; flex-wrap: wrap; gap: var(--s-xs); margin-top: var(--s-md); }
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; padding-block: var(--s-md) var(--s-lg); }
  .hero__media { order: -1; aspect-ratio: 16/10; }
}

/* Scrolling promo strip, kept subtle */
.marquee { background: var(--ink); color: #fff; overflow: hidden; padding: 12px 0; }
.marquee__track { display: flex; gap: var(--s-lg); width: max-content; animation: marquee 34s linear infinite; }
.marquee__item { font-size: 13px; font-weight: 500; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.marquee__item strong { font-weight: 700; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* ============================================================
   Section heads
   ============================================================ */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-md); margin-bottom: var(--s-md); }
.sec-head--center { flex-direction: column; align-items: center; text-align: center; }
.sec-head__text { max-width: 62ch; }
.sec-head h2 { margin-bottom: 0; }
.sec-head p { color: var(--ink-soft); margin: var(--s-xs) 0 0; font-size: 14px; }
@media (max-width: 620px) { .sec-head { flex-direction: column; align-items: flex-start; gap: var(--s-sm); } }

/* ============================================================
   Category medallions: circular, grey ring
   ============================================================ */
.cats { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-sm); }
.cat { display: flex; flex-direction: column; align-items: center; gap: var(--s-xs); text-align: center; }
.cat__medallion {
  width: 100%; aspect-ratio: 1; border-radius: var(--r-full); overflow: hidden;
  background: var(--bg-1); box-shadow: 0 0 0 1px var(--line) inset;
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow .25s var(--ease), transform .3s var(--ease-out);
}
.cat__medallion img { width: 100%; height: 100%; object-fit: cover; }
.cat__medallion svg { width: 40%; height: 40%; stroke: var(--ink-soft); fill: none; stroke-width: 1.4; }
.cat:hover .cat__medallion { box-shadow: 0 0 0 3px var(--bg-2) inset, 0 0 0 1px var(--line-strong); transform: translateY(-3px); }
.cat b { font-family: var(--font-head); font-size: 14px; font-weight: 500; color: var(--ink); }
.cat span { font-size: 12px; color: var(--ink-faint); }
@media (max-width: 1000px) { .cats { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 620px) { .cats { grid-template-columns: repeat(3, 1fr); gap: var(--s-xs); } }

/* ============================================================
   Product cards: white, light border, 16px padding, 8px radius, flat
   ============================================================ */
.product-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-sm); }
@media (max-width: 1180px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 940px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }

.card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px;
  transition: border-color .2s var(--ease), transform .25s var(--ease-out);
}
.card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.card__media {
  position: relative; aspect-ratio: 1; background: #fff; border-radius: var(--r-sm);
  overflow: hidden; display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
}
.card__media img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s var(--ease-out); }
.card:hover .card__media img { transform: scale(1.04); }
.card__ph { width: 38%; height: 38%; stroke: var(--line-strong); fill: none; stroke-width: 1.1; }
.card__badge {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  background: var(--ink); color: #fff; font-size: 11px; font-weight: 500;
  padding: 4px 10px; border-radius: var(--r-full);
}
/* Live offer on this product. Same pill as the sale badge, but outlined so a
   discount and a free gift never read as the same thing. */
.card__badge--offer { background: #fff; color: var(--ink); border: 1.5px solid var(--ink); font-weight: 700; letter-spacing: .03em; }
.card__body { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.card__brand { font-size: 12px; color: var(--ink-faint); }
.card__title {
  font-size: 14px; font-weight: 400; color: var(--ink); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card__unit { font-size: 12px; color: var(--ink-faint); }
.card__price { display: flex; align-items: baseline; gap: 8px; margin-top: var(--s-xs); }
.card__price b { font-family: var(--font-head); font-size: 16px; font-weight: 700; color: var(--ink); }
.card__price s { color: var(--ink-faint); font-size: 13px; }
/* "Price on request". Used on cards, on the product page and on cart lines that
   lost their price, so it is a standalone class rather than card-only. */
.req { color: var(--ink-soft); font-size: 14px; font-weight: 500; white-space: nowrap; }
.card__price .req { font-size: 14px; }
.card__stock { font-size: 12px; color: var(--ink-soft); }
.card__stock--low { color: var(--ink); font-weight: 500; }
.card__stock--out { color: var(--ink-faint); }
.card__foot { margin-top: 12px; }

/* ============================================================
   Icon box row (why shop with us)
   ============================================================ */
.usps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-md); }
.usp { display: flex; gap: var(--s-sm); align-items: flex-start; }
.usp__icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--r-lg); background: var(--bg-1); display: flex; align-items: center; justify-content: center; }
.usp__icon svg { width: 22px; height: 22px; stroke: var(--ink); fill: none; stroke-width: 1.6; }
.usp h4 { margin: 0 0 2px; font-family: var(--font-head); font-size: 18px; font-weight: 500; }
.usp p { margin: 0; font-size: 14px; color: var(--ink-soft); }
@media (max-width: 940px) { .usps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .usps { grid-template-columns: 1fr; gap: var(--s-sm); } }

/* ============================================================
   Banner pair (edge to edge promotional modules)
   ============================================================ */
.banner-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-sm); }
.banner {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  aspect-ratio: 16/9; display: flex; align-items: flex-end; background: var(--bg-1);
}
.banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.banner:hover img { transform: scale(1.04); }
.banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,25,28,0) 45%, rgba(23,25,28,0.8) 100%); }
.banner__body { position: relative; z-index: 2; padding: var(--s-md); color: #fff; }
.banner__body h3 { color: #fff; margin-bottom: 4px; }
.banner__body p { color: rgba(255,255,255,0.86); font-size: 14px; margin-bottom: var(--s-sm); max-width: 34ch; }
@media (max-width: 760px) { .banner-duo { grid-template-columns: 1fr; } }

/* Wide single banner */
.banner--wide { aspect-ratio: 21/8; }
@media (max-width: 760px) { .banner--wide { aspect-ratio: 4/3; } }

/* ============================================================
   Collection
   ============================================================ */
.collection { display: grid; grid-template-columns: 220px 1fr; gap: var(--s-md); align-items: start; }
.filters { position: sticky; top: 140px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; }
.filters h4 { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--ink); margin: var(--s-sm) 0 var(--s-xs); }
.filters h4:first-child { margin-top: 0; }
.filters label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-soft); padding: 5px 0; cursor: pointer; transition: color .16s; }
.filters label:hover { color: var(--ink); }
.filters input { accent-color: var(--ink); }
.collection__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-sm); margin-bottom: var(--s-sm); }
.collection__count { color: var(--ink-soft); font-size: 14px; }
.filters-toggle { display: none; }
@media (max-width: 900px) {
  .collection { grid-template-columns: 1fr; }
  .filters { position: static; }
  .filters-toggle { display: inline-flex; }
  .filters.is-collapsed .filters__body { display: none; }
}

.breadcrumbs { font-size: 12px; color: var(--ink-faint); margin-bottom: var(--s-sm); }
.breadcrumbs a:hover { color: var(--ink); }

.page-head { margin-bottom: var(--s-md); }
.page-head p { color: var(--ink-soft); margin: var(--s-xs) 0 0; max-width: 60ch; font-size: 14px; }

/* ============================================================
   Product detail
   ============================================================ */
.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, var(--s-lg)); align-items: start; }
.pdp__media { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); aspect-ratio: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pdp__media img { width: 100%; height: 100%; object-fit: contain; }
.pdp__media svg { width: 30%; height: 30%; stroke: var(--line-strong); fill: none; stroke-width: 1; }
.pdp__col { position: sticky; top: 130px; }
.pdp h1 { font-size: clamp(21px, 2.6vw, 30px); margin-bottom: var(--s-xs); }
.pdp__price { display: flex; align-items: baseline; gap: 12px; margin: var(--s-sm) 0; }
.pdp__price b { font-family: var(--font-head); font-size: 28px; font-weight: 700; color: var(--ink); }
.pdp__price s { color: var(--ink-faint); font-size: 16px; }
/* Offer running on this product, shown under the price where the decision is made. */
.pdp__offer {
  display: flex; align-items: flex-start; gap: 12px; margin: 0 0 var(--s-sm);
  padding: 12px 14px; border: 1px solid var(--ink); border-radius: var(--r-lg); background: var(--bg-1);
}
.pdp__offer-tag {
  flex: 0 0 auto; background: var(--ink); color: #fff; font-family: var(--font-head);
  font-size: 13px; font-weight: 700; letter-spacing: .03em; padding: 5px 10px; border-radius: var(--r-sm);
}
.pdp__offer b { display: block; font-size: 14px; color: var(--ink); }
.pdp__offer small { display: block; font-size: 13px; color: var(--ink-soft); margin-top: 2px; line-height: 1.4; }
.pdp__row { display: flex; gap: var(--s-xs); align-items: center; margin: var(--s-md) 0; flex-wrap: wrap; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-md); }
.qty button { width: 44px; height: 45px; border: none; background: transparent; font-size: 16px; cursor: pointer; color: var(--ink); }
.qty button:hover { background: var(--bg-1); }
.qty span { min-width: 42px; text-align: center; font-weight: 500; font-size: 14px; }
.pdp__meta { margin-top: var(--s-md); font-size: 14px; color: var(--ink-soft); border-top: 1px solid var(--line); }
.pdp__meta div { display: flex; justify-content: space-between; gap: var(--s-sm); padding: 11px 0; border-bottom: 1px solid var(--line); }
.pdp__delivery { display: flex; gap: 10px; align-items: flex-start; background: var(--bg-1); border-radius: var(--r-lg); padding: 14px; font-size: 14px; color: var(--ink-soft); margin: var(--s-sm) 0; }
.pdp__delivery svg { flex: 0 0 auto; width: 20px; height: 20px; stroke: var(--ink); fill: none; stroke-width: 1.6; margin-top: 1px; }
@media (max-width: 900px) { .pdp { grid-template-columns: 1fr; } .pdp__col { position: static; } }

/* ============================================================
   Booking
   ============================================================ */
.book { display: grid; grid-template-columns: 1fr 320px; gap: var(--s-md); align-items: start; }
.book__panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-md); }
.book__summary { position: sticky; top: 140px; background: var(--bg-1); border-radius: var(--r-lg); padding: 20px; }
.book__summary h3 { font-family: var(--font-body); font-size: 14px; font-weight: 600; margin-bottom: var(--s-sm); }
.book__summary dl { display: grid; grid-template-columns: auto 1fr; gap: 0; font-size: 14px; margin: 0 0 var(--s-xs); }
.book__summary dt { color: var(--ink-soft); padding: 9px 0; border-top: 1px solid var(--line-strong); }
.book__summary dd { margin: 0; text-align: right; font-weight: 500; color: var(--ink); padding: 9px 0; border-top: 1px solid var(--line-strong); }

.step { padding-top: var(--s-md); margin-top: var(--s-md); border-top: 1px solid var(--line); }
.step:first-of-type { padding-top: 0; margin-top: 0; border-top: none; }
.step__label { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s-sm); }
.step__num {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: var(--r-full);
  background: var(--ink); color: #fff; font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.step__label h3 { margin: 0; font-size: 18px; font-weight: 500; }

.choice { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-xs); }
.choice__item {
  border: 1px solid var(--line-strong); border-radius: var(--r-lg); padding: 16px;
  cursor: pointer; background: #fff; text-align: center;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.choice__item:hover { border-color: var(--ink); }
.choice__item.selected { border-color: var(--ink); background: var(--bg-1); }
.choice__item svg { width: 30px; height: 30px; stroke: var(--ink); fill: none; stroke-width: 1.4; margin: 0 auto 8px; }
.choice__item b { display: block; font-family: var(--font-head); font-size: 16px; font-weight: 500; color: var(--ink); }
.choice__item small { color: var(--ink-soft); font-size: 12px; }
.choice--wide { grid-template-columns: 1fr 1fr; }
.choice--wide .choice__item { text-align: left; }
@media (max-width: 560px) { .choice, .choice--wide { grid-template-columns: 1fr; } }

.service-list { display: grid; gap: var(--s-xs); }
.service-opt {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px;
  border: 1px solid var(--line); border-radius: var(--r-lg); cursor: pointer; background: #fff;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.service-opt:hover { border-color: var(--ink); }
.service-opt.selected { border-color: var(--ink); background: var(--bg-1); }
.service-opt input { margin-top: 3px; accent-color: var(--ink); }
.service-opt b { display: block; font-family: var(--font-head); font-size: 16px; font-weight: 500; color: var(--ink); }
.service-opt small { color: var(--ink-soft); font-size: 13px; }

.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: var(--s-xs); }
.slot {
  border: 1px solid var(--line-strong); background: #fff; border-radius: var(--r-md);
  padding: 11px 4px; font-family: var(--font-body); font-weight: 500; font-size: 14px;
  cursor: pointer; color: var(--ink);
  transition: border-color .16s var(--ease), background .16s var(--ease), color .16s var(--ease);
}
.slot:hover:not(:disabled) { border-color: var(--ink); }
.slot[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.slot:disabled { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }

.addon-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-xs); }
.addon-opt { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); cursor: pointer; background: #fff; transition: border-color .18s; }
.addon-opt:hover { border-color: var(--ink); }
.addon-opt.selected { border-color: var(--ink); background: var(--bg-1); }
.addon-opt input { accent-color: var(--ink); }
.addon-opt span b { display: block; font-size: 14px; font-weight: 500; color: var(--ink); }
.addon-opt span small { color: var(--ink-faint); font-size: 12px; }
@media (max-width: 560px) { .addon-list { grid-template-columns: 1fr; } }

/* Add or remove services on a booked appointment (manage page). */
.manage-svc__lead { color: var(--ink-soft); font-size: 14px; margin: 0 0 var(--s-sm); }
.manage-svc__group {
  font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: var(--ink-soft); margin: var(--s-sm) 0 var(--s-xs);
}
.manage-svc__sum {
  margin-top: var(--s-sm); padding: 12px 14px; border-radius: var(--r-lg);
  background: var(--bg-1); border: 1px solid var(--line); font-size: 14px; color: var(--ink);
}
.manage-svc__delta { color: var(--ink-soft); }
.manage-svc__warn { font-weight: 600; }
.manage-svc__hint { color: var(--ink-soft); font-size: 14px; }
#manage-svc-resched { margin-top: var(--s-sm); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-sm); }
@media (max-width: 560px) { .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .book { grid-template-columns: 1fr; } .book__summary { position: static; } }

.notice-inline {
  background: var(--bg-1); border-radius: var(--r-lg); color: var(--ink-soft);
  padding: 14px 16px; font-size: 14px; margin-bottom: var(--s-md);
  display: flex; gap: 10px; align-items: flex-start;
}
.notice-inline svg { flex: 0 0 auto; width: 18px; height: 18px; stroke: var(--ink); fill: none; stroke-width: 1.7; margin-top: 2px; }

/* ---------- Confirmation ---------- */
.confirm { max-width: 620px; margin: 0 auto; text-align: center; }
.confirm__badge { width: 60px; height: 60px; border-radius: var(--r-full); background: var(--bg-1); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--s-sm); }
.confirm__badge svg { width: 26px; height: 26px; stroke: var(--ink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.confirm__card { text-align: left; margin-top: var(--s-md); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; }
.confirm__card dl { display: grid; grid-template-columns: auto 1fr; gap: 0; margin: 0; font-size: 14px; }
.confirm__card dt { color: var(--ink-soft); padding: 10px 0; border-bottom: 1px solid var(--line); }
.confirm__card dd { margin: 0; text-align: right; font-weight: 500; padding: 10px 0; border-bottom: 1px solid var(--line); }
.confirm__card dl > dt:last-of-type, .confirm__card dl > dd:last-of-type { border-bottom: none; }

/* ---------- Prose / info ---------- */
.prose { max-width: 68ch; }
.prose p { color: var(--ink-soft); }
.prose h2 { margin-top: var(--s-lg); }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-md); }
.info-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; }
.info-card h3 { margin-top: var(--s-sm); font-size: 18px; font-weight: 500; }
.info-card h3:first-child { margin-top: 0; }
@media (max-width: 760px) { .info-grid { grid-template-columns: 1fr; } }

/* Service price list */
.svc-table { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.svc-row { display: grid; grid-template-columns: 1fr auto auto; gap: var(--s-sm); align-items: center; padding: 16px; border-bottom: 1px solid var(--line); transition: background .2s var(--ease); }
.svc-row:last-child { border-bottom: none; }
.svc-row:hover { background: var(--bg-1); }
.svc-row__name b { font-family: var(--font-head); font-size: 18px; font-weight: 500; color: var(--ink); display: block; }
.svc-row__name p { margin: 2px 0 0; font-size: 14px; color: var(--ink-soft); max-width: 58ch; }
.svc-row__time { font-size: 14px; color: var(--ink-soft); white-space: nowrap; }
@media (max-width: 700px) { .svc-row { grid-template-columns: 1fr; gap: var(--s-xs); } }

/* Gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-xs); }
.gallery-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-lg); }
@media (max-width: 700px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }

.about-hero { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-md); align-items: center; }
.about-hero img { width: 100%; border-radius: var(--r-xl); }
@media (max-width: 800px) { .about-hero { grid-template-columns: 1fr; } }

/* ---------- Drawers ---------- */
.backdrop { position: fixed; inset: 0; background: rgba(23,25,28,0.45); z-index: 100; opacity: 0; transition: opacity .26s var(--ease); }
.backdrop.show { opacity: 1; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: min(430px, 94vw);
  background: #fff; z-index: 110; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .34s var(--ease-out);
}
.drawer--left { right: auto; left: 0; transform: translateX(-100%); }
.drawer.open { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.drawer__title { font-family: var(--font-head); font-weight: 700; font-size: 18px; }
.drawer__body { flex: 1; overflow-y: auto; padding: var(--s-xs) 20px; }
.drawer__foot { border-top: 1px solid var(--line); padding: 16px 20px; }

.m-nav-group { border-bottom: 1px solid var(--line); padding: var(--s-xs) 0; }
.m-nav-link { display: block; padding: 12px 0; font-family: var(--font-head); font-weight: 500; color: var(--ink); font-size: 16px; }
.m-nav-sub { display: block; padding: 8px 0 8px 12px; color: var(--ink-soft); font-size: 14px; }

/* ---------- Cart ---------- */
.cart-line { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: start; }
.cart-line__thumb { width: 64px; aspect-ratio: 1; background: var(--bg-1); border-radius: var(--r-md); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.cart-line__thumb img { width: 100%; height: 100%; object-fit: contain; }
.cart-line__thumb svg { width: 45%; height: 45%; stroke: var(--line-strong); fill: none; stroke-width: 1.1; }
.cart-line__title { font-size: 14px; font-weight: 500; color: var(--ink); }
.cart-line__meta { font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
.cart-line__qty { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; }
.cart-line__qty button { width: 26px; height: 26px; border: 1px solid var(--line-strong); background: #fff; cursor: pointer; border-radius: var(--r-sm); }
.cart-line__qty button:hover { border-color: var(--ink); }
.cart-line__price { font-family: var(--font-head); font-weight: 700; color: var(--ink); white-space: nowrap; font-size: 14px; }
.cart-line__remove { background: none; border: none; color: var(--ink-soft); font-size: 12px; cursor: pointer; padding: 6px 0 0; text-decoration: underline; }
.cart-line__remove:hover { color: var(--ink); }
.cart-empty { text-align: center; color: var(--ink-soft); padding: var(--s-lg) 0; }
.cart-subtotal { display: flex; justify-content: space-between; font-family: var(--font-head); font-weight: 700; font-size: 16px; margin-bottom: var(--s-xs); }
.cart-note { font-size: 12px; color: var(--ink-soft); margin-bottom: var(--s-sm); display: flex; gap: 8px; align-items: flex-start; }
/* Shown when some lines have no price, so the subtotal is not read as the
   full amount payable. Bordered rather than coloured, to stay greyscale. */
.cart-note--quote { display: block; border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 8px 10px; line-height: 1.45; }
.cart-note svg { flex: 0 0 auto; width: 16px; height: 16px; stroke: var(--ink); fill: none; stroke-width: 1.7; margin-top: 1px; }

/* ---------- Toasts ---------- */
.toasts { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: var(--s-xs); align-items: center; width: max-content; max-width: 92vw; }
.toast { background: var(--ink); color: #fff; padding: 13px 20px; border-radius: var(--r-md); font-size: 14px; box-shadow: var(--shadow-pop); animation: toast-in .3s var(--ease-out); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- Footer: light grey, airy ---------- */
.footer { background: var(--bg-1); position: relative; overflow: hidden; }
.footer .container { padding-top: clamp(40px, 6vw, 72px); padding-bottom: var(--s-md); position: relative; z-index: 1; }
.footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: var(--s-md); }
.footer h2 { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: var(--s-sm); }
.footer__brand p { font-size: 14px; color: var(--ink-soft); max-width: 42ch; }
.footer__brand strong { color: var(--ink); }
.footer__links { display: flex; flex-direction: column; gap: 10px; }
.footer__links a { font-size: 14px; color: var(--ink-soft); transition: color .16s; width: fit-content; }
.footer__links a:hover { color: var(--ink); }
.socials { display: flex; gap: var(--s-xs); margin-top: var(--s-sm); }
.socials a { width: 44px; height: 44px; border-radius: var(--r-full); background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--ink); transition: background .2s var(--ease), color .2s; }
.socials a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.socials svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.footer__bottom { display: flex; justify-content: space-between; gap: var(--s-sm); flex-wrap: wrap; border-top: 1px solid var(--line); margin-top: var(--s-md); padding-top: var(--s-sm); font-size: 12px; color: var(--ink-faint); }
.footer::after { content: ""; position: absolute; right: -60px; bottom: -80px; width: 260px; height: 260px; background: var(--paw) center / contain no-repeat; opacity: 0.06; pointer-events: none; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }

/* ---------- States and skeletons ---------- */
.state { text-align: center; padding: clamp(44px, 8vw, 90px) 20px; color: var(--ink-soft); }
.state h2 { color: var(--ink); }
.spinner { width: 28px; height: 28px; border: 2px solid var(--line-strong); border-top-color: var(--ink); border-radius: var(--r-full); margin: 0 auto var(--s-sm); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.skeleton { background: var(--bg-1); border-radius: var(--r-sm); position: relative; overflow: hidden; }
.skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent); animation: shimmer 1.4s infinite; }
@keyframes shimmer { 100% { transform: translateX(100%); } }
.sk-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; }
.sk-card__media { aspect-ratio: 1; margin-bottom: 12px; }
.sk-line { height: 11px; margin-bottom: 8px; }
.sk-line--sm { width: 45%; }
.sk-line--md { width: 80%; }

/* ---------- Floating WhatsApp ---------- */
.wa-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 80; width: 52px; height: 52px;
  border-radius: var(--r-full); background: var(--wa); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-pop); border: none; cursor: pointer;
  transition: transform .26s var(--ease-out), background .2s var(--ease);
}
.wa-fab:hover { background: var(--wa-hover); transform: translateY(-3px); }
.wa-fab svg { width: 26px; height: 26px; fill: #fff; }
@media (max-width: 560px) { .wa-fab { width: 48px; height: 48px; right: 14px; bottom: 14px; } }

/* ---------- Live appointment tracker ----------
   A floating strip pinned to the bottom of the viewport while the visitor has
   an appointment in play, so the current booking is always one tap from being
   changed. Ink surface on white text, the same treatment as the toasts and the
   WhatsApp button, so it reads as chrome rather than as page content.

   z-index sits above the WhatsApp button (80) and below the drawer backdrop
   (100), so opening a drawer correctly dims it.

   --appt-track-h is measured and written by app.js, because the strip grows a
   line taller when the status text wraps on a narrow phone. The WhatsApp
   button and the toasts are lifted by that measured height so nothing ever
   sits on top of anything else. */
.appt-track {
  position: fixed;
  z-index: 90;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 28px));
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  animation: appt-track-in .34s var(--ease-out);
}
.appt-track[hidden] { display: none; }
@keyframes appt-track-in { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }

.appt-track__row { display: flex; align-items: stretch; }

/* The whole strip is the link. The close button sits outside it so that
   dismissing never navigates. */
.appt-track__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 6px 12px 16px;
  color: #fff;
  text-decoration: none;
}
.appt-track__main:hover .appt-track__cta { background: rgba(255, 255, 255, 0.22); }
.appt-track__main:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }

/* Live dot. Ringed and pulsing only while the session is actually running. */
.appt-track__pulse {
  position: relative;
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: var(--r-full);
  background: #fff;
}
.appt-track--live .appt-track__pulse::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.55);
  animation: appt-pulse 1.9s var(--ease) infinite;
}
@keyframes appt-pulse { from { transform: scale(.55); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

.appt-track__text { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.appt-track__status {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .01em;
}
.appt-track__detail {
  font-size: 12.5px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.72);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appt-track__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 11px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.13);
  font-size: 12.5px;
  font-weight: 600;
  transition: background .18s var(--ease);
}
.appt-track__cta svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.1; }

.appt-track__close {
  flex: 0 0 auto;
  width: 42px;
  background: none;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.appt-track__close:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.appt-track__close:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.appt-track__close svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }

/* Progress through the session. Rendered only while one is running, so the
   width is always a real elapsed fraction and never decorative. */
.appt-track__bar { height: 3px; background: rgba(255, 255, 255, 0.16); }
.appt-track__bar i { display: block; height: 100%; background: #fff; transition: width .8s var(--ease); }

body.has-appt-track .wa-fab { bottom: calc(30px + var(--appt-track-h, 68px)); }
body.has-appt-track .toasts { bottom: calc(34px + var(--appt-track-h, 68px)); }

@media (max-width: 560px) {
  .appt-track { bottom: 12px; width: calc(100vw - 20px); }
  .appt-track__main { padding-left: 13px; gap: 10px; }
  .appt-track__detail { font-size: 12px; }
  .appt-track__cta { padding: 7px 9px; }
  .appt-track__close { width: 38px; }
  body.has-appt-track .wa-fab { bottom: calc(22px + var(--appt-track-h, 68px)); }
  body.has-appt-track .toasts { bottom: calc(26px + var(--appt-track-h, 68px)); }
}

@media (prefers-reduced-motion: reduce) {
  .appt-track { animation: none; }
  .appt-track--live .appt-track__pulse::after { animation: none; }
  .appt-track__bar i { transition: none; }
}

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 150; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal__scrim { position: absolute; inset: 0; background: rgba(23,25,28,0.5); animation: fade-in .24s var(--ease); }
.modal__card {
  position: relative; z-index: 1; background: #fff; border-radius: var(--r-xl);
  width: min(540px, 100%); max-height: min(90vh, 820px); overflow-y: auto;
  animation: modal-in .32s var(--ease-out); box-shadow: var(--shadow-pop);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 0; }
.modal__head h3 { margin: 0 0 2px; font-size: 21px; }
.modal__head p { margin: 0; font-size: 14px; color: var(--ink-soft); }
.modal__close { flex: 0 0 auto; width: 38px; height: 38px; border: 1px solid var(--line-strong); background: #fff; cursor: pointer; color: var(--ink-soft); font-size: 16px; line-height: 1; border-radius: var(--r-md); transition: background .18s, color .18s; }
.modal__close:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.modal__body { padding: var(--s-sm) 20px 20px; }
.modal__note { font-size: 12px; color: var(--ink-soft); text-align: center; margin: var(--s-sm) 0 0; }

.enq-product { display: grid; grid-template-columns: 60px 1fr; gap: 12px; align-items: center; background: var(--bg-1); border-radius: var(--r-lg); padding: 12px; margin-bottom: var(--s-sm); }
.enq-product__thumb { width: 60px; aspect-ratio: 1; background: #fff; border-radius: var(--r-sm); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.enq-product__thumb img { width: 100%; height: 100%; object-fit: contain; }
.enq-product__thumb svg { width: 45%; height: 45%; stroke: var(--line-strong); fill: none; stroke-width: 1.1; }
.enq-product__title { font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.4; }
.enq-product__meta { font-size: 12px; color: var(--ink-faint); margin-top: 2px; }

/* ============================================================
   Motion: reveal on scroll, route transition, image fade
   ============================================================ */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
[data-reveal].is-in { opacity: 1; transform: none; }

#main { animation: route-in .38s var(--ease-out); }
@keyframes route-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

img[data-fade] { opacity: 0; transition: opacity .5s var(--ease); }
img[data-fade].is-loaded { opacity: 1; }

/* ---------- Focus and selection ---------- */
::selection { background: var(--bg-2); color: var(--ink); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, .choice__item:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px; border-radius: var(--r-sm);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  img[data-fade] { opacity: 1; }
  .marquee__track { animation: none; }
}

/* ---------- Print ---------- */
@media print {
  .header, .topbar, .footer, .wa-fab, .drawer, .backdrop, .toasts, .modal, .marquee { display: none !important; }
  body { color: #000; }
}

/* Studio credit line in the footer. Sits alongside the copyright on desktop and
   wraps to its own line on narrow screens like the other footer__bottom items. */
.footer__credit { color: var(--ink-faint); }
.footer__credit strong { color: var(--ink-soft); font-weight: 600; letter-spacing: 0.02em; }
@media (max-width: 640px) {
  .footer__bottom { flex-direction: column; gap: 6px; }
}

/* ============================================================
   Product photo gallery (product detail page)
   A scroll-snapped strip: swipe on touch, arrows or keyboard on desktop.
   Only rendered when a product has more than one photo, so single-photo
   products keep the plain <img> they always had.
   ============================================================ */
.gallery { position: relative; width: 100%; height: 100%; }
.gallery__track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.gallery__slide { flex: 0 0 100%; scroll-snap-align: center; display: flex; align-items: center; justify-content: center; }
.gallery__slide img { width: 100%; height: 100%; object-fit: contain; }

.gallery__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: var(--r-full);
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.92);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; transition: opacity .18s, background .18s;
  z-index: 2;
}
.gallery__nav svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.gallery__nav--prev { left: 10px; }
.gallery__nav--next { right: 10px; }
.gallery:hover .gallery__nav, .gallery__nav:focus-visible { opacity: 1; }
.gallery__nav:hover { background: #fff; }
.gallery__nav:disabled { opacity: 0 !important; pointer-events: none; }

.gallery__dots {
  position: absolute; left: 0; right: 0; bottom: 10px;
  display: flex; justify-content: center; gap: 6px; z-index: 2;
}
.gallery__dot {
  width: 7px; height: 7px; padding: 0; border-radius: var(--r-full);
  border: none; background: var(--line-strong); cursor: pointer;
  transition: background .18s, transform .18s;
}
.gallery__dot.is-on { background: var(--ink); transform: scale(1.3); }

/* Touch devices page by swiping, so the arrows only take up room. */
@media (hover: none) {
  .gallery__nav { display: none; }
}

/* ============================================================
   Search: results header, sort control, and the autocomplete panel
   ============================================================ */
.search-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-sm); flex-wrap: wrap; margin-bottom: var(--s-sm); }
.search-sort { display: flex; align-items: center; gap: 8px; margin: 0; }
.search-sort > span { font-size: 13px; color: var(--ink-faint); }
.search-sort .select { min-height: 40px; padding: 7px 30px 7px 10px; font-size: 14px; }

mark { background: #ffeeba; color: inherit; padding: 0 1px; border-radius: 2px; }

/* Suggestions panel. Anchored to the search form, so it lines up in the header,
   the slide-down search panel and on the search page. */
.ac {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-soft);
  overflow: hidden; z-index: 60; max-height: 68vh; overflow-y: auto;
}
.ac__row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--line);
  background: #fff;
}
.ac__row:last-child { border-bottom: none; }
.ac__row.is-active, .ac__row:hover { background: var(--bg-1); }
.ac__row--jump { font-size: 14px; }
.ac__kind {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em;
  font-weight: 600; color: var(--ink-faint); background: var(--bg-1);
  border: 1px solid var(--line); border-radius: var(--r-full); padding: 2px 7px;
}
.ac__thumb {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: #fff; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.ac__thumb img { width: 100%; height: 100%; object-fit: contain; }
.ac__noimg { width: 100%; height: 100%; background: var(--bg-1); }
.ac__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ac__label { font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac__text small { font-size: 12px; color: var(--ink-faint); }
.ac__price { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--ink); }

@media (max-width: 560px) {
  .ac__thumb { width: 34px; height: 34px; }
  .ac__label { font-size: 13px; }
  .search-head { flex-direction: column; align-items: flex-start; }
}

/* Warning variant of the inline notice: used for the closed-day message on the
   booking form, where the customer has to change their choice to continue. */
.notice-inline--warn {
  background: #fff8e6;
  border: 1px solid #f0d9a0;
  color: #6b5626;
}
.notice-inline--warn svg { stroke: #9a7b2f; }
.notice-inline--warn strong { color: #5a4718; }

/* A slot that cannot be taken. Greyed and struck through so it reads as
   unavailable rather than merely unselected. */
.slot:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
  background: var(--bg-1);
}

/* ============================================================
   Offers band: the commercial centrepiece of the home page.

   Built to convert, not decorate:
   - The lead offer is inverted (ink surface, white type) so it is the single
     highest-contrast block on the page after the hero, and the value line is
     set at display size. Nothing else on the page is dark, so the eye lands here.
   - Every card is one big tap target. The main action is a stretched link;
     the code chip sits above it and copies AND applies the code.
   - Urgency comes only from a real end date. No invented countdowns.
   - On phones the supporting offers become a swipe rail, so the band never
     pushes "Shop by category" several screens down.
   Greyscale throughout, matching the rest of the site: emphasis comes from
   contrast and scale, not new colours.
   ============================================================ */
.offers-band { padding-top: clamp(28px, 4vw, 52px); }

.offers-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--s-sm); align-items: stretch; }
.offers-grid--solo { grid-template-columns: 1fr; }
.offers-rail { display: grid; gap: var(--s-sm); align-content: stretch; }

.offer {
  position: relative;
  display: flex;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: #fff;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.offer:hover { border-color: var(--ink); box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.offer:focus-within { border-color: var(--ink); }

.offer__body { position: relative; z-index: 2; padding: var(--s-md); display: flex; flex-direction: column; gap: 6px; width: 100%; }

/* Offer photo: the real bag with its free gift, shown in full. Copy and photo
   sit side by side; the photo is the evidence, the copy is the promise. */
.offer__photo {
  position: relative; z-index: 0; flex: 0 0 auto; order: 2;
  display: flex; align-items: center; justify-content: center;
  background: #fff; overflow: hidden;
}
.offer__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.offer--has-photo .offer__body { flex: 1 1 auto; min-width: 0; }

/* Lead: photo takes the right ~40%, full height of the card. */
.offer--lead.offer--has-photo .offer__photo { width: 40%; align-self: stretch; }
/* Rail: a square thumbnail on the left. */
.offer--rail.offer--has-photo .offer__photo { order: 0; width: 104px; align-self: stretch; border-right: 1px solid var(--line); }
/* Offers page: photo on top of each card. */
.offer--page.offer--has-photo { flex-direction: column; }
.offer--page.offer--has-photo .offer__photo { order: 0; width: 100%; aspect-ratio: 4 / 3; border-bottom: 1px solid var(--line); }

.offer__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.offer__badge {
  background: var(--ink); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r-full);
}
.offer__ends { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.offer__ends--soon { color: var(--ink); }
.offer__ends--soon::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: 1px; }

/* The number is the hook, so it is the largest thing in the block. */
.offer__highlight {
  margin: 2px 0 0;
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-size: clamp(30px, 3.4vw, 46px);
}
.offer__title { margin: 0; font-family: var(--font-head); font-size: 20px; font-weight: 600; color: var(--ink); }
.offer__sub { margin: 0; color: var(--ink-soft); font-size: 14px; max-width: 44ch; }

.offer__foot { display: flex; align-items: center; gap: var(--s-xs); flex-wrap: wrap; margin-top: auto; padding-top: var(--s-sm); }

/* Stretched link: the whole card follows the main action. */
.offer__cta { position: static; }
.offer__cta::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.offer__cta:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.offer__cta--text { font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; }
.offer__cta--text .arrow { display: inline-block; transition: transform .18s var(--ease); }
.offer:hover .offer__cta--text .arrow { transform: translateX(3px); }

/* The code chip copies and applies. It sits above the stretched link. */
.offer__code {
  position: relative; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px dashed var(--line-strong); background: var(--bg-1);
  border-radius: var(--r-md); padding: 8px 12px; cursor: pointer;
  font-family: var(--font-body); transition: background .16s, border-color .16s;
}
.offer__code span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-faint); }
.offer__code b { font-size: 14px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink); }
.offer__code:hover { background: #fff; border-color: var(--ink); }
.offer__code:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.offer__code.is-copied { background: var(--ink); border-style: solid; border-color: var(--ink); }
.offer__code.is-copied span, .offer__code.is-copied b { color: #fff; }

.offer__fine { margin: 8px 0 0; font-size: 12px; }

/* ---- Lead offer: inverted, taller, value at display size ---- */
.offer--lead { min-height: 300px; background: var(--ink); border-color: var(--ink); color: #fff; }
.offer--lead:hover { border-color: var(--ink); box-shadow: var(--shadow-pop); }
.offer--lead .offer__body { padding: var(--s-lg) var(--s-md); gap: 10px; }
.offer--lead .offer__badge { background: #fff; color: var(--ink); }
.offer--lead .offer__ends, .offer--lead .offer__ends--soon { color: rgba(255,255,255,0.85); }
.offer--lead .offer__highlight { color: #fff; font-size: clamp(44px, 5.4vw, 72px); }
.offer--lead .offer__title { color: #fff; font-size: 26px; }
.offer--lead .offer__sub { color: rgba(255,255,255,0.74); font-size: 15px; }
.offer--lead .offer__fine { color: rgba(255,255,255,0.6); }
.offer--lead .offer__code { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.45); }
.offer--lead .offer__code span { color: rgba(255,255,255,0.65); }
.offer--lead .offer__code b { color: #fff; }
.offer--lead .offer__code:hover { background: rgba(255,255,255,0.16); border-color: #fff; }
.offer--lead .offer__code:focus-visible { outline-color: #fff; }
.offer--lead .offer__code.is-copied { background: #fff; border-color: #fff; }
.offer--lead .offer__code.is-copied span, .offer--lead .offer__code.is-copied b { color: var(--ink); }
.offer--lead .offer__cta:hover { background: #f1f2f3; border-color: #f1f2f3; }


/* ---- Supporting offers: compact so three fit beside the lead ---- */
.offer--rail { min-height: 92px; }
.offer--rail .offer__body { padding: var(--s-sm) var(--s-md); gap: 4px; }
.offer--rail .offer__highlight { font-size: 22px; }
.offer--rail .offer__title { font-size: 16px; }
.offer--rail .offer__sub { font-size: 13px; }
.offer--rail .offer__foot { padding-top: 8px; }
.offer--rail .offer__code { padding: 6px 10px; }

/* Dedicated offers page */
.offers-all { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-sm); }
.offers-all .offer--lead { grid-column: 1 / -1; }

/* ---- Applied offer: shown where the customer commits ---- */
.offer-applied {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; margin: 0 0 var(--s-sm);
  border: 1px solid var(--ink); border-radius: var(--r-lg); background: var(--bg-1);
}
.offer-applied__tick {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--ink);
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.offer-applied__tick svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2.6; }
.offer-applied__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.offer-applied__text b { font-size: 14px; letter-spacing: .02em; color: var(--ink); }
.offer-applied__text small { font-size: 12px; color: var(--ink-soft); line-height: 1.35; }
.offer-applied__x {
  flex: 0 0 auto; width: 30px; height: 30px; margin: -4px -4px 0 0;
  border: none; background: none; cursor: pointer; color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center; border-radius: var(--r-sm);
}
.offer-applied__x:hover { color: var(--ink); background: #fff; }
.offer-applied__x:focus-visible { outline: 2px solid var(--ink); }
.offer-applied__x svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }

@media (max-width: 900px) {
  .offers-grid { grid-template-columns: 1fr; }
  .offers-all { grid-template-columns: 1fr; }
  .offer--lead { min-height: 0; }
  /* Supporting offers become a swipe rail: one screen of height, not three. */
  .offers-rail {
    display: flex; gap: var(--s-xs); overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px;
    scrollbar-width: none;
  }
  .offers-rail::-webkit-scrollbar { display: none; }
  .offers-rail .offer { flex: 0 0 min(78%, 300px); scroll-snap-align: start; }
}
@media (max-width: 560px) {
  .offer--lead .offer__body { padding: var(--s-md) var(--s-sm); }
  .offer--lead .offer__title { font-size: 21px; }
  .offer--lead .offer__foot .btn { flex: 1 1 auto; }
  /* Phone: the lead's photo becomes a band across the top. */
  .offer--lead.offer--has-photo { flex-direction: column; }
  .offer--lead.offer--has-photo .offer__photo { order: 0; width: 100%; height: 220px; }
  .offer--rail.offer--has-photo .offer__photo { width: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  .offer, .offer__cta--text .arrow { transition: none; }
  .offer:hover { transform: none; }
}

/* ============================================================
   Offers star: first tile in Shop by category.
   Same grid cell as every other category, so the section stays short, but a
   warm gold star against a monochrome grid, with a slow glow, so it reads first.
   ============================================================ */
.cat--star { position: relative; }
.star {
  position: relative; width: 100%; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s var(--ease-out);
}
.star__shape {
  position: absolute; inset: 0;
  /* Five-point star. Points at the top so it reads as a star at small sizes. */
  clip-path: polygon(50% 0%, 61.8% 35.4%, 100% 35.4%, 69.1% 57.3%, 80.9% 92.7%,
                     50% 70.8%, 19.1% 92.7%, 30.9% 57.3%, 0% 35.4%, 38.2% 35.4%);
  background: radial-gradient(circle at 50% 42%, #ffe08a 0%, #ffc233 42%, #f29b05 100%);
  filter: drop-shadow(0 6px 14px rgba(242, 155, 5, 0.35));
  animation: star-glow 3.2s ease-in-out infinite;
}
.star__text {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  /* Sits in the star's solid inner pentagon, nudged down from the top point. */
  margin-top: 12%;
  line-height: 1; text-align: center; color: #3b2600;
}
.star__text small {
  font-size: clamp(8px, 0.8vw, 10px); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.star__text strong {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(11px, 1.15vw, 16px); letter-spacing: -0.01em; margin-top: 3px;
  /* Wrap to two short lines ("BUY 1 / GET 1") instead of truncating. */
  max-width: 6.5ch; white-space: normal; line-height: 1.05;
}
/* A star reads smaller than a circle of the same box, so give it a little more. */
.cat--star .star { transform: scale(1.14); }
.cat--star:hover .star { transform: translateY(-3px) rotate(-6deg) scale(1.18); }
@media (prefers-reduced-motion: reduce) { .cat--star:hover .star { transform: scale(1.14); } }
.cat--star:hover .star { transform: translateY(-3px) rotate(-6deg) scale(1.04); }
.cat--star b { font-weight: 700; color: #b06a00; }
.cat--star > span:last-child { color: #b06a00; font-weight: 600; }
.cat--star:focus-visible { outline: 2px solid #f29b05; outline-offset: 4px; border-radius: 8px; }

@keyframes star-glow {
  0%, 100% { filter: drop-shadow(0 6px 14px rgba(242, 155, 5, 0.30)); }
  50%      { filter: drop-shadow(0 6px 22px rgba(242, 155, 5, 0.65)); }
}
@media (prefers-reduced-motion: reduce) {
  .star__shape { animation: none; }
  .cat--star:hover .star { transform: none; }
}

/* "Shop all" tile, so the grid ends on a useful action rather than a gap. */
.cat__medallion--all { background: var(--ink); }
.cat__medallion--all svg { fill: #fff; stroke: none; width: 34%; height: 34%; }

/* 9 tiles (star + 7 categories + Shop all): keep rows full at each width. */
.cats--with-star { grid-template-columns: repeat(9, 1fr); }
@media (max-width: 1180px) { .cats--with-star { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 620px)  { .cats--with-star { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   Slot states with two places per slot.
   Open: plain. Last place: amber edge plus "1 left". Full or past: greyed
   and struck through with a diagonal slash, so "taken" reads at a glance
   even without colour.
   ============================================================ */
.slot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; line-height: 1.1; }
.slot__left {
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: #b45309;
}
.slot--last { border-color: #f59e0b; }
.slot--last:hover:not(:disabled) { border-color: #b45309; }
.slot--last[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); }
.slot--last[aria-pressed="true"] .slot__left { color: #fde68a; }

.slot--off, .slot:disabled {
  opacity: 0.45; cursor: not-allowed; background: var(--bg-1);
  color: var(--ink-faint); text-decoration: line-through;
  overflow: hidden;
}
/* The slash itself. */
.slot--off::after, .slot:disabled::after {
  content: ""; position: absolute; left: -10%; right: -10%; top: 50%;
  height: 1.5px; background: currentColor; transform: rotate(-24deg); opacity: 0.7;
  pointer-events: none;
}

/* Developer credit link in the footer */
.credit-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.credit-link:hover, .credit-link:focus-visible { opacity: .8; }

/* 8 Oct: a free slot the chosen service cannot fit into (runs into a full one).
   Greyed but not slashed, because the slot itself is not booked. */
.slot--short, .slot--short:disabled { opacity: 0.6; cursor: not-allowed; background: var(--bg-1); color: var(--ink-faint); text-decoration: none; border-style: dashed; }
.slot--short::after, .slot--short:disabled::after { display: none; }
.slot__left--short { color: var(--ink-faint); }