/* ==========================================================================
   EatDesi — site styles
   Brand palette from the EatDesi design deck; layout modernised.
   ========================================================================== */

:root {
  --teal:        #099999;
  --teal-dark:   #067373;
  --teal-deep:   #004667;
  --navy:        #155F82;
  --green:       #89D507;
  --green-deep:  #5f9500;
  --red:         #E21D3D;
  --red-deep:    #b01230;
  --magenta:     #AA3869;
  --magenta-deep:#7d2549;
  --mint:        #D9F1D0;
  --orange:      #E8A33D;

  --ink:         #0f2626;
  --ink-soft:    #4a6360;
  --paper:       #ffffff;
  --tint:        #f2f9f7;
  --line:        #dcebe8;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;

  --shadow-sm: 0 2px 10px rgba(7, 60, 60, .07);
  --shadow-md: 0 10px 30px rgba(7, 60, 60, .13);
  --shadow-lg: 0 22px 45px rgba(7, 60, 60, .20);

  --shell:  1200px;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  --font-display: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;
}

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

/* The hidden attribute's default display:none loses to any author display
   rule, so an element like .store (display:flex) would stay visible when
   scripts hide it. Make hidden actually mean hidden. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 130px; /* room for the sticky header on anchor jumps */
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;

  /* Footer pins to the bottom on pages shorter than the viewport. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

body > main { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--teal-dark); }

::selection { background: var(--teal); color: #fff; }

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
  border-radius: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  margin: 0 0 .6em;
}

.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  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 link ------------------------------------------------------------- */
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: #fff; color: var(--teal-deep);
  padding: .6rem 1rem; border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 600; transition: top .2s;
}
.skip-link:focus { top: 0; }

/* ==========================================================================
   Type system
   ========================================================================== */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .9rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal-dark);
}
.eyebrow::before,
.section-head--center .eyebrow::after {
  content: "";
  width: 26px; height: 3px;
  border-radius: 2px;
  background: var(--orange);
}

/* The rule sits inside the centred flex box, so with only a leading dash the
   label itself lands ~18px right of true centre, out of line with the heading
   beneath it. A matching rule on the trailing side balances it. Left-aligned
   eyebrows (the homepage intro, the range heroes) keep the single rule. */

.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section--tint { background: var(--tint); }

.section-head { margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.section-head--center { text-align: center; }

.section-title {
  font-weight: 700;
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0;
}

.display {
  font-weight: 700;
  font-size: clamp(2rem, 4.6vw, 3rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0;
}

.prose {
  max-width: 62ch;
  margin-inline: auto;
}
.prose p { margin: 0 0 1.4em; }
.prose p:last-child { margin-bottom: 0; }

.lead { font-size: clamp(1.02rem, 2.2vw, 1.14rem); }

.pullquote {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  line-height: 1.45;
  color: var(--teal-dark);
  text-align: center;
}

/* Heading + copy side by side */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  background: var(--teal);
  position: sticky; /* no-JS fallback */
  top: 0;
  z-index: 100;
  transition: box-shadow .3s;
}
.site-header.is-compact { box-shadow: 0 4px 18px rgba(0, 0, 0, .18); }

/* With JS the header is fixed and .header-spacer (sized by main.js to the
   full header height) holds its place in the flow, so collapsing the header
   never moves the page. */
.js-fixed-header .site-header { position: fixed; top: 0; left: 0; right: 0; }
.header-spacer { flex-shrink: 0; }
.site-header.is-measuring,
.site-header.is-measuring * { transition: none !important; }

.header-brand {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 5vw, 3.5rem);
  padding: .9rem var(--gutter) .4rem;
  transition: padding .3s ease;
}

.header-brand .tagline {
  width: clamp(120px, 20vw, 240px);
  flex-shrink: 1;
  transition: width .35s ease, opacity .25s ease;
}
.header-brand .logo {
  width: clamp(88px, 13vw, 150px);
  flex-shrink: 0;
  transition: width .3s ease;
}

/* Collapse to a slim bar once scrolling */
.site-header.is-compact .header-brand { padding-top: .4rem; padding-bottom: .1rem; }
.site-header.is-compact .tagline { width: 0; opacity: 0; overflow: hidden; }
.site-header.is-compact .logo { width: 68px; }

