/*
Theme Name:   Glow by K&D
Theme URI:    https://glowbykd.com/
Author:       Key Vision
Author URI:   https://key-vision.co.uk/
Description:  The Glow by K&D shop — olive, ivory and rose gold, built around WooCommerce. The theme supplies the design; WooCommerce supplies the shop. Nothing here hard-codes a price or a basket.
Version:      1.11.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License:      Proprietary — commissioned work for Glow by K&D
Text Domain:  glow-by-kd
Tags:         e-commerce, custom-colors, custom-menu, translation-ready
*/

/* ------------------------------------------------------------------
   The design system, carried over unchanged from the approved build.
   Contrast was measured, not eyeballed: every colour pair here passes
   WCAG AA (4.5:1 body, 3:1 large text) against the ground it sits on.
   Rose gold is 2.9:1 on the mid olive, so it is used for rules, fills
   and the monogram, and for text only on the deep olive (5.09:1).
   Changing a value in :root changes it everywhere — please do that
   rather than overriding a colour further down.
------------------------------------------------------------------ */

:root{
  --olive:#666A5A; --olive-2:#585C4D; --olive-deep:#424639; --olive-black:#313527;
  --ivory:#EAE8DD; --ivory-2:#DCD9C9; --ivory-hi:#F7F5EE;
  --ink:#2F3329; --ink-2:#4A5142;
  --rose:#D1B89A;
  --rose-ink:#775A36;   /* rose gold darkened enough to read on ivory */
  --flash:#EE7F52; --flash-ink:#A8431F;
  --line:rgba(209,184,154,.34); --line-ink:rgba(47,51,41,.2);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;
  --gut:26px;
  --s1:8px; --s2:16px; --s3:26px; --s4:44px; --s5:72px; --s6:110px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--olive);color:var(--ivory-hi);font-family:var(--sans);font-weight:300;
  font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.wrap{width:min(1180px,100% - var(--gut)*2);margin-inline:auto}
.wrap-n{width:min(760px,100% - var(--gut)*2);margin-inline:auto}
@media(max-width:560px){:root{--gut:18px;--s5:52px;--s6:64px}}

h1,h2,h3,h4{font-family:var(--serif);font-weight:300;margin:0;text-wrap:balance;letter-spacing:.02em}
h1{font-size:clamp(34px,5.6vw,60px);line-height:1.08}
h2{font-size:clamp(26px,3.6vw,42px);line-height:1.14}
h3{font-size:clamp(19px,2.2vw,25px);line-height:1.25}
p{margin:0}
.lede{font-family:var(--serif);font-size:clamp(18px,2.1vw,23px);line-height:1.55}
.body{color:var(--ivory-hi);max-width:64ch}
.eyebrow{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--ivory-hi)}
.rule{height:1px;background:var(--line);border:0;margin:0}
.hair{width:56px;height:1px;background:var(--rose);border:0;margin:0}
.tnum{font-variant-numeric:tabular-nums}
.stars{color:var(--ivory-hi);letter-spacing:.3em;font-size:13px}
.note{font-size:13px;color:var(--ivory-hi);margin-top:14px}

.dark{background:var(--olive-deep)}
.dark .eyebrow{color:var(--rose)}
.dark .hair{background:var(--rose)}
.paper{background:var(--ivory);color:var(--ink)}
.paper .lede,.paper .body,.paper .note{color:var(--ink-2)}
.paper .eyebrow{color:var(--ink)}
.paper .hair,.paper .rule{background:var(--line-ink)}
.paper .btn{border-color:var(--ink);color:var(--ink)}
.paper .btn:hover{background:var(--ink);color:var(--ivory-hi)}
.paper .btn-solid{background:var(--ink);color:var(--ivory-hi)}
.paper .field{border-color:var(--line-ink);color:var(--ink)}
.paper .field::placeholder{color:rgba(47,51,41,.5)}
.paper .stars,.review .stars{color:var(--rose-ink)}
.nav{position:sticky;top:0;z-index:60;background:var(--olive-2);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:var(--s3);height:78px}
.brand{display:flex;align-items:center;gap:14px;margin-right:auto}
.brand img{height:46px;width:auto}
.brand .wm{font-family:var(--serif);font-size:20px;letter-spacing:.42em;padding-left:14px;
  border-left:1px solid var(--line);line-height:1}
.nav-links{display:flex;gap:var(--s3);align-items:center}
.nav-links a{font-size:12px;letter-spacing:.2em;text-transform:uppercase;padding:6px 0;
  border-bottom:1px solid transparent;transition:border-color .25s}
.nav-links a:hover,.nav-links a.on{border-bottom-color:var(--rose)}
.bag{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.bag .cnt{min-width:22px;height:22px;border:1px solid var(--rose);border-radius:50%;display:grid;
  place-items:center;font-size:11px;letter-spacing:0}
.burger{display:none;width:26px;height:16px;position:relative}
.burger i{position:absolute;left:0;right:0;height:1px;background:currentColor}
.burger i:nth-child(1){top:0}.burger i:nth-child(2){top:7px}.burger i:nth-child(3){top:14px}
@media(max-width:1040px){
  .nav-links{position:fixed;inset:78px 0 auto 0;background:var(--olive-2);flex-direction:column;
    align-items:flex-start;gap:0;padding:0 var(--gut);border-bottom:1px solid var(--line);display:none;
    max-height:calc(100vh - 78px);overflow-y:auto}
  .nav-links.open{display:flex}
  .nav-links a{width:100%;padding:15px 0;border-bottom:1px solid rgba(209,184,154,.18)}
  .burger{display:block}
  .brand .wm{display:none}
}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 30px;font-size:11px;
  letter-spacing:.24em;text-transform:uppercase;border:1px solid var(--ivory-hi);color:var(--ivory-hi);
  transition:.3s;text-align:center}
