/* Sehaly storefront
   Brand guidelines v2: Soft Ivory background, Charcoal text and buttons, Muted
   Olive as the one accent (80% light / 15% charcoal / 5% olive). Archivo for
   headlines, Roboto for reading. One memorable element: the "Read the label"
   panel, drawn like a printed nutrition label. Everything else stays quiet. */

:root {
  /* Colour */
  --cr-white: #ffffff;
  --cr-ivory: #f5f2ec;      /* page background */
  --cr-stone: #dedcd5;      /* dividers, outlines */
  --cr-stone-1: #ebe8e1;    /* quiet bands */
  --cr-charcoal: #191919;   /* text, primary buttons */
  --cr-olive: #65705a;      /* accent: active filter, focus, help */
  --cr-olive-dark: #4f5946;
  --cr-gray-3: #8a8780;
  --cr-gray-4: #5f5c56;     /* secondary text: 6.2:1 on ivory */
  --cr-accent: var(--cr-olive);

  /* Type: one scale, body 16px on phones and 17px from tablets up */
  --f-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-body: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-lead: 18px;
  --fs-h4: 18px;
  --fs-h3: 22px;
  --fs-h2: clamp(28px, 3.4vw, 42px);
  --fs-h1: clamp(40px, 5.6vw, 72px);
  --lh-body: 1.6;
  --t-l-2: 400 14px / 1.35 var(--f-body); /* small label text (toast, basket) */

  /* Space: 4 px grid */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --s-section: clamp(56px, 8vw, 104px);
  --s-contain: clamp(16px, 4vw, 40px);
  --s-max: 1280px;
  --s-header: 64px;

  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;

  --e-out: cubic-bezier(0.22, 1, 0.36, 1);
  --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-1: 0.2s var(--e-out);
  --t-2: 0.35s var(--e-out);

  --z-header: 100;
  --z-drawer: 130;
}
@media (min-width: 768px) { :root { --fs-base: 17px; --fs-lead: 19px; --fs-h4: 19px; --fs-h3: 24px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--s-header) + 16px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}
:root { color-scheme: light; } /* the brand is a light ivory-and-charcoal look */
body {
  margin: 0;
  font: 400 var(--fs-base) / var(--lh-body) var(--f-body);
  color: var(--cr-charcoal);
  background: var(--cr-ivory);
  overflow-x: clip; /* clip, not hidden, so the sticky header keeps working */
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
::selection { color: var(--cr-white); background: var(--cr-olive); }
:focus-visible { outline: 3px solid var(--cr-olive); outline-offset: 2px; border-radius: 2px; }
[hidden] { display: none !important; }

.contain { width: min(100% - var(--s-contain) * 2, var(--s-max)); margin-inline: auto; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  padding: 12px 16px; border-radius: var(--radius); background: var(--cr-charcoal); color: var(--cr-white);
  font: 600 15px/1 var(--f-body); text-decoration: none;
}
.skip:focus { top: 12px; }

/* Headings: sentence case, bold, tight */
.h1, .h2, .h3, .h4 { font-family: var(--f-display); letter-spacing: -0.015em; text-wrap: balance; }
.h2 { font-size: var(--fs-h2); font-weight: 800; line-height: 1.05; letter-spacing: -0.025em; }
.h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.15; }
.h4 { font-size: var(--fs-h4); font-weight: 700; line-height: 1.25; }

.link { color: var(--cr-charcoal); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; min-height: 44px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px; border-radius: var(--radius);
  font: 600 16px/1.2 var(--f-body); text-decoration: none; text-align: center;
  transition: background-color var(--t-1), color var(--t-1), box-shadow var(--t-1);
}
.btn--dark { background: var(--cr-charcoal); color: var(--cr-white); }
.btn--dark:hover { background: var(--cr-olive-dark); }
.btn--line { background: transparent; color: var(--cr-charcoal); box-shadow: inset 0 0 0 1.5px var(--cr-charcoal); }
.btn--line:hover { background: var(--cr-charcoal); color: var(--cr-white); }
.btn--olive { background: var(--cr-olive); color: var(--cr-white); }
.btn--olive:hover { background: var(--cr-olive-dark); }
.btn--light { background: var(--cr-ivory); color: var(--cr-charcoal); }
.btn--block { display: flex; width: 100%; }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--cr-ivory); border-bottom: 1px solid transparent;
  transition: border-color var(--t-1);
}
.header.is-scrolled { border-bottom-color: var(--cr-stone); }
.header__inner { height: var(--s-header); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-5); }
.header__logo { display: flex; align-items: center; min-height: 44px; }
.header__logo img { height: 24px; width: auto; }
.nav { display: flex; gap: var(--sp-2); justify-self: start; }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: 12px;
  font: 500 16px/1 var(--f-body); text-decoration: none; border-radius: var(--radius-sm);
}
.nav a:hover { background: var(--cr-stone-1); }
.header__tools { display: flex; align-items: center; gap: 4px; }
.icon-btn {
  position: relative; width: 44px; height: 44px; flex: none;
  display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius);
}
.icon-btn:hover { background: var(--cr-stone-1); }
.icon-btn svg { width: 22px; height: 22px; }
.menu-btn { display: none; margin-left: -10px; }
.cart-count {
  position: absolute; top: 3px; right: 1px;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--cr-charcoal); color: var(--cr-white);
  font: 700 12px/20px var(--f-body); text-align: center;
  transform: scale(0); transition: transform var(--t-1);
}
.cart-count.has-items { transform: scale(1); }
.cart-count.bump { animation: bump 0.4s var(--e-out); }
@keyframes bump { 40% { transform: scale(1.3); } }
@media (max-width: 900px) {
  .header__inner { grid-template-columns: 44px 1fr auto; gap: var(--sp-2); }
  .menu-btn { display: inline-flex; }
  .nav { display: none; }
  .header__logo { justify-self: center; }
  .header__logo img { height: 21px; }
}
/* Checkout keeps its own three-part header: back link, logo, basket */
.header__inner--checkout { grid-template-columns: 1fr auto 1fr; }
.header__inner--checkout .header__left { display: flex; align-items: center; }
.header__inner--checkout .header__right { display: flex; justify-content: flex-end; }

