/* ==========================================================================
   Southdowns Firewood - design system (WordPress theme)
   The site's only stylesheet, loaded by inc/enqueue.php and versioned by its
   modified time. Templates carry no <style> blocks and no inline style
   attributes; spacing tweaks use the .u-* utilities.

   One place per concern, in this order:
     1 Tokens        palette, on-forest text tones, type scale, spacing, shape
     2 Base          reset, body, links, focus
     3 Typography    every text size and face on the site - components inherit
     4 Layout        wrap (one width, site-wide), sections, section heads
     5 Buttons       .btn and its variants (ghost, onphoto, wa, lg, block)
     6 Panels        the shared white-panel rule behind cards, forms, quotes
     7 Header        sticky header, nav, basket + Facebook icons, burger, mobile menu
     8 Hero          homepage hero - photo fading into black behind the copy
     9 Fact strip    green band under the hero
    10 Page head     inner-page banner + breadcrumbs
    11 Trust         icon + copy items
    12 Cards         card, badge, price, tick list, grids
    13 Split         image + copy, stat chip
    14 Steps         numbered steps
    15 Delivery      postcode checker above a full-width map, town chips
    16 Testimonials
    17 Posts         article cards, meta, read-more
    18 Newsletter
    19 Forms         form card, fields, notes, contact tiles
   19b Shop          order-by-email dialog, basket notice, WooCommerce basket + checkout
    20 FAQ
    21 Prose         article body, callout
    22 Table
    23 Forest bands  every colour override for .section--forest, together
    24 Footer
    25 Call bar      fixed mobile call/WhatsApp bar
    26 WhatsApp      floating chat bubble + panel with quick answers (desktop/tablet only)
    27 Motion        reveal-on-scroll, reduced-motion
    28 Map SVG       the hand-drawn delivery map's own palette
    29 Utilities     alignment + spacing helpers
    30 WordPress     skip link, core classes, menus, pagination, search
    31 CF7           what Contact Form 7 adds to the theme's form markup

   Palette anchored to the client's logo green (#6DAF44), taken a shade darker
   to match the reference design.
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */
:root {
  /* Greens */
  --brand:        #5E9A3A;   /* accent - marks, highlights, accents on dark */
  --brand-deep:   #3D6B2E;   /* links, accents (6.3:1 on white) */
  --brand-text:   #2A5A22;   /* green copy on tinted panels */
  --brand-soft:   #E9F0E3;   /* tinted panels */
  --forest:       #182618;   /* dark bands (fact strip, footer) and every solid button */
  --forest-mid:   #24391F;
  --forest-line:  #30482F;
  --scrim:        24, 38, 24; /* rgb channels for photo scrims and shadows */
  --white-rgb:    255, 255, 255; /* rgb channels for translucent white on photos and dark bands */
  --brand-rgb:    94, 154, 58;   /* rgb channels for brand green tints */
  --black:        #000000;
  --black-rgb:    0, 0, 0;       /* rgb channels for the hero scrims */
  --shade-rgb:    13, 40, 24;    /* rgb channels for the chat widget shadows */

  /* Text on forest-green bands - three tones, nothing else */
  --on-forest:       #FFFFFF; /* headings, strong */
  --on-forest-soft:  #DCE6DC; /* body copy, links */
  --on-forest-mute:  #A9BCAB; /* secondary copy, meta, separators */

  /* Neutrals */
  --cream:        #F8F8F4;   /* page ground */
  --sand:         #EEF1EA;   /* alternate bands */
  --sand-line:    #DCE2D6;   /* hairlines */
  --ink:          #1A1E1A;
  --ink-soft:     #4C534A;   /* supporting copy */
  --ink-mute:     #8B948A;   /* placeholders */
  --bark:         #6B5744;
  --white:        #FFFFFF;

  /* Accents */
  --ember:        #C2571C;   /* kindling badge, map pin */
  --ember-deep:   #A4460F;
  --ember-text:   #8A3D10;
  --ember-soft:   #FBEEE4;
  --star:         #E0A020;
  --wa:           #25D366;   /* WhatsApp */
  --wa-ink:       #06331A;
  --wa-deep:      #1FB855;   /* chat CTA hover */
  --wa-teal:      #075E54;   /* chat panel header */
  --wa-panel:     #ECE5DD;   /* chat panel ground */
  --wa-out:       #D9FDD3;   /* the visitor's own chat bubbles */
  --wa-badge:     #E5342B;   /* unread count */
  --on-forest-warn: #F3B48F; /* form validation message on dark bands */
  --map-sea:      #DDE8EC;   /* the drawn delivery map */
  --map-land:     #EEF2E6;
  --map-park:     #DFEBD2;
  --map-road:     #E3D9C5;
  --map-dot:      #6B7A68;
  --map-coast:    #C3D3D8;

  /* Faces */
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Type scale - the only sizes copy uses. Components inherit these and never
     set their own; section 3 is the single place a size is assigned. */
  --fs-body:     1rem;      /* every paragraph, list item, table cell, footer */
  --fs-lede:     1.15rem;   /* subtitles under headings, hero sub, pull quotes, FAQ questions */
  --fs-title-sm: 1.1rem;    /* small sans titles: trust items, steps, callouts, contact values */
  --fs-ui:       .95rem;    /* buttons, nav links, call bar */
  --fs-small:    .875rem;   /* captions, hints, notes, chips, meta lines, top bar */
  --fs-label:    .78rem;    /* uppercase labels: badges, table heads, footer heads */
  /* Headings and one-off component sizes, so every size on the site is set here */
  --fs-h1:          clamp(2.35rem, 1.5rem + 3.6vw, 4.2rem);
  --fs-h2:          clamp(1.9rem, 1.35rem + 2.2vw, 3rem);
  --fs-h3:          1.4rem;    /* also the shop's section headings */
  --fs-h4:          1.15rem;
  --fs-h-mid:       clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); /* price rows, the order dialog */
  --fs-stat:        2.4rem;    /* prices, step numbers */
  --fs-stat-sm:     2.1rem;    /* stat chips */
  --fs-stat-xs:     1.7rem;    /* stat chips on small handsets */
  --fs-brand:       1.5rem;    /* site name when there is no logo */
  --fs-thanks:      1.6rem;    /* order received heading */
  --fs-total:       1.3rem;    /* order total */
  --fs-nav-drawer:  1.35rem;   /* links in the mobile menu */
  --fs-icon-btn:    1.2rem;    /* round icon buttons in the shop */
  --fs-badge:       .72rem;    /* kindling badge, unread count */
  --fs-chat-ui:     .94rem;    /* chat name and its call to action */
  --fs-chat:        .88rem;    /* chat bubbles */
  --fs-chat-chip:   .8rem;     /* chat quick questions */
  --fs-chat-status: .74rem;    /* chat status line */
  --fs-chat-time:   .68rem;    /* chat timestamps */
  --fs-rel-sm:      .92em;     /* a notch below the surrounding text: ampersands, tight tables */
  --track-label: .12em;
  --lh-body:     1.65;
  --lh-tight:    1.1;

  /* Space + shape - squared-off corners per the reference design */
  --wrap: 1680px;
  --gut: clamp(1.25rem, 4vw, 2.5rem);
  --sp-1: 1.25rem;
  --sp-2: 1.5rem;
  --sp-3: 1.75rem;
  --sp-4: 2rem;
  --sp-5: 2.5rem;
  --sp-section: clamp(2rem, 4vw, 3rem);
  --r-sm: 4px;
  --r:    8px;
  --r-lg: 10px;
  --r-btn: 6px;

  --shadow-sm: 0 1px 2px rgba(var(--scrim), .06), 0 2px 8px rgba(var(--scrim), .05);
  --shadow:    0 2px 6px rgba(var(--scrim), .06), 0 12px 32px rgba(var(--scrim), .09);
  --shadow-lg: 0 4px 12px rgba(var(--scrim), .08), 0 28px 60px rgba(var(--scrim), .16);

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

/* --- 2. Base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
/* clip, not hidden: hidden would make html a scroll container and break the
   sticky header. Guards against any stray wide element (e.g. the map svg). */
/* The header is sticky and 98-116px tall, so an in-page anchor would otherwise
   land underneath it. This keeps the target clear of it at every width. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; scroll-padding-top: 8.25rem; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
::placeholder { color: var(--ink-mute); }
a { color: var(--brand-deep); text-underline-offset: .18em; }
a:hover { color: var(--forest); }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* --- 3. Typography ------------------------------------------------------ */
/* Headings: one display face, one scale, site-wide (including the hero h1) */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  line-height: var(--lh-tight);
  letter-spacing: -.015em;
  color: var(--forest);
  margin: 0 0 .5em;
  text-wrap: balance;
}
/* Fraunces draws a looped, calligraphic ampersand. Headings borrow the body
   face for it so it reads as an ordinary "&". */