.btn:hover{background:var(--ivory-hi);color:var(--ink)}
.btn-solid{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}
.btn-solid:hover{background:var(--rose);border-color:var(--rose);color:var(--ink)}
.dark .btn-solid{background:var(--rose);border-color:var(--rose);color:var(--ink)}
.btn-wide{width:100%}
.btn-sm{padding:10px 20px;font-size:10px;letter-spacing:.2em}

.sec{padding-block:var(--s6)}
.sec-sm{padding-block:var(--s5)}
.sec-head{display:flex;flex-direction:column;gap:var(--s2);align-items:center;text-align:center;margin-bottom:var(--s5)}
.sec-head.left{align-items:flex-start;text-align:left}

.hero{padding-block:var(--s6) var(--s5);text-align:center;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;left:50%;top:42%;width:min(920px,130%);aspect-ratio:1;
  transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(234,232,221,.14),rgba(234,232,221,0) 64%);
  pointer-events:none}
.hero-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:var(--s3);
  animation:rise .9s ease-out both}
@keyframes rise{from{opacity:.35;transform:translateY(12px)}to{opacity:1;transform:none}}
.lockup{width:min(560px,90%)}
.hero .lede{max-width:46ch}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.hero-meta{display:flex;gap:var(--s3);flex-wrap:wrap;justify-content:center;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ivory-hi);margin-top:var(--s2)}

.promise{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-ink)}
.promise>div{background:var(--ivory);color:var(--ink);padding:var(--s4) var(--s3);text-align:center;
  display:flex;flex-direction:column;gap:10px}
.glow-values .gl{font-family:var(--serif);font-size:38px;line-height:1;color:var(--rose-ink);
  letter-spacing:.04em;margin-bottom:2px}
.glow-values div{gap:6px}
.promise .k{font-family:var(--serif);font-size:clamp(17px,1.7vw,21px);letter-spacing:.06em;text-wrap:balance}
.promise .v{font-size:13px;color:var(--ink-2);line-height:1.6}
@media(max-width:820px){.promise{grid-template-columns:repeat(2,1fr)}}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
@media(max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.grid{grid-template-columns:1fr}}
.card{display:flex;flex-direction:column;text-align:left;cursor:pointer}
.shot{position:relative;background:var(--ivory);aspect-ratio:1/1;overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.card:hover .shot img{transform:scale(1.04)}
.shot .tag{position:absolute;top:12px;left:12px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);border:1px solid var(--line-ink);padding:3px 9px;background:rgba(234,232,221,.92)}
.quick{position:absolute;left:0;right:0;bottom:0;background:rgba(47,51,41,.94);color:var(--ivory-hi);font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;padding:14px;text-align:center;transform:translateY(100%);
  transition:transform .35s}
.card:hover .quick,.card:focus-within .quick{transform:none}
.card-body{padding-top:16px;display:flex;flex-direction:column;gap:5px}
.card-brand{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ivory-hi)}
.card-name{font-family:var(--serif);font-size:21px;letter-spacing:.03em;line-height:1.25}
.card-foot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:4px}
.card-price{font-size:15px}
.card-size{font-size:12px}
.dark .card-brand,.dark .pdp-brand,.dark .step .n,.dark .co-h .n,.dark .dl dt,.dark .plan h3{color:var(--rose)}

.boxfeature{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);align-items:center;
  background:var(--olive-deep);padding:var(--s3)}
@media(max-width:900px){.boxfeature{grid-template-columns:1fr;gap:var(--s3)}}
.bf-img{position:relative;display:block;background:var(--ivory)}
.bf-img img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1}
.bf-img .tag{position:absolute;top:12px;left:12px;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);border:1px solid var(--line-ink);padding:3px 9px;
  background:rgba(234,232,221,.94)}
.bf-copy{display:flex;flex-direction:column;gap:12px}
.bf-copy h3{font-size:clamp(24px,3vw,34px)}
.bf-copy p{font-size:15.5px}
.bf-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px}
.bf-list li{padding-left:16px;position:relative}
.bf-list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--rose)}
.bf-foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:6px}
.box-next{border:1px dashed var(--line);padding:24px 28px;margin-top:var(--s3);
  display:flex;flex-direction:column;gap:10px;text-align:center;align-items:center}
.box-next h3{font-size:clamp(19px,2.2vw,24px)}
.box-next p{max-width:62ch}
.tabs{display:flex;justify-content:center;border:1px solid var(--line);width:max-content;margin-inline:auto}
.tabs button{padding:11px 26px;font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.tabs button.on{background:var(--rose);color:var(--ink);opacity:1}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:var(--s4);margin-top:var(--s4)}
@media(max-width:820px){.steps{grid-template-columns:1fr;gap:var(--s3)}}
.step{display:flex;flex-direction:column;gap:10px;padding-top:var(--s3);border-top:1px solid var(--line)}
.step .n{font-family:var(--serif);font-size:13px;letter-spacing:.3em;color:var(--ivory-hi)}
.step p{font-size:14.5px}
.step a{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ivory-hi);margin-top:4px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:var(--s4)}}
.split-copy{display:flex;flex-direction:column;gap:var(--s2);align-items:flex-start}
.figure img{width:100%;height:auto}