/* ---------- Mobile menu ---------- */
.drawer { position: fixed; inset: 0; z-index: var(--z-drawer); visibility: hidden; }
.drawer.is-open { visibility: visible; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(25, 25, 25, 0.4); opacity: 0; transition: opacity var(--t-2); }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel {
  position: absolute; inset: 0 auto 0 0; width: min(380px, 86vw);
  background: var(--cr-ivory); padding: 12px var(--s-contain) 32px;
  transform: translateX(-100%); transition: transform var(--t-2);
  display: flex; flex-direction: column; gap: var(--sp-5); overflow-y: auto;
}
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; min-height: 52px; }
.drawer__head img { height: 21px; width: auto; }
.drawer__nav a {
  display: flex; align-items: center; min-height: 56px; border-bottom: 1px solid var(--cr-stone);
  font: 700 20px/1.2 var(--f-display); text-decoration: none;
}

/* ---------- Hero ----------
   The owner's product scene (assets/hero, cropped so it carries no text) fills
   the right of the hero behind live HTML text. Its left and bottom edges fade
   into the page colour, which is matched to the photo's own background. */
.hero {
  --hero-bg: #f2ece1; /* the photo's left-edge colour */
  position: relative; overflow: hidden;
  background: linear-gradient(90deg, #f5f2ec 0%, var(--hero-bg) 45%);
  /* Tall enough for the photo at its natural shape (1072 x 724) plus the header */
  min-height: max(560px, calc(min(58vw, 1060px) / 1.48 + var(--s-header)));
  display: flex; align-items: center;
}
/* Anchored bottom-right at its natural shape, starting after the text column */
.hero__bg { position: absolute; right: 0; bottom: 0; width: min(58vw, 1060px); }
.hero__bg img {
  display: block; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%), linear-gradient(180deg, transparent 0%, #000 10%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 16%), linear-gradient(180deg, transparent 0%, #000 10%, #000 86%, transparent 100%);
  mask-composite: intersect;
}
.hero__inner { position: relative; z-index: 1; width: min(100% - var(--s-contain) * 2, var(--s-max)); padding-block: clamp(32px, 4vw, 64px); }
.hero__copy { display: grid; gap: var(--sp-5); justify-items: start; max-width: min(40vw, 620px); }
.hero__eyebrow { font: 700 14px/1.3 var(--f-display); letter-spacing: 0.26em; text-transform: uppercase; color: var(--cr-olive-dark); }
.hero__title { font: 800 clamp(44px, 5.6vw, 92px) / 0.96 var(--f-display); letter-spacing: -0.045em; text-wrap: balance; }
.hero__text { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; color: var(--cr-gray-4); max-width: 34ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }
.hero__actions .btn { min-height: 56px; padding-inline: 26px; font-size: 17px; font-weight: 500; }
.btn__arrow { width: 18px; height: 18px; flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .btn__arrow { transition: transform var(--t-1); }
  .btn:hover .btn__arrow { transform: translateX(3px); }
}
/* Tablets and phones: headline and buttons first, the scene below at full width */
@media (max-width: 960px) {
  .hero { min-height: 0; display: flex; flex-direction: column; align-items: stretch; background: linear-gradient(180deg, #f5f2ec 0%, var(--hero-bg) 60%); }
  .hero__inner { order: 1; padding-block: 28px 8px; }
  .hero__copy { max-width: 100%; }
  .hero__title { max-width: 12ch; }
  .hero__bg { order: 2; position: relative; inset: auto; width: 100%; max-width: 760px; align-self: center; }
  .hero__bg img {
    height: auto; aspect-ratio: 1072 / 724; object-fit: cover;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 88%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 88%, transparent 100%);
  }
}
@media (max-width: 600px) {
  .hero__copy { gap: var(--sp-4); }
  .hero__eyebrow { font-size: 13px; letter-spacing: 0.18em; }
  .hero__title { font-size: clamp(40px, 11.5vw, 56px); }
  .hero__text { font-size: 17px; }
  /* Both buttons stay side by side and visible */
  .hero__actions { width: 100%; flex-wrap: nowrap; gap: var(--sp-2); margin-top: 0; }
  .hero__actions .btn { flex: 1 1 0; min-width: 0; min-height: 52px; padding-inline: 10px; font-size: 15px; gap: 6px; }
  .btn__arrow { width: 16px; height: 16px; }
}

/* ---------- Benefits strip: each item links to the part of the page it describes ---------- */
.benefits { padding-bottom: var(--s-section); background: linear-gradient(180deg, #f2ece1 0%, var(--cr-ivory) 100%); }

.benefits__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--cr-stone); }
.benefits__list li + li { box-shadow: inset 1px 0 0 var(--cr-stone); }
.benefits__link {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-4);
  min-height: 88px; padding: 20px var(--sp-4); text-decoration: none;
  font: 400 clamp(17px, 1.5vw, 21px) / 1.3 var(--f-body); color: var(--cr-charcoal);
  transition: background-color var(--t-1);
}
.benefits__link svg { width: 34px; height: 34px; flex: none; color: var(--cr-gray-4); transition: color var(--t-1); }
.benefits__link:hover { background: rgba(255, 255, 255, 0.5); }
.benefits__link:hover span { text-decoration: underline; text-underline-offset: 4px; }
.benefits__link:hover svg { color: var(--cr-olive); }
@media (max-width: 760px) {
  .benefits__list { grid-template-columns: 1fr; }
  .benefits__list li + li { box-shadow: inset 0 1px 0 var(--cr-stone); }
  .benefits__link { justify-content: flex-start; min-height: 64px; padding: 12px 0; }
}

/* ---------- Section heading ---------- */
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-5); margin-bottom: var(--sp-5); }
.section-head__count { color: var(--cr-gray-4); font-size: var(--fs-sm); }
.section-head--stack { display: grid; justify-content: start; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.section-head--stack p { color: var(--cr-gray-4); max-width: 60ch; }

/* ---------- Shop ---------- */
.shop { padding-bottom: var(--s-section); }
.filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.filter {
  min-height: 44px; padding: 10px 18px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--cr-stone); background: var(--cr-white);
  font: 500 15px/1.2 var(--f-body); transition: background-color var(--t-1), color var(--t-1), box-shadow var(--t-1);
}
.filter:hover { box-shadow: inset 0 0 0 1px var(--cr-charcoal); }
.filter[aria-pressed="true"] { background: var(--cr-charcoal); color: var(--cr-white); box-shadow: none; }
.empty-note { padding: var(--sp-5) 0; color: var(--cr-gray-4); }