.logo-link { display: block; line-height: 0; }

/* Mobile menu button ---------------------------------------------------- */
.nav-toggle {
  display: none;
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 10px 8px;
}
.nav-toggle span {
  display: block; height: 2.5px; border-radius: 2px;
  background: #fff; margin: 5px 0;
  transition: transform .25s, opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Primary nav ----------------------------------------------------------- */
.site-nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 6vw, 4.5rem);
  margin: 0;
  padding: 0 var(--gutter) .9rem;
}

.site-nav a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  color: #fff;
  text-decoration: none;
  padding: .35rem 0;
  border-bottom: 2px solid transparent;
  display: inline-block;
  transition: border-color .2s;
}
.site-nav a:hover,
.site-nav a:focus-visible { border-bottom-color: rgba(255, 255, 255, .8); }
/* "page" on the page itself; "true" marks the section (e.g. Our Range while
   viewing a range detail page). */
.site-nav a[aria-current] { border-bottom-color: var(--orange); }

/* Range sub-nav (product pages) ----------------------------------------- */
.range-nav {
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.range-nav ul {
  list-style: none; margin: 0;
  padding: .7rem var(--gutter);
  display: flex; flex-wrap: wrap;
  justify-content: center; gap: .5rem .6rem;
}
.range-nav a {
  font-family: var(--font-display);
  font-weight: 600; font-size: .88rem;
  color: var(--teal-dark); text-decoration: none;
  padding: .42rem 1.15rem;
  border-radius: 999px;
  background: var(--tint);
  transition: background .2s, color .2s;
}
.range-nav a:hover { background: var(--mint); color: var(--teal-deep); }
.range-nav a[aria-current="page"] { background: var(--teal); color: #fff; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 600;
  color: #fff;
  background: var(--navy);
  border: 2px solid transparent;
  border-radius: 999px;
  padding: .68rem 2rem;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, transform .2s, box-shadow .2s, color .2s;
}
.btn:hover, .btn:focus-visible {
  background: var(--teal-deep);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-solid { background: var(--teal); }
.btn-solid:hover { background: var(--teal-dark); }

/* ==========================================================================
   Hero — rotating banner
   ========================================================================== */

.hero { position: relative; }

.hero-track {
  position: relative;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: #0b0b0b;
}

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .7s ease;
}
/* First slide carries the class in markup so the banner works without JS. */
.hero-slide.is-active { opacity: 1; animation: hero-ken 7s ease-out both; }

@keyframes hero-ken {
  from { transform: scale(1.045); }
  to   { transform: scale(1); }
}

.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: clamp(38px, 4vw, 50px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .88);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: background .2s, transform .2s;
}
.hero-arrow:hover,
.hero-arrow:focus-visible {
  background: #fff;
  transform: translateY(-50%) scale(1.07);
}
.hero-arrow svg { width: 55%; height: 55%; }
.hero-arrow--prev { left: clamp(.5rem, 2vw, 1.5rem); }
.hero-arrow--next { right: clamp(.5rem, 2vw, 1.5rem); }

.hero-dots {
  position: absolute;
  left: 0; right: 0; bottom: clamp(.6rem, 1.6vw, 1.1rem);
  display: flex;
  justify-content: center;
  gap: .5rem;
}

.hero-dot {
  width: 10px; height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
  transition: width .3s ease, background .2s;
}
.hero-dot:hover { background: rgba(255, 255, 255, .85); }
.hero-dot[aria-selected="true"] { width: 28px; background: #fff; }

/* Brand ticker ----------------------------------------------------------- */
.ticker {
  background: var(--teal-deep);
  color: #fff;
  overflow: hidden;
  padding: .85rem 0;
}
.ticker-track {
  display: flex;
  align-items: center;
  gap: 2.6rem;
  width: max-content;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  animation: ticker 75s linear infinite;
}
.ticker .tick-dot { color: var(--orange); }

@keyframes ticker {
  to { transform: translateX(-50%); }
}

/* ==========================================================================
   Range cards (home + our range)
   ========================================================================== */

.range-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
}

.range-card {
  position: relative; /* containing block for the stretched link below */
  display: flex;
  flex-direction: column;
  color: #fff;
  text-align: center;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .35s ease, box-shadow .35s ease;
}

