/* ============================================================================
   Otto storefront

   Direction: painted shopfront. Kampala trade signage — enamel colour blocks,
   sign-painter display type, prices shouted rather than whispered. Product
   photography sits on white; colour is reserved for wayfinding and for the
   price flag, which is the one loud thing on the page.
   ========================================================================== */

:root {
  /* Ink and ground */
  --ink:        #14201b;
  --ink-soft:   #3d4a44;
  --muted:      #6b7772;
  --faint:      #9aa39e;
  --paper:      #ffffff;
  --wash:       #f3f5f1;
  --line:       #e3e7e1;
  --line-firm:  #cdd4cd;

  /* Brand, taken from the logo.
     The logo green (#349c38) is only 3.5:1 against white, so white text on it
     fails contrast. It stays the identity colour — the logo, highlights, the
     underline on the aisle bar — while a darker shade of the same hue does the
     UI work where legibility is the point. */
  --leaf-bright:#349c38;
  --leaf:       #237a28;
  --leaf-deep:  #17591c;
  --leaf-soft:  #e8f4e9;

  /* The signage accent. Used for price flags and nothing decorative. */
  --flag:       #f2b705;
  --flag-deep:  #7a5c00;
  --flag-soft:  #fdf3d4;

  --alert:      #a32b2b;
  --alert-soft: #fbeceb;

  --display: "Bricolage", "Trebuchet MS", system-ui, sans-serif;
  --body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius:   10px;
  --radius-s: 6px;
  --shadow:   0 1px 2px rgba(20,32,27,.06), 0 8px 24px -12px rgba(20,32,27,.18);
  --shadow-lift: 0 2px 6px rgba(20,32,27,.08), 0 18px 36px -16px rgba(20,32,27,.28);
  --rail: 1180px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 .5rem;
}
h1 { font-size: clamp(1.75rem, 4vw, 2.6rem); }
h2 { font-size: clamp(1.3rem, 2.6vw, 1.75rem); }
h3 { font-size: 1.1rem; }