.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-7) var(--sp-5); }
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-3); } }
@media (max-width: 359px) { .grid { grid-template-columns: 1fr; } }

/* Cards: same photo tile and spacing for every product; the button sits at the
   bottom so cards side by side line up even when names wrap differently. */
.card { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.card__media {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--cr-white);
}
.card__media .product-img { width: 76%; height: 76%; }
.card__media .product-img--wide { width: 90%; height: auto; }
.card__body { display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; }
.card__name { font: 700 var(--fs-h4) / 1.25 var(--f-display); letter-spacing: -0.01em; }
.card__name a { display: flex; align-items: center; min-height: 44px; text-decoration: none; }
.card__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.card__meta { font-size: var(--fs-sm); line-height: 1.45; color: var(--cr-gray-4); }
.card__brand { font: 500 var(--fs-sm) / 1.2 var(--f-body); color: var(--cr-gray-4); }
.price { font: 700 18px/1 var(--f-body); font-variant-numeric: tabular-nums; margin-top: auto; padding-top: var(--sp-2); }
.add-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 10px 14px; margin-top: var(--sp-2); border-radius: var(--radius);
  background: var(--cr-charcoal); color: var(--cr-white); font: 600 15px/1.2 var(--f-body);
  text-decoration: none; transition: background-color var(--t-1);
}
.add-btn:hover { background: var(--cr-olive-dark); }
.add-btn.is-added { background: var(--cr-olive); }
@media (max-width: 767px) {
  .card { gap: var(--sp-3); }
  .card__name { font-size: 16px; }
  .add-btn { font-size: 14px; padding-inline: 8px; }
}

/* Product photos: trimmed supplier shots on white */
.product-img { display: block; object-fit: contain; }
.badge {
  position: absolute; top: 10px; left: 10px; z-index: 1; white-space: nowrap;
  padding: 6px 9px; border-radius: var(--radius-sm);
  background: var(--cr-charcoal); color: var(--cr-white); font: 500 13px/1 var(--f-body);
}

/* ---------- Read the label ---------- */
.labels { padding-block: var(--s-section); background: var(--cr-stone-1); }
.reader { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.reader__list { display: grid; gap: 2px; position: sticky; top: calc(var(--s-header) + 16px); }
.reader__tab {
  display: grid; gap: 2px; align-content: center; text-align: left; min-height: 56px; padding: 10px 14px 10px 16px;
  border-radius: var(--radius); border-left: 3px solid transparent;
  transition: background-color var(--t-1), border-color var(--t-1);
}
.reader__tab:hover { background: rgba(255, 255, 255, 0.6); }
.reader__tab[aria-selected="true"] { background: var(--cr-white); border-left-color: var(--cr-charcoal); }
.reader__tab-name { font: 700 16px/1.25 var(--f-display); }
.reader__tab-variant { font-size: var(--fs-sm); line-height: 1.35; color: var(--cr-gray-4); }

/* The printed-label panel */
.plabel {
  background: var(--cr-white); border: 2px solid var(--cr-charcoal); border-radius: var(--radius-sm);
  padding: clamp(18px, 3vw, 32px); display: grid; gap: var(--sp-3);
}
.plabel__top { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--sp-4); align-items: center; padding-bottom: var(--sp-4); border-bottom: 10px solid var(--cr-charcoal); }
.plabel__media { width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; }
.plabel__media .product-img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.plabel__brand { font-size: var(--fs-sm); color: var(--cr-gray-4); }
.plabel__name { font: 800 clamp(24px, 2.6vw, 32px) / 1.05 var(--f-display); letter-spacing: -0.02em; }
.plabel__variant { font-size: var(--fs-sm); color: var(--cr-gray-4); margin-top: 2px; }
.plabel__h { font: 800 17px/1.2 var(--f-display); padding-top: var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 3px solid var(--cr-charcoal); }
.plabel__ing { line-height: 1.7; max-width: 70ch; }
.plabel__ing b, .plabel__allergens b { font-weight: 700; }
.plabel__note { font-size: var(--fs-sm); line-height: 1.5; color: var(--cr-gray-4); }
.plabel__allergens { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--cr-ivory); font-size: 15px; }
.plabel__roles div { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: var(--sp-2) var(--sp-5); padding: 12px 0; border-bottom: 1px solid var(--cr-stone); }
.plabel__roles div:last-child { border-bottom: 0; }
.plabel__roles dt { font-weight: 700; font-size: 15px; line-height: 1.45; }
.plabel__roles dd { font-size: 15px; line-height: 1.5; color: var(--cr-gray-4); }
.plabel__link { justify-self: start; margin-top: var(--sp-3); }
@media (max-width: 860px) {
  .reader { grid-template-columns: 1fr; }
  /* The selector wraps into a two-column grid of buttons: no sideways scrolling */
  .reader__list { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .reader__tab { border-left: 0; box-shadow: inset 0 0 0 1px var(--cr-stone); background: var(--cr-white); min-height: 52px; padding: 8px 12px; }
  .reader__tab[aria-selected="true"] { background: var(--cr-charcoal); color: var(--cr-white); box-shadow: none; }
  .reader__tab[aria-selected="true"] .reader__tab-variant { color: #d6d3cc; }
  .reader__tab-name { font-size: 15px; }
  .reader__tab-variant { font-size: 13px; }
  .plabel__roles div { grid-template-columns: 1fr; gap: 2px; }
  .plabel__link { justify-self: stretch; }
}
@media (max-width: 380px) { .plabel__top { grid-template-columns: 64px minmax(0, 1fr); } .plabel__media { width: 64px; height: 64px; } }

/* ---------- Help choosing ---------- */
.help { padding-block: var(--s-section); }
.help__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-5) var(--sp-7); align-items: center;
  padding: clamp(28px, 4vw, 48px); border-radius: var(--radius-lg); background: var(--cr-olive); color: var(--cr-white);
}
.help__inner p { margin-top: var(--sp-3); max-width: 52ch; color: #eef0ea; }
.help .btn--olive { background: var(--cr-white); color: var(--cr-charcoal); }
.help .btn--olive:hover { background: var(--cr-ivory); }
@media (max-width: 760px) { .help__inner { grid-template-columns: 1fr; } .help .btn { width: 100%; } }

/* ---------- Delivery and payment ---------- */
.info { padding-bottom: var(--s-section); }
.info .h2 { margin-bottom: var(--sp-6); }
.info__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-6); }
.info__item { display: grid; gap: var(--sp-3); align-content: start; padding-top: var(--sp-4); border-top: 2px solid var(--cr-charcoal); }
.info__item p { color: var(--cr-gray-4); }
.info__item p b { color: var(--cr-charcoal); }
.info__rows li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); padding: 10px 0; border-bottom: 1px solid var(--cr-stone); }
.info__rows li span:first-child { display: grid; gap: 2px; color: var(--cr-gray-4); font-size: 15px; }
.info__rows li b { color: var(--cr-charcoal); font-size: var(--fs-base); }
.info__fee { font-weight: 700; font-variant-numeric: tabular-nums; }
.info__note { font-size: var(--fs-sm); }
.info__contact { display: grid; gap: 2px; }
.info__contact a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; text-underline-offset: 3px; }
@media (max-width: 860px) { .info__grid { grid-template-columns: 1fr; } }

