/* =========================================================
   STAFFORDSHIRE GARDEN SUPPLIES - PROTOTYPE 06
   Single-file HTML/CSS/JS prototype
   Brand tokens from brand-guidelines v0.1 (12 May 2026)
   Product data from garden-supplies-content-seed.md
   ========================================================= */

:root {
  /* Greens */
  --moss:      #2D4A2E;
  --fern:      #4A6B3A;
  --sage:      #9CAE89;
  --lichen:    #C4CFB1;
  --moss-deep: #1F3520;

  /* Earths */
  --bark:      #3A2A1C;
  --loam:      #6B4F35;
  --clay:      #B5663E;
  --wheat:     #D4C29A;

  /* Neutrals (warm) */
  --limestone: #F5F0E6;
  --linen:     #EBE4D4;
  --stone:     #B8AE99;
  --slate:     #252521;

  /* Functional */
  --success:   #5C7A3D;
  --warning:   #C68B3E;
  --error:     #A8412C;
  --info:      #4A6B7A;

  /* Type scale */
  --fs-display: clamp(2.5rem, 4.5vw + 1rem, 4.75rem);
  --fs-h1:      clamp(2rem, 3vw + 1rem, 3.25rem);
  --fs-h2:      clamp(1.5rem, 2vw + 0.8rem, 2.25rem);
  --fs-h3:      1.375rem;
  --fs-body:    1.0625rem;
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.75rem;

  /* Layout */
  --site-max: 1440px;

  /* Spacing */
  --sp-xs: 0.5rem;
  --sp-sm: 1rem;
  --sp-md: 1.5rem;
  --sp-lg: 2.5rem;
  --sp-xl: 4rem;
  --sp-2xl: 6rem;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Borders / shadows */
  --border:        1px solid rgba(58, 42, 28, 0.12);
  --border-strong: 1px solid rgba(58, 42, 28, 0.22);
  --shadow-sm: 0 1px 2px rgba(45, 35, 20, 0.06), 0 1px 1px rgba(45, 35, 20, 0.04);
  --shadow-md: 0 4px 12px rgba(45, 35, 20, 0.08), 0 2px 4px rgba(45, 35, 20, 0.04);
  --shadow-lg: 0 12px 32px rgba(45, 35, 20, 0.12), 0 4px 8px rgba(45, 35, 20, 0.06);

  /* Header heights for sticky offsets */
  --header-h: 168px;
}

@media (max-width: 900px) {
  :root { --header-h: 124px; }
}
@media (max-width: 600px) {
  :root { --header-h: 108px; }
}

* { box-sizing: border-box; }
*:focus-visible {
  outline: 2px solid var(--fern);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--slate);
  background: var(--limestone);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(107, 79, 53, 0.04), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(45, 74, 46, 0.03), transparent 45%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a {
  color: var(--moss);
  text-decoration: none;
  transition: color 0.15s ease;
}

@media (hover: hover) {
  a:hover { color: var(--fern); text-decoration: underline; }
}

h1, h2, h3, h4 {
  font-weight: 700;
  color: var(--bark);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-md);
}

.serif { font-family: 'Libre Baskerville', Georgia, serif; }

p { margin: 0 0 var(--sp-md); }

/* =========================================================
   LAYOUT UTILITIES
   ========================================================= */
.container {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 0 var(--sp-lg);
}
@media (max-width: 768px) {
  .container { padding: 0 var(--sp-md); }
}
@media (max-width: 480px) {
  .container { padding: 0 var(--sp-sm); }
}

.eyebrow {
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--loam);
  margin: 0 0 var(--sp-md);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--loam);
}

/* =========================================================
   HEADER (two green rows)
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--shadow-sm);
}

/* =========================================================
   NETWORK BAR (cross-site, locked spec)
   ========================================================= */
.hifi-netbar {
  display: flex;
  align-items: center;
  padding: 0 max(40px, calc((100% - 1360px) / 2));
  background: var(--oak-olive-deep);
  color: var(--oak-cream);
  font-family: var(--font-network);
  position: relative;
  height: 52px;
  gap: 24px;
  z-index: 5;
}
.hifi-netbar-logo {
  flex-shrink: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.hifi-netbar-logo img {
  height: 24px;
  width: auto;
  max-width: none;
  display: block;
  opacity: 0.92;
  transition: opacity 0.15s ease;
}
@media (hover: hover) {
  .hifi-netbar-logo:hover img { opacity: 1; }
}
.hifi-netbar-ticker {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
/* "Show All" opens the announcements modal from the netbar on larger
   screens; on phones the ticker itself is the tap target, so the button
   hides below 720px. */
.hifi-netbar-showall {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 4px 10px;
  background: rgba(244, 236, 224, 0.10);
  border: 1px solid rgba(244, 236, 224, 0.28);
  border-radius: 999px;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oak-cream);
  cursor: pointer;
  white-space: nowrap;
}
.hifi-netbar-showall:hover { background: rgba(244, 236, 224, 0.2); }
.hifi-netbar-showall:focus-visible { outline: 2px solid var(--oak-cream); outline-offset: 2px; }
.hifi-netbar-showall svg { width: 12px; height: 12px; }
@media (max-width: 720px) { .hifi-netbar-showall { display: none; } }

.hifi-netbar-ticker-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--oak-jute-bright);
  opacity: 0.9;
}
.hifi-netbar-ticker-rail {
  flex: 1;
  overflow: hidden;
  min-width: 0;
  mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.hifi-netbar-ticker-track {
  display: inline-flex;
  gap: 14px;
  white-space: nowrap;
  animation: tickerScroll 38s linear infinite;
  will-change: transform;
}
.hifi-netbar-ticker-track span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(244, 236, 224, 0.78);
  flex-shrink: 0;
  font-weight: 500;
}
.hifi-netbar:hover .hifi-netbar-ticker-track { animation-play-state: paused; }
@keyframes tickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .hifi-netbar-ticker-track { animation: none; }
}
.hifi-netbar-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: rgba(244,236,224, 0.1);
  border: 1px solid rgba(244,236,224, 0.18);
  color: var(--oak-cream);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  flex-shrink: 0;
}
@media (hover: hover) {
  .hifi-netbar-trigger:hover {
    background: rgba(244,236,224, 0.18);
    border-color: rgba(244,236,224, 0.3);
  }
}
.hifi-netbar-trigger svg { width: 14px; height: 14px; transition: transform 0.25s; }
.hifi-netbar.open .hifi-netbar-trigger svg { transform: rotate(180deg); }
.hifi-netbar.open .hifi-netbar-trigger {
  background: rgba(244,236,224, 0.2);
  border-color: rgba(244,236,224, 0.35);
}
.hifi-netbar-trigger:focus-visible {
  outline: 2px solid var(--oak-jute-bright);
  outline-offset: 2px;
}

.hifi-dropdown {
  max-height: 0;
  overflow: hidden;
  background: var(--oak-charcoal);
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 4;
  font-family: var(--font-network);
}
.hifi-dropdown.open { max-height: 900px; }
.hifi-dropdown-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 28px 24px;
  color: var(--oak-cream);
  max-width: 1440px;
  margin: 0 auto;
}
@media (min-width: 720px) {
  .hifi-dropdown-grid { grid-template-columns: repeat(4, 1fr); gap: 32px; }
}
.hifi-dropdown-col { display: flex; flex-direction: column; gap: 4px; }
.hifi-dropdown-col .hifi-dropdown-head {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244,236,224, 0.5);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(244,236,224, 0.12);
}
.hifi-dropdown-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  font-size: 14px;
  color: rgba(244,236,224, 0.88);
  text-decoration: none;
  transition: color 0.15s, padding 0.15s;
}
@media (hover: hover) {
  .hifi-dropdown-link:hover {
    color: var(--oak-cream);
    padding-left: 6px;
    text-decoration: none;
  }
}
.hifi-dropdown-link.is-current { color: var(--oak-jute-bright); cursor: default; }
.hifi-dropdown-link.is-current:hover { padding-left: 0; }
.hifi-ext { font-size: 11px; color: rgba(244,236,224, 0.45); }
.hifi-dropdown-cta {
  margin-top: 14px;
  padding: 14px 16px;
  background: rgba(244,236,224, 0.06);
  border-radius: 8px;
  border-left: 3px solid var(--oak-jute-bright);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hifi-dropdown-cta span { font-size: 11px; color: rgba(244,236,224, 0.55); }
.hifi-dropdown-cta strong {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 18px;
  color: var(--oak-cream);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.hifi-dropdown-ticker { display: none; }
@media (max-width: 720px) {
  .hifi-netbar { gap: 12px; padding: 0 14px; height: 48px; }
  .hifi-netbar-logo img { height: 20px; }
  /* ticker stays visible on mobile now the Shop & Visit toggle is gone */
  .hifi-netbar-ticker { display: flex; }
  .hifi-netbar-trigger {
    background: transparent;
    border: 0;
    padding: 4px 0;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(244,236,224, 0.6);
    border-radius: 0;
    gap: 6px;
    margin-left: auto;
  }
  .hifi-netbar-trigger:hover,
  .hifi-netbar.open .hifi-netbar-trigger {
    background: transparent;
    border: 0;
    text-decoration-color: var(--oak-cream);
  }
  .hifi-dropdown-ticker {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: rgba(212, 194, 154, 0.08);
    border-bottom: 1px solid rgba(244,236,224, 0.12);
    min-width: 0;
  }
  .hifi-dropdown-ticker .hifi-netbar-ticker-icon { width: 16px; height: 16px; }
  .hifi-dropdown-ticker .hifi-netbar-ticker-rail { flex: 1; min-width: 0; }
  .hifi-dropdown-ticker .hifi-netbar-ticker-track {
    animation: tickerScroll 28s linear infinite;
  }
  .hifi-dropdown-ticker .hifi-netbar-ticker-track span { font-size: 12.5px; }
}

.main-nav {
  background: var(--moss);
}
.main-nav-inner {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: var(--sp-sm) var(--sp-lg);
  display: grid;
  /* Equal side columns keep the search box on the page's centre line
     regardless of how wide the logo and icon cluster are. */
  grid-template-columns: 1fr minmax(0, 520px) 1fr;
  align-items: center;
  gap: var(--sp-lg);
}
.main-nav-inner .brand { justify-self: start; }
.main-nav-inner .nav-icons { justify-self: end; }
.brand {
  flex: 0 0 auto;
  display: block;
}
.brand img {
  height: 40px;
  width: auto;
  display: block;
}

/* Header search (centre column) */
.header-search {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}
.header-search button {
  width: 100%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.85);
  font-family: inherit;
  font-size: 0.92rem;
  text-align: left;
  padding: 11px 18px 11px 44px;
  border-radius: 999px;
  cursor: pointer;
  min-height: 44px;
  transition: background 0.15s ease, border-color 0.15s ease;
  position: relative;
}
.header-search button svg {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
}
@media (hover: hover) {
  .header-search button:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.35);
    color: #fff;
  }
}

.nav-icons {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.icon-btn {
  background: transparent;
  border: 0;
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background 0.15s ease;
}
.icon-btn svg { width: 22px; height: 22px; }
@media (hover: hover) {
  .icon-btn:hover { background: var(--fern); }
}
.cart-count {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--clay);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--moss);
}
.cart-count[data-empty="true"] { display: none; }

/* Header favourites badge: same treatment as the basket count */
.fav-count {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--clay);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fav-count[data-empty="true"] { display: none; }

.mobile-toggle { display: none; }

