/* Ovenly Delights storefront. Hand-written, no build step.
 *
 * Phone first: every rule below is for a 360-430 px screen, and the media
 * queries at the end widen it. Festive but clean: warm cream pages with the
 * brand chocolate for text, a deep maroon for the announcement bar, the dark
 * bands and the footer, and marigold and gold only as accents: the main
 * buttons on dark bands, the garland, the diya beside headings and a faint
 * rangoli pattern behind dark bands. Fraunces sets headings; Figtree the rest.
 */

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/static/fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/static/fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Latin only: a heading with a rupee sign falls back to Figtree for that glyph. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --page-bg: #fbf4ea;
  --card: #fffaf3;
  --surface: #f4e6d4;       /* a step deeper than the page, for placeholders */
  --butter: #fbecd0;        /* the warm panel tint */
  --ink: #3f260f;           /* logo chocolate: text, outlines, focus */
  --muted: #6d5334;         /* 6.5:1 on the page */
  --rule: #e8d9c6;
  --field-line: #8a7560;    /* form control borders: 4:1 on the page, 4.4:1 on white */

  --maroon-deep: #3a0b18;   /* announcement bar and footer */
  --maroon: #521226;        /* festive bands */
  --maroon-ink: #6e1a31;    /* headings and primary buttons on cream. White on it 11:1 */
  --maroon-hover: #58142a;
  --on-dark: #fbf4ea;       /* text on the maroon */
  --on-dark-muted: #e3cfc4; /* 10:1 on --maroon-deep */
  --marigold: #f2a31b;      /* buttons on dark bands. --maroon-deep on it 8:1 */
  --marigold-hover: #f7b945;
  --gold: #e3b04b;          /* ornaments, and small text on dark bands, 7:1 */
  --gold-ink: #8a5a0b;      /* gold that can be read on cream, 5.4:1 */
  --error: #a0341f;         /* 6:1 on the page; only for error text */

  --font: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;

  /* Type scale */
  --fs-xs: .8125rem;  /* 13 */
  --fs-sm: .875rem;   /* 14 */
  --fs-md: 1rem;      /* 16 */
  --fs-lg: 1.125rem;  /* 18 */
  --fs-xl: 1.5rem;    /* 24 */
  --fs-2xl: 1.875rem; /* 30 */

  --gap: 1.25rem;
  --page: 1160px;
  --radius: 10px;
  --tap: 48px;
  --announce-h: 34px;
  --head-clear: 84px;       /* the sticky nav plus a little air, for scroll targets */

  --rangoli: url('/static/rangoli.svg');
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-md);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
button, input, textarea, select { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}
main:focus { outline: none; }

.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 {
  position: absolute; left: .75rem; top: -4rem; z-index: 300;
  background: var(--ink); color: #fff;
  padding: .75rem 1rem; border-radius: var(--radius);
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: .75rem; }

[x-cloak] { display: none !important; }

.wrap {
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gap);
}

/* ---------------------------------------------------------------- type --- */

h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-wrap: balance;
}
h1, h2 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.1;
  color: var(--maroon-ink);
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-md); }

p { margin: 0 0 .75em; }
p:last-child { margin-bottom: 0; }

.lede { color: var(--muted); font-size: var(--fs-md); max-width: 46ch; }

