/* ==========================================================================
   Richie's Collagen shop
   Design system, layout, components and WooCommerce styling.
   One stylesheet, no build step. Loaded after the WooCommerce stylesheets
   (functions.php enqueues at priority 20) so the shop pages inherit this look.

   Conventions from the client's homepage mockup (docs/reference/mockup, v2):
   h1 and the mission line in DM Serif Display, sentence case; section titles
   in Lato 900 uppercase; handwritten lines in Caveat; flat colour only, no
   gradients and no glow; icons in rings; thin rules between columns.
   ========================================================================== */

:root{
  --green:#12392C;
  --green-deep:#0B251D;
  --sage:#D4D9C4;
  --sage-soft:#E6E6DA;
  --sage-mist:#E0E2D5;
  --ivory:#F5F0E7;
  --panel:#F6EFE5; /* the format photos' own background, so they sit seamlessly on the panel */
  --cream:#EAE1D2;
  --ink:#0A1812;
  --muted:#49574D;
  --white:#FFFFFF;
  --pouch:#EFE6D6;
  --oak:#DCC6A4;
  --oak-edge:#E6D4B6;
  --berry:#8C2F20;

  --serif:"DM Serif Display",Georgia,serif;
  --hand:Caveat,"Segoe Script",cursive;

  --radius:20px;
  --radius-lg:24px;
  --radius-md:20px;
  --radius-sm:14px;

  --container:1360px;
  --pad-x:clamp(16px, 4vw, 40px);
  --section-y:clamp(64px, 8vw, 112px);
  --hairline:1px solid rgba(10,24,18,.12);
  --hairline-light:1px solid rgba(245,240,231,.22);
  --lift:0 12px 32px -20px rgba(10,24,18,.25);
  --ring:0 0 0 3px rgba(18,57,44,.35);
  --ease:200ms ease;
}

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

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:120px}

body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:Lato,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

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

h1,h2,h3,h4{
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:1.05;
  text-wrap:balance;
  margin:0 0 .5em;
  color:var(--ink);
}
/* The mockup's display voice: DM Serif Display in sentence case for every h1. */
h1{
  font-family:var(--serif);font-weight:400;text-transform:none;letter-spacing:-.005em;line-height:1.04;
  color:var(--green-deep);font-size:clamp(2.5rem, 5.6vw, 4.25rem);
}
h2{font-size:clamp(1.9rem, 3.8vw, 2.9rem)}
h3{font-size:1.25rem}
h4{font-size:1rem;letter-spacing:.06em}
.display{font-family:var(--serif);font-weight:400;text-transform:none;letter-spacing:-.005em;line-height:1.04}

p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

a{color:var(--green);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--green-deep)}

:focus-visible{outline:2px solid var(--green);outline-offset:2px;box-shadow:var(--ring);border-radius:6px}

/* ---------- helpers ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--pad-x)}
.section{padding-block:var(--section-y)}
.section--tight{padding-block:clamp(44px, 6vw, 80px)}
.lead{font-size:clamp(1.05rem, 1.6vw, 1.3rem);line-height:1.5;color:var(--muted);max-width:56ch}
.lead--light{color:rgba(245,240,231,.82)}
.muted{color:var(--muted)}
.measure{max-width:62ch}
.center{text-align:center;margin-inline:auto}
.smallprint{font-size:.85rem;color:var(--muted);margin-top:18px;max-width:52ch}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[hidden]{display:none !important}

.skip-link{
  position:absolute;left:16px;top:-72px;z-index:120;
  background:var(--green);color:var(--white);
  padding:12px 20px;border-radius:999px;font-weight:700;text-decoration:none;
  transition:top var(--ease);
}
.skip-link:focus-visible{top:16px;color:var(--white)}

.eyebrow{
  display:flex;align-items:center;gap:12px;
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  color:var(--muted);margin:0 0 20px;
}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--green);flex:0 0 auto}
.eyebrow--center{justify-content:center}
.eyebrow--light{color:rgba(245,240,231,.78)}
.eyebrow--light::before{background:var(--sage)}
/* A rule on both sides, as on the mockup's hero and mission band. */
.eyebrow--both{color:var(--ink);gap:14px}
.eyebrow--both::before,.eyebrow--both::after{content:"";width:40px;height:1.5px;background:currentColor;flex:0 0 auto}
.eyebrow--both.eyebrow--light{color:rgba(245,240,231,.86)}
.eyebrow--both.eyebrow--light::before,.eyebrow--both.eyebrow--light::after{background:currentColor}

.section-head{margin-bottom:clamp(32px,4vw,56px);max-width:70ch}
.section-head--center{margin-inline:auto;text-align:center}
.section-head--center .lead{margin-inline:auto}

/* A short rule above a section title (Why collagen?). */
.rule{display:block;width:56px;height:2px;background:var(--green-deep);margin-bottom:22px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:15px 28px;border-radius:999px;
  font-family:inherit;font-weight:700;font-size:16px;line-height:1.2;
  text-align:center;text-decoration:none;cursor:pointer;border:1.5px solid transparent;
  transition:background-color var(--ease), color var(--ease), border-color var(--ease);
}
.btn svg{width:18px;height:18px;flex:0 0 auto}
.btn--primary{background:var(--green);color:var(--white);border-color:var(--green)}
.btn--primary:hover{background:var(--green-deep);border-color:var(--green-deep);color:var(--white)}
.btn--primary:active{background:var(--ink);border-color:var(--ink)}
.btn--secondary{background:transparent;color:var(--green);border-color:var(--green)}
.btn--secondary:hover{background:var(--green);color:var(--white)}
.btn--inverse{background:var(--ivory);color:var(--green);border-color:var(--ivory)}
.btn--inverse:hover{background:var(--white);color:var(--green-deep);border-color:var(--white)}
.btn--outline-inverse{background:transparent;color:var(--ivory);border-color:rgba(245,240,231,.7)}
.btn--outline-inverse:hover{background:var(--ivory);color:var(--green);border-color:var(--ivory)}
.btn--wide{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

/* ---------- ticker ---------- */
.ticker{background:var(--green);color:var(--ivory);overflow:hidden;position:relative;z-index:60}
.ticker__track{
  display:flex;align-items:center;white-space:nowrap;
  padding:9px 0;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;
  animation:ticker 44s linear infinite;
  width:max-content;
}
.ticker__group{display:flex;align-items:center;flex:0 0 auto}
.ticker__item{padding:0 22px;position:relative}
.ticker__item::after{content:"";position:absolute;right:-3px;top:50%;width:4px;height:4px;border-radius:50%;background:var(--sage);transform:translateY(-50%)}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- header: a flat ivory bar with the stacked lockup ---------- */
.site-header{
  position:sticky;top:0;z-index:70;
  background:var(--ivory);border-bottom:1px solid transparent;
  transition:border-color var(--ease);
}
.site-header.is-scrolled{border-bottom-color:rgba(10,24,18,.1)}
.site-header__bar{display:flex;align-items:center;gap:24px;min-height:94px;padding-block:10px}

.brand{
  display:inline-flex;flex-direction:column;align-items:center;flex:0 0 auto;
  text-decoration:none;color:var(--green-deep);line-height:1;
}
.brand__mark{display:block;width:24px;height:24px;margin-bottom:4px;color:var(--green-deep)}
.brand__mark svg{width:24px;height:24px}
.brand__name{
  display:block;font-family:var(--serif);font-size:33px;line-height:.9;letter-spacing:.015em;
  text-transform:uppercase;color:var(--green-deep);transition:color var(--ease);
}
.brand__tag{display:block;margin-top:6px;font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--green)}
.brand:hover .brand__name{color:var(--green)}
.brand--compact .brand__mark{width:18px;height:18px;margin-bottom:3px}
.brand--compact .brand__mark svg{width:18px;height:18px}
.brand--compact .brand__name{font-size:24px}
.brand--compact .brand__tag{font-size:8px;margin-top:4px}

.site-nav{margin-inline:auto}
.site-nav ul{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0}
.site-nav a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 16px;
  font-size:15px;font-weight:700;letter-spacing:.01em;color:var(--ink);text-decoration:none;
  border-radius:999px;transition:color var(--ease), background-color var(--ease);
}
.site-nav a:hover{color:var(--green);background:rgba(18,57,44,.06)}
.site-nav a[aria-current="page"]{color:var(--green);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}

.header-actions{display:flex;align-items:center;gap:14px;flex:0 0 auto;margin-left:auto}
.basket-link{
  position:relative;display:inline-grid;place-items:center;width:48px;height:48px;border-radius:999px;
  color:var(--ink);text-decoration:none;transition:background-color var(--ease), color var(--ease);
}
.basket-link:hover{background:rgba(18,57,44,.07);color:var(--green)}
.basket-link__icon svg{width:28px;height:28px}
.basket-link__label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.basket-link__count{
  min-width:22px;height:22px;padding:0 6px;border-radius:999px;
  background:var(--green-deep);color:var(--ivory);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:900;line-height:1;
}
.basket-link .basket-link__count{position:absolute;top:0;right:-4px;border:2px solid var(--ivory)}
.header-cta .btn{min-height:54px;padding:0 28px}
.nav-toggle{
  display:none;align-items:center;gap:10px;
  min-height:44px;min-width:44px;padding:10px 18px;border-radius:999px;
  background:var(--green);color:var(--white);border:0;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  transition:background-color var(--ease);
}
.nav-toggle:hover{background:var(--green-deep)}

.mobile-menu{
  position:fixed;inset:0;z-index:100;background:var(--ivory);
  display:none;flex-direction:column;padding:16px;overflow-y:auto;
}
.mobile-menu[data-open="true"]{display:flex}
.mobile-menu__top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.mobile-menu__close{
  min-height:44px;min-width:44px;padding:10px 18px;border-radius:999px;
  border:1.5px solid var(--green);background:transparent;color:var(--green);cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  transition:background-color var(--ease), color var(--ease);
}
.mobile-menu__close:hover{background:var(--green);color:var(--white)}
.mobile-menu__links{list-style:none;margin:auto 0;padding:0;display:flex;flex-direction:column;gap:2px}
.mobile-menu__links a{
  display:block;padding:14px 4px;border-bottom:var(--hairline);
  font-size:clamp(1.5rem,7vw,2.25rem);font-weight:900;text-transform:uppercase;letter-spacing:.01em;
  color:var(--ink);text-decoration:none;transition:color var(--ease);
}
.mobile-menu__links a:hover,.mobile-menu__links a[aria-current="page"]{color:var(--green)}
.mobile-menu__minor{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 22px}
.mobile-menu__minor a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:700;color:var(--ink);text-decoration:none}
.mobile-menu__minor a:hover{color:var(--green)}
.mobile-menu .btn{width:100%;margin-top:24px}
body.is-locked{overflow:hidden}

/* ---------- handwriting, rings, solid icons ---------- */
.hand{margin:0;font-family:var(--hand);font-weight:500;font-size:clamp(1.6rem,2.2vw,2.1rem);line-height:1.02;color:var(--green-deep)}
.hand__text,.hand__line{display:block}
.hand__heart{
  display:inline-block;width:.78em;height:.7em;margin-left:.16em;vertical-align:-.02em;
  fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;overflow:visible;
}
.hand__heart--above{display:block;width:1.3em;height:1.2em;margin:0 auto .25em}
.hand--light{color:var(--ivory)}
.hand--large{font-size:clamp(2.2rem,3.3vw,3.1rem)}

.ring{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;border:1.5px solid currentColor;flex:0 0 auto}
.ring svg{width:34px;height:34px}
.icon.icon--solid{fill:currentColor;stroke:none}