.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
@media(max-width:900px){.reviews{grid-template-columns:1fr}}
.review{background:var(--ivory);color:var(--ink);padding:var(--s3);display:flex;flex-direction:column;gap:12px}
.review .q{font-family:var(--serif);font-size:19px;line-height:1.45}
.review .who{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}

.field{background:transparent;border:1px solid var(--line);color:var(--ivory-hi);padding:13px 16px;
  font-family:var(--sans);font-weight:300;font-size:15px;min-width:0}
.field::placeholder{color:rgba(243,241,232,.55)}
.field:focus{border-color:var(--rose);outline:none}
.field-lab{display:flex;flex-direction:column;gap:7px;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.field-lab .field{width:100%}
.kt-list{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.kt-list span{border:1px solid var(--line);padding:6px 14px;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase}
.signup{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:var(--s3)}
.signup .field{flex:1 1 300px;max-width:380px}
.ok{border:1px solid var(--rose);padding:16px 18px;font-size:14px;display:none;margin-top:var(--s2)}
.ok.show{display:block}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:520px){.two{grid-template-columns:1fr}}

.toolbar{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;padding-block:var(--s3);
  border-block:1px solid var(--line);margin-bottom:var(--s4)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-right:auto}
.chip{padding:8px 18px;border:1px solid var(--line);font-size:11px;letter-spacing:.18em;text-transform:uppercase;transition:.25s}
.chip:hover{opacity:1;border-color:var(--rose)}
.chip.on{background:var(--rose);color:var(--ink);border-color:var(--rose);opacity:1}
.count{font-size:12px;letter-spacing:.12em}

/* ---------- product detail ---------- */
.pdp{display:grid;grid-template-columns:1.02fr .98fr;gap:var(--s5);align-items:start}
@media(max-width:900px){.pdp{grid-template-columns:1fr;gap:var(--s4)}}
.gal img{width:100%;background:var(--ivory)}
.pdp-info{display:flex;flex-direction:column;gap:var(--s2);align-items:flex-start}
.pdp-brand{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--ivory-hi)}
/* The shortlist is the thing a customer cannot get anywhere else, so the reason
   a product earned its place sits above the price, not behind an accordion. */
.why{border-left:2px solid var(--rose);background:var(--olive-deep);padding:16px 20px;
  display:flex;flex-direction:column;gap:9px;width:100%}
/* The label is rose only inside .why, which sits on the deep olive (5.09:1).
   The "What is in it" block reuses this label on the page's own mid olive,
   where rose is 2.92:1 — so the base colour is ivory and .why opts back in. */
.why-h{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ivory-hi)}
.why .why-h{color:var(--rose)}
.why p{font-size:15px;line-height:1.7}
.why-sig{font-family:var(--serif);font-size:16px;letter-spacing:.05em;color:var(--rose)}
.price-row{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
/* woo-ok: WooCommerce puts .price on the single product summary, and this is
   what that price is meant to look like. The shop loop does not use it — the
   card template calls get_price_html() into .card-price instead. */
.price{font-family:var(--serif);font-size:32px}
.qty{display:flex;align-items:center;border:1px solid var(--line)}
.qty button{width:44px;height:48px;font-size:18px}
.qty span{width:44px;text-align:center;font-size:15px}
.buy{display:flex;gap:12px;width:100%;flex-wrap:wrap}
.buy .btn{flex:1 1 200px}
.subopt{width:100%;border:1px solid var(--line);padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.subopt label{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:14px}
.subopt input{margin-top:5px;accent-color:var(--rose);flex:0 0 auto}
.subopt .sm{font-size:13px;display:block;line-height:1.55}
.acc{width:100%;border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-item>button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:17px 0;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;text-align:left}
.acc-panel p+p{margin-top:12px}
.acc-panel{display:none;padding-bottom:20px;font-size:14.5px;line-height:1.8}
.acc-item.open .acc-panel{display:block}
.acc-panel ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-ink);width:100%;margin-top:var(--s1)}
.facts div{background:var(--ivory);color:var(--ink);padding:13px 16px}
.facts dt{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);margin-bottom:3px}
.facts dd{margin:0;font-size:13px}

/* The Edit ------------------------------------------------------------- */
.edit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
@media(max-width:860px){.edit-grid{grid-template-columns:1fr}}
.ecard{background:var(--olive-deep);padding:var(--s3);display:flex;flex-direction:column;gap:12px;
  border-top:2px solid var(--rose);transition:transform .3s}
.ecard:hover{transform:translateY(-4px)}
.ecard-k{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--rose)}
.ecard h2{font-size:clamp(20px,2.2vw,26px);line-height:1.22}
.ecard p{font-size:14.5px;flex:1}
.ecard-go{align-self:flex-start;margin-top:4px;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;border-bottom:1px solid var(--rose);padding-bottom:3px;color:var(--rose)}
.doc .eyebrow a{border-bottom:1px solid var(--rose)}
/* The founders photograph is portrait (760x1013). It sits beside the opening
   paragraph, where that shape works, rather than being letterboxed across the
   full width — which cropped the tops of their heads. */
