/* ============================================================
   Oxenhope Straw Race - styles
   Bright & breezy, high energy. Hand-written so it's easy to tweak.

   CONTENTS
   1. Tokens (colour, type, spacing)
   2. Reset & base
   3. Layout helpers
   4. Buttons & badges
   5. Header / nav
   6. Hero (Ken Burns slideshow)
   7. Sections: impact, charities, how-it-works, shop, event, news
   8. Cards
   9. Footer
   10. Toast / cart
   11. Wavy dividers & decorative blobs
   12. Animations
   13. Responsive
   ============================================================ */

/* 1. TOKENS ------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --c-yellow:      #EFC44A;
  --c-yellow-deep: #E2B233;
  --c-amber:       #E0A248;
  --c-amber-soft:  #F0CE93;
  --c-green:       #4C9B3D;
  --c-green-deep:  #316E29;
  --c-brown:       #8F4E20;
  --c-brown-deep:  #6C3A16;
  --c-cream:       #FBF7EC;
  --c-cream-2:     #F4ECD7;
  --c-ink:         #2A2014;
  --c-ink-soft:    #6A5A47;
  --c-white:       #ffffff;

  --shadow-sm: 0 2px 8px rgba(42,32,20,.08);
  --shadow-md: 0 10px 30px rgba(42,32,20,.12);
  --shadow-lg: 0 24px 60px rgba(42,32,20,.18);
  --shadow-pop: 0 12px 24px -10px rgba(124,61,17,.55);

  --radius:   12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --line: rgba(42,32,20,.12);

  --container: 1180px;
  --gap: clamp(1rem, 3vw, 2rem);

  --font-display: "Inter", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
}

/* 2. RESET & BASE ------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--c-cream); }
body {
  font-family: var(--font-body);
  color: var(--c-ink);
  background: transparent; /* lets the .bg-fx shader show through */
  line-height: 1.6;
  font-size: clamp(16px, 1.05vw, 18px);
  overflow-x: hidden;
}
/* Interactive shader background (mouse/tilt-reactive mesh of brand colours) */
.bg-fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
/* Filmic grain over the whole page - adds tactile texture */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  opacity: .10; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { /* grain stays; it's static */ }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.08; color: var(--c-ink); letter-spacing: -.02em; }
h1 { font-size: clamp(2.5rem, 5.5vw, 4.6rem); font-weight: 800; letter-spacing: -.035em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 800; letter-spacing: -.03em; }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); font-weight: 700; letter-spacing: -.015em; }
p  { color: var(--c-ink-soft); }
::selection { background: var(--c-yellow); color: var(--c-ink); }

/* 3. LAYOUT ------------------------------------------------- */
.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.section { padding: clamp(3.5rem, 8vw, 7rem) 0; position: relative; }
.section--cream { background: transparent; }
.section--cream2 { background: rgba(244,236,215,.45); }
.section--green {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(165deg, #36772d 0%, var(--c-green-deep) 60%, #265a20 100%);
  color: var(--c-white);
}
/* faint diagonal weave for texture */
.section--green::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .6;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 1.5px, transparent 1.5px 24px);
}
/* slow drifting light sheen for dynamism */
.section--green::after {
  content: ""; position: absolute; inset: -25%; z-index: 0; pointer-events: none;
  background: radial-gradient(42% 52% at 32% 22%, rgba(255,255,255,.16), transparent 70%);
  animation: sheen 16s ease-in-out infinite alternate;
}
.section--green > * { position: relative; z-index: 1; }
.section--green h2, .section--green h3 { color: var(--c-white); }
.section--green p { color: rgba(255,255,255,.9); }
@keyframes sheen { from { transform: translate(-12%, -7%) scale(1); } to { transform: translate(14%, 9%) scale(1.15); } }
.section-head { text-align: center; max-width: 760px; margin: 0 auto clamp(2rem,5vw,3.5rem); }
.section-head .eyebrow { margin-bottom: .6rem; }
.section-head p { font-size: 1.1rem; }
.grid { display: grid; gap: var(--gap); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.center { text-align: center; }

/* 4. BUTTONS & BADGES --------------------------------------- */
.btn {
  --btn-bg: var(--c-yellow);
  --btn-fg: var(--c-ink);
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-body); font-weight: 600; font-size: .98rem; letter-spacing: .005em;
  padding: .8rem 1.5rem; border-radius: 10px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: none; cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(42,32,20,.16);
  transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s ease, background .2s ease, filter .2s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(42,32,20,.5); filter: brightness(1.02); }
.btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(42,32,20,.2); }
.btn--green { --btn-bg: var(--c-green); --btn-fg: #fff; }
.btn--brown { --btn-bg: var(--c-brown); --btn-fg: #fff; }
.btn--white { --btn-bg: #fff; --btn-fg: var(--c-ink); }
.btn--ghost {
  background: transparent; color: inherit; box-shadow: none;
  border: 2.5px solid currentColor;
}
.btn--ghost:hover { background: rgba(255,255,255,.12); box-shadow: none; }
.btn--lg { font-size: 1.2rem; padding: 1.05rem 2.1rem; }
.btn--sm { font-size: .95rem; padding: .55rem 1.1rem; box-shadow: 0 6px 14px -6px rgba(42,32,20,.4); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-body); font-weight: 700;
  text-transform: uppercase; letter-spacing: .2em; font-size: .72rem;
  color: var(--c-green-deep); background: none; padding: 0;
}
.eyebrow::before, .eyebrow::after { content: ""; width: 26px; height: 1.5px; background: currentColor; opacity: .55; flex: none; }
.section--green .eyebrow { color: var(--c-yellow); }

.badge-sticker {
  position: absolute; display: grid; place-items: center; text-align: center;
  width: 132px; height: 132px; border-radius: 50%;
  background: var(--c-green); color: #fff; font-family: var(--font-display);
  font-weight: 700; line-height: 1; padding: 1rem;
  box-shadow: var(--shadow-md); transform: rotate(-12deg);
  border: 5px dashed rgba(255,255,255,.55);
}
.badge-sticker b { font-size: 1.7rem; display: block; }
.badge-sticker span { font-size: .72rem; text-transform: uppercase; letter-spacing: 1px; }

/* 5. HEADER / NAV ------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  /* Fully opaque so page content never shows through the header (e.g. the band
     above the logo on mobile) while scrolling. */
  background: rgb(255, 251, 239);
  border-bottom: 3px solid var(--c-cream-2);
}
.nav { display: flex; align-items: center; gap: 1.2rem; padding: .7rem 0; }
.nav--minimal { justify-content: center; }   /* admin header: centred logo, no menu */
.brand { display: inline-flex; align-items: center; }
.brand img { height: 48px; width: auto; }
.brand b { color: var(--c-brown); }
.brand-sub { color: var(--c-green-deep); }
.nav-links { display: flex; align-items: center; gap: .55rem; margin-left: auto; }
.nav-links a {
  --nav-c: var(--c-green); --nav-fg: #fff;
  display: inline-flex; align-items: center; line-height: 1; white-space: nowrap;
  font-weight: 600; font-size: .9rem;
  padding: .62rem 1.2rem; border: none;
  background: var(--nav-c); color: var(--nav-fg);
  box-shadow: 0 2px 5px rgba(42,32,20,.18);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.nav-links a:hover { transform: rotate(-3deg) translateY(-1px); filter: brightness(1.04); }
.nav-links a:active { transform: rotate(0) translateY(0); }
.nav-links a.is-active { box-shadow: 0 0 0 3px var(--c-cream), 0 0 0 5px var(--nav-c); } /* ring marks the current page */
/* Each menu item: its own logo colour + its own shape */
.nav-links a:nth-child(6n+1) { --nav-c: var(--c-yellow);     --nav-fg: var(--c-ink); border-radius: 34% 66% 62% 38% / 58% 34% 66% 42%; }       /* blob */
.nav-links a:nth-child(6n+2) { --nav-c: var(--c-green);      --nav-fg: #fff;         border-radius: 66% 34% 38% 62% / 38% 66% 34% 62%; }       /* blob */
.nav-links a:nth-child(6n+3) { --nav-c: var(--c-amber);      --nav-fg: var(--c-ink); border-radius: 50% 16px 50% 16px; }                       /* leaf (Results - kept) */
.nav-links a:nth-child(6n+4) { --nav-c: var(--c-brown);      --nav-fg: #fff;         border-radius: 38% 62% 67% 33% / 63% 36% 64% 37%; }       /* blob */
.nav-links a:nth-child(6n+5) { --nav-c: var(--c-green-deep); --nav-fg: #fff;         border-radius: 63% 37% 33% 67% / 35% 62% 38% 65%; }       /* blob */
.nav-links a:nth-child(6n+6) { --nav-c: var(--c-yellow);     --nav-fg: var(--c-ink); border-radius: 44% 56% 68% 32% / 34% 63% 37% 66%; }       /* blob (Shop) */
.nav-actions { display: flex; align-items: center; gap: .7rem; }
.cart-btn { position: relative; display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--c-cream-2); border: none; cursor: pointer; }
.cart-btn svg { width: 22px; height: 22px; }
.cart-count {
  position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 5px;
  background: var(--c-green); color: #fff; font-size: 12px; font-weight: 800;
  border-radius: 999px; display: grid; place-items: center; border: 2px solid var(--c-cream);
}
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: .4rem; }
.nav-toggle span { display: block; width: 26px; height: 3px; background: var(--c-ink); border-radius: 3px; margin: 5px 0; transition: .2s; }

/* 6. HERO (Ken Burns slideshow) ----------------------------- */
.hero { position: relative; min-height: min(88vh, 820px); display: grid; align-items: center; overflow: hidden; color: #fff; isolation: isolate; }
.slideshow { position: absolute; inset: 0; z-index: 1; background: var(--c-brown-deep); }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.slide.is-active { opacity: 1; }
.slide .media, .slide img, .slide video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: center top; /* bias to the top so faces aren't cropped */
}
/* Ken Burns: gentle zoom + pan while the slide is active */
.slide.is-active img, .slide.is-active .media {
  animation: kenburns 8s ease-out forwards;
}
.slide[data-pan="2"].is-active img, .slide[data-pan="2"].is-active .media { animation-name: kenburns2; }
.slide[data-pan="3"].is-active img, .slide[data-pan="3"].is-active .media { animation-name: kenburns3; }
/* Animated gradient backdrop for the video slide (shows until a real .mp4 is dropped in) */
.media--video {
  background: linear-gradient(120deg, var(--c-green) 0%, var(--c-amber) 45%, var(--c-yellow) 75%, var(--c-green-deep) 100%);
  background-size: 280% 280%;
}
/* Keep the gradient drifting on the visible video slide (overrides the ken-burns rule) */
.slide.is-active .media--video { animation: drift 12s ease-in-out infinite; }
.hero::after { /* readability scrim - darkest on the left/bottom where the text sits, clear on the right so the photo still reads */
  content: ""; position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(102deg, rgba(18,12,6,.82) 0%, rgba(18,12,6,.6) 30%, rgba(18,12,6,.22) 55%, rgba(18,12,6,0) 78%),
    linear-gradient(0deg, rgba(18,12,6,.6) 0%, rgba(18,12,6,.12) 40%, rgba(18,12,6,0) 70%);
}
.hero-inner { position: relative; z-index: 3; padding: clamp(4rem, 9vw, 7rem) 0; max-width: 760px; }
.hero h1 { color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.55), 0 8px 30px rgba(0,0,0,.5); }
.hero h1 .pop { color: var(--c-yellow); text-shadow: 0 2px 4px rgba(0,0,0,.5); }
.hero p.lead { color: #fff; font-size: clamp(1.1rem, 2vw, 1.45rem); font-weight: 600; margin: 1.1rem 0 1.8rem; text-shadow: 0 1px 3px rgba(0,0,0,.6), 0 4px 18px rgba(0,0,0,.5); max-width: 40ch; }
.hero-stats div b { text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.hero-stats div span { text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 2.2rem; }
.hero-stats div b { font-family: var(--font-display); font-size: 1.8rem; display: block; color: var(--c-yellow); }
.hero-stats div span { font-size: .9rem; color: rgba(255,255,255,.9); }
/* slideshow controls */
.slideshow-dots { position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); display: flex; gap: .55rem; z-index: 4; }
.slideshow-dots button { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; background: transparent; cursor: pointer; padding: 0; transition: .2s; }
.slideshow-dots button.is-active { background: var(--c-yellow); border-color: var(--c-yellow); transform: scale(1.25); }

/* 6b. COUNTDOWN --------------------------------------------- */
.countdown-band {
  background: rgba(244,236,215,.55); text-align: center;
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  border-block: 1px solid rgba(143,78,32,.12);
}
.countdown-band h2 { margin: .4rem 0 0; }
.countdown-timer { display: flex; justify-content: center; gap: clamp(.5rem, 2vw, 1.2rem); flex-wrap: wrap; margin: 1.6rem 0 1rem; }
.cd-unit {
  background: #fff; border-radius: var(--radius); padding: 1rem 1.1rem; min-width: 96px;
  box-shadow: var(--shadow-sm); border: 2px solid rgba(143,78,32,.08);
}
.cd-unit b {
  display: block; font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.2rem, 6vw, 3.4rem); line-height: 1; color: var(--c-green-deep);
  font-variant-numeric: tabular-nums; letter-spacing: -1px;
}
.cd-unit span { font-size: .72rem; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; color: var(--c-ink-soft); }
.countdown-date { font-weight: 700; color: var(--c-brown); margin-top: .2rem; }

/* 7/8. CARDS & SECTIONS ------------------------------------- */
.card {
  background: #fff; border-radius: var(--radius); padding: 1.7rem;
  box-shadow: 0 1px 3px rgba(42,32,20,.06); border: 1px solid var(--line);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(42,32,20,.4); border-color: rgba(42,32,20,.2); }
.card .icon-blob { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 1.1rem; }
.card .icon-blob svg { width: 22px; height: 22px; }
.blob-yellow { background: rgba(239,196,74,.18); color: var(--c-brown-deep); }
.blob-green  { background: rgba(76,155,61,.16); color: var(--c-green-deep); }
.blob-amber  { background: rgba(224,162,72,.18); color: var(--c-brown); }
.blob-brown  { background: rgba(143,78,32,.12); color: var(--c-brown); }

/* Impact stat band */
.stat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); text-align: center; }
.stat b { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.4rem); display: block; color: var(--c-yellow); line-height: 1; }
.stat span { font-weight: 700; }