/* ---------- the pack: the photoreal pouch render with the dog's photo in its window ---------- */
.pack{position:relative;isolation:isolate;display:block;width:min(100%, var(--pack-w, 230px));margin-inline:auto;container-type:inline-size;background:#F4F0E7}
.pack--sm{--pack-w:150px}
.pack--md{--pack-w:230px}
.pack--lg{--pack-w:320px}
.pack__base{display:block;width:100%;height:100%;max-width:none;object-fit:contain}
/* The window is a semicircle on top of a rectangle: 50% by 54.1% radii of its box
   (radius 264 on the 528 by 488 window of the template). */
.pack__window{position:absolute;z-index:1;display:block;overflow:hidden;clip-path:inset(0 round 50% 50% 0 0 / 54.1% 54.1% 0 0);background:#F0E9DE}
.pack__window--circle{clip-path:circle(50% at 50% 50%);background:#F0E0CC}
.pack__window img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 38%}
.pack__window--brand{display:grid;place-items:center;background:var(--sage-soft)}
.pack__brand{display:grid;justify-items:center;padding-top:14%;font-weight:900;text-transform:uppercase;letter-spacing:.1em;line-height:1.15;font-size:4.6cqw;color:var(--green-deep)}
.pack__badge{
  position:absolute;z-index:2;display:grid;place-content:center;justify-items:center;text-align:center;
  border-radius:50%;background:#F0E9DE;box-shadow:inset 0 0 0 1.4cqw var(--green-deep);color:var(--green-deep);line-height:1;
}
.pack__badge-top{font-size:1.6cqw;font-weight:900;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.pack__badge-name{margin-top:.6cqw;font-family:var(--hand);font-size:4.4cqw;font-weight:600;max-width:12cqw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pack--flat{aspect-ratio:1 / 1}

/* ---------- scenes: the product photographs ---------- */
.scene{position:relative;isolation:isolate;margin:0;border-radius:var(--radius-lg);overflow:hidden;background:var(--cream)}
/* Photos keep their natural aspect (the width and height attributes set it). */
.scene--photo img{display:block;width:100%;height:auto}
.scene--fallback{aspect-ratio:3 / 2}
.scene--fallback>img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.scene__pack-card{position:absolute;z-index:2;right:4%;bottom:5%;width:26%;padding:8px;background:#F4F0E7;border-radius:var(--radius-sm)}
.scene__pack-card .pack{--pack-w:100%}

.hero-visual,.pour-visual,.closing-visual{position:relative;isolation:isolate}
/* The handwriting sits on the scene's top right corner: mostly above it, just touching the photo. */
.home-hero__visual .hero-visual{padding-top:clamp(44px,4.2vw,62px)}
.hero-visual__hand{position:absolute;z-index:5;top:0;right:1.5%;transform:rotate(-7deg);font-size:clamp(1.5rem,2.3vw,2.25rem)}

.flow__media .pour-visual{padding-top:clamp(48px,4.4vw,64px)}
.pour-visual__hand{position:absolute;z-index:3;left:-1%;top:0;transform:rotate(-8deg);font-size:clamp(1.4rem,2vw,1.95rem)}

/* Like the hero: the handwriting sits on the top right corner, just above the photo. */
.closing__media .closing-visual{padding-top:clamp(48px,4.4vw,64px)}
.closing-visual__hand{position:absolute;z-index:4;top:0;right:2%;transform:rotate(-7deg);font-size:clamp(1.4rem,2vw,1.95rem)}

/* ---------- home: hero ---------- */
.home-hero{padding-block:clamp(16px,2vw,32px) clamp(40px,4vw,60px)}
.home-hero__grid{display:grid;grid-template-columns:minmax(0,36fr) minmax(0,64fr);gap:clamp(28px,3.4vw,52px);align-items:center}
.home-hero h1{font-size:clamp(2.75rem,5vw,4.6rem);line-height:1.02;margin:0 0 22px}
.home-hero__lead{font-size:clamp(1.05rem,1.3vw,1.2rem);line-height:1.5;color:var(--ink);max-width:40ch;margin:0}
.home-hero__actions{margin-top:30px}
.trust-line{display:flex;flex-wrap:wrap;gap:12px 20px;list-style:none;margin:32px 0 0;padding:0}
.trust-line li{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;line-height:1.3;color:var(--ink)}
.trust-line .icon{width:30px;height:30px}
.trust-line .flag{width:30px;height:20px;flex:0 0 auto;color:var(--ink)}
.flag__field{fill:currentColor}
.flag__light{fill:none;stroke:var(--ivory)}
.flag__dark{fill:none;stroke:currentColor}

/* ---------- home: the three pillars band ---------- */
.pillars-band{padding-block:clamp(36px,3.4vw,52px)}
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;margin:0;padding:0}
.pillar{display:flex;flex-direction:column;align-items:center;text-align:center;padding:4px clamp(16px,3vw,40px)}
.pillar + .pillar{border-left:1px solid rgba(245,240,231,.26)}
.pillar .ring{color:var(--ivory);margin-bottom:16px}
.pillar .ring svg{width:38px;height:38px}
.pillar h3{font-size:clamp(1.05rem,1.4vw,1.25rem);letter-spacing:.03em;margin:0 0 10px}
.pillar p{margin:0;max-width:25ch;font-size:1rem;line-height:1.5;color:rgba(245,240,231,.86);text-wrap:balance}

/* ---------- home: section rhythm ---------- */
.home-section{padding-block:clamp(48px,4.6vw,68px)}

/* ---------- home: why collagen ---------- */
.why__grid{display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:clamp(32px,4vw,64px);align-items:center}
.why h2{margin-bottom:14px}
.why__copy p{margin:0;max-width:50ch;font-size:1.05rem;line-height:1.55;color:var(--ink)}
.why .btn-row{margin-top:26px}
.why-benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;margin:0;padding:0}
.why-benefit{display:flex;flex-direction:column;align-items:center;text-align:center;padding:4px 10px}
.why-benefit + .why-benefit{border-left:var(--hairline)}
.why-benefit .ring{width:80px;height:80px;color:var(--green-deep);margin-bottom:18px}
.why-benefit .ring svg{width:42px;height:42px}
.why-benefit h3{font-size:.8rem;letter-spacing:.03em;margin:0 0 8px}
.why-benefit p{margin:0;max-width:17ch;font-size:.92rem;line-height:1.45;color:var(--ink)}

/* ---------- home: made for them, with the three formats ---------- */
.band--sage-soft{background:var(--sage-soft)}
.made__grid{display:grid;grid-template-columns:minmax(0,35fr) minmax(0,51fr) minmax(0,14fr);gap:clamp(20px,2.6vw,40px);align-items:center}
.made h2{margin-bottom:12px}
@media (min-width:1181px){.made h2{font-size:clamp(2rem,3vw,2.65rem);white-space:nowrap}}
.made__sub{margin:0 0 12px;font-size:1.1rem;font-weight:700;line-height:1.35;color:var(--ink)}
.made__text{margin:0;max-width:42ch;font-size:1.02rem;line-height:1.55;color:var(--ink)}
.formats{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);align-items:start;
  list-style:none;margin:0;padding:clamp(24px,2.6vw,36px) clamp(16px,2vw,28px) clamp(20px,2vw,28px);
  background:var(--panel);border-radius:var(--radius);overflow:hidden;
}
.format{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;border-radius:var(--radius-sm)}
/* The whole card is the link (a stretched link on the title), with its own focus ring. */
.format__link{color:inherit;text-decoration:none}
.format__link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.format__link:hover{color:var(--green);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.format__link:focus-visible{outline:none;box-shadow:none}
.format__link:focus-visible::after{outline:2px solid var(--green);outline-offset:4px;box-shadow:var(--ring)}
/* The renders sit on flat #F6EFE5 (the panel colour), so they are scaled up from the centre of
   their content and clipped: the product fills the square without a visible frame. */
.format__media{width:100%;aspect-ratio:1 / 1;margin-bottom:12px;overflow:hidden}
.format__photo,.choice-card__photo{display:block;width:100%;height:100%;max-width:none;object-fit:contain}
.format--sachets .format__photo{transform:scale(1.08);transform-origin:50.4% 56%}
.format--bag .format__photo{transform:scale(1.12);transform-origin:49.5% 50%}
/* The drawn bag (used when format-bag.jpg is absent) takes the box height, so every caption lines up. */
.format--bag .pack{width:auto;height:100%;max-width:100%;margin:0}
/* The photos carry wide margins of the panel colour: scale them from their base so the
   objects read at the mockup's size. The overflow is the same colour as the panel. */
.format__photo{width:100%;height:100%;object-fit:contain;object-position:50% 100%;transform:scale(1.18);transform-origin:50% 92%}
/* The two square photos carry the panel colour #F6EFE5 edge to edge (their photo areas were
   tone matched and feathered into it), so they need no frame or clipping. */
.format h3{font-size:1rem;letter-spacing:.06em;margin:0 0 6px}
.format p{margin:0;font-size:.95rem;line-height:1.45;color:var(--ink)}
.made__hand{justify-self:start;transform:rotate(-8deg);font-size:clamp(1.5rem,2vw,2.05rem)}

/* ---------- home: from their face to their bowl ---------- */
.flow__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,30%);gap:clamp(28px,3.4vw,56px);align-items:center}
.flow__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 28px;margin-bottom:clamp(24px,2.6vw,36px)}
.flow__head h2{margin:0}
.flow__aside{margin:0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.flow{--flow-gap:clamp(24px,3vw,48px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--flow-gap);list-style:none;margin:0;padding:0}
.flow__step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.flow__marks{display:flex;align-items:center;margin-bottom:16px}
.flow__num{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--green-deep);color:var(--ivory);font-size:14px;font-weight:900;letter-spacing:.02em}
.flow__line{width:20px;height:1px;background:rgba(10,24,18,.25)}
.flow__icon{display:grid;place-items:center;width:66px;height:66px;border-radius:50%;background:var(--sage-mist);color:var(--ink)}
.flow__icon svg{width:30px;height:30px}
.flow__step h3{font-size:.95rem;letter-spacing:.03em;margin:0 0 6px}
.flow__step p{margin:0;max-width:24ch;font-size:.95rem;line-height:1.45;color:var(--ink)}
.flow__arrow{position:absolute;top:70px;right:calc(var(--flow-gap) / -2 - 18px);width:36px;color:var(--ink)}
.flow__arrow svg{width:36px;height:24px}

/* ---------- the dark mission band (home: three columns with the closing) ---------- */
.mission-band{padding-block:clamp(44px,4.2vw,64px)}
.mission-band__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) minmax(0,1fr);align-items:center}
.mission-band__col{padding-inline:clamp(20px,3.2vw,52px)}
.mission-band__col:first-child{padding-left:0}
.mission-band__col:last-child{padding-right:0}
.mission-band__col + .mission-band__col{align-self:stretch;display:flex;flex-direction:column;justify-content:center;border-left:1px solid rgba(245,240,231,.3)}
.mission-band .eyebrow{margin-bottom:16px}
.mission-band h2.display{font-size:clamp(2rem,2.8vw,2.6rem);margin:0 0 16px}
.mission-band__mission p{margin:0;max-width:40ch}
.mission-band .btn-row{margin-top:24px}
.mission-band__hand{align-items:center;text-align:center}
.mission-band__hand .hand{transform:rotate(-9deg)}
.mission-band--closing .mission-band__grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr)}
.mission-band__photo{width:100%;margin-top:22px}
.mission-band__photo .scene{aspect-ratio:16 / 10;border-radius:var(--radius)}
.mission-band__photo .scene--photo img{height:100%;object-fit:cover;object-position:50% 55%}
.mission-band .hand--large{font-size:clamp(2rem,2.6vw,2.5rem)}
.mission-band__closing h2{font-size:clamp(1.3rem,1.9vw,1.7rem);line-height:1.12;margin:0 0 12px}
.mission-band__closing p{margin:0;max-width:44ch}
.mission-band .quote{margin:0;padding:0;border:0}
.rescue-note{display:flex;gap:12px;align-items:flex-start;margin:20px 0 0;font-size:.95rem;line-height:1.45;text-wrap:pretty}
.rescue-note svg{width:24px;height:24px;flex:0 0 auto}
.band--dark .rescue-note{color:rgba(245,240,231,.86)}
.band--dark .rescue-note svg{color:var(--ivory)}

/* ---------- page hero ---------- */
.page-hero{padding-block:clamp(36px,5vw,72px) clamp(36px,4.5vw,64px)}
.page-hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center}
.page-hero__grid--single{grid-template-columns:1fr;max-width:74ch}
.page-hero + .section{padding-top:0}

/* ---------- the sales page hero (photo with a pack) ---------- */
.hero{padding-block:clamp(36px,5vw,80px) var(--section-y)}
.hero__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,64px);align-items:center}
.hero h1{margin-bottom:18px}
.hero__note{display:flex;align-items:center;gap:10px;margin-top:28px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--green)}
.hero__note svg{width:20px;height:20px}
.hero__media{position:relative;isolation:isolate}
.hero__media .frame img{aspect-ratio:4/5}
.hero__pouch{position:absolute;z-index:2;right:-14px;bottom:-34px;width:min(36%,200px);padding:10px;background:#F4F0E7;border:var(--hairline);border-radius:var(--radius);box-shadow:var(--lift)}
.hero__pouch .pack{--pack-w:100%;width:100%}

/* ---------- icons ---------- */
.icon{width:24px;height:24px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.icon-circle{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  border:1.5px solid var(--green);color:var(--green);background:transparent;
}
.icon-circle--light{border-color:rgba(245,240,231,.6);color:var(--ivory)}
.icon-circle--filled{background:var(--green);color:var(--ivory);border-color:var(--green)}
.icon-circle--sm{width:44px;height:44px}
.icon-circle--sm svg{width:20px;height:20px}

/* ---------- frames and captions ---------- */
.frame{margin:0}
.frame img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--radius-lg);border:var(--hairline);background:var(--cream);
}
.frame--wide img{aspect-ratio:3/2}
.frame--tall img{aspect-ratio:4/5}
.frame--square img{aspect-ratio:1/1}
/* A photo at its natural aspect (never cropped); frame--max540 keeps a small original from upscaling. */
.frame.frame--natural img{aspect-ratio:auto;height:auto}
.frame--max540{max-width:540px;margin-inline:auto}
.frame__caption{
  font-family:var(--hand);font-size:22px;line-height:1.3;
  color:var(--muted);padding:12px 6px 0;
}
.band--dark .frame__caption{color:var(--sage)}

/* ---------- cards and grids ---------- */
.card{
  background:var(--white);border:var(--hairline);border-radius:var(--radius);
  padding:clamp(24px,3vw,36px);
  transition:border-color var(--ease), background-color var(--ease);
}
.card--cream{background:var(--cream)}
.card--sage{background:var(--sage)}
.card h3{margin-top:18px}
.card p{color:var(--muted)}
.card p:last-child{margin-bottom:0}