.amp { font-family: var(--body); font-weight: 600; font-size: var(--fs-rel-sm); }

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
p  { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

/* Subtitles: lede under headings, hero sub, article pull quotes, FAQ questions */
.lede, .hero__sub, .prose blockquote, .faq summary { font-size: var(--fs-lede); line-height: 1.6; }
.prose blockquote, .faq summary { font-family: var(--display); font-weight: 600; }
.lede { color: var(--ink-soft); }

/* Small sans titles */
.trust h3, .step h3, .callout h3, .contact-tile b {
  font-family: var(--body);
  font-size: var(--fs-title-sm);
  font-weight: 650;
  letter-spacing: 0;
  color: var(--forest);
  margin-bottom: .3rem;
}

/* Uppercase labels - one size, one tracking */
.badge, .post-meta, .contact-tile h3, table.data thead th {
  font-family: var(--body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

/* Supporting copy - the softer ink for descriptions and secondary lines */
.section-head p, .trust p, .card__body p, .step p, .pc p, .callout p, .ticks li, .faq__body,
.quote figcaption span, .contact-tile span, .contact-tile h3, .post-meta, .field__hint, .check,
.prose figcaption, .stat-chip span, .price small, .towns li, .crumbs { color: var(--ink-soft); }

/* Secondary size - captions, hints, notes, chips, meta */
.field__hint, .check, .prose figcaption, .quote figcaption, .contact-tile span, .stat-chip span,
.towns li, .crumbs, .readmore, .signup__note, .footer__bar, .price small,
.factbar__item small, .form-note, .field label { font-size: var(--fs-small); }

/* Display numbers */
.price, .step::before, .stat-chip b, table.data .num { font-family: var(--display); font-weight: 600; line-height: 1; }
.price, .step::before { font-size: var(--fs-stat); }
.stat-chip b { font-size: var(--fs-stat-sm); }
table.data .num { font-size: var(--fs-lede); }

/* --- 4. Layout ---------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.section { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.section--sand  { background: var(--sand); }
.section--white { background: var(--white); }
/* .section--forest: see section 23 */

.section-head { margin-bottom: clamp(2rem, 1rem + 3vw, 3.25rem); }
/* Heading on the left, an action on the right (advice teasers) */
.section-head--row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: flex-end;
  justify-content: space-between;
}

/* --- 5. Buttons --------------------------------------------------------- */
/* Squared-off solid forest green - the fact-strip colour - with white text,
   plus outline variants. Flat. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .8rem 1.5rem;
  border: 1.5px solid var(--forest);
  border-radius: var(--r-btn);
  background: var(--forest);
  color: var(--white);
  font-family: var(--body);
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover { background: var(--forest-mid); border-color: var(--forest-mid); color: var(--white); }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }

/* On dark ground - the hero, forest bands, the newsletter panel, the mobile menu -
   a forest button would vanish, so the solid button inverts: white fill, forest text. */
.hero .btn:not(.btn--onphoto):not(.btn--ghost),
.section--forest .btn:not(.btn--onphoto):not(.btn--ghost),
.signup .btn,
.nav .nav__cta { background: var(--white); border-color: var(--white); color: var(--forest); }
.hero .btn:not(.btn--onphoto):not(.btn--ghost):hover,
.section--forest .btn:not(.btn--onphoto):not(.btn--ghost):hover,
.signup .btn:hover,
.nav .nav__cta:hover { background: var(--brand); border-color: var(--brand); color: var(--forest); }

/* Outline on light ground */
.btn--ghost { background: transparent; color: var(--forest); border-color: var(--forest); }
.btn--ghost:hover { background: var(--forest); color: var(--white); border-color: var(--forest); }

/* Outline on photography / dark ground */
.btn--onphoto { background: transparent; color: var(--white); border-color: rgba(var(--white-rgb), .7); }
.btn--onphoto:hover { background: var(--white); color: var(--forest); border-color: var(--white); }

/* WhatsApp */
.btn--wa { background: var(--wa); border-color: var(--wa); color: var(--wa-ink); }
.btn--wa:hover { background: var(--wa); border-color: var(--wa); color: var(--wa-ink); filter: brightness(1.08); }

.btn--lg { padding: .95rem 1.85rem; font-size: var(--fs-body); }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }
.u-center .btn-row { justify-content: center; }
/* Buttons that wrap onto their own line look untidy at mixed widths */
@media (max-width: 560px) { .btn-row > .btn { width: 100%; } }

/* --- 6. Panels ---------------------------------------------------------- */
/* Every white panel on the site shares this surface; components add layout only */
.card, .map-card, .pc, .form-card, .quote, .callout, .contact-tile {
  background: var(--white);
  border: 1px solid var(--sand-line);
  border-radius: var(--r-lg);
}
.map-card, .pc, .form-card { box-shadow: var(--shadow-sm); }

/* --- 7. Header ---------------------------------------------------------- */
/* Solid white, no backdrop-filter: a filter would make the header the containing
   block for the fixed mobile menu and confine it to the header's own box. */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--sand-line);
  transition: box-shadow .25s var(--ease);
}
.header.is-stuck { box-shadow: var(--shadow-sm); }
.header .wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: 1rem;
}
.brand { display: flex; align-items: center; flex: none; margin-right: auto; }
.brand img { width: clamp(148px, 16vw, 190px); }
.header .btn { flex: none; }

/* Facebook icon at the end of the header, beside the burger at every width */
/* The glyph is already a filled circle, so it needs no box round it. The
   wrapper keeps a 44px tap target; only the mark itself is visible. */
.header__social {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px; height: 44px;
  color: var(--forest);
  transition: color .2s var(--ease), opacity .2s var(--ease);
}
.header__social:hover { color: var(--brand-deep); }
.header__social svg { width: 32px; height: 32px; }

/* Basket icon beside the Facebook icon, with an item count when it isn't empty */
.header__cart {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px; height: 44px;
  color: var(--forest);
  transition: color .2s var(--ease);
}
.header__cart:hover { color: var(--brand-deep); }
.header__cart svg { width: 28px; height: 28px; }
.header__count {
  position: absolute;
  top: 1px; right: 0;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--ember);
  color: var(--white);
  font-size: var(--fs-badge);
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.header__count[hidden] { display: none; }

/* Plain text links; the current page is green, nothing underlined */
.nav { display: flex; align-items: center; gap: .25rem; }
.nav a {
  padding: .5rem .6rem;
  color: var(--forest);
  font-size: var(--fs-ui);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s var(--ease);
}
.nav a:hover { color: var(--brand-deep); }
.nav a[aria-current="page"] { color: var(--brand-deep); font-weight: 600; }

/* Phone number: bold ink with a solid icon, no outline */
.nav .nav__phone {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-left: .75rem;
  padding: .5rem .25rem;
  color: var(--ink);
  font-weight: 700;
}
.nav .nav__phone svg { width: 18px; height: 18px; flex: none; }
.nav .nav__phone:hover { color: var(--brand-deep); }
/* The landline only fits in the mobile menu; the footer and contact page carry it on wide screens */
.nav .nav__phone--landline { display: none; }
/* The quote button sits in the header on wide screens and inside the menu on small ones */
.nav .nav__cta { display: none; }