/* Charity cards */
.charity-card { display: flex; flex-direction: column; }
.charity-logo { width: 100%; height: 96px; margin-bottom: 1rem; border-radius: 10px; background-color: #fff; background-size: contain; background-repeat: no-repeat; background-position: center; }
.charity-card .tag { align-self: flex-start; margin-bottom: .8rem; }
.tag { font-family: var(--font-display); font-size: .72rem; text-transform: uppercase; letter-spacing: 1px; padding: .25rem .7rem; border-radius: var(--radius-pill); background: var(--c-cream-2); color: var(--c-brown-deep); font-weight: 600; }
.tag--green { background: var(--c-green); color: #fff; }
.charity-card h3 { margin-bottom: .4rem; }
.charity-card .give { margin-top: auto; padding-top: 1rem; font-family: var(--font-display); font-weight: 700; color: var(--c-green-deep); }

/* How it works */
.steps { counter-reset: step; }
.step { position: relative; padding-left: 4.4rem; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: -4px; width: 56px; height: 56px;
  display: grid; place-items: center; border-radius: 18px;
  background: var(--c-green); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
  box-shadow: var(--shadow-pop);
}
.step:nth-child(2)::before { background: var(--c-amber); color: var(--c-ink); }
.step:nth-child(3)::before { background: var(--c-yellow); color: var(--c-ink); }
.step:nth-child(4)::before { background: var(--c-brown); }

/* Product cards */
.product-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.product-thumb { aspect-ratio: 4/3; position: relative; overflow: hidden; }
.product-thumb > span { display: none; } /* hide emoji + "photo placeholder" caption */
.product-thumb::after { /* faint brand monogram watermark - refined, not emoji */
  content: ""; position: absolute; inset: 0;
  background: url('../assets/img/logo.svg') center / 42px no-repeat; opacity: .14;
}
.thumb-1 { background: linear-gradient(150deg, #dcebd4, #c2dab6); }
.thumb-2 { background: linear-gradient(150deg, #efdcc2, #ddc4a2); }
.thumb-3 { background: linear-gradient(150deg, #f5e8c6, #ecd7a6); }
.thumb-4 { background: linear-gradient(150deg, #e7d8c6, #cfb69d); }
.product-body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.product-body h3 { margin-bottom: .25rem; }
.product-body .desc { font-size: .92rem; flex: 1; }
.product-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; gap: .6rem; }
.price { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; }
.price small { font-size: .8rem; color: var(--c-ink-soft); font-weight: 600; }
.pill-tag { font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:1px; padding:.2rem .6rem; border-radius:999px; }
.pill-race { background: var(--c-green); color:#fff;}
.pill-merch{ background: var(--c-amber); color: var(--c-ink);}
.pill-event{ background: var(--c-brown); color:#fff;}
.pill-donate{ background: var(--c-yellow); color: var(--c-ink);}

/* Event split */
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem,4vw,3.5rem); align-items: center; }
.event-visual {
  border-radius: var(--radius-lg); min-height: 340px;
  background: linear-gradient(140deg, var(--c-brown), var(--c-brown-deep));
  position: relative; overflow: hidden; box-shadow: var(--shadow-md);
  display: grid; place-items: center; color: #fff; text-align: center; padding: 2rem;
}
.event-visual .big { font-family: var(--font-display); font-size: clamp(2rem,5vw,3.2rem); }

/* News */
.news-card { padding: 0; overflow: hidden; }
.news-thumb { height: 150px; }
.news-body { padding: 1.2rem 1.3rem 1.4rem; }
.news-body .date { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--c-green-deep); }

/* 8b. INNER PAGES ------------------------------------------- */
.page-hero { position: relative; color: #fff; text-align: center; padding: clamp(3.5rem, 8vw, 6rem) 0; overflow: hidden; isolation: isolate; }
.page-hero-bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center top; }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18,12,6,.5), rgba(18,12,6,.72)); }
.page-hero h1 { color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.5), 0 8px 30px rgba(0,0,0,.5); }
.page-hero p { color: #fff; max-width: 62ch; margin: .9rem auto 0; text-shadow: 0 1px 3px rgba(0,0,0,.55); font-size: 1.1rem; }
/* The dark green eyebrow is hard to read over the photo - use brand yellow + shadow for contrast. */
.page-hero .eyebrow { color: var(--c-yellow); text-shadow: 0 1px 3px rgba(0,0,0,.7); }

/* Timeline (what happens on the day) */
.timeline { max-width: 760px; margin: 0 auto; position: relative; padding-left: 2.4rem; }
.timeline::before { content: ""; position: absolute; left: .58rem; top: .4rem; bottom: .4rem; width: 3px; background: linear-gradient(var(--c-green), var(--c-amber), var(--c-brown)); border-radius: 3px; }
.tl-item { position: relative; padding-bottom: 1.8rem; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content: ""; position: absolute; left: -2.4rem; top: .2rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--c-green); border: 3px solid var(--c-cream); box-shadow: 0 0 0 2px var(--c-green); }
.tl-time { font-family: var(--font-display); font-weight: 800; color: var(--c-green-deep); }
.tl-item h3 { margin: .1rem 0 .25rem; }

/* Route stops */
.stops { display: grid; gap: .7rem; max-width: 760px; margin: 0 auto; }
.stop { display: flex; align-items: center; gap: 1rem; background: #fff; border: 2px solid var(--c-cream-2); border-radius: var(--radius); padding: .9rem 1.2rem; box-shadow: var(--shadow-sm); }
.stop b { font-family: var(--font-display); font-size: 1.3rem; color: var(--c-brown); width: 2.2rem; }

/* Results table */
.table-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow-sm); background: #fff; border: 2px solid var(--c-cream-2); }
.results-table { width: 100%; border-collapse: collapse; min-width: 540px; }
.results-table th, .results-table td { text-align: left; padding: .95rem 1.2rem; border-bottom: 1px solid var(--c-cream-2); }
.results-table th { font-family: var(--font-display); font-weight: 700; background: var(--c-cream-2); }
.results-table tr:last-child td { border-bottom: 0; }
.results-table td.year { font-family: var(--font-display); font-weight: 800; color: var(--c-brown); }

/* Admin Orders & Participants tables: stronger header, click/hover a whole row to edit */
.admin-table thead th {
  background: var(--c-green-deep); color: #fff;
  font-family: var(--font-body); font-weight: 700;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
}
.admin-table thead th:first-child { border-radius: 8px 0 0 8px; }
.admin-table thead th:last-child  { border-radius: 0 8px 8px 0; }
.admin-table tbody tr[data-open-order] { cursor: pointer; transition: background .12s ease; }
.admin-table tbody tr[data-open-order]:hover { background: rgba(76,155,61,.12); }
.admin-table tbody tr[data-open-order]:hover td.year { color: var(--c-green-deep); }
/* Expandable admin rows: slim main row, click to reveal a detail row underneath. */
.admin-table--expand { table-layout: auto; }
.admin-table--expand td { vertical-align: middle; }
.admin-table--expand .row-main { cursor: pointer; transition: background .12s ease; }
.admin-table--expand .row-main:hover td { background: rgba(76,155,61,.1); }
.admin-table--expand .row-main.is-open td { background: rgba(76,155,61,.14); }
.chev { display: inline-block; margin-right: .4rem; color: var(--c-green-deep); font-size: .72rem; transition: transform .15s ease; }
.row-main.is-open .chev { transform: rotate(90deg); }
.row-detail > td { background: #faf6ec !important; padding: 1rem 1.4rem 1.2rem !important; border-top: none; }
.row-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .7rem 1.6rem; }
.rd-item { display: flex; flex-direction: column; gap: .1rem; }
.rd-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #8a7a5f; font-weight: 700; }
.rd-item > span:last-child { color: var(--c-ink); font-size: .92rem; line-height: 1.45; }

/* Results by year */
.result-year { padding: 1.4rem 1.6rem; margin-bottom: 1.4rem; }
/* The banded rows provide the structure, so drop the inner boxed border/shadow
   (it doubled up with the card and left awkward gaps around the separated rows). */
.result-year .table-wrap { border: 0; background: transparent; box-shadow: none; border-radius: 0; }
.result-year > .table-wrap { margin-top: .2rem; }
/* These tables fit the card (no forced min-width) and band each row with a gap. */
.result-year .results-table { min-width: 0; width: 100%; border-collapse: separate; border-spacing: 0 .45rem; }
.result-year .results-table th, .result-year .results-table td { padding: .55rem .85rem; border-bottom: 0; }
.result-year .results-table thead th { background: var(--c-green-deep); color: #fff; font-family: var(--font-body); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.result-year .results-table thead th:first-child { border-radius: 8px 0 0 8px; }
.result-year .results-table thead th:last-child { border-radius: 0 8px 8px 0; }
.result-year .results-table tbody td { background: var(--c-cream-2); vertical-align: top; }
.result-year .results-table tbody td:first-child { border-radius: 10px 0 0 10px; }
.result-year .results-table tbody td:last-child { border-radius: 0 10px 10px 0; white-space: nowrap; }
@media (max-width: 560px) {
  .result-year { padding: 1.1rem 1rem; }
  .result-year .results-table { font-size: .88rem; }
  .result-year .results-table th, .result-year .results-table td { padding: .5rem .6rem; }
}
.result-year-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; margin-bottom: .8rem; }
.result-year-head h3 { font-size: clamp(1.7rem, 4vw, 2.2rem); margin: 0; color: var(--c-brown); }
.result-fastest { font-weight: 600; color: var(--c-ink-soft); }
.result-fastest strong { color: var(--c-green-deep); }
.result-awards { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; color: var(--c-ink-soft); }
.result-awards .tag { margin-right: .1rem; }
/* Fancy dress winners */
.result-fancydress { margin-top: 2.4rem; padding-top: 1.8rem; border-top: 2px solid var(--c-cream-2); }
.result-fancydress h4 { margin: 0 0 .8rem; }
.fancydress-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; }
.fancydress-card { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: 1.3rem 1.35rem; background: var(--c-cream-2); border-radius: var(--radius); }
.fancydress-card .tag { margin-bottom: .15rem; }
.fancydress-card strong { font-family: var(--font-display); font-size: 1.2rem; color: var(--c-green-deep); }
/* Fancy dress photo carousel */
.fd-gallery-head { margin-top: 2rem; }
.fd-gallery-head h4 { margin: 0 0 .3rem; }
.fd-carousel { position: relative; margin-top: 1rem; max-width: 100%; }
.fd-track {
  display: flex; gap: 1rem; overflow-x: auto; scroll-behavior: smooth;
  scroll-snap-type: x mandatory; padding: .3rem .3rem 1rem;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; touch-action: pan-x;
  overscroll-behavior-x: contain;
}
.fd-track::-webkit-scrollbar { display: none; }
.fd-slide {
  flex: 0 0 auto; width: clamp(200px, 42%, 300px); aspect-ratio: 4/3;
  scroll-snap-align: start; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm); border: 3px solid #fff; cursor: zoom-in;
  background: var(--c-cream-2); position: relative; transition: transform .18s ease, box-shadow .18s ease;
}
.fd-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fd-slide::after {
  content: "⤢"; position: absolute; right: .5rem; bottom: .5rem; width: 1.8rem; height: 1.8rem;
  display: grid; place-items: center; border-radius: 50%; font-size: .95rem;
  background: rgba(12,8,3,.55); color: #fff; opacity: 0; transition: opacity .18s ease;
}
.fd-slide:hover, .fd-slide:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-md, 0 14px 28px -14px rgba(0,0,0,.35)); }
.fd-slide:hover::after, .fd-slide:focus-visible::after { opacity: 1; }
.fd-nav {
  position: absolute; top: calc(50% - .5rem); transform: translateY(-50%); z-index: 3;
  width: 2.8rem; height: 2.8rem; border-radius: 50%; border: none; cursor: pointer;
  background: var(--c-green); color: #fff; font-size: 1.7rem; line-height: 1;
  display: grid; place-items: center; box-shadow: 0 6px 16px -4px rgba(0,0,0,.4);
  transition: background .18s ease, transform .18s ease, opacity .18s ease;
}
.fd-nav:hover { background: var(--c-green-deep); }
.fd-nav:active { transform: translateY(-50%) scale(.94); }
.fd-nav[hidden] { display: none; }
.fd-nav--prev { left: -.6rem; }
.fd-nav--next { right: -.6rem; }
@media (max-width: 600px) {
  .fd-slide { width: 78%; }
  .fd-nav { width: 2.4rem; height: 2.4rem; font-size: 1.4rem; }
  .fd-nav--prev { left: .2rem; }
  .fd-nav--next { right: .2rem; }
}
/* Gallery lightbox navigation (prev / next / counter) */
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 3rem; height: 3rem; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.92); color: var(--c-ink); font-size: 2rem; line-height: 1;
  display: grid; place-items: center; box-shadow: var(--shadow-sm); transition: background .18s ease;
}
.lightbox-nav:hover { background: #fff; }
.lightbox-prev { left: 0; transform: translate(-140%, -50%); }
.lightbox-next { right: 0; transform: translate(140%, -50%); }
.lightbox-count {
  position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 160%);
  color: #fff; font-family: var(--font-display); font-size: .95rem; letter-spacing: .04em;
  background: rgba(12,8,3,.5); padding: .3rem .9rem; border-radius: var(--radius-pill);
}
@media (max-width: 700px) {
  .lightbox-prev { transform: translate(0, -50%); left: .4rem; }
  .lightbox-next { transform: translate(0, -50%); right: .4rem; }
  .lightbox-nav { width: 2.6rem; height: 2.6rem; font-size: 1.6rem; }
}
/* Expandable full finishing order */
.result-fullfield { margin-top: 1.4rem; }
.result-fullfield h4 { margin: 0 0 .2rem; }
.results-table tr.is-collapsed { display: none; }
.expand-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.expand-actions[hidden] { display: none; }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.gallery .shot { aspect-ratio: 4/3; border-radius: var(--radius); background-size: cover; background-position: center; box-shadow: var(--shadow-sm); }