/* Bottom-nav: third row, lighter green (Fern), holds the menu */
.bottom-nav {
  background: var(--fern);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.bottom-nav-inner {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 0 var(--sp-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
}
.bottom-nav a {
  color: rgba(255,255,255,0.92);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 14px 4px;
  position: relative;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.bottom-nav a::after {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 0;
  height: 3px;
  background: var(--clay);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
@media (hover: hover) {
  .bottom-nav a:hover { color: #fff; text-decoration: none; }
  .bottom-nav a:hover::after { transform: scaleX(1); }
}
.bottom-nav a.active { color: #fff; }
.bottom-nav a.active::after { transform: scaleX(1); }

@media (max-width: 1024px) {
  .main-nav-inner { padding: var(--sp-sm) var(--sp-md); gap: var(--sp-md); }
  .bottom-nav-inner { padding: 0 var(--sp-md); gap: var(--sp-md); }
  .bottom-nav a { font-size: 0.875rem; padding: 12px 4px; }
}
@media (max-width: 900px) {
  .bottom-nav { display: none; }
  .mobile-toggle { display: inline-flex; }
}
@media (max-width: 600px) {
  .main-nav-inner {
    grid-template-columns: auto 1fr;
    gap: var(--sp-sm);
    padding-bottom: var(--sp-sm);
  }
  .header-search {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 2px;
    margin-bottom: 6px;
    max-width: none;
  }
  .brand img { height: 44px; }
  .header-search button { font-size: 0.85rem; }
}
@media (max-width: 480px) {
  .brand img { height: 38px; }
  .main-nav-inner { padding: var(--sp-xs) var(--sp-sm); }
  .icon-btn { width: 40px; height: 40px; }
}

/* Mobile drawer */
.mobile-drawer {
  position: fixed;
  inset: 0 22% 0 0;
  background: var(--moss);
  z-index: 100;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mobile-drawer.open { transform: translateX(0); }
.md-header {
  background: var(--moss-deep);
  padding: var(--sp-sm) var(--sp-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.md-header img {
  height: 38px;
  width: auto;
}
.md-close {
  background: transparent;
  border: 0;
  color: #fff;
  width: 44px;
  height: 44px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
@media (hover: hover) {
  .md-close:hover { background: rgba(255,255,255,0.1); }
}
.md-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-sm) var(--sp-md);
}
.md-body a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 8px;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  text-decoration: none;
}
.md-body a svg { width: 18px; height: 18px; opacity: 0.7; }
.md-divider {
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin: var(--sp-sm) 0;
}
.md-footer {
  background: var(--moss-deep);
  padding: var(--sp-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.md-footer img {
  height: 42px;
  width: auto;
}


/* =========================================================
   TRUST STRIP (below header, also above footer)
   ========================================================= */
.trust-strip {
  background: var(--linen);
  border-bottom: var(--border);
  position: relative;
}
.trust-strip-inner {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: var(--sp-sm) var(--sp-lg);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-md);
}
.trust-ticker { display: contents; }
.trust-ticker > [aria-hidden="true"] { display: none; }
.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--bark);
}
.trust-item svg {
  width: 22px;
  height: 22px;
  color: var(--moss);
  flex-shrink: 0;
}
.trust-item strong { display: block; font-weight: 600; }
.trust-item small { display: block; color: var(--loam); font-size: 0.78rem; }

@media (max-width: 900px) {
  .trust-strip-inner { grid-template-columns: repeat(2, 1fr); padding: var(--sp-sm) var(--sp-md); }
}
@media (max-width: 600px) {
  .trust-strip-inner {
    display: block;
    grid-template-columns: none;
    overflow: hidden;
    padding: 10px 0;
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  }
  .trust-ticker {
    display: flex;
    gap: var(--sp-lg);
    width: max-content;
    animation: trust-ticker-scroll 35s linear infinite;
  }
  .trust-ticker > [aria-hidden="true"] { display: flex; }
  .trust-item {
    flex: 0 0 auto;
    padding: 0;
    white-space: nowrap;
    font-size: 0.875rem;
  }
  .trust-item small { display: none; }
  @keyframes trust-ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .trust-ticker { animation: none; }
}

/* =========================================================
   VIEWS (only one visible at a time)
   ========================================================= */
.view { display: none; }
.view.view-active { display: block; }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: -0.005em;
  min-height: 44px;
  padding: 11px 22px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.95rem;
  transition: background 0.2s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  text-decoration: none;
  position: relative;
}
.btn:active { transform: translateY(0); }
.btn svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

.btn-primary {
  background: var(--moss);
  color: #fff;
  box-shadow: 0 1px 2px rgba(45, 74, 46, 0.15);
}
@media (hover: hover) {
  .btn-primary:hover {
    background: var(--fern);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(45, 74, 46, 0.28), 0 3px 8px rgba(45, 74, 46, 0.18);
    transform: translateY(-2px);
  }
  .btn-primary:hover svg { transform: translateX(4px); }
}

.btn-secondary {
  background: transparent;
  color: var(--bark);
  border: 1.5px solid var(--bark);
}
@media (hover: hover) {
  .btn-secondary:hover {
    background: var(--bark);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(58, 42, 28, 0.22), 0 2px 6px rgba(58, 42, 28, 0.12);
    transform: translateY(-2px);
  }
  .btn-secondary:hover svg { transform: translateX(4px); }
}

.btn-trade {
  background: var(--clay);
  color: #fff;
  box-shadow: 0 1px 2px rgba(181, 102, 62, 0.18);
}
@media (hover: hover) {
  .btn-trade:hover {
    background: #c97144;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(181, 102, 62, 0.32), 0 3px 8px rgba(181, 102, 62, 0.18);
    transform: translateY(-2px);
  }
  .btn-trade:hover svg { transform: translateX(4px); }
}

.btn-ghost {
  background: transparent;
  color: var(--loam);
}
@media (hover: hover) {
  .btn-ghost:hover {
    background: rgba(107, 79, 53, 0.08);
    color: var(--bark);
    text-decoration: none;
  }
  .btn-ghost:hover svg { transform: translateX(3px); }
}

.btn-sm { min-height: 36px; padding: 8px 16px; font-size: 0.85rem; }
.btn-lg { min-height: 56px; padding: 14px 32px; font-size: 1.0625rem; }

/* Cream variant - sits on dark/green grounds */
.btn-cream {
  background: var(--limestone);
  color: var(--bark);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
@media (hover: hover) {
  .btn-cream:hover {
    background: #fff;
    color: var(--bark);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28), 0 3px 8px rgba(0, 0, 0, 0.16);
  }
  .btn-cream:hover svg { transform: translateX(4px); }
}

/* =========================================================
   HOMEPAGE - HERO (Moss-green ground, white text)
   ========================================================= */
.hero {
  padding: var(--sp-2xl) 0;
  position: relative;
  overflow: hidden;
  background: var(--moss);
  color: #fff;
}
.hero::before {
  content: '';
  position: absolute;
  top: -10%;
  right: -15%;
  width: 60%;
  height: 80%;
  background: radial-gradient(ellipse at center, rgba(156, 174, 137, 0.18), transparent 65%);
  pointer-events: none;
}
.hero .eyebrow {
  color: var(--lichen);
}
.hero .eyebrow::before {
  background: var(--lichen);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--sp-xl);
  align-items: center;
  position: relative;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--sp-lg); }
}
.hero-headline {
  font-size: clamp(2rem, 3.2vw + 0.6rem, 3.5rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: #fff;
  margin: 0 0 var(--sp-md);
  text-wrap: balance;
}
.hero-headline span { display: block; }
.hero-headline em {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--lichen);
  letter-spacing: -0.02em;
}
.hero-sub {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.85);
  max-width: 50ch;
  margin-bottom: var(--sp-md);
}
.hero-meta {
  display: flex;
  gap: var(--sp-md);
  flex-wrap: wrap;
  align-items: center;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}
.hero-meta .dot {
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
}
.hero-ctas {
  display: flex;
  gap: var(--sp-sm);
  margin-top: var(--sp-lg);
  flex-wrap: wrap;
}

/* Hero image card - rounded square on the right */
.hero-image-wrap {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  animation: hero-image-float 7s ease-in-out infinite;
}
@keyframes hero-image-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-12px) rotate(-0.6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-image-wrap { animation: none; }
}
.hero-image {
  width: 100%;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #6B4F35, #3A2A1C);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35), 0 8px 16px rgba(0, 0, 0, 0.2);
}
.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(31, 53, 32, 0.5) 100%);
  pointer-events: none;
}
.hero-image-caption {
  position: absolute;
  left: var(--sp-md);
  bottom: var(--sp-md);
  color: #fff;
  z-index: 2;
  font-size: 0.9rem;
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-image-caption svg { width: 16px; height: 16px; }
.hero-image-badge {
  position: absolute;
  top: var(--sp-md);
  left: var(--sp-md);
  background: var(--clay);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  z-index: 2;
}

/* (Hero options removed - keeping the original layout only) */

/* =========================================================
   GRASS-TO-SOIL DIVIDER + SOIL SECTION
   ========================================================= */
.grass-soil-divider {
  position: relative;
  display: block;
  width: 100%;
  height: 260px;
  line-height: 0;
  margin: 0;
  background: var(--moss);
}
.grass-soil-divider svg.soil-svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* Grass strip - tiles horizontally on desktop, single image on mobile */
.grass-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 56%;
  height: 55px;
  background-image: url('/assets/img/grass.svg');
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: auto 100%;
  pointer-events: none;
}
@media (max-width: 768px) {
  .grass-soil-divider { height: 200px; }
  .grass-overlay {
    height: 40px;
    bottom: 55%;
  }
}
@media (max-width: 480px) {
  .grass-soil-divider { height: 160px; }
  .grass-overlay {
    height: 30px;
    bottom: 54%;
  }
}

/* Categories section gets the soil-brown background once the divider lands */
.section-soil {
  background: #6B4F35; /* matches the bottom of the divider gradient (loam) */
  color: var(--linen);
}
.section-soil .eyebrow {
  color: rgba(255, 255, 255, 0.72);
}
.section-soil .eyebrow::before {
  background: rgba(255, 255, 255, 0.5);
}
.section-soil h2,
.section-soil h3 {
  color: var(--wheat);
}
.section-soil p {
  color: rgba(255, 255, 255, 0.82);
}
/* Subtle warmth and shadow on the tiles so they pop off the soil */
.section-soil .cat-tile {
  box-shadow: 0 8px 24px rgba(31, 22, 12, 0.25), 0 2px 4px rgba(31, 22, 12, 0.15);
}
@media (hover: hover) {
  .section-soil .cat-tile:hover {
    box-shadow: 0 16px 36px rgba(31, 22, 12, 0.32), 0 4px 8px rgba(31, 22, 12, 0.18);
  }
}

/* Hero quote card - now lives in the delivery strip, not the hero */
.hero-quote-card {
  background: var(--linen);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-md);
  box-shadow: var(--shadow-md);
}
.hero-quote-card h4 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--loam);
  margin: 0 0 12px;
  font-weight: 700;
}
.hero-quote-card .input-row {
  display: flex;
  gap: 8px;
  margin-bottom: var(--sp-sm);
}
.hero-quote-card input {
  flex: 1;
  font-family: inherit;
  font-size: 1rem;
  padding: 12px 14px;
  border: var(--border-strong);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--slate);
  min-height: 44px;
  letter-spacing: 0.02em;
}
.hero-quote-card .quote-result {
  font-size: 0.9rem;
  color: var(--bark);
  padding-top: var(--sp-sm);
  border-top: var(--border);
  margin-top: var(--sp-sm);
}
.hero-quote-card .quote-result strong {
  display: block;
  font-size: 1.4rem;
  color: var(--moss);
  margin-bottom: 4px;
}
.hero-quote-card.has-result .placeholder { display: none; }
.hero-quote-card:not(.has-result) .quote-result { display: none; }

/* =========================================================
   HOMEPAGE - CATEGORIES
   ========================================================= */
.section { padding: var(--sp-2xl) 0; }
.section.tight { padding: var(--sp-xl) 0; }
@media (max-width: 768px) {
  .section { padding: var(--sp-xl) 0; }
  .section.tight { padding: var(--sp-lg) 0; }
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--sp-lg);
  gap: var(--sp-md);
  flex-wrap: wrap;
}
.section-head h2 {
  font-size: var(--fs-h2);
  margin: 0;
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-md);
}
@media (max-width: 900px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .cat-grid { grid-template-columns: 1fr; }
}
.cat-tile {
  display: flex;
  flex-direction: column;
  background: var(--linen);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  color: inherit;
  min-height: 220px;
}
@media (hover: hover) {
  .cat-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); text-decoration: none; }
  .cat-tile:hover .cat-tile-art { transform: scale(1.04); }
}
.cat-tile-art {
  height: 200px;
  background: var(--sage);
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  color: #fff;
  transition: transform 0.4s ease;
  overflow: hidden;
}
.cat-tile-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(58, 42, 28, 0) 30%, rgba(58, 42, 28, 0.55) 100%);
  pointer-events: none;
}
.cat-tile-art .cat-tile-label {
  position: relative;
  z-index: 2;
  margin: 0 var(--sp-md) var(--sp-sm);
  font-family: 'Libre Baskerville', Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--lichen);
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
/* Tile photos come from the live catalogue (home.php / renderCategoryTiles);
   the colour is the wash shown until, or instead of, a photo. */
.cat-tile-art.compost { background-color: #6B4F35; }
.cat-tile-art.aggregates { background-color: #B8AE99; }
.cat-tile-art.decorative-stones { background-color: #7B9270; }
.cat-tile-art.bark-chip { background-color: #4A3625; }
.cat-tile-art.timber { background-color: #8B4E2D; }
.cat-tile-art.barrels { background-color: #251A10; }
.cat-tile-body {
  padding: var(--sp-md);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cat-tile-body h3 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--bark);
}
.cat-tile-body .count {
  font-size: 0.85rem;
  color: var(--loam);
  font-weight: 500;
}
.cat-tile-body .arrow {
  margin-top: auto;
  font-size: 0.9rem;
  color: var(--moss);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* =========================================================
   PRODUCT CARDS (reusable)
   ========================================================= */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-md);
}
@media (max-width: 1100px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .product-grid { grid-template-columns: 1fr; } }

.product-card {
  background: #fff;
  border: var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}
@media (hover: hover) {
  .product-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
}
.product-card a.card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.product-image {
  aspect-ratio: 3 / 2;
  background: var(--linen);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.product-image img { width: 100%; height: 100%; object-fit: cover; }
.product-image .placeholder-icon {
  color: var(--stone);
}
.product-image .placeholder-icon svg { width: 48px; height: 48px; }
.product-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--moss);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  z-index: 2;
}
.product-tag.local { background: var(--moss); }
.product-tag.bulk { background: var(--clay); }
.product-tag.deal { background: var(--bark); }
.fav-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--loam);
  z-index: 2;
  transition: color 0.15s ease, background 0.15s ease;
}
.fav-btn svg { width: 18px; height: 18px; }
.fav-btn.active { color: var(--clay); }
.fav-btn.active svg { fill: var(--clay); }
@media (hover: hover) {
  .fav-btn:hover { background: #fff; color: var(--clay); }
}

.product-info {
  padding: var(--sp-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  position: relative;
  z-index: 2;
}
.product-info .cat-eyebrow {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--loam);
  font-weight: 700;
}
.product-info h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--bark);
}
.product-info .meta { font-size: 0.8rem; color: var(--loam); margin: 2px 0; }
.product-info .badge { align-self: flex-start; }
.product-bottom {
  margin-top: auto;
  padding-top: var(--sp-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
.product-price {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--bark);
  letter-spacing: -0.01em;
  font-feature-settings: 'tnum';
  line-height: 1.2;
  white-space: nowrap;
}
.product-price small { font-size: 0.72rem; font-weight: 500; color: var(--loam); margin-left: 4px; }
.product-card .add-btn {
  position: relative;
  z-index: 3;
  width: 100%;
}

/* Status marker: a stock dot with a soft halo + a letter-spaced label in
   the site's eyebrow voice. Status lives in the dot, the label stays ink -
   deliberately not a tinted pill. Out of stock mutes and hollows the dot. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--loam);
}
.badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.badge.in-stock::before  { background: var(--success); box-shadow: 0 0 0 3px rgba(92, 122, 61, 0.16); }
.badge.low-stock::before { background: var(--warning); box-shadow: 0 0 0 3px rgba(198, 139, 62, 0.18); }
.badge.out-of-stock,
.badge.out-stock { color: var(--stone); }
.badge.out-of-stock::before,
.badge.out-stock::before {
  width: 6px;
  height: 6px;
  background: transparent;
  border: 1.5px solid var(--stone);
}

/* =========================================================
   WHY US (3 columns)
   ========================================================= */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-lg);
}
@media (max-width: 900px) {
  .why-grid { grid-template-columns: 1fr; gap: var(--sp-md); }
}
.why-item {
  padding: var(--sp-md);
  background: var(--linen);
  border: var(--border);
  border-radius: var(--radius-lg);
}
.why-item .why-icon {
  width: 48px;
  height: 48px;
  background: var(--moss);
  color: #fff;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-sm);
}
.why-item .why-icon svg { width: 24px; height: 24px; }
.why-item h3 { font-size: 1.2rem; margin: 0 0 8px; }
.why-item p { font-size: 0.95rem; color: var(--slate); margin: 0; }