.signoff{text-align:center;padding-block:var(--s2)}
.signoff p{margin:0}
.signoff-name{font-family:var(--serif);font-size:26px;letter-spacing:.04em;margin-top:8px!important;color:var(--ivory-hi)}
.signoff-brand{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--rose);margin-top:6px!important}
/* ---------- long-form / policy pages ---------- */
.doc{display:flex;flex-direction:column;gap:var(--s3)}
.doc h2{margin-top:var(--s3)}
.doc h3{font-size:20px;margin-top:var(--s2)}
.doc p,.doc li{color:var(--ivory-hi);font-size:16px;line-height:1.8}
.doc ul,.doc ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.doc .upd{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ivory-hi)}
.callout{border-left:2px solid var(--flash);padding:20px 24px;background:var(--olive-deep);
  display:flex;flex-direction:column;gap:8px}
.callout b{font-weight:500}
.toc{display:flex;flex-wrap:wrap;gap:10px;padding-block:var(--s2);border-block:1px solid var(--line)}
.toc a{font-size:11px;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--line);padding:7px 14px}
.toc a:hover{border-color:var(--rose);color:var(--rose)}

/* ---------- FAQ ---------- */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item>button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px 0;text-align:left;font-family:var(--serif);font-size:20px;line-height:1.35}
.faq-item>button .pm{font-size:20px;color:var(--ivory-hi);flex:0 0 auto;line-height:1}
.faq-panel{display:none;padding-bottom:24px;font-size:15px;line-height:1.8;color:rgba(243,241,232,.88);max-width:72ch}
.faq-item.open .faq-panel{display:block}
.faq-panel p+p{margin-top:12px}

/* ---------- checkout ---------- */

@media(max-width:900px){.checkout{grid-template-columns:1fr;gap:var(--s4)}}
.express{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:520px){.express{grid-template-columns:1fr}}
.xbtn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 10px;border:1px solid var(--line);text-align:center}
.xbtn b{font-weight:400;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.xbtn span{font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.orline{display:flex;align-items:center;gap:16px;font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.orline::before,.orline::after{content:"";flex:1;height:1px;background:var(--line)}
.co-step{display:flex;flex-direction:column;gap:var(--s2);padding-block:var(--s3);border-bottom:1px solid var(--line)}
.co-h{display:flex;align-items:baseline;gap:12px}
.co-h .n{font-family:var(--serif);font-size:13px;letter-spacing:.28em;color:var(--ivory-hi)}
.pm-list{display:flex;flex-direction:column;border:1px solid var(--line)}
.pm{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line);cursor:pointer}
.pm:last-child{border-bottom:0}
.pm input{margin:5px 0 0;accent-color:var(--rose);flex:0 0 auto}
.pm-main{display:flex;flex-direction:column;gap:4px;flex:1}
.pm-title{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px}
.pm-sub{font-size:12.5px;line-height:1.6}
.pm-body{display:none}
.pm input:checked ~ .pm-main .pm-body{display:block;margin-top:12px}
.card-slot{border:1px dashed var(--line);padding:18px;display:flex;flex-direction:column;gap:12px}
.cs-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 13px;
  border:1px dashed var(--line);font-size:14px}
.cs-row>span:first-child{white-space:nowrap}
.cs-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:440px){.cs-grid{grid-template-columns:1fr}}
@media(max-width:900px){.summary{position:static}}
.sum-lines{display:flex;flex-direction:column;gap:12px;padding-block:var(--s2);border-block:1px solid var(--line-ink)}
.sum-row{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--ink-2)}
.sum-row.total{font-size:17px;color:var(--ink);font-family:var(--serif);padding-top:12px;border-top:1px solid var(--line-ink)}
.sum-item{display:flex;gap:12px;align-items:flex-start;font-size:13px}
.sum-item img{width:54px;flex:0 0 54px;aspect-ratio:1;object-fit:cover}
.badges{display:flex;gap:6px;flex-wrap:wrap}
.badges span{border:1px solid var(--line-ink);padding:4px 9px;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2)}
.pm .badges span{color:var(--ivory-hi);border-color:rgba(247,245,238,.45)}

/* ---------- subscriptions ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s3)}
@media(max-width:860px){.plans{grid-template-columns:1fr}}
.plan{border:1px solid var(--line);padding:var(--s3);display:flex;flex-direction:column;gap:10px}
.plan h3{color:var(--ivory-hi)}
.plan .f{font-size:14.5px}
.manage{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3);margin-top:var(--s3)}
@media(max-width:760px){.manage{grid-template-columns:1fr}}
.mrow{border:1px solid var(--line);padding:20px 22px;display:flex;flex-direction:column;gap:6px}
.mrow b{font-weight:400;font-family:var(--serif);font-size:20px}
.mrow span{font-size:14.5px}

/* ---------- wholesale / contact ---------- */
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s5)}
@media(max-width:900px){.contact{grid-template-columns:1fr;gap:var(--s4)}}
.form{display:flex;flex-direction:column;gap:16px}
.form textarea.field{min-height:150px;resize:vertical;line-height:1.6}
.dl{display:flex;flex-direction:column;gap:var(--s3)}
.dl div{display:flex;flex-direction:column;gap:5px;padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
.dl dt{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ivory-hi)}
.dl dd{margin:0;font-size:15px}