/* FAQ accordion */
.faq { max-width: 760px; margin: 0 auto; }
.faq-item { background: #fff; border: 2px solid var(--c-cream-2); border-radius: var(--radius); margin-bottom: .8rem; overflow: hidden; box-shadow: var(--shadow-sm); }
.faq-item summary { cursor: pointer; list-style: none; padding: 1.1rem 1.3rem; font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--c-green-deep); transition: transform .2s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-a { padding: 0 1.3rem 1.2rem; color: var(--c-ink-soft); }

/* Forms */
.form { max-width: 620px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.form label { font-weight: 700; font-size: .9rem; }
.form input, .form textarea, .form select { width: 100%; margin-top: .35rem; padding: .8rem 1rem; border: 2px solid var(--c-cream-2); border-radius: 14px; font: inherit; background: #fff; color: var(--c-ink); }
.form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--c-green); }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-note { font-size: .85rem; color: var(--c-ink-soft); text-align: center; }
.form-note.is-ok { color: var(--c-green-deep); font-weight: 700; }
.form-note.is-err { color: #c0392b; font-weight: 700; }
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-bottom: 2.5rem; }
.contact-card { text-align: center; }
.contact-card .icon-blob { margin: 0 auto 1rem; }

@media (max-width: 720px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .contact-cards { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .form .row { grid-template-columns: 1fr; } }

/* 8c. CART & CHECKOUT --------------------------------------- */
.muted { color: var(--c-ink-soft); font-size: .88rem; }
.cart-grid, .checkout-grid { display: grid; grid-template-columns: 1fr 360px; gap: var(--gap); align-items: start; }
.cart-lines { display: grid; gap: .8rem; }
.cart-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.3rem; }
.cart-row-main { flex: 1 1 220px; }
.cart-row-main h3 { margin: 0; font-size: 1.12rem; }
.cart-row-price { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; margin-left: auto; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: #fff; }
.qstep { width: 36px; height: 38px; border: none; background: #fff; color: var(--c-ink); cursor: pointer; font-size: 1.15rem; line-height: 1; }
.qstep:hover { background: var(--c-cream-2); }
.qval { align-self: stretch; min-width: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 .4rem; background: var(--c-green); color: #fff; font-weight: 700; }
.link-remove { background: none; border: none; color: var(--c-brown); cursor: pointer; font-size: .85rem; text-decoration: underline; }
.cart-summary, .checkout-summary { position: sticky; top: 90px; }
.sum-row { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; color: var(--c-ink-soft); }
.sum-row.total { border-top: 1px solid var(--line); margin-top: .5rem; padding-top: .8rem; font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--c-ink); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem; }
.chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: .4rem .9rem; cursor: pointer; font: inherit; font-size: .88rem; line-height: 1.3; transition: background .15s, color .15s; }
.chip:hover { border-color: var(--c-green-deep); }
.chip.is-on { background: var(--c-green-deep); color: #fff; border-color: var(--c-green-deep); }
.tip-custom { width: 92px; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: .4rem .9rem; font: inherit; font-size: .88rem; line-height: 1.3; appearance: textfield; -moz-appearance: textfield; }
.tip-custom::-webkit-outer-spin-button, .tip-custom::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tip-custom:focus { outline: none; border-color: var(--c-green-deep); }
.checkout-main { display: grid; gap: 1rem; }
.racer-label { font-family: var(--font-display); font-weight: 600; margin-bottom: .9rem; }
.pay-disabled { background: var(--c-cream-2); border: 1px dashed rgba(143,78,32,.4); border-radius: 10px; padding: .75rem .9rem; font-size: .82rem; color: var(--c-brown-deep); margin-top: 1rem; }
.child-warn { background: #FFF7E6; border: 1px solid #EFC44A; border-radius: 12px; padding: .9rem 1.1rem; margin: .9rem 0 1.1rem; font-size: .95rem; line-height: 1.5; color: var(--c-brown-deep); }
.child-warn strong { color: var(--c-brown-deep); }
/* "Enter the kids too" add-on - shown under the adult ticket and in the basket
   with its own quantity stepper, so children's pairs are added inline rather
   than the two tickets being bought in isolation. */
.kids-nudge {
  display: flex; align-items: flex-start; gap: 1rem 1.2rem; flex-wrap: wrap;
  background: linear-gradient(135deg, #FFF3D6 0%, #FDE7B8 100%);
  border: 2px solid var(--c-yellow-deep); border-radius: 16px;
  padding: 1.1rem 1.3rem; margin: 0 0 1.4rem;
  box-shadow: 0 6px 18px rgba(226, 178, 51, .18);
}
.kids-nudge-art { font-size: 2.6rem; line-height: 1; flex: none; }
/* Children's-ticket product image inside the add-on: a compact thumbnail that
   links through to the ticket's own page. Falls back to the same branded
   gradient as the shop cards when there's no photo. */
.kids-nudge-thumb {
  flex: none; width: 96px; height: 96px; border-radius: 12px; overflow: hidden;
  display: block; position: relative; text-decoration: none;
  border: 2px solid var(--c-white); box-shadow: 0 2px 8px rgba(108, 58, 22, .18);
  transition: transform .15s, box-shadow .15s;
}
.kids-nudge-thumb:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(108, 58, 22, .28); }
/* Faint brand watermark, only visible on the gradient fallback (a real photo
   sits above it). Matches the shop cards' monogram. */
.kids-nudge-thumb:not([style])::after {
  content: ""; position: absolute; inset: 0;
  background: url('../assets/img/logo.svg') center / 42px no-repeat; opacity: .14;
}
.kids-nudge-body { flex: 1 1 240px; min-width: 200px; }
.kids-nudge-body h3 { margin: 0 0 .25rem; color: var(--c-brown-deep); font-size: 1.15rem; }
.kids-nudge-body p { margin: 0; color: var(--c-brown-deep); font-size: .92rem; line-height: 1.45; }
.kids-nudge-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; margin-top: .85rem; }
.kids-nudge-cta { flex: none; white-space: nowrap; }
/* On the product page the add-on sits on its own line under the buy button. */
.kids-nudge--inline { margin: 1.2rem 0 0; }
@media (max-width: 520px) {
  .kids-nudge-actions { width: 100%; }
  .kids-nudge-cta { flex: 1 1 auto; justify-content: center; }
}
.check { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; }
.check input { margin-top: .3rem; flex: none; }
.field-bad { border-color: #c0392b !important; background: #fdf3f2; }
.form-error { color: #c0392b; font-weight: 600; text-align: center; margin-top: .6rem; }
.confirm-badge { display: inline-block; background: var(--c-green-deep); color: #fff; font-size: .72rem; text-transform: uppercase; letter-spacing: .16em; padding: .35rem .85rem; border-radius: 999px; margin-bottom: 1rem; }
/* Accessible label hidden visually but read by screen readers. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* Honeypot spam trap: kept off-screen (not display:none, which some bots skip). */
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Mailing-list sign-up (homepage): white card on the green band. */
.signup { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; max-width: 960px; margin: 0 auto; padding: 2rem 2.2rem; }
/* The card is white, but it sits inside .section--green which forces headings
   and text white - restore readable colours for the card's own content. */
.signup-copy h2 { margin: .3rem 0 .6rem; color: var(--c-green-deep); }
.signup-copy p { margin: 0; color: var(--c-ink-soft); }
.signup-consent, .signup-consent span { color: var(--c-ink-soft); }
.signup-form { display: flex; flex-direction: column; gap: .9rem; }
.signup-row { display: flex; flex-direction: column; gap: .6rem; }
.signup-form input[type="text"], .signup-form input[type="email"] { width: 100%; padding: .8rem 1rem; border: 2px solid var(--c-cream-2); border-radius: var(--radius); font: inherit; background: #fff; }
.signup-form input:focus { outline: none; border-color: var(--c-green); }
.signup-consent { font-size: .85rem; color: var(--c-ink-soft); }
.signup-msg { margin: 0; font-size: .9rem; font-weight: 600; }
.signup-msg.is-ok { color: var(--c-green-deep); }
.signup-msg.is-err { color: #c0392b; }
@media (max-width: 760px) { .signup { grid-template-columns: 1fr; padding: 1.6rem; } }
@media (max-width: 900px) {
  .cart-grid, .checkout-grid { grid-template-columns: 1fr; }
  .cart-summary, .checkout-summary { position: static; }
}

/* 8d. PRODUCT PAGE / NEWS / INSTAGRAM / ADMIN / POLICY ------ */
.shop-group-title { margin: 2.2rem 0 1.2rem; }
.shop-group-title:first-child { margin-top: 0; }
.view-link { font-size: .8rem; font-weight: 700; color: var(--c-green-deep); }

.crumb { font-size: .85rem; color: var(--c-ink-soft); margin-bottom: 1.5rem; }
.crumb a { color: var(--c-green-deep); font-weight: 600; }
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.product-detail-media { aspect-ratio: 1/1; border-radius: var(--radius-lg); position: relative; overflow: hidden; box-shadow: var(--shadow-sm); }
.product-detail-media::after { content: ""; position: absolute; inset: 0; background: url('../assets/img/logo.svg') center / 76px no-repeat; opacity: .14; }
.product-detail-info h1 { margin: .6rem 0 .3rem; }
.product-price { font-family: var(--font-display); font-weight: 800; font-size: 1.8rem; }
.product-desc { margin: .9rem 0 1.3rem; color: var(--c-ink-soft); line-height: 1.7; }
.opt { margin-bottom: 1rem; }
.opt > label { display: block; font-weight: 700; font-size: .85rem; margin-bottom: .45rem; }
.opt-vals { display: flex; gap: .5rem; flex-wrap: wrap; }
.add-row { display: flex; align-items: center; gap: 1rem; margin-top: 1.2rem; flex-wrap: wrap; }
.add-incart { font-weight: 700; color: var(--c-green-deep); font-size: .95rem; }
.add-incart[hidden] { display: none; }
/* Add-to-cart confirmation: flash to green and give a little pop. */
.btn--added { background: var(--c-green) !important; color: #fff !important; animation: addedPop .45s ease; }
@keyframes addedPop {
  0% { transform: scale(1); }
  35% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
/* Cart icon bump when an item is added. */
.cart-btn.is-bump { animation: cartBump .5s ease; }
@keyframes cartBump {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.22) rotate(-8deg); }
  60% { transform: scale(1.05) rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .btn--added, .cart-btn.is-bump { animation: none; }
}

.insta-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem; }
.insta-tile { aspect-ratio: 1/1; border-radius: var(--radius); background-size: cover; background-position: center; position: relative; overflow: hidden; box-shadow: var(--shadow-sm); display: flex; align-items: flex-end; }
.insta-tile span { position: relative; z-index: 1; color: #fff; font-weight: 700; font-size: .78rem; padding: .55rem .65rem; opacity: 0; transition: opacity .2s; }
.insta-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(18,12,6,.6), transparent 55%); opacity: 0; transition: opacity .2s; }
.insta-tile:hover { transform: translateY(-2px); }
.insta-tile:hover::after, .insta-tile:hover span { opacity: 1; }

.ig-follow { max-width: 440px; margin: 2rem auto 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.ig-follow-head { display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem; }
.ig-avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; background: var(--c-cream-2); padding: 4px; }
.ig-follow-meta { display: flex; flex-direction: column; line-height: 1.25; }
.ig-follow-meta strong { font-size: .95rem; }
.ig-follow-meta span { font-size: .8rem; color: var(--c-ink-soft); }
.ig-follow-head .btn { margin-left: auto; }
.ig-follow-post { display: block; aspect-ratio: 1/1; background-size: cover; background-position: center top; position: relative; }
.ig-follow-badge { position: absolute; top: .7rem; left: .7rem; background: rgba(18,12,6,.55); color: #fff; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: .25rem .6rem; border-radius: 999px; }
.ig-follow-foot { padding: 1rem; }
.ig-follow-foot p { margin: 0 0 .35rem; font-size: .9rem; color: var(--c-ink); }

/* Sponsors */
.sponsor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.sponsor-card { display: flex; flex-direction: column; text-align: center; align-items: center; }
.sponsor-logo { width: 100%; height: 110px; border-radius: 10px; background: var(--c-cream-2); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; color: var(--c-brown); letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; margin-bottom: 1rem; }
.sponsor-card h3 { margin-bottom: .3rem; }
.sponsor-card p { flex: 1; }
.sponsor-card .btn { margin-top: 1rem; }

/* Route map */
.route-map { max-width: 900px; margin: 0 auto; }
.route-map svg { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.route-map-figure { margin: 0; }
.route-map-figure a { display: block; position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); cursor: zoom-in; }
.route-map-figure img { width: 100%; height: auto; display: block; }
.route-map-zoom { position: absolute; right: .8rem; bottom: .8rem; background: rgba(20,14,6,.72); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .02em; padding: .4rem .7rem; border-radius: var(--radius-pill); pointer-events: none; }

/* Image lightbox */
.lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1.2rem; background: rgba(12,8,3,.85); opacity: 0; transition: opacity .2s ease; cursor: zoom-out; }
.lightbox.show { opacity: 1; }
.lightbox-inner { position: relative; max-width: 96vw; max-height: 92vh; }
.lightbox-img { display: block; max-width: 96vw; max-height: 92vh; width: auto; height: auto; border-radius: 8px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); cursor: default; }
.lightbox-close { position: absolute; top: 0; right: 0; transform: translate(40%,-40%); width: 2.4rem; height: 2.4rem; border-radius: 50%; border: none; background: #fff; color: var(--c-ink); font-size: 1.7rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow-sm); }
@media (max-width: 600px) { .lightbox-close { transform: none; top: .4rem; right: .4rem; } }

/* Donate */
.donate-box { max-width: 560px; margin: 0 auto; }
.donate-amounts { border: none; padding: 0; margin: 0 0 1.2rem; }
.donate-amounts legend { font-weight: 700; font-size: .9rem; margin-bottom: .5rem; padding: 0; }
.donate-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.donate-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.donate-fields label { display: block; font-weight: 700; font-size: .9rem; }
.donate-fields input { width: 100%; margin-top: .35rem; padding: .8rem 1rem; border: 2px solid var(--c-cream-2); border-radius: 14px; font: inherit; color: var(--c-ink); }
.donate-fields input:focus { outline: none; border-color: var(--c-green); }
.donate-check { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; margin-bottom: 1rem; }
.donate-check input { margin-top: .25rem; flex: none; }
.donate-check span { flex: 1; }
@media (max-width: 480px) { .donate-fields { grid-template-columns: 1fr; } }

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

.post { max-width: 760px; margin: 0 auto; }
.post .crumb { display: inline-block; }
.post .date { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--c-green-deep); display: block; margin-top: .6rem; }
.post h1 { margin: .3rem 0 1rem; }
.post-hero { height: clamp(200px, 40vw, 380px); border-radius: var(--radius-lg); margin-bottom: 1.5rem; box-shadow: var(--shadow-sm); }
.post-body p { margin-bottom: 1rem; font-size: 1.05rem; line-height: 1.75; color: var(--c-ink-soft); }

.admin-tabs { display: flex; flex-wrap: wrap; gap: .7rem 1.4rem; margin-bottom: 1.6rem; padding-bottom: 1.2rem; border-bottom: 2px solid var(--c-cream-2); }
.admin-tab-group { display: flex; flex-direction: column; gap: .4rem; }
.admin-tab-group-label { font-family: var(--font-display); font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--c-ink-soft); padding-left: .2rem; }
.admin-tab-row { display: flex; gap: .4rem; flex-wrap: wrap; }
.admin-tab { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: .45rem 1rem; font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.admin-tab:hover { border-color: var(--c-green); }
.admin-tab.is-on { background: var(--c-green-deep); color: #fff; border-color: var(--c-green-deep); }
@media (max-width: 640px) { .admin-tabs { gap: .6rem 1rem; } }
.admin-toolbar { display: flex; justify-content: flex-end; gap: .5rem; margin-bottom: 1rem; }
.admin-help { border-color: var(--c-green-deep); color: var(--c-green-deep); font-weight: 700; }
.admin-logout { border-color: var(--c-brown); color: var(--c-brown); }
/* Help modal (admin) */
.help-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1.2rem; background: rgba(20,14,6,.55); opacity: 0; transition: opacity .2s ease; }
.help-modal.show { opacity: 1; }
.help-card { position: relative; background: #fff; border-radius: 16px; max-width: 540px; width: 100%; max-height: 85vh; overflow: auto; padding: 1.8rem; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); transform: translateY(10px); transition: transform .2s ease; }
.help-modal.show .help-card { transform: none; }
.help-close { position: absolute; top: .5rem; right: .8rem; border: none; background: none; font-size: 1.9rem; line-height: 1; color: var(--c-ink-soft); cursor: pointer; }
.help-body { color: var(--c-ink-soft); font-size: 1rem; line-height: 1.6; }
.help-body p { margin: 0 0 .8rem; }
.help-body p:last-child { margin-bottom: 0; }
.admin-form { max-width: 640px; margin: 0 0 1rem; }
.admin-form select { width: 100%; margin-top: .35rem; padding: .8rem 1rem; border: 2px solid var(--c-cream-2); border-radius: 14px; font: inherit; background: #fff; color: var(--c-ink); }
.admin-list { list-style: none; padding: 0; max-width: 640px; }
.admin-list li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .7rem 1rem; margin-bottom: .5rem; }

.policy { max-width: 760px; margin: 0 auto; }
.policy h2 { margin: 1.9rem 0 .6rem; font-size: 1.35rem; }
.policy p, .policy li { color: var(--c-ink-soft); }
.policy ul { padding-left: 1.2rem; display: grid; gap: .4rem; margin-bottom: .6rem; }
.policy a { color: var(--c-green-deep); font-weight: 600; }

.cookie-bar { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 200; max-width: 680px; margin: 0 auto; background: var(--c-ink); color: #fff; border-radius: var(--radius); padding: 1rem 1.2rem; box-shadow: var(--shadow-lg); display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; transform: translateY(180%); transition: transform .3s ease; }
.cookie-bar.show { transform: translateY(0); }
.cookie-bar p { color: rgba(255,255,255,.9); font-size: .88rem; margin: 0; flex: 1 1 300px; }
.cookie-bar a { color: var(--c-yellow); text-decoration: underline; }
.footer-charity { font-size: .85rem; margin-top: .7rem; }
.footer-charity a { color: var(--c-yellow); }

@media (max-width: 760px) { .product-detail { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .insta-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .insta-grid { grid-template-columns: repeat(2, 1fr); } }

/* 9. FOOTER ------------------------------------------------- */
.site-footer { background: var(--c-ink); color: rgba(255,255,255,.8); padding: clamp(3rem,6vw,4.5rem) 0 2rem; }
.site-footer h4 { color: #fff; margin-bottom: .9rem; font-size: 1.05rem; }
.site-footer p { color: rgba(255,255,255,.78); }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1.1fr; gap: var(--gap); }
.site-footer a:hover { color: var(--c-yellow); }
.footer-brand img { height: 54px; width: auto; margin-bottom: .9rem; background: #fff; padding: 8px 12px; border-radius: 12px; }
.footer-links { list-style: none; padding: 0; display: grid; gap: .5rem; }
.footer-bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .85rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem; }
.social { display: flex; gap: .6rem; }
.social a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.1); display: grid; place-items: center; }
.social a:hover { background: var(--c-green); }

/* 10. TOAST ------------------------------------------------- */
.toast {
  position: fixed; bottom: 1.4rem; left: 50%; transform: translateX(-50%) translateY(160%);
  background: var(--c-green); color: #fff; font-weight: 700; font-family: var(--font-display);
  padding: .9rem 1.4rem; border-radius: var(--radius-pill); box-shadow: var(--shadow-lg);
  z-index: 100; transition: transform .3s cubic-bezier(.2,1.3,.5,1);
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* 11. WAVY DIVIDERS & BLOBS --------------------------------- */
.wave { display: block; width: 100%; height: clamp(40px, 6vw, 90px); }
.wave--flip { transform: rotate(180deg); }
.deco-blob { position: absolute; z-index: 0; border-radius: 46% 54% 60% 40% / 55% 48% 52% 45%; filter: blur(2px); opacity: .5; pointer-events: none; }

/* 12. ANIMATIONS -------------------------------------------- */
@keyframes kenburns  { from { transform: scale(1.0)  translate(0,0); } to { transform: scale(1.16) translate(-2%, -2%); } }
@keyframes kenburns2 { from { transform: scale(1.18) translate(3%, 1%); } to { transform: scale(1.0)  translate(0,0); } }
@keyframes kenburns3 { from { transform: scale(1.05) translate(-2%, 2%); } to { transform: scale(1.2) translate(2%, -1%); } }
@keyframes drift { 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }
@keyframes floaty { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-12px);} }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .slide.is-active img, .slide.is-active .media { animation: none; }
  .media--video { animation: none; }
  .section--green::after { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* 13. RESPONSIVE -------------------------------------------- */
@media (max-width: 960px) {
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .cols-3 { grid-template-columns: repeat(2, 1fr); }
  .stat-band { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  .nav-links, .nav-actions .btn { display: none; }
  /* .nav-links normally carries margin-left:auto to push the header's right-hand
     group over; it's hidden on mobile, so push .nav-actions itself instead. */
  .nav-actions { margin-left: auto; }
  .nav-toggle { display: block; }
  .nav-links.open {
    display: flex; flex-direction: column; align-items: flex-start; gap: .6rem;
    position: absolute; top: 100%; left: 0; right: 0; background: var(--c-cream);
    padding: 1.4rem 1.5rem; box-shadow: var(--shadow-md); margin: 0;
  }
}
@media (max-width: 720px) {
  .cols-2 { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .cols-4, .cols-3 { grid-template-columns: 1fr; }
  .stat-band { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-stats { gap: 1rem; }
}

/* 14. FLAT LOOK -------------------------------------------- */
/* Bold, colourful, flat: no box-shadows anywhere (hero text-shadows kept for legibility) */
*, *::before, *::after { box-shadow: none !important; }
/* Keep a button's own text colour even inside prose link styling (fixes green-on-yellow) */
.policy a.btn { color: var(--btn-fg); }

/* 15. SPONSOR TIERS --------------------------------------- */
.sponsor-rank {
  font-family: var(--font-display); font-weight: 800; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--c-brown-deep); background: var(--c-cream-2);
  padding: .28rem .7rem; border-radius: var(--radius-pill); margin-bottom: .9rem;
}
.sponsor-rank--beer { background: var(--c-amber-soft); color: var(--c-brown-deep); }
.sponsor-rank--pub  { background: var(--c-green); color: #fff; }
.sponsor-grid--primary { grid-template-columns: repeat(3, 1fr); }
.sponsor-card--primary { border: 3px solid var(--c-yellow); background: var(--c-cream); }
.sponsor-card--primary .sponsor-rank { background: var(--c-yellow); color: var(--c-ink); }
@media (max-width: 900px) { .sponsor-grid--primary { grid-template-columns: 1fr; } }

/* Beer / pub groups: 3 across each row with any leftover cards centred beneath,
   so the rows stay balanced no matter how many sponsors are in the tier
   (e.g. after moving one from beer to pub). */
.sponsor-grid--five { display: flex; flex-wrap: wrap; justify-content: center; }
.sponsor-grid--five > .sponsor-card { flex: 0 1 calc(33.333% - var(--gap)); }
/* The pubs are a linear route - lay them out 2 / 1 / 2 (two, one centred,
   two) so the dotted race line flows in an S down the page. Works on phones
   too, and keeps the curve flowing nicely (drawRouteArrows). */
.sponsor-grid[data-sponsors="pub"] {
  display: grid; grid-template-columns: 1fr 1fr; padding-top: 3rem;
}
.sponsor-grid[data-sponsors="pub"] > .sponsor-card:nth-child(3) {
  grid-column: 1 / -1; justify-self: center; width: calc(50% - var(--gap) / 2);
}
.route-arrows { position: absolute; inset: 0; pointer-events: none; color: var(--c-brown); z-index: 4; opacity: .85; }
.route-badge {
  position: absolute; transform: translate(-50%, -118%);
  display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
  background: var(--c-brown); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: .62rem;
  text-transform: uppercase; letter-spacing: .05em;
  padding: .26rem .6rem; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm); z-index: 5;
}
.route-badge--end { background: var(--c-green-deep); }
.route-badge__flag { font-size: .9rem; }
@media (max-width: 900px) { .sponsor-grid--five > .sponsor-card { flex-basis: calc(50% - var(--gap)); } }
@media (max-width: 560px) { .sponsor-grid--five > .sponsor-card { flex-basis: 100%; } }

/* 16. HERO BUY BUTTON + STOCK NOTE ------------------------ */
.btn--buy {
  font-weight: 800; letter-spacing: .01em;
  outline: 3px solid var(--c-yellow); outline-offset: 3px;
  animation: buyPulse 2s ease-in-out infinite;
  /* Stack the label above the stock line (the button is a flex row by default,
     so a plain <br> won't break - column layout puts the quantity on its own line). */
  flex-direction: column; gap: .15rem;
}
.btn--buy:hover { animation: none; }
@keyframes buyPulse {
  0%, 100% { transform: scale(1); outline-color: rgba(239,196,74,.9); }
  50%      { transform: scale(1.04); outline-color: rgba(239,196,74,.35); }
}
@media (prefers-reduced-motion: reduce) { .btn--buy { animation: none; } }
.btn-stock {
  display: block;
  font-size: .8rem; font-weight: 700; letter-spacing: .01em;
  opacity: .92;
}
.btn-stock:empty { display: none; }
.hero-stock {
  margin-top: 1.1rem; font-weight: 700; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.6); font-size: 1rem;
}
.hero-stock.is-low {
  display: inline-block; background: #c0392b; color: #fff;
  padding: .5rem .95rem; border-radius: var(--radius-pill);
  text-shadow: none; animation: lowPulse 1.4s ease-in-out infinite;
}
@keyframes lowPulse { 0%,100% { opacity: 1; } 50% { opacity: .72; } }
@media (prefers-reduced-motion: reduce) { .hero-stock.is-low { animation: none; } }

/* 17. LOW-STOCK TICKER ------------------------------------ */
.stock-ticker {
  background: #c0392b; color: #fff; overflow: hidden; white-space: nowrap;
  border-bottom: 3px solid #8e2a1f;
}
.stock-ticker .ticker-track {
  display: inline-block; padding: .6rem 0;
  animation: tickerScroll 26s linear infinite;
}
.ticker-seg { font-weight: 800; letter-spacing: .02em; padding: 0 1.5rem; }
.ticker-seg a { color: var(--c-yellow); text-decoration: underline; font-weight: 800; }
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.stock-ticker:hover .ticker-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .stock-ticker .ticker-track { animation: none; white-space: normal; }
}

/* 18. ADMIN: STOCK + PARTICIPANTS ------------------------- */
.admin-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.admin-log { max-height: 460px; overflow: auto; margin: 0; background: #211a10; color: #ece4d6; padding: 1rem 1.1rem; border-radius: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.results-table tbody tr[data-open-order] { cursor: pointer; transition: background .15s ease; }
.results-table tbody tr[data-open-order]:hover { background: var(--c-cream-2); }
.stock-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.stock-card { background: var(--c-cream-2); border-radius: var(--radius); padding: 1.2rem; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; }
.stock-card b { font-family: var(--font-display); font-size: 2rem; color: var(--c-brown); display: block; line-height: 1; }
.stock-card span { font-size: .82rem; color: var(--c-ink-soft); }
.stock-pill { display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: .85rem; padding: .3rem .85rem; border-radius: var(--radius-pill); }
/* The label rule above would otherwise dim the pill text - keep it white. */
.stock-card .stock-pill { color: #fff; margin: 0; }
.stock-pill--ok  { background: var(--c-green); color: #fff; }
.stock-pill--low { background: #c0392b; color: #fff; }
.stock-pill--out { background: var(--c-ink-soft); color: #fff; }
@media (max-width: 620px) { .stock-cards { grid-template-columns: 1fr 1fr; } }

/* 19a. STOCK / SOLD-OUT INDICATORS ------------------------ */
/* Override .product-thumb > span { display:none } so the sold-out badge shows. */
.product-thumb > span.sold-badge, .sold-badge {
  display: inline-block; position: absolute; top: .6rem; left: .6rem; z-index: 2;
  background: var(--c-ink-soft, #5b4d3a); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: .78rem;
  padding: .3rem .7rem; border-radius: var(--radius-pill); letter-spacing: .02em;
}
.product-card.is-soldout .product-thumb { filter: grayscale(.6); opacity: .85; }
.stock-line { font-weight: 700; color: var(--c-green-deep); margin: -.2rem 0 .4rem; }
.stock-line--low { color: #c0392b; }
/* Orders table Status column: a green tick (confirmed) or red cross (not). */
.status-ico { font-size: 1.35rem; font-weight: 800; line-height: 1; }
.status-ico--ok { color: var(--c-green); }
.status-ico--no { color: #c0392b; }
.status-warn { color: #c0392b; font-size: .95rem; cursor: help; }
/* Admin table filter bar + sortable headers. */
.admin-filters { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.admin-filter { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 700; color: var(--c-ink-soft); }
.admin-filter select { font: inherit; font-size: .85rem; font-weight: 500; color: var(--c-ink); padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.admin-sort { user-select: none; }
.admin-sort:hover { color: var(--c-yellow); }

/* Admin: per-product editor grid */
.admin-prod-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.admin-prod-edit { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem; gap: .7rem; }
.admin-prod-head { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; margin-bottom: .2rem; }
.admin-prod-head b { font-size: 1.05rem; }
.admin-prod-head .muted { font-size: .8rem; }
.admin-prod-head .stock-pill { margin: .2rem 0; }
.admin-prod-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem 1rem; margin-top: .2rem; }
/* Hidden (disabled) product: dimmed in the admin list, un-dims while editing. */
.admin-prod-edit.is-hidden-prod { opacity: .6; background: var(--c-cream); }
.admin-prod-edit.is-hidden-prod:focus-within { opacity: 1; }
/* Product image preview + upload in the admin product editor. */
.admin-prod-media { display: flex; align-items: center; gap: .9rem; }
.admin-prod-preview { width: 120px; height: 84px; flex: none; border-radius: 10px; border: 1px solid var(--line); background: var(--c-cream-2) center / cover no-repeat; display: grid; place-items: center; color: var(--c-ink-soft); font-size: .72rem; font-weight: 700; }
.admin-prod-preview.has-img { color: transparent; font-size: 0; }
.admin-prod-media-actions { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.prod-pos { display: flex; flex-direction: column; gap: .25rem; font-size: .72rem; font-weight: 700; color: var(--c-ink-soft); }
.prod-pos select { font: inherit; font-size: .82rem; font-weight: 500; color: var(--c-ink); padding: .35rem .5rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
@media (max-width: 760px) { .admin-prod-grid { grid-template-columns: 1fr; } }

/* 19b. SPONSOR LOGO IMAGE + ADMIN EDITOR ------------------ */
.sponsor-logo.has-img { background-size: contain; background-repeat: no-repeat; background-position: center; background-color: #fff; padding: .8rem; color: transparent; font-size: 0; }
.sponsor-admin-list { display: grid; gap: 1rem; }
.sponsor-admin { display: grid; grid-template-columns: 200px 1fr; gap: 1.2rem; align-items: start; }
.sponsor-admin-media { display: flex; flex-direction: column; gap: .5rem; }
.sponsor-admin-media .sponsor-logo { margin-bottom: 0; }
.sponsor-upload { cursor: pointer; text-align: center; justify-content: center; }
.sponsor-admin-fields { gap: .7rem; }
.sponsor-admin-actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: .2rem; }
.sponsor-admin-actions [data-move-sponsor] { padding: .35rem .7rem; line-height: 1; }
@media (max-width: 620px) { .sponsor-admin { grid-template-columns: 1fr; } }

/* 19c. ADMIN LIST EDITOR (FAQ / charities / results / raceday) + CSV ----- */
.admin-section-title { font-family: var(--font-display); }
.list-editor { display: grid; gap: 1rem; }
.list-edit-row { padding: 1.1rem 1.2rem; }
.list-edit-actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: .2rem; }
.list-edit-actions [data-col-move] { padding: .35rem .7rem; line-height: 1; }
.csv-help { margin-bottom: 1.6rem; background: var(--c-cream-2); }
.csv-help h3 { margin-bottom: .5rem; }
.csv-help .table-wrap { margin: .8rem 0; }
.csv-cols { margin: .8rem 0 .6rem; padding-left: 1.1rem; display: grid; gap: .3rem; color: var(--c-ink-soft); }
.csv-actions { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }
.csv-actions select { padding: .5rem .7rem; border-radius: 8px; border: 1px solid var(--line); font: inherit; }

/* 19. CHECKOUT CONFIRMATION EMAIL NOTE -------------------- */
.confirm-email {
  background: var(--c-cream-2); border-radius: var(--radius);
  padding: 1rem 1.2rem; margin: 0 auto; max-width: 46ch; text-align: left;
}
.confirm-email p { margin: 0; }