/* =========================================================
   HOW DELIVERY WORKS
   ========================================================= */
.delivery-strip {
  background: var(--bark);
  color: var(--wheat);
  padding: var(--sp-xl) 0;
}
.delivery-strip h2 { color: var(--wheat); }
.delivery-strip .eyebrow { color: var(--wheat); opacity: 0.7; }
.delivery-strip .eyebrow::before { background: var(--wheat); opacity: 0.6; }
.delivery-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-lg);
  margin-top: var(--sp-lg);
}
@media (max-width: 768px) {
  .delivery-steps { grid-template-columns: 1fr; }
}
.delivery-step {
  position: relative;
}
.delivery-step .step-num {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-style: italic;
  font-size: 3rem;
  color: var(--clay);
  line-height: 1;
  margin-bottom: var(--sp-sm);
}
/* Step text in white for contrast on the dark band (the 01/02/03 numbers
   keep their colour); links white and underlined so they stand out. */
.delivery-step h3 { color: #fff; font-size: 1.3rem; margin: 0 0 8px; }
.delivery-step p { color: #fff; font-size: 0.95rem; margin: 0; }
.delivery-step a, .delivery-step a:hover { color: #fff; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; white-space: nowrap; }

/* =========================================================
   PARENT GROUP PANEL
   ========================================================= */
.parent-panel {
  background: var(--linen);
  border-radius: var(--radius-lg);
  padding: var(--sp-lg);
  display: flex;
  align-items: center;
  gap: var(--sp-lg);
  border: var(--border);
}
.parent-panel .ppanel-mark {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  background: var(--moss);
  color: var(--lichen);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Libre Baskerville', Georgia, serif;
  font-weight: 700;
  font-size: 1.6rem;
}
.parent-panel-body { flex: 1; }
.parent-panel-body h3 { margin: 0 0 4px; font-size: 1.15rem; }
.parent-panel-body p { margin: 0; font-size: 0.95rem; color: var(--loam); }
@media (max-width: 600px) {
  .parent-panel { flex-direction: column; text-align: center; gap: var(--sp-md); }
}

/* =========================================================
   CATEGORY VIEW
   ========================================================= */
.cat-header {
  background: var(--linen);
  padding: var(--sp-lg) 0 var(--sp-md);
  border-bottom: var(--border);
}
.breadcrumb {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.85rem;
  color: var(--loam);
  margin-bottom: var(--sp-sm);
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--loam); }
.breadcrumb .sep { color: var(--stone); }
.breadcrumb .current { color: var(--bark); font-weight: 600; }
.cat-header h1 { margin: 0 0 8px; font-size: var(--fs-h1); }
.cat-header p { margin: 0; font-size: 1.05rem; color: var(--slate); max-width: 65ch; }

.cat-body {
  padding: var(--sp-md) 0 var(--sp-xl);
}
.cat-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-sm) 0;
  margin-bottom: var(--sp-md);
  flex-wrap: wrap;
  border-bottom: var(--border);
}
.active-filters {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.af-label { font-size: 0.85rem; color: var(--loam); font-weight: 600; }
.af-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--wheat);
  color: var(--bark);
  border-radius: 999px;
  padding: 4px 6px 4px 12px;
  font-size: 0.8rem;
  font-weight: 600;
}
.af-chip button {
  background: rgba(58, 42, 28, 0.12);
  border: 0;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bark);
}
.af-clear {
  background: transparent;
  border: 0;
  font-size: 0.8rem;
  color: var(--loam);
  cursor: pointer;
  text-decoration: underline;
  padding: 4px 8px;
  font-family: inherit;
}
.sort-select {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--loam);
}
.sort-select select {
  font-family: inherit;
  border: var(--border-strong);
  background: #fff;
  border-radius: var(--radius-md);
  padding: 8px 12px;
  font-size: 0.9rem;
  color: var(--bark);
  cursor: pointer;
  min-height: 36px;
}

.cat-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--sp-lg);
}
@media (max-width: 900px) {
  .cat-layout { grid-template-columns: 1fr; }
}

/* =========================================================
   CATEGORY FILTERS: rail on desktop, bottom sheet below 900px.
   Same #cat-filters element in both, so main.js renders once and
   its delegated handlers work either way.
   ========================================================= */
.cat-filter-btn { display: none; }        /* desktop: the rail is visible */
.cat-filter-sheet .cfs-veil,
.cat-filter-sheet .cfs-head,
.cat-filter-sheet .cfs-foot { display: none; }

@media (max-width: 900px) {
  .cat-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 16px;
    background: #fff;
    border: var(--border-strong);
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bark);
    cursor: pointer;
  }
  .cat-filter-btn svg { width: 16px; height: 16px; }
  .cat-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--moss);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
  }
  .cat-filter-count[hidden] { display: none; }

  /* Row one is the Filters button (left) and Sort by (right); any active
     filter chips wrap onto their own line below. */
  .cat-toolbar .active-filters { order: 3; flex-basis: 100%; }

  /* The rail becomes the sheet */
  .cat-filter-sheet {
    position: fixed;
    inset: 0;
    z-index: 150;
    visibility: hidden;
    pointer-events: none;
  }
  body.cat-filters-open .cat-filter-sheet { visibility: visible; pointer-events: auto; }
  .cat-filter-sheet .cfs-veil {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(37, 37, 33, 0.5);
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  body.cat-filters-open .cfs-veil { opacity: 1; }
  .cfs-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    background: var(--limestone);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: var(--shadow-lg);
    transform: translateY(100%);
    transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
  }
  body.cat-filters-open .cfs-panel { transform: translateY(0); }
  .cat-filter-sheet .cfs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-sm);
    padding: var(--sp-sm) var(--sp-md);
    border-bottom: var(--border);
  }
  .cfs-head h2 { margin: 0; font-size: 1.1rem; }
  .cfs-close {
    background: transparent;
    border: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--loam);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .cfs-close svg { width: 20px; height: 20px; }
  .cat-filters {
    padding: 0 var(--sp-md);
    overflow-y: auto;
    overscroll-behavior: contain;
    flex: 1;
  }
  /* Roomier tap targets in the sheet than in the desktop rail */
  .cat-filter-sheet .filter-group label { padding: 11px 0; font-size: 0.95rem; }
  .cat-filter-sheet .filter-group input[type="checkbox"] { width: 20px; height: 20px; }
  .cat-filter-sheet .cfs-foot {
    display: flex;
    gap: var(--sp-sm);
    padding: var(--sp-sm) var(--sp-md) calc(var(--sp-sm) + env(safe-area-inset-bottom, 0px));
    border-top: var(--border);
  }
  /* "Clear all" takes its natural width; the primary action gets the rest,
     so the live count never wraps to a second line. */
  .cfs-foot .btn { white-space: nowrap; }
  .cfs-foot .btn-secondary { flex: 0 0 auto; }
  .cfs-foot .btn-primary { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cfs-panel, .cat-filter-sheet .cfs-veil { transition: none; }
}
/* Beside the filter rail the cards run 3-up with a tighter gap; the
   higher-specificity selector must restate the narrow breakpoints. */
.cat-layout .product-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-sm); }
@media (max-width: 768px) { .cat-layout .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cat-layout .product-grid { grid-template-columns: 1fr; } }
.cat-filters h4 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 var(--sp-sm);
  color: var(--loam);
}
.filter-group {
  padding: var(--sp-sm) 0;
  border-bottom: var(--border);
}
.filter-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 0.9rem;
  color: var(--bark);
  cursor: pointer;
}
.filter-group input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--moss);
}
.filter-group .count { margin-left: auto; font-size: 0.78rem; color: var(--loam); }

.results-count {
  font-size: 0.9rem;
  color: var(--loam);
  margin-bottom: var(--sp-sm);
}

/* Category view + search: 3-column product grid on desktop, 2-col tablet, 1-col mobile */
#view-category .product-grid,
#view-search .product-grid {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
  #view-category .product-grid,
  #view-search .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  #view-category .product-grid,
  #view-search .product-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   SEARCH POPUP (top-anchored overlay)
   ========================================================= */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(37, 37, 33, 0.55);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.search-overlay.open { opacity: 1; pointer-events: auto; }

.search-panel {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  max-width: 720px;
  transform: translate(-50%, -100%);
  background: var(--limestone);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.search-overlay.open .search-panel { transform: translate(-50%, 0); }

.search-head {
  padding: var(--sp-md);
  border-bottom: var(--border);
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  background: var(--linen);
}
.search-head svg { width: 22px; height: 22px; color: var(--moss); flex-shrink: 0; }
.search-head input {
  flex: 1;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 1.15rem;
  color: var(--slate);
  padding: 8px 0;
  outline: none;
  min-height: 44px;
}
.search-head input::placeholder { color: var(--stone); }
.search-head .close-btn {
  background: transparent;
  border: 0;
  width: 36px;
  height: 36px;
  cursor: pointer;
  color: var(--loam);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0 8px;
  width: auto;
}
.search-head .close-btn kbd {
  background: rgba(58, 42, 28, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-family: inherit;
  margin-left: 6px;
}
@media (hover: hover) {
  .search-head .close-btn:hover { background: rgba(58, 42, 28, 0.08); color: var(--bark); }
}

.search-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-md);
}

.search-section { margin-bottom: var(--sp-md); }
.search-section h4 {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--loam);
  margin: 0 0 12px;
  font-weight: 700;
}

.search-quicklinks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.search-quicklinks a {
  background: var(--linen);
  color: var(--bark);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  border: var(--border);
}
@media (hover: hover) {
  .search-quicklinks a:hover { background: var(--moss); color: #fff; text-decoration: none; }
}

.search-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 600px) {
  .search-results { grid-template-columns: 1fr; }
}
.search-result-item {
  display: flex;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius-md);
  background: #fff;
  border: var(--border);
  text-decoration: none;
  color: inherit;
  align-items: center;
  transition: border-color 0.15s ease;
}
.search-result-item img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  background: var(--linen);
}
.search-result-info {
  flex: 1;
  min-width: 0;
}
.search-result-info .cat {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--loam);
  font-weight: 700;
}
.search-result-info .name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-result-info .price {
  font-size: 0.82rem;
  color: var(--moss);
  font-weight: 600;
}
@media (hover: hover) {
  .search-result-item:hover { border-color: var(--moss); text-decoration: none; }
}
.search-empty {
  text-align: center;
  padding: var(--sp-lg);
  color: var(--loam);
}

/* =========================================================
   ACCOUNT VIEWS
   ========================================================= */
.account-shell {
  /* top and bottom only: the side gutter comes from .container */
  padding-top: var(--sp-lg);
  padding-bottom: var(--sp-2xl);
}
.account-head {
  background: var(--linen);
  padding: var(--sp-lg) 0 var(--sp-md);
  border-bottom: var(--border);
}
.account-head h1 { margin: 0 0 8px; font-size: var(--fs-h2); }
.account-head p { margin: 0; color: var(--loam); }

.account-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--sp-xl);
  padding: var(--sp-lg) 0;
}
@media (max-width: 900px) {
  .account-layout { grid-template-columns: 1fr; gap: var(--sp-md); }
}
.account-sidebar {
  background: var(--linen);
  border-radius: var(--radius-lg);
  padding: var(--sp-sm);
  height: fit-content;
}
.account-sidebar a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--bark);
  margin-bottom: 2px;
}
.account-sidebar a svg { width: 18px; height: 18px; color: var(--loam); }
.account-sidebar a.active {
  background: var(--moss);
  color: #fff;
}
.account-sidebar a.active svg { color: var(--lichen); }
@media (hover: hover) {
  .account-sidebar a:not(.active):hover { background: rgba(45, 74, 46, 0.08); text-decoration: none; }
}

.account-card {
  background: #fff;
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-lg);
  margin-bottom: var(--sp-md);
}
.account-card h2 { font-size: var(--fs-h3); margin: 0 0 var(--sp-sm); }
.account-card h3 { font-size: 1.1rem; }

.kv-list { list-style: none; padding: 0; margin: 0; }
.kv-list li {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: var(--border);
  gap: var(--sp-sm);
  flex-wrap: wrap;
}
.kv-list li:last-child { border-bottom: 0; }
.kv-list .kv-label { color: var(--loam); font-weight: 500; }
.kv-list .kv-value { color: var(--bark); font-weight: 600; }
.kv-list .kv-edit {
  background: transparent;
  border: 0;
  color: var(--moss);
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0;
}