.grid{display:grid;gap:clamp(16px,2.4vw,28px)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}

.benefit h3{font-size:1.05rem;letter-spacing:.04em}
.benefit p{font-size:.97rem}

/* ---------- stats ---------- */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,24px);list-style:none;margin:0;padding:0}
.stat{
  background:var(--white);border:var(--hairline);border-radius:var(--radius);
  padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:8px;
}
.stat__value{font-size:clamp(1.8rem,3.2vw,2.4rem);font-weight:900;line-height:1;color:var(--green)}
.stat__label{font-size:.95rem;color:var(--muted);line-height:1.4}

/* ---------- trust row ---------- */
.trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,28px);list-style:none;margin:0;padding:0}
.trust{display:flex;gap:14px;align-items:flex-start}
.trust h3{font-size:.95rem;letter-spacing:.05em;margin:0 0 6px}
.trust p{margin:0;font-size:.9rem;color:var(--muted)}
.trust .icon-circle{width:48px;height:48px}
.trust .icon-circle svg{width:22px;height:22px}

/* ---------- splits ---------- */
.split{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(32px,5vw,72px);align-items:center}
.split--reverse .split__media{order:2}
.split--balanced{grid-template-columns:1fr 1fr}
.prose p{color:var(--muted);font-size:1.05rem}

/* ---------- bands ---------- */
.band--sage{background:var(--sage-soft)}
.band--cream{background:var(--cream)}
.band--pouch{background:var(--pouch)}
.band--dark{background:var(--green);color:var(--ivory)}
.band--dark h1,.band--dark h2,.band--dark h3,.band--dark h4{color:var(--ivory)}
.band--dark p{color:rgba(245,240,231,.86)}
.band--dark .eyebrow{color:rgba(245,240,231,.78)}
.band--dark .eyebrow::before{background:var(--sage)}
.band--dark .eyebrow--both,.band--dark .eyebrow--both::before,.band--dark .eyebrow--both::after{color:rgba(245,240,231,.86)}
.band--dark .eyebrow--both::before,.band--dark .eyebrow--both::after{background:currentColor}
.band--dark a{color:var(--ivory)}
/* Buttons keep their own colours inside the dark band (the link colour above
   would otherwise paint the inverse button text ivory on ivory). */
.band--dark a.btn--inverse{color:var(--green)}
.band--dark a.btn--inverse:hover{color:var(--green-deep)}
.band--dark a.btn--outline-inverse:hover{color:var(--green)}
.band--sage .card{background:var(--ivory)}

/* ---------- steps ---------- */
.steps{display:grid;gap:clamp(18px,2.4vw,28px);grid-template-columns:repeat(3,1fr)}
.step{padding-top:24px;border-top:2px solid var(--green)}
.step__num{display:block;font-size:12px;font-weight:900;letter-spacing:.14em;color:var(--green);margin-bottom:14px}
.step .icon-circle{margin-bottom:16px}
.step h3{font-size:1.15rem;margin-bottom:10px}
.step p{color:var(--muted);font-size:.97rem;margin:0}
.band--dark .step{border-color:var(--sage)}
.band--dark .step__num{color:var(--sage)}
.band--dark .step p{color:rgba(245,240,231,.82)}

.steps--stack{grid-template-columns:1fr;gap:0}
.steps--stack .step{border-top:var(--hairline);border-bottom:0;padding:24px 0;display:flex;gap:18px;align-items:flex-start}
.steps--stack .step:first-child{border-top:0;padding-top:0}
.steps--stack .step__num{margin:0;padding-top:6px;min-width:30px}
.steps--stack .step .icon-circle{margin-bottom:14px;width:48px;height:48px}
.steps--stack .step__body{flex:1 1 auto}
.band--dark .steps--stack .step{border-color:rgba(245,240,231,.22)}

.feature-rows{display:flex;flex-direction:column}
.feature-row{display:flex;gap:20px;padding:24px 0;border-top:var(--hairline)}
.feature-row:first-child{border-top:0;padding-top:0}
.feature-row h3{font-size:1.05rem;letter-spacing:.05em;margin-bottom:8px}
.feature-row p{font-size:.97rem;color:var(--muted);margin:0}
.band--dark .feature-row{border-color:rgba(245,240,231,.22)}
.band--dark .feature-row p{color:rgba(245,240,231,.78)}

/* ---------- tick lists ---------- */
.ticks{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.ticks li{display:flex;gap:12px;align-items:flex-start;color:var(--muted);font-size:1rem}
.ticks svg{width:20px;height:20px;stroke:var(--green);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-top:3px;flex:0 0 auto}
.band--dark .ticks li{color:rgba(245,240,231,.86)}
.band--dark .ticks svg{stroke:var(--sage)}

/* ---------- pack stage: photoreal packs on the render's own backdrop colour ---------- */
.pack-stage{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:var(--radius-lg);background:#F4F0E7;border:var(--hairline);
  padding:clamp(24px,3.4vw,40px) clamp(20px,3vw,36px) clamp(18px,2.6vw,28px);
}
.pack-stage__row{display:flex;align-items:flex-end;justify-content:center;gap:clamp(12px,2vw,24px)}
.pack-stage--1 .pack{--pack-w:260px}
.pack-stage--2 .pack{--pack-w:230px;margin:0}
.pack-stage__caption{margin:18px 0 0;text-align:center;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}

/* ---------- plan cards ---------- */
.plan-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.6vw,32px);align-items:start}
.plan-card{
  background:var(--ivory);border:1.5px solid rgba(10,24,18,.14);border-radius:var(--radius-lg);
  padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;height:100%;
}
.plan-card--featured{border-color:var(--green);background:var(--white)}
.plan-card__badge{
  display:inline-flex;align-self:flex-start;align-items:center;
  padding:7px 14px;border-radius:999px;margin:0 0 18px;
  background:var(--green);color:var(--ivory);
  font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
}
.plan-card__badge--quiet{background:transparent;color:var(--muted);border:1.5px solid rgba(10,24,18,.18)}
.plan-card h3{font-size:1.4rem;margin-bottom:12px}
.plan-card__price{display:flex;align-items:baseline;gap:8px;margin:0 0 10px}
.plan-card__amount{font-size:clamp(2.4rem,4.4vw,3.2rem);font-weight:900;line-height:1;color:var(--green)}
.plan-card__period{font-size:.95rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.plan-card__intro{color:var(--muted);margin-bottom:0}
.plan-card .ticks{margin-bottom:28px}
.plan-card .btn{margin-top:auto;width:100%}
.plan-card__note{margin:14px 0 0;font-size:.8rem;color:var(--muted);text-align:center}
.plan-grid__note{margin:26px auto 0;text-align:center;font-size:.85rem;color:var(--muted);max-width:60ch}
/* "Prices in pounds sterling (GBP), VAT included. Free UK delivery." under the pack prices. */
.price-note{margin:26px auto 0;text-align:center;font-size:.9rem;font-weight:700;color:var(--ink);max-width:60ch;text-wrap:balance}
.price-note + .plan-grid__note{margin-top:8px}

/* ---------- story and sales page details ---------- */
.story__subhead{margin-top:36px}
.band--dark h2.display{font-size:clamp(2rem,3.6vw,2.9rem);line-height:1.05}

/* ---------- shop: how the tin works, and the two pack cards ---------- */
.tin-explainer{
  display:flex;gap:18px;align-items:flex-start;max-width:900px;margin:0 auto clamp(24px,3vw,36px);
  background:var(--cream);border:var(--hairline);border-radius:var(--radius);padding:clamp(18px,2.4vw,26px) clamp(18px,2.6vw,30px);
}
.tin-explainer__icon{width:52px;height:52px}
.tin-explainer__icon svg{width:32px;height:32px}
.tin-explainer .eyebrow{margin:4px 0 8px}
.tin-explainer__text{margin:0;max-width:68ch;font-size:1.02rem;line-height:1.55;color:var(--ink);text-wrap:pretty}
.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,32px);max-width:960px;margin-inline:auto;align-items:stretch}
.choice-card{display:flex;flex-direction:column;background:var(--panel);border:1.5px solid rgba(10,24,18,.12);border-radius:var(--radius-lg);padding:clamp(20px,2.4vw,30px)}
.choice-card__media{aspect-ratio:4 / 3;margin-bottom:16px;overflow:hidden}
.choice-card--sachets .choice-card__photo{transform:scale(1.25);transform-origin:50.4% 56%}
.choice-card--bag .choice-card__photo{transform:scale(1.12);transform-origin:49.5% 50%}
.choice-card__size{margin:0;font-size:.9rem;color:var(--muted)}
.choice-card h3{font-size:1.4rem;margin:0 0 2px}
.choice-card .ticks{margin:14px 0 24px}
.choice-card .ticks li{color:var(--ink)}
.choice-card__actions{margin-top:auto;display:grid;gap:10px}
.choice-card__actions .btn{width:100%}
/* The small line under a button: the tin with the first delivery, the saving, the refill pack. */
.choice-card__note{margin:-2px 0 4px;font-size:.85rem;line-height:1.45;color:var(--muted);text-align:center;text-wrap:balance}
/* Side by side, both cards keep the same rows (button, two line note, button, one line note), so
   their buttons line up although the bag card has fewer notes. */
@media (min-width:783px){
  .choice-card__actions{grid-template-rows:auto minmax(2.9em,auto) auto minmax(1.45em,auto)}
  .choice-card__note{align-self:center}
}
.choice-card__note a{font-weight:700;color:var(--green);text-underline-offset:3px}
.choice-card__note a:hover{color:var(--green-deep)}

/* ---------- feeding guide: the back of the pack (shop page, #feeding) ----------
   Small cream cards on the dark band, in two stacks that end level (the last card of each
   grows), one column on phones. The cards reset the dark band's ivory text. */
.pack-back__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,20px);max-width:1040px;margin-inline:auto;align-items:stretch}
.pack-back__col{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,20px);min-width:0}
.pack-back__col>.pack-card:last-child{flex:1 1 auto}
.pack-card{background:var(--pouch);border-radius:var(--radius-sm);padding:clamp(20px,2.2vw,28px);color:var(--ink)}
.band--dark .pack-card h3{color:var(--green-deep)}
.pack-card h3{font-size:.95rem;letter-spacing:.08em;margin:0 0 14px;padding-bottom:10px;border-bottom:1.5px solid var(--green-deep)}
.band--dark .pack-card p{color:var(--ink);font-size:1rem;line-height:1.55;margin:0 0 .8em;text-wrap:pretty}
.band--dark .pack-card p:last-child{margin-bottom:0}
.band--dark .pack-card .smallprint{color:var(--muted);font-size:.85rem;line-height:1.5;margin-top:10px;max-width:none}
.band--dark .pack-card .pack-card__after{margin-top:14px;padding-top:12px;border-top:var(--hairline);font-weight:700}
.pack-card table.feed{margin-top:0}
.pack-table{width:100%;border-collapse:collapse}
.pack-table caption{text-align:left;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-bottom:10px}
.pack-table thead th{padding:0 6px 10px;border-bottom:1.5px solid var(--ink);text-align:left;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pack-table tbody th,.pack-table td{padding:12px 6px;border-bottom:var(--hairline);text-align:left;vertical-align:middle}
.pack-table tbody tr:last-child th,.pack-table tbody tr:last-child td{border-bottom:0}
.pack-table tbody th{font-weight:700;color:var(--ink)}
.pack-table td{font-weight:900;color:var(--green-deep);font-variant-numeric:tabular-nums;white-space:nowrap}
.pack-table__size{display:flex;align-items:center;gap:12px}
.pack-table__dog{display:flex;align-items:flex-end;justify-content:center;width:40px;height:34px;color:var(--green-deep);flex:0 0 auto}
.pack-table__dog--1 .icon{width:18px;height:18px}
.pack-table__dog--2 .icon{width:24px;height:24px}
.pack-table__dog--3 .icon{width:30px;height:30px}
.pack-table__dog--4 .icon{width:36px;height:36px}

/* ---------- The Promise ---------- */
.promise-card{background:var(--green);border-radius:var(--radius-lg);padding:clamp(28px,4vw,48px);text-align:center;color:var(--ivory)}
.promise-card__amount{margin:0;font-family:var(--serif);font-size:clamp(4rem,9vw,7rem);line-height:1;color:var(--ivory)}
.promise-card__line{margin:10px 0 0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,240,231,.86)}
.promise-card__hand{margin-top:24px;color:var(--ivory);transform:rotate(-6deg)}

/* ---------- ingredient list and the analysis table ---------- */
.ingredients{list-style:none;margin:0;padding:0;display:grid;gap:0}
.ingredients li{display:flex;gap:18px;padding:20px 0;border-top:var(--hairline)}
.ingredients li:first-child{border-top:0;padding-top:0}
.ingredients h3{font-size:1.02rem;letter-spacing:.04em;margin:0 0 6px}
.ingredients p{margin:0;color:var(--muted);font-size:.97rem}
.inside-link{margin:4px 0 0;padding-top:20px;border-top:var(--hairline)}
.inside-link a{display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--green);text-decoration:none}
.inside-link a:hover{color:var(--green-deep);text-decoration:underline;text-underline-offset:4px}
.inside-link svg{width:18px;height:18px;flex:0 0 auto;transform:rotate(90deg)}
table.feed{width:100%;border-collapse:collapse;margin:18px 0 14px}
table.feed caption{text-align:left;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-bottom:10px}
table.feed th,table.feed td{text-align:left;padding:12px 8px;border-bottom:var(--hairline);font-size:1rem}
table.feed th{font-weight:700;color:var(--ink);width:55%}
table.feed td{color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums}
table.feed tr:last-child th,table.feed tr:last-child td{border-bottom:0}