.burger {
  display: none;
  width: 46px; height: 46px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--sand-line);
  border-radius: var(--r-sm);
  cursor: pointer;
  flex: none;
}
.burger span {
  position: relative;
  display: block;
  width: 20px; height: 2px;
  background: var(--forest);
  border-radius: 2px;
  transition: background .2s var(--ease);
}
.burger span::before, .burger span::after {
  content: "";
  position: absolute; left: 0;
  width: 20px; height: 2px;
  background: var(--forest);
  border-radius: 2px;
  transition: transform .25s var(--ease);
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* Measured: the full header (logo, six links, phone, quote button, basket,
   Facebook) needs about 1172px between the gutters - the basket icon was paid
   for with tighter link padding and header gap - which a 1252px layout is the first to give.
   Allow for a 17px desktop scrollbar and the menu has to take over at 1270. */
@media (max-width: 1270px) {
  .header__cta { display: none; }
  /* Burger stays above the open menu so it can close it, and turns white on it */
  .burger { display: inline-flex; position: relative; z-index: 2; }
  .burger[aria-expanded="true"] { border-color: rgba(var(--white-rgb), .35); }
  .burger[aria-expanded="true"] span::before,
  .burger[aria-expanded="true"] span::after { background: var(--white); }

  /* Full-viewport menu on forest green */
  .nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100dvh;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    padding: 6.5rem var(--gut) 3rem;
    background: var(--forest);
    opacity: 0;
    transform: translateY(-10px);
    /* Hidden rather than merely transparent, so the closed menu's links stay
       out of the tab order and out of the accessibility tree. */
    visibility: hidden;
    transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
    overflow-y: auto;
  }
  .nav.is-open { opacity: 1; transform: none; visibility: visible; }
  .nav a {
    padding: 1rem 0;
    font-size: var(--fs-nav-drawer);
    font-weight: 600;
    color: var(--on-forest);
    border-bottom: 1px solid rgba(var(--white-rgb), .1);
    white-space: normal;
  }
  .nav a:hover, .nav a[aria-current="page"] { color: var(--brand); }
  .nav .nav__phone { margin: var(--sp-3) 0 0; padding: .5rem 0; border-bottom: 0; color: var(--on-forest); font-size: var(--fs-lede); }
  .nav .nav__phone svg { width: 22px; height: 22px; }
  .nav .nav__phone--landline { display: inline-flex; margin-top: 0; }
  /* Undo the menu-link styles above so the CTA renders as a normal large button */
  .nav .nav__cta {
    display: inline-flex;
    align-self: flex-start;
    margin-top: var(--sp-1);
    padding: .95rem 1.85rem;
    font-size: var(--fs-body);
    border: 1.5px solid var(--white);
  }
  .nav .nav__cta:hover { border-color: var(--brand); }

  /* The full-screen panel needs no scrim; main.js still creates the element */
  .nav-scrim { display: none; }
  body.nav-locked { overflow: hidden; }
}

/* --- 8. Hero ------------------------------------------------------------ */
/* Full-bleed woodland photo fading into solid black behind the copy - black
   along the left on wide screens, along the bottom on handsets - with the
   headline's closing line in brand green and solid + outline CTAs. */
.hero {
  position: relative;
  display: grid;
  isolation: isolate;
  overflow: hidden;
  background: var(--black);
  color: var(--on-forest);
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 65% 55%;
}
/* Fade: solid black under the copy column, clearing to the photo on the right */
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to right, var(--black) 0%, var(--black) 32%, rgba(var(--black-rgb), .88) 44%, rgba(var(--black-rgb), .45) 60%, rgba(var(--black-rgb), 0) 78%);
}
.hero__wrap {
  display: flex;
  flex-direction: column;
  min-height: clamp(560px, 84vh, 820px);
}
/* Copy fills the left column; the right column is left clear for the photo */
.hero__grid {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: center;
  padding-block: clamp(3rem, 5vw, 5rem);
}
.hero__title { margin: 0 0 1.3rem; color: var(--on-forest); text-transform: uppercase; letter-spacing: 0; }
.hero__title span { color: var(--brand); }
.hero__sub { margin: 0 0 2.1rem; color: var(--on-forest-soft); }

@media (max-width: 900px) {
  /* Photo across the top, fading down into black under the copy; the top
     padding guarantees a band of photo above the copy even on short phones */
  .hero__grid { grid-template-columns: 1fr; align-items: end; padding-top: clamp(11rem, 34vh, 18rem); }
  .hero__media img { object-position: center 30%; }
  .hero::after {
    background: linear-gradient(to top, var(--black) 0%, var(--black) 38%, rgba(var(--black-rgb), .86) 60%, rgba(var(--black-rgb), .45) 82%, rgba(var(--black-rgb), .15) 100%);
  }
}
/* Handsets: the copy block is tall, so give the photo room above it */
@media (max-width: 700px) {
  .hero__wrap { min-height: clamp(560px, 92vh, 760px); }
}

/* --- 9. Fact strip ------------------------------------------------------ */
/* Full-width forest band directly under the hero: icon + two lines per item */
.factbar { background: var(--forest); color: var(--on-forest); }
.factbar__grid {
  list-style: none;
  margin-block: 0;
  padding-block: var(--sp-1);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem 2rem;
}
.factbar__item {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .4rem 0;
  color: inherit;
  text-decoration: none;
}
.factbar__ico { flex: none; width: 34px; height: 34px; color: var(--brand); }
.factbar__item b { display: block; font-weight: 600; line-height: 1.3; color: var(--on-forest); transition: color .18s var(--ease); }
.factbar__item small { display: block; color: var(--on-forest-mute); }
.factbar__item:hover b { color: var(--brand); }
@media (max-width: 900px) {
  .factbar__grid { grid-template-columns: repeat(2, 1fr); gap: .5rem 1.5rem; }
}
@media (max-width: 600px) {
  .factbar__grid { padding-block: var(--sp-2); }
  .factbar__item { flex-direction: column; text-align: center; gap: .6rem; padding: .6rem .25rem; }
}

/* --- 10. Page head (inner pages) ---------------------------------------- */
.pagehead {
  position: relative;
  background: var(--forest);
  color: var(--on-forest);
  padding-block: clamp(3rem, 2rem + 5vw, 5.5rem);
  isolation: isolate;
  overflow: hidden;
}
.pagehead__media { position: absolute; inset: 0; z-index: -2; }
.pagehead__media img { width: 100%; height: 100%; object-fit: cover; }
/* Page-head photos carry a lot of overlaid text, and the yard shots include
   large high-contrast signwriting, so these scrims are deliberately heavy. */
.pagehead::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(var(--scrim), .95) 12%, rgba(var(--scrim), .87) 48%, rgba(var(--scrim), .68) 100%),
    linear-gradient(to bottom, rgba(var(--scrim), .45), rgba(var(--scrim), .30));
}
@media (max-width: 780px) {
  .pagehead::after { background: linear-gradient(to bottom, rgba(var(--scrim), .90), rgba(var(--scrim), .82)); }
}
.pagehead h1 { color: var(--on-forest); margin-bottom: .3em; }
.pagehead .lede { color: var(--on-forest-soft); }
/* Article meta line on the dark banner */
.pagehead .post-meta { color: var(--on-forest-mute); margin: var(--sp-1) 0 0; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 0 0 var(--sp-2);
  padding: 0;
  list-style: none;
  color: var(--on-forest-mute);
}
.crumbs a { color: var(--on-forest-soft); text-decoration: none; }
.crumbs a:hover { color: var(--brand); text-decoration: underline; }
.crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--on-forest-mute); }

/* --- 11. Trust ---------------------------------------------------------- */
.trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.trust__item { display: flex; gap: .95rem; align-items: flex-start; }
/* Plain line icons in brand green - shared with the contact tiles */
.trust__ico, .contact-tile__ico {
  flex: none;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  color: var(--brand-deep);
}
.trust__ico svg, .contact-tile__ico svg { width: 34px; height: 34px; }
.trust p { margin: 0; }
/* Centred columns with the icon above the copy (homepage "why choose us") */
.trust--center { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); text-align: center; }
.trust--center .trust__item { flex-direction: column; align-items: center; gap: .75rem; }

/* --- 12. Cards ---------------------------------------------------------- */
.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
/* min(-, 100%) so a track minimum can never exceed a narrow container */
/* Three across at most, so article cards never shrink into narrow columns */
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .grid--3 { grid-template-columns: minmax(0, 1fr); } }

.card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--brand); }
.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card--link:hover .card__media img { transform: scale(1.05); }
.card__body { padding: 1.6rem; display: flex; flex-direction: column; flex: 1; }
.card__body h3 { margin-bottom: .4rem; }
.card__foot { margin-top: auto; padding-top: 1.35rem; }
/* Product buttons share the row, and fill it when they wrap onto two lines */
.card__foot .btn-row > .btn { flex: 1 1 auto; }

/* Product cards: four across on a wide screen. Each card spans six row tracks
   shared with its neighbours (subgrid), so the name, price, description, tick
   list and buttons start at the same height in every card on the row, however
   long each description is. Every part has a fixed track, so a card with no
   photo or no tick list still lines up. */
.grid--products { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
/* Four products go four, two or one across, never three plus a stray card */
.grid--products-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1260px) { .grid--products-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .grid--products-4 { grid-template-columns: minmax(0, 1fr); } }
/* Homepage products on a phone: one row to swipe through, with the next card
   peeking in at the edge so it reads as scrollable. The row runs to the screen
   edges; each card snaps to the left gutter. Outside a grid the cards lose
   their shared rows, so each card's own rows put the buttons at the bottom. */