.order-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: var(--sp-md);
  padding: var(--sp-md);
  background: #fff;
  border: var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  align-items: center;
}
.order-row .order-id {
  font-weight: 700;
  color: var(--bark);
  font-feature-settings: 'tnum';
}
.order-row .order-meta { font-size: 0.85rem; color: var(--loam); margin-top: 2px; }
.order-row .order-total { font-weight: 700; color: var(--bark); font-feature-settings: 'tnum'; }
.order-row .order-status {
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.order-row .order-status.delivered { background: rgba(92, 122, 61, 0.12); color: var(--success); }
.order-row .order-status.in-flight { background: rgba(198, 139, 62, 0.14); color: var(--warning); }
.order-row .order-status.processing { background: rgba(74, 107, 122, 0.1); color: var(--info); }
@media (max-width: 600px) {
  .order-row { grid-template-columns: 1fr; gap: 6px; }
}

/* Account pages on the console API */
.account-sidebar .account-signout { margin: 0; }
.account-sidebar .account-signout button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border: 0; background: transparent; border-radius: var(--radius-md);
  font: inherit; font-weight: 600; font-size: 0.95rem; color: var(--bark); cursor: pointer; text-align: left;
}
.account-sidebar .account-signout svg { width: 18px; height: 18px; color: var(--loam); }
@media (hover: hover) {
  .account-sidebar .account-signout button:hover { background: rgba(45, 74, 46, 0.08); }
}
.order-row .order-id a { color: inherit; }
.order-row .order-shop { font-weight: 600; color: var(--moss); }
.order-row .order-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.order-lines { list-style: none; margin: 0 0 var(--sp-sm); padding: 0; }
.order-lines li {
  display: grid; grid-template-columns: 1fr auto auto; gap: var(--sp-sm);
  padding: 10px 0; border-bottom: var(--border); align-items: baseline;
}
.order-lines .ol-qty { color: var(--loam); font-size: 0.9rem; font-feature-settings: 'tnum'; }
.order-lines .ol-total { font-weight: 700; color: var(--bark); font-feature-settings: 'tnum'; }
.order-sums .kv-value { font-feature-settings: 'tnum'; }
.account-pager { display: flex; gap: var(--sp-sm); align-items: center; justify-content: center; margin-top: var(--sp-sm); }
.address-card { display: flex; justify-content: space-between; gap: var(--sp-md); flex-wrap: wrap; }
.address-card p { margin: 6px 0 0; }
.form-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.form-actions form { margin: 0; }
.check-row { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--sp-sm); cursor: pointer; }
.form-error, .form-notice {
  border-radius: var(--radius-md); padding: 12px 14px; margin: 0 0 var(--sp-sm); font-size: 0.95rem;
}
.form-error { background: #FBEAE5; border-left: 3px solid var(--clay); color: var(--bark); }
.form-notice { background: var(--linen); border-left: 3px solid var(--moss); color: var(--bark); }
.field-error { margin: 0; font-size: 0.85rem; color: #A23B1E; font-weight: 600; }
.field-note { margin: 0; font-size: 0.85rem; color: var(--loam); }
.form-row .optional { text-transform: none; letter-spacing: 0; font-weight: 400; }
.form-row input[aria-invalid="true"], .form-row textarea[aria-invalid="true"] { border-color: #A23B1E; }
.form-row input[readonly] { background: var(--linen); color: var(--loam); }
.form-row textarea {
  font-family: inherit; font-size: 1rem; padding: 12px 14px; border: var(--border-strong);
  border-radius: var(--radius-md); background: #fff; color: var(--slate); resize: vertical;
}
.form-row textarea:focus { outline: 2px solid var(--moss); outline-offset: 1px; border-color: var(--moss); }
/* The account icon is a link: keep it white on hover and focus, where the
   site-wide link hover would turn it fern - the same as its hover
   background, so it vanished. */
a.icon-btn, a.icon-btn:hover, a.icon-btn:focus-visible { color: #fff; text-decoration: none; }
.icon-btn.signed-in::after {
  content: ''; position: absolute; right: 9px; bottom: 9px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--lichen); box-shadow: 0 0 0 2px var(--moss);
}

/* Sign in / register form */
.auth-shell {
  max-width: 440px;
  margin: 0 auto;
  padding: var(--sp-2xl) var(--sp-md);
}
.auth-card {
  background: #fff;
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-lg);
  box-shadow: var(--shadow-md);
}
.auth-card h1 { font-size: var(--fs-h2); margin: 0 0 8px; }
.auth-card .sub { color: var(--loam); margin: 0 0 var(--sp-md); font-size: 0.95rem; }
.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--sp-sm);
}
.form-row label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--loam);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.form-row input {
  font-family: inherit;
  font-size: 1rem;
  padding: 12px 14px;
  border: var(--border-strong);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--slate);
  min-height: 48px;
}
.form-row input:focus {
  outline: 2px solid var(--moss);
  outline-offset: 1px;
  border-color: var(--moss);
}
.auth-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: var(--loam);
  margin: var(--sp-sm) 0;
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin: var(--sp-md) 0;
  color: var(--stone);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(58, 42, 28, 0.12);
}

/* =========================================================
   PDP VIEW
   ========================================================= */
.pdp-body {
  padding: var(--sp-lg) 0 var(--sp-2xl);
}
.pdp-top {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--sp-xl);
  margin-bottom: var(--sp-xl);
}
@media (max-width: 900px) {
  .pdp-top { grid-template-columns: 1fr; gap: var(--sp-lg); }
}
/* Grid items are min-width:auto by default, so one stubborn child - an
   input's intrinsic size - can stretch the whole column past the viewport
   and push everything in it off the right edge. */
.pdp-top > * { min-width: 0; }

.pdp-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}
.pdp-main-image {
  background: var(--linen);
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.pdp-main-image img { width: 100%; height: 100%; object-fit: cover; }
.pdp-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.pdp-thumb {
  background: var(--linen);
  border-radius: var(--radius-md);
  aspect-ratio: 1;
  cursor: pointer;
  border: 2px solid transparent;
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.pdp-thumb.active { border-color: var(--moss); }
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp-thumb-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--stone);
  font-size: 0.7rem;
}

.pdp-info h1 {
  font-size: var(--fs-h1);
  margin: 8px 0 var(--sp-sm);
}
.pdp-summary {
  font-size: 1.1rem;
  color: var(--slate);
  margin: 0 0 var(--sp-md);
}
.pdp-price-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-md);
  flex-wrap: wrap;
  margin-bottom: var(--sp-md);
  padding-bottom: var(--sp-md);
  border-bottom: var(--border);
}
.pdp-price {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--bark);
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum';
}
.pdp-price small { font-size: 0.95rem; font-weight: 500; color: var(--loam); }
.pdp-price-meta {
  font-size: 0.85rem;
  color: var(--loam);
}
.pdp-price-meta strong { color: var(--bark); }

.variant-row { margin-bottom: var(--sp-md); }
.variant-row .label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--loam);
  margin-bottom: 8px;
  font-weight: 700;
}
/* Options table: one selectable row per purchase option, its price on the
   right, and an Add button (shown only once ordering is live). */
.variant-table {
  background: #fff;
  border: 1.5px solid var(--stone);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.vt-row {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 12px 14px;
  cursor: pointer;
}
.vt-row + .vt-row { border-top: 1px solid rgba(0, 0, 0, 0.08); }
.vt-row.vt-active { background: var(--linen); box-shadow: inset 3px 0 0 var(--moss); }
.vt-row.vt-off { opacity: 0.55; cursor: not-allowed; }
.vt-row:focus-visible { outline: 2px solid var(--moss); outline-offset: -2px; }
@media (hover: hover) {
  .vt-row:not(.vt-active):not(.vt-off):hover { background: var(--linen); }
}
.vt-opt {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--bark);
}
.vt-opt small { font-size: 0.75rem; font-weight: 500; color: var(--loam); }
.vt-price {
  margin-left: auto;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--bark);
  white-space: nowrap;
}
.vt-price small { font-weight: 500; font-size: 0.78rem; color: var(--loam); }
.vt-tail { display: flex; align-items: center; flex: none; }
.vt-tail:empty { display: none; }
.vt-unavailable {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--loam);
}
/* By-arrangement options (console online_sale false): the console's own
   sentence under the label, and a quiet tag where Add would be. */
.vt-opt small.vt-sale-note { color: var(--clay); font-weight: 600; }
.vt-unavailable.vt-phone { color: var(--clay); }
/* While ordering is paused customers see options and prices, not Add */
body[data-ordering="paused"] .vt-add { display: none; }

.variant-chip {
  background: #fff;
  border: 1.5px solid var(--stone);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--bark);
  font-weight: 600;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1.2;
  transition: all 0.15s ease;
}
.variant-chip small {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--loam);
}
.variant-chip.active {
  background: var(--moss);
  color: #fff;
  border-color: var(--moss);
}
.variant-chip.active small { color: rgba(255,255,255,0.8); }
.variant-chip:disabled {
  opacity: 0.45;
  text-decoration: line-through;
  cursor: not-allowed;
}
@media (hover: hover) {
  .variant-chip:not(.active):not(:disabled):hover { border-color: var(--moss); }
}

.qty-add-row {
  display: flex;
  gap: var(--sp-sm);
  /* Stretch, so the stepper takes its height from the basket button beside
     it and the two read as one control group rather than two loose parts. */
  align-items: stretch;
  margin-bottom: var(--sp-md);
  flex-wrap: wrap;
  --ctl-h: 56px;
}
/* The CTA takes whatever the stepper leaves, so the pair fills the column
   instead of trailing off half way across it. With less than 280px to work
   with it wraps to its own full-width line rather than breaking its label. */
.qty-add-row .pdp-cta-row { flex: 1000 1 280px; min-width: 0; }
.qty-add-row .pdp-cta-row .btn { flex: 1; min-height: var(--ctl-h); }
/* One control height for the pair, whether they share a line or not. */
.qty-add-row .qty-stepper { height: auto; min-height: var(--ctl-h); flex: 1 1 auto; }
/* Sharing a line the CTA takes virtually all the free space, so the stepper
   sits at its natural size; wrapped to a line of its own it has that space
   to itself and spans the full width, minus and plus at either end. */
.qty-add-row .qty-stepper input { flex: 1; }
.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: var(--border-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
  height: 48px;
}
.qty-stepper button {
  background: transparent;
  border: 0;
  width: 44px;
  height: 100%;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--bark);
  font-family: inherit;
  font-weight: 600;
}
@media (hover: hover) {
  .qty-stepper button:hover { background: var(--linen); }
}
.qty-stepper input {
  width: 56px;
  height: 100%;
  border: 0;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  color: var(--bark);
  font-family: inherit;
  background: transparent;
}
.qty-stepper input:focus-visible { outline: none; }

.pdp-cta-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.pdp-fav {
  width: 48px;
  height: 48px;
  border: var(--border-strong);
  border-radius: var(--radius-md);
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--loam);
}
.pdp-fav.active { color: var(--clay); }
.pdp-fav.active svg { fill: var(--clay); }

.stock-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--sp-md);
  font-size: 0.9rem;
}

.spec-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-md);
  border-top: var(--border);
}
.spec-list li {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: var(--border);
  font-size: 0.95rem;
}
.spec-list li .spec-label { color: var(--loam); font-weight: 500; }
.spec-list li .spec-value { color: var(--bark); font-weight: 600; }

.pdp-section {
  padding: var(--sp-lg) 0;
  border-top: var(--border);
}
.pdp-section h2 { font-size: var(--fs-h3); margin: 0 0 var(--sp-sm); }
.pdp-section p { font-size: 1rem; max-width: 65ch; }
/* Console description content: subheadings and bullet lists */
#pdp-about-body h3 { font-size: 1.05rem; margin: var(--sp-sm) 0 var(--sp-xs); color: var(--bark); }
#pdp-about-body ul { max-width: 65ch; margin: 0 0 var(--sp-sm); padding-left: 1.35rem; }
#pdp-about-body li { font-size: 1rem; margin-bottom: 6px; }

/* Delivery block + calculator */
.delivery-block {
  background: var(--linen);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-md);
}
.delivery-block h3 {
  font-size: 1rem;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.delivery-block h3 svg { width: 20px; height: 20px; color: var(--moss); }
.delivery-method-line {
  font-size: 0.95rem;
  margin-bottom: var(--sp-sm);
  color: var(--bark);
}
.calc-row {
  display: flex;
  gap: 8px;
  margin-top: var(--sp-sm);
  flex-wrap: wrap;
}
.calc-row input {
  /* An input carries its own intrinsic width (~20 characters); min-width: 0
     lets it shrink instead of dragging the column wider than the phone, and
     the basis wraps the button below rather than squeezing the field down to
     a few characters. */
  flex: 1 1 160px;
  min-width: 0;
  font-family: inherit;
  font-size: 1rem;
  padding: 12px 14px;
  border: var(--border-strong);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--slate);
  min-height: 44px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.calc-result {
  margin-top: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  background: #fff;
  border-radius: var(--radius-md);
  border-left: 3px solid var(--info);
  font-size: 0.95rem;
}
.calc-result.success { border-left-color: var(--success); }
.calc-result.error { border-left-color: var(--error); }
.calc-result strong {
  display: block;
  font-size: 1.15rem;
  color: var(--bark);
  margin-bottom: 4px;
}
.calc-result .price { color: var(--moss); font-size: 1.35rem; font-weight: 700; }
.calc-options {
  margin-top: var(--sp-sm);
  padding-top: var(--sp-sm);
  border-top: var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.calc-options label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--bark);
}
.calc-options input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--moss);
}

/* Bulk discount table */
.bulk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.bulk-table th, .bulk-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: var(--border);
}
.bulk-table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--loam);
  font-weight: 700;
}
.bulk-table td.qty { font-weight: 600; color: var(--bark); }
.bulk-table td.price { font-weight: 700; color: var(--moss); }
.bulk-table td.save { font-size: 0.85rem; color: var(--success); font-weight: 600; }
.bulk-table tr.current {
  background: rgba(45, 74, 46, 0.06);
  position: relative;
}
.bulk-table tr.current td:first-child::before {
  content: '→';
  color: var(--moss);
  font-weight: 700;
  margin-right: 6px;
}

/* =========================================================
   CART DRAWER
   ========================================================= */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(37, 37, 33, 0.5);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  backdrop-filter: blur(2px);
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 100vw;
  background: var(--limestone);
  z-index: 100;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}
.cart-drawer.open { transform: translateX(0); }

.cart-head {
  padding: var(--sp-md);
  border-bottom: var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--linen);
}
.cart-head h3 { margin: 0; font-size: 1.2rem; }
.cart-head .close-btn {
  background: transparent;
  border: 0;
  width: 40px;
  height: 40px;
  cursor: pointer;
  color: var(--bark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
}
@media (hover: hover) {
  .cart-head .close-btn:hover { background: rgba(58, 42, 28, 0.08); }
}

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-sm);
}
.cart-empty {
  text-align: center;
  padding: var(--sp-2xl) var(--sp-md);
  color: var(--loam);
}
.cart-empty svg { width: 48px; height: 48px; margin: 0 auto var(--sp-sm); color: var(--stone); }
.cart-empty h4 { margin: 0 0 8px; font-size: 1.1rem; color: var(--bark); }
.cart-empty p { font-size: 0.9rem; margin-bottom: var(--sp-md); }