.maillink{border-bottom:1px solid var(--rose);padding-bottom:1px}
.maillink:hover{border-bottom-color:var(--ivory-hi)}

/* ---------- training and qualifications ----------
   Rose gold is only 2.9:1 on the mid olive, so these panels sit on the deep
   olive (5.09:1) — that is the only ground the rose labels are readable on. */
.creds{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:var(--s1)}
@media(max-width:700px){.creds{grid-template-columns:1fr}}
.cred{background:var(--olive-deep);padding:var(--s3);display:flex;flex-direction:column;gap:14px}
.cred h3{font-size:22px;color:var(--ivory-hi);margin:0}
.cred-role{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--rose)}
.cred-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.doc .cred-list li{font-size:14px;line-height:1.6;padding-left:16px;position:relative}
.cred-list li::before{content:"";position:absolute;left:0;top:.8em;width:7px;height:1px;background:var(--rose)}
.cred-t{font-family:var(--serif);font-size:17.5px;line-height:1.3;display:block;letter-spacing:.02em}
.cred-s{display:block;font-size:12.5px;letter-spacing:.05em;margin-top:3px}
.doc .cred-note{font-size:13px;margin-top:var(--s2)}

/* ---------- founders ---------- */
.founders{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--s5);align-items:center}
@media(max-width:900px){.founders{grid-template-columns:1fr;gap:var(--s4)}}
.founders img{width:100%;background:var(--ivory)}

.foot{background:var(--olive-deep);padding-block:var(--s5) var(--s3)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--s4)}
@media(max-width:880px){.foot-grid{grid-template-columns:1fr 1fr;gap:var(--s3)}}
@media(max-width:480px){.foot-grid{grid-template-columns:1fr}}
.foot h4{font-family:var(--sans);font-size:11px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;
  color:var(--rose);margin-bottom:16px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.foot a{font-size:14px}
.foot a:hover{color:var(--rose);opacity:1}
.foot-brand img{height:56px;margin-bottom:18px}
.foot-brand p{font-size:13.5px;max-width:36ch}
.foot-bottom{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--line);display:flex;
  justify-content:space-between;gap:var(--s2);flex-wrap:wrap;font-size:12.5px}
.pay{display:flex;gap:8px;flex-wrap:wrap}
.pay span{border:1px solid var(--line);padding:3px 10px;font-size:10px;letter-spacing:.12em;text-transform:uppercase}

.scrim{position:fixed;inset:0;background:rgba(28,31,24,.6);z-index:180;opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(410px,100%);background:var(--ivory);color:var(--ink);
  z-index:190;transform:translateX(100%);transition:transform .38s cubic-bezier(.3,.8,.3,1);display:flex;flex-direction:column}
.drawer.open{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:22px var(--s3);
  border-bottom:1px solid var(--line-ink)}