@media (max-width: 640px) {
  .grid--carousel {
    display: flex;
    gap: 1rem;
    margin-inline: calc(-1 * var(--gut));
    padding: .25rem var(--gut) 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gut);
    scrollbar-width: none;
  }
  .grid--carousel::-webkit-scrollbar { display: none; }
  .grid--carousel > .card { flex: 0 0 84%; scroll-snap-align: start; }
  .grid--carousel > .card--product { grid-template-rows: repeat(4, auto) 1fr auto; }
  .grid--carousel .card--product .ticks { align-self: start; }
}
.card__summary { margin-bottom: 1.15em; }
@supports (grid-template-rows: subgrid) {
  .card--product { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
  .card--product .card__body { display: contents; }
  .card--product .card__body > * { margin-inline: 1.5rem; }
  .card--product .card__media { grid-row: 1; }
  .card--product h3 { grid-row: 2; margin-top: 1.5rem; }
  .card--product .price { grid-row: 3; }
  .card--product .card__summary { grid-row: 4; }
  .card--product .ticks { grid-row: 5; }
  .card--product .card__foot { grid-row: 6; align-self: end; margin-bottom: 1.5rem; }
}

.badge {
  position: absolute;
  top: 1rem; left: 1rem;
  padding: .35rem .8rem;
  background: var(--ember);
  color: var(--white);
  border-radius: var(--r-btn);
}
.badge--green { background: var(--brand-deep); }

/* Portrait photos whose subject sits low in the frame (the bulk bag on the ground):
   keep the bottom of the shot when it is cropped to a landscape box */
.media--low img { object-position: center 85%; }

.price {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  color: var(--forest);
  margin-bottom: .35rem;
}
.price small { font-family: var(--body); font-weight: 500; }

/* Centred variant - title, copy and ticks all centred in the card */
.card--center .card__body { text-align: center; align-items: center; }
/* Every line centred, with the tick riding on the first line - a wrapped item
   used to fall back to the left edge and look misaligned next to short ones. */
.card--center .ticks { justify-items: center; }
.card--center .ticks li { display: block; padding-left: 0; text-align: center; }
.card--center .ticks li::before { position: static; display: inline-block; vertical-align: -.15em; margin-right: .5rem; }

/* Bulleted spec list with ticks */
.ticks { list-style: none; margin: 0 0 1.35rem; padding: 0; display: grid; gap: .6rem; }
.ticks li { position: relative; padding-left: 1.85rem; }
.ticks li::before {
  content: "";
  position: absolute; left: 0; top: .3em;
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%;
  background: var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D6B2E' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / .72rem no-repeat;
}

/* --- 13. Split (image + copy) ------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}
.split--flip .split__media { order: 2; }
.split__media { position: relative; }
.split__media img {
  width: 100%;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.split__media--tall img { aspect-ratio: 3 / 4; }
/* Let the photo grow to match a tall copy column instead of floating in the middle of it */
.split--fill { align-items: stretch; }
.split--fill .split__media { display: flex; }
.split--fill .split__media img { aspect-ratio: auto; height: 100%; min-height: 380px; }
@media (max-width: 780px) {
  .split--flip .split__media { order: 0; }
  .split--fill .split__media img { min-height: 260px; aspect-ratio: 16 / 10; }
}

/* Price rows on the prices page: photo left, detail right, one per row */
.price-row + .price-row { margin-top: var(--sp-section); }
.price-row h3 { font-size: var(--fs-h-mid); margin-bottom: .35rem; }

/* Small stat card overlapping a split image */
.stat-chip {
  position: absolute;
  right: -1rem; bottom: -1.25rem;
  background: var(--white);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  padding: 1.1rem 1.4rem;
  text-align: center;
  max-width: 190px;
}
.stat-chip b { display: block; color: var(--brand-deep); }
@media (max-width: 560px) {
  .stat-chip { right: 0; bottom: -1rem; padding: .85rem 1rem; }
  .stat-chip b { font-size: var(--fs-stat-xs); }
}

/* --- 14. Numbered steps ------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.step { position: relative; padding-top: 3.6rem; }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  color: var(--brand);
}
.step p { margin: 0; }
/* Centred variant - the number sits over the middle of its column */
.steps--center { text-align: center; }
.steps--center .step::before { left: 50%; transform: translateX(-50%); }

/* --- 15. Delivery area -------------------------------------------------- */
/* Postcode checker and town chips centred above a full-width map */
.delivery {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* minmax(0,-) so the 640-unit map svg cannot blow the column out */
  gap: var(--sp-4);
}
/* Each child is centred on its own, not via justify-items: centred grid items are
   sized to their content and the map then overflows the column on a handset. */
.delivery .pc { width: min(100%, 620px); margin-inline: auto; text-align: center; }
.delivery .pc__row { justify-content: center; }
.delivery .towns { margin-top: 0; justify-content: center; }
.delivery__map { width: 100%; max-width: 1000px; margin-inline: auto; }

/* Two-column grid, still used by the contact page's form + details */
.area-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); /* minmax(0,-) so a wide svg cannot blow out the column */
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
@media (max-width: 900px) { .area-grid { grid-template-columns: minmax(0, 1fr); } }

.map-card { padding: clamp(1rem, 2vw, 1.5rem); }
.map-card svg { width: 100%; height: auto; border-radius: var(--r); }

.pc { padding: clamp(1.5rem, 3vw, 2.25rem); }
.pc h3 { margin-bottom: .4rem; }
.pc__row { display: flex; gap: .6rem; margin-top: var(--sp-1); }
.pc__row input {
  flex: 1;
  min-width: 0;
  max-width: 340px;
  padding: .85rem 1.1rem;
  border: 1.5px solid var(--sand-line);
  border-radius: var(--r-btn);
  background: var(--white);
  text-transform: uppercase;
  transition: border-color .2s var(--ease);
}
.pc__row input::placeholder { text-transform: none; }
.pc__row input:focus { outline: none; border-color: var(--brand); }
.pc__out {
  margin-top: 1.1rem;
  padding: .95rem 1.15rem;
  border-radius: var(--r);
  text-align: left;
  display: none;
}
.pc__out.is-yes   { display: block; background: var(--brand-soft); color: var(--brand-text); border-left: 4px solid var(--brand-deep); }
.pc__out.is-maybe { display: block; background: var(--ember-soft); color: var(--ember-text); border-left: 4px solid var(--ember); }
.pc__out.is-no    { display: block; background: var(--sand); color: var(--ink-soft); border-left: 4px solid var(--bark); }
.pc__out a { font-weight: 600; }

.towns { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.towns li {
  padding: .4rem .85rem;
  background: var(--white);
  border: 1px solid var(--sand-line);
  border-radius: var(--r-btn);
}

/* --- 16. Testimonials --------------------------------------------------- */
/* Two-up rather than auto-fit: with four quotes, auto-fit drops to three across
   and strands the fourth, and four across leaves each column too narrow to read. */
.quotes { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .quotes { grid-template-columns: 1fr; } }
.quote { padding: 1.85rem; display: flex; flex-direction: column; }
.quote__stars { display: flex; gap: .18rem; color: var(--star); margin-bottom: 1rem; }
.quote__stars svg { width: 17px; height: 17px; }
.quote blockquote { margin: 0 0 1.35rem; }
.quote blockquote::before { content: "\201C"; }
.quote blockquote::after  { content: "\201D"; }
.quote figcaption { margin-top: auto; }
.quote cite { display: block; font-style: normal; font-weight: 650; color: var(--forest); }

/* --- 17. Posts ---------------------------------------------------------- */
.post-card { text-decoration: none; color: inherit; }
.post-card .card__body h3 { transition: color .18s var(--ease); }
.post-card:hover .card__body h3 { color: var(--brand-deep); }
.post-meta { margin-bottom: .5rem; }
.readmore { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--brand-deep); }
.readmore svg { width: 1em; height: 1em; transition: transform .2s var(--ease); }
.post-card:hover .readmore svg { transform: translateX(4px); }
/* Article cards share five row tracks with their neighbours (subgrid), so the
   category, title, excerpt and read-more line start at the same height in
   every card on the row, however long each title is. */
@supports (grid-template-rows: subgrid) {
  .post-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
  .post-card .card__body { display: contents; }
  .post-card .card__body > * { margin-inline: 1.6rem; }
  .post-card .card__media { grid-row: 1; }
  .post-card .post-meta { grid-row: 2; margin-top: 1.6rem; }
  .post-card h3 { grid-row: 3; }
  .post-card .card__body > p:not([class]) { grid-row: 4; }
  .post-card .card__foot { grid-row: 5; align-self: end; margin-bottom: 1.6rem; }
}

/* --- 18. Newsletter ----------------------------------------------------- */
.signup {
  background: var(--forest);
  color: var(--on-forest-soft);
  border-radius: var(--r-lg);
  padding: clamp(2rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: 1fr minmax(300px, 460px);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  position: relative;
  overflow: hidden;
}
.signup::before {
  content: "";
  position: absolute;
  right: -80px; top: -80px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(var(--brand-rgb), .22), transparent 68%);
  pointer-events: none;
}
.signup h2 { color: var(--on-forest); margin-bottom: .35em; }
.signup p { color: var(--on-forest-mute); margin: 0; }
@media (max-width: 860px) { .signup { grid-template-columns: 1fr; } }