.cart-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: var(--sp-sm);
  padding: var(--sp-sm);
  background: #fff;
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  align-items: start;
}
.cart-item-img {
  width: 56px;
  height: 56px;
  background: var(--linen);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-info h5 {
  margin: 0 0 2px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bark);
  line-height: 1.3;
}
.cart-item-info .variant { font-size: 0.78rem; color: var(--loam); }
.cart-item-info .qty-stepper { height: 32px; margin-top: 6px; }
.cart-item-info .qty-stepper button { width: 30px; font-size: 1rem; }
.cart-item-info .qty-stepper input { width: 36px; font-size: 0.85rem; }
.cart-item-right {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.cart-item-price {
  font-weight: 700;
  color: var(--bark);
  font-feature-settings: 'tnum';
}
.cart-item-remove {
  background: transparent;
  border: 0;
  color: var(--loam);
  font-size: 0.78rem;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
}

.cart-foot {
  padding: var(--sp-md);
  border-top: var(--border);
  background: var(--linen);
}
.cart-foot .totals {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--sp-sm);
}
.cart-foot .totals .row {
  display: flex;
  justify-content: space-between;
  font-size: 0.95rem;
}
.cart-foot .totals .row.total {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--bark);
  padding-top: 8px;
  border-top: var(--border);
  font-feature-settings: 'tnum';
}
/* Postcode check in the basket */
.cart-postcode { margin-bottom: var(--sp-sm); }
.cart-postcode label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--bark); margin-bottom: 6px; }
.cart-postcode .calc-row { display: flex; gap: 8px; margin-top: 0; }
.cart-postcode .calc-row input { flex: 1; min-width: 0; }
.cart-postcode .calc-result { margin-top: 8px; font-size: 0.9rem; }
/* Delivery has no figure until checkout: the explanation sits where the
   price would, in the quieter note style. */
.cart-foot .totals .row.delivery-tbc { gap: var(--sp-sm); align-items: baseline; }
.cart-foot .totals .row.delivery-tbc #cart-delivery { text-align: right; font-size: 0.85rem; color: var(--loam); }
.cart-foot .delivery-note {
  font-size: 0.78rem;
  color: var(--loam);
  margin: 0 0 var(--sp-sm);
}

/* =========================================================
   TOAST
   ========================================================= */
.toast-container {
  position: fixed;
  bottom: var(--sp-md);
  right: var(--sp-md);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--bark);
  color: #fff;
  padding: 14px var(--sp-md);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-lg);
  min-width: 280px;
  max-width: 400px;
  pointer-events: auto;
  transform: translateY(150%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast-icon {
  width: 32px;
  height: 32px;
  background: var(--success);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.toast-icon svg { width: 18px; height: 18px; color: #fff; }
.toast strong { display: block; font-size: 0.95rem; margin-bottom: 2px; }
.toast small { font-size: 0.78rem; color: rgba(255,255,255,0.7); }
.toast-link {
  background: transparent;
  border: 0;
  color: var(--lichen);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
  margin-left: auto;
  font-family: inherit;
}
@media (max-width: 480px) {
  .toast-container { right: var(--sp-sm); left: var(--sp-sm); bottom: var(--sp-sm); }
  .toast { min-width: 0; }
}

/* =========================================================
   REVIEW PANEL (off-canvas, prototype-only)
   ========================================================= */
.review-toggle {
  position: fixed;
  bottom: var(--sp-md);
  left: var(--sp-md);
  z-index: 80;
  background: var(--clay);
  color: #fff;
  border: 0;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: var(--shadow-lg);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.review-toggle svg { width: 16px; height: 16px; }
@media (hover: hover) {
  .review-toggle:hover { background: #c97144; }
}

.review-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 480px;
  max-width: 100vw;
  background: var(--bark);
  color: var(--wheat);
  z-index: 110;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
  font-size: 0.92rem;
  box-shadow: var(--shadow-lg);
}
.review-panel.open { transform: translateX(0); }
.review-head {
  padding: var(--sp-md);
  background: var(--moss-deep);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.review-head h3 {
  color: var(--lichen);
  font-size: 0.85rem;
  margin: 0 0 2px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.review-head h2 {
  color: #fff;
  font-size: 1.1rem;
  margin: 0;
}
.review-head .close-btn {
  background: transparent;
  border: 0;
  color: #fff;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
}
.review-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-md);
}
.review-section { margin-bottom: var(--sp-lg); }
.review-section h4 {
  color: var(--lichen);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.review-section ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.review-section li {
  padding: 8px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.review-section li:last-child { border-bottom: 0; }
.review-section li .tag {
  background: var(--clay);
  color: #fff;
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  margin-top: 2px;
}
.review-section li .tag.done { background: var(--success); }
.review-section li .tag.flag { background: var(--warning); }
.review-section .q {
  background: rgba(212, 194, 154, 0.08);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border-left: 3px solid var(--clay);
  margin-bottom: 8px;
  color: #fff;
  font-size: 0.92rem;
}
.review-section .q strong { color: var(--clay); display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px; }

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}
/* Accessibility: skip-to-content link, visible only when keyboard-focused. */
.skip-link{position:absolute;left:.5rem;top:-3rem;z-index:1000;padding:.6rem 1rem;background:var(--moss);color:#fff;text-decoration:none;border-radius:6px;transition:top .15s ease;}
.skip-link:focus{top:.5rem;}

/* ============================================================
   COVERAGE CALCULATOR + ADVICE (PDP)  -  added for product tools
   ============================================================ */
.pdp-advice p { font-size: 1rem; max-width: 65ch; margin: 0 0 var(--sp-xs); }
.calc-intro { color: var(--loam); }

.coverage-calc {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-sm);
  margin-top: var(--sp-sm);
}
.cc-field { display: flex; flex-direction: column; gap: 6px; }
.cc-field label { font-size: var(--fs-small); font-weight: 600; color: var(--loam); }
.cc-input { display: flex; align-items: center; gap: 6px; }
.cc-input input {
  width: 120px;
  padding: 10px 12px;
  border: 1px solid var(--stone);
  border-radius: var(--radius-md);
  font-size: 1rem;
  background: #fff;
}
.cc-unit { color: var(--loam); font-size: 0.95rem; }
.coverage-calc .btn { min-height: 44px; }
.cc-result .cc-sub { color: var(--loam); font-size: 0.9rem; margin-top: 2px; }
.cc-note { font-size: var(--fs-small); color: var(--stone); margin-top: var(--sp-xs); }
.pdp-related-grid { margin-top: var(--sp-sm); }

@media (max-width: 480px) {
  .coverage-calc { align-items: stretch; }
  .cc-input input { width: 100%; }
  .coverage-calc .btn { width: 100%; }
}

/* ============================================================
   ORDERING PAUSED (body[data-ordering="paused"], ORDERING_LIVE env)
   ============================================================ */
.order-paused-note {
  display: none;
  background: var(--linen);
  border-left: 3px solid var(--clay);
  border-radius: var(--radius-lg);
  padding: var(--sp-md);
  margin: var(--sp-sm) 0;
}
.order-paused-note strong { display: block; font-size: 1.05rem; color: var(--bark); margin-bottom: 6px; }
.order-paused-note p { margin: 0 0 var(--sp-sm); color: var(--loam); font-size: 0.95rem; }
.order-paused-delivery {
  display: none;
  color: var(--loam);
  font-size: 0.95rem;
  padding-top: var(--sp-xs);
}
.order-paused-delivery a { color: var(--moss); font-weight: 600; }
body[data-ordering="paused"] .order-paused-note { display: block; }
body[data-ordering="paused"] .order-paused-delivery { display: block; }
/* By-arrangement option chosen (console online_sale false): replaces the
   quantity and Add row. Same look as the ordering-paused note, which
   already says "call us" when ordering is paused - so this one stands down. */
.pdp-phone-note {
  background: var(--linen);
  border-left: 3px solid var(--clay);
  border-radius: var(--radius-lg);
  padding: var(--sp-md);
  margin: 0 0 var(--sp-md);
}
.pdp-phone-note[hidden] { display: none; }
.pdp-phone-note strong { display: block; font-size: 1.05rem; color: var(--bark); margin-bottom: 6px; }
.pdp-phone-note p { margin: 0 0 var(--sp-sm); color: var(--loam); font-size: 0.95rem; }
.pdp-phone-note .btn { width: 100%; justify-content: center; }
body[data-ordering="paused"] .pdp-phone-note { display: none; }
/* Disabled until an option is chosen */
.btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none; }
body[data-ordering="paused"] .qty-add-row { display: none; }
body[data-ordering="paused"] .cart-toggle { display: none; }
body[data-ordering="paused"] .add-btn { opacity: 0.55; }


/* ============================================================
   CONTENT PAGES (delivery, contact, legal)
   ============================================================ */
.content-page { max-width: 820px; padding-top: var(--sp-lg); padding-bottom: var(--sp-xl); }
.content-page h1 { font-size: var(--fs-h2); margin: 0 0 var(--sp-xs); }
.content-page .content-updated { color: var(--loam); font-size: var(--fs-small); margin: 0 0 var(--sp-lg); }
.content-page h2 { font-size: var(--fs-h3); margin: var(--sp-lg) 0 var(--sp-xs); }
.content-page h3 { font-size: 1.1rem; margin: var(--sp-md) 0 6px; color: var(--bark); }
.content-page h4 { font-size: 1rem; margin: var(--sp-sm) 0 4px; color: var(--bark); }
.content-page p, .content-page li { font-size: 1rem; line-height: 1.65; max-width: 70ch; }
.content-page ul { padding-left: 1.35rem; margin: var(--sp-xs) 0 var(--sp-sm); }
.content-page li { margin-bottom: 6px; }
.content-page a:not(.btn) { color: var(--moss); font-weight: 600; }
.content-cta {
  background: var(--linen);
  border-radius: var(--radius-lg);
  padding: var(--sp-md);
  margin: var(--sp-md) 0;
}
.content-cta strong { display: block; color: var(--bark); margin-bottom: 4px; }
.content-cta p { margin: 0 0 var(--sp-sm); color: var(--loam); }
.content-cta .btn { margin-right: var(--sp-xs); margin-bottom: var(--sp-xs); }

/* ============================================================
   TITLE OVERFLOW + UNIFORM CARDS (long live catalogue names)
   ============================================================ */
/* Card titles: clamp to two lines and reserve exactly two lines, so every
   card in a row is the same height whatever the name length. */
.product-info h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  min-height: 2.6em; /* 2 lines at line-height 1.3 */
}
.product-info .meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Search overlay results: flex/grid children need min-width 0 or a long
   product name stretches its column and breaks the 50/50 layout. */
.search-result-item { min-width: 0; }
.search-result-info { min-width: 0; flex: 1; }
.search-result-info .name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.search-result-info .cat {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-result-info .price { white-space: nowrap; }

/* =========================================================
   GROUP CHROME TOKENS (component port kit)
   Only token names SGS did not already define. Netbar --oak-*
   colours are a locked group-wide spec - do not restyle.
   ========================================================= */
:root {
  --oak-chrome:      #1F1812;
  --oak-chrome-soft: #2A2520;
  --oak-canvas:      #FBF8F1;
  --oak-meadow:      #1F4D34;
  --font-network:    'Manrope', system-ui, -apple-system, sans-serif;

  --meadow:        #1F4D34;
  --meadow-hover:  #2A6244;
  --meadow-deep:   #163A27;
  --meadow-tint:   rgba(31, 77, 52, 0.08);
  --meadow-line:   rgba(31, 77, 52, 0.22);
  --meadow-soft:   #D5E2D0;

  --chrome:          #1F1812;
  --chrome-soft:     #2A2520;
  --chrome-on:       #F4ECE0;
  --chrome-on-muted: rgba(244, 236, 224, 0.55);

  --canvas:   #FBF8F1;
  --card:     #FFFFFF;
  --card-alt: #FAF7F0;
  --divider:  #EFEBE0;

  --text-primary:   #1F1812;
  --text-secondary: #5C5547;
  --text-tertiary:  #7A7363;
  --text-muted:     #A39B86;

  --oak-cream:      var(--chrome-on);
  --oak-olive-deep: var(--chrome);
  --oak-charcoal:   var(--chrome-soft);
  --oak-jute-bright:var(--wheat);

  --font-display: 'Libre Baskerville', Georgia, serif;
  --font-sans:    'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono:    'Manrope', system-ui, -apple-system, sans-serif;

  --radius-xl: 20px;
  --sp-2xl:    6rem;
  --sp-hero:   5rem;
}

/* Base rules the ported components assume (kit prerequisites) */
html, body { overflow-x: hidden; overflow-x: clip; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
/* =========================================================
   TICKER ANNOUNCEMENTS MODAL — tapping the netbar ticker on
   mobile opens the full list of announcements.
   ========================================================= */
@media (max-width: 720px) {
  .hifi-netbar-ticker { cursor: pointer; }
}
.ticker-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(15, 18, 14, 0.66);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.ticker-modal.open { opacity: 1; pointer-events: auto; }
.ticker-modal-card {
  background: var(--canvas);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 560px;
  max-height: 84vh;
  overflow-y: auto;
  padding: 22px 20px calc(26px + env(safe-area-inset-bottom, 0px));
  transform: translateY(24px);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}
.ticker-modal.open .ticker-modal-card { transform: translateY(0); }
@media (min-width: 721px) {
  .ticker-modal { align-items: center; padding: 24px; }
  .ticker-modal-card { border-radius: 20px; padding-bottom: 26px; }
}
.ticker-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.ticker-modal-head .eyebrow { margin: 0; }
.ticker-modal-title {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 1.35rem;
  color: var(--text-primary);
  margin: 0 0 14px;
}
.ticker-modal-close {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--meadow-tint);
  color: var(--meadow);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.ticker-modal-close:hover { background: var(--meadow); color: var(--chrome-on); }
.ticker-modal-close svg { width: 18px; height: 18px; }
.ticker-modal-list { display: grid; gap: 10px; }
.ticker-modal-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  padding: 13px 15px;
}
.ticker-modal-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--meadow-tint);
  color: var(--meadow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ticker-modal-icon svg { width: 20px; height: 20px; }
.ticker-modal-item strong {
  display: block;
  font-size: 0.95rem;
  color: var(--text-primary);
  line-height: 1.3;
}
.ticker-modal-item small {
  display: block;
  font-size: 0.82rem;
  color: var(--text-tertiary);
  line-height: 1.4;
  margin-top: 2px;
}

/* =========================================================
   NEWSLETTER BAND + SITE FOOTER
   Cream band with the animal chorus + pill signup, then the
   chrome footer: contact buttons, five nav groups (columns on
   wide, boxed accordions below 860px), legal row with credit.
   ========================================================= */

/* ---- Newsletter band ---- */
.nlb {
  background: var(--canvas);
  border-top: 1px solid var(--divider);
  padding: 56px 0 60px;
}
.nlb-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 48px;
  align-items: center;
}
.nlb-pill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  background: var(--meadow);
  color: var(--chrome-on);
  font-family: var(--ftr-mono, 'Manrope', sans-serif);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
}
.nlb-pill--stacked { display: none; }

/* The animal chorus: top padding reserves the bubbles' airspace so they
   can never overlap whatever sits above the row */
.nlb-animals {
  display: flex;
  gap: 12px;
  padding-top: 46px;
  margin-bottom: 20px;
}
.nlb-animal { position: relative; display: inline-block; }
.nlb-animal img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 1px solid #C9C2B0;
  object-fit: cover;
  display: block;
}
.nlb-bubble {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: #B8956A;
  color: var(--chrome);
  font-family: var(--ftr-mono, 'Manrope', sans-serif);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  animation: nlb-say 9s infinite;
}
.nlb-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #B8956A;
  border-bottom: 0;
}
/* First and last bubbles pin to the circle's inner edge so they cannot
   push past the container and cause horizontal scroll */