/* ---------- quote ---------- */
.quote{margin:32px 0;padding:24px 0 0;border-top:var(--hairline-light)}
.quote__mark{width:32px;height:32px;color:var(--sage);margin-bottom:12px}
.quote blockquote{margin:0}
.quote blockquote p{font-size:clamp(1.1rem,2vw,1.35rem);line-height:1.4;color:var(--ivory);font-weight:700}
.quote figcaption{margin-top:12px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sage)}
.band--cream .quote,.band--sage .quote{border-top:var(--hairline)}
.band--cream .quote blockquote p,.band--sage .quote blockquote p{color:var(--ink)}
.band--cream .quote figcaption,.band--sage .quote figcaption{color:var(--muted)}
.band--cream .quote__mark,.band--sage .quote__mark{color:var(--green)}

/* ---------- closing band (inner pages) ---------- */
.closing__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:center}
.closing__copy h2{max-width:16ch;margin-bottom:16px}
.closing__copy .lead{color:var(--ink);max-width:44ch}
.closing-band .rescue-note{color:var(--ink)}
.closing-band .rescue-note svg{color:var(--green-deep)}

/* ---------- FAQ ---------- */
.faq{max-width:900px}
.faq details{border-bottom:var(--hairline);background:transparent}
.faq details:first-of-type{border-top:var(--hairline)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 0;min-height:44px;cursor:pointer;list-style:none;
  font-size:clamp(1rem,1.5vw,1.15rem);font-weight:900;text-transform:uppercase;letter-spacing:.01em;line-height:1.25;
  transition:color var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--green)}
.faq summary .icon-circle{width:40px;height:40px;transition:transform 200ms ease}
.faq summary .icon-circle svg{width:18px;height:18px}
.faq details[open] summary .icon-circle{transform:rotate(45deg)}
.faq__answer{padding:0 0 24px;max-width:72ch;color:var(--muted)}
.faq__answer p{color:var(--muted)}

/* ---------- FAQs page ---------- */
.faq-page__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:clamp(32px,5vw,80px);align-items:start}
.faq-group + .faq-group{margin-top:clamp(40px,4.4vw,60px)}
.faq-group h2{font-size:clamp(1.2rem,2vw,1.5rem);margin-bottom:10px}
.faq-aside{position:sticky;top:130px;display:grid;gap:20px}
.help-card{background:var(--white);border:var(--hairline);border-radius:var(--radius-lg);padding:clamp(22px,2.6vw,30px)}
.help-card h2{font-size:1.1rem;margin:14px 0 8px}
.help-card p{color:var(--muted);margin-bottom:0}
.help-card .btn-row{margin-top:20px}
.faq-aside .frame img{aspect-ratio:4/5}

/* ---------- Contact page ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);align-items:stretch}
.contact-card{display:flex;flex-direction:column;background:var(--white);border:var(--hairline);border-radius:var(--radius-lg);padding:clamp(24px,3vw,34px)}
.contact-card h2{font-size:1.15rem;margin:18px 0 8px}
.contact-card p{color:var(--muted)}
.contact-card .btn-row{margin-top:auto;padding-top:22px}
.contact-email{display:inline-block;margin:6px 0 0;font-size:clamp(1.1rem,1.8vw,1.35rem);font-weight:900;color:var(--green-deep);overflow-wrap:anywhere}
.contact-social{margin-top:14px}
.contact-social .social-links{gap:6px}
.contact-note{margin-top:clamp(28px,3vw,40px);color:var(--muted);max-width:70ch}
.contact-phone{display:inline-block;margin:6px 0 0;font-size:1.05rem;font-weight:700;color:var(--green-deep)}
.contact-company{margin-top:clamp(20px,2.4vw,28px);padding:clamp(22px,2.6vw,30px);background:var(--white);border:var(--hairline);border-radius:var(--radius-lg)}
.contact-company h2{margin:0 0 14px;font-size:1.15rem}
.contact-company__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 28px;margin:0}
.contact-company__list div{min-width:0}
.contact-company__list dt{margin:0 0 4px;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.contact-company__list dd{margin:0;color:var(--ink);font-weight:700;overflow-wrap:anywhere}
@media (max-width:1024px){.contact-company__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.contact-company__list{grid-template-columns:minmax(0,1fr)}}

/* ---------- Retailers page ---------- */
.routes{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(16px,2.4vw,32px);align-items:stretch}
/* The route cards take the renders' own studio backdrop, so the photos sit in them without a frame. */
.route{display:flex;flex-direction:column;align-items:center;text-align:center;background:#F4F0E7;border:var(--hairline);border-radius:var(--radius-lg);padding:clamp(26px,3.4vw,44px) clamp(20px,3vw,36px)}
.route__media{width:100%;height:clamp(220px,22vw,300px);display:flex;align-items:flex-end;justify-content:center;margin-bottom:24px}
.route__photo{width:100%;height:100%;object-fit:contain;object-position:50% 100%}
.route .pack{--pack-w:190px;margin:0}
.route .icon-circle{margin-bottom:14px}
.route h2{font-size:clamp(1.5rem,2.4vw,2rem);margin:0 0 8px}
.route p{color:var(--muted);max-width:30ch;margin:0}
.routes__or{align-self:center;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--sage-soft);font-family:var(--serif);font-size:1.5rem;color:var(--green-deep)}
.routes__foot{margin:clamp(24px,3vw,36px) 0 0;text-align:center;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tailored__formats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;list-style:none;margin:28px 0 0;padding:0;max-width:420px}
.tailored__formats li{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.tailored__formats .ring{width:76px;height:76px;color:var(--green-deep)}
.tailored__foot{margin:18px 0 0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.partner-band .btn-row{margin-top:26px}
.partner-band__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,4vw,64px);align-items:center}
.partner-band__hand{justify-self:center;transform:rotate(-8deg)}

/* ---------- social links ---------- */
.social-links{display:flex;gap:8px;list-style:none;margin:0;padding:0}
.social-links a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--ink);text-decoration:none;transition:background-color var(--ease), color var(--ease)}
.social-links a:hover{background:rgba(18,57,44,.08);color:var(--green)}
.social-links svg{width:26px;height:26px}

/* ---------- journal ---------- */
.journal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,32px)}
.journal-card{
  display:flex;flex-direction:column;background:var(--white);
  border:var(--hairline);border-radius:var(--radius-lg);overflow:hidden;height:100%;
  transition:border-color var(--ease), transform var(--ease);
}
.journal-card:hover{border-color:rgba(10,24,18,.3)}
.journal-card__media{display:block;background:var(--cream)}
.journal-card__media img{width:100%;aspect-ratio:3/2;object-fit:cover}
.journal-card__fallback{display:grid;place-items:center;aspect-ratio:3/2;color:var(--green)}
.journal-card__fallback svg{width:44px;height:44px}
.journal-card__body{padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;flex:1 1 auto}
.journal-card h3{font-size:1.1rem;line-height:1.2;margin:10px 0 12px}
.journal-card h3 a{color:var(--ink);text-decoration:none}
.journal-card h3 a:hover{color:var(--green);text-decoration:underline;text-underline-offset:4px}
.journal-card p{color:var(--muted);font-size:.95rem;margin-bottom:18px}
.journal-card__more{
  margin-top:auto;display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--green);
}
.journal-card__more svg{width:16px;height:16px}
.post-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}

/* ---------- single article ---------- */
.article{max-width:680px;margin-inline:auto}
.article__head{max-width:680px;margin-inline:auto;text-align:left}
.article__head h1{font-size:clamp(2.2rem,4.6vw,3.4rem);margin:16px 0 18px}
.article__media{margin:clamp(28px,4vw,48px) auto;max-width:900px}
.article__media img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius-lg);border:var(--hairline)}
.article__body{font-size:1.06rem;color:var(--muted)}
.article__body h2{font-size:clamp(1.2rem,2.4vw,1.55rem);color:var(--ink);margin:40px 0 14px}
.article__body h3{font-size:1.1rem;color:var(--ink);margin:30px 0 12px}
.article__body p{margin-bottom:1.2em}
.article__body ul,.article__body ol{padding-left:1.2em;margin:0 0 1.2em}
.article__body li{margin-bottom:.5em}
.article__body strong{color:var(--ink)}
.article__body blockquote{margin:28px 0;padding:4px 0 4px 22px;border-left:2px solid var(--green);color:var(--ink);font-weight:700}
.article__body img{border-radius:var(--radius);margin:24px 0}
.article__footer{max-width:680px;margin:clamp(32px,4vw,56px) auto 0;padding-top:28px;border-top:var(--hairline)}

/* ---------- pagination and search ---------- */
.pagination{margin-top:48px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 14px;
  border-radius:999px;border:var(--hairline);text-decoration:none;font-weight:700;color:var(--ink);
  transition:background-color var(--ease),color var(--ease),border-color var(--ease);
}
.pagination .page-numbers:hover,.pagination .page-numbers.current{background:var(--green);color:var(--white);border-color:var(--green)}
.search-form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.search-form label{flex:1 1 220px;margin:0;display:block}
.search-form .search-label{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.search-form .search-field{
  width:100%;min-height:48px;padding:13px 16px;font:inherit;font-size:16px;color:var(--ink);
  background:var(--white);border:1.5px solid rgba(10,24,18,.18);border-radius:12px;
}
.search-form .search-field:focus{border-color:var(--green);outline:none;box-shadow:var(--ring)}
.search-form .search-submit{
  min-height:48px;padding:14px 26px;border-radius:999px;border:0;background:var(--green);color:var(--white);
  font:inherit;font-weight:700;cursor:pointer;transition:background-color var(--ease);
}
.search-form .search-submit:hover{background:var(--green-deep)}
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- prose page (editor content) ---------- */
.prose-page{max-width:74ch}
.prose-page h2{font-size:clamp(1.25rem,2.4vw,1.6rem);margin-top:44px}
.prose-page h2:first-of-type{margin-top:0}
.prose-page p,.prose-page li{color:var(--muted)}
.prose-page img,.prose-page .wp-block-image img{border-radius:var(--radius)}
.prose-page ul,.prose-page ol{padding-left:1.25em}
.prose-page li{margin-bottom:.4em}
.prose-page blockquote{margin:28px 0;padding:4px 0 4px 22px;border-left:2px solid var(--green);color:var(--muted)}

/* ---------- policy pages (page-policy.php): the reading measure, a contents list on Terms,
   and tables styled like the feeding guide's pack table ---------- */
.policy{max-width:74ch}
.policy--contents{display:grid;grid-template-columns:minmax(0,260px) minmax(0,74ch);gap:clamp(32px,5vw,72px);max-width:none;align-items:start}
.policy__contents{position:sticky;top:130px;padding:20px 22px;border-radius:var(--radius-sm);background:var(--pouch)}
body.admin-bar .policy__contents{top:162px}
.policy__contents-title{margin:0 0 8px;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.policy__contents ol{list-style:none;margin:0;padding:0;counter-reset:policy}
.policy__contents li{counter-increment:policy;margin:0}
.policy__contents a{display:flex;gap:10px;padding:6px 0;font-size:.95rem;line-height:1.35;font-weight:700;color:var(--ink);text-decoration:none}
.policy__contents a::before{content:counter(policy);min-width:1.5em;color:var(--green);font-variant-numeric:tabular-nums}
.policy__contents a:hover{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.policy__body h2{scroll-margin-top:140px}
.policy__body p,.policy__body li{color:var(--ink)}
.policy__body li{margin-bottom:.5em}
.policy__body a{font-weight:700;overflow-wrap:anywhere}
.policy-table{margin:24px 0;padding:clamp(14px,2vw,24px);border-radius:var(--radius-sm);background:var(--pouch);overflow-x:auto}
.policy-table table{width:100%;border-collapse:collapse}
.policy-table thead th{padding:0 8px 10px;border-bottom:1.5px solid var(--ink);text-align:left;vertical-align:bottom;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
/* "One-time" must not break at its hyphen; the last heading may wrap at its space. */
.policy-table thead th:not(:last-child){white-space:nowrap}
.policy-table tbody th,.policy-table td{padding:12px 8px;border-bottom:var(--hairline);text-align:left;vertical-align:top;font-size:1rem;line-height:1.45}
.policy-table tbody tr:last-child th,.policy-table tbody tr:last-child td{border-bottom:0}
.policy-table tbody th{font-weight:700;color:var(--ink)}
.policy-table td{font-weight:700;color:var(--green-deep);font-variant-numeric:tabular-nums}
@media (max-width:1024px){
  .policy--contents{grid-template-columns:minmax(0,1fr);gap:28px}
  .policy__contents{position:static}
}
@media (max-width:560px){
  .policy-table thead th,.policy-table tbody th,.policy-table td{padding-inline:6px}
  .policy-table thead th{letter-spacing:.08em}
}

/* ---------- personalise page ---------- */
.personalise-shell{min-height:200px}
/* The plugin's sticky preview reads this offset: clear the sticky header bar. */
.rs-customiser{--rs-sticky-top:112px}
body.admin-bar .rs-customiser{--rs-sticky-top:144px}
@media (max-width:1024px){
  .rs-customiser{--rs-sticky-top:92px}
  body.admin-bar .rs-customiser{--rs-sticky-top:124px}
}
.notice-card{
  border:1.5px dashed rgba(10,24,18,.28);border-radius:var(--radius);
  padding:clamp(22px,3vw,36px);background:var(--cream);max-width:68ch;
}
.notice-card h2{font-size:1.15rem;margin-bottom:10px}
.notice-card p{color:var(--muted);margin-bottom:0}

/* ---------- footer: an ivory bar, as on the v2 mockup ---------- */
.site-footer{background:var(--ivory);color:var(--ink);border-top:var(--hairline);padding-block:clamp(28px,2.8vw,40px) calc(16px + env(safe-area-inset-bottom))}
.site-footer a{text-decoration:none}
.footer__bar{display:flex;align-items:center;gap:clamp(24px,4vw,64px)}
.footer__nav{margin-inline:auto}
.footer__nav ul{display:flex;flex-wrap:wrap;gap:4px clamp(16px,2.4vw,36px);list-style:none;margin:0;padding:0}
.footer__nav a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:700;color:var(--ink);transition:color var(--ease)}
.footer__nav a:hover{color:var(--green);text-decoration:underline;text-underline-offset:5px}
.footer__nav a[aria-current="page"]{color:var(--green)}
.footer__trade{
  display:inline-flex;align-items:center;gap:12px;flex:0 0 auto;min-height:64px;
  padding-left:clamp(24px,3vw,48px);border-left:var(--hairline);
  font-size:13px;font-weight:900;letter-spacing:.1em;line-height:1.5;text-transform:uppercase;color:var(--ink);
  transition:color var(--ease);
}
.footer__trade svg{width:20px;height:20px}
.footer__trade:hover{color:var(--green)}
.footer__bottom{
  display:flex;flex-wrap:wrap;gap:4px 24px;justify-content:space-between;align-items:center;
  margin-top:clamp(20px,2.4vw,28px);padding-top:10px;border-top:var(--hairline);
  font-size:13px;color:var(--muted);
}
.footer__bottom p{margin:0}
.footer__minor{display:flex;flex-wrap:wrap;gap:0 18px;list-style:none;margin:0;padding:0}
.footer__minor a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);transition:color var(--ease)}
.footer__minor a:hover{color:var(--green);text-decoration:underline;text-underline-offset:4px}
.footer__minor a[aria-current="page"]{color:var(--green)}
/* The copyright, the company line, then the policy, basket and account links, stacked. */
.footer__bottom{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;justify-content:stretch}
.footer__legal{padding-top:10px}
.footer__bottom .footer__company{margin-top:4px;font-size:12.5px;line-height:1.55;text-wrap:pretty}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity 500ms ease, transform 500ms ease}
.reveal.is-visible{opacity:1;transform:none}