/* ---------- About ---------- */
.about { padding-block: var(--s-section); border-top: 1px solid var(--cr-stone); }
.about__inner { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--sp-5) var(--sp-7); }
.about__text { display: grid; gap: var(--sp-4); max-width: 62ch; }
.about__text p:first-child { font-size: var(--fs-lead); }
.about__text p + p { color: var(--cr-gray-4); }
@media (max-width: 760px) { .about__inner { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.footer { background: var(--cr-charcoal); color: #e9e6df; padding-top: var(--sp-7); }
.footer__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--sp-6); }
.footer__logo { height: 22px; width: auto; }
.footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.footer__h { font: 700 15px/1.2 var(--f-display); color: var(--cr-white); margin-bottom: var(--sp-2); }
.footer__cols a { display: inline-flex; align-items: center; min-height: 44px; color: #cfccc5; font-size: 15px; text-decoration: none; overflow-wrap: anywhere; }
.footer__cols a:hover { color: var(--cr-white); text-decoration: underline; text-underline-offset: 3px; }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-6); padding-block: var(--sp-5); border-top: 1px solid #3a3a3a; font-size: var(--fs-sm); color: #b3b0a9; }
.footer__legal a { color: #cfccc5; text-underline-offset: 3px; display: inline-flex; min-height: 44px; align-items: center; }
.footer :focus-visible { outline-color: #c9d1bd; }
@media (max-width: 860px) { .footer__top { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__cols > div:first-child { grid-column: 1 / -1; }
  .footer__cols > div:first-child ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-5); }
}

/* ---------- Search ---------- */
.search { width: min(560px, calc(100vw - 24px)); max-height: min(640px, calc(100dvh - 48px)); margin: 12vh auto auto; padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--cr-ivory); color: var(--cr-charcoal); box-shadow: 0 24px 60px -20px rgba(25, 25, 25, 0.45); }
.search::backdrop { background: rgba(25, 25, 25, 0.45); }
.search__box { display: grid; gap: var(--sp-3); padding: var(--sp-4) var(--sp-4) var(--sp-5); }
.search__head { display: flex; justify-content: space-between; align-items: center; }
.search__title { font: 700 18px/1.2 var(--f-display); }
.search__input { width: 100%; min-height: 52px; padding: 12px 16px; border: 1.5px solid var(--cr-charcoal); border-radius: var(--radius); background: var(--cr-white); font: 400 17px/1.3 var(--f-body); color: inherit; }
.search__input:focus { outline: 3px solid var(--cr-olive); outline-offset: 1px; }
.search__status { min-height: 1.4em; font-size: var(--fs-sm); color: var(--cr-gray-4); }
.search__results { display: grid; gap: 2px; overflow-y: auto; max-height: 50vh; }
.search__hit { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--sp-3); align-items: center; min-height: 64px; padding: 6px 8px; border-radius: var(--radius); text-decoration: none; }
.search__hit:hover, .search__hit:focus-visible { background: var(--cr-white); }
.search__img { width: 56px; height: 56px; border-radius: var(--radius-sm); background: var(--cr-white); display: flex; align-items: center; justify-content: center; }
.search__img .product-img { max-width: 80%; max-height: 80%; width: auto; height: auto; }
.search__name { display: block; font: 700 16px/1.25 var(--f-display); }
.search__meta { display: block; font-size: var(--fs-sm); color: var(--cr-gray-4); }
@media (max-width: 600px) { .search { margin-top: 12px; } }