.drawer-head h3{font-family:var(--sans);font-size:13px;font-weight:400;letter-spacing:.24em;text-transform:uppercase}
.drawer-body{flex:1;overflow-y:auto;padding:var(--s3);display:flex;flex-direction:column;gap:var(--s3)}
.empty{color:var(--ink-2);font-size:14px;text-align:center;margin-top:var(--s4)}
.line{display:flex;gap:14px;align-items:flex-start}
.line img{width:64px;flex:0 0 64px;aspect-ratio:1;object-fit:cover}
.line .li-name{font-family:var(--serif);font-size:17px;line-height:1.3}
.line .li-meta{font-size:12px;color:var(--ink-2)}
.line .rm{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-top:4px;text-decoration:underline}
.drawer-foot{border-top:1px solid var(--line-ink);padding:var(--s3);display:flex;flex-direction:column;gap:14px}
.drawer-foot .note{color:var(--ink-2);margin:0}
.drawer-foot .btn{border-color:var(--ink);color:var(--ink)}
.drawer-foot .btn-solid{background:var(--ink);color:var(--ivory)}
.sub{display:flex;justify-content:space-between;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.sub b{font-weight:400}

/* ---------- the flash accent: fills, never text on olive ---------- */
.flashbar{background:var(--flash);color:var(--ink);display:flex;align-items:center;justify-content:center;
  gap:20px;flex-wrap:wrap;padding:11px var(--gut);font-size:13px}
.flashbar .fb-tag{font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;
  border:1px solid rgba(47,51,41,.45);padding:3px 10px}
.flashbar .fb-time{font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.flashbar .fb-time b{font-weight:500}
.flashbar .fb-go{font-size:11px;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid var(--ink);
  padding-bottom:2px}
.flashbar .fb-go:hover{opacity:.7}
/* On a phone the bar has to earn its height: two tight rows, not four.
   The "Shop the sale" link goes — Shop is in the menu directly below it. */
@media(max-width:620px){
  .flashbar{gap:4px 12px;font-size:12px;padding:8px var(--gut);line-height:1.45}
  .flashbar .fb-tag{font-size:9.5px;padding:2px 8px}
  .flashbar .fb-time{font-size:11px}
  .flashbar>span:nth-child(2){width:100%;text-align:center;order:3}
  .flashbar .fb-go{display:none}
}

.tag-sale{background:var(--flash)!important;color:var(--ink)!important;border-color:var(--flash)!important;
  font-weight:500}
/* No opacity on the struck price — the line through it is what says "old",
   and fading it was exactly what made the type hard to read. */
.was{text-decoration:line-through;text-decoration-thickness:1px;margin-right:10px;font-size:.86em}
.pricelab{font-family:var(--sans);font-size:.46em;letter-spacing:.2em;text-transform:uppercase;
  vertical-align:.5em;margin-right:5px;font-weight:400}
.now{background:var(--flash);color:var(--ink);padding:2px 9px;font-weight:400}
.btn-flash{background:var(--flash);border-color:var(--flash);color:var(--ink)}
.btn-flash:hover{background:#F59A73;border-color:#F59A73;color:var(--ink)}
.saving{color:var(--flash-ink);font-size:13px;font-weight:500}
.dark .saving,.saving-dark{color:var(--flash)}

/* ---------- coming soon ----------
   Stands where a price would, so an unpriced card does not read as broken.
   Deliberately not styled as a price: no tabular figures, no flash fill. */
.soon{font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ivory-hi);border:1px solid var(--line);padding:4px 11px;display:inline-block}
.price .soon{font-size:13px}

/* ==================================================================
   WooCommerce's own markup
   ==================================================================
   Everything above styles the markup this theme writes. Cart, checkout,
   account and the notices are written by WooCommerce, with its own class
   names, and without this they render in Woo's default grey-on-white
   against an olive page. These rules do not re-skin Woo — they hand it
   the same tokens the rest of the site uses.
   ================================================================== */

.woocommerce .wrap > .woocommerce-notices-wrapper,
.woocommerce-page .wrap > .woocommerce-notices-wrapper{display:block}

.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews,
ul.woocommerce-error{background:var(--olive-deep);border-top:2px solid var(--rose);
  color:var(--ivory-hi);padding:16px 20px;margin-bottom:var(--s3);list-style:none;
  font-size:14.5px;line-height:1.7}
.woocommerce-error{border-top-color:var(--flash)}
.woocommerce-message a,.woocommerce-info a,.woocommerce-error a{border-bottom:1px solid var(--rose)}
.paper .woocommerce-message,.paper .woocommerce-info{color:var(--ivory-hi)}

/* ---------- forms ---------- */
.woocommerce form .form-row{display:flex;flex-direction:column;gap:7px;margin:0 0 16px}
.woocommerce form .form-row label{font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.woocommerce form .form-row .required{color:var(--rose);border:0;text-decoration:none}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single{
  background:transparent;border:1px solid var(--line);color:var(--ivory-hi);
  padding:13px 16px;font-family:var(--sans);font-weight:300;font-size:15px;
  border-radius:0;height:auto;min-height:0;width:100%}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{border-color:var(--rose);outline:none}
.woocommerce form .form-row ::placeholder{color:rgba(243,241,232,.55)}
.woocommerce .select2-container .select2-selection__rendered{color:var(--ivory-hi);line-height:1.5;padding:0}
.woocommerce .select2-dropdown{background:var(--olive-deep);border-color:var(--line);color:var(--ivory-hi)}
.woocommerce form .form-row-first,.woocommerce form .form-row-last{width:100%}
@media(min-width:620px){
  .woocommerce form .form-row-first,.woocommerce form .form-row-last{width:calc(50% - 8px);display:inline-flex}
  .woocommerce form .form-row-first{margin-right:16px}
}

/* ---------- buttons ---------- */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.woocommerce a.button.alt,
.woocommerce button.button.alt,.woocommerce input.button.alt,
.wc-block-components-button{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 30px;font-family:var(--sans);font-size:11px;font-weight:400;
  letter-spacing:.24em;text-transform:uppercase;border-radius:0;
  background:var(--ivory);color:var(--ink);border:1px solid var(--ivory);
  transition:.3s;line-height:1}
.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce input.button:hover,.woocommerce button.button.alt:hover,
.woocommerce #respond input#submit:hover{background:var(--rose);border-color:var(--rose);color:var(--ink)}
.woocommerce button.button:disabled,.woocommerce button.button.alt:disabled{opacity:.5;cursor:not-allowed}

/* ---------- cart ---------- */
.woocommerce table.shop_table{border:1px solid var(--line);border-collapse:collapse;
  width:100%;border-radius:0;margin-bottom:var(--s3)}
.woocommerce table.shop_table th,.woocommerce table.shop_table td{
  border-top:1px solid var(--line);padding:16px 14px;font-size:14.5px;vertical-align:middle}
.woocommerce table.shop_table th{font-family:var(--sans);font-size:11px;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase}
.woocommerce table.cart img{width:72px;height:auto}
.woocommerce table.cart td.product-name a{font-family:var(--serif);font-size:18px}
.woocommerce .quantity .qty{background:transparent;border:1px solid var(--line);
  color:var(--ivory-hi);padding:10px;width:74px;text-align:center;font-family:var(--sans)}
.woocommerce a.remove{color:var(--ivory-hi)!important;font-size:20px;line-height:1}
.woocommerce a.remove:hover{background:var(--flash);color:var(--ink)!important}
.woocommerce .cart-collaterals .cart_totals{width:100%}
@media(min-width:900px){.woocommerce .cart-collaterals .cart_totals{width:460px;margin-left:auto}}
.woocommerce .cart_totals table.shop_table{background:var(--ivory);color:var(--ink)}
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td{border-top-color:var(--line-ink)}
.woocommerce .cart_totals h2{font-size:26px;margin-bottom:var(--s2)}

/* ---------- checkout ---------- */
.woocommerce .col2-set{display:grid;grid-template-columns:1fr;gap:var(--s4)}
@media(min-width:900px){.woocommerce .col2-set{grid-template-columns:1fr 1fr;gap:var(--s5)}}
.woocommerce .col2-set .col-1,.woocommerce .col2-set .col-2{width:100%;float:none}
#order_review_heading{margin-top:var(--s5)}
.woocommerce-checkout #payment{background:var(--ivory);color:var(--ink);
  border:1px solid var(--line-ink);border-radius:0;padding:var(--s3)}
.woocommerce-checkout #payment ul.payment_methods{border-bottom:1px solid var(--line-ink);padding:0 0 var(--s2)}
.woocommerce-checkout #payment ul.payment_methods li{list-style:none;margin-bottom:12px}
.woocommerce-checkout #payment div.payment_box{background:rgba(47,51,41,.06);color:var(--ink-2);
  font-size:13.5px;line-height:1.7;border-radius:0}
.woocommerce-checkout #payment div.payment_box::before{border-bottom-color:rgba(47,51,41,.06)}
.woocommerce-checkout #payment .form-row input.input-text,
.woocommerce-checkout #payment .form-row textarea{border-color:var(--line-ink);color:var(--ink)}
.woocommerce-checkout #payment .button{background:var(--ink);border-color:var(--ink);color:var(--ivory-hi);width:100%}
.woocommerce-checkout #payment .button:hover{background:var(--olive-deep);border-color:var(--olive-deep)}
.woocommerce-terms-and-conditions-wrapper{font-size:13.5px;line-height:1.7}
.woocommerce form .form-row.validate-required.woocommerce-invalid input.input-text{border-color:var(--flash)}

/* ---------- account and order received ---------- */
.woocommerce-order,.woocommerce-account .woocommerce{font-size:15px}
.woocommerce ul.order_details{list-style:none;padding:0;display:flex;flex-wrap:wrap;
  gap:var(--s3);border-block:1px solid var(--line);padding-block:var(--s3);margin-bottom:var(--s3)}
.woocommerce ul.order_details li{font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.woocommerce ul.order_details li strong{display:block;font-family:var(--serif);
  font-size:19px;letter-spacing:.02em;text-transform:none;margin-top:6px;font-weight:400}
.woocommerce-MyAccount-navigation ul{list-style:none;padding:0;display:flex;
  flex-wrap:wrap;gap:10px;margin-bottom:var(--s3)}
.woocommerce-MyAccount-navigation a{border:1px solid var(--line);padding:8px 16px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.woocommerce-MyAccount-navigation .is-active a{background:var(--rose);color:var(--ink);border-color:var(--rose)}

/* ---------- single product: Woo's own add-to-basket ---------- */
.woocommerce div.product form.cart{display:flex;gap:12px;flex-wrap:wrap;align-items:center;width:100%}
.woocommerce div.product form.cart .button{flex:1 1 200px}
.woocommerce div.product p.price,.woocommerce div.product span.price{
  font-family:var(--serif);font-size:32px;color:inherit}
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;margin:0 0 var(--s2);
  display:flex;gap:var(--s3);border-bottom:1px solid var(--line)}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li{background:none;border:0;border-radius:0;padding:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;padding:12px 0;font-weight:400}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{border-bottom:1px solid var(--rose)}
.woocommerce .woocommerce-result-count,.woocommerce .woocommerce-ordering select{font-size:13px}
.woocommerce nav.woocommerce-pagination ul{border:0;display:flex;gap:8px;justify-content:center}
.woocommerce nav.woocommerce-pagination ul li{border:0}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{border:1px solid var(--line);padding:9px 15px;
  font-size:12px;background:none}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--rose);color:var(--ink)}