.kicker {
  margin: 0 0 .5rem;
  color: var(--gold-ink);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.eyebrow {
  margin-bottom: .5rem;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.crumb { margin: 0 0 1rem; font-size: var(--fs-sm); }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

/* A section heading with the small diya before it. */
.orn-head { display: flex; align-items: center; gap: .5rem; }
.orn-head .diya { flex: none; width: 24px; height: 24px; margin-top: -2px; }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-bottom: 1rem;
}
.section-link {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 44px;
  color: var(--maroon-ink);
  font-size: var(--fs-sm); font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.section-link::after { content: '\2192' / ''; transition: transform .15s; }
.section-link:hover { text-decoration: underline; }

/* ------------------------------------------------------------- buttons --- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--tap);
  padding: .75rem 1.25rem;
  border: 1px solid var(--maroon-ink);
  border-radius: 999px;
  background: var(--maroon-ink);
  color: #fff;
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn:hover { background: var(--maroon-hover); border-color: var(--maroon-hover); }
.btn:disabled, .btn:disabled:hover {
  background: var(--surface); border-color: var(--surface); color: var(--muted);
  cursor: not-allowed;
}
.btn-ghost { background: transparent; border-color: var(--maroon-ink); color: var(--maroon-ink); }
.btn-ghost:hover { background: var(--surface); border-color: var(--maroon-ink); }
.btn-block { display: flex; width: 100%; }

/* On the maroon: marigold for the main action, a cream outline for the other. */
.btn-gold { background: var(--marigold); border-color: var(--marigold); color: var(--maroon-deep); }
.btn-gold:hover { background: var(--marigold-hover); border-color: var(--marigold-hover); }
.btn-light { background: transparent; border-color: rgba(251, 244, 234, .7); color: var(--on-dark); }
.btn-light:hover { background: rgba(251, 244, 234, .12); border-color: var(--on-dark); }

.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

/* -------------------------------------------------------------- header --- */

/* Sticky with a negative top: the announcement scrolls out of view and the
   nav stays pinned. */
.site-head {
  position: sticky; top: calc(-1 * var(--announce-h)); z-index: 50;
}
.announce {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  height: var(--announce-h); margin: 0; padding-inline: var(--gap);
  background: var(--maroon-deep); color: var(--on-dark);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.announce::before, .announce::after { content: '\2726' / ''; color: var(--gold); font-size: .6rem; }

.nav {
  position: relative;
  background: rgba(251, 244, 234, .97);
  border-bottom: 1px solid var(--rule);
}
.nav-inner {
  display: flex; align-items: center; gap: .25rem;
  min-height: 60px;
}
.brand {
  display: flex; align-items: center; gap: .55rem;
  margin-right: auto;
  min-height: var(--tap);
  color: var(--maroon-ink);
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
}
.brand img { width: 34px; height: 34px; }

.nav-links { display: none; }

.menu { margin-left: -.75rem; }
.menu summary {
  display: grid; place-items: center;
  width: var(--tap); height: var(--tap);
  border-radius: var(--radius);
  color: var(--maroon-ink);
  list-style: none; cursor: pointer;
}
.menu summary::-webkit-details-marker { display: none; }
.menu .menu-close, .menu[open] .menu-open { display: none; }
.menu[open] .menu-close { display: inline; }
.menu-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  display: flex; flex-direction: column;
  padding: .5rem var(--gap) 1rem;
  background: var(--page-bg);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 18px 30px -18px rgba(58, 11, 24, .45);
}
.menu-panel a {
  display: flex; align-items: center;
  min-height: 52px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  font-size: var(--fs-lg); font-weight: 600;
  text-decoration: none;
}
.menu-panel a[aria-current] { color: var(--maroon-ink); }
.menu-panel a[aria-current]::after { content: '' / ''; width: 6px; height: 6px; margin-left: .6rem; border-radius: 50%; background: var(--marigold); }
.menu-panel .nav-corporate {
  justify-content: center;
  margin-top: 1rem; min-height: var(--tap);
  border: 0; border-radius: 999px;
  background: var(--maroon-ink); color: #fff;
  font-size: var(--fs-md);
}
.menu-panel .nav-corporate[aria-current] { color: #fff; }

.bag-link {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap);
  margin-right: -.5rem;
  color: var(--maroon-ink);
  text-decoration: none;
}
.bag-count {
  position: absolute; top: 5px; right: 3px;
  min-width: 20px; height: 20px; padding-inline: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--maroon-ink); color: #fff;
  font-size: .75rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* The marigold garland under the header. */
.toran {
  position: relative; z-index: 3;
  height: 24px;
  background: url('/static/toran.svg') center top / 56px 24px repeat-x;
}

/* ---------------------------------------------------------------- home --- */

.hero {
  position: relative; isolation: isolate;
  display: flex; align-items: flex-end;
  min-height: 360px;
  margin-top: -24px;             /* the garland hangs over the photo */
  background: var(--maroon) var(--rangoli) center / 120px;
  color: var(--on-dark);
}
.hero-photo { min-height: clamp(480px, 74svh, 640px); }
.hero-art { position: absolute; inset: 0; z-index: -2; }
.hero-art .shot { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.hero-photo::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
    rgba(40, 7, 17, .97) 0%, rgba(58, 11, 24, .9) 30%, rgba(58, 11, 24, .45) 50%, rgba(58, 11, 24, 0) 68%);
}
.hero-copy { width: 100%; padding-block: 3rem 1.75rem; }
.hero .kicker { color: var(--gold); }
.hero h1 {
  max-width: 14ch;
  color: var(--on-dark);
  font-size: clamp(2.25rem, 9.6vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -.015em;
}
.hero-line { max-width: 34ch; margin: .85rem 0 0; color: var(--on-dark-muted); font-size: var(--fs-lg); line-height: 1.45; }
.hero-ctas { display: flex; gap: .5rem; margin-top: 1.35rem; }
.hero-ctas .btn { flex: 1 1 auto; padding-inline: .8rem; font-size: .9375rem; }

/* Only true claims, so the strip is short and quiet. */
.trust {
  list-style: none; margin-block: 0; padding-block: 1.1rem;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1rem;
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.3;
}
.trust li { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.trust svg {
  flex: none; width: 22px; height: 22px;
  fill: none; stroke: var(--gold-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.trust a { color: var(--maroon-ink); }

.shop { padding-block: 2rem 2.75rem; scroll-margin-top: 64px; }

.grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
/* Friendly bordered cards on a lighter panel, as in the old theme. */
.card {
  display: flex; flex-direction: column;
  padding: .45rem .45rem .6rem;
  border: 1px solid #ecdcc7; border-radius: 18px;
  background: var(--card);
}
.card > a { display: block; margin-bottom: .75rem; padding-inline: .1rem; text-decoration: none; }
.card > a > .card-art { margin-inline: -.1rem; }
.card > form, .card > .btn-card { margin-top: auto; }
.btn-card {
  min-height: 44px; padding-block: .55rem; font-size: var(--fs-sm);
  background: transparent; color: var(--maroon-ink); border-color: var(--maroon-ink);
}
.btn-card:hover { background: var(--maroon-ink); color: #fff; }
.card-art {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 13px;
  background: var(--butter);
  display: grid; place-items: center;
}
/* Cards and the product photo show the whole hamper, never a crop of it:
   one square frame, the photo contained in it on the warm panel tint. */
.card-art .shot, .product-art .shot {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
}
.bag-thumb .shot { width: 100%; height: 100%; object-fit: cover; }
.card-art .mono { width: 40%; opacity: .5; }
.card-name {
  display: block; margin-top: .65rem;
  font-weight: 600; line-height: 1.3;
}
.card a:hover .card-name { text-decoration: underline; }
.card-meta { display: block; margin-top: .2rem; color: var(--muted); font-size: var(--fs-sm); }
.card-price { display: block; color: var(--maroon-ink); font-size: var(--fs-md); font-weight: 700; }
.card.is-out .card-art { opacity: .6; }

.empty { color: var(--muted); }

/* Dark festive band: the corporate teaser on the home page. */
.band {
  position: relative;
  padding-block: 3rem 2.75rem;
  background: var(--maroon) var(--rangoli) center / 120px;
  color: var(--on-dark);
}
.band::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 24px;
  background: url('/static/toran.svg') center top / 56px 24px repeat-x;
}
.band-inner { display: grid; gap: 1.5rem; }
.band-art {
  aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 18px; border: 1px solid rgba(227, 176, 75, .55);
  background: var(--maroon-deep);
}
.band-art .shot { width: 100%; height: 100%; object-fit: cover; }
.band-art .mono { width: 30%; margin: auto; opacity: .5; }
.band .kicker { color: var(--gold); }
.band h2 { color: var(--on-dark); font-size: var(--fs-2xl); }
.band-copy p:not(.kicker) { max-width: 40ch; margin-top: .75rem; color: var(--on-dark-muted); }
.band-copy .btn { margin-top: 1rem; }

.block { padding-block: 2.25rem; border-top: 1px solid var(--rule); }
.block h2 { margin-bottom: .9rem; }

/* The story excerpt, in a warm panel. */
.about {
  margin-block: 2.5rem;
  padding-block: 2rem;
  text-align: center;
}
.about > * { max-width: 36rem; margin-inline: auto; }
.about h2 { margin-bottom: .75rem; }
.about-text { color: var(--ink); font-size: var(--fs-lg); line-height: 1.55; }
.about .section-link { margin-top: .5rem; }
.about::before {
  content: '' / ''; display: block; width: 72px; height: 24px; margin: 0 auto 1rem;
  background: url('/static/toran.svg') center / 56px 24px no-repeat;
}

.quotes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.quote blockquote { margin: 0; font-family: var(--display); font-size: var(--fs-lg); line-height: 1.45; }
.quote-by { margin-top: .4rem; color: var(--muted); font-size: var(--fs-sm); }

.signup-row { display: flex; gap: .5rem; max-width: 32rem; margin-top: .25rem; }
.signup-row input { flex: 1; min-width: 0; }
.signup .fine { margin-top: .75rem; color: var(--muted); font-size: var(--fs-sm); }
.flash { margin-bottom: .75rem; font-weight: 600; }
.flash-err { color: var(--error); }

/* --------------------------------------------------------- collections --- */

.festive-band {
  background: var(--maroon) var(--rangoli) center / 120px;
  color: var(--on-dark);
}
.banner { margin-top: -24px; padding-block: 2.25rem 2.25rem; }
.banner .breadcrumb ol { padding-top: 0; color: var(--on-dark-muted); }
.banner .breadcrumb [aria-current] { color: var(--on-dark); }
.banner .kicker { color: var(--gold); }
.banner h1 { color: var(--on-dark); font-size: clamp(2rem, 8vw, 3rem); }
.banner-line { max-width: 40ch; margin: .75rem 0 0; color: var(--on-dark-muted); font-size: var(--fs-lg); line-height: 1.45; }
.banner-note { margin: 1rem 0 0; color: var(--gold); font-size: var(--fs-sm); font-weight: 700; }
.banner .btn { margin-top: 1.25rem; }
.banner + .shop { padding-top: 1.75rem; }

.nudge {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem;
  margin-bottom: 2.5rem; padding-block: 1rem;
  border-block: 1px solid var(--rule);
}
.nudge p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.nudge strong { color: var(--ink); }

/* ----------------------------------------------------------- corporate --- */

.corp-section { padding-block: 2.5rem; }
.corp-section > h2 { margin-bottom: 1.25rem; }

.perks {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .75rem;
}
.perks li {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: 1rem 1.1rem;
  border: 1px solid #ecdcc7; border-radius: 18px;
  background: var(--card);
  font-weight: 600; line-height: 1.4;
}
.perks li::before {
  content: ''; flex: none; width: .55rem; height: .55rem; margin-top: .45rem;
  border-radius: 2px; background: var(--marigold);
  transform: rotate(45deg);
}
.perks-close { max-width: 46rem; margin: 1.25rem 0 0; color: var(--muted); }

.corp-how {
  padding-block: 2.5rem;
  background: var(--butter);
}
.corp-how h2 { margin-bottom: 1.25rem; }
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 1rem; }
.steps li {
  counter-increment: step;
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: .85rem;
}
.steps li::before {
  content: counter(step);
  grid-row: span 2;
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--maroon-ink); color: var(--on-dark);
  font-family: var(--display); font-weight: 600; font-size: var(--fs-lg);
  box-shadow: 0 0 0 3px var(--butter), 0 0 0 4px var(--gold);
}
.steps strong { align-self: end; font-size: var(--fs-md); }
.steps span { color: var(--muted); font-size: var(--fs-sm); }

.facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.facts li { display: grid; align-content: start; gap: .15rem; padding-block: .9rem; border-bottom: 1px solid var(--rule); }
.facts strong { font-size: var(--fs-sm); color: var(--maroon-ink); }

.enquire { max-width: 46rem; scroll-margin-top: var(--head-clear); }
.enquire .lede { margin-bottom: 1.25rem; }
.enquiry-form { display: grid; gap: 1.1rem; }
.enquiry-form .btn-block { margin-top: .25rem; }

.checks { margin: 0; padding: 0; border: 0; display: grid; gap: .25rem; }
.checks legend { margin-bottom: .35rem; padding: 0; }
.check {
  display: flex; align-items: center; gap: .75rem;
  min-height: var(--tap); padding: .4rem .75rem;
  border: 1px solid var(--field-line); border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
}
.check:has(input:checked) { border-color: var(--maroon-ink); background: #fdf2f0; }
.check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--maroon-ink); }
.check > span { display: flex; justify-content: space-between; gap: .75rem; width: 100%; }

/* ------------------------------------------------------------- product --- */

.product-page { padding-bottom: 1rem; }

.breadcrumb ol {
  list-style: none; margin: 0; padding: .25rem 0 .75rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem;
  font-size: var(--fs-sm); color: var(--muted);
}
.breadcrumb li { display: flex; align-items: center; min-width: 0; }
.breadcrumb li + li::before { content: '\203A'; margin-right: .35rem; }
.breadcrumb a { display: inline-flex; min-height: 32px; align-items: center; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70vw; }

.product-art {
  position: relative;
  aspect-ratio: 1;
  background: var(--butter);
  border-radius: 18px;
  display: grid; place-items: center;
  overflow: hidden;
}
.product-art .mono { width: 34%; opacity: .5; }

.product-info { padding-top: 1.25rem; }
.product-name { font-size: var(--fs-2xl); }
.product-sub { margin: .35rem 0 0; color: var(--muted); font-size: var(--fs-sm); }
.product-price {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem;
  margin: .6rem 0 0;
}
.price { color: var(--maroon-ink); font-size: var(--fs-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.pack { color: var(--muted); font-size: var(--fs-sm); }
.product-note { margin: .3rem 0 0; color: var(--muted); font-size: var(--fs-sm); }
.product-price + .product-note { margin-top: .5rem; }
.product-delivery { margin: .35rem 0 0; color: var(--muted); font-size: var(--fs-sm); }
.bulk-note { margin: .5rem 0 0; color: var(--muted); font-size: var(--fs-sm); }
.bulk-note a { color: var(--maroon-ink); font-weight: 700; }

.product-body {
  margin-top: 1.25rem; padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}

.buy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .75rem;
  margin-top: 1.5rem;
}
.buy .buy-status { grid-column: 1 / -1; }
.buy .btn { min-height: 52px; font-size: var(--fs-lg); }
.buy-alt, .form-help { margin: .75rem 0 0; color: var(--muted); font-size: var(--fs-sm); }
.buy-alt a, .form-help a { color: var(--maroon-ink); font-weight: 700; }

/* Quantity pill. The number field alone without a script; with one, bag.js
   reveals the minus and plus either side of it. */
.qty {
  display: flex; align-items: center;
  min-height: 52px;
  border: 1px solid var(--field-line); border-radius: 999px;
  background: #fff;
}
.qty button {
  width: 44px; height: 50px;
  border: 0; background: transparent; border-radius: 999px;
  font-size: 1.2rem; cursor: pointer;
}
.qty button[hidden] { display: none; }
.qty input[type=number] {
  width: 3.25rem; min-height: 0; height: 50px; padding: 0;
  border: 0; background: transparent; border-radius: 999px;
  text-align: center; font-weight: 600;
  -moz-appearance: textfield; appearance: textfield;
}
.qty:has(button:not([hidden])) input[type=number]::-webkit-inner-spin-button,
.qty:has(button:not([hidden])) input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qty:not(:has(button:not([hidden]))) input[type=number] { width: 5rem; }

.sold-out {
  margin-top: 1.5rem; padding: 1rem;
  border-radius: var(--radius);
  background: var(--surface);
}
.sold-out p { font-size: var(--fs-sm); }
.sold-out .btn { margin-top: .75rem; }
.product-info > .btn-block { margin-top: 1.5rem; }

/* Collapsible sections: a hairline between each, the chevron on the right. */
.sections { margin-top: 2rem; border-top: 1px solid var(--rule); }
.sections:empty { display: none; }
.sections details { border-bottom: 1px solid var(--rule); }
.sections summary {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px;
  font-weight: 600;
  list-style: none; cursor: pointer;
}
.sections summary::-webkit-details-marker { display: none; }
.sections summary::after,
.faq summary::after {
  content: '';
  flex: none;
  width: 8px; height: 8px; margin-left: 1rem; margin-right: 4px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .15s;
}
.sections details[open] > summary::after,
.faq details[open] > summary::after { transform: translateY(2px) rotate(-135deg); }

.section-body { padding-bottom: 1.25rem; }
.section-body h3 { font-size: var(--fs-sm); margin: 1rem 0 .25rem; }
.section-body h3:first-child { margin-top: 0; }
.product-body ul, .section-body ul, .prose ul { margin: 0 0 .75em; padding-left: 1.25rem; }
.product-body li, .section-body li, .prose li { margin-bottom: .3rem; padding-left: .15rem; }
.product-body li::marker, .section-body li::marker, .prose li::marker { color: var(--gold-ink); }

/* Explore more: a sideways row that snaps card by card. No script. */
.more { margin-top: 2.5rem; }
.more h2 { margin-bottom: 1rem; }
.more-row {
  list-style: none; margin: 0 calc(-1 * var(--gap)); padding: 0 var(--gap) .5rem;
  display: grid; grid-auto-flow: column; grid-auto-columns: 42%;
  gap: .75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gap);
  scrollbar-width: none;
}
.more-row::-webkit-scrollbar { display: none; }
.more-row li { scroll-snap-align: start; }
.more-row a { display: block; text-decoration: none; }
.more-row .card-name { font-size: var(--fs-sm); }
.more-row .card-meta { color: var(--maroon-ink); font-weight: 700; }

/* The phone buy bar: sticky, not fixed, so it rides the bottom of the screen
   while the product scrolls and settles in flow above the footer. */
.buybar {
  position: sticky; bottom: 0; z-index: 40;
  display: flex; align-items: center; gap: .75rem;
  margin-top: 2rem;
  padding: .6rem var(--gap) calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(251, 244, 234, .97);
  border-top: 1px solid var(--rule);
}
.buybar-thumb {
  flex: none; width: 48px; height: 48px;
  overflow: hidden; border-radius: 8px; background: var(--surface);
  display: grid; place-items: center;
}
.buybar-thumb .shot { width: 100%; height: 100%; object-fit: cover; }
.buybar-thumb .mono { width: 70%; opacity: .5; }
.buybar-price {
  display: flex; flex-direction: column; min-width: 0; margin-right: auto;
  line-height: 1.25;
  color: var(--maroon-ink);
  font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums;
}
.buybar-price .pack { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buybar .btn { flex: none; padding-inline: 1.5rem; }

/* Where the browser supports scroll-driven animation, the bar stays out of
   the way while the inline Add to bag is on screen, so one screen never shows
   two buy buttons. Elsewhere it is simply always there. Opacity only, no
   movement. */
@supports (animation-timeline: view()) {
  .product-page { timeline-scope: --buy; }
  .buy { view-timeline: --buy block; }
  .buybar {
    animation: buybar-reveal linear both;
    animation-timeline: --buy;
    animation-range: entry 0% exit 100%;
  }
}
@keyframes buybar-reveal {
  0%, 100% { opacity: 1; visibility: visible; }
  8%, 92% { opacity: 0; visibility: hidden; }
}

/* WhatsApp, one tap from anywhere. In the brand maroon with a gold ring,
   not WhatsApp green: the icon is what people recognise. */
/* WhatsApp's own green, because customers recognise the bubble at a glance.
   The glyph is white on the bright green; the text label sits on WhatsApp's
   dark green so it keeps 4.5:1 contrast. */
.wa-float {
  position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 45;
  display: flex; align-items: center; gap: .55rem;
  color: #fff; text-decoration: none;
}
.wa-float svg {
  box-sizing: content-box; width: 30px; height: 30px; padding: 13px;
  border-radius: 999px; background: #25d366;
  box-shadow: 0 10px 24px -8px rgba(7, 94, 84, .55);
  transition: transform .15s ease;
}
.wa-float:hover svg, .wa-float:focus-visible svg { transform: scale(1.06); }
.wa-label {
  display: none;
  padding: .45rem .8rem; border-radius: 999px;
  background: #075e54; font-size: .9rem; font-weight: 600;
  box-shadow: 0 8px 18px -10px rgba(7, 94, 84, .6);
}
@media (min-width: 900px) { .wa-label { display: inline-block; } }
@media (prefers-reduced-motion: reduce) { .wa-float svg { transition: none; } }
/* On phones, lift it clear of the buy bar and its button, and leave the
   footer enough room at the end that it covers no text. */
@media (max-width: 899px) {
  body:has(.buybar) .wa-float { bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
  body:has(.buybar) .foot { padding-bottom: calc(9.5rem + env(safe-area-inset-bottom)); }
}

/* --------------------------------------------------------------- forms --- */

input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=date], textarea, select {
  width: 100%;
  min-height: var(--tap);
  padding: .7rem .85rem;
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background: #fff;
  font-size: 1rem; /* 16px or more, or iOS zooms on focus */
  line-height: 1.3;
}
input[type=date] { -webkit-appearance: none; appearance: none; }
select {
  -webkit-appearance: none; appearance: none;
  padding-right: 2.5rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%233f260f' stroke-width='1.6'/%3E%3C/svg%3E") right .9rem center / 12px 8px no-repeat;
}
textarea { resize: vertical; min-height: 6rem; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
/* A field the browser scrolls to, for an anchor or a failed check, lands
   below the sticky nav with its label still in view. */
input, select, textarea { scroll-margin-top: calc(var(--head-clear) + 1.75rem); }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline-offset: 0; border-color: var(--ink); }

.field { display: grid; gap: .35rem; }
.field-label { font-size: var(--fs-sm); font-weight: 600; }
.field-row { display: grid; gap: 1rem; }

.buy-status:empty { display: none; }
.buy-status { margin: .75rem 0 0; font-size: var(--fs-sm); font-weight: 600; }
.buy-status-err { color: var(--error); }

/* ------------------------------------------------------ bag & checkout --- */

.bag-page { padding-block: .75rem 3rem; }
.bag-page h1 { margin-bottom: 1.25rem; }
.bag-page .lede { margin-bottom: 1.25rem; }

.bag-lines, .drawer-lines { list-style: none; margin: 0; padding: 0; }
.bag-line, .drawer-line {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: .25rem 1rem;
  align-items: start;
  padding-block: 1rem;
  border-bottom: 1px solid var(--rule);
}
.bag-line:first-child, .drawer-line:first-child { padding-top: 0; }
.bag-thumb {
  grid-row: span 2;
  width: 72px; height: 72px;
  overflow: hidden; border-radius: 8px;
  background: var(--surface);
  display: grid; place-items: center;
}
.bag-thumb .mono { width: 60%; opacity: .5; }
.bag-name { font-weight: 600; line-height: 1.3; text-decoration: none; }
.bag-name:hover { text-decoration: underline; }
.bag-meta { margin: .15rem 0 0; color: var(--muted); font-size: var(--fs-sm); }
.bag-line-total, .drawer-line-total { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bag-line-total { grid-column: 3; grid-row: 1; }
.bag-qty { grid-column: 2 / -1; }
.drawer-line .stepper-row { margin-top: .5rem; }

.stepper-row { display: flex; align-items: center; gap: .5rem; }
.stepper {
  display: inline-flex; align-items: center;
  border: 1px solid var(--field-line); border-radius: var(--radius);
  background: #fff;
}
.stepper button, .trash {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;
  border: 0; background: transparent;
  font-size: 1.2rem; cursor: pointer;
}
.stepper span { min-width: 1.75rem; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.trash { color: var(--muted); border-radius: var(--radius); }
.trash:hover { color: var(--ink); background: var(--surface); }
.trash svg { width: 20px; height: 20px; }

.more-link { margin: 1rem 0 0; font-size: var(--fs-sm); font-weight: 600; }

.bag-summary {
  margin-top: 2rem;
  padding: 1.25rem;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid #ecdcc7;
}
.bag-summary h2 { font-size: var(--fs-xl); margin-bottom: 1rem; }
.bag-hint { margin: .75rem 0 0; color: var(--muted); font-size: var(--fs-sm); }

.totals { margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--rule); }
.totals div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .3rem; }
.totals dt { color: var(--muted); }
.totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.totals-final { margin-top: .4rem; padding-top: .7rem !important; border-top: 1px solid var(--rule); }
.totals-final dt, .totals-final dd { color: var(--ink); font-size: var(--fs-lg); font-weight: 700; }
.bag-summary > .btn-block { margin-top: 1.25rem; }

/* On a phone the order summary comes first, so the total is known before
   the form; from 900 px it sits beside the form instead. */
.checkout-grid { display: flex; flex-direction: column; }
.checkout-grid .bag-summary { order: -1; margin: 0 0 1.75rem; }
.checkout-form { display: grid; gap: 1.1rem; }
.checkout-form .btn-block { margin-top: .5rem; }
.checkout-group { display: grid; gap: 1rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.checkout-group + .checkout-group { padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.checkout-group legend {
  float: left; width: 100%; /* lets the fieldset's grid gap space it like a field */
  padding: 0;
  font-family: var(--display); font-size: var(--fs-lg); font-weight: 600; color: var(--maroon-ink);
}
.checkout-group .bag-hint { margin: 0; }
.checkout-group textarea { min-height: 0; }
.field-row-pair { grid-template-columns: 1fr 1fr; }
.summary-lines { list-style: none; margin: 0; padding: 0; }
.summary-lines li { display: flex; justify-content: space-between; gap: 1rem; padding-block: .3rem; }
.summary-lines strong { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.factlist {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: .4rem 1rem; margin: 1rem 0 0;
}
.factlist dt { color: var(--muted); }
.factlist dd { margin: 0; overflow-wrap: anywhere; }

/* ---------------------------------------------------------- bag drawer --- */

.drawer { position: fixed; inset: 0; z-index: 200; }
.drawer-backdrop {
  position: absolute; inset: 0;
  background: rgba(40, 7, 17, .45);
  opacity: 0; transition: opacity .2s;
}
.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(420px, 100%);
  display: flex; flex-direction: column;
  background: var(--page-bg);
  transform: translateX(100%);
  transition: transform .25s cubic-bezier(.2, .7, .3, 1);
}
.drawer.is-open .drawer-backdrop { opacity: 1; }
.drawer.is-open .drawer-panel { transform: translateX(0); }
body.drawer-open { overflow: hidden; }

.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 60px; padding: 0 .5rem 0 var(--gap);
  border-bottom: 1px solid var(--rule);
  background: var(--maroon-deep) var(--rangoli) center / 120px;
  color: var(--on-dark);
}
.drawer-head h2 { color: var(--on-dark); font-size: var(--fs-xl); }
.drawer-close {
  width: var(--tap); height: var(--tap);
  border: 0; border-radius: var(--radius); background: transparent;
  font-size: 1.75rem; line-height: 1; cursor: pointer;
}
.drawer-close:hover { background: rgba(251, 244, 234, .12); }
.drawer-close:focus-visible { outline-color: var(--on-dark); }
.drawer-body { flex: 1; overflow-y: auto; padding: 1.25rem var(--gap); }
.drawer-empty { color: var(--muted); margin-bottom: 1.25rem; }
.drawer-line { grid-template-columns: 64px minmax(0, 1fr) auto; }
.drawer-line .bag-thumb { width: 64px; height: 64px; grid-row: auto; }
.drawer-more { display: inline-block; margin-top: 1rem; color: var(--maroon-ink); font-size: var(--fs-sm); font-weight: 700; }
.drawer-foot {
  padding: 1rem var(--gap) calc(1rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule);
  background: var(--card);
}
.drawer-subtotal {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: .75rem;
}
.drawer-subtotal strong { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.bag-nudge { margin: 0 0 .75rem; color: var(--maroon-ink); font-size: var(--fs-sm); font-weight: 600; }
.bag-summary .bag-nudge { margin: .75rem 0 0; }

/* --------------------------------------------------------------- pages --- */

.page-head { padding-block: .5rem 1rem; }
.page-head .lede { margin-top: .5rem; }

.prose { max-width: 68ch; padding-bottom: 3rem; }
.prose h2 { font-size: var(--fs-xl); margin: 2rem 0 .5rem; }
.prose .note {
  padding: 1rem; border-radius: var(--radius); background: var(--surface);
}
.prose .pending { color: var(--muted); font-style: italic; }
.prose .updated { margin-top: 2.5rem; color: var(--muted); font-size: var(--fs-sm); }

.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px; padding-block: .75rem;
  font-weight: 600; line-height: 1.35;
  list-style: none; cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq-body { padding-bottom: 1.25rem; }
.faq-more { margin-top: 2rem; }

.order-page, .notfound { padding-block: .75rem 3rem; max-width: 40rem; }
.order-page .lede, .notfound .lede { margin-top: .5rem; }
.order-card {
  margin-top: 1.5rem; padding: .5rem 1.25rem;
  border: 1px solid var(--rule); border-radius: var(--radius); background: #fff;
}
.order-row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-block: .75rem;
  border-bottom: 1px solid var(--rule);
}
.order-row:last-child { border-bottom: 0; }
.order-row span { color: var(--muted); }
.order-row strong { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.order-note { margin-top: 1rem; color: var(--muted); font-size: var(--fs-sm); }

/* -------------------------------------------------------------- footer --- */

.foot {
  position: relative;
  /* Room at the end for the floating WhatsApp button. */
  padding-block: 3rem calc(5.5rem + env(safe-area-inset-bottom));
  background: var(--maroon-deep) var(--rangoli) center / 120px;
  color: var(--on-dark);
  font-size: var(--fs-sm);
}
.foot::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 24px;
  background: url('/static/toran.svg') center top / 56px 24px repeat-x;
}
.foot-inner { display: grid; gap: 1.5rem; }
.foot .brand { margin: 0; color: var(--on-dark); }
.foot a:focus-visible { outline-color: var(--on-dark); }
.foot-contact, .foot-nav, .foot-links { list-style: none; margin: 0; padding: 0; }
.foot-tagline { margin: .4rem 0 0; color: var(--on-dark-muted); font-family: var(--display); font-size: var(--fs-md); }
.foot-contact { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin-top: .5rem; }
.foot-contact a { display: inline-flex; align-items: center; min-height: 40px; color: var(--gold); font-weight: 700; }
.foot-nav {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem;
  padding-block: 1rem;
  border-block: 1px solid rgba(227, 176, 75, .3);
}
.foot-nav a { display: flex; align-items: center; min-height: 40px; font-size: var(--fs-md); font-weight: 600; text-decoration: none; }
.foot-nav a:hover { text-decoration: underline; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.foot-links a { display: inline-flex; align-items: center; min-height: 36px; color: var(--on-dark-muted); }
.foot-legal p { margin: 0 0 .35rem; color: var(--on-dark-muted); font-size: var(--fs-xs); }

/* ------------------------------------------------------------- tablets --- */

@media (min-width: 640px) {
  :root { --gap: 2rem; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
  .field-row { grid-template-columns: 1fr 1fr; }
  .quotes { grid-template-columns: repeat(2, 1fr); }
  .trust { grid-template-columns: repeat(4, auto); justify-content: space-between; }
  .hero-ctas .btn { flex: 0 0 auto; padding-inline: 1.6rem; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .perks { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------------- desktop --- */

@media (min-width: 900px) {
  :root { --fs-2xl: 2.5rem; --fs-xl: 1.75rem; --head-clear: 96px; }
  .nav-inner { min-height: 72px; gap: 1.5rem; }
  .brand { font-size: 1.4rem; }
  .nav-links { display: flex; align-items: center; gap: 1.6rem; font-size: .9375rem; font-weight: 600; }
  .nav-links a { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; border-bottom: 2px solid transparent; }
  .nav-links a:hover { border-bottom-color: var(--rule); }
  .nav-links a[aria-current] { color: var(--maroon-ink); border-bottom-color: var(--marigold); }
  .nav-links .nav-corporate {
    min-height: 40px; padding-inline: 1rem;
    border: 1px solid var(--maroon-ink); border-radius: 999px;
    color: var(--maroon-ink);
  }
  .nav-links .nav-corporate:hover, .nav-links .nav-corporate[aria-current] { background: var(--maroon-ink); color: #fff; border-color: var(--maroon-ink); }
  .menu { display: none; }

  .hero-photo { min-height: 560px; }
  .hero-photo::before {
    background: linear-gradient(90deg,
      rgba(40, 7, 17, .95) 0%, rgba(58, 11, 24, .84) 34%, rgba(58, 11, 24, .25) 62%, rgba(58, 11, 24, 0) 80%);
  }
  .hero { align-items: center; }
  .hero-art .shot { object-position: 70% 45%; }
  .hero-copy { padding-block: 4rem; }
  .hero h1 { max-width: 16ch; }

  .shop { padding-block: 3rem 4rem; }
  .grid { gap: 1.5rem; }

  .band { padding-block: 4.5rem; }
  .band-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 3.5rem; }
  .band h2 { font-size: 2.75rem; }

  .about { margin-block: 3rem; }

  .banner { padding-block: 3rem; }
  .steps { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
  .perks { grid-template-columns: repeat(4, 1fr); }
  .facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 2rem; border-top: 0; }
  .facts li { border-top: 1px solid var(--rule); border-bottom: 0; }

  .product-page { padding-bottom: 3rem; }
  .breadcrumb ol { padding-block: .5rem 1.25rem; }
  .product {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 3.5rem;
    align-items: start;
  }
  .product-art { position: sticky; top: 92px; }
  .product-info { padding-top: 0; }
  .buy { grid-template-columns: auto minmax(0, 20rem); }
  .more { margin-top: 4rem; }
  .more-row { grid-auto-columns: calc((100% - 3 * .75rem) / 4); margin-inline: 0; padding-inline: 0; }
  .buybar { display: none; }

  .bag-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
  }
  .bag-summary { margin-top: 0; position: sticky; top: 92px; }
  .checkout-grid .bag-summary { order: 0; margin: 0; }
  .bag-line { grid-template-columns: 88px minmax(0, 1fr) auto auto; align-items: center; }
  .bag-thumb { width: 88px; height: 88px; grid-row: auto; }
  .bag-line .bag-thumb { width: 88px; height: 88px; }
  .bag-qty { grid-column: 3; grid-row: 1; }
  .bag-line-total { grid-column: 4; grid-row: 1; align-self: center; min-width: 5rem; text-align: right; }

  .foot-inner { grid-template-columns: 1.2fr 1.5fr 1fr; gap: 2rem 3rem; align-items: start; }
  .foot-nav { border: 0; padding: 0; }
  .foot-links { flex-direction: column; }
  .foot-legal { grid-column: 1 / -1; padding-top: 1.25rem; border-top: 1px solid rgba(227, 176, 75, .3); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  *:not(.buybar) { animation: none !important; }
}

/* ------------------------------------------------- corporate enquiries --- */

/* Where :has() is unsupported every field stays visible. */
.enquiry-form:has(input[name=kind][value=callback]:checked) .quote-only { display: none; }
.quote-only { display: grid; gap: 1.1rem; }
.check input[type=radio] { border-radius: 50%; }
.flash ul { margin: .35rem 0 0; padding-left: 1.2rem; }

/* Out of sight for people and screen readers, but not display:none, which
   bots skip. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.thanks .lede { font-family: var(--display); font-size: var(--fs-lg); color: var(--maroon-ink); }
.thanks .order-card { margin-top: 1.5rem; }
.thanks-note { margin-top: .75rem; color: var(--muted); font-size: var(--fs-sm); }