/* ---------- Product page ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 16px; font-size: var(--fs-sm); color: var(--cr-gray-4); }
.crumbs a { color: var(--cr-charcoal); text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 32px; }
.crumbs span { display: inline-flex; align-items: center; }
.pdp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; padding-bottom: var(--s-section); }
.pdp__media {
  position: sticky; top: calc(var(--s-header) + 16px);
  aspect-ratio: 1; border-radius: var(--radius-lg); background: var(--cr-white);
  display: flex; align-items: center; justify-content: center;
}
.pdp__media .product-img { width: 78%; height: 78%; }
.pdp__media .product-img--wide { width: 92%; height: auto; }
.pdp__body { display: grid; gap: var(--sp-4); }
.pdp__title { font: 800 clamp(32px, 3.6vw, 48px) / 1.05 var(--f-display); letter-spacing: -0.025em; }
.pdp__variant { color: var(--cr-gray-4); }
.pdp__price { font: 800 30px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.pdp__summary { font-size: var(--fs-lead); line-height: 1.5; max-width: 46ch; }
.pdp__assure { font-size: var(--fs-sm); color: var(--cr-gray-4); margin-top: calc(var(--sp-2) * -1); }
.options { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.options legend { font-weight: 600; margin-bottom: var(--sp-2); }
.option { display: inline-flex; gap: 10px; align-items: center; min-height: 44px; padding: 10px 14px; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--cr-stone); background: var(--cr-white); text-decoration: none; }
.option span { color: var(--cr-gray-4); }
.option[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--cr-charcoal); font-weight: 600; }
.pdp__ship-rows li { display: flex; justify-content: space-between; gap: var(--sp-4); padding: 8px 0; border-bottom: 1px solid var(--cr-stone); color: var(--cr-charcoal); }
.pdp__facts { display: grid; gap: var(--sp-2); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--cr-stone); background: var(--cr-white); font-size: var(--fs-sm); }
.facts { border-top: 2px solid var(--cr-charcoal); }
.facts div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); padding: 12px 0; border-bottom: 1px solid var(--cr-stone); }
.facts dt { font-weight: 500; }
.facts dd { font: 800 22px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.why { display: grid; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-radius: var(--radius); background: var(--cr-white); }
.why__title { font: 700 17px/1.2 var(--f-display); }
.why__list { display: grid; gap: var(--sp-2); }
.why__list li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.5; }
.why__list li::before { content: ""; position: absolute; left: 2px; top: 0.5em; width: 10px; height: 5px; border-left: 2px solid var(--cr-olive); border-bottom: 2px solid var(--cr-olive); transform: rotate(-45deg); }
.why__link { justify-self: start; min-height: 44px; }
.accs { border-top: 2px solid var(--cr-charcoal); }
.acc { border-bottom: 1px solid var(--cr-stone); }
.acc summary { display: flex; justify-content: space-between; align-items: center; min-height: 56px; cursor: pointer; list-style: none; font: 700 17px/1.2 var(--f-display); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font: 400 26px/1 var(--f-body); transition: transform var(--t-1); }
.acc[open] summary::after { transform: rotate(45deg); }
.acc__body { padding-bottom: var(--sp-5); display: grid; gap: var(--sp-3); color: var(--cr-gray-4); max-width: 62ch; }
.acc__body a { color: var(--cr-charcoal); text-underline-offset: 3px; }
.acc__body b { color: var(--cr-charcoal); }
.inside { padding-block: clamp(48px, 7vw, 96px); border-top: 1px solid var(--cr-stone); margin-bottom: var(--s-section); }
.inside .h2 { margin-bottom: var(--sp-6); }
.inside__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.inside__ing { display: grid; gap: var(--sp-3); }
.inside__text { line-height: 1.7; max-width: 64ch; }
.inside__text b { font-weight: 700; }
.inside__allergens { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--cr-white); font-size: 15px; }
.inside__allergens b { font-weight: 700; }
.inside__serving { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-7); padding-top: var(--sp-4); border-top: 1px solid var(--cr-stone); }
.inside__serving dt { font-size: var(--fs-sm); color: var(--cr-gray-4); margin-bottom: 4px; }
.inside__serving dd { font: 700 18px/1.2 var(--f-display); }
.inside__charts { display: grid; gap: var(--sp-6); min-width: 0; }
.roles { margin-top: var(--sp-3); display: grid; gap: var(--sp-2); }
.roles__list div { padding: 12px 0; border-top: 1px solid var(--cr-stone); }
.roles__list dt { font-weight: 700; font-size: 15px; }
.roles__list dd { margin-top: 2px; font-size: 15px; line-height: 1.5; color: var(--cr-gray-4); }
.label { padding: 18px 20px 16px; background: var(--cr-white); border: 2px solid var(--cr-charcoal); border-radius: var(--radius-sm); }
.label figcaption { margin-bottom: 10px; }
.label__scroll { overflow-x: auto; }
.label table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.label thead th { padding: 0 0 8px; text-align: left; font-weight: 700; border-bottom: 8px solid var(--cr-charcoal); white-space: nowrap; }
.label tbody th, .label td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--cr-stone); text-align: left; vertical-align: top; }
.label tbody th { font-weight: 500; }
.label td { white-space: nowrap; }
.label tbody tr:last-child > * { border-bottom: 0; }
.label__sub th { padding-left: 14px; font-weight: 400; color: var(--cr-gray-4); }
.label__group th { padding-top: 14px; font-weight: 700; border-bottom: 3px solid var(--cr-charcoal); }
.label__note { font-size: var(--fs-sm); line-height: 1.5; color: var(--cr-gray-4); }
.related { padding-bottom: var(--s-section); }
.related .h2 { margin-bottom: var(--sp-6); }
.empty { padding-block: var(--s-section); display: grid; justify-items: start; gap: var(--sp-4); max-width: 52ch; }
.empty p { color: var(--cr-gray-4); }
@media (max-width: 860px) {
  .pdp { grid-template-columns: 1fr; gap: var(--sp-5); }
  .pdp__media { position: relative; top: auto; aspect-ratio: 1.15; }
  .inside__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .label { padding: 14px 14px 12px; }
  .label table { font-size: 14px; }
  .label td, .label thead th { white-space: normal; }
}

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 140;
  translate: -50% 0; padding: 14px 20px; border-radius: var(--radius-sm);
  background: var(--cr-charcoal); color: var(--cr-white); font: var(--t-l-2);
  width: max-content; max-width: calc(100vw - 32px); text-align: center;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity var(--t-1), transform var(--t-1);
}
.toast.is-visible { opacity: 1; transform: none; }

/* ---------- Basket + checkout ----------
   Utility style supplied for the buying flow: Inter, cool greys,
   green for success and red for errors. Scoped to .bag and .co. */