.signup__form { position: relative; z-index: 1; }
.signup__row { display: flex; gap: .6rem; flex-wrap: wrap; }
.signup__row .wpcf7-form-control-wrap { flex: 1; min-width: 200px; }
.signup__row input {
  width: 100%;
  padding: .95rem 1.25rem;
  border: 1.5px solid var(--forest-line);
  border-radius: var(--r-btn);
  background: rgba(var(--white-rgb), .07);
  color: var(--on-forest);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.signup__row input::placeholder { color: var(--on-forest-mute); }
.signup__row input:focus { outline: none; border-color: var(--brand); background: rgba(var(--white-rgb), .12); }
.signup__note { color: var(--on-forest-mute); margin-top: .9rem; }
.signup__note a { color: var(--on-forest-soft); }

/* --- 19. Forms ---------------------------------------------------------- */
.form-card { padding: clamp(1.5rem, 3vw, 2.5rem); }
.field { margin-bottom: var(--sp-1); }
.field label { display: block; font-weight: 600; color: var(--forest); margin-bottom: .45rem; }
.field .req { color: var(--ember); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .85rem 1.1rem;
  border: 1.5px solid var(--sand-line);
  border-radius: var(--r-btn);
  background: var(--white);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); }
.field__hint { margin-top: .4rem; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 var(--sp-1); }

.check { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: var(--sp-1); }
.check input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .2rem; accent-color: var(--brand-deep); }

.form-note {
  background: var(--brand-soft);
  border-left: 4px solid var(--brand-deep);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 1rem 1.25rem;
  color: var(--brand-text);
  margin-bottom: var(--sp-2);
}

/* Contact page: two columns, tiles stacked beside the form */
.contact-grid { align-items: start; }
.contact-stack { display: grid; gap: .9rem; }
.contact-tile {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.35rem;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
a.contact-tile:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-sm); color: inherit; }
.contact-tile h3 { margin-bottom: .2rem; }
.contact-tile b { display: block; word-break: break-word; margin-bottom: 0; }

/* --- 19b. Shop ---------------------------------------------------------- */
/* The order-by-email dialog, the added-to-basket notice and WooCommerce's
   basket and checkout. */

/* Notice under the header after "Add to basket" */
.shop-toast {
  position: fixed;
  top: 7.5rem;
  right: clamp(1rem, 2vw, 1.75rem);
  z-index: 95;
  width: min(380px, calc(100vw - 2rem));
  padding: 1rem 1.2rem;
  background: var(--white);
  border: 1px solid var(--sand-line);
  border-left: 4px solid var(--brand-deep);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-small);
  animation: wa-pop .18s var(--ease);
}
.shop-toast.is-warn { border-left-color: var(--ember); }
.shop-toast[hidden] { display: none; }
.shop-toast a { font-weight: 600; }
@media (max-width: 700px) { .shop-toast { top: auto; bottom: calc(60px + .75rem); left: .75rem; right: .75rem; width: auto; } }

/* WooCommerce: notices, basket, checkout and order received. WooCommerce's
   own stylesheets are switched off (inc/woocommerce.php), so its classic
   markup is styled here, scoped under .shop where it could clash. */

/* Notices: the plugin's markup, in the site's note style */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, .cart-empty {
  list-style: none;
  margin: 0 0 var(--sp-2);
  padding: 1rem 1.25rem;
  background: var(--brand-soft);
  border-left: 4px solid var(--brand-deep);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--brand-text);
}
.woocommerce-error { background: var(--ember-soft); border-left-color: var(--ember); color: var(--ember-text); }
.woocommerce-error li + li { margin-top: .4rem; }
.woocommerce-message .button, .woocommerce-info .button { float: right; margin-left: 1rem; font-weight: 600; text-decoration: underline; background: none; border: 0; padding: 0; color: inherit; }
.shop-notices { padding-top: var(--sp-2); }
.shop-notices > * { margin-bottom: 0; }

/* Buttons the plugin prints get the site's button */
.shop .button, .shop button[type="submit"]:not(.qty-btn), .woocommerce-mini-cart__buttons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .8rem 1.5rem;
  border: 1.5px solid var(--forest);
  border-radius: var(--r-btn);
  background: var(--forest);
  color: var(--white);
  font-family: var(--body);
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.shop .button:hover, .shop button[type="submit"]:hover { background: var(--forest-mid); border-color: var(--forest-mid); color: var(--white); }
.shop .button:disabled, .shop .button[disabled] { opacity: .55; cursor: not-allowed; }
.shop .checkout-button, .shop #place_order { width: 100%; padding: .95rem 1.85rem; font-size: var(--fs-body); }

/* Basket table */
.shop table.shop_table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--sand-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.shop table.shop_table th, .shop table.shop_table td { padding: 1rem 1.15rem; text-align: left; border-bottom: 1px solid var(--sand-line); vertical-align: middle; }
.shop table.shop_table thead th {
  background: var(--forest);
  color: var(--on-forest);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.shop .product-thumbnail img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-sm); }
.shop .product-name { font-family: var(--display); font-weight: 600; font-size: var(--fs-title-sm); color: var(--forest); }
.shop .product-name dl.variation { margin: .35rem 0 0; font-family: var(--body); font-size: var(--fs-small); font-weight: 400; color: var(--brand-deep); }
.shop dl.variation dt, .shop dl.variation dd { display: inline; margin: 0; }
.shop dl.variation dd p { display: inline; margin: 0; }
.shop .product-remove a.remove {
  display: inline-grid;
  place-items: center;
  width: 32px; height: 32px;
  border: 1px solid var(--sand-line);
  border-radius: 50%;
  color: var(--ink-soft);
  font-size: var(--fs-icon-btn);
  line-height: 1;
  text-decoration: none;
}
.shop .product-remove a.remove:hover { border-color: var(--ember); color: var(--ember-text); }
.shop .product-price, .shop .product-subtotal { font-weight: 600; white-space: nowrap; }
.shop .quantity input.qty {
  width: 5rem;
  padding: .6rem .7rem;
  border: 1.5px solid var(--sand-line);
  border-radius: var(--r-btn);
  background: var(--white);
  text-align: center;
}
.shop .quantity input.qty:focus { outline: none; border-color: var(--brand); }
.shop td.actions { text-align: right; background: var(--sand); }
.shop td.actions .coupon { display: none; } /* no coupons are sold */
/* The site only sells to the UK, so the single-choice country field is kept in the form but not shown.
   !important because WooCommerce's country script sets display: block inline. */
.shop #billing_country_field { display: none !important; }
.shop .screen-reader-text + .quantity { display: inline-block; }

/* Basket totals beside or below the table */
.shop .cart-collaterals { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); gap: var(--sp-4); margin-top: var(--sp-4); }
.shop .cart-collaterals .cross-sells { display: none; }
.shop .cart_totals { grid-column: 2; }
@media (max-width: 780px) { .shop .cart-collaterals { grid-template-columns: minmax(0, 1fr); } .shop .cart_totals { grid-column: 1; } }
.shop .cart_totals h2, .shop #order_review_heading, .shop .woocommerce-billing-fields h3, .shop .woocommerce-additional-fields h3, .shop .woocommerce-order-details__title, .shop .wc-bacs-bank-details-heading {
  font-size: var(--fs-h3);
  margin-bottom: .8rem;
}
.shop .cart_totals table.shop_table th { width: 40%; font-weight: 600; color: var(--forest); }
.shop .order-total th, .shop .order-total td { font-family: var(--display); font-size: var(--fs-total); font-weight: 600; color: var(--forest); }
.shop .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; }
.shop .fee td { color: var(--brand-deep); font-weight: 600; }
.shop .wc-proceed-to-checkout { margin-top: var(--sp-1); }
.shop-followup { margin-top: 0; }