/* Stretch the View Range link over the whole card, so anywhere is clickable
   while keeping a single link (and a single tab stop) per card. */
.range-card .btn::after {
  content: "";
  position: absolute;
  inset: 0;
}
/* The generic .btn hover nudge must not apply here: a transform would turn
   the button into the containing block for its ::after, collapsing the
   stretched overlay to the button's own box. The card lift covers it. */
.range-card .btn:hover,
.range-card .btn:focus-visible { transform: none; }
.range-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.range-card > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .6s ease;
}
.range-card:hover > img { transform: scale(1.06); }

.range-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1.4rem 1.8rem;
}

.range-card h2,
.range-card h3 {
  font-weight: 700;
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  letter-spacing: -.01em;
  margin-bottom: .55rem;
}

.range-card p {
  font-size: .92rem;
  line-height: 1.6;
  margin: 0 0 1.5rem;
  flex: 1;
  opacity: .97;
}

/* Ghost pill that fills white on hover, text matching the card colour */
.range-card .btn {
  align-self: stretch;
  padding-inline: 1rem;
  background: transparent;
  border-color: rgba(255, 255, 255, .8);
}
.range-card .btn:hover,
.range-card .btn:focus-visible { background: #fff; box-shadow: none; }

.range-card--garden     { background: var(--green); }
.range-card--bombay     { background: var(--red); }
.range-card--streetcorn { background: var(--teal); }
.range-card--himalayan  { background: var(--magenta); }

.range-card--garden .btn:hover,
.range-card--garden .btn:focus-visible     { color: var(--green-deep); }
.range-card--bombay .btn:hover,
.range-card--bombay .btn:focus-visible     { color: var(--red); }
.range-card--streetcorn .btn:hover,
.range-card--streetcorn .btn:focus-visible { color: var(--teal-dark); }
.range-card--himalayan .btn:hover,
.range-card--himalayan .btn:focus-visible  { color: var(--magenta); }

/* ==========================================================================
   Where to find us
   ========================================================================== */

.find-us {
  display: grid;
  grid-template-columns: minmax(170px, 280px) 1fr;
  gap: clamp(1.5rem, 5vw, 3.5rem);
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(1.5rem, 4vw, 3rem);
}

.find-us .uk-map { margin-inline: auto; }

.find-us-cta { margin-top: 1.7rem; }
.find-us-hint {
  font-size: .85rem;
  color: var(--ink-soft);
  margin: .6rem 0 0;
}

/* Secondary to the availability line above it: this is for the few who want
   to stock EatDesi, not the many who want to buy it. Set apart by space and
   weight rather than a rule — a full-width line under the logos reads as the
   end of a section, which it is not. */
.stockist-trade {
  font-size: .92rem;
  color: var(--ink-soft);
  margin: 2.2rem 0 0;
}

.retailers {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 1rem;
  margin-top: 1.6rem;
}
/* Uniform boxes: the logos have different aspect ratios, so sizing chips to
   their content makes them lopsided. Fix the box, contain the logo. */
.retailer-chip {
  display: grid;
  place-items: center;
  width: clamp(150px, 22vw, 200px);
  height: clamp(70px, 9vw, 88px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.retailers img {
  max-width: 70%;
  max-height: 52%;
  width: auto;
  height: auto;
}

/* ==========================================================================
   Story page
   ========================================================================== */

.story-gallery {
  columns: 4 200px;
  column-gap: 1rem;
  margin-top: clamp(2rem, 5vw, 3.2rem);
}
.story-gallery img {
  width: 100%;
  border-radius: var(--r-md);
  margin-bottom: 1rem;
  break-inside: avoid;
  transition: transform .4s ease, box-shadow .4s ease;
}
.story-gallery img:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-md);
}

/* ==========================================================================
   Range page intro hero
   ========================================================================== */

.range-hero {
  color: #fff;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}
.range-hero .eyebrow { color: rgba(255, 255, 255, .95); }
.range-hero h1 {
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.1rem);
  letter-spacing: -.02em;
  margin: 0 0 .7rem;
}
.range-hero p {
  max-width: 58ch;
  font-size: clamp(1rem, 2vw, 1.08rem);
  margin: 0;
  opacity: .97;
}

.range-hero--garden     { background: linear-gradient(130deg, #95dd1c, #63a002); }
.range-hero--bombay     { background: linear-gradient(130deg, #ef3355, var(--red-deep)); }
.range-hero--streetcorn { background: linear-gradient(130deg, #0bacac, #056c6c); }
.range-hero--himalayan  { background: linear-gradient(130deg, #c14a7e, var(--magenta-deep)); }

.range-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr minmax(0, .8fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.range-hero-grid img {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}

/* ==========================================================================
   Product rows (range detail pages)
   ========================================================================== */

.product {
  background-size: cover;
  background-position: center;
  padding: clamp(2.2rem, 5vw, 3.5rem) 0;
}

.product-inner {
  display: grid;
  grid-template-columns: 1fr minmax(200px, 300px);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.product--reverse .product-inner { grid-template-columns: minmax(200px, 300px) 1fr; }
.product--reverse .product-media { order: -1; }

.product-media img {
  margin-inline: auto;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .28));
  transition: transform .5s ease;
}
.product-inner:hover .product-media img { transform: rotate(-2deg) scale(1.03); }

.product h2 {
  font-weight: 800;
  font-size: clamp(1.5rem, 4vw, 2.3rem);
  letter-spacing: -.01em;
  margin-bottom: .4rem;
}

.product-tagline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  line-height: 1.45;
  margin: 0 0 1.4rem;
}

.product-facts {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(3px);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
}

.product-facts h3 {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 .45rem;
}

.ingredients {
  font-size: .88rem;
  line-height: 1.55;
  margin: 0 0 1.4rem;
  color: var(--ink-soft);
}
.ingredients strong { color: var(--ink); }

/* The decorative colour band behind each product row is set inline by
   product_row(), from data/products.json, so it can be replaced from
   /admin without editing this file. */

/* Nutrition table ------------------------------------------------------- */
.nutrition {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
  text-align: center;
}
.nutrition th {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .74rem;
  color: rgba(15, 38, 38, .75);
  padding: .35rem .3rem;
  vertical-align: bottom;
  border-bottom: 2px solid rgba(15, 38, 38, .16);
}
.nutrition td {
  font-weight: 500;
  padding: .5rem .3rem;
}
.nutrition th small { display: block; font-weight: 700; }

/* ==========================================================================
   Where to buy / contact
   ========================================================================== */

/* Store finder ----------------------------------------------------------- */
.finder {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.1rem, 3vw, 1.6rem);
  /* Full shell width, so it lines up with the map panel above it. */
  margin-top: clamp(1.6rem, 4vw, 2.2rem);
}

.finder-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .75rem;
}

.finder-field { flex: 1 1 210px; }
.finder-field label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .88rem;
  margin-bottom: .35rem;
}
.finder-field input {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  text-transform: uppercase;
  padding: .7rem .9rem;
  border: 1px solid #cfe0dd;
  border-radius: var(--r-sm);
  transition: border-color .2s, box-shadow .2s;
}
.finder-field input::placeholder { text-transform: none; }
.finder-field input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(9, 153, 153, .18);
}

.finder .btn { flex: 0 0 auto; }

.finder-locate {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: transparent;
  color: var(--teal-dark);
  border: 1px solid #cfe0dd;
}
.finder-locate:hover,
.finder-locate:focus-visible { background: var(--tint); color: var(--teal-deep); box-shadow: none; }
.finder-locate svg { width: 18px; height: 18px; flex: 0 0 auto; }

.finder-status {
  margin: .9rem 0 0;
  font-size: .9rem;
  color: var(--ink-soft);
  min-height: 1.2em;      /* reserve the line so results do not jump */
}
.finder-status:empty { margin-top: 0; }

/* An error has to look different from a result, or it reads as success. */
.finder-status.is-error {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  color: var(--red-deep);
  font-weight: 500;
  background: #fdeef1;
  border: 1px solid #f5c2cc;
  border-radius: var(--r-sm);
  padding: .6rem .8rem;
}
.finder-status.is-error::before {
  content: "!";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-top: .1rem;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .74rem;
}

.finder-field input[aria-invalid="true"] { border-color: var(--red); }
.finder-field input[aria-invalid="true"]:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(226, 29, 61, .16);
}

/* The results ship visible so the page works without JavaScript. When scripts
   are running they are collapsed until someone searches or asks for the list. */
.js .store-results { display: none; }
.js .store-results.is-open { display: block; }

.store-results.is-open,
#stockist-intro { animation: fade-up .35s ease both; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Spinner shown on the search button while a lookup is in flight. */
.finder-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-width: 118px;
}
.finder-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.is-busy .finder-spinner { display: block; }
.finder-submit[disabled] { opacity: .85; cursor: progress; }

@keyframes spin { to { transform: rotate(360deg); } }

.finder-aside {
  margin: .9rem 0 0;
  font-size: .92rem;
  color: var(--ink-soft);
}

/* Stockist intro ---------------------------------------------------------- */
.stockist-summary {
  max-width: 60ch;              /* a sentence across 1200px is unreadable */
  margin: 1.2rem auto 0;
}
.stockist-summary p { margin: 0 0 .6rem; }
/* Same spacing as the homepage: this rule is here to beat `.stockist-summary p`
   above, which is more specific than .stockist-trade on its own. */
.stockist-summary .stockist-trade { margin: 2.2rem 0 0; }
.stockist-summary .retailers {
  justify-content: center;
  margin-top: 1.4rem;
}

/* Interactive map --------------------------------------------------------- */
.store-map {
  margin-top: clamp(1.2rem, 3vw, 1.8rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm);

  /* Leaflet numbers its own layers freely — panes at 400 to 700, controls at
     1000 — and those compete with everything else on the page, so the zoom
     buttons rode over the header on the way past. This makes the map its own
     stacking context, so those numbers only mean anything inside it, and the
     map as a whole sits below the header where it belongs. Raising the
     header instead would only work until Leaflet picked a bigger number. */
  isolation: isolate;
}

/* Without JavaScript the static map is the map. */
.store-map .uk-map-static {
  max-width: 260px;
  margin: clamp(1.5rem, 4vw, 2.5rem) auto;
}
.map-loading { display: none; }

/* With JavaScript: reserve the full height immediately and show a spinner, so
   nothing flashes and the map slots in without shifting the page. */
.js .store-map {
  display: grid;
  place-items: center;
  min-height: clamp(380px, 62vh, 580px);
}
.js .store-map .uk-map-static { display: none; }
.js .store-map .map-loading {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  color: var(--ink-soft);
  font-size: .92rem;
}

.map-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(9, 153, 153, .25);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

/* Leaflet failed to load: fall back to the static image after all. */
.js .store-map.is-fallback { display: block; min-height: 0; }
.js .store-map.is-fallback .uk-map-static { display: block; }
.js .store-map.is-fallback .map-loading { display: none; }

/* Taller than it looks like it needs: the UK is tall and narrow, so a short
   wide map has to zoom out until half of Europe is in frame. Height drives how
   far in fitBounds can go. */
.store-map.is-live {
  display: block;                /* the placeholder grid would shrink the map */
  height: clamp(380px, 62vh, 580px);
}
.store-map.is-live .leaflet-container { height: 100%; font: inherit; }

/* Pins are drawn in CSS so there are no extra image requests. The colour is
   set inline per marker, from the retailer's entry in RETAILERS. */
.map-pin svg { display: block; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }

/* "You are here" stays a circle, so it never reads as another store. */
.map-pin-dot {
  display: block;
  width: 20px;
  height: 20px;
  margin: 1px;
  border-radius: 50%;
  background: var(--orange);
  border: 3px solid #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
}

/* Map key ---------------------------------------------------------------- */
.map-key {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
  margin: .9rem 0 0;
  padding: 0;
  font-size: .88rem;
  color: var(--ink-soft);
}
.map-key li { display: flex; align-items: center; gap: .45rem; }
/* The key renders the same SVG pin, so it matches what is on the map. */
.map-key .pin-svg { display: block; flex: 0 0 auto; }
/* Same dimensions as .map-pin-dot on the map. */
.map-key-dot--you {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: var(--orange);
  box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
}

.popup-retailer {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .15rem;
}

.leaflet-popup-content { font-size: .9rem; line-height: 1.5; }
.leaflet-popup-content strong { font-family: var(--font-display); }
.leaflet-popup-content a { color: var(--teal-dark); font-weight: 600; }

.store-map.is-live + .store-results .store { cursor: pointer; }

/* Store list ------------------------------------------------------------- */
.store-list {
  list-style: none;
  margin: clamp(1.6rem, 4vw, 2.2rem) 0 0;
  padding: 0;
  display: grid;
  gap: .8rem;
}

.store {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1rem 1.25rem;
  transition: box-shadow .2s, transform .2s;
}
.store:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.store-main {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  min-width: 0;
  flex: 1 1 320px;
}

.store-logo {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 84px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
}
.store-logo img { max-width: 74%; max-height: 52%; width: auto; height: auto; }
.store-logo--text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .78rem;
  color: var(--ink-soft);
}

.store h3 {
  font-size: 1.02rem;
  font-weight: 700;
  margin: 0 0 .15rem;
}
.store-address {
  margin: 0;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.store-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 0 0 auto;
  margin-left: auto;
}

.store-distance {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  color: var(--teal-dark);
  white-space: nowrap;
}

.store-directions {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .88rem;
  color: #fff;
  background: var(--teal);
  border-radius: 999px;
  padding: .5rem 1.1rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s;
}
.store-directions:hover,
.store-directions:focus-visible { background: var(--teal-dark); }

.finder-reset {
  margin: 1.4rem 0 0;
  text-align: center;
  font-size: .92rem;
  color: var(--ink-soft);
}

.linkish {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--teal-dark);
  text-decoration: underline;
  cursor: pointer;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.info-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: 1.6rem;
  transition: transform .3s ease, box-shadow .3s ease;
}
.info-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.info-card h3 { color: var(--teal-dark); font-size: 1.05rem; font-weight: 700; }
.info-card p { font-size: .95rem; }
.info-card p:last-child { margin-bottom: 0; }