/* ==========================================================================
   WooCommerce
   ========================================================================== */

.woo-shell{max-width:var(--container);margin-inline:auto}
.woo-shell>h2,.woo-shell h2{font-size:clamp(1.3rem,2.4vw,1.8rem)}
.shop-intro{max-width:60ch;color:var(--muted);margin-bottom:28px}

/* notices */
.woocommerce-notices-wrapper:empty{display:none}
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-message,
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-error{
  background:var(--cream);color:var(--ink);border:var(--hairline);border-top:3px solid var(--green);
  border-radius:var(--radius);padding:18px 22px;margin:0 0 28px;list-style:none;
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:1rem;
}
.woocommerce .woocommerce-error,.woocommerce-page .woocommerce-error{border-top-color:var(--berry)}
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before{display:none}
.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button{margin-left:auto}

/* buttons */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:14px 28px;border-radius:999px;
  background:var(--green);color:var(--white);border:1.5px solid var(--green);
  font-family:inherit;font-size:16px;font-weight:700;line-height:1.2;text-transform:none;
  transition:background-color var(--ease),border-color var(--ease),color var(--ease);
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover{background:var(--green-deep);border-color:var(--green-deep);color:var(--white)}
.woocommerce a.button.wc-backward,
.woocommerce .cart .button[name="update_cart"],
.woocommerce button.button[name="update_cart"]{background:transparent;color:var(--green);border-color:var(--green)}
.woocommerce a.button.wc-backward:hover,
.woocommerce button.button[name="update_cart"]:hover{background:var(--green);color:var(--white)}
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled]{background:rgba(18,57,44,.35);border-color:transparent;color:var(--white);opacity:1;padding:14px 28px}

/* product grid */
.woocommerce ul.products,.woocommerce-page ul.products{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,32px);margin:0;padding:0;list-style:none;
}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none}
/* The [class*="columns-"] part matches WooCommerce's own specificity, which
   sets a percentage width and a float for its float based grid. */
.woocommerce ul.products li.product,.woocommerce-page ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product{
  width:auto;float:none;margin:0;padding:clamp(18px,2.2vw,26px);
  background:var(--white);border:var(--hairline);border-radius:var(--radius-lg);
  display:flex;flex-direction:column;text-align:left;
}
.woocommerce ul.products li.product a img{border-radius:var(--radius);margin-bottom:18px;background:var(--cream);aspect-ratio:1/1;object-fit:cover}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:1.1rem;font-weight:900;text-transform:uppercase;line-height:1.2;color:var(--ink);padding:0;margin:0 0 10px;
}
.woocommerce ul.products li.product .price{color:var(--green);font-size:1.15rem;font-weight:900;margin:0 0 18px}
.woocommerce ul.products li.product .price del{color:var(--muted);font-weight:400}
.woocommerce ul.products li.product .button{margin-top:auto;align-self:flex-start}
.woocommerce ul.products li.product .onsale,.woocommerce span.onsale{
  background:var(--green);color:var(--ivory);border-radius:999px;min-height:auto;min-width:auto;
  padding:6px 14px;font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;line-height:1;
}
.woocommerce .woocommerce-result-count{color:var(--muted);font-size:.9rem}
.woocommerce .woocommerce-ordering select{
  min-height:44px;padding:10px 14px;border-radius:999px;border:1.5px solid rgba(10,24,18,.18);
  background:var(--white);font:inherit;color:var(--ink);
}

/* single product */
.woocommerce div.product{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:start}
.woocommerce div.product div.images,.woocommerce div.product div.summary{width:auto;float:none;margin:0}
.woocommerce div.product div.images img{border-radius:var(--radius-lg);border:var(--hairline)}
.woocommerce div.product .product_title{font-size:clamp(1.9rem,3.6vw,2.8rem);margin-bottom:14px}
.woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--green);font-size:1.6rem;font-weight:900}
.woocommerce div.product .woocommerce-product-details__short-description{color:var(--muted)}
.woocommerce div.product form.cart{margin:26px 0;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.woocommerce div.product .product_meta{font-size:.85rem;color:var(--muted);margin-top:18px;display:grid;gap:6px}
.woocommerce div.product .woocommerce-tabs,.woocommerce div.product .related,.woocommerce div.product .up-sells{grid-column:1 / -1}
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;margin:0 0 24px;display:flex;flex-wrap:wrap;gap:8px}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:transparent;border:1.5px solid rgba(10,24,18,.18);border-radius:999px;margin:0;padding:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 20px;font-weight:700;color:var(--ink);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:var(--green);border-color:var(--green)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--ivory)}

/* quantity */
.woocommerce .quantity .qty{
  width:88px;min-height:48px;padding:10px 12px;font:inherit;font-size:16px;text-align:center;
  border:1.5px solid rgba(10,24,18,.18);border-radius:12px;background:var(--white);color:var(--ink);
}
.woocommerce .quantity .qty:focus{border-color:var(--green);outline:none;box-shadow:var(--ring)}

/* tables: basket, order details, my account */
.woocommerce table.shop_table,
.woocommerce-page table.shop_table{
  border:var(--hairline);border-radius:var(--radius-lg);border-collapse:separate;border-spacing:0;
  background:var(--white);margin:0 0 28px;width:100%;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{
  padding:18px 20px;border-top:var(--hairline);vertical-align:middle;color:var(--ink);font-size:1rem;
}
.woocommerce table.shop_table thead th{
  border-top:0;background:var(--cream);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.woocommerce table.shop_table thead th:first-child{border-top-left-radius:var(--radius-lg)}
.woocommerce table.shop_table thead th:last-child{border-top-right-radius:var(--radius-lg)}
.woocommerce table.shop_table tbody tr:first-child td{border-top:var(--hairline)}
.woocommerce table.shop_table td.product-name a{font-weight:700;color:var(--ink);text-decoration:none}
.woocommerce table.shop_table td.product-name a:hover{color:var(--green);text-decoration:underline}
/* The basket thumbnail. The richies-studio plugin prints the personalised
   label here with an inline width:100%, which would fill the column, so this
   rule has to win with !important. Height stays auto for the 2:3 label. */
.woocommerce table.shop_table td.product-thumbnail img{
  width:72px !important;max-width:72px;height:auto !important;
  object-fit:cover;border-radius:12px;border:var(--hairline);
}
.woocommerce table.shop_table .product-remove a.remove{
  display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:50%;background:var(--cream);color:var(--berry);font-size:18px;line-height:1;text-decoration:none;
}
.woocommerce table.shop_table .product-remove a.remove:hover{background:var(--berry);color:var(--white)}
.woocommerce table.shop_table dl.variation{margin:8px 0 0;font-size:.9rem;color:var(--muted);display:grid;gap:4px}
.woocommerce table.shop_table dl.variation dt{font-weight:700;color:var(--ink);float:none;margin:0;clear:none}
.woocommerce table.shop_table dl.variation dd{margin:0 0 6px}
.woocommerce table.shop_table dl.variation dd p{margin:0}
.woocommerce table.shop_table dl.variation img{border-radius:10px;border:var(--hairline);margin-top:4px}
.woocommerce table.shop_table td.actions{background:var(--cream);border-bottom-left-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg)}
.woocommerce table.shop_table td.actions .coupon{display:flex;flex-wrap:wrap;gap:10px;align-items:center;float:none;margin-bottom:14px}
.woocommerce table.shop_table td.actions .coupon label{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.woocommerce table.shop_table td.actions .coupon .input-text{
  width:200px;min-height:48px;padding:12px 16px;font:inherit;font-size:16px;
  border:1.5px solid rgba(10,24,18,.18);border-radius:12px;background:var(--white);
}
.woocommerce .cart-collaterals{display:grid;gap:24px;margin-top:8px}
.woocommerce .cart-collaterals .cart_totals{width:100%;float:none}
.woocommerce .cart-collaterals .cart_totals h2{font-size:1.2rem;margin-bottom:16px}
.woocommerce .cart_totals table.shop_table th{background:transparent;font-size:1rem;letter-spacing:0;text-transform:none;color:var(--muted);font-weight:700}
.woocommerce .cart_totals .order-total th,.woocommerce .cart_totals .order-total td{font-size:1.15rem;font-weight:900;color:var(--ink)}
.woocommerce .wc-proceed-to-checkout{padding:0;margin-top:20px}
.woocommerce .wc-proceed-to-checkout a.checkout-button{display:flex;width:100%}
.woocommerce .cart-empty,.woocommerce .return-to-shop{text-align:left}
.woocommerce .cart-empty{font-size:1.2rem;font-weight:900;text-transform:uppercase;margin-bottom:20px}
.cart-empty-card{
  background:var(--white);border:var(--hairline);border-radius:var(--radius-lg);
  padding:clamp(28px,3.4vw,44px);max-width:640px;
}
.cart-empty-card h2{font-size:clamp(1.3rem,2.4vw,1.8rem);margin:20px 0 12px}
.cart-empty-card p{color:var(--muted);max-width:44ch}

/* checkout */
.woocommerce form.checkout{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,56px);align-items:start}
.woocommerce form.checkout #customer_details{width:auto;float:none}
.woocommerce form.checkout .col2-set .col-1,
.woocommerce form.checkout .col2-set .col-2{width:auto;float:none;margin-bottom:24px}
.woocommerce form.checkout h3{font-size:1.15rem;margin-bottom:18px}
.woocommerce form.checkout .checkout-review{grid-column:2}
.woocommerce .woocommerce-billing-fields,
.woocommerce .woocommerce-shipping-fields,
.woocommerce .woocommerce-additional-fields{
  background:var(--white);border:var(--hairline);border-radius:var(--radius-lg);padding:clamp(22px,2.6vw,32px);margin-bottom:24px;
}
.woocommerce form .form-row{display:grid;gap:8px;margin:0 0 20px;padding:0}
.woocommerce form .form-row label{
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0;
}
.woocommerce form .form-row label.checkbox,.woocommerce form .form-row.woocommerce-validated label.checkbox{
  display:flex;gap:10px;align-items:center;text-transform:none;letter-spacing:0;font-size:.95rem;color:var(--ink);
}
.woocommerce form .form-row .required{color:var(--berry);text-decoration:none}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row select{
  width:100%;min-height:48px;padding:13px 16px;font:inherit;font-size:16px;color:var(--ink);
  background:var(--ivory);border:1.5px solid rgba(10,24,18,.18);border-radius:12px;
  transition:border-color var(--ease), background-color var(--ease);
}
.woocommerce form .form-row textarea{min-height:120px;resize:vertical}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{border-color:var(--green);background:var(--white);outline:none;box-shadow:var(--ring)}
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select{border-color:var(--berry)}
.woocommerce form .form-row-first,.woocommerce form .form-row-last{width:100%;float:none}
.woocommerce .col2-set,.woocommerce-page .col2-set{width:auto}
.woocommerce .select2-container .select2-selection--single{
  height:48px;border:1.5px solid rgba(10,24,18,.18);border-radius:12px;background:var(--ivory);
}
.woocommerce .select2-container .select2-selection--single .select2-selection__rendered{line-height:46px;padding-left:14px;color:var(--ink)}
.woocommerce .select2-container .select2-selection--single .select2-selection__arrow{height:46px}
.woocommerce .woocommerce-checkout-review-order{
  background:var(--cream);border:var(--hairline);border-radius:var(--radius-lg);padding:clamp(22px,2.6vw,32px);
  position:sticky;top:130px;
}
.woocommerce .woocommerce-checkout-review-order table.shop_table{background:transparent;border:0;margin-bottom:20px}
.woocommerce .woocommerce-checkout-review-order table.shop_table thead th{background:transparent;border-bottom:var(--hairline)}
.woocommerce .woocommerce-checkout-review-order table.shop_table th,
.woocommerce .woocommerce-checkout-review-order table.shop_table td{padding:14px 0}
.woocommerce .woocommerce-checkout-review-order table.shop_table tfoot .order-total th,
.woocommerce .woocommerce-checkout-review-order table.shop_table tfoot .order-total td{font-size:1.15rem;font-weight:900;color:var(--ink)}
.woocommerce #payment,.woocommerce-checkout #payment{background:transparent;border-radius:0}
.woocommerce #payment ul.payment_methods{padding:0;margin:0 0 20px;border:0;display:grid;gap:10px}
.woocommerce #payment ul.payment_methods li{
  background:var(--white);border:1.5px solid rgba(10,24,18,.14);border-radius:var(--radius);padding:16px 18px;list-style:none;
}
.woocommerce #payment ul.payment_methods li input[type="radio"]{width:20px;height:20px;accent-color:var(--green);margin-right:10px}
.woocommerce #payment ul.payment_methods li label{font-weight:700;color:var(--ink);display:inline-flex;align-items:center;min-height:32px}
.woocommerce #payment div.payment_box{
  background:var(--cream);color:var(--muted);border-radius:12px;margin:12px 0 0;padding:14px 16px;font-size:.95rem;
}
.woocommerce #payment div.payment_box::before{display:none}
.woocommerce #payment .form-row.place-order{padding:0;margin:0}
.woocommerce #payment #place_order{width:100%}
/* Above the payment methods (printed by the Richie's Studio plugin). */
.rs-checkout-note{margin:0 0 16px;font-size:.9rem;line-height:1.5;color:var(--muted)}
.woocommerce-terms-and-conditions-wrapper{margin-bottom:16px}
.woocommerce-privacy-policy-text p{font-size:.9rem;color:var(--muted)}