.bag, .co, .toast {
  --co-black: #303233;
  --co-black-hover: #171819;
  --co-gray: #5f6b73;
  --co-gray-04: #f9fafa;
  --co-gray-08: #f4f5f5;
  --co-gray-12: #edefef;
  --co-gray-30: #d3d7d9;
  --co-green: #008750;
  --co-green-bg: #e6f8f5;
  --co-red: #b63842;
  --co-red-bg: #fbf3f4;
  --co-font: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --co-radius: 8px;
  font-family: var(--co-font);
}
.co, .bag__panel { color: var(--co-black); }
.co-muted { color: var(--co-gray); }

/* Buttons */
.co-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 20px; border-radius: var(--co-radius);
  font: 600 15px/1.2 var(--co-font); text-align: center;
  border: 1px solid transparent; transition: background-color var(--t-1), border-color var(--t-1), color var(--t-1);
}
.co-btn--primary { background: var(--co-black); color: #fff; }
.co-btn--primary:hover { background: var(--co-black-hover); }
.co-btn--primary.is-done { background: var(--co-green); }
.co-btn--secondary { background: #fff; border-color: var(--co-gray-30); color: var(--co-black); }
.co-btn--secondary:hover { border-color: var(--co-black); }
.co-btn--ghost { background: transparent; color: var(--co-black); text-decoration: underline; text-underline-offset: 3px; }
.co-btn--ghost:hover { background: var(--co-gray-08); }
.co-btn--lg { min-height: 54px; font-size: 16px; }
.co-link { font: 500 14px/1.2 var(--co-font); color: var(--co-black); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; padding-inline: 4px; }

/* Basket drawer */
.bag { position: fixed; inset: 0; z-index: var(--z-drawer); visibility: hidden; }
.bag.is-open { visibility: visible; }
.bag__scrim { position: absolute; inset: 0; background: rgba(48, 50, 51, 0.45); opacity: 0; transition: opacity var(--t-2); }
.bag.is-open .bag__scrim { opacity: 1; }
.bag__panel {
  position: absolute; inset: 0 0 0 auto; width: min(440px, 100vw);
  display: flex; flex-direction: column; background: #fff;
  transform: translateX(100%); transition: transform var(--t-2);
}
.bag.is-open .bag__panel { transform: none; }
.bag__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 12px 20px; border-bottom: 1px solid var(--co-gray-12);
}
.bag__head h2 { font: 600 18px/1.2 var(--co-font); }
.bag__icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--co-radius); }
.bag__icon:hover { background: var(--co-gray-08); }
.bag__icon svg { width: 22px; height: 22px; }
.bag__body { flex: 1; overflow-y: auto; padding: 8px 20px; overscroll-behavior: contain; }
.bag__foot {
  display: grid; gap: 10px; padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--co-gray-12); background: var(--co-gray-04);
}
.bag__foot:empty { display: none; }
.bag__empty { display: grid; justify-items: start; gap: 10px; padding-block: 32px; font: 400 15px/1.5 var(--co-font); color: var(--co-gray); }
.bag__empty-title { font: 600 18px/1.3 var(--co-font); color: var(--co-black); }
@media (prefers-reduced-motion: reduce) { .bag__panel, .bag__scrim { transition: none; } }