.contact-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.contact-form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}

.form-field { margin-bottom: 1.1rem; }
.form-field label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .88rem;
  margin-bottom: .35rem;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  font: inherit;
  font-size: .95rem;
  padding: .7rem .9rem;
  border: 1px solid #cfe0dd;
  border-radius: var(--r-sm);
  background: #fff;
  color: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.form-field textarea { min-height: 150px; resize: vertical; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(9, 153, 153, .18);
}

.form-note { font-size: .85rem; color: var(--ink-soft); margin-top: 1rem; }

/* Honeypot: off-screen rather than display:none, because some bots skip
   fields that are obviously hidden. Never focusable or announced. */
.form-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-field--error input,
.form-field--error textarea { border-color: var(--red); }
.form-field--error input:focus,
.form-field--error textarea:focus { box-shadow: 0 0 0 3px rgba(226, 29, 61, .16); }

.form-error {
  margin: .4rem 0 0;
  font-size: .85rem;
  font-weight: 500;
  color: var(--red-deep);
}

.form-alert {
  border-radius: var(--r-md);
  padding: 1.15rem 1.35rem;
  margin-bottom: 1.5rem;
  border: 1px solid transparent;
}
.form-alert p { margin: 0; }
.form-alert h2 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 .35rem;
}
.form-alert--ok {
  background: #eefaf5;
  border-color: #b7e4d0;
  color: #14512f;
}
.form-alert--ok a { color: #0e6b3d; }
.form-alert--bad {
  background: #fdeef1;
  border-color: #f5c2cc;
  color: #8a1229;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--teal);
  color: #fff;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  padding: clamp(2.4rem, 5vw, 3.5rem) 0 clamp(1.8rem, 4vw, 2.5rem);
}

.footer-brand img { width: 108px; }
.footer-brand p {
  margin: .9rem 0 0;
  font-size: .93rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .95);
  max-width: 30ch;
}