/* WooCommerce clears its floats with ::before and ::after boxes. Inside a grid
   or flex container those become stray cells, so they are switched off on the
   containers this theme lays out itself. */
.woocommerce ul.products::before,.woocommerce ul.products::after,
.woocommerce ul.order_details::before,.woocommerce ul.order_details::after,
.woocommerce form.checkout::before,.woocommerce form.checkout::after,
.woocommerce .col2-set::before,.woocommerce .col2-set::after,
.woocommerce .cart-collaterals::before,.woocommerce .cart-collaterals::after,
.woocommerce-account .woocommerce::before,.woocommerce-account .woocommerce::after,
.woocommerce-account .u-columns::before,.woocommerce-account .u-columns::after{display:none}

/* order received and order details */
.woocommerce .woocommerce-order{display:grid;gap:28px}
.woocommerce .woocommerce-thankyou-order-received{
  font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:900;text-transform:uppercase;line-height:1.15;color:var(--ink);
  background:var(--cream);border:var(--hairline);border-radius:var(--radius-lg);padding:clamp(22px,2.6vw,32px);margin:0;
}
.woocommerce ul.order_details{
  list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
}
.woocommerce ul.order_details li{
  background:var(--white);border:var(--hairline);border-radius:var(--radius);padding:18px 20px;margin:0;float:none;
  border-right:var(--hairline);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.woocommerce ul.order_details li strong{display:block;margin-top:8px;font-size:1.1rem;letter-spacing:0;text-transform:none;color:var(--ink)}
.woocommerce .woocommerce-order-details,.woocommerce .woocommerce-customer-details{margin:0}
.woocommerce .woocommerce-column__title,.woocommerce .woocommerce-order-details__title{font-size:1.15rem;margin-bottom:16px}
.woocommerce .woocommerce-customer-details address{
  border:var(--hairline);border-radius:var(--radius);padding:20px;background:var(--white);font-style:normal;color:var(--muted);
}

/* my account. The two column layout only applies once the account navigation
   is on the page: logged out, the same wrapper holds just the login form. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation){
  display:grid;grid-template-columns:260px 1fr;gap:clamp(24px,3vw,44px);align-items:start;
}
.woocommerce-account .woocommerce>h2{font-size:1.15rem;margin-bottom:16px}
.woocommerce-account form.woocommerce-form-login,
.woocommerce-account form.woocommerce-form-register,
.woocommerce-account form.woocommerce-ResetPassword{max-width:520px}
.woocommerce-account .woocommerce-MyAccount-navigation{width:auto;float:none}
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:flex;align-items:center;min-height:48px;padding:0 18px;border-radius:999px;
  font-weight:700;color:var(--ink);text-decoration:none;transition:background-color var(--ease),color var(--ease);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{background:rgba(18,57,44,.08);color:var(--green)}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{background:var(--green);color:var(--ivory)}
.woocommerce-account .woocommerce-MyAccount-content{width:auto;float:none;color:var(--muted)}
.woocommerce-account .woocommerce-MyAccount-content p{color:var(--muted)}
.woocommerce-account .woocommerce-MyAccount-content mark{background:transparent;color:var(--ink);font-weight:700}
.woocommerce form.login,.woocommerce form.register,.woocommerce form.lost_reset_password,
.woocommerce-account form.woocommerce-form-login,.woocommerce-account form.woocommerce-form-register{
  border:var(--hairline);border-radius:var(--radius-lg);padding:clamp(22px,2.6vw,32px);background:var(--white);margin:0 0 24px;
}
.woocommerce-account .u-columns.col2-set{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,44px)}
.woocommerce-account .u-columns.col2-set .col-1,.woocommerce-account .u-columns.col2-set .col-2{width:auto;float:none}
.woocommerce form .form-row label.woocommerce-form__label-for-checkbox{text-transform:none;letter-spacing:0;color:var(--ink)}
.woocommerce-form-login__rememberme{display:inline-flex;gap:10px;align-items:center}
.woocommerce .woocommerce-LostPassword{margin-top:14px;font-size:.95rem}

/* WooCommerce blocks fallback, in case a block cart or checkout is used */
.wc-block-components-button,.wp-block-woocommerce-cart .wc-block-components-button{
  border-radius:999px !important;background:var(--green);color:var(--white);min-height:48px;font-weight:700;
}
.wc-block-components-title,.wc-block-cart__submit-container{color:var(--ink)}

/* ---------- responsive: desktop and tablet ---------- */
@media (max-width:1280px){
  .site-nav a{padding:0 12px;font-size:14px}
  .made__grid{grid-template-columns:minmax(0,34fr) minmax(0,66fr)}
  .made__hand{grid-column:2;justify-self:end;margin-top:-8px}
}
@media (max-width:1180px){
  .site-nav ul{gap:0}
  .site-nav a{padding:0 10px}
  .header-cta .btn{padding:0 20px}
  .why__grid{grid-template-columns:1fr}
  .flow__grid{grid-template-columns:1fr}
  .flow__media{max-width:560px}
  /* Tablets: the mission and the closing side by side, the handwriting (and the
     closing photo) on a row of its own under them. Two class selectors so these
     beat the desktop rules above. */
  .mission-band .mission-band__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .mission-band .mission-band__hand{grid-column:1 / -1;grid-row:2;flex-direction:row;align-items:center;justify-content:center;gap:clamp(20px,4vw,48px);border-left:0;border-top:1px solid rgba(245,240,231,.26);margin-top:32px;padding:32px 0 0}
  .mission-band .mission-band__photo{max-width:340px;margin-top:0}
}
@media (max-width:1024px){
  .site-nav{display:none}
  .header-cta{display:none}
  .header-actions{margin-left:auto}
  .nav-toggle{display:inline-flex}
  .site-header__bar{min-height:76px}
  .brand__mark{width:20px;height:20px}
  .brand__mark svg{width:20px;height:20px}
  .brand__name{font-size:27px}
  .brand__tag{font-size:8.5px;margin-top:5px}
  .grid--4,.stat-row,.trust-row{grid-template-columns:repeat(2,1fr)}
  .hero__grid,.split,.closing__grid,.page-hero__grid,.faq-page__grid,.partner-band__grid{grid-template-columns:1fr}
  .home-hero__grid{grid-template-columns:1fr}
  .home-hero__copy{max-width:640px}
  .made__grid{grid-template-columns:1fr}
  .made__hand{grid-column:auto;justify-self:end;margin-top:-4px}
  .split--reverse .split__media{order:0}
  .journal-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr 1fr}
  .faq-aside{position:static}
  .woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:repeat(2,1fr)}
  .woocommerce form.checkout{grid-template-columns:1fr}
  .woocommerce form.checkout .checkout-review{grid-column:1}
  .woocommerce .woocommerce-checkout-review-order{position:static}
  .woocommerce div.product{grid-template-columns:1fr}
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation){grid-template-columns:1fr}
  .woocommerce ul.order_details{grid-template-columns:repeat(2,1fr)}
  .hero__media .frame img{aspect-ratio:3/2}
  .hero__pouch{right:10px;bottom:-26px;width:min(30%,170px)}
  .footer__bar{flex-wrap:wrap}
  .footer__nav{order:3;width:100%;margin:0}
}
@media (max-width:820px){
  body{font-size:16px}
  .grid--2,.grid--3,.steps,.plan-grid,.journal-grid{grid-template-columns:1fr}
  .woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:1fr}
  .woocommerce-account .u-columns.col2-set{grid-template-columns:1fr}
  .article__body{font-size:1.02rem}
}
@media (max-width:768px){
  /* WooCommerce's responsive tables put the column name on the left and the
     value on the right. Block images ignore text-align, so nudge them over. */
  .woocommerce table.shop_table_responsive td.product-thumbnail img,
  .woocommerce table.shop_table_responsive dl.variation img{margin-left:auto}
  .woocommerce table.shop_table_responsive dl.variation{justify-items:end}
}
@media (max-width:560px){
  html{scroll-padding-top:96px}
  .grid--4,.stat-row,.trust-row{grid-template-columns:1fr}
  .btn{width:100%}
  .btn-row .btn{width:auto;flex:1 1 220px}
  .frame img{aspect-ratio:4/5}
  .hero__media .frame img{aspect-ratio:4/5}
  .woocommerce ul.order_details{grid-template-columns:1fr}
  .woocommerce table.shop_table td.actions .coupon .input-text{width:100%}
  .woocommerce table.shop_table td.actions .coupon{display:grid}
  .pack-stage{padding:22px 14px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .ticker__track{animation:none}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important}
}

/* ---------- WordPress specifics ---------- */
body.admin-bar .site-header{top:32px}
@media (max-width:782px){body.admin-bar .site-header{top:46px}}
/* WooCommerce store notice (used while payments are in test mode): a fixed green strip above
   everything, with the page and the sticky header pushed down by its height. No dismiss link,
   so the space it takes never goes stale. */
p.woocommerce-store-notice,p.demo_store{
  position:fixed;top:0;left:0;right:0;z-index:99;margin:0;box-sizing:border-box;
  height:var(--notice-h);display:flex;align-items:center;justify-content:center;padding:0 16px;
  background:var(--green-deep);color:var(--ivory);font-size:13px;font-weight:700;line-height:1.35;text-align:center;box-shadow:none
}
.woocommerce-store-notice__dismiss-link{display:none}
body.woocommerce-demo-store{--notice-h:38px;padding-top:var(--notice-h)}
body.woocommerce-demo-store .site-header{top:var(--notice-h)}
body.woocommerce-demo-store.admin-bar p.demo_store{top:32px}
body.woocommerce-demo-store.admin-bar .site-header{top:calc(32px + var(--notice-h))}
@media (max-width:600px){body.woocommerce-demo-store{--notice-h:52px}p.woocommerce-store-notice,p.demo_store{font-size:12px}}
.wp-block-image img{max-width:100%;height:auto}
.alignleft{float:left;margin:0 24px 16px 0}
.alignright{float:right;margin:0 0 16px 24px}
.aligncenter{margin-inline:auto}
.wp-caption-text,figcaption{font-size:.9rem;color:var(--muted)}