a { color: var(--leaf-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.wrap { max-width: var(--rail); margin: 0 auto; padding: 0 1rem; }

/* Small uppercase label, used for section eyebrows and field labels. */
.eyebrow {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.num { font-variant-numeric: tabular-nums; }

/* Decorative inline icons. They carry a width and height in the markup, but a
   flex row would still squash them, so pin the basis here. Any context that
   wants a different size overrides it — a CSS rule beats the attribute. */
svg[aria-hidden="true"] { flex: 0 0 auto; }
.sub { color: var(--muted); font-size: 13px; }
.stack > * + * { margin-top: 1rem; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--leaf);
  outline-offset: 2px;
}

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

.topline {
  background: var(--ink);
  color: #cfd8d3;
  font-size: 12.5px;
}
.topline .wrap { display: flex; gap: 1.25rem; align-items: center; min-height: 34px; }
.topline a { color: #fff; }
.topline .spacer { margin-left: auto; }

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.masthead .wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 68px;
}

.brand { display: flex; align-items: center; flex: 0 0 auto; }
.brand:hover { text-decoration: none; }
.brand img { height: 38px; width: auto; display: block; }
.brand .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;
}

/* Search is the primary way into 900+ products, so it takes the space. */
.hunt { flex: 1 1 auto; max-width: 620px; position: relative; }
.hunt input {
  width: 100%;
  height: 44px;
  padding: 0 3rem 0 .95rem;
  border: 1.5px solid var(--line-firm);
  border-radius: var(--radius);
  font: inherit;
  background: var(--wash);
}
.hunt input:focus { background: #fff; border-color: var(--leaf); outline: none; }
.hunt button {
  position: absolute; right: 4px; top: 4px;
  height: 36px; width: 40px;
  border: 0; border-radius: var(--radius-s);
  background: var(--leaf); color: #fff;
  display: grid; place-items: center; cursor: pointer;
}
.hunt button:hover { background: var(--leaf-deep); }

.head-acts { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.head-act {
  display: flex; align-items: center; gap: .45rem;
  padding: .45rem .6rem;
  border-radius: var(--radius-s);
  color: var(--ink);
  font-size: 13px; font-weight: 500;
  position: relative;
}
.head-act:hover { background: var(--wash); text-decoration: none; }
.head-act svg { width: 21px; height: 21px; stroke-width: 1.6; }
.head-act .tally {
  position: absolute; top: 2px; left: 26px;
  min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--flag); color: var(--ink);
  border-radius: 9px;
  font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center;
}

/* ----------------------------------------------------------- category rail */

.aisles { background: var(--leaf); }
/* No overflow here: a scroll container clips the drawer that hangs below it,
   which is why the subcategory menu never appeared. The bar is allowed to
   scroll only on small screens, where the drawer is not used. */
.aisles .wrap { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.aisles .wrap::-webkit-scrollbar { display: none; }
.aisle {
  color: #dbeae4;
  padding: .65rem .85rem;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.aisle:hover, .aisle.on { color: #fff; text-decoration: none; border-bottom-color: var(--flag); }
.aisles { border-bottom: 3px solid var(--leaf-bright); }
.aisle:first-child { padding-left: 0; }
.aisle::after {
  content: "";
  display: inline-block;
  margin-left: .4rem;
  border: 3px solid transparent;
  border-top-color: currentColor;
  transform: translateY(2px);
  opacity: .6;
}
.aisle.no-subs::after { display: none; }

/* The menu that drops from an aisle: subcategories grouped by their heading. */
.aisle-wrap { position: relative; display: flex; }
.drawer {
  position: absolute; left: 0; top: 100%; z-index: 39;
  /* The pointer has to cross from the link into the panel. Without a bridge
     the menu closes in the gap and feels broken. */
  margin-top: 0;
  min-width: 540px; max-width: 760px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-lift);
  padding: 1rem 1.1rem;
  display: none;
  columns: 3;
  column-gap: 1.5rem;
}
.aisle-wrap:hover .drawer, .aisle-wrap:focus-within .drawer { display: block; }
.aisle-wrap:hover .aisle { color: #fff; border-bottom-color: var(--flag); }
.drawer-foot {
  columns: 1;
  border-top: 1px solid var(--line);
  margin-top: .3rem; padding-top: .6rem;
  font-size: 13px; font-weight: 600;
}
.drawer-group { break-inside: avoid; margin-bottom: .9rem; }
.drawer-group .eyebrow { display: block; margin-bottom: .3rem; color: var(--leaf-deep); }
.drawer-group a { display: block; padding: .12rem 0; font-size: 13.5px; color: var(--ink-soft); }
.drawer-group a:hover { color: var(--leaf); }

/* -------------------------------------------------------------- price flag */
/* The signature element. A painted tag that juts off the corner of a card,
   carrying the one number the shopper came for. */

.flag {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  background: var(--flag);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  padding: .3rem .6rem;
  border-radius: var(--radius-s) var(--radius-s) var(--radius-s) 0;
  position: relative;
}
.flag::after {
  /* the folded corner that makes it read as a tag rather than a box */
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  border-width: 6px 7px 0 0;
  border-style: solid;
  border-color: var(--flag-deep) transparent transparent transparent;
  opacity: .55;
}
.flag .cur { font-family: var(--body); font-size: .72em; font-weight: 600; opacity: .75; }
.flag.lg { font-size: 1.9rem; padding: .45rem .8rem; }
.flag.sm { font-size: .95rem; }
.flag.plain { background: transparent; padding-left: 0; }
.flag.plain::after { display: none; }

.was { color: var(--muted); text-decoration: line-through; font-size: .85em; }
.save {
  display: inline-block;
  background: var(--leaf-soft); color: var(--leaf-deep);
  font-size: 11.5px; font-weight: 600;
  padding: .12rem .45rem; border-radius: 3px;
}

/* ------------------------------------------------------------------- cards */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  position: relative;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); border-color: var(--line-firm); }
.card-shot {
  position: relative;          /* same reason as .gallery-main above */
  aspect-ratio: 1 / 1;
  background: #fff;
  display: block;
  overflow: hidden;
}
.card-shot img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;          /* the whole product, never cropped */
  object-position: center;
  padding: .6rem;
}
.card-body { padding: .7rem .8rem .85rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.card-name {
  font-size: 13.5px; font-weight: 500; color: var(--ink);
  line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-name:hover { color: var(--leaf); text-decoration: none; }
.card-brand { font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }

.card-save {
  position: absolute; top: .5rem; right: .5rem; z-index: 2;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  color: var(--muted);
}
.card-save:hover { color: var(--alert); border-color: var(--alert); }
.card-save.on { color: var(--alert); border-color: var(--alert); background: var(--alert-soft); }
.card-save svg { width: 17px; height: 17px; }

.ribbon {
  position: absolute; top: .5rem; left: 0; z-index: 2;
  background: var(--alert); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: .2rem .5rem .2rem .55rem;
  border-radius: 0 3px 3px 0;
}

/* ------------------------------------------------------------------ blocks */

.band { padding: 2.25rem 0; }
.band.wash { background: var(--wash); }
.band-head { display: flex; align-items: flex-end; gap: 1rem; margin-bottom: 1.1rem; }
.band-head h2 { margin: 0; }
.band-head .more { margin-left: auto; font-size: 13.5px; font-weight: 500; white-space: nowrap; }

/* Hero: the slide carousel framed like a painted board. */
.board {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink);
  position: relative;
  aspect-ratio: 21 / 9;
}
.board img { width: 100%; height: 100%; object-fit: cover; }
.board-slide { display: none; }
.board-slide.on { display: block; }
.board-dots { position: absolute; left: 1rem; bottom: 1rem; display: flex; gap: .35rem; }
.board-dots button {
  width: 26px; height: 4px; border: 0; padding: 0;
  background: rgba(255,255,255,.45); cursor: pointer; border-radius: 2px;
}
.board-dots button.on { background: var(--flag); }
.board-cap {
  position: absolute; left: 0; bottom: 0; right: 0;
  padding: 2.5rem 1rem .9rem;
  background: linear-gradient(to top, rgba(20,32,27,.85), transparent);
  color: #fff;
  font-family: var(--display); font-weight: 700; font-size: 1.2rem;
}

/* Category tiles — colour-blocked like painted shop boards. */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: .75rem; }
.tile {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .9rem;
  text-align: center;
  color: var(--ink);
  transition: border-color .15s ease, transform .15s ease;
}
.tile:hover { text-decoration: none; border-color: var(--leaf); transform: translateY(-2px); }
.tile img { height: 62px; width: auto; margin: 0 auto .55rem; object-fit: contain; }
.tile-name { font-size: 13px; font-weight: 500; }
.tile-count { font-size: 11px; color: var(--faint); }

/* Promise strip: what the shop actually guarantees, in its own words. */
.promises { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.promise { background: #fff; padding: 1rem 1.1rem; display: flex; gap: .75rem; align-items: flex-start; }
.promise svg { width: 22px; height: 22px; color: var(--leaf); flex: 0 0 auto; margin-top: 2px; }
.promise strong { display: block; font-size: 13.5px; }
.promise span { font-size: 12.5px; color: var(--muted); }

/* ----------------------------------------------------------------- listing */

.split { display: grid; grid-template-columns: 232px 1fr; gap: 1.5rem; align-items: start; }
/* Layout variants live here rather than in an inline style: an inline
   grid-template-columns cannot be undone by a media query, so a page written
   that way stays two columns on a phone no matter what. */
.split.aside      { grid-template-columns: 1fr 320px; }
.split.aside-wide { grid-template-columns: 1fr 360px; }
.split.even       { grid-template-columns: 1fr 1fr; }
.filters {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  position: sticky; top: 84px;
}
.filter-set + .filter-set { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.filter-set .eyebrow { display: block; margin-bottom: .5rem; }
.filter-set a { display: block; font-size: 13.5px; padding: .16rem 0; color: var(--ink-soft); }
.filter-set a.on { color: var(--leaf); font-weight: 600; }
.filter-scroll { max-height: 260px; overflow-y: auto; }

.listing-bar {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin-bottom: 1rem; padding-bottom: .85rem; border-bottom: 1px solid var(--line);
}
.listing-bar .count { font-size: 13.5px; color: var(--muted); }
.listing-bar select {
  margin-left: auto; height: 36px; border: 1px solid var(--line-firm);
  border-radius: var(--radius-s); padding: 0 .5rem; font: inherit; font-size: 13.5px; background: #fff;
}

.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--leaf-soft); color: var(--leaf-deep);
  border: 1px solid transparent;
  border-radius: 999px; padding: .2rem .6rem;
  font-size: 12.5px; font-weight: 500;
}
.chip a { color: inherit; font-weight: 700; line-height: 1; }

.pager { display: flex; gap: .3rem; justify-content: center; margin-top: 1.75rem; flex-wrap: wrap; }
.pager a, .pager span {
  min-width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  font-size: 13.5px; color: var(--ink);
}
.pager a:hover { border-color: var(--leaf); text-decoration: none; }
.pager .on { background: var(--leaf); border-color: var(--leaf); color: #fff; font-weight: 600; }
.pager .gap { border: 0; }

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

.product { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
/* The frame is a positioned block, not a centred grid.
   In a grid with place-items:center the image is not stretched, so its
   height:100% has no definite box to resolve against, it falls back to its
   natural size, and overflow:hidden clips the result — which looks exactly
   like a crop. Pinning the image to the frame's edges gives object-fit a
   box it can actually work with. */
.gallery-main {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.gallery-main img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1.1rem;
}
.gallery-strip { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.gallery-strip { justify-content: center; }
.gallery-strip button {
  position: relative;
  width: 62px; height: 62px; padding: 2px;
  background: #fff; border: 2px solid var(--line); border-radius: var(--radius-s);
  cursor: pointer; overflow: hidden;
}
.gallery-strip button:hover { border-color: var(--line-firm); }
.gallery-strip button.on { border-color: var(--leaf); }
.gallery-strip img { width: 100%; height: 100%; object-fit: contain; }

.crumbs { font-size: 12.5px; color: var(--muted); margin-bottom: .75rem; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--leaf); }

.picker { margin: 1rem 0; }
.picker .eyebrow { display: block; margin-bottom: .4rem; }
.opts { display: flex; flex-wrap: wrap; gap: .4rem; }
.opt {
  border: 1.5px solid var(--line-firm);
  background: #fff;
  border-radius: var(--radius-s);
  padding: .35rem .7rem;
  font-size: 13.5px;
  cursor: pointer;
}
.opt:hover { border-color: var(--ink-soft); }
.opt.on { border-color: var(--leaf); background: var(--leaf-soft); color: var(--leaf-deep); font-weight: 600; }

.qty { display: inline-flex; align-items: stretch; border: 1.5px solid var(--line-firm); border-radius: var(--radius-s); overflow: hidden; }
.qty button { width: 38px; border: 0; background: var(--wash); font-size: 18px; cursor: pointer; color: var(--ink); }
.qty button:hover { background: var(--line); }
.qty input { width: 52px; border: 0; text-align: center; font: inherit; font-variant-numeric: tabular-nums; }

.spec { width: 100%; border-collapse: collapse; font-size: 14px; }
.spec th, .spec td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec th { width: 34%; color: var(--muted); font-weight: 500; }

.prose { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); }
.prose h2, .prose h3, .prose h4 { font-family: var(--display); margin: 1.2rem 0 .4rem; color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.2rem; }
.prose img { border-radius: var(--radius-s); margin: .5rem 0; }
.prose table { width: 100%; border-collapse: collapse; margin: .75rem 0; }
.prose th, .prose td { border: 1px solid var(--line); padding: .45rem .6rem; text-align: left; }
.prose th { background: var(--wash); }

/* ------------------------------------------------------------------ panels */

.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.panel-head { padding: .85rem 1.1rem; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: .6rem; }
.panel-head h2, .panel-head h3 { margin: 0; font-size: 1rem; }
.panel-body { padding: 1.1rem; }
.panel-body.tight { padding: .75rem 1.1rem; }

.rows { width: 100%; border-collapse: collapse; }
.rows th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: .6rem .7rem; border-bottom: 1px solid var(--line); }
.rows td { padding: .8rem .7rem; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 14px; }
.rows tr:last-child td { border-bottom: 0; }

.mini-shot { width: 56px; height: 56px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-s); object-fit: contain; padding: 2px; }

.summary { position: sticky; top: 84px; }
.sum-line { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; font-size: 14px; }
.sum-line.total { border-top: 1px solid var(--line); margin-top: .4rem; padding-top: .7rem; font-family: var(--display); font-weight: 800; font-size: 1.15rem; }
.sum-line .num { font-variant-numeric: tabular-nums; }

/* Bootstrap also defines .btn, .btn-lg, .btn-sm, .card and .card-body. This
   file is linked after it, and every property below is set explicitly rather
   than relying on a Bootstrap custom property, so these definitions win. */

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-s);
  padding: .6rem 1.1rem;
  font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn-leaf { background: var(--leaf); color: #fff; }
.btn-leaf:hover { background: var(--leaf-deep); color: #fff; }
.btn-flag { background: var(--flag); color: var(--ink); }
.btn-flag:hover { background: #dda800; color: var(--ink); }
.btn-line { background: #fff; border-color: var(--line-firm); color: var(--ink); }
.btn-line:hover { border-color: var(--ink); }
.btn-quiet { background: transparent; color: var(--ink-soft); }
.btn-quiet:hover { background: var(--wash); }
.btn-block { width: 100%; }
.btn-lg { padding: .8rem 1.4rem; font-size: 15px; }
.btn-sm { padding: .35rem .7rem; font-size: 13px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

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

.field { margin-bottom: .9rem; }
.field label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: .3rem; color: var(--ink-soft); }
.input, .field input, .field select, .field textarea {
  width: 100%;
  padding: .6rem .75rem;
  border: 1.5px solid var(--line-firm);
  border-radius: var(--radius-s);
  font: inherit; font-size: 14.5px;
  background: #fff;
  color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--leaf); box-shadow: 0 0 0 3px var(--leaf-soft);
}
.field .hint { font-size: 12px; color: var(--muted); margin-top: .25rem; }
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }

.notice {
  display: flex; gap: .6rem;
  border-radius: var(--radius-s);
  padding: .7rem .9rem;
  font-size: 14px;
  margin-bottom: 1rem;
  border-left: 3px solid var(--leaf);
  background: var(--leaf-soft);
  color: var(--leaf-deep);
}
.notice.warn { border-left-color: var(--flag); background: var(--flag-soft); color: var(--flag-deep); }
.notice.bad  { border-left-color: var(--alert); background: var(--alert-soft); color: var(--alert); }

/* Choice cards, used for pickup versus delivery at checkout. */
.choice { display: grid; gap: .6rem; }
.choice label {
  display: flex; gap: .7rem; align-items: flex-start;
  border: 1.5px solid var(--line-firm); border-radius: var(--radius);
  padding: .85rem 1rem; cursor: pointer;
}
.choice label:hover { border-color: var(--ink-soft); }
.choice input:checked + div { color: var(--leaf-deep); }
.choice label:has(input:checked) { border-color: var(--leaf); background: var(--leaf-soft); }
.choice strong { display: block; font-size: 14.5px; }
.choice span { font-size: 13px; color: var(--muted); }

.empty { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.empty h2 { color: var(--ink); }
.empty svg { width: 46px; height: 46px; color: var(--line-firm); margin-bottom: .75rem; }

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

.foot { background: var(--ink); color: #b9c4be; margin-top: 3rem; padding: 2.5rem 0 1.5rem; font-size: 13.5px; }
.foot h4 { color: #fff; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; font-family: var(--body); font-weight: 600; margin-bottom: .7rem; }
.foot a { color: #b9c4be; display: block; padding: .15rem 0; }
.foot a:hover { color: #fff; }
.foot svg { width: 15px; height: 15px; vertical-align: -2px; display: inline-block; }
.foot .brand img { height: 34px; }
.foot p { margin-bottom: .5rem; }
.foot-cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; }
.foot-base { border-top: 1px solid rgba(255,255,255,.12); margin-top: 1.75rem; padding-top: 1rem; display: flex; gap: 1rem; flex-wrap: wrap; color: #8a968f; font-size: 12.5px; }
.foot-base .spacer { margin-left: auto; }

.subscribe { display: flex; gap: .4rem; margin-top: .6rem; }
.subscribe input { flex: 1; padding: .5rem .7rem; border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-s); background: rgba(255,255,255,.06); color: #fff; font: inherit; font-size: 13.5px; }
.subscribe input::placeholder { color: #7f8a84; }

/* --------------------------------------------------------------- responsive */

@media (max-width: 991px) {
  .split,
  .split.aside,
  .split.aside-wide,
  .split.even { grid-template-columns: 1fr; }
  .filters { position: static; }
  .product { grid-template-columns: 1fr; gap: 1.25rem; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .summary { position: static; }
}

@media (max-width: 767px) {
  .brand img { height: 30px; }
  .gallery-main { max-width: 340px; }
  .gallery-main img { padding: .75rem; }
  .aisles .wrap { overflow-x: auto; scrollbar-width: none; }
  .aisles .wrap::-webkit-scrollbar { display: none; }
  .aisle::after { display: none; }

  /* Basket: turn each row into a small card built around the photo. */
  .basket-rows, .basket-rows tbody, .basket-rows tr, .basket-rows td { display: block; width: 100%; }
  .basket-rows tr {
    position: relative;
    display: grid;
    grid-template-columns: 68px 1fr;
    grid-template-areas: "shot detail" "shot price" "qty  price";
    column-gap: .8rem;
    padding: .9rem .2rem;
    border-bottom: 1px solid var(--line);
  }
  .basket-rows tr:last-child { border-bottom: 0; }
  .basket-rows td { border: 0; padding: 0; }
  .basket-rows .cell-shot   { grid-area: shot; }
  .basket-rows .cell-detail { grid-area: detail; padding-right: 1.75rem; }
  .basket-rows .cell-qty    { grid-area: qty; align-self: end; padding-top: .5rem; }
  .basket-rows .cell-price  { grid-area: price; align-self: end; text-align: right; }
  .basket-rows .cell-bin    { position: absolute; top: .6rem; right: 0; }
  .basket-rows .mini-shot   { width: 68px; height: 68px; }
  .basket-rows .qty button  { width: 34px; }
  .basket-rows .qty input   { width: 42px; }

  .masthead .wrap { flex-wrap: wrap; min-height: 0; padding-top: .6rem; padding-bottom: .6rem; gap: .6rem; }
  .hunt { order: 3; flex-basis: 100%; max-width: none; }
  .head-act span { display: none; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
  .board { aspect-ratio: 16 / 10; }
  .drawer { display: none !important; }
  .foot-cols { grid-template-columns: 1fr; gap: 1.25rem; }
  .two-up { grid-template-columns: 1fr; }
  .topline .hide-sm { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .card:hover, .tile:hover { transform: none; }
}

/* --------------------------------------------------- search suggestions ----
   Sits under the search box. Keyboard-navigable, because a list you can only
   reach with a mouse is no use to someone typing fast. */
.hunt-list {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 4px);
  z-index: 60;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  max-height: 70vh;
  overflow-y: auto;
}
.hunt-opt {
  display: flex; align-items: center; gap: .7rem;
  padding: .5rem .75rem;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.hunt-opt:last-child { border-bottom: 0; }
.hunt-opt:hover, .hunt-opt.on { background: var(--leaf-soft); text-decoration: none; }
.hunt-opt img {
  width: 38px; height: 38px; flex: 0 0 auto;
  object-fit: contain; padding: 2px; border-radius: var(--radius-s);
  background: #fff; border: 1px solid var(--line);
}
.hunt-opt .badge-ico {
  width: 38px; height: 38px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--wash); border-radius: var(--radius-s);
  color: var(--leaf);
}
.hunt-opt .badge-ico svg { width: 17px; height: 17px; }
.hunt-opt .txt { min-width: 0; flex: 1; }
.hunt-opt .lbl {
  font-size: 14px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hunt-opt .lbl b { color: var(--leaf-deep); font-weight: 700; }
.hunt-opt .met { font-size: 12px; color: var(--muted); }
.hunt-all {
  display: block; padding: .6rem .75rem;
  background: var(--wash);
  font-size: 13px; font-weight: 600; text-align: center;
  color: var(--leaf-deep);
}
.hunt-all:hover { background: var(--leaf-soft); text-decoration: none; }

/* ----------------------------------------------- subcategory rail ----------
   The left-hand list on a category page, grouped the same way as the drop-down
   so the two read as one navigation rather than two. */
.aisle-rail .group + .group { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.aisle-rail .group > .eyebrow { display: block; margin-bottom: .35rem; color: var(--leaf-deep); }
.aisle-rail a {
  display: flex; justify-content: space-between; gap: .5rem;
  font-size: 13.5px; padding: .2rem 0; color: var(--ink-soft);
}
.aisle-rail a:hover { color: var(--leaf); text-decoration: none; }
.aisle-rail a.on { color: var(--leaf); font-weight: 600; }
.aisle-rail a .tally { color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.aisle-rail .all { font-weight: 600; color: var(--ink); }

/* ------------------------------------------------ pickup station finder ----
   Sits above the station list at checkout. The search matches name, landmark,
   district, region or phone, so it does not matter which the customer knows. */
.station-find { display: flex; gap: .5rem; margin-bottom: .25rem; }
.station-find input[type="search"] {
  flex: 1;
  padding: .55rem .75rem;
  border: 1.5px solid var(--line-firm);
  border-radius: var(--radius-s);
  font: inherit; font-size: 14.5px;
  background: #fff;
}
.station-find input[type="search"]:focus {
  outline: none; border-color: var(--leaf); box-shadow: 0 0 0 3px var(--leaf-soft);
}
.station-find select {
  flex: 0 0 auto; max-width: 44%;
  padding: .55rem .5rem;
  border: 1.5px solid var(--line-firm);
  border-radius: var(--radius-s);
  font: inherit; font-size: 14px; background: #fff;
}
.station-group + .station-group { margin-top: .3rem; }
.station-head {
  display: block;
  margin: .5rem 0 .35rem;
  color: var(--leaf-deep);
}
.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;
}

@media (max-width: 575px) {
  .station-find { flex-wrap: wrap; }
  .station-find select { max-width: none; flex: 1 1 100%; }
}

/* ==========================================================================
   Mobile category menu

   The horizontal aisle bar works on a wide screen and badly on a narrow one:
   twelve categories become a strip that has to be scraped sideways, and the
   hover drawer has nowhere to go. Below 768px the bar is replaced by a panel
   that slides in from the left, with subcategories folded away underneath
   each category.
   ========================================================================== */

.burger {
  display: none;
  width: 40px; height: 40px;
  flex: 0 0 auto;
  border: 0; background: transparent;
  border-radius: var(--radius-s);
  padding: 10px 9px;
  cursor: pointer;
}
.burger span {
  display: block; height: 2px; border-radius: 1px;
  background: var(--ink);
  transition: transform .2s ease, opacity .15s ease;
}
.burger span + span { margin-top: 4px; }
.burger:hover { background: var(--wash); }
/* The bars become a cross while the panel is open. */
.burger.on span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.on span:nth-child(2) { opacity: 0; }
.burger.on span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.shelf-veil {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(20, 32, 27, .45);
  opacity: 0;
  transition: opacity .2s ease;
}
.shelf-veil.on { opacity: 1; }

.shelf {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 71;
  width: min(86vw, 340px);
  background: #fff;
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform .22s ease;
  box-shadow: 0 0 40px rgba(20, 32, 27, .25);
}
.shelf.on { transform: translateX(0); }

.shelf-top {
  display: flex; align-items: center;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--leaf);
  color: #fff;
}
.shelf-title { font-family: var(--display); font-weight: 800; font-size: 1.1rem; }
.shelf-shut {
  margin-left: auto;
  width: 34px; height: 34px;
  border: 0; background: rgba(255,255,255,.15); color: #fff;
  border-radius: var(--radius-s);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.shelf-shut:hover { background: rgba(255,255,255,.3); }

.shelf-body { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; }

.shelf-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); }
.shelf-row > a {
  flex: 1;
  padding: .85rem 1rem;
  font-size: 15px; font-weight: 500;
  color: var(--ink);
}
.shelf-row > a:hover { background: var(--wash); text-decoration: none; }
.shelf-more {
  width: 52px;
  border: 0; border-left: 1px solid var(--line);
  background: transparent; color: var(--muted);
  cursor: pointer;
  display: grid; place-items: center;
}
.shelf-more svg { width: 18px; height: 18px; transition: transform .2s ease; }
.shelf-more[aria-expanded="true"] { color: var(--leaf); background: var(--leaf-soft); }
.shelf-more[aria-expanded="true"] svg { transform: rotate(180deg); }

.shelf-subs {
  background: var(--wash);
  padding: .6rem 1rem .8rem;
  border-bottom: 1px solid var(--line);
}
.shelf-subs .eyebrow { display: block; margin: .5rem 0 .2rem; color: var(--leaf-deep); }
.shelf-subs .eyebrow:first-child { margin-top: 0; }
.shelf-subs > a {
  display: block;
  padding: .38rem 0;
  font-size: 14px;
  color: var(--ink-soft);
}
.shelf-subs > a:hover { color: var(--leaf); }
.shelf-all {
  display: block; margin-top: .5rem; padding-top: .5rem;
  border-top: 1px solid var(--line);
  font-weight: 600; color: var(--leaf-deep) !important;
}

.shelf-extra { padding: .5rem 0 2rem; }
.shelf-extra a {
  display: block;
  padding: .7rem 1rem;
  font-size: 14.5px;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
.shelf-extra a:hover { background: var(--wash); text-decoration: none; }

/* Nothing scrolls behind the panel while it is open. */
body.shelf-open { overflow: hidden; }

@media (max-width: 767px) {
  .burger { display: block; }
  .aisles { display: none; }
}
@media (min-width: 768px) {
  .shelf, .shelf-veil { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .shelf, .shelf-veil, .burger span, .shelf-more svg { transition: none; }
}

/* One pickup station on the help page. */
.station-line {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .65rem 0;
  border-top: 1px solid var(--line);
}
.station-line svg { color: var(--leaf); margin-top: 3px; }
.station-line strong { font-size: 14.5px; }

/* The account tab strip scrolls rather than wrapping into three ragged lines. */
@media (max-width: 767px) {
  .account-tabs {
    display: flex;
    gap: .35rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: .3rem;
    border-bottom: 1px solid var(--line);
  }
  .account-tabs::-webkit-scrollbar { display: none; }
  .account-tabs .btn { white-space: nowrap; flex: 0 0 auto; }
  .account-tabs .btn:last-child { margin-left: 0 !important; }
}

/* ------------------------------------------------------- one order, on a phone */

.track { display: flex; gap: .5rem; }
.track-step { flex: 1; text-align: center; min-width: 0; }
.track-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--line);
}
.track-step.done .track-bar { background: var(--leaf); }
.track-name {
  margin-top: .45rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--faint);
  line-height: 1.25;
}
.track-step.done .track-name { color: var(--leaf-deep); }

.line-rows .cell-shot { width: 64px; }
.line-rows .cell-money { text-align: right; white-space: nowrap; }

@media (max-width: 767px) {
  /* Four uppercase labels do not fit across 360px — "On the way" alone needs
     more than a quarter of it. The bars stay, since they carry the meaning,
     and the stage is named in the sentence underneath instead. */
  .track { gap: .3rem; }
  .track-name { display: none; }
  .track-step.done .track-bar { background: var(--leaf); }

  /* Line items: the price under the name rather than in a third column that
     squeezes it to two words per line. */
  .line-rows, .line-rows tbody, .line-rows tr, .line-rows td { display: block; width: 100%; }
  .line-rows tr {
    display: grid;
    grid-template-columns: 60px 1fr;
    grid-template-areas: "shot what" "shot money";
    column-gap: .75rem;
    padding: .8rem .2rem;
    border-bottom: 1px solid var(--line);
  }
  .line-rows tr:last-child { border-bottom: 0; }
  .line-rows td { border: 0; padding: 0; }
  .line-rows .cell-shot  { grid-area: shot; width: 60px; }
  .line-rows .cell-what  { grid-area: what; }
  .line-rows .cell-money {
    grid-area: money;
    text-align: left;
    margin-top: .3rem;
    font-weight: 700;
    font-family: var(--display);
  }
  .line-rows .mini-shot { width: 60px; height: 60px; }
}

/* Order page actions: side by side where there is room, stacked where there
   is not, so neither button ends up two words wide. */
.order-acts {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}
@media (max-width: 480px) {
  .order-acts { flex-direction: column; }
  .order-acts .btn { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------- order history ----
   Cards, not a table. Each one is laid out by its own content, so there is no
   width at which it breaks — the same markup works on a 320px phone, a tablet
   in portrait and a half-width desktop window.

   The whole card is the link: on a phone a small "View" button is a poor
   target, and there is nothing else on the card to click. */

.order-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }

.order-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.order-card:hover { border-color: var(--line-firm); box-shadow: var(--shadow); }

.order-card-link {
  display: grid;
  /* One column of content and a chevron. Everything stacks in the first
     column, so no cell can be squeezed by a neighbour. */
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .3rem 1rem;
  padding: .9rem 1rem;
  color: var(--ink);
}
.order-card-link:hover { text-decoration: none; }

.order-card-top {
  grid-column: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}
.order-card-id .eyebrow { display: block; margin-bottom: .1rem; }
.order-card-id strong { font-size: 14.5px; word-break: break-all; }

.order-card-meta {
  grid-column: 1;
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: .15rem;
}

/* Four bars, wide enough to read at any size and no text to wrap. */
.order-card-track {
  grid-column: 1;
  display: flex;
  gap: 3px;
  margin: .55rem 0 .45rem;
  max-width: 220px;
}
.order-card-track span {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
}
.order-card-track span.on { background: var(--leaf); }

.order-card-link > .chip { grid-column: 1; justify-self: start; }
.chip-bad { background: var(--alert-soft); color: var(--alert); }

.order-card-go {
  grid-column: 2;
  /* `grid-row: 1 / -1` was wrong here: -1 counts back from the end of the
     *explicit* grid, and this grid has no explicit rows, so it resolved to
     row 1 only and the chevron sat against the top of the card instead of
     centred beside the content. `span 5` covers every row the content can
     produce. */
  grid-row: 1 / span 5;
  align-self: center;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--wash);
  color: var(--muted);
}
.order-card:hover .order-card-go { background: var(--leaf-soft); color: var(--leaf-deep); }

@media (max-width: 420px) {
  /* The reference and the price side by side get tight on the smallest
     phones, so let them stack rather than shrink the price. */
  .order-card-top { flex-direction: column; align-items: flex-start; gap: .35rem; }
}


/* Spec tables pasted in from the admin panel carry class="spec-table" but no
   styling of their own, and the .prose rules assume a bordered table. Make a
   two- or three-column spec sheet readable, and let it scroll rather than
   overflow on a phone. */
.prose table { display: block; overflow-x: auto; white-space: normal; }
.prose .spec-table,
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 14px;
}
.prose table th,
.prose table td {
  border: 1px solid var(--line);
  padding: .5rem .65rem;
  text-align: left;
  vertical-align: top;
}
.prose table th { background: var(--wash); font-weight: 600; }

/* A section heading inside a spec sheet — "Display", "Connections". Written as
   <tr class="spec-group"><th colspan="2">…</th></tr>. Without this it reads as
   just another row and a long sheet becomes one undifferentiated block. */
.prose .spec-table .spec-group th {
  background: var(--leaf, #237a28);
  color: #fff;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .45rem .65rem;
}

/* The label column: narrow enough that values get the room, wide enough that
   "Wireless connectivity" does not wrap to four lines. */
.prose .spec-table tbody th { width: 38%; }

@media (max-width: 480px) {
  .prose .spec-table tbody th { width: 44%; }
  .prose .spec-table { font-size: 13px; }
}
/* The first column of a spec sheet is the category, blank on continuation
   rows. Right-aligning nothing looks like a mistake, so keep it narrow. */
.prose table td:first-child { width: 22%; color: var(--muted); }
.prose table td:first-child:empty { border-top-color: transparent; }

@media (max-width: 575px) {
  .prose table { font-size: 13px; }
  .prose table th, .prose table td { padding: .4rem .45rem; }
  .prose table td:first-child { width: auto; }
}

/* ------------------------------------------------------ category filters ----
   The only brand and price control on the page. It replaced two long link
   lists in the sidebar, so it has to carry that weight on a desktop as well as
   a phone — which means looking like a control rather than a stray pair of
   dropdowns. */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .75rem;
  margin-top: 1rem;
  padding: .85rem 1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.filter-bar .fb-field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-width: 0;
  flex: 1 1 180px;
}

.filter-bar .fb-field > span {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}

/* A native select with the arrow drawn in, so it matches the rest of the shop
   instead of inheriting whatever the platform draws. */
.filter-bar select {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 2.2rem 0 .75rem;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background-color: #fff;
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b7772' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.filter-bar select:hover { border-color: var(--muted); }

.filter-bar select:focus-visible {
  outline: none;
  border-color: var(--leaf);
  box-shadow: 0 0 0 3px rgba(35, 122, 40, .14);
}

/* A filter that is doing something should look like it is. */
.filter-bar select:not(:has(option[value=""]:checked)) {
  border-color: var(--leaf);
  background-color: rgba(35, 122, 40, .04);
  font-weight: 600;
}

.filter-bar .fb-clear {
  align-self: flex-end;
  height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 .9rem;
  font-size: 13px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  white-space: nowrap;
}
.filter-bar .fb-clear:hover { color: var(--ink); border-color: var(--muted); }

@media (max-width: 600px) {
  /* Two across on a phone, and the clear link on its own line beneath. */
  .filter-bar { gap: .6rem; padding: .75rem; }
  .filter-bar .fb-field { flex: 1 1 calc(50% - .3rem); }
  .filter-bar .fb-clear { flex: 1 1 100%; justify-content: center; }
}

/* ------------------------------------------------- collecting at a station ----
   Three steps, so each needs to look like a step rather than a stray control. */
.pickup-cascade .field { margin-bottom: 1rem; }
.pickup-cascade select { width: 100%; }

.pickup-cascade #pickStationField { margin-top: .25rem; }
.pickup-cascade .eyebrow { display: block; margin-bottom: .5rem; }

/* The fee on a station row. It is the figure that decides which station gets
   picked, so it is not hidden in the small print with the phone number. */
.station-fee {
  display: block;
  margin-top: .3rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--leaf-deep);
}

@media (max-width: 575px) {
  .pickup-cascade select { height: 46px; }
}

/* --------------------------------------------------------------- voucher --
   Sits in the order summary between the totals and the payment choice. */
.voucher-box {
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
}
.voucher-row { display: flex; gap: .4rem; }
.voucher-row input {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  padding: 0 .7rem;
  font: inherit;
  font-size: 14px;
  letter-spacing: .04em;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.voucher-row input:focus {
  outline: none;
  border-color: var(--leaf);
  box-shadow: 0 0 0 3px rgba(35, 122, 40, .12);
}
.voucher-row button {
  flex: 0 0 auto;
  height: 42px;
  padding: 0 1rem;
  border: 1px solid var(--leaf);
  border-radius: var(--radius);
  background: #fff;
  color: var(--leaf);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.voucher-row button:hover { background: var(--wash); }

/* ----------------------------------------------------------------- share --
   Plain links styled as buttons. No platform script is loaded, so nothing here
   depends on Facebook or X being reachable — which also means the page does not
   slow down when they are not. */
.share {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.share-label {
  font-size: 13px;
  color: var(--muted);
  margin-right: .2rem;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .42rem .7rem;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.share-btn:hover { border-color: var(--muted); }
.share-btn svg { flex: 0 0 auto; }

/* The brand's own colour on the mark, so the row reads at a glance without
   four saturated pills competing with the price. */
.share-btn.s-whatsapp svg { color: #25d366; }
.share-btn.s-facebook svg { color: #1877f2; }
.share-btn.s-x svg        { color: #0f1419; }
.share-btn.s-email svg    { color: var(--leaf); }
.share-btn:hover svg      { color: inherit; }

@media (max-width: 560px) {
  /* Marks only. Four names and a label do not fit across a phone, and the
     icons are recognised without them. */
  .share-name { position: absolute; width: 1px; height: 1px; overflow: hidden;
                clip: rect(0 0 0 0); white-space: nowrap; }
  .share-btn { padding: .5rem; }
}

/* Each platform's own colour on hover only: four saturated pills in a row
   shout louder than the price does. */
.share-btn.s-whatsapp:hover { background: #25d366; border-color: #25d366; color: #fff; }
.share-btn.s-facebook:hover { background: #1877f2; border-color: #1877f2; color: #fff; }
.share-btn.s-x:hover        { background: #0f1419; border-color: #0f1419; color: #fff; }
.share-btn.s-email:hover    { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.share-btn.s-copy.ok        { background: var(--leaf); border-color: var(--leaf); color: #fff; }

@media (max-width: 420px) {
  /* The label wastes a line on a narrow screen; the icons speak for
     themselves once they are the only thing there. */
  .share-label { flex: 1 1 100%; margin-bottom: .15rem; }
}

/* -------------------------------------------------------------- the sale --
   Black Friday, or whatever the window is called. Black on the card corner
   where the discount ribbon would otherwise sit, so the two never compete. */
.bf-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .6rem;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background: #14201b;
  border-radius: 999px;
  white-space: nowrap;
}
.bf-badge b { color: #ffd166; font-weight: 800; }

/* On a card it sits where the ribbon does. */
.card .bf-badge {
  position: absolute;
  top: .5rem;
  left: .5rem;
  z-index: 2;
}

/* ------------------------------------------------- email this product form --
   Hidden until the Email button is pressed, so the product page is not led by
   a form nobody asked for. */
.share-mail {
  margin-top: .75rem;
  padding: .85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--wash, #f7f8f6);
}
.share-mail .sm-row {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .5rem;
}
.share-mail input,
.share-mail textarea {
  flex: 1 1 180px;
  min-width: 0;
  width: 100%;
  padding: .6rem .7rem;
  font: inherit;
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.share-mail textarea { resize: vertical; }
.share-mail input:focus,
.share-mail textarea:focus {
  outline: none;
  border-color: var(--leaf);
  box-shadow: 0 0 0 3px rgba(35, 122, 40, .12);
}
.share-mail .sm-foot {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .6rem;
}
.sm-said { font-size: 13px; color: var(--muted); }
.sm-said.ok  { color: var(--leaf); font-weight: 600; }
.sm-said.bad { color: #8a1f1f; }