/* Checkout: details on the left, the order and payment on the right */
.shop form.checkout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 0 clamp(2rem, 4vw, 3.5rem); align-items: start; }
.shop form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; }
.shop #customer_details { grid-column: 1; grid-row: 2 / span 3; }
.shop #order_review_heading { grid-column: 2; grid-row: 2; }
.shop #order_review { grid-column: 2; grid-row: 3; }
@media (max-width: 900px) {
  .shop form.checkout { grid-template-columns: minmax(0, 1fr); }
  .shop #customer_details, .shop #order_review_heading, .shop #order_review { grid-column: 1; grid-row: auto; }
}
.shop .col2-set .col-1, .shop .col2-set .col-2 { width: 100%; }
.shop .form-row { margin: 0 0 var(--sp-1); }
.shop .form-row label { display: block; margin-bottom: .45rem; font-size: var(--fs-small); font-weight: 600; color: var(--forest); }
.shop .form-row .required { color: var(--ember); text-decoration: none; }
.shop .form-row .optional { color: var(--ink-soft); font-weight: 400; }
.shop .form-row input.input-text, .shop .form-row textarea, .shop .form-row select {
  width: 100%;
  padding: .85rem 1.1rem;
  border: 1.5px solid var(--sand-line);
  border-radius: var(--r-btn);
  background: var(--white);
  transition: border-color .2s var(--ease);
}
.shop .form-row textarea { min-height: 120px; resize: vertical; }
.shop .form-row input:focus, .shop .form-row textarea:focus, .shop .form-row select:focus { outline: none; border-color: var(--brand); }
.shop .form-row.woocommerce-invalid input.input-text { border-color: var(--ember); }
.shop .form-row-first, .shop .form-row-last { width: 100%; }
@media (min-width: 640px) {
  .shop .woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-1); }
  .shop .woocommerce-billing-fields__field-wrapper .form-row-wide { grid-column: 1 / -1; }
}
.shop #ship-to-different-address { display: none; } /* deliveries go to the billing address */
.shop .woocommerce-checkout-review-order-table { margin-bottom: var(--sp-2); }
.shop .woocommerce-checkout-review-order-table td.product-total, .shop .woocommerce-checkout-review-order-table tfoot td { text-align: right; }
.shop #payment { padding: var(--sp-2); background: var(--white); border: 1px solid var(--sand-line); border-radius: var(--r-lg); }
.shop #payment ul.payment_methods { list-style: none; margin: 0 0 var(--sp-1); padding: 0; }
.shop #payment ul.payment_methods li > label { font-weight: 600; color: var(--forest); }
.shop #payment input[type="radio"] { accent-color: var(--brand-deep); margin-right: .5rem; }
.shop #payment .payment_box { margin-top: .75rem; padding: 1rem 1.15rem; background: var(--sand); border-radius: var(--r); color: var(--ink-soft); font-size: var(--fs-small); }
.shop .woocommerce-privacy-policy-text { font-size: var(--fs-small); color: var(--ink-soft); }
.shop .woocommerce-terms-and-conditions-wrapper { margin-bottom: var(--sp-1); }

/* Order received */
.shop .woocommerce-order { max-width: 820px; }
.shop ul.woocommerce-order-overview {
  list-style: none;
  margin: 0 0 var(--sp-2);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  border: 1px dashed var(--sand-line);
  border-radius: var(--r);
}
.shop ul.woocommerce-order-overview li { padding: 1rem 1.15rem; color: var(--ink-soft); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .06em; }
.shop ul.woocommerce-order-overview strong { display: block; margin-top: .25rem; color: var(--forest); font-size: var(--fs-body); text-transform: none; letter-spacing: 0; }
.shop .woocommerce-thankyou-order-received { font-family: var(--display); font-size: var(--fs-thanks); font-weight: 600; color: var(--forest); }
.shop ul.wc-bacs-bank-details { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .75rem; }
.shop ul.wc-bacs-bank-details li { padding: .9rem 1.1rem; background: var(--white); border: 1px solid var(--sand-line); border-radius: var(--r); color: var(--ink-soft); font-size: var(--fs-small); }
.shop ul.wc-bacs-bank-details strong { display: block; margin-top: .2rem; color: var(--forest); font-size: var(--fs-body); }
.shop .woocommerce-customer-details address { font-style: normal; padding: 1rem 1.15rem; background: var(--white); border: 1px solid var(--sand-line); border-radius: var(--r); }

/* Basket empty */
.shop .return-to-shop { margin-top: var(--sp-2); }

/* Order by email dialog */
.order-modal {
  width: min(1080px, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 0;
  border-radius: var(--r-lg);
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
}
.order-modal::backdrop { background: rgba(var(--scrim), .65); }
.order-modal[open] { animation: wa-pop .18s var(--ease); }
.order-modal h2 { margin-bottom: .25em; padding-right: 3rem; font-size: var(--fs-h-mid); }
.order-modal__intro { color: var(--ink-soft); margin-bottom: var(--sp-1); }
.order-modal__close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--sand-line);
  border-radius: 50%;
  background: var(--white);
  color: var(--forest);
  cursor: pointer;
}
.order-modal__close:hover { border-color: var(--forest); }
.order-modal__close svg { width: 15px; height: 15px; }
/* Compact fields so the whole form fits a laptop screen without scrolling */
.order-modal .field { margin-bottom: .9rem; }
.order-modal .field label { margin-bottom: .3rem; }
.order-modal .field input, .order-modal .field select, .order-modal .field textarea { padding: .65rem .9rem; }
.order-modal .field__hint { margin-top: .25rem; line-height: 1.45; }
.order-modal .field textarea { height: 5rem; min-height: 0; }
/* Two columns on a wide dialog. The form's rows are flattened so each field
   takes the next cell: name and phone, email and address, postcode and logs,
   date and kindling. The notes box, the privacy line and the send button run
   full width. Phones keep one column. */
@media (min-width: 720px) {
  .order-modal .wpcf7-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-1); align-items: start; }
  .order-modal .wpcf7-form > * { grid-column: 1 / -1; }
  .order-modal .wpcf7-form > .field-row { display: contents; }
  .order-modal .wpcf7-form > .field-row > .field,
  .order-modal .wpcf7-form > .field { grid-column: auto; }
  .order-modal .wpcf7-form > .field:has(textarea) { grid-column: 1 / -1; }
}
/* Three columns on a large screen: name, phone, email; address, postcode,
   logs; date, kindling, notes; then the privacy line beside the send button. */
@media (min-width: 1000px) {
  .order-modal { max-height: calc(100dvh - 1rem); padding-block: 1.5rem; }
  .order-modal__close { top: .75rem; }
  .order-modal .wpcf7-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .order-modal .wpcf7-form > .field:has(textarea) { grid-column: auto; }
  .order-modal .wpcf7-form > .field__hint { grid-column: 1 / 3; align-self: center; margin: 0; }
  .order-modal .wpcf7-form > .wpcf7-submit { grid-column: 3; }
}
/* CF7's spinner sits over the end of the send button rather than taking a row */
.order-modal .wpcf7-form { position: relative; }
.order-modal .wpcf7-spinner { position: absolute; right: 1rem; bottom: 1rem; margin: 0; }
body.modal-open { overflow: hidden; }