.nlb-animal:first-child .nlb-bubble { left: 0; transform: none; }
.nlb-animal:first-child .nlb-bubble::after { left: 22px; }
.nlb-animal:last-child .nlb-bubble { left: auto; right: 0; transform: none; }
.nlb-animal:last-child .nlb-bubble::after { left: auto; right: 17px; transform: none; }
/* Staggered so they appear to speak at random, one at a time */
.nlb-animal:nth-child(1) .nlb-bubble { animation-delay: 0s; }
.nlb-animal:nth-child(2) .nlb-bubble { animation-delay: 3.7s; }
.nlb-animal:nth-child(3) .nlb-bubble { animation-delay: 7.4s; }
.nlb-animal:nth-child(4) .nlb-bubble { animation-delay: 1.9s; }
.nlb-animal:nth-child(5) .nlb-bubble { animation-delay: 5.6s; }
@keyframes nlb-say {
  0%       { opacity: 0; transform: var(--nlb-tx, translateX(-50%)) translateY(6px); }
  4%, 16%  { opacity: 1; transform: var(--nlb-tx, translateX(-50%)) translateY(0); }
  20%, 100%{ opacity: 0; transform: var(--nlb-tx, translateX(-50%)) translateY(-4px); }
}
.nlb-animal:first-child .nlb-bubble,
.nlb-animal:last-child .nlb-bubble { --nlb-tx: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .nlb-bubble { animation: none; opacity: 0; }
}

.nlb-title {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-weight: 700;
  font-style: normal;
  font-size: clamp(1.7rem, 2.4vw, 2.4rem);
  line-height: 1.15;
  color: var(--text-primary);
  margin: 0 0 12px;
}
.nlb-desc {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0;
  max-width: 48ch;
}

.nlb-right { display: flex; flex-direction: column; gap: 16px; }
.nlb-form { display: flex; flex-direction: column; gap: 12px; }
.nlb-group {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #C9C2B0;
  border-radius: 999px;
  padding: 5px;
}
.nlb-group input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text-primary);
  padding: 10px 16px;
  min-height: 44px;
}
.nlb-group input::placeholder { color: var(--text-tertiary); }
.nlb-group input:focus { outline: none; }
.nlb-group:focus-within { border-color: var(--meadow); box-shadow: 0 0 0 2px rgba(31, 77, 52, 0.25); }
.nlb-group button {
  flex-shrink: 0;
  border: 0;
  background: var(--meadow);
  color: var(--chrome-on);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0 22px;
  min-height: 44px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms ease;
}
.nlb-group button:hover { background: var(--meadow-hover); }
.nlb-group button:active { background: var(--meadow-deep); }
.nlb-group button:focus-visible { outline: 2px solid var(--meadow); outline-offset: 2px; }
.nlb-note { margin: 0; font-size: 0.82rem; color: var(--text-tertiary); white-space: nowrap; }
.nlb-note.is-error { color: var(--error); white-space: normal; }
.nlb-note.is-success { color: var(--meadow); white-space: normal; font-weight: 600; }

@media (max-width: 860px) {
  .nlb { padding: 44px 0 48px; }
  .nlb-grid { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .nlb-left { display: flex; flex-direction: column; align-items: center; }
  /* Signposted order: pill, animals, headline, description, form */
  .nlb-pill--stacked { display: inline-flex; align-self: center; margin-bottom: 4px; }
  .nlb-pill--side { display: none; }
  .nlb-animals { padding-top: 42px; margin-bottom: 16px; }
  .nlb-desc { margin-inline: auto; }
  .nlb-right { gap: 12px; }
  .nlb-note { white-space: normal; }
}
@media (max-width: 560px) {
  .nlb-animal img { width: 56px; height: 56px; }
  .nlb-animals { gap: 8px; padding-top: 40px; }
  /* Stacked control: input row, then a full-width button */
  .nlb-group { flex-direction: column; align-items: stretch; border-radius: 22px; padding: 6px; gap: 6px; }
  .nlb-group input { text-align: center; }
  .nlb-group button { border-radius: 16px; padding: 12px 22px; }
  /* Balance the small print so it never orphans a single word */
  .nlb-note { max-width: 30ch; margin-inline: auto; text-wrap: balance; }
}

/* ---- Footer ---- */
.ftr {
  --ftr-hairline: rgba(244, 236, 224, 0.16);
  --ftr-on: #F4ECE0;
  --ftr-on-muted: rgba(244, 236, 224, 0.7);
  --ftr-mono: 'Manrope', system-ui, -apple-system, sans-serif;
  background: var(--chrome);
  color: var(--ftr-on);
  padding: 0;
}
.ftr a { text-decoration: none; }

/* Band one: identity + contact, centred as a single column at every width
   (logo, address, social, then the contact buttons in order). */
.ftr-id {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  padding: 40px 0 32px;
  border-bottom: 1px solid var(--ftr-hairline);
}
.ftr-brand { display: flex; flex-direction: column; align-items: center; }
.ftr-logo { display: inline-block; margin-bottom: 14px; }
.ftr-logo img { height: 36px; width: auto; max-width: none; display: block; }
.ftr-address { margin: 0; font-size: 0.88rem; color: var(--ftr-on-muted); line-height: 1.6; max-width: 34ch; }
.ftr-contact { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.ftr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
  white-space: nowrap;
}
.ftr-btn--primary { background: var(--meadow); color: var(--chrome-on); }
.ftr-btn--primary:hover { background: var(--meadow-hover); color: var(--chrome-on); }
.ftr-btn--light { background: var(--ftr-on); color: var(--chrome); }
.ftr-btn--light:hover { background: #fff; color: var(--chrome); }
.ftr-btn--ghost { background: transparent; color: var(--ftr-on); border-color: rgba(244, 236, 224, 0.35); }
.ftr-btn--ghost:hover { border-color: var(--ftr-on); color: var(--ftr-on); }
.ftr-btn:focus-visible { outline: 2px solid var(--meadow-soft); outline-offset: 2px; }

/* Band two: navigation - content-sized columns spread the full width */
.ftr-nav {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 34px 0 38px;
  border-bottom: 1px solid var(--ftr-hairline);
}
.ftr-group-head {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0 0 12px;
  text-align: left;
  font-family: var(--ftr-mono);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--wheat);
  cursor: default;
  white-space: nowrap;
}
.ftr-group-chev { display: none; width: 16px; height: 16px; }
.ftr-links { list-style: none; margin: 0; padding: 0; }
.ftr-links li { margin: 0; padding: 0; }
.ftr-links a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 0;
  font-size: 0.88rem;
  color: var(--ftr-on-muted);
  white-space: nowrap;
}
.ftr-links a:hover { color: var(--wheat); }
.ftr-links svg { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.55; }

/* Band three: legal + credit */
.ftr-legal {
  display: grid;
  /* The copyright and credit take their natural width and the policy links
     take the flexible middle, so the copyright is not squeezed onto a
     second line by a long policy row. */
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 20px 0 22px;
  font-size: 0.82rem;
  color: var(--ftr-on-muted);
}
.ftr-copy { font-size: 0.72rem; line-height: 1.4; white-space: nowrap; }
.ftr-policies { display: flex; gap: 8px 22px; flex-wrap: wrap; justify-content: center; }
.ftr-policies a { color: var(--ftr-on-muted); white-space: nowrap; }
.ftr-policies a:hover { color: var(--wheat); }
.ftr-credit { justify-self: end; white-space: nowrap; }
.ftr-credit a { color: inherit; }
.ftr-credit strong { color: var(--ftr-on); font-weight: 600; }
.ftr-credit a:hover strong { color: var(--wheat); }

/* Medium and narrow: stacked identity, boxed accordions, centred legal */
@media (max-width: 860px) {
  .ftr-id { gap: 20px; padding: 32px 0 26px; }

  .ftr-nav { display: block; padding: 24px 0 26px; }
  .ftr-group { margin-bottom: 10px; }
  .ftr-group:last-child { margin-bottom: 0; }
  .ftr-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--chrome-soft);
    border: 1px solid var(--ftr-hairline);
    border-radius: 8px;
    padding: 14px 16px;
    margin: 0;
    min-height: 48px;
    font-size: 0.7rem;
    color: var(--ftr-on);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .ftr-group-head:focus-visible { outline: 2px solid var(--meadow-soft); outline-offset: 2px; }
  .ftr-group-chev { display: block; color: var(--ftr-on-muted); transition: transform 0.2s ease; }
  .ftr-group.open .ftr-group-chev { transform: rotate(180deg); }
  .ftr-links { display: none; padding: 6px 6px 12px; }
  .ftr-group.open .ftr-links { display: block; }
  .ftr-links a { display: flex; padding: 9px 6px; font-size: 0.95rem; white-space: normal; }

  /* Below 860: policies first, then the copyright with the credit
     sitting directly beneath it */
  .ftr-legal { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; padding: 18px 0 20px; }
  .ftr-copy { white-space: normal; }

  /* The four legal links as a 2x2 grid of boxes, dressed like the
     accordion heads above so they read as one family. 1fr columns with
     min-width:0 and wrapping text mean a longer label (or a bigger user
     font size) makes a box taller, never wider - the grid cannot break. */
  .ftr-policies {
    order: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
  }
  .ftr-policies a,
  .ftr-policies .ftr-cookie-prefs {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 48px;
    padding: 12px 10px;
    background: var(--chrome-soft);
    border: 1px solid var(--ftr-hairline);
    border-radius: 8px;
    color: var(--ftr-on);
    font-size: 0.88rem;
    text-align: center;
    white-space: normal;
    overflow-wrap: break-word;
    text-decoration: none;
  }
  .ftr-policies a:hover,
  .ftr-policies .ftr-cookie-prefs:hover { color: var(--wheat); border-color: var(--wheat); }
  .ftr-policies a:focus-visible,
  .ftr-policies .ftr-cookie-prefs:focus-visible { outline: 2px solid var(--meadow-soft); outline-offset: 2px; }
  /* No bottom margin: the credit is a continuation of the copyright line,
     so the two sit on consecutive lines with nothing but line-height
     between them. */
  .ftr-copy { order: 2; display: block; margin: 14px 0 0; }
  .ftr-credit { order: 3; width: 100%; }
  .ftr-credit {
    display: block;
    margin-right: 0;
  }
}
@media (max-width: 560px) {
  /* Full-width stacked buttons on phones; identity is already centred */
  .ftr-contact { flex-direction: column; width: 100%; }
  .ftr-btn { width: 100%; }
}

/* =========================================================
   BACK TO TOP — fixed bottom-right, appears after scrolling.
   Sits at z-index 60: above page content, below drawers/modals
   (100+). If a cookie consent banner lands later, give the
   banner a bottom offset or raise --btt-offset on the body.
   ========================================================= */
.back-to-top {
  position: fixed;
  right: 18px;
  /* --btt-lift is raised by JS while the footer's legal band is on screen,
     so the button never sits on top of the "Powered by The Farm Engine"
     credit now that the credit is pinned hard right. */
  bottom: calc(18px + var(--btt-lift, 0px) + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--meadow);
  color: var(--chrome-on);
  box-shadow: 0 6px 18px rgba(31, 24, 18, 0.28);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease, bottom 0.25s ease;
}
.back-to-top.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover { background: var(--meadow-hover); }
.back-to-top svg { width: 20px; height: 20px; }

/* Belt and braces with the JS: the basket flyout and the added-to-basket
   modal both sit above this button, so it never shows underneath them. */
body.cart-open .back-to-top,
body.added-open .back-to-top {
  opacity: 0;
  pointer-events: none;
}

/* =========================================================
   ORDERING PREVIEW BAR  -  only ever rendered for a browser holding
   a valid preview cookie (app/partials/preview-bar.php)
   ========================================================= */
.preview-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 8px var(--sp-md);
  background: var(--clay);
  color: #fff;
  font-size: 0.85rem;
  text-align: center;
}
.preview-bar strong { font-weight: 700; }
.preview-bar a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.preview-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  flex: none;
  animation: previewPulse 1.8s ease-in-out infinite;
}
@keyframes previewPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .preview-dot { animation: none; } }

/* =========================================================
   ADDED TO BASKET  -  confirmation + cross-sell offers
   (markup: app/partials/added-modal.php, content: showAddedModal)
   ========================================================= */