/* ==========================================================================
   Phones: 782 px and below (the 1024 px block above also styles the overlay)
   Every rule below sits inside a max-width query. The target is a 390 px
   phone: photo led, tight, app like.
   ========================================================================== */

/* Phone only pieces. These base rules keep them out of the desktop layout. */
.hero__lead-short{display:none}
.buy-bar{display:none}

/* ---------- overlay menu (shown at 1024 px and below) ---------- */
@media (max-width:1024px){
  .mobile-menu{padding:10px 16px calc(20px + env(safe-area-inset-bottom))}
  .mobile-menu__top{min-height:60px}
  .mobile-menu__close{min-width:44px;min-height:44px;padding:0 18px}
  .mobile-menu > nav{margin-top:16px}
  .mobile-menu__links{margin:0;gap:0}
  .mobile-menu__links a{font-size:1.6rem;line-height:1.15;padding:16px 2px}
  .mobile-menu__actions{display:grid;gap:10px;margin-top:auto;padding-top:24px}
  .mobile-menu .mobile-menu__actions .btn{width:100%;margin:0;min-height:52px}
  .mobile-menu__basket svg{width:20px;height:20px}
  /* Logged in, the admin bar sits over the top of the overlay. */
  body.admin-bar .mobile-menu{padding-top:calc(10px + var(--wp-admin--admin-bar--height, 0px))}
}

@media (max-width:782px){
  :root{--pad-x:16px;--section-y:clamp(48px,12vw,72px)}

  /* ---------- type and rhythm ---------- */
  body{font-size:16px;line-height:1.55}
  h1{font-size:clamp(2.1rem,9vw,2.6rem);line-height:1.02;margin-bottom:12px}
  h2{font-size:clamp(1.75rem,7vw,2.25rem);line-height:1.04;margin-bottom:12px}
  h3{font-size:1.05rem}
  p{margin-bottom:1em}
  .lead{font-size:16px;line-height:1.55}
  .prose p{font-size:16px}
  .eyebrow,.prose .eyebrow{font-size:11px;gap:10px;margin:0 0 12px}
  .eyebrow::before{width:18px}
  .eyebrow--both::before,.eyebrow--both::after{width:22px}
  .section--tight{padding-block:clamp(36px,9vw,52px)}
  .section-head{margin-bottom:24px}
  .btn-row{margin-top:24px;gap:10px}
  .btn{padding:14px 22px;font-size:15px}
  .smallprint{font-size:.82rem;margin-top:14px}
  .hand{font-size:1.6rem}
  .ring{width:56px;height:56px}
  .ring svg{width:26px;height:26px}

  /* ---------- ticker and header ---------- */
  .ticker__track{padding:8px 0;font-size:11px}
  .ticker__item{padding:0 18px}
  .site-header__bar{min-height:64px;padding-block:6px;gap:12px}
  .brand__mark{width:16px;height:16px;margin-bottom:2px}
  .brand__mark svg{width:16px;height:16px}
  .brand__name{font-size:22px}
  .brand__tag{font-size:7.5px;letter-spacing:.18em;margin-top:4px}
  .header-actions{gap:6px;flex-wrap:nowrap}
  .basket-link,.nav-toggle{height:44px;min-height:44px;white-space:nowrap;flex:0 0 auto}
  .basket-link{width:44px}
  .basket-link__icon svg{width:26px;height:26px}
  .nav-toggle{padding:0 16px}

  /* ---------- home hero: headline, lead, the scene, then the button ---------- */
  .home-hero{padding-block:14px var(--section-y)}
  .home-hero__grid{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .home-hero__copy{display:contents}
  .home-hero__copy>.eyebrow{order:1}
  .home-hero__copy>h1{order:2;margin-bottom:12px}
  .home-hero h1{font-size:clamp(2.35rem,10.4vw,2.8rem)}
  .home-hero__lead{order:3;margin:0 0 20px;font-size:16px}
  .home-hero__visual{order:4;margin:0 0 22px}
  .home-hero__actions{order:5;margin-top:0}
  .home-hero__actions .btn{width:100%}
  .trust-line{order:6;margin-top:20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px}
  .trust-line li{flex-direction:column;align-items:flex-start;gap:6px;font-size:10px;letter-spacing:.04em}
  .trust-line .icon{width:26px;height:26px}
  .trust-line .flag{width:28px;height:18px;margin:4px 0 4px}
  .scene{border-radius:20px}
  .hero-visual__hand{font-size:1.35rem;top:4%;right:4%}

  /* ---------- pillars as rows: ring left, copy right, hairlines ---------- */
  .pillars-band{padding-block:28px}
  .pillars{grid-template-columns:1fr}
  .pillar{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:16px;align-items:center;text-align:left;padding:16px 0}
  .pillar + .pillar{border-left:0;border-top:1px solid rgba(245,240,231,.22)}
  .pillar .ring{grid-row:1 / span 2;margin:0}
  .pillar .ring svg{width:28px;height:28px}
  .pillar h3{margin:0 0 4px;font-size:1rem;align-self:end}
  .pillar p{max-width:none;font-size:.95rem;align-self:start}

  /* ---------- home sections ---------- */
  .home-section{padding-block:clamp(44px,11vw,60px)}
  .why__grid{gap:28px}
  .why__copy p{font-size:16px}
  .rule{width:44px;margin-bottom:16px}
  .why-benefits{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px}
  .why-benefit{padding:0 10px}
  .why-benefit:nth-child(odd){border-left:0}
  .why-benefit .ring{width:64px;height:64px;margin-bottom:12px}
  .why-benefit .ring svg{width:30px;height:30px}
  .why-benefit h3{font-size:.78rem}
  .why-benefit p{font-size:.9rem}

  .made__grid{gap:24px}
  .made__sub{font-size:1.02rem}
  .made__text{font-size:16px}
  .formats{gap:8px;padding:16px 10px 18px}
  .format__media{margin-bottom:8px}
  .format__sachets .sachet{width:32px}
  .format h3{font-size:.85rem}
  .format p{font-size:.8rem;line-height:1.35}
  .made__hand{justify-self:center;margin:0;font-size:1.5rem;transform:rotate(-5deg)}
  .made__hand .hand__text{display:flex;flex-wrap:wrap;justify-content:center;gap:0 .3em}
  .made__hand .hand__line{display:inline}

  .flow__grid{gap:28px}
  .flow__head{margin-bottom:22px;gap:6px}
  .flow{grid-template-columns:1fr;gap:0}
  .flow__step{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:center;text-align:left;padding:14px 0;border-top:var(--hairline)}
  .flow__step:first-child{border-top:0;padding-top:0}
  .flow__marks{grid-row:1 / span 2;margin:0;position:relative}
  .flow__num{position:absolute;left:-6px;top:-6px;z-index:1;width:28px;height:28px;font-size:11px}
  .flow__line{display:none}
  .flow__icon{width:58px;height:58px}
  .flow__icon svg{width:26px;height:26px}
  .flow__step h3{margin:0 0 3px;align-self:end}
  .flow__step p{max-width:none;align-self:start;font-size:.95rem}
  .flow__arrow{display:none}
  .pour-visual__hand{left:2%;top:0;font-size:1.35rem}

  .mission-band{padding-block:44px}
  .mission-band .mission-band__grid{grid-template-columns:1fr}
  .mission-band .mission-band__col{padding:0}
  .mission-band .mission-band__col + .mission-band__col{border-left:0;border-top:1px solid rgba(245,240,231,.26);padding-top:28px;margin-top:28px}
  .mission-band .mission-band__hand{grid-column:auto;grid-row:auto;flex-direction:column;gap:0}
  .mission-band .mission-band__photo{max-width:none;margin-top:20px}
  .mission-band .hand--large{font-size:2.1rem}
  .mission-band h2.display{font-size:clamp(2rem,9vw,2.4rem)}
  .mission-band .btn-row .btn{width:100%}

  /* ---------- inner page heroes ---------- */
  .page-hero{padding-block:12px 28px}
  .page-hero__grid{gap:20px}
  .page-hero .lead{margin-bottom:0}

  /* ---------- the sales page hero: headline, photo, then the actions ---------- */
  .hero{padding-block:12px var(--section-y)}
  .hero__grid{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .hero__copy{display:contents}
  .hero__copy>.eyebrow{order:1}
  .hero__copy>h1{order:2;margin-bottom:10px}
  .hero__lead{display:none}
  .hero__lead-short{display:block;order:3;margin:0 0 16px}
  .hero__media{order:4;margin:0 0 44px}
  .hero__copy>.btn-row{order:5;margin-top:0}
  .hero__note{order:6;margin-top:18px}
  .hero__media.reveal{opacity:1;transform:none;transition:none}
  .hero__media .frame img{aspect-ratio:4/5;border-radius:20px}
  .hero__pouch{right:12px;bottom:-30px;width:34%;max-width:150px}

  /* ---------- photos: square or 4:3, photo first in every split ---------- */
  .frame img{aspect-ratio:1/1;border-radius:20px}
  .frame--wide img{aspect-ratio:4/3}
  .frame__caption{font-size:20px;line-height:1.25;padding:10px 4px 0}
  .split,.closing__grid,.partner-band__grid{gap:24px}
  .split>.split__media,.closing__grid>.closing__media{order:-1}

  /* ---------- the figures: a compact 2 by 2 grid ---------- */
  .stat-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stat{padding:16px;gap:6px;border-radius:16px}
  .stat .icon-circle{width:36px;height:36px;margin-bottom:4px}
  .stat .icon-circle svg{width:18px;height:18px}
  .stat__value{font-size:1.75rem}
  .stat__label{font-size:.85rem;line-height:1.35}

  /* ---------- card rows: 2 columns, 1 below 420 px (see the end of this file) ---------- */
  .grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}

  /* ---------- benefits as rows: icon left, copy right, dividers ---------- */
  .benefit-grid{grid-template-columns:1fr;gap:0}
  .benefit{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;align-items:start;padding:16px 0;background:none;border:0;border-top:var(--hairline);border-radius:0}
  .benefit:first-child{border-top:0;padding-top:0}
  .benefit .icon-circle{grid-row:1 / span 2;width:44px;height:44px}
  .benefit .icon-circle svg{width:20px;height:20px}
  .benefit h3{margin:0 0 4px;font-size:1rem;letter-spacing:.03em}
  .benefit p{margin:0;font-size:.95rem;line-height:1.5}

  /* ---------- promises and trust rows ---------- */
  .trust-row{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;row-gap:0}
  .trust{gap:16px;padding:16px 0;border-top:var(--hairline)}
  .trust:nth-child(-n+2){border-top:0;padding-top:0}
  .trust .icon-circle{width:44px;height:44px}
  .trust .icon-circle svg{width:20px;height:20px}
  .trust h3{font-size:.95rem;margin-bottom:4px}
  .trust p{font-size:.9rem;line-height:1.45}

  /* ---------- feature rows, steps and ingredients ---------- */
  .feature-row{gap:16px;padding:16px 0}
  .feature-row .icon-circle{width:44px;height:44px}
  .feature-row .icon-circle svg{width:20px;height:20px}
  .feature-row h3{font-size:1rem;margin-bottom:4px}
  .steps--stack .step{gap:14px;padding:18px 0}
  .steps--stack .step .icon-circle{width:44px;height:44px;margin-bottom:10px}
  .steps--stack .step .icon-circle svg{width:20px;height:20px}
  .steps--stack .step h3{font-size:1.05rem;margin-bottom:6px}
  .ingredients li{gap:16px;padding:16px 0}
  .ingredients h3{font-size:1rem}

  /* ---------- the pack stage ---------- */
  .pack-stage{padding:22px 14px 16px;border-radius:20px}
  .pack-stage--1 .pack{--pack-w:200px}
  .pack-stage--2 .pack{--pack-w:46%}
  .pack-stage__caption{margin-top:12px}

  /* ---------- plans: monthly first, bullets 15 px, full width buttons ---------- */
  .plan-grid{grid-template-columns:1fr;gap:16px}
  .plan-card{padding:22px 20px 20px;border-radius:20px}
  .plan-card__badge{margin-bottom:14px}
  .plan-card h3{font-size:1.25rem;margin-bottom:8px}
  .plan-card__amount{font-size:2.4rem}
  .plan-card .ticks{margin:18px 0 22px;gap:10px}
  .plan-card .ticks li{font-size:15px}
  .plan-card .btn{width:100%;min-height:52px}
  .plan-grid__note{margin-top:18px}

  /* ---------- quote, tables, FAQ ---------- */
  .quote{margin:24px 0;padding-top:20px}
  .quote__mark{width:28px;height:28px;margin-bottom:8px}
  .quote blockquote p{font-size:1.1rem}
  table.feed th,table.feed td{padding:10px 4px;font-size:.95rem}
  .faq summary{padding:18px 0;font-size:1rem;gap:14px}
  .faq summary .icon-circle{width:36px;height:36px}
  .faq__answer{padding-bottom:18px}
  .faq-group h2{font-size:1.15rem}
  .faq-aside .frame img{aspect-ratio:4/3}

  /* ---------- feeding guide: the back of the pack, one column ---------- */
  .pack-back__grid,.pack-back__col{grid-template-columns:1fr;gap:12px}
  .pack-card{padding:18px 16px}
  .band--dark .pack-card p{font-size:.97rem}
  .pack-table tbody th,.pack-table td{padding:10px 4px}
  .pack-table__size{gap:8px}
  .pack-table__dog{width:34px;height:30px}
  .inside-link{padding-top:16px}
  .choice-card__note{font-size:.82rem}

  /* ---------- shop: tin explainer and pack cards ---------- */
  .tin-explainer{gap:14px;padding:16px;border-radius:16px}
  .tin-explainer__icon{width:44px;height:44px}
  .tin-explainer__icon svg{width:26px;height:26px}
  .tin-explainer__text{font-size:.95rem}
  .choice-grid{grid-template-columns:1fr;gap:16px}
  .choice-card{padding:18px 18px 20px;border-radius:20px}
  .choice-card__media{margin-bottom:12px}
  .choice-card h3{font-size:1.25rem}
  .choice-card__actions .btn{min-height:52px}
  .promise-card{padding:28px 20px}

  /* ---------- contact and retailers ---------- */
  .contact-grid{grid-template-columns:1fr;gap:14px}
  .contact-card{padding:22px 20px;border-radius:20px}
  .routes{grid-template-columns:1fr;gap:12px}
  .routes__or{justify-self:center;width:52px;height:52px;font-size:1.25rem}
  .route{padding:24px 18px;border-radius:20px}
  .route__media{height:200px;margin-bottom:18px}
  .route .pack{--pack-w:140px}
  .tailored__formats .ring{width:60px;height:60px}

  /* ---------- journal ---------- */
  .journal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .journal-card{border-radius:20px}
  .journal-card__media img,.journal-card__fallback{aspect-ratio:16/10}
  .journal-card__body{padding:16px 16px 18px}
  .journal-card h3{font-size:1.15rem;margin:8px 0}
  .journal-card p:not(.post-meta){font-size:.95rem;line-height:1.5;margin-bottom:14px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
  .post-meta,.journal-card .post-meta{font-size:11px;margin:0}

  /* ---------- single journal entry: full width measure, 16:10 photo ---------- */
  .article,.article__head,.article__footer{max-width:none}
  .article__head h1{font-size:clamp(2rem,8.6vw,2.5rem);margin:12px 0}
  .article__media{margin:0 0 8px}
  .article__media img{aspect-ratio:16/10;border-radius:20px}
  .article__body{font-size:16px;line-height:1.6}
  .article__body h2{font-size:1.25rem;margin:32px 0 10px}
  .article__footer{margin-top:32px;padding-top:24px}

  /* ---------- personalise page ---------- */
  .richies-personalise .page-hero{padding-bottom:20px}
  .personalise-shell{min-height:0}

  /* The sticky buy bar, built by main.js once the customiser form is valid. */
  .buy-bar{position:fixed;left:0;right:0;bottom:0;z-index:95;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--white);border-top:var(--hairline);box-shadow:0 -10px 30px -22px rgba(10,24,18,.4)}
  .buy-bar__summary{display:grid;gap:1px;min-width:0}
  .buy-bar__plan{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .buy-bar__price{font-size:1.05rem;font-weight:900;color:var(--green);white-space:nowrap}
  .buy-bar__button{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 22px;border:0;border-radius:999px;background:var(--green);color:var(--white);font:inherit;font-size:15px;font-weight:700;cursor:pointer;transition:background-color var(--ease)}
  .buy-bar__button:hover{background:var(--green-deep)}
  .buy-bar__button[disabled]{opacity:.7;cursor:progress}
  body.has-buy-bar{padding-bottom:calc(70px + env(safe-area-inset-bottom))}

  /* ---------- WooCommerce: notices, product grid ---------- */
  .woocommerce .woocommerce-message,.woocommerce .woocommerce-info,.woocommerce .woocommerce-error,
  .woocommerce-page .woocommerce-message,.woocommerce-page .woocommerce-info,.woocommerce-page .woocommerce-error{padding:14px 16px;margin-bottom:20px;font-size:.95rem}
  .woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:1rem}
  .woocommerce ul.products li.product .button{width:100%}

  /* ---------- basket: stacked rows, label thumbnail on the left ---------- */
  .woocommerce table.shop_table.cart{border-radius:20px}
  .woocommerce table.shop_table.cart thead{display:none}
  .woocommerce table.shop_table.cart tbody tr.cart_item{display:grid;grid-template-columns:56px minmax(0,1fr) auto;column-gap:14px;row-gap:4px;align-items:start;padding:16px;border-top:var(--hairline)}
  .woocommerce table.shop_table.cart tbody tr.cart_item:first-child{border-top:0}
  .woocommerce table.shop_table.cart tbody tr.cart_item td{display:block;padding:0;border:0;text-align:left !important;background:transparent !important}
  .woocommerce table.shop_table.cart tbody tr.cart_item td::before{content:none !important;display:none !important}
  .woocommerce table.shop_table.cart td.product-thumbnail{display:block !important;grid-column:1;grid-row:1 / span 3}
  .woocommerce table.shop_table.cart td.product-thumbnail img{width:56px !important;max-width:56px;margin:0;border-radius:10px}
  .woocommerce table.shop_table.cart td.product-name{grid-column:2;grid-row:1;font-size:.95rem;line-height:1.35}
  .woocommerce table.shop_table.cart td.product-remove{grid-column:3;grid-row:1;justify-self:end}
  .woocommerce table.shop_table.cart td.product-price{grid-column:2;grid-row:2;font-size:.9rem;color:var(--muted)}
  .woocommerce table.shop_table.cart td.product-quantity{grid-column:2;grid-row:3;margin-top:6px}
  .woocommerce table.shop_table.cart tbody tr.cart_item td.product-subtotal{grid-column:3;grid-row:3;align-self:end;justify-self:end;font-weight:900;text-align:right !important}
  .woocommerce table.shop_table.cart dl.variation{justify-items:start;margin-top:6px}
  .woocommerce table.shop_table dl.variation{grid-template-columns:auto minmax(0,1fr);column-gap:6px;row-gap:2px}
  .woocommerce table.shop_table dl.variation dd{margin:0}
  .woocommerce table.shop_table.cart dl.variation .variation-Label{display:none}
  .woocommerce table.shop_table.cart .quantity .qty{width:72px;min-height:44px}
  .woocommerce table.shop_table.cart td.actions{display:block;padding:16px;text-align:left !important}
  .woocommerce table.shop_table.cart td.actions::before{content:none !important}
  .woocommerce table.shop_table td.actions .coupon{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin-bottom:12px}
  .woocommerce table.shop_table td.actions .coupon .input-text{width:100%}
  .woocommerce table.shop_table td.actions .coupon .button{width:auto;white-space:nowrap;padding:0 18px}
  .woocommerce table.shop_table td.actions .coupon::before,.woocommerce table.shop_table td.actions .coupon::after{content:none;display:none}
  .woocommerce table.shop_table.cart td.actions>.button{width:100%}
  .woocommerce .cart-collaterals .cart_totals table.shop_table td{text-align:right !important}
  .woocommerce .wc-proceed-to-checkout a.checkout-button{min-height:56px;font-size:16px}

  /* ---------- checkout: full width fields, readable review, big button ---------- */
  .woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select,
  .woocommerce-page form .form-row input.input-text,.woocommerce-page form .form-row select{font-size:16px}
  .woocommerce .select2-container .select2-selection--single .select2-selection__rendered{font-size:16px}
  .woocommerce .woocommerce-billing-fields,.woocommerce .woocommerce-shipping-fields,.woocommerce .woocommerce-additional-fields{padding:20px 16px;border-radius:20px}
  .woocommerce .woocommerce-checkout-review-order{padding:20px 16px;border-radius:20px}
  .woocommerce .woocommerce-checkout-review-order table.shop_table td.product-name{overflow-wrap:anywhere;padding-right:12px}
  .woocommerce .woocommerce-checkout-review-order table.shop_table dl.variation img{width:56px !important;height:auto !important}
  .woocommerce .woocommerce-checkout-review-order table.shop_table th.product-total,
  .woocommerce .woocommerce-checkout-review-order table.shop_table td.product-total,
  .woocommerce .woocommerce-checkout-review-order table.shop_table tfoot td{text-align:right}
  .woocommerce #payment ul.payment_methods li{padding:14px 16px}
  .woocommerce #payment #place_order{width:100%;min-height:56px;font-size:16px}

  /* ---------- footer: lockup, links in two columns, socials, trade link ---------- */
  .site-footer{padding-block:32px calc(20px + env(safe-area-inset-bottom))}
  .footer__bar{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:20px 16px}
  .footer__bar .brand{grid-column:1;grid-row:1}
  .footer__social{grid-column:2;grid-row:1;justify-self:end}
  .footer__nav{grid-column:1 / -1;order:0;width:auto}
  .footer__nav ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
  .footer__trade{grid-column:1 / -1;justify-self:start;padding:14px 0 0;border-left:0;border-top:var(--hairline);width:100%;min-height:0}
  .footer__trade br{display:none}
  .footer__bottom{flex-direction:column;align-items:flex-start;gap:2px;margin-top:20px}
}

/* A slower ticker on phones, unless motion is reduced (then it does not move). */
@media (max-width:782px) and (prefers-reduced-motion:no-preference){
  .ticker__track{animation-duration:60s}
}

/* WordPress lets the admin bar scroll away below 600 px, so the sticky header
   must not keep a gap for it. */
@media (max-width:600px){
  body.admin-bar .site-header{top:0}
}

@media (max-width:560px){
  .trust-row{grid-template-columns:1fr}
  .trust:nth-child(2){border-top:var(--hairline);padding-top:16px}
  .journal-grid{grid-template-columns:1fr}
}

/* Cards with long copy and a button drop to one column on the smallest phones. */
@media (max-width:419px){
  .grid--3,.grid--4{grid-template-columns:1fr}
  .woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:1fr}
  .trust-line li{font-size:9.5px}
}