/* --- 20. FAQ ------------------------------------------------------------ */
.faq { border-top: 1px solid var(--sand-line); }
.faq details { border-bottom: 1px solid var(--sand-line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem .25rem;
  color: var(--forest);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 22px; height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D6B2E' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--brand-deep); }
.faq__body { padding: 0 .25rem var(--sp-2); }
.faq__body p:last-child { margin-bottom: 0; }

/* --- 21. Prose (articles, policies) ------------------------------------- */
.prose > * + * { margin-top: 1.3em; }
.prose h2 { margin-top: 2.2em; margin-bottom: .55em; }
.prose h3 { margin-top: 1.8em; margin-bottom: .45em; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose .ticks { padding-left: 0; } /* the tick list carries its own indent */
.prose li + li { margin-top: .5em; }
.prose img { border-radius: var(--r); box-shadow: var(--shadow-sm); }
.prose blockquote {
  margin: 2em 0;
  padding: 1.35rem 1.65rem;
  background: var(--brand-soft);
  border-left: 4px solid var(--brand-deep);
  border-radius: 0 var(--r) var(--r) 0;
  color: var(--forest);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose figure { margin: 2em 0; }
.prose figcaption { margin-top: .65rem; text-align: center; }
.prose hr { border: 0; border-top: 1px solid var(--sand-line); margin: 2.5em 0; }

.callout { padding: 1.6rem 1.85rem; margin: 2em 0; }

/* --- 22. Table ---------------------------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r); }
table.data {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  min-width: 520px;
}
table.data th, table.data td { padding: 1rem 1.15rem; text-align: left; border-bottom: 1px solid var(--sand-line); }
table.data thead th { background: var(--forest); color: var(--on-forest); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--brand-soft); }
table.data .num { color: var(--forest); }
/* Phones: let the columns wrap rather than scroll sideways */
@media (max-width: 560px) {
  table.data { min-width: 0; }
  table.data th, table.data td { padding: .75rem .6rem; }
}
/* Small handsets: tighter still, so four columns fit without sideways scroll */
@media (max-width: 420px) {
  table.data th, table.data td { padding: .6rem .4rem; font-size: var(--fs-rel-sm); }
}

/* --- 23. Forest bands --------------------------------------------------- */
/* Every colour change a component makes when it sits on dark green */
.section--forest { background: var(--forest); color: var(--on-forest-soft); }
.section--forest h2, .section--forest h3,
.section--forest .trust h3, .section--forest .step h3, .section--forest .quote cite { color: var(--on-forest); }
.section--forest .lede, .section--forest .section-head p,
.section--forest .trust p, .section--forest .step p, .section--forest .quote figcaption span { color: var(--on-forest-mute); }
.section--forest .ticks li, .section--forest .towns li, .section--forest .quote blockquote { color: var(--on-forest-soft); }
.section--forest a:not(.btn) { color: var(--on-forest-soft); text-decoration-color: var(--brand); }
.section--forest a:not(.btn):hover { color: var(--brand); }
.section--forest .trust__ico { color: var(--brand); }
.section--forest .ticks li::before { background-color: rgba(var(--brand-rgb), .2); }
.section--forest .towns li { background: rgba(var(--white-rgb), .06); border-color: var(--forest-line); }
.section--forest .quote { background: rgba(var(--white-rgb), .05); border-color: var(--forest-line); }
/* A white panel on a forest band keeps its own light-ground colours, including
   its buttons - the on-dark inverse in section 5 must not reach inside it. */
.section--forest .pc h3, .section--forest .form-card h3, .section--forest .card h3 { color: var(--forest); }
.section--forest .pc p, .section--forest .form-card p, .section--forest .card p { color: var(--ink-soft); }
.section--forest .pc a:not(.btn), .section--forest .card a:not(.btn) { color: var(--brand-deep); text-decoration-color: currentColor; }
.section--forest .pc a:not(.btn):hover, .section--forest .card a:not(.btn):hover { color: var(--forest); }
.section--forest .pc .btn:not(.btn--ghost):not(.btn--wa),
.section--forest .card .btn:not(.btn--ghost):not(.btn--wa),
.section--forest .form-card .btn:not(.btn--ghost):not(.btn--wa) {
  background: var(--forest); border-color: var(--forest); color: var(--white);
}
.section--forest .pc .btn:not(.btn--ghost):not(.btn--wa):hover,
.section--forest .card .btn:not(.btn--ghost):not(.btn--wa):hover,
.section--forest .form-card .btn:not(.btn--ghost):not(.btn--wa):hover {
  background: var(--forest-mid); border-color: var(--forest-mid); color: var(--white);
}

/* --- 24. Footer --------------------------------------------------------- */
.footer { background: var(--forest); color: var(--on-forest-mute); padding-block: clamp(3rem, 2rem + 4vw, 4.5rem) 0; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 3rem;
}
@media (max-width: 940px) { .footer__grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.footer a { color: var(--on-forest-soft); text-decoration: none; }
.footer a:hover { color: var(--brand); text-decoration: underline; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.footer__brand img { width: 180px; margin-bottom: var(--sp-1); }
.footer address { font-style: normal; overflow-wrap: anywhere; }
.footer .btn--wa { text-decoration: none; }

.socials { display: flex; gap: .65rem; margin-top: 1.35rem; }
.socials a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--forest-line);
  border-radius: 50%;
  color: var(--on-forest-soft);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.socials a:hover { background: var(--brand); border-color: var(--brand); color: var(--forest); transform: translateY(-2px); }
.socials svg { width: 18px; height: 18px; }

.footer__bar {
  border-top: 1px solid var(--forest-line);
  padding-block: var(--sp-2);
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
}

/* --- 25. Call bar (mobile) ---------------------------------------------- */
.callbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  gap: 1px;
  background: var(--forest-line);
  box-shadow: 0 -4px 20px rgba(var(--scrim), .18);
}
.callbar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .95rem .5rem;
  background: var(--forest);
  color: var(--on-forest);
  font-size: var(--fs-ui);
  font-weight: 600;
  text-decoration: none;
}
.callbar a.is-wa { background: var(--wa); color: var(--wa-ink); }
.callbar svg { width: 18px; height: 18px; }
@media (max-width: 700px) {
  .callbar { display: flex; }
  .footer { padding-bottom: 60px; }
}

/* --- 26. WhatsApp chat bubble ------------------------------------------- */
/* Floating launcher bottom-right with a WhatsApp-styled greeting panel.
   Hidden at call-bar widths: on a handset the fixed call bar already carries
   a WhatsApp button, and the two would sit on top of each other. */
.wa-chat {
  position: fixed;
  right: clamp(1rem, 2vw, 1.75rem);
  bottom: clamp(1rem, 2vw, 1.75rem);
  z-index: 80;
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: .85rem;
}
@media (min-width: 701px) { .wa-chat { display: flex; } }

.wa-chat__launcher {
  position: relative;
  width: 60px; height: 60px;
  border: 0;
  border-radius: 50%;
  background: var(--wa);
  color: var(--white);
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(var(--shade-rgb), .28);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.wa-chat__launcher:hover { transform: scale(1.06); box-shadow: 0 14px 32px rgba(var(--shade-rgb), .34); }
.wa-chat__launcher svg { width: 34px; height: 34px; margin: 0 auto; }
.wa-chat__badge {
  position: absolute;
  top: -2px; right: -2px;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border: 2px solid var(--white);
  border-radius: 11px;
  background: var(--wa-badge);
  color: var(--white);
  font-size: var(--fs-badge);
  font-weight: 700;
  line-height: 22px;
}
.wa-chat__badge[hidden] { display: none; }

.wa-chat__panel {
  width: min(330px, 100vw - 3rem);
  border-radius: 16px;
  overflow: hidden;
  background: var(--wa-panel);
  box-shadow: 0 18px 44px rgba(var(--shade-rgb), .30);
  transform-origin: right bottom;
  animation: wa-pop .18s var(--ease);
}
.wa-chat__panel[hidden] { display: none; }
@keyframes wa-pop { from { opacity: 0; transform: scale(.88) translateY(12px); } }

.wa-chat__header {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .75rem .85rem;
  background: var(--wa-teal);
  color: var(--white);
}
.wa-chat__avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--white); object-fit: contain; }
.wa-chat__id { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.wa-chat__id strong { font-size: var(--fs-chat-ui); }
.wa-chat__id span { display: flex; align-items: center; gap: .35rem; font-size: var(--fs-chat-status); color: rgba(var(--white-rgb), .82); }
.wa-chat__dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--wa); }
.wa-chat__close {
  margin-left: auto;
  flex: none;
  padding: .3rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(var(--white-rgb), .85);
  cursor: pointer;
}
.wa-chat__close:hover { background: rgba(var(--white-rgb), .16); color: var(--white); }
.wa-chat__close svg { width: 15px; height: 15px; }

.wa-chat__body {
  padding: 1.1rem .85rem 1.3rem;
  background-color: var(--wa-panel);
  background-image: radial-gradient(rgba(var(--shade-rgb), .05) 1px, transparent 1px);
  background-size: 18px 18px;
}
.wa-chat__bubble {
  position: relative;
  max-width: 92%;
  padding: .6rem .75rem 1.35rem;
  background: var(--white);
  border-radius: 0 10px 10px 10px;
  box-shadow: 0 1px 1px rgba(var(--shade-rgb), .14);
}
.wa-chat__bubble::before {
  content: "";
  position: absolute;
  top: 0; left: -8px;
  border: 8px solid transparent;
  border-left-width: 8px;
  border-right-width: 0;
  border-bottom-width: 8px;
  border-top-color: var(--white);
}
.wa-chat__bubble strong { display: block; margin-bottom: .15rem; font-size: var(--fs-label); color: var(--brand-deep); }
.wa-chat__bubble p { margin: 0; font-size: var(--fs-chat); line-height: 1.5; color: var(--ink); }
.wa-chat__time { position: absolute; right: .7rem; bottom: .45rem; font-size: var(--fs-chat-time); color: var(--ink-mute); }

/* Quick answers: the conversation so far, then the questions left to ask */
.wa-chat__body { max-height: min(400px, 52vh); overflow-y: auto; overscroll-behavior: contain; }
.wa-chat__log { display: flex; flex-direction: column; gap: .6rem; }
.wa-chat__log:not(:empty) { margin-top: .6rem; }
.wa-chat__bubble a { color: var(--wa-teal); font-weight: 600; }
.wa-chat__bubble--me {
  align-self: flex-end;
  background: var(--wa-out);
  border-radius: 10px 0 10px 10px;
}
.wa-chat__bubble--me::before { left: auto; right: -8px; border-left-width: 0; border-right-width: 8px; border-top-color: var(--wa-out); }
.wa-chat__chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; margin-top: .85rem; }
.wa-chat__chip {
  padding: .4rem .75rem;
  border: 1px solid var(--wa-teal);
  border-radius: 999px;
  background: var(--white);
  color: var(--wa-teal);
  font-size: var(--fs-chat-chip);
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.wa-chat__chip:hover { background: var(--wa-teal); color: var(--white); }
.wa-chat__chip--help { background: var(--wa-teal); color: var(--white); }
.wa-chat__chip--help:hover { background: var(--forest); border-color: var(--forest); }
.wa-chat__cta[hidden] { display: none; }

.wa-chat__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1rem;
  background: var(--wa);
  color: var(--wa-ink);
  font-size: var(--fs-chat-ui);
  font-weight: 700;
  text-decoration: none;
}
/* --wa-ink, not white: white on WhatsApp green is 1.98:1 and fails AA. This is
   the same ink .btn--wa and the call bar already use on this green (7.08:1).
   The launcher keeps the white glyph - a brand mark, exempt under WCAG 1.4.11. */