/* Rose gold is 1.55:1 on ivory — invisible. Woo's required-field asterisks and
   links sit inside the ivory payment panel and the ivory totals table, so on
   those grounds they take the darkened rose the rest of the site uses on paper.
   Same rule as everywhere else: rose for text only where it is readable. */
.woocommerce-checkout #payment .required,
.woocommerce-checkout #payment a,
.woocommerce .cart_totals .required,
.woocommerce .cart_totals a,
.paper .woocommerce .required{color:var(--rose-ink)}
.woocommerce-checkout #payment a,
.woocommerce .cart_totals a{border-bottom:1px solid var(--rose-ink)}
/* WooCommerce also calls its product-tab list .tabs, and the routine tabs on
   the front page are .tabs too. The front-page rule gives them a box and
   centres them, which is wrong on a product page — so undo exactly that much
   where Woo owns the markup, rather than renaming a class the seeded copy uses. */
.woocommerce div.product .woocommerce-tabs ul.tabs{border:0;border-bottom:1px solid var(--line);
  width:auto;margin-inline:0;justify-content:flex-start}
/* ---------- single product: the tabs below the fold ----------
   Woo's tab list is a <ul>, so it keeps its bullets unless told otherwise —
   they were showing as dots in front of DESCRIPTION. And the panel beneath
   inherits the full 1180px container, which is roughly twice a comfortable
   line for 16px type, so the reading measure applies there as it does on
   every other long-form block in the design. */