/* Shop page hero: the landscape collection photo keeps its 3:2 shape at every width. */
.hero__media .frame.frame--wide img{aspect-ratio:3/2}

/* Feeding guide: the back of the 300 g bag beside the cards (stacked above them below 1100px). */
.pack-back__layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,9fr);gap:clamp(20px,2.6vw,36px);max-width:1240px;margin-inline:auto;align-items:start}
.pack-back__layout .pack-back__grid{max-width:none;margin:0}
.pack-back__pack{position:sticky;top:130px;margin:0;padding:clamp(18px,2vw,28px);background:var(--pouch);border-radius:var(--radius-sm);text-align:center}
.pack-back__pack img{display:block;width:100%;max-width:380px;height:auto;margin-inline:auto}
.pack-back__pack figcaption{margin-top:14px;font-size:.9rem;color:var(--muted)}
.pack-back__pack figcaption a{color:var(--green-deep);font-weight:700;text-underline-offset:3px}
@media (max-width:1100px){
  .pack-back__layout{grid-template-columns:1fr}
  .pack-back__pack{position:static;max-width:460px;width:100%;margin-inline:auto}
  .pack-back__pack img{max-width:300px}
}

/* Bag card carousel: front then back of the 300 g bag, one slide wide, swiped or stepped. */
.pack-carousel{margin-bottom:16px}
.pack-carousel__view{position:relative;margin-bottom:0}
.pack-carousel__track{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain}
.pack-carousel__track::-webkit-scrollbar{display:none}
.pack-carousel__track:focus-visible{outline:2px solid var(--green-deep);outline-offset:2px}
.pack-carousel__slide{flex:0 0 100%;height:100%;overflow:hidden;scroll-snap-align:start}
.pack-carousel__zoom{display:block;height:100%;cursor:zoom-in}
.pack-carousel__zoom:focus-visible{outline:2px solid var(--green-deep);outline-offset:-2px}
.pack-carousel__arrow{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:40px;height:40px;margin-top:-20px;padding:0;border:1.5px solid rgba(10,24,18,.14);border-radius:50%;background:var(--panel);color:var(--green-deep);cursor:pointer;transition:background-color .15s ease,opacity .15s ease}
.pack-carousel__arrow:hover{background:var(--pouch)}
.pack-carousel__arrow:focus-visible{outline:2px solid var(--green-deep);outline-offset:2px}
.pack-carousel__arrow[disabled]{opacity:0;pointer-events:none}
.pack-carousel__arrow--prev{left:4px}
.pack-carousel__arrow--prev svg{transform:rotate(180deg)}
.pack-carousel__arrow--next{right:4px}
.pack-carousel__arrow svg{width:18px;height:18px}
.pack-carousel__sides{display:flex;justify-content:center;gap:6px;margin-top:10px}
.pack-carousel__side{min-height:32px;padding:4px 14px;border:1.5px solid rgba(10,24,18,.14);border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.pack-carousel__side[aria-pressed="true"]{background:var(--green-deep);border-color:var(--green-deep);color:var(--ivory)}
.pack-carousel__side:focus-visible{outline:2px solid var(--green-deep);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.pack-carousel__track{scroll-behavior:auto}}
@media (max-width:782px){.pack-carousel__arrow{display:none}.pack-carousel{margin-bottom:12px}}