/* Line items (basket + summary) */
.lines { display: grid; }
.line { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: start; padding-block: 16px; border-bottom: 1px solid var(--co-gray-12); }
.line:last-child { border-bottom: 0; }
.line__img { width: 72px; height: 72px; border-radius: var(--co-radius); background: var(--co-gray-08); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.line__img .product-img { width: 80%; height: 80%; }
.line__img .product-img--wide { width: 90%; height: auto; }
.line__info { display: grid; gap: 4px; min-width: 0; }
.line__name { font: 600 15px/1.3 var(--co-font); }
.line__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.line__meta { font: 400 13px/1.4 var(--co-font); color: var(--co-gray); }
.line__total { font: 600 15px/1.3 var(--co-font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.line__actions { display: flex; align-items: center; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--co-gray-30); border-radius: var(--co-radius); }
.qty button { width: 40px; height: 40px; font: 500 18px/1 var(--co-font); color: var(--co-black); border-radius: var(--co-radius); }
.qty button:hover:not(:disabled) { background: var(--co-gray-08); }
.qty button:disabled { color: var(--co-gray-30); cursor: not-allowed; }
.qty span { min-width: 28px; text-align: center; font: 600 15px/1 var(--co-font); font-variant-numeric: tabular-nums; }
.line__remove { font: 400 13px/1 var(--co-font); color: var(--co-gray); text-decoration: underline; text-underline-offset: 3px; min-height: 40px; }
.line__remove:hover { color: var(--co-red); }

/* Totals */
.co-rows { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--co-gray-12); }
.co-row { display: flex; justify-content: space-between; gap: 16px; font: 400 15px/1.3 var(--co-font); font-variant-numeric: tabular-nums; }
.co-row--total { font-weight: 700; font-size: 17px; }
.co-rows .co-row--total { padding-top: 10px; border-top: 1px solid var(--co-gray-12); }
.co-hint { font: 400 13px/1.45 var(--co-font); color: var(--co-gray); }
.co-row--discount { color: var(--co-green); font-weight: 500; }
/* Buy 1 get 1 half price nudge: neutral while one item short, green once applied */
.co-offer { padding: 10px 12px; border-radius: var(--co-radius); background: var(--co-gray-08); color: var(--co-black); font: 500 13px/1.4 var(--co-font); }
.co-offer.is-on { background: var(--co-green-bg); color: var(--co-green); }
.co-summary .co-offer { margin-top: -4px; }
.co-place { display: grid; gap: 8px; }
.co-place .co-btn:disabled { opacity: 0.7; cursor: progress; }
.co-error { padding: 12px 14px; border-radius: var(--co-radius); background: var(--co-red-bg); color: var(--co-red); font: 400 14px/1.45 var(--co-font); }
.co-place .co-hint { text-align: center; }
.co-select { user-select: all; white-space: nowrap; }

/* Promo code */
.co-promo { padding-top: 0; }
.co-promo__row { display: flex; gap: 8px; }
.co-promo__row input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 0.04em; }
.co-promo__row input::placeholder { text-transform: none; letter-spacing: 0; }
.co-promo__row .co-btn { flex: none; }
.co-promo--applied { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.co-promo__applied {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-radius: var(--co-radius); background: var(--co-green-bg); color: var(--co-green);
  font: 400 14px/1.3 var(--co-font);
}
.co-promo__applied svg { width: 16px; height: 16px; flex: none; }
.co-promo__applied b { font-weight: 700; letter-spacing: 0.04em; }

/* Checkout page */
.co { padding-block: 32px var(--s-section); }
.co-top { display: grid; gap: 6px; margin-bottom: 24px; }
.co-step { font: 500 13px/1 var(--co-font); color: var(--co-gray); }
.co-h1 { font: 700 clamp(28px, 4vw, 40px)/1.1 var(--co-font); letter-spacing: -0.02em; }
.co-h2 { font: 600 18px/1.3 var(--co-font); }
.co-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: start; }
.co-form { display: grid; gap: 16px; }
.co-card { display: grid; gap: 16px; padding: clamp(18px, 3vw, 28px); background: #fff; border: 1px solid var(--co-gray-12); border-radius: 12px; }
.co-card--quiet { background: var(--co-gray-04); }
.co-card--quiet p { font: 400 15px/1.5 var(--co-font); }
.co-card__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.co-summary { position: sticky; top: calc(var(--s-header) + 20px + env(safe-area-inset-top, 0px)); }
.co-summary .lines { max-height: 50vh; overflow-y: auto; }

.co-form .co-card { grid-template-columns: 1fr 1fr; column-gap: 12px; }
.co-form .co-card > * { grid-column: 1 / -1; }
.co-form .co-card > .co-field--half { grid-column: auto; }
@media (max-width: 380px) { .co-form .co-card > .co-field--half { grid-column: 1 / -1; } }
.co-field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.co-field label { font: 500 14px/1.3 var(--co-font); }
.co-field input, .co-field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  font: 400 16px/1.4 var(--co-font); color: var(--co-black);
  background: #fff; border: 1px solid var(--co-gray-30); border-radius: var(--co-radius);
  transition: border-color var(--t-1), box-shadow var(--t-1);
}
.co-field textarea { resize: vertical; }
.co-field input:hover, .co-field textarea:hover { border-color: var(--co-gray); }
.co-field input:focus, .co-field textarea:focus { outline: none; border-color: var(--co-black); box-shadow: 0 0 0 3px rgba(48, 50, 51, 0.12); }
.co-field__msg { font: 400 13px/1.4 var(--co-font); color: var(--co-gray); min-height: 0; }
.co-field__msg:empty { display: none; }
.co-field__msg.is-ok { color: var(--co-green); }
.co-field.is-error input, .co-field.is-error textarea { border-color: var(--co-red); background: var(--co-red-bg); }
.co-field.is-error .co-field__msg { color: var(--co-red); }

.co-empty { display: grid; justify-items: start; gap: 14px; max-width: 52ch; font: 400 16px/1.5 var(--co-font); color: var(--co-gray); }
.co-empty .co-h1 { color: var(--co-black); }

.co-send { max-width: 720px; }
.co-send > * + * { margin-top: 16px; }
.co-banner { display: flex; gap: 14px; padding: 16px 18px; border-radius: 12px; background: var(--co-green-bg); color: var(--co-black); font: 400 15px/1.5 var(--co-font); }
.co-banner svg { flex: none; width: 24px; height: 24px; color: var(--co-green); margin-top: 1px; }
.co-banner__title { font-weight: 600; color: var(--co-green); margin-bottom: 2px; }
.co-msg {
  margin: 0; padding: 16px; max-height: 360px; overflow: auto;
  font: 400 14px/1.6 var(--co-font); white-space: pre-wrap; word-break: break-word;
  background: var(--co-gray-04); border: 1px solid var(--co-gray-12); border-radius: var(--co-radius);
  user-select: all;
}
.co-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.co-howto { margin: 0; padding-left: 20px; display: grid; gap: 6px; font: 400 14px/1.5 var(--co-font); color: var(--co-gray); }
.co-after { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-top: 8px; }
.co-after p { font: 400 14px/1.4 var(--co-font); }
.co-ok { font: 500 14px/1.4 var(--co-font); color: var(--co-green); }