.wa-chat__cta:hover { background: var(--wa-deep); color: var(--wa-ink); }
.wa-chat__cta svg { width: 1.15rem; height: 1.15rem; }

@media (prefers-reduced-motion: reduce) {
  .wa-chat__panel { animation: none; }
  .wa-chat__launcher { transition: none; }
}

/* --- 26b. Cookie banner ------------------------------------------------- */
/* Bottom-left, opposite the WhatsApp bubble. Not a modal: nothing is blocked
   and focus is not trapped. On phones it sits above the call bar. */
.cookies {
  position: fixed;
  left: clamp(1rem, 2vw, 1.75rem);
  bottom: clamp(1rem, 2vw, 1.75rem);
  z-index: 85;
  width: min(370px, calc(100vw - 2rem));
  padding: 1.1rem 1.2rem 1.15rem;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--sand-line);
  border-radius: var(--r-lg);
  box-shadow: 0 16px 40px rgba(var(--scrim), .22);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.cookies[hidden] { display: none; }
.cookies p { margin: 0 0 .9rem; }
.cookies strong { display: block; margin-bottom: .2rem; font-family: var(--display); font-weight: 600; font-size: var(--fs-title-sm); letter-spacing: -.01em; color: var(--forest); }
.cookies a { color: var(--brand-deep); }
.cookies__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.cookies .btn { padding: .55rem 1rem; font-size: var(--fs-small); }
@media (max-width: 700px) {
  .cookies { left: .75rem; right: .75rem; width: auto; bottom: calc(60px + .75rem); }
}

/* --- 27. Motion --------------------------------------------------------- */
/* Content is hidden for its entrance only once the head script has marked the
   page .js, and only when motion is welcome, so the unanimated state is the
   finished page. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .js .reveal.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --- 28. Map SVG -------------------------------------------------------- */
/* The hand-drawn delivery map keeps its own illustration palette */
.svgmap .sea    { fill: var(--map-sea); }
.svgmap .land   { fill: var(--map-land); }
.svgmap .park   { fill: var(--map-park); }
.svgmap .road   { stroke: var(--map-road); stroke-width: 2.2; fill: none; stroke-linecap: round; }
.svgmap .radius { fill: rgba(var(--brand-rgb), .16); stroke: var(--brand-deep); stroke-width: 2; stroke-dasharray: 7 5; }
.svgmap .town   { fill: var(--ink-soft); font: 500 11px "Inter", sans-serif; }
.svgmap .dot    { fill: var(--map-dot); }
.svgmap .hq     { fill: var(--ember); }
.svgmap .hqlabel { fill: var(--forest); font: 700 12.5px "Inter", sans-serif; }
.svgmap .coast  { stroke: var(--map-coast); stroke-width: 1.5; fill: none; }

/* --- 29. Utilities ------------------------------------------------------ */
/* Last in the file so they win ties against component rules */
.u-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.u-center { text-align: center; }
.u-muted { color: var(--ink-soft); }
.u-jc-center { justify-content: center; }
/* Spacing scale - replaces the inline style attributes pages used to carry */
.u-mt-1 { margin-top: var(--sp-1); }
.u-mt-2 { margin-top: var(--sp-2); }
.u-mt-5 { margin-top: var(--sp-5); }
.u-mt-section { margin-top: var(--sp-section); }
.u-mb-2 { margin-bottom: var(--sp-2); }

/* --- 30. WordPress ------------------------------------------------------ */
/* Classes WordPress and the theme's templates print themselves */
.skip-link {
  position: absolute;
  left: 1rem; top: -100px;
  z-index: 200;
  padding: .75rem 1.1rem;
  background: var(--forest);
  color: var(--white);
  font-weight: 600;
  border-radius: var(--r-btn);
  text-decoration: none;
}
.skip-link:focus { top: 1rem; color: var(--white); }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The site name stands in for the logo when Global Settings has none */
.brand__name { font-family: var(--display); font-size: var(--fs-brand); font-weight: 600; color: var(--forest); text-decoration: none; }
.footer .brand__name { color: var(--on-forest); }

/* The header menu comes from wp_nav_menu as a list; it lays out as the links did */
.nav__menu { display: flex; align-items: center; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.nav__menu li { margin: 0; }
.nav__menu a { display: block; }
@media (max-width: 1270px) {
  .nav__menu { flex-direction: column; align-items: stretch; gap: 0; }
}

/* Footer column headings: real headings, in the uppercase label style */
.footer__heading {
  font-family: var(--body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--on-forest);
  margin-bottom: 1.15rem;
}
.footer__legal ul { display: flex; flex-wrap: wrap; gap: var(--sp-1); }

/* A page head with no photo is plain forest green */
.pagehead--plain::after { display: none; }

/* A split section with no photo: the copy runs at a readable width */
.split--solo { display: block; max-width: 760px; }

/* Rich text from the editor and WYSIWYG fields */
.prose { max-width: 760px; }
.prose--wide { max-width: none; } /* area pages: the local copy runs the full width */
.prose--wide > :first-child { margin-top: 0; }
.prose--wide h2 { margin-top: 1.1em; }
.alignleft { float: left; margin: .4em 1.5em 1em 0; }
.alignright { float: right; margin: .4em 0 1em 1.5em; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { margin-top: .65rem; text-align: center; font-size: var(--fs-small); color: var(--ink-soft); }

.pagination { margin-top: var(--sp-4); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.pagination .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 44px; height: 44px;
  padding: 0 .75rem;
  border: 1px solid var(--sand-line);
  border-radius: var(--r-btn);
  background: var(--white);
  color: var(--forest);
  text-decoration: none;
  font-weight: 600;
}
.pagination .page-numbers.current { background: var(--forest); border-color: var(--forest); color: var(--white); }

.search-form .pc__row { margin-top: 0; }
.search-form input[type="search"] {
  flex: 1;
  min-width: 0;
  max-width: 420px;
  padding: .85rem 1.1rem;
  border: 1.5px solid var(--sand-line);
  border-radius: var(--r-btn);
  background: var(--white);
}

/* --- 31. Contact Form 7 ------------------------------------------------- */
/* The form bodies use the theme's .field markup; these cover what the plugin adds */
.wpcf7 form { position: relative; }
.wpcf7-form-control-wrap { display: block; }
.wpcf7-not-valid-tip { display: block; margin-top: .35rem; color: var(--ember-text); font-size: var(--fs-small); font-weight: 600; }
.wpcf7 .wpcf7-not-valid { border-color: var(--ember) !important; }
/* The spinner keeps its space while hidden, so it sits over the button's edge
   instead of dropping a full-width button onto a line of its own. */
.wpcf7-spinner { position: absolute; right: 1rem; bottom: 1rem; margin: 0; }
.wpcf7 form .wpcf7-response-output {
  margin: var(--sp-1) 0 0;
  padding: 1rem 1.25rem;
  border: 0;
  border-left: 4px solid var(--brand-deep);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--brand-soft);
  color: var(--brand-text);
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output {
  border-left-color: var(--ember);
  background: var(--ember-soft);
  color: var(--ember-text);
}
.wpcf7-list-item { margin: 0; }
.check .wpcf7-list-item label { display: flex; gap: .75rem; align-items: flex-start; }
/* Honeypot: off-screen rather than display:none, which bots learn to skip */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* The sign-up band's form sits on forest green */
.signup .wpcf7-response-output { background: rgba(var(--white-rgb), .08); color: var(--on-forest-soft); border-left-color: var(--brand); }
.signup .wpcf7-not-valid-tip { color: var(--on-forest-warn); }
.signup .wpcf7-spinner { right: auto; left: 0; bottom: -2rem; }