.woocommerce div.product .woocommerce-tabs ul.tabs li{list-style:none}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.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 .panel{max-width:72ch}
.woocommerce div.product .woocommerce-tabs .panel h2{font-size:clamp(24px,3vw,34px);margin-bottom:var(--s2)}
.woocommerce div.product .woocommerce-tabs .panel h3{margin-top:var(--s3)}
.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce div.product .woocommerce-tabs .panel li{font-size:16px;line-height:1.8}
.woocommerce div.product .woocommerce-tabs .panel p + h3{margin-top:var(--s3)}
.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2{margin-top:var(--s5);margin-bottom:var(--s3)}
.woocommerce div.product .product_meta{font-size:13px;padding-top:var(--s2);
  border-top:1px solid var(--line);width:100%;margin-top:var(--s1)}

/* ---------- WooCommerce's product tabs, properly ----------
   Woo ships these as folder tabs: a light lilac #e9e6ed bar, a white active
   tab, 1px borders and two pseudo-elements faking rounded corners. On an olive
   page the active tab becomes a white rectangle and — the part that was
   actually reported — the inactive labels keep Woo's #515151 grey, which is
   1.43:1 on the olive. Invisible.

   The earlier override reset the background and borders but never set a colour,
   and `li.active` beat it on specificity, so the white tab survived too. These
   selectors match Woo's own weight, class for class. */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:none;background-color:transparent;border:0;border-radius:0;
  margin:0;padding:0;box-shadow:none;list-style:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{
  color:var(--ivory-hi);font-weight:400;padding:12px 0;
  border-bottom:1px solid transparent;transition:border-color .25s}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{
  color:var(--ivory-hi);border-bottom-color:var(--rose)}
/* Checked against the live shop with WooCommerce 11.1.2's own stylesheet
   loaded: all three tabs read 5.1:1 on the olive, the active one carries the
   rose rule and the inactive ones nothing. The theme's stylesheet loads after
   woocommerce.css, so the selectors above only have to match Woo's weight
   class for class, not beat it. */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::before{
  display:none;border:0;box-shadow:none;content:none}
.woocommerce div.product .woocommerce-tabs ul.tabs{
  padding:0;overflow:visible;gap:var(--s3)}

/* ---------- the contact form ----------
   The form is the theme's own (inc/contact.php), so these are the theme's own
   class names rather than a plugin's. `.form` and `.field` already exist from
   the approved build; what is new is everything a form needs once it can
   actually fail: a per-field error, an optional marker, a trap the eye never
   sees, and a thank-you that is visibly not an error.

   The error text is ivory with a flash-orange rule, not flash-orange text.
   Rose gold and orange both fail AA on mid olive, and an error message that
   cannot be read is worse than no error message. */
/* The form is one grid child of .contact and everything else — the email
   address, the opening hours, the address list — is the other column. Placing
   them by rule rather than by markup means the column structure survives both
   the seeded page and the one already live, whose callout was swapped for the
   shortcode in place and which therefore has three children rather than two. */
.contact>.form-wrap{grid-column:1;grid-row:1}
.contact>:not(.form-wrap){grid-column:2}
@media(max-width:900px){
  .contact>.form-wrap,
  .contact>:not(.form-wrap){grid-column:auto;grid-row:auto}
}
.form-wrap{display:block}
.field-lab .opt{opacity:.6;letter-spacing:.12em}
.field-err{font-size:12px;letter-spacing:.04em;text-transform:none;
  color:var(--ivory-hi);border-left:2px solid var(--flash);padding-left:10px;line-height:1.5}
/* The field itself, not only the sentence under it. :invalid is deliberately
   not used — it marks an empty required field before anybody has typed a
   thing, which is an accusation rather than a message. The attribute is set
   by the server, after a submission. */
.field[aria-invalid="true"]{border-color:var(--flash)}
.form .btn{align-self:flex-start;min-width:220px}
@media(max-width:560px){.form .btn{align-self:stretch}}
.form-note{font-size:13.5px;line-height:1.7;margin:0;opacity:.85}
.form-note a{border-bottom:1px solid var(--rose)}
.callout-ok{border-left-color:var(--rose)}
.glow-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.paper .field-err{color:var(--ink)}
.paper .form-note a{border-bottom-color:var(--rose-ink)}

/* ---------- the rest of what WooCommerce colours in for itself ----------
   Found by loading woocommerce.css alongside this file in the product harness
   rather than by looking at the live site, which is the point of having done
   that: all three of these are states the live shop has not reached yet. The
   stock lines appear the moment stock quantities are switched on, and the sale
   badge the moment anything is discounted, and all three would have arrived
   unreadable.

   Woo's palette here is a yellow-olive #958E09 and a red #B81C23, both of
   which sit at under 2:1 on this page's olive. */
.woocommerce div.product .stock,
.woocommerce div.product p.stock{color:var(--ivory-hi);font-size:13px;
  letter-spacing:.08em;margin:0}
.woocommerce div.product .out-of-stock,
.woocommerce div.product p.out-of-stock{color:var(--ivory-hi);
  border-left:2px solid var(--flash);padding-left:10px}
/* Not a circle with white type on olive-yellow. The design already has a
   flash colour for "this is the one to look at", and it is already checked
   against this background on the buttons. */
.woocommerce span.onsale{background-color:var(--flash);color:var(--ink);
  border-radius:0;min-height:0;min-width:0;line-height:1;padding:7px 11px;
  font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  top:14px;left:14px}