.added-modal { position: fixed; inset: 0; z-index: 210; }
.added-modal[hidden] { display: none; }
.added-veil {
  position: absolute;
  inset: 0;
  background: rgba(37, 37, 33, 0.55);
  animation: addedVeil 0.18s ease both;
}
@keyframes addedVeil { from { opacity: 0; } to { opacity: 1; } }
.added-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 2 * var(--sp-md)));
  max-height: min(86vh, 760px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--limestone);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: addedCard 0.22s cubic-bezier(0.32, 0.72, 0, 1) both;
}
@keyframes addedCard {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
.added-head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-sm);
  padding: var(--sp-md) var(--sp-md) var(--sp-sm);
}
.added-tick {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.added-tick svg { width: 18px; height: 18px; }
.added-head h2 { margin: 0; font-size: 1.15rem; }
.added-line {
  margin: 2px 0 0;
  font-size: 0.9rem;
  color: var(--loam);
}
.added-close {
  margin-left: auto;
  flex: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--loam);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.added-close svg { width: 18px; height: 18px; }

.added-suggest {
  padding: var(--sp-sm) var(--sp-md);
  border-top: var(--border);
}
.added-suggest[hidden] { display: none; }
.added-suggest h3 {
  margin: 0 0 var(--sp-sm);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--loam);
}
.added-suggest-list { display: flex; flex-direction: column; gap: 8px; }
.added-suggest-item {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 8px;
  background: #fff;
  border: var(--border);
  border-radius: var(--radius-md);
}
.as-media {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  background: var(--linen);
  overflow: hidden;
  display: block;
}
.as-media img { width: 100%; height: 100%; object-fit: cover; }
.as-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.as-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--bark);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.as-price { font-size: 0.85rem; font-weight: 700; color: var(--bark); }
.as-price small { font-weight: 500; color: var(--loam); }
.as-add { flex: none; }

.added-actions {
  display: flex;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md) calc(var(--sp-md) + env(safe-area-inset-bottom, 0px));
  border-top: var(--border);
}
.added-actions .btn { flex: 1; white-space: nowrap; }

/* Option picker: the product page's options table, inside the modal the Add
   button on a card opens when a product is sold in more than one size. */
.option-modal .option-body { padding: 0 var(--sp-md) var(--sp-sm); }
.option-modal .variant-table { max-height: min(52vh, 420px); overflow-y: auto; }

@media (max-width: 560px) {
  /* Phones: a bottom sheet rather than a centred card */
  .added-card {
    top: auto;
    bottom: 0;
    left: 0;
    transform: none;
    width: 100%;
    max-height: 88vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    animation: addedSheet 0.24s cubic-bezier(0.32, 0.72, 0, 1) both;
  }
  @keyframes addedSheet { from { transform: translateY(100%); } to { transform: translateY(0); } }
  .added-actions { flex-direction: column-reverse; }
}
@media (prefers-reduced-motion: reduce) {
  .added-card, .added-veil { animation: none; }
}

/* =========================================================

/* Social icons in the footer identity band (SGS addition to the kit) */
.ftr-social { display: flex; gap: 12px; margin-top: 14px; }
.ftr-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(244, 236, 224, 0.25);
  border-radius: 50%;
  color: var(--ftr-on-muted);
}
.ftr-social a:hover { color: var(--wheat); border-color: var(--wheat); }
.ftr-social svg { width: 19px; height: 19px; }
@media (max-width: 560px) { .ftr-social { justify-content: center; } }

/* =========================================================
   DATE OF BIRTH PICKER
   Trigger + three-step panel (year, month, day). Sits inside
   a .field, so it inherits the form's label and hint spacing.
   ========================================================= */
.dob { position: relative; }

.dob-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  background: var(--card);
  border: 1px solid var(--meadow-line);
  border-radius: 10px;
  font: inherit;
  font-size: 1rem;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dob-trigger:hover { border-color: var(--meadow); }
.dob-trigger:focus-visible { outline: 2px solid var(--meadow); outline-offset: 2px; }
.dob.is-open .dob-trigger { border-color: var(--meadow); box-shadow: 0 0 0 3px var(--meadow-tint); }
.dob.has-error .dob-trigger { border-color: var(--barn); }

.dob-trigger-icon { display: flex; color: var(--meadow); flex: none; }
.dob-trigger-icon svg { width: 20px; height: 20px; }
.dob-trigger-value { flex: 1 1 auto; color: var(--text-tertiary); }
.dob-trigger-value.is-set { color: var(--text-primary); font-weight: 600; }
.dob-trigger-action {
  flex: none;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--meadow);
}

/* ---- panel ---- */
.dob-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--card);
  border: 1px solid var(--meadow-line);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(31, 24, 18, 0.18);
  padding: 14px;
}
.dob-panel[hidden] { display: none; }

.dob-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.dob-step {
  flex: 1 1 auto;
  margin: 0;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.dob-back, .dob-close {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  min-height: 32px;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--meadow);
  cursor: pointer;
}
.dob-back:hover, .dob-close:hover { background: var(--meadow-tint); }
.dob-back:focus-visible, .dob-close:focus-visible { outline: 2px solid var(--meadow); outline-offset: 1px; }
.dob-back[hidden] { display: none; }
.dob-back svg, .dob-close svg { width: 16px; height: 16px; }
.dob-close { color: var(--text-tertiary); }

.dob-prompt {
  margin: 0 0 10px;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-primary);
}

.dob-crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.dob-crumbs[hidden] { display: none; }
.dob-crumb {
  padding: 4px 10px;
  background: var(--meadow-tint);
  border: 1px solid var(--meadow-line);
  border-radius: 999px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--meadow);
  cursor: pointer;
}
.dob-crumb:hover { background: var(--meadow-soft); }
.dob-crumb:focus-visible { outline: 2px solid var(--meadow); outline-offset: 1px; }

/* Scroll lives on the wrapper so the grid keeps its own padding */
.dob-grid-wrap { max-height: 244px; overflow-y: auto; overscroll-behavior: contain; }

.dob-grid { display: grid; gap: 6px; }
.dob-grid-year  { grid-template-columns: repeat(4, 1fr); }
.dob-grid-month { grid-template-columns: repeat(3, 1fr); }
.dob-grid-day   { grid-template-columns: repeat(7, 1fr); }

/* Decade heading spans the row it introduces */
.dob-decade {
  grid-column: 1 / -1;
  margin: 8px 0 2px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  /* Deliberately not uppercased: "2010s" is the label, and uppercasing
     turns the plural s into "2010S". */
  color: var(--text-muted);
}
.dob-decade:first-child { margin-top: 0; }

.dob-opt {
  min-height: 42px;
  padding: 8px 4px;
  background: var(--card-alt);
  border: 1px solid var(--meadow-line);
  border-radius: 8px;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.dob-opt:hover:not([disabled]) { background: var(--meadow-soft); border-color: var(--meadow); }
.dob-opt:focus-visible { outline: 2px solid var(--meadow); outline-offset: 1px; }
.dob-opt.is-chosen { background: var(--meadow); border-color: var(--meadow); color: var(--chrome-on); }
.dob-opt[disabled] {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.55;
}
.dob-grid-month .dob-opt { font-size: 0.86rem; }

.dob-note {
  margin: 10px 0 0;
  font-size: 0.8rem;
  color: var(--text-tertiary);
}
.dob-note[hidden] { display: none; }

.dob-error {
  margin: 8px 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--barn);
}
.dob-error[hidden] { display: none; }

/* No-JS: three plain selects side by side */
.dob-fallback { display: flex; gap: 8px; }
.dob-fallback select { flex: 1 1 0; min-width: 0; }