@media (max-width: 860px) {
  .co-grid { grid-template-columns: 1fr; }
  .co-summary { position: static; order: -1; }
  .co-summary .lines { max-height: none; }
}
@media (max-width: 480px) {
  .co-actions { grid-template-columns: 1fr; }
  .line { grid-template-columns: 60px 1fr auto; gap: 12px; }
  .line__img { width: 60px; height: 60px; }
}

/* Toast: now carries a "View basket" shortcut, so it takes taps while visible */
.toast { display: flex; align-items: center; gap: 14px; font-family: var(--co-font); }
.toast.is-visible { pointer-events: auto; }
.toast button { font: 600 14px/1 var(--co-font); color: #fff; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; min-height: 32px; }

/* ---------- Checkout: delivery options ---------- */
.co-ship { grid-column: 1 / -1; margin: 4px 0 0; padding: 0; border: 0; display: grid; gap: 8px; min-width: 0; }
.co-ship legend { font: 500 14px/1.3 var(--co-font); margin-bottom: 6px; padding: 0; }
.co-ship__opt {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 14px; border: 1px solid var(--co-gray-30); border-radius: var(--co-radius); cursor: pointer;
  transition: border-color var(--t-1), background-color var(--t-1);
}
.co-ship__opt:hover { border-color: var(--co-gray); }
.co-ship__opt:has(input:checked) { border-color: var(--co-black); background: var(--co-gray-04); box-shadow: inset 0 0 0 1px var(--co-black); }
.co-ship__opt input { width: 18px; height: 18px; margin: 0; accent-color: var(--co-black); }
.co-ship__text { display: grid; gap: 2px; font: 400 14px/1.35 var(--co-font); color: var(--co-gray); }
.co-ship__text b { font-weight: 600; font-size: 15px; color: var(--co-black); }
.co-ship__fee { font: 600 15px/1 var(--co-font); font-variant-numeric: tabular-nums; }
.co-card--quiet p b { color: var(--co-black); font-weight: 600; }

/* ---------- Motion ----------
   Only in answer to an action: pressing, adding to the basket, opening the menu,
   confirming an order. No scroll-in effects, no autoplay. Off under reduced motion. */
a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
@media (prefers-reduced-motion: no-preference) {
  .btn:active, .add-btn:active, .icon-btn:active, .filter:active { transform: scale(0.97); }
  .add-btn.is-added { animation: pop 0.35s var(--e-spring); }
  @keyframes pop { 40% { transform: scale(1.05); } }
  /* Add to basket: the product photo flies into the basket icon */
  .fly { position: fixed; z-index: 150; margin: 0; pointer-events: none; object-fit: contain; border-radius: 8px; will-change: transform, opacity; }
  .cart-btn.is-catching svg { animation: catch 0.45s var(--e-spring); }
  @keyframes catch { 35% { transform: scale(1.2) rotate(-6deg); } 70% { transform: scale(0.96); } }
  /* Checkout confirmation: the tick draws itself */
  .co-banner svg circle { transform-origin: center; animation: ring-in 0.45s var(--e-spring) both; }
  .co-banner svg path { stroke-dasharray: 16; stroke-dashoffset: 16; animation: tick 0.4s 0.25s var(--e-out) forwards; }
  @keyframes ring-in { from { transform: scale(0.4); opacity: 0; } }
  @keyframes tick { to { stroke-dashoffset: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Live stock (from the admin, once the owner switches it on) ---------- */
.badge--stock { background: var(--cr-white); color: var(--cr-charcoal); box-shadow: inset 0 0 0 1px var(--cr-charcoal); }
.badge--out { background: var(--cr-gray-4); color: var(--cr-white); }
.add-btn:disabled, .btn:disabled { background: var(--cr-stone); color: var(--cr-gray-4); cursor: not-allowed; }
.stock-note { font: 500 15px/1.4 var(--f-body); color: var(--cr-olive-dark); }
.stock-note--out { color: var(--cr-gray-4); }
.line__stock { margin: 4px 0 0; font: 500 13px/1.3 var(--f-body); color: var(--cr-olive-dark); }

/* Phones: the "added to basket" message appears under the header, so it never
   covers an Add to basket button near the bottom of the screen. */
@media (max-width: 767px) {
  .toast { top: calc(var(--s-header) + 8px + env(safe-area-inset-top, 0px)); bottom: auto; transform: translateY(-12px); }
  .toast.is-visible { transform: none; }
}

/* Help: WhatsApp first, Instagram second (white outline on olive) */
.help__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.btn--ghost-light { background: transparent; color: var(--cr-white); box-shadow: inset 0 0 0 1.5px var(--cr-white); }
.btn--ghost-light:hover { background: rgba(255, 255, 255, 0.12); }
.help :focus-visible { outline-color: var(--cr-white); }
@media (max-width: 760px) { .help__actions { display: grid; } .help__actions .btn { width: 100%; } }
.info__sub { margin-top: var(--sp-3); }

/* Homepage: the hero runs under a see-through header; it turns solid on scroll */
.has-hero .header:not(.is-scrolled) { background: transparent; }
.has-hero .hero { margin-top: calc(var(--s-header) * -1); padding-top: var(--s-header); }

/* "Pre-order" tag on product photos (where the old offer badge was) */
.badge--pre { background: var(--cr-olive); color: var(--cr-white); }
/* Tags sit side by side in one row (Pre-order, Free delivery, live stock), wrapping on narrow cards */
.badges { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.badges:empty { display: none; }
.badges .badge { position: static; }
.pdp__media .badges { top: 16px; left: 16px; right: 16px; gap: 8px; }
.pdp__media .badge { top: 16px; left: 16px; padding: 8px 12px; font-size: 14px; }