.footer-head {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #cfeaea;
  margin: .4rem 0 .9rem;
}

.footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .4rem;
}
.footer-nav a {
  color: #fff;
  text-decoration: none;
  font-size: .95rem;
  opacity: .95;
}
.footer-nav a:hover { text-decoration: underline; opacity: 1; }

.social {
  display: flex;
  gap: .6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.social a {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  transition: background .2s, color .2s, transform .2s;
}
.social a:hover {
  background: #fff;
  color: var(--teal-dark);
  transform: translateY(-3px);
}
.social svg { width: 55%; height: 55%; fill: currentColor; }

.footer-bar { border-top: 1px solid rgba(255, 255, 255, .25); padding: 1.05rem 0; }
.footer-bar .shell {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.copyright {
  margin: 0;
  font-size: .84rem;
  color: var(--orange);
}
.footer-tag {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .9);
}

/* ==========================================================================
   Scroll reveal (progressive enhancement — see main.js)
   ========================================================================== */

/* The hidden state is applied by JavaScript, never by the stylesheet, so that
   content is always visible if scripts are blocked or fail. */
.reveal-init { opacity: 0; transform: translateY(18px); }
.reveal-in {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s ease;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1050px) {
  .range-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  html { scroll-padding-top: 90px; }

  .nav-toggle { display: block; }

  /* On mobile the brand row is the whole header (nav is behind the burger),
     so the desktop's asymmetric padding would leave the logo sitting low. */
  .header-brand {
    justify-content: flex-start;
    padding: .6rem var(--gutter);
    padding-right: 60px;
  }
  .header-brand .tagline { display: none; }
  .header-brand .logo { width: 84px; }
  .site-header.is-compact .header-brand { padding-top: .4rem; padding-bottom: .4rem; }
  .site-header.is-compact .logo { width: 62px; }

  .site-nav {
    display: none;
    border-top: 1px solid rgba(255, 255, 255, .25);
    box-shadow: 0 14px 24px rgba(0, 0, 0, .16);
  }
  .site-nav.is-open { display: block; }
  .site-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: .5rem var(--gutter) 1rem;
  }
  .site-nav li { width: 100%; }
  .site-nav a {
    display: block;
    width: 100%;
    padding: .85rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
  }
  .site-nav a:hover,
  .site-nav a[aria-current] { border-bottom-color: var(--orange); }

  .split { grid-template-columns: 1fr; gap: 1.2rem; }

  .find-us { grid-template-columns: 1fr; text-align: center; }
  .find-us .uk-map { max-width: 210px; }
  .retailers { justify-content: center; }

  .range-hero-grid { grid-template-columns: 1fr; }

  .contact-layout { grid-template-columns: 1fr; }

  .product-inner,
  .product--reverse .product-inner { grid-template-columns: 1fr; }
  .product-media,
  .product--reverse .product-media { order: -1; }
  .product-media img { max-width: 215px; }
  .product { text-align: center; }
  .product-facts { text-align: left; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bar .shell { justify-content: center; text-align: center; }
}

@media (max-width: 620px) {
  .range-grid { grid-template-columns: 1fr; }

  .finder-row { flex-direction: column; align-items: stretch; }
  /* In a column flex container flex-basis sizes the HEIGHT, so the 210px
     basis would stretch the field into a tall empty box. */
  .finder-field { flex: 0 0 auto; }
  .finder .btn { width: 100%; justify-content: center; }

  .store { align-items: flex-start; }
  .store-main { flex-basis: 100%; gap: .85rem; }
  .store-meta { margin-left: 0; width: 100%; justify-content: space-between; }
  .range-card > img { aspect-ratio: 16 / 9; }
  .story-gallery { columns: 2 140px; }

  .footer-grid { grid-template-columns: 1fr; }

  /* Stack the nutrition table into one label/value row per figure */
  .nutrition thead { display: none; }
  .nutrition, .nutrition tbody, .nutrition tr { display: block; width: 100%; }
  .nutrition td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    text-align: right;
    padding: .45rem .1rem;
    border-top: 1px solid rgba(0, 0, 0, .1);
  }
  .nutrition td::before {
    content: attr(data-label);
    font-family: var(--font-display);
    font-weight: 600;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .reveal-init { opacity: 1; transform: none; }
  .ticker-track { animation: none; }
  .hero-slide.is-active { animation: none; }
  .store-results.is-open,
  #stockist-intro { animation: none; }
  /* Keep the spinner turning: it is the only signal that work is happening,
     and the reduced-motion cap would otherwise freeze it mid-rotation. */
  .finder-spinner,
  .map-spinner { animation: spin 1.4s linear infinite !important; }
}