@media (max-width: 560px) {
  .dob-panel { padding: 12px; }
  .dob-grid-year { grid-template-columns: repeat(3, 1fr); }
  .dob-grid-month { grid-template-columns: repeat(2, 1fr); }
  .dob-grid-day { grid-template-columns: repeat(6, 1fr); }
  .dob-grid-wrap { max-height: 216px; }
  .dob-opt { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .dob-trigger, .dob-opt { transition: none; }
}


/* =========================================================
   THE FARM ENGINE MODAL (opens from the footer credit)
   Dropped in as shipped - every selector is prefixed tfe-.
   ========================================================= */
/* ===========================================================================
   FONTS

   These two rules cost the Oakley's site nothing on page load. A browser only
   downloads a webfont when rendered text actually uses it, and .tfe-root is
   display:none until the modal opens, so neither file is requested until a
   visitor clicks the credit. There is no <link>, no @import and no preload,
   and first paint on the Oakley's pages is unaffected.

   THE PATHS ARE THE ONLY THING TO CHANGE. Point them at whatever fonts
   directory the Oakley's site already uses.

   The family names are prefixed on purpose. If the Oakley's stylesheet ever
   declares its own 'Urbanist' or 'Space Mono' at different weights, these
   cannot clash with it. If the site already self-hosts these same two files,
   drop these two rules and change --tfe-font and --tfe-mono below to the
   family names the site already uses, so nothing is downloaded twice.
   =========================================================================== */
@font-face{
  font-family:'TFE Urbanist';
  src:url('/assets/fonts/urbanist-variable.woff2') format('woff2-variations'),
      url('/assets/fonts/urbanist-variable.ttf') format('truetype-variations');
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'TFE Space Mono';
  src:url('/assets/fonts/space-mono-regular.woff2') format('woff2'),
      url('/assets/fonts/space-mono-regular.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Scoped reset. Do not assume the host page sets this globally: if it does not,
   width:100% plus padding overflows and the email button breaks out of its box.
   Scoped to .tfe-root so it cannot touch anything else on the page. */
.tfe-root,.tfe-root *,.tfe-root *::before,.tfe-root *::after{box-sizing:border-box}

.tfe-root{
  /* brand */
  --tfe-sage-pale:#E0E3DD;
  --tfe-sage:#B5BD9A;
  --tfe-olive:#323625;
  --tfe-olive-grey:#434737;
  --tfe-clay:#D59B86;
  --tfe-clay-deep:#C78E72;
  --tfe-blush:#EACDC3;
  --tfe-chalk:#EDEFE6;

  /* radius. no square edges anywhere */
  --tfe-r1:8px; --tfe-r2:16px; --tfe-r3:28px; --tfe-rp:9999px;

  /* fluid spacing */
  --tfe-s1:clamp(.4rem,1.2vw,.6rem);
  --tfe-s2:clamp(.7rem,2vw,1rem);
  --tfe-s3:clamp(1rem,2.6vw,1.5rem);
  --tfe-s4:clamp(1.25rem,3.4vw,2.25rem);

  /* type */
  /* The fallbacks are load-bearing. If the woff2 files are not on the server
     yet, the panel still renders correctly in a system face. */
  --tfe-font:'TFE Urbanist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --tfe-mono:'TFE Space Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --tfe-t-eyebrow:clamp(.62rem,1.5vw,.72rem);
  --tfe-t-h2:clamp(1.55rem,5.2vw,2.6rem);
  --tfe-t-lead:clamp(1rem,2.4vw,1.16rem);
  --tfe-t-body:clamp(.94rem,2.1vw,1rem);
  --tfe-t-small:clamp(.8rem,1.9vw,.86rem);

  --tfe-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- backdrop ---------- */
.tfe-root{position:fixed;inset:0;z-index:2147483000;display:none;
  font-family:var(--tfe-font);-webkit-font-smoothing:antialiased}
.tfe-root[data-open="true"]{display:block}
.tfe-veil{position:absolute;inset:0;background:rgba(24,27,18,.62);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;
  transition:opacity .28s var(--tfe-ease)}
.tfe-root[data-shown="true"] .tfe-veil{opacity:1}

/* ---------- the panel ----------
   Inset on every side so the rounded corners are always visible, including on
   a phone. The panel never becomes a square-cornered full bleed sheet. */
.tfe-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:clamp(.6rem,2.5vw,2rem);overflow:auto;-webkit-overflow-scrolling:touch}
.tfe-panel{position:relative;width:100%;max-width:56rem;
  max-height:calc(100dvh - clamp(1.2rem,5vw,4rem));
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--tfe-chalk);color:var(--tfe-olive);
  border-radius:var(--tfe-r3);
  box-shadow:0 30px 80px -20px rgba(20,24,14,.55),0 0 0 1px rgba(50,54,37,.1);
  opacity:0;transform:translateY(14px) scale(.985);
  transition:opacity .3s var(--tfe-ease),transform .3s var(--tfe-ease)}
.tfe-root[data-shown="true"] .tfe-panel{opacity:1;transform:none}

/* ---------- close ---------- */
.tfe-close{position:absolute;top:clamp(.55rem,1.8vw,.9rem);right:clamp(.55rem,1.8vw,.9rem);
  z-index:3;width:44px;height:44px;display:grid;place-items:center;
  border:0;border-radius:var(--tfe-rp);cursor:pointer;
  /* solid, because on a phone it sits over the dark band and on a laptop it
     sits over the light one. It has to read on both. */
  background:var(--tfe-olive);color:var(--tfe-chalk);
  box-shadow:0 0 0 1px rgba(237,239,230,.28),0 2px 10px rgba(20,24,14,.25);
  transition:background .2s var(--tfe-ease),transform .2s var(--tfe-ease)}
.tfe-close svg{width:20px;height:20px}
@media (hover:hover){.tfe-close:hover{background:var(--tfe-olive-grey)}}
.tfe-close:focus-visible{outline:2px solid var(--tfe-clay);outline-offset:3px}

/* ---------- scrolling body ---------- */
.tfe-scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain}

/* ---------- docked action, phones and small tablets only ----------
   On a phone the advert is taller than the screen, so the email address sits
   below the fold and a visitor who does not scroll never sees it. The dock
   keeps it on screen the whole time. Above 900 the panel is two columns and
   the button is already visible, so the dock is removed rather than hidden. */
.tfe-dock{flex:0 0 auto;padding:var(--tfe-s2);background:var(--tfe-chalk);
  border-top:1px solid rgba(50,54,37,.14)}
.tfe-dock .tfe-mail{min-height:52px}
@media (min-width:900px){.tfe-dock{display:none}}

/* ---------- head band ---------- */
.tfe-head{position:relative;overflow:hidden;background:var(--tfe-olive);color:var(--tfe-chalk);
  padding:clamp(1.5rem,4.5vw,2.75rem) var(--tfe-s4) var(--tfe-s4)}
/* The decorative circle that used to sit here is gone. The mark carries the
   circle device now, and two of them in the same corner fought each other. */
/* ---------- the primary mark ----------
   Built to the 3A recipe. Everything derives from --tfe-mark, the tile width,
   so the proportions hold at any size: padding 10%, bubble 40% of the tile
   offset by 30% of itself, type 18%, radius 12.6%.

   The floor is 120px and it is enforced by the clamp. Do not lower it.

   This sits on Deep Olive, so it runs inverted per the recipe: Chalk tile,
   Deep Olive wordmark, Clay bubble unchanged. */
.tfe-mark{
  --tfe-mark:clamp(120px,20vw,148px);
  position:relative;z-index:1;flex:0 0 auto;
  width:var(--tfe-mark);aspect-ratio:1;
  margin:0 0 var(--tfe-s3);
  padding:calc(var(--tfe-mark) * .105);
  border-radius:calc(var(--tfe-mark) * .126);
  background:var(--tfe-chalk);
  overflow:hidden;display:flex;align-items:flex-end}
.tfe-mark__bubble{position:absolute;
  width:calc(var(--tfe-mark) * .4);height:calc(var(--tfe-mark) * .4);
  top:calc(var(--tfe-mark) * -.12);right:calc(var(--tfe-mark) * -.12);
  border-radius:var(--tfe-rp);background:var(--tfe-clay)}
.tfe-mark__word{position:relative;
  font-family:var(--tfe-font);font-weight:700;text-transform:uppercase;
  font-size:calc(var(--tfe-mark) * .18);line-height:.98;letter-spacing:-.01em;
  color:var(--tfe-olive)}
.tfe-head h2{position:relative;z-index:1;margin:0 0 var(--tfe-s2);
  font-size:var(--tfe-t-h2);font-weight:700;line-height:1.06;letter-spacing:-.02em;max-width:17ch}
/* Deliberately NOT `.tfe-head p`. That outranks .tfe-eyebrow and .tfe-who on
   specificity and silently flattens their margins. */
.tfe-lead{position:relative;z-index:1;margin:0;font-size:var(--tfe-t-lead);
  line-height:1.5;color:var(--tfe-sage);max-width:52ch}
.tfe-who{position:relative;z-index:1;margin:var(--tfe-s3) 0 0;padding-top:var(--tfe-s3);
  border-top:1px solid rgba(181,189,154,.28);
  font-size:var(--tfe-t-small);line-height:1.6;color:var(--tfe-sage);max-width:52ch}
.tfe-who b{font-weight:700;color:var(--tfe-chalk)}

/* ---------- body ---------- */
.tfe-body{padding:var(--tfe-s4)}
.tfe-label{font-family:var(--tfe-mono);font-size:var(--tfe-t-eyebrow);letter-spacing:.14em;
  text-transform:uppercase;color:var(--tfe-olive-grey);margin:0 0 var(--tfe-s3)}

/* Four items. One column, then two. Four divides by both, so a row never
   ends with a single item and an empty column beside it. */
.tfe-grid{display:grid;grid-template-columns:1fr;gap:var(--tfe-s2);margin:0 0 var(--tfe-s4);
  padding:0;list-style:none}
@media (min-width:600px){.tfe-grid{grid-template-columns:1fr 1fr;gap:var(--tfe-s3)}}
.tfe-item{background:var(--tfe-sage-pale);border-radius:var(--tfe-r2);
  padding:var(--tfe-s3);display:flex;gap:var(--tfe-s2);align-items:flex-start}
.tfe-item svg{flex:0 0 auto;width:20px;height:20px;margin-top:2px;color:var(--tfe-olive-grey)}
.tfe-item h3{margin:0 0 .25rem;font-size:var(--tfe-t-body);font-weight:700;line-height:1.3}
.tfe-item p{margin:0;font-size:var(--tfe-t-small);line-height:1.5;color:var(--tfe-olive-grey)}

/* ---------- call to action ---------- */
.tfe-cta{background:var(--tfe-olive);color:var(--tfe-chalk);border-radius:var(--tfe-r2);
  padding:var(--tfe-s3);text-align:center}
.tfe-cta > p{margin:0 0 var(--tfe-s2);font-size:var(--tfe-t-small);line-height:1.5;
  color:var(--tfe-sage);max-width:46ch;margin-inline:auto}
.tfe-mail{display:flex;align-items:center;justify-content:center;gap:.6rem;
  width:100%;min-height:56px;padding:.9rem 1rem;
  background:var(--tfe-clay);color:var(--tfe-olive);
  border-radius:var(--tfe-rp);text-decoration:none;font-weight:700;
  font-family:var(--tfe-mono);font-size:clamp(.75rem,3vw,1rem);letter-spacing:-.01em;
  word-break:break-all;
  transition:background .2s var(--tfe-ease),transform .2s var(--tfe-ease)}
.tfe-mail svg{flex:0 0 auto;width:19px;height:19px}
@media (hover:hover){.tfe-mail:hover{background:var(--tfe-blush);transform:translateY(-1px)}}
.tfe-mail:focus-visible{outline:2px solid var(--tfe-clay);outline-offset:3px}
.tfe-cta small{display:block;margin-top:var(--tfe-s2);font-size:var(--tfe-t-small);
  color:var(--tfe-sage);opacity:.85;line-height:1.5}

/* ---------- foot ---------- */
.tfe-foot{border-top:1px solid rgba(50,54,37,.14);padding:var(--tfe-s3) var(--tfe-s4);
  display:flex;flex-wrap:wrap;gap:.4rem var(--tfe-s3);align-items:baseline;
  justify-content:space-between;background:var(--tfe-chalk)}
.tfe-foot p{margin:0;font-size:var(--tfe-t-small);line-height:1.5;color:var(--tfe-olive-grey)}
.tfe-foot .tfe-note{font-family:var(--tfe-mono);font-size:var(--tfe-t-eyebrow);
  letter-spacing:.1em;text-transform:uppercase;color:var(--tfe-olive-grey);opacity:.75}

/* ---------- two columns once there is room ----------
   Single column stacks the argument above the action, which puts the email
   button below the fold on a laptop. Side by side, the whole advert and the
   thing to click are visible the moment the panel opens. */
@media (min-width:900px){
  .tfe-scroll{display:grid;grid-template-columns:5fr 7fr;align-content:start}
  .tfe-head{grid-column:1;grid-row:1 / span 2;display:flex;flex-direction:column;
    justify-content:center;padding:var(--tfe-s4)}
  .tfe-body{grid-column:2;grid-row:1;padding:var(--tfe-s4) var(--tfe-s4) var(--tfe-s3)}
  .tfe-foot{grid-column:2;grid-row:2;border-left:1px solid rgba(50,54,37,.14);
    padding:var(--tfe-s2) var(--tfe-s4) var(--tfe-s3)}
  /* one column inside the narrower right-hand side. Two would crush the titles. */
  .tfe-grid{grid-template-columns:1fr;gap:var(--tfe-s2)}
  .tfe-item{padding:var(--tfe-s2) var(--tfe-s3)}
}
@media (min-width:1150px){
  .tfe-grid{grid-template-columns:1fr 1fr}
  .tfe-item{flex-direction:column;gap:var(--tfe-s1)}
}

/* Short laptops. 1366x768 and 1280x720 are still everywhere, and on those the
   whole advert has to land inside the panel without a scroll. */
@media (min-width:900px) and (max-height:850px){
  .tfe-head{padding:var(--tfe-s3)}
  /* the mark drops to its 120px floor on short laptops, never below */
  .tfe-mark{--tfe-mark:120px;margin-bottom:var(--tfe-s2)}
  .tfe-head h2{font-size:clamp(1.45rem,2.5vw,2rem)}
  .tfe-lead{font-size:.95rem}
  .tfe-who{font-size:.82rem;margin-top:var(--tfe-s2);padding-top:var(--tfe-s2)}
  .tfe-body{padding:var(--tfe-s3)}
  .tfe-label{margin-bottom:var(--tfe-s2)}
  .tfe-grid{gap:.6rem;margin-bottom:var(--tfe-s2)}
  .tfe-item{padding:.65rem .9rem}
  .tfe-item h3{font-size:.92rem}
  .tfe-item p{font-size:.8rem}
  .tfe-cta{padding:var(--tfe-s2)}
  .tfe-cta > p{font-size:.82rem}
  .tfe-cta small{font-size:.78rem;margin-top:.5rem}
  .tfe-foot{padding:.55rem var(--tfe-s3) .9rem}
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){
  .tfe-veil,.tfe-panel,.tfe-close,.tfe-mail{transition:none}
  .tfe-panel{transform:none}
}

/* ---------- when the modal is open ---------- */
html.tfe-locked,body.tfe-locked{overflow:hidden}

/* HOST SHIELD for the modal: our global "h1, h2, h3, h4" rules set the serif
   face, the bark colour and text-wrap on every heading, which reaches inside
   .tfe-root (the modal itself never styles bare elements). Restore inheritance
   for the properties the modal relies on. */
.tfe-root h2, .tfe-root h3 { font-family: inherit; color: inherit; text-wrap: initial; }
.tfe-root h3 { letter-spacing: normal; }

/* =========================================================
   COOKIE CONSENT BANNER
   Fixed card, bottom-left on wide screens, full-width bar on
   phones. Sits above the back-to-top button.
   ========================================================= */
.cookie-banner {
  position: fixed;
  left: 20px;
  right: auto;
  bottom: 20px;
  z-index: 1400;
  max-width: 430px;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner-card {
  background: #FBF8F1;
  border: 1px solid rgba(31, 24, 18, 0.14);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(31, 24, 18, 0.22);
  padding: 18px 20px;
}
.cookie-banner-text {
  margin: 0 0 14px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--bark, #1F1812);
}
.cookie-banner-text a { color: var(--meadow, #1F4D34); font-weight: 600; }
.cookie-banner-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-btn {
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 8px;
  padding: 10px 16px;
  min-height: 42px;
  cursor: pointer;
  border: 1.5px solid transparent;
}
.cookie-btn--accept {
  background: var(--meadow, #1F4D34);
  color: #F4ECE0;
  border-color: var(--meadow, #1F4D34);
}
.cookie-btn--accept:hover { background: #2A6244; border-color: #2A6244; }
.cookie-btn--decline {
  background: transparent;
  color: var(--bark, #1F1812);
  border-color: rgba(31, 24, 18, 0.3);
}
.cookie-btn--decline:hover { border-color: var(--bark, #1F1812); }
@media (max-width: 560px) {
  .cookie-banner { left: 10px; right: 10px; bottom: 10px; max-width: none; }
  .cookie-btn { flex: 1; }
}

/* Footer "Cookie preferences" - styled like the neighbouring policy links */
.ftr-cookie-prefs {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--ftr-on-muted);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: transparent;
}
.ftr-cookie-prefs:hover { color: var(--wheat); text-decoration-color: currentColor; }


/* Five items in the mobile legal grid (4 links + cookie button): let an odd
   final item span the full width instead of sitting as a lonely half box. */
@media (max-width: 860px) {
  .ftr-policies > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* =========================================================
   SGS NETBAR OVERRIDES (deliberate deviations from the
   locked group spec, per client request)
   ========================================================= */
/* Desktop: a single pill. "Show All" is a plain text link on the left;
   "Explore the Group" keeps the pill (at the smaller size) on the right. */
@media (min-width: 721px) {
  .hifi-netbar-showall {
    padding: 4px 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(244, 236, 224, 0.6);
  }
  .hifi-netbar-showall:hover { background: transparent; text-decoration-color: var(--oak-cream); }
  .hifi-netbar-showall svg { display: none; }
  .hifi-netbar-trigger {
    padding: 4px 10px;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid rgba(244, 236, 224, 0.28);
    border-radius: 999px;
  }
  .hifi-netbar-trigger svg { width: 12px; height: 12px; }
  /* Same height so the text link and pill share a baseline */
  .hifi-netbar-showall,
  .hifi-netbar-trigger { height: 26px; }
}
/* Mobile: trim the trigger to just "Explore". */
@media (max-width: 720px) {
  .hifi-netbar-trigger-long { display: none; }
}

/* =========================================================
   HERO PRODUCT CHIPS - small product photos dotted around the
   hero card, each with a yard-tag label. They float on slower,
   offset phases than the card itself for a layered drift.
   ========================================================= */
.hero-chip {
  position: absolute;
  z-index: 3;
  display: block;
  width: 124px;
  aspect-ratio: 1;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.28));
  animation: hero-chip-float 8s ease-in-out infinite;
  transition: transform 0.25s ease;
}
.hero-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 16px;
  border: 3px solid var(--limestone);
  background: var(--linen);
}
.hero-chip-tag {
  position: absolute;
  left: 10px;
  bottom: -10px;
  background: var(--bark);
  color: var(--oak-cream);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 4px;
  white-space: nowrap;
}
.hero-chip--a { top: -22px; right: -26px; --chip-rot: 2.2deg; }
.hero-chip--b { left: -34px; top: 54%; width: 106px; --chip-rot: -2deg; animation-duration: 9.5s; animation-delay: 1.2s; }
.hero-chip--c { right: -18px; bottom: -28px; width: 112px; --chip-rot: 1.4deg; animation-duration: 8.6s; animation-delay: 2.1s; }
@keyframes hero-chip-float {
  0%, 100% { transform: translateY(0) rotate(var(--chip-rot, 0deg)); }
  50%      { transform: translateY(-8px) rotate(var(--chip-rot, 0deg)); }
}
@media (hover: hover) {
  .hero-chip:hover { transform: scale(1.06) rotate(var(--chip-rot, 0deg)); animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-chip { animation: none; }
}
/* Stacked hero (<=900px): smaller chips, pulled inside the card's bounds so
   nothing can crowd the headline above or overflow the viewport. */
@media (max-width: 900px) {
  .hero-chip { width: 96px; }
  .hero-chip--a { top: -14px; right: 8px; }
  .hero-chip--b { left: -10px; top: auto; bottom: 30%; width: 84px; }
  .hero-chip--c { right: 14px; bottom: -16px; width: 88px; }
}
@media (max-width: 480px) {
  .hero-chip { width: 82px; }
  .hero-chip--b { display: none; }
  .hero-chip-tag { font-size: 0.52rem; padding: 3px 7px; }
}