/*
Theme Name: Playbook
Theme URI: https://theopenshelf.shop/
Author: The Open Shelf
Description: Lightweight, mobile-first WooCommerce theme for selling digital products (ebooks, playbooks, guides). No page builder, no JavaScript of its own, no bundled payment code.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: playbook
Tags: e-commerce, one-column, custom-menu, custom-logo, translation-ready
*/

/* ---------- tokens ----------
   Palette sampled from the product's own cover art (cream paper, black
   slab-serif display, brick-red accent) so the site reads as one object
   with the PDF, not a generic SaaS skin bolted onto it. Light-only by
   design: this is a print-editorial identity, not an app. */
:root{
  /* Three paper tones, used to give the page a scroll rhythm instead of one
     flat cream from top to bottom: base cream, a lighter "raised" sheet, and
     a deeper cream. Two dark ink bands break the sequence entirely. */
  --paper:#f3efe4;
  --paper-raised:#fdfcf8;
  --paper-deep:#eae3d2;
  --ink:#1c1712;
  --ink-soft:#2a231c;
  --body:#332d25;
  --muted:#71685a;
  /* --muted fails WCAG AA (4.29:1) on --paper-deep; this passes at ~6:1 and is
     the colour to use for secondary text sitting on the deep cream band. */
  --muted-strong:#5a5145;
  --line:#ded5c2;
  --line-strong:#1c1712;
  --accent:#9a2a1c;
  --accent-dark:#7c2115;
  --accent-soft:#f0e2dd;
  --ok:#3f6b3a;
  --radius:4px;
  --radius-btn:8px;
  --radius-card:10px;
  --tabbar-h:62px;
  --wrap:72rem;
  --prose:46rem;
  --shadow:0 1px 1px rgba(28,23,18,.05), 0 14px 34px rgba(28,23,18,.10);
  --shadow-card:0 1px 2px rgba(28,23,18,.05), 0 6px 18px rgba(28,23,18,.07);
  --shadow-card-hover:0 2px 6px rgba(28,23,18,.07), 0 18px 40px rgba(28,23,18,.13);
  --font-display:"Besley","Georgia",serif;
  --font:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

/* ---------- self-hosted fonts ----------
   Latin subset only (this is a US-market, English-only site) to keep the
   download small. Besley ships one static bold weight upstream — 900 isn't
   a real cut, so headings use 700 everywhere rather than fake-bolding. */
@font-face{
  font-family:"Besley";font-style:normal;font-weight:700;font-display:swap;
  src:url("assets/fonts/besley-700.woff2") format("woff2");
}
@font-face{
  font-family:"Besley";font-style:italic;font-weight:700;font-display:swap;
  src:url("assets/fonts/besley-700-italic.woff2") format("woff2");
}
@font-face{
  font-family:"Public Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("assets/fonts/public-sans-400.woff2") format("woff2");
}
@font-face{
  font-family:"Public Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url("assets/fonts/public-sans-600.woff2") format("woff2");
}
@font-face{
  font-family:"Public Sans";font-style:normal;font-weight:700;font-display:swap;
  src:url("assets/fonts/public-sans-700.woff2") format("woff2");
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;background:var(--paper);color:var(--body);
  font-family:var(--font);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;height:auto}
a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--accent-dark)}
h1,h2,h3,h4{color:var(--ink);line-height:1.15;margin:0 0 .5em;font-weight:700;font-family:var(--font-display);overflow-wrap:break-word;word-break:break-word}
h1{font-size:clamp(1.65rem,8vw,3.4rem);letter-spacing:-.01em}
h2{font-size:clamp(1.35rem,5vw,2.1rem);letter-spacing:-.005em}
h3{font-size:1.2rem;font-family:var(--font);font-weight:700}
p,ul,ol{margin:0 0 1.15em}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* left:-9999px as well as clip: a 1px-wide box parked at the right edge of a
   narrow phone viewport is enough to add 1px of horizontal scroll. */
.screen-reader-text{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed;top:8px;left:8px;z-index:99;width:auto;height:auto;clip:auto;background:var(--paper-raised);padding:.6rem 1rem;border-radius:var(--radius)}

.container{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 1.25rem}
.prose{max-width:var(--prose);margin-inline:auto}
.muted{color:var(--muted)}
.center{text-align:center}

/* ---------- section rhythm ----------
   Alternating paper tones plus two full-width dark bands. Sections are
   deliberately tall: the complaint this replaces was that the page read as
   one continuous wall of text, and vertical air is most of the cure. */
.section{padding:clamp(3rem,8vw,6rem) 0}
.section--raised{background:var(--paper-raised)}
.section--deep{background:var(--paper-deep)}
.section--soft{background:var(--paper-raised)}
/* Hairline only where two same-toned bands would otherwise touch. */
.section--raised + .section--raised,.section--deep + .section--deep{border-top:1px solid var(--line)}

.section-title{max-width:22ch}
.section--deep .section-title,.section--raised .section-title{max-width:24ch}
.section-lede{color:var(--muted);font-size:18px;max-width:58ch;margin-bottom:2.25rem}
.section-action{margin:2.25rem 0 0}
.center .section-title,.center .section-lede{max-width:none;margin-inline:auto}

.label{display:inline-block;font-family:var(--font);font-size:13px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--accent);margin-bottom:.9rem}
.label--invert{color:#e0a99c}

/* Inline icons: sized to the text they sit beside, coloured by currentColor
   unless a rule says otherwise, so one SVG works on cream and on ink. */
.icon{width:1.15em;height:1.15em;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em}

/* ---------- full-width dark bands ---------- */
.band{background:var(--ink);color:#d9d1c3;padding:clamp(3.25rem,9vw,6.5rem) 0}
.band h2,.band h3{color:#fbf9f3}
.band a{color:#f0c9c0}
.band a:hover{color:#fff}
.band-grid{display:grid;gap:2.5rem;align-items:center;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.band-grid{grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:4rem}}
.band-media img{display:block;width:100%;border-radius:var(--radius-card);box-shadow:0 24px 60px rgba(0,0,0,.45)}
.band-note{color:#a99e8d;font-size:15.5px;max-width:48ch;margin:1.5rem 0 0}
.band-lede{font-size:19px;color:#c3b9a8;max-width:46ch;margin:0 auto 2rem}
/* One shade lighter than the footer directly beneath it, so the closing CTA
   and the footer read as two zones rather than one undifferentiated slab. */
.band--cta{background:var(--ink-soft)}
.band--cta h2{font-size:clamp(1.6rem,4.5vw,2.6rem);max-width:20ch;margin-inline:auto}

/* ---------- buttons: one component, every state, every context ----------
   The selector list is deliberately long. WooCommerce ships three different
   button systems — classic (.button), block cart/checkout
   (.wc-block-components-button) and core's .wp-element-button — and a button
   that misses any of them renders as a browser default, which is exactly
   what made the site look unfinished. */
.btn,
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce a.button.alt,.woocommerce button.button.alt,
.woocommerce #respond input#submit,
.woocommerce-Button,.woocommerce-button,
.woocommerce input[type="submit"],
.wc-block-components-button,
.wp-element-button,
.contact-form button[type="submit"]{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--accent);color:#fff;
  font-family:var(--font);font-weight:700;font-size:1rem;line-height:1.2;
  min-height:48px;padding:.85rem 1.75rem;
  border:1px solid var(--accent);border-radius:var(--radius-btn);
  text-decoration:none;cursor:pointer;text-align:center;
  box-shadow:0 1px 2px rgba(124,33,21,.22),0 6px 16px rgba(154,42,28,.20);
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .12s ease;
}
.btn:hover,
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-Button:hover,.woocommerce-button:hover,
.woocommerce input[type="submit"]:hover,
.wc-block-components-button:hover,
.wp-element-button:hover,
.contact-form button[type="submit"]:hover{
  background:var(--accent-dark);border-color:var(--accent-dark);color:#fff;
  box-shadow:0 10px 26px rgba(124,33,21,.34);transform:translateY(-1px);
}
.btn:active,
.woocommerce a.button:active,.woocommerce button.button:active,.woocommerce input.button:active,
.woocommerce-Button:active,.wc-block-components-button:active,
.wp-element-button:active,.contact-form button[type="submit"]:active{
  transform:translateY(0);box-shadow:inset 0 2px 4px rgba(0,0,0,.22);
}
.btn:focus-visible,
.woocommerce a.button:focus-visible,.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,.woocommerce-Button:focus-visible,
.wc-block-components-button:focus-visible,.wp-element-button:focus-visible,
.contact-form button[type="submit"]:focus-visible{
  outline:3px solid var(--ink);outline-offset:3px;
}
/* The ring has to change colour on the dark bands or it disappears into them. */
.band .btn:focus-visible{outline-color:#fbf9f3}
.btn:disabled,.btn.disabled,
.woocommerce .button.disabled,.woocommerce .button:disabled,
.wc-block-components-button:disabled,.wc-block-components-button[aria-disabled="true"]{
  opacity:.5;cursor:not-allowed;pointer-events:none;transform:none;box-shadow:none;
}
.btn--lg{font-size:1.075rem;padding:1.05rem 2rem;min-height:54px}
.btn--block{display:flex;width:100%}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong);box-shadow:none}
.btn--ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:0 4px 12px rgba(28,23,18,.18)}
.btn--text{background:none;border-color:transparent;color:var(--accent);box-shadow:none;min-height:44px;padding:.4rem .25rem;text-decoration:underline;text-underline-offset:3px}
.btn--text:hover{background:none;border-color:transparent;color:var(--accent-dark);box-shadow:none;transform:none}

/* WooCommerce block buttons carry their own high-specificity colours, so
   they need matching specificity rather than the plain class above. */
.wc-block-components-button:not(:disabled):not([aria-disabled="true"]),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button{
  background:var(--accent);border-color:var(--accent);color:#fff;border-radius:var(--radius-btn);
}
.wc-block-components-button:not(:disabled):not([aria-disabled="true"]):hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover{
  background:var(--accent-dark);border-color:var(--accent-dark);color:#fff;
}
.wc-block-components-button__text{color:inherit}

/* Loading: added by assets/js/playbook.js on submit of full-page-POST forms
   (add to cart, login, contact) so they can't be double-clicked. Checkout is
   excluded on purpose: WooCommerce guards its AJAX submit with blockUI. */
.btn.is-loading,.woocommerce .button.is-loading{
  color:transparent!important;pointer-events:none;position:relative;opacity:.85;
}
.btn.is-loading::after,.woocommerce .button.is-loading::after{
  content:"";position:absolute;top:50%;left:50%;width:1.1rem;height:1.1rem;margin:-.55rem 0 0 -.55rem;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;
  animation:playbook-spin .7s linear infinite;
}
.btn--ghost.is-loading::after{border-color:rgba(28,23,18,.25);border-top-color:var(--ink)}
@keyframes playbook-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .btn,.woocommerce a.button,.woocommerce button.button,.wc-block-components-button{transition:none}
  .btn:hover,.wc-block-components-button:hover{transform:none}
  .btn.is-loading::after{animation-duration:1.4s}
}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:2px solid var(--line-strong)}
.header-inner{display:flex;align-items:center;gap:1rem;min-height:68px}
.brand{font-family:var(--font-display);font-weight:700;font-size:1.2rem;color:var(--ink);text-decoration:none;margin-right:auto}
.brand img{max-height:38px;width:auto;display:block}
.nav ul{display:flex;gap:1.5rem;list-style:none;margin:0;padding:0}
.nav a{color:var(--ink);text-decoration:none;font-size:.92rem;font-weight:600}
.nav a:hover,.nav .current-menu-item>a{color:var(--accent)}
.cart-link{color:var(--ink);text-decoration:none;font-size:.92rem;font-weight:600;white-space:nowrap}
.cart-link .count{background:var(--accent);color:#fff;border-radius:999px;padding:.05rem .45rem;font-size:13px;margin-left:.25rem}
.nav-toggle{display:none}
.nav-toggle>summary{list-style:none;cursor:pointer;padding:.4rem;color:var(--ink);font-size:1.25rem}
.nav-toggle>summary::-webkit-details-marker{display:none}

@media (max-width:820px){
  .nav-toggle{display:block;order:3}
  .nav{display:none;order:4;width:100%;border-top:1px solid var(--line);padding:.5rem 0 .9rem}
  .nav-toggle[open]~.nav{display:block}
  .header-inner{flex-wrap:wrap}
  .nav ul{flex-direction:column;gap:.15rem}
  .nav a{padding:.7rem 0;min-height:44px;display:flex;align-items:center}
}
@media (max-width:820px) and (prefers-reduced-motion:no-preference){
  .nav-toggle[open]~.nav{animation:playbook-menu-in .18s ease}
}
@keyframes playbook-menu-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- hero ---------- */
.hero{padding:clamp(1.75rem,7vw,4.5rem) 0 clamp(1.5rem,6vw,3.5rem)}
.hero-grid{display:grid;gap:2.5rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,380px);align-items:center;gap:3rem}}
.hero-media picture,.hero-media img{display:block;width:100%;border:1px solid var(--line);box-shadow:var(--shadow)}
.eyebrow{display:inline-block;font-family:var(--font);font-size:13px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--accent);margin-bottom:1.1rem;padding-bottom:.6rem;border-bottom:2px solid var(--line-strong)}
.hero h1{max-width:16ch}
.hero .lede{font-size:clamp(18px,2.2vw,21px);line-height:1.6;color:var(--body);max-width:52ch;margin-bottom:1.6rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.hero-note{font-size:.9rem;color:var(--muted);margin:1.1rem 0 0}

/* Small reassurance strip under the hero CTA and again in the closing band. */
.trust-row{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;list-style:none;padding:1.5rem 0 0;margin:1.5rem 0 0;border-top:1px solid var(--line)}
.trust-row li{display:flex;align-items:center;gap:.45rem;font-size:14.5px;font-weight:600;color:var(--muted);margin:0}
.trust-row .icon{color:var(--accent)}
.trust-row--center{justify-content:center;border-top-color:rgba(255,255,255,.14);max-width:44rem;margin-inline:auto}
.trust-row--invert li{color:#a99e8d}
.trust-row--invert .icon{color:#e0a99c}

/* ---------- who it's for / not for ---------- */
.for-not-grid{display:grid;gap:1.5rem;margin-top:0;grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.for-not-grid{grid-template-columns:1fr 1fr;gap:1.75rem}}
.for-not{background:var(--paper-raised);border:1px solid var(--line);border-top:4px solid var(--line-strong);border-radius:var(--radius-card);padding:1.75rem;box-shadow:var(--shadow-card)}
.for-not h3{display:flex;align-items:center;gap:.55rem;font-size:19px;margin-bottom:.9rem}
.for-not--yes{border-top-color:var(--ok)}
.for-not--yes h3 .icon{color:var(--ok)}
.for-not--no{border-top-color:var(--accent)}
.for-not--no h3 .icon{color:var(--accent)}
.for-not ul{padding-left:1.15rem}
.for-not li{margin-bottom:.4rem}
.for-not p:last-child,.for-not ul:last-child{margin-bottom:0}
.for-not p,.for-not li{font-size:17px}

/* ---------- chapter preview (home) + chapter list (product page) ---------- */
.chapter-preview{list-style:none;padding:0;margin:0}
.chapter-preview li{display:flex;gap:.6rem;padding:.5rem 0;border-bottom:1px solid var(--line);font-size:17px}
.chapter-preview li:last-child{border-bottom:0}
.chapter-preview__num{font-family:var(--font-display);color:var(--accent);font-weight:700;min-width:1.4em}
.chapter-list{list-style:none;padding:0;margin:0}
.chapter-list__part{font-family:var(--font-display);font-weight:700;font-size:1.1rem;margin:1.5rem 0 .5rem;color:var(--ink)}
.chapter-list__part:first-child{margin-top:0}
.chapter-list__part>ol{list-style:none;padding:0;margin:.5rem 0 0;font-family:var(--font);font-weight:400}
.chapter-list__part>ol>li{padding:.65rem 0;border-bottom:1px solid var(--line);font-size:17px}
.chapter-list__num{display:inline-block;min-width:1.6em;color:var(--accent);font-weight:700;font-family:var(--font-display)}
.chapter-list__back{list-style:none;padding:0;margin:0}
.chapter-list__back li{padding:.5rem 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}

/* ---------- pull-quote / sample-page peek ---------- */
.pull-quote{border-left:3px solid var(--accent);padding:.2rem 0 .2rem 1.25rem;margin:1.75rem 0}
.pull-quote p{font-family:var(--font-display);font-size:1.15rem;line-height:1.5;color:var(--ink);font-style:italic;margin-bottom:.5rem}
.pull-quote cite{font-style:normal;font-size:.85rem;color:var(--muted)}
.pull-quote--lg p{font-size:clamp(1.25rem,2.6vw,1.6rem)}
.pull-quote--invert{border-left-color:#e0a99c;margin-top:0}
.pull-quote--invert p{color:#fbf9f3}
.pull-quote--invert cite{color:#a99e8d}
.sample-peek{display:grid;gap:2.5rem;align-items:center;grid-template-columns:minmax(0,1fr)}
@media (min-width:820px){.sample-peek{grid-template-columns:340px minmax(0,1fr);gap:3rem}}
.sample-peek__media img{border:1px solid var(--line);box-shadow:var(--shadow);width:100%}

/* ---------- scroll reveal (respects prefers-reduced-motion) ----------
   Gated on the .has-js class (set by a 1-line inline script in wp_head,
   before first paint) so a no-JS visitor never sees hidden content — the
   fade-in is a progressive enhancement, not a requirement to see the page. */
@media (prefers-reduced-motion:no-preference){
  .has-js .reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
  .has-js .reveal.is-visible{opacity:1;transform:none}
}

/* ---------- home page editable content ----------
   A centred 64rem block so the three-up row has room to breathe, with the
   running text held to a readable measure and centred inside it. Before
   this the whole block was a 42rem column pinned to the left edge of a
   72rem container, which read as a layout bug (dead space on the right). */
.home-content{max-width:64rem;margin-inline:auto}
.home-content>h2,.home-content>p,.home-content>ul,.home-content>ol{max-width:44rem;margin-inline:auto}
.home-content>h2{margin-top:2.5rem}
.home-content>h2:first-child{margin-top:0}

/* ---------- three-up feature cards ----------
   Real cards: border, rounded corners, padding, a lifted shadow on hover and
   a numbered badge set by a CSS counter, so the markup stays three plain
   <div>s in the page editor and nothing has to be hand-numbered. */
.stat-row{counter-reset:statcard;display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr);margin:2.5rem 0 3.5rem}
@media (min-width:820px){.stat-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.75rem}}
.stat-row>div{
  counter-increment:statcard;
  display:flex;flex-direction:column;align-items:flex-start;
  background:var(--paper-raised);
  border:1px solid var(--line);border-radius:var(--radius-card);
  padding:1.75rem 1.6rem;
  box-shadow:var(--shadow-card);
  transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;
}
.stat-row>div:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-3px);border-color:#cdc2ab}
/* Badge sits in normal flow, not absolutely — the heading below it can then
   wrap to two lines without the number landing on top of it. */
.stat-row>div::before{
  content:counter(statcard,decimal-leading-zero);
  display:flex;align-items:center;justify-content:center;
  width:2.5rem;height:2.5rem;margin-bottom:1.1rem;
  background:var(--accent-soft);color:var(--accent);
  border:1px solid #e2cdc7;border-radius:999px;
  font-family:var(--font-display);font-size:1rem;font-weight:700;line-height:1;
}
.stat-row h3{margin-bottom:.6rem;font-size:20px;color:var(--ink)}
.stat-row p{margin-bottom:0;font-size:17.5px;line-height:1.65;color:var(--body)}
@media (prefers-reduced-motion:reduce){.stat-row>div:hover{transform:none}}

.grid{display:grid;gap:1.5rem}
/* Explicit steps instead of auto-fit/minmax: at in-between widths (roughly
   500-1000px) auto-fit was producing two cramped columns instead of a clean
   stack. One column on phones, two on tablets, four only at desktop width. */
.grid-3{grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.grid-3{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card{background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius-card);padding:1.6rem;box-shadow:var(--shadow-card);transition:box-shadow .2s ease,transform .2s ease}
.card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-3px)}
.card h3{margin-bottom:.5rem;padding-bottom:.6rem;border-bottom:2px solid var(--line-strong)}
.card p:last-child{margin-bottom:0}
@media (prefers-reduced-motion:reduce){.card:hover{transform:none}}

.checklist{list-style:none;padding:0;margin:0 0 1.5rem}
.checklist li{position:relative;padding-left:1.9rem;margin-bottom:.7rem;font-size:17px}
/* A tick, not an empty square — an unticked box reads as "not included". */
.checklist li::before{content:"";position:absolute;left:.2rem;top:.18em;width:.45rem;height:.8rem;border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* Outcome checklist on the home page: bigger, with the tick in a filled
   accent disc so the list reads as "things you will be able to do" rather
   than an anonymous set of bullets. */
.checklist--lg{margin-top:1.5rem}
.checklist--lg li{padding-left:2.9rem;margin-bottom:1.15rem;font-size:18px;line-height:1.6;min-height:1.9rem}
.checklist--lg li::before{
  content:"";position:absolute;left:0;top:.05em;
  width:1.7rem;height:1.7rem;border:0;border-radius:999px;transform:none;
  background:var(--accent) no-repeat center/.85rem .85rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5.2 5.2L20 6.8'/%3E%3C/svg%3E");
}

/* ---------- interior spreads (home: "a workbook, not a book you read") ---------- */
.spread-grid{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.spread-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.75rem}}
.spread{margin:0}
.spread img{display:block;width:100%;border:1px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--shadow-card);background:#fff;transition:box-shadow .2s ease,transform .2s ease}
.spread:hover img{box-shadow:var(--shadow-card-hover);transform:translateY(-4px)}
@media (prefers-reduced-motion:reduce){.spread:hover img{transform:none}}

/* ---------- reader reviews (real ones, or an honest empty state) ---------- */
.quote-grid{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:820px){.quote-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.quote-card{margin:0;background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius-card);padding:1.75rem;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:.5rem}
.quote-card__mark{width:1.9rem;height:1.9rem;color:var(--accent);opacity:.35}
.quote-card__stars{color:var(--accent);letter-spacing:.08em;font-size:1rem}
.quote-card blockquote{margin:0;font-size:17px;color:var(--body)}
.quote-card blockquote p:last-child{margin-bottom:0}
.quote-card figcaption{margin-top:auto;padding-top:.75rem;border-top:1px solid var(--line);font-weight:700;color:var(--ink);font-size:15px}
.quote-empty{background:var(--paper-raised);border:1px dashed #c9bda5;border-radius:var(--radius-card);padding:clamp(1.75rem,5vw,3rem);text-align:center;max-width:44rem;margin-inline:auto}
.quote-empty__mark{width:2.4rem;height:2.4rem;color:var(--accent);opacity:.3;margin-bottom:.5rem}
.quote-empty__lede{font-family:var(--font-display);font-size:clamp(1.1rem,2.4vw,1.4rem);color:var(--ink);margin-bottom:.6rem}
.quote-empty__note{color:var(--muted);font-size:16px;max-width:46ch;margin:0 auto}
.quote-empty .section-action{margin-top:1.75rem}

/* ---------- product highlight (home) ---------- */
.highlight{display:grid;gap:2.5rem;align-items:start;grid-template-columns:minmax(0,1fr)}
@media (min-width:820px){.highlight{grid-template-columns:320px minmax(0,1fr);gap:3.5rem}}
.highlight-media img{border-radius:0;box-shadow:var(--shadow);width:100%;border:1px solid var(--line)}
.highlight .price{font-family:var(--font-display);font-size:1.7rem;font-weight:700;color:var(--ink);display:block;margin-bottom:1rem}

/* ---------- FAQ (native <details>) ---------- */
.faq{border-top:2px solid var(--line-strong);max-width:var(--prose);margin-inline:auto}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;min-height:44px;width:100%;padding:1.1rem 2rem 1.1rem 0;font-weight:700;color:var(--ink);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.25rem;top:.95rem;font-size:1.3rem;font-weight:400;color:var(--accent)}
.faq details[open] summary::after{content:"\2013"}
.faq details>div{padding:0 0 1.15rem}
.faq details>div p:last-child{margin-bottom:0}

/* ---------- forms: every state, not just default ---------- */
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=search],input[type=number],input[type=url],textarea,select,
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.select2-container .select2-selection--single{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--paper-raised);
  border:1px solid var(--line-strong);border-radius:var(--radius);padding:.7rem .85rem;
  transition:border-color .15s ease,box-shadow .15s ease;
}
textarea{min-height:150px}
input:hover,textarea:hover,select:hover{border-color:var(--ink)}
input:focus-visible,textarea:focus-visible,select:focus-visible,
.woocommerce form .form-row input.input-text:focus-visible{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(154,42,28,.18);
}
input:disabled,textarea:disabled,select:disabled{background:var(--line);color:var(--muted);cursor:not-allowed}
input.woocommerce-invalid,textarea.woocommerce-invalid,
.woocommerce form .form-row.woocommerce-invalid input.input-text{border-color:var(--accent);box-shadow:0 0 0 3px rgba(154,42,28,.12)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 18px) center,calc(100% - 13px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.25rem}
input[type=checkbox],input[type=radio]{width:1.15rem;height:1.15rem;accent-color:var(--accent);margin-right:.5rem}
label{display:block;font-weight:700;color:var(--ink);font-size:.92rem;margin-bottom:.3rem}
.form-field{margin-bottom:1.1rem;max-width:34rem}
/* Contact-form field errors share the coupon error's icon row so every
   validation message on the site looks and spaces the same way. */
.form-field .field-error{
  display:flex;align-items:center;gap:.45rem;
  color:var(--accent);font-size:14px;line-height:1.45;margin-top:.4rem;
}
.form-field .field-error::before{
  content:"";flex:0 0 auto;width:1.05rem;height:1.05rem;
  background:no-repeat center/contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a2a1c' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Cpath d='M12 16.4v.2'/%3E%3C/svg%3E");
}

/* Quantity stepper (WooCommerce's own markup, styled not replaced) */
.quantity{display:inline-flex;align-items:center;border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden}
.quantity .qty{width:3.5rem;border:0;border-radius:0;text-align:center;padding:.6rem .4rem}
.quantity .qty:focus-visible{box-shadow:none;outline:2px solid var(--accent);outline-offset:-2px}

/* The theme's own message box (contact form result). Same two-column icon +
   text grid as the WooCommerce notices so every message on the site — Woo's
   or the theme's — has identical icon spacing and alignment. */
.notice-box{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;
  column-gap:.65rem;row-gap:.5rem;
  border:1px solid var(--line);border-left:4px solid var(--ok);
  background:var(--paper-raised);border-radius:var(--radius-card);
  padding:1rem 1.15rem;margin-bottom:1.5rem;
}
.notice-box::before{
  content:"";grid-column:1;grid-row:1;align-self:center;
  width:1.3rem;height:1.3rem;background:no-repeat center/contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f6b3a' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12 2.8 2.8L16 9.6'/%3E%3C/svg%3E");
}
.notice-box>*{grid-column:2;margin-bottom:0}
.notice-box>*+*{margin-top:.5rem}
/* Every notice's message lives in this single wrapper, so a mix of inline
   elements and plain text can never auto-place into the icon column. */
.notice-box__body>*{margin-bottom:0}
.notice-box__body>*+*{margin-top:.5rem}
.notice-box--warn{border-left-color:var(--accent)}
.notice-box--warn::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a2a1c' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Cpath d='M12 16.4v.2'/%3E%3C/svg%3E");
}

/* ---------- review summary + star breakdown ---------- */
.review-summary{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:flex-start;padding:1.5rem 0;border-bottom:1px solid var(--line);margin-bottom:1.5rem}
.review-summary__score{display:flex;flex-direction:column;gap:.3rem;min-width:7rem}
.review-summary__number{font-family:var(--font-display);font-size:2.5rem;font-weight:700;color:var(--ink);line-height:1}
.review-summary__count{font-size:.85rem;color:var(--muted)}
.star-rating{color:var(--accent)}
.review-summary__bars{flex:1;min-width:0;width:100%;display:flex;flex-direction:column;gap:.4rem}
.review-bar{display:grid;grid-template-columns:3.2rem 1fr 2.6rem;align-items:center;gap:.6rem;font-size:.82rem;color:var(--muted)}
.review-bar__track{background:var(--line);border-radius:999px;height:.5rem;overflow:hidden}
.review-bar__fill{display:block;height:100%;background:var(--accent);border-radius:999px}
.woocommerce-noreviews-invite{border:1px dashed var(--line-strong);border-radius:var(--radius);padding:1.5rem;text-align:center;margin-bottom:1.5rem}
.woocommerce-noreviews-invite .woocommerce-noreviews{font-family:var(--font-display);font-size:1.15rem;color:var(--ink);margin-bottom:.4rem}
.commentlist{list-style:none;padding:0;margin:0}
.commentlist .comment{border-bottom:1px solid var(--line);padding:1.25rem 0}
.commentlist .meta{font-size:.85rem;color:var(--muted);margin-bottom:.4rem}
.commentlist .woocommerce-review__author{font-weight:700;color:var(--ink)}
.commentlist .woocommerce-review__dash{margin:0 .3rem}
.commentlist .woocommerce-review__verified{display:inline-block;background:var(--ok);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:.15rem .5rem;border-radius:999px;margin-left:.4rem}
.commentlist .description p:last-child{margin-bottom:0}

/* ---------- breadcrumbs + pagination ---------- */
.woocommerce-breadcrumb a{text-decoration:none}
.woocommerce-breadcrumb a:hover{text-decoration:underline}
.woocommerce-pagination ul.page-numbers,ul.page-numbers{list-style:none;display:flex;gap:.4rem;padding:0;margin:2rem 0 0;flex-wrap:wrap}
.page-numbers li{display:inline-flex}
.page-numbers a,.page-numbers span{display:inline-flex;align-items:center;justify-content:center;min-width:2.4rem;min-height:2.4rem;padding:0 .5rem;border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);text-decoration:none;font-weight:600;font-size:.9rem}
.page-numbers a:hover{border-color:var(--ink)}
.page-numbers a:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
.page-numbers .current{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ---------- page + entry ---------- */
.page-head{padding:clamp(1.5rem,5vw,3rem) 0 0}
.page-head h1{margin-bottom:.35rem}
.entry{padding:1.25rem 0 clamp(1.75rem,6vw,4rem)}
.entry ul,.entry ol{padding-left:1.25rem}
.entry h2{margin-top:2rem}
.entry table{width:100%;border-collapse:collapse}
.entry th,.entry td{border:1px solid var(--line);padding:.6rem .75rem;text-align:left}

/* ---------- footer ----------
   Four columns over a trust strip over a bottom bar. A one-line footer reads
   as an abandoned site; this is where both a buyer and a payment processor's
   review team look for evidence that there is a business behind the store. */
.site-footer{background:var(--ink);color:#c3b9a8;padding:clamp(2.75rem,6vw,4rem) 0 2rem;font-size:16px;margin-top:auto}
.site-footer a{color:#e6dfd1;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}

/* Two link columns even on a phone — one stacked column made the footer four
   screens tall with the tab bar sitting on top of it. */
.footer-cols{display:grid;gap:2rem 1.5rem;grid-template-columns:1fr 1fr}
.footer-col--brand{grid-column:1/-1}
@media (min-width:640px){.footer-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
  .footer-col--brand{grid-column:1/-1;max-width:34rem}}
@media (min-width:960px){.footer-cols{grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:3rem}
  .footer-col--brand{grid-column:auto;max-width:none}}

.footer-brand{display:flex;align-items:center;gap:.85rem;font-family:var(--font-display);color:var(--paper);font-weight:700;margin-bottom:1rem}
/* max-height (not height) so this can't lose a specificity fight with
   WooCommerce's own ".woocommerce-page img{height:auto}" reset on shop/
   cart/checkout pages — the two properties simply don't collide. */
.footer-logo{max-height:52px;width:auto;display:block}
.footer-blurb{color:#a99e8d;font-size:15.5px;line-height:1.65;max-width:38ch;margin-bottom:1.1rem}
.footer-contact{display:flex;align-items:center;gap:.5rem;margin:0;font-size:16px}
.footer-contact .icon{color:#e0a99c}

.footer-heading{font-family:var(--font);font-size:13px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#8d8372;margin:0 0 1rem}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.65rem}

.footer-trust{
  display:flex;flex-wrap:wrap;gap:.75rem 2rem;list-style:none;margin:2.5rem 0 0;padding:1.5rem 0 0;
  border-top:1px solid rgba(255,255,255,.13);
}
.footer-trust li{display:flex;align-items:center;gap:.5rem;font-size:14.5px;font-weight:600;color:#a99e8d}
.footer-trust .icon{color:#e0a99c}

.footer-bottom{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.13)}
.footer-copy{margin:0 0 .6rem;font-size:14.5px;color:#8d8372}
.footer-note{margin:0;font-size:14.5px;line-height:1.6;color:#8d8372;max-width:78ch}

@media (max-width:600px){
  .footer-col ul{gap:0}
  .footer-col ul li a{display:flex;align-items:center;min-height:44px}
  .footer-trust{gap:.85rem 1.5rem}
}
body{display:flex;flex-direction:column;min-height:100vh}
.site-content{flex:1}

/* ---------- WooCommerce ---------- */
/* Keep .container's side gutters — zeroing them ran the product page flush to
   the screen edge on phones. */
.woo-wrap{padding:1.25rem 1.25rem clamp(1.75rem,6vw,4rem)}
.woocommerce .woocommerce-breadcrumb{font-size:.87rem;color:var(--muted);margin-bottom:1.25rem}
.woocommerce .woocommerce-breadcrumb a{color:var(--muted)}
.woocommerce-products-header__title,.woocommerce-products-header{margin-bottom:1rem}
/* auto-fit with a max column width plus justify-content:center: a catalogue
   of one or two titles sits centred instead of orphaned in the bottom-left
   corner of a 1150px grid, and a full catalogue still fills the row. */
.woocommerce .products ul,.woocommerce ul.products{display:grid;gap:1.75rem;grid-template-columns:repeat(auto-fit,minmax(270px,320px));justify-content:center;margin:0;padding:0;list-style:none}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none}
/* Each result is a real card, matching the cards on the home page, rather
   than a bare thumbnail with text under it floating in white space. */
.woocommerce ul.products li.product{
  width:auto!important;float:none!important;margin:0!important;text-align:left;
  display:flex;flex-direction:column;
  background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius-card);
  padding:1.1rem;box-shadow:var(--shadow-card);
  transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;
}
.woocommerce ul.products li.product:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-3px);border-color:#cdc2ab}
.woocommerce ul.products li.product > a:first-of-type{text-decoration:none;display:block}
.woocommerce ul.products li.product .button{margin-top:auto;align-self:stretch}
@media (prefers-reduced-motion:reduce){.woocommerce ul.products li.product:hover{transform:none}}
/* --------------------------------------------------------------------------
   Product imagery: one rule everywhere it appears.

   Every product image sits in a fixed-ratio box and is fitted with
   object-fit:contain on a white ground. contain (never cover) means a cover
   is never cropped — the Shop grid used to slice the top off the book title —
   and never stretched; if the ratio doesn't match, it letterboxes cleanly
   against white, which is what a book cover should sit on anyway.
   ----------------------------------------------------------------------- */
.woocommerce ul.products li.product a img,
.woocommerce div.product div.images .woocommerce-product-gallery__image img,
.highlight-media img{
  aspect-ratio:3/4;object-fit:contain;background:#fff;width:100%;height:auto;
}
/* No second frame inside the card frame — just the white ground the cover
   is designed to sit on. max-height caps how tall a portrait cover can make
   the card; contain keeps it uncropped inside that cap either way. */
.woocommerce ul.products li.product a img{border-radius:var(--radius);border:1px solid var(--line);box-shadow:none;margin-bottom:1rem;max-height:320px}
/* Three lines of title, then an ellipsis. A 90-character book title should
   not be able to make one card twice the height of its neighbours. */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--font-display);font-size:1.05rem!important;line-height:1.3;font-weight:700;color:var(--ink);padding:0!important;margin:0 0 .5rem}
.woocommerce ul.products li.product .price{color:var(--ink)!important;font-family:var(--font-display);font-size:1.35rem;font-weight:700;display:block;margin-bottom:1rem}
/* Reassurance under the price — a digital product needs to say so in the
   grid, not only on the product page. */
.loop-meta{display:flex;align-items:center;gap:.4rem;font-size:13.5px;font-weight:600;color:var(--muted);margin:-.5rem 0 1rem}
.loop-meta .icon{color:var(--accent)}
.woocommerce ul.products li.product .button{margin-top:0}
.woocommerce .woocommerce-result-count,.woocommerce .woocommerce-ordering{margin-bottom:1.5rem}

.woocommerce div.product{display:grid;gap:2rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:860px){.woocommerce div.product{grid-template-columns:minmax(0,38%) minmax(0,1fr);column-gap:3.5rem}}
.woocommerce div.product div.images,.woocommerce div.product div.summary{width:auto!important;float:none!important;margin:0!important}
.woocommerce div.product div.images img{border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--line);background:#fff}
/* Gallery thumbnails: small square wells, cover fitted inside, never cropped. */
.woocommerce div.product div.images .flex-control-thumbs li img{
  aspect-ratio:1/1;object-fit:contain;background:#fff;padding:.25rem;box-shadow:none;
}
/* Cart line items and the checkout order summary use the same treatment, so
   the cover looks identical from the grid all the way to "place order". */
.woocommerce table.cart img,
.woocommerce-cart table.shop_table img,
.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img{
  aspect-ratio:3/4;object-fit:contain;background:#fff;width:72px;height:auto;
  border:1px solid var(--line);border-radius:var(--radius);padding:.2rem;
}
.woocommerce div.product .product_title{font-family:var(--font-display);font-size:clamp(1.6rem,3.5vw,2.15rem);margin-bottom:.5rem}
.woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--ink);font-family:var(--font-display);font-size:1.85rem;font-weight:700;margin-bottom:1rem}
.woocommerce div.product form.cart{margin-bottom:1.25rem}
.woocommerce div.product form.cart div.quantity{display:none}
.woocommerce div.product form.cart .button{float:none;display:block;width:100%;max-width:22rem;font-size:1.1rem;padding:1.05rem 1.5rem}
@media (max-width:600px){
  .woocommerce div.product form.cart .button{max-width:none}
  .woocommerce div.product div.images .flex-control-thumbs{flex-wrap:wrap}
}
.woocommerce div.product .woocommerce-product-details__short-description{font-size:18px;line-height:1.6}
.woocommerce div.product .product_meta{font-size:.85rem;color:var(--muted);margin-top:1rem}
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,.woocommerce div.product .upsells{grid-column:1/-1}
.woocommerce div.product .related h2,.woocommerce div.product .upsells h2{font-family:var(--font-display)}
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0 0 .5rem;margin:0 0 1.5rem;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;margin:0 1.25rem 0 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{font-weight:700;color:var(--muted);padding:.5rem 0}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.product-extras{margin:1.5rem 0}
.product-extras h2{font-size:1.15rem;margin-bottom:.75rem}

/* ---------- cart ----------
   Two columns on desktop: line items on the left, an order-summary card on
   the right that follows you down the page. The stock single-column stack
   left the "Proceed to checkout" button below the fold on a laptop. */
.woocommerce table.shop_table{border-radius:var(--radius-card);border-color:var(--line);background:var(--paper-raised);overflow:hidden}
.woocommerce table.shop_table th,.woocommerce table.shop_table td{border-color:var(--line);padding:1rem .9rem}
.woocommerce table.shop_table thead th{background:var(--paper-deep);font-family:var(--font);font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-strong)}
.woocommerce-cart table.cart td.product-name a{text-decoration:none;font-weight:700;color:var(--ink)}
.woocommerce-cart table.cart td.product-name a:hover{color:var(--accent);text-decoration:underline}
.woocommerce-cart table.cart td.product-remove a.remove{color:var(--muted)!important;font-size:1.4rem;line-height:1}
.woocommerce-cart table.cart td.product-remove a.remove:hover{background:transparent!important;color:var(--accent)!important}
/* Beat WooCommerce's own "table.cart img{width:32px}" — a 32px thumbnail of a
   book cover is unreadable. */
.woocommerce-cart table.cart td.product-thumbnail{width:88px}
.woocommerce-cart table.cart td.product-thumbnail img,
.woocommerce table.cart img{width:64px!important;max-width:64px;height:auto}

.woocommerce-cart .cart-fixed-quantity-hidden{display:none}
.cart-fixed-quantity .woocommerce-cart-form th.product-quantity,
.cart-fixed-quantity .woocommerce-cart-form td.product-quantity,
.cart-fixed-quantity .woocommerce-cart-form button[name="update_cart"]{display:none}

/* Coupon row: the stock markup is an input and a button jammed together. */
.woocommerce-cart .actions{padding:1rem .9rem!important;background:var(--paper-raised)}
.woocommerce-cart .actions .coupon{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.woocommerce-cart .actions .coupon label{margin:0}
.woocommerce-cart .actions .coupon #coupon_code{width:auto;min-width:12rem;flex:1 1 12rem}
/* Coupon is the secondary action: outlined, so the solid brick red stays
   reserved for "Proceed to checkout" and the two never compete. */
.woocommerce-cart .actions .coupon .button{
  flex:0 0 auto;background:transparent;color:var(--ink);border-color:var(--line-strong);box-shadow:none;
}
.woocommerce-cart .actions .coupon .button:hover{
  background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:none;transform:none;
}
/* Folded behind "Have a coupon?" by playbook.js (initCouponToggle). */
.woocommerce-cart .actions .coupon.has-toggle:not(.is-open) > :not(.coupon-toggle){display:none}
.woocommerce-cart .actions .coupon.has-toggle::before{display:none}
.coupon-toggle{
  width:100%;min-height:44px;padding:.35rem 0;margin:0;background:none;border:0;
  font:inherit;font-size:15px;font-weight:600;color:var(--accent);text-align:left;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.coupon-toggle:hover{color:var(--accent-dark)}
.coupon-toggle:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

@media (min-width:900px){
  .woocommerce-cart .woocommerce{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,22rem);gap:2.5rem;align-items:start}
  .woocommerce-cart .woocommerce-cart-form{grid-column:1;margin:0}
  .woocommerce-cart .cart-collaterals{grid-column:2;position:sticky;top:6rem}
  .woocommerce-cart .woocommerce-notices-wrapper{grid-column:1/-1}
}
.woocommerce-cart .cart-collaterals .cart_totals{
  background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius-card);
  padding:1.5rem;box-shadow:var(--shadow-card);
}
.woocommerce-cart .cart_totals h2{font-size:1.2rem;margin-bottom:1rem}
.woocommerce-cart .cart_totals table.shop_table{border:0;background:none;margin-bottom:1.25rem}
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td{border:0;border-bottom:1px solid var(--line);padding:.7rem 0;background:none}
.woocommerce-cart .cart_totals tr.order-total th,
.woocommerce-cart .cart_totals tr.order-total td{border-bottom:0;font-size:1.15rem}
.woocommerce-cart .wc-proceed-to-checkout{padding:0}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button{display:flex;width:100%;font-size:1.05rem}
/* Same reassurance line as the product page, at the moment of commitment. */
.cart-reassurance{display:flex;flex-direction:column;gap:.5rem;margin:1.25rem 0 0;font-size:14px;color:var(--muted)}
.cart-reassurance li{display:flex;align-items:center;gap:.45rem}
.cart-reassurance .icon{color:var(--accent)}
/* ---------- notices ----------
   WooCommerce absolutely positions the status icon at `left:1.5em` and relies
   on the notice having `padding-left:3.5em` to keep the text clear of it. Any
   theme that restyles that padding — this one did — drops the icon straight on
   top of the first word ("How to Land..." rendered as "ow to Land...").
   Fixed at the root: the icon comes out of absolute positioning entirely and
   becomes a real row/grid item, so spacing no longer depends on one padding
   value matching one offset. Nothing here can overlap at any text length,
   icon size or viewport width. */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:center;column-gap:.65rem;row-gap:.75rem;
  padding:1rem 1.25rem;margin:0 0 1.5rem;
  background:var(--paper-raised);color:var(--body);
  border:1px solid var(--line);border-top:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:var(--radius-card);
  list-style:none;
}
/* Grid, not flex: the message body is a bare text node, and as a flex item a
   long product name cannot shrink, so flex-wrap dropped the icon onto a line
   of its own. Pinning the icon to cell 1/1 leaves the text to auto-place
   beside it at 2/1 no matter how long it runs. */
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{
  position:static;top:auto;left:auto;
  grid-column:1;grid-row:1;align-self:center;
  display:block;font-size:1.2rem;line-height:1;color:var(--accent);
}
/* WooCommerce's clearfix ::after would otherwise become an empty flex/grid
   item and consume one gap. */
.woocommerce-message::after,.woocommerce-info::after,.woocommerce-error::after{display:none}
/* Everything that is a real element goes in the text column; the bare text
   node auto-places there on its own. */
.woocommerce-message>*,.woocommerce-info>*{grid-column:2;min-width:0}

.woocommerce-message{border-left-color:var(--ok)}
.woocommerce-message::before{color:var(--ok)}
.woocommerce-info{border-left-color:var(--ink)}
.woocommerce-info::before{color:var(--ink)}
.woocommerce-error{border-left-color:var(--accent)}
.woocommerce-error::before{color:var(--accent)}

/* A button inside a notice ("View cart", "Continue shopping") is floated right
   by WooCommerce, which takes it out of flow and lets the message text run
   underneath it. As a grid item it sits on its own row in the text column. */
.woocommerce-message .button,.woocommerce-info .button,.woocommerce-error .button{
  float:none!important;grid-column:2;justify-self:start;
  min-height:40px;padding:.5rem 1.1rem;font-size:.92rem;
}

/* The error notice is a <ul>: every <li> goes in the text column so a second
   message lines up under the first instead of tucking beneath the icon. */
ul.woocommerce-error>li{grid-column:2;margin:0;padding:0!important;list-style:none}

/* ---------- every other icon-beside-text pair WooCommerce ships ----------
   Same treatment as the notices: a real flex row with an explicit gap, rather
   than an inline pseudo-element with a margin. Beyond the spacing being
   predictable, a long value (a 60-character filename, a wrapped address) now
   aligns under itself instead of wrapping back under the icon. */
.woocommerce-account ul.digital-downloads li,
.woocommerce .woocommerce-customer-details .woocommerce-customer-details--phone,
.woocommerce .woocommerce-customer-details .woocommerce-customer-details--email,
.woocommerce .cart-collaterals .shipping-calculator-button{
  display:flex;align-items:center;gap:.55rem;
}
/* The order-details email/phone glyphs carry BOTH failure modes at once:
   `position:absolute` and `margin-left:-1.5em`. Absolute takes them out of
   flow so the flex row reserves no space, and the negative margin then drops
   them straight onto the first characters of the address. Resetting position
   and margin (at the same specificity as WooCommerce's own rule, or it loses
   the cascade) puts them back in the row. */
.woocommerce-account ul.digital-downloads li::before,
.woocommerce .woocommerce-customer-details .woocommerce-customer-details--phone::before,
.woocommerce .woocommerce-customer-details .woocommerce-customer-details--email::before,
.woocommerce .cart-collaterals .shipping-calculator-button::after{
  position:static;top:auto;left:auto;right:auto;bottom:auto;
  flex:0 0 auto;margin:0;font-size:1.05rem;line-height:1;color:var(--accent);
}
.woocommerce-account ul.digital-downloads{list-style:none;padding:0;margin:0}
.woocommerce-account ul.digital-downloads li{padding:.55rem 0;border-bottom:1px solid var(--line)}
.woocommerce-account ul.digital-downloads li:last-child{border-bottom:0}
.woocommerce-account ul.digital-downloads li .woocommerce-MyAccount-downloads-file{min-width:0}
/* float is a no-op on a flex item; push the remaining-downloads count right. */
.woocommerce-account ul.digital-downloads li .count{float:none;margin-left:auto;color:var(--muted);font-size:14px}

/* Woo drops a spinner ::after at right:1em inside a submitting button; the
   theme's buttons have a smaller right padding than the stock ones, so the
   glyph could land on the last character of the label. */
.woocommerce .button.loading,.woocommerce input.button.loading,
.woocommerce #respond input#submit.loading{padding-right:3rem;position:relative}

/* Star rating is a fixed 5.4em icon box; WooCommerce floats it right, which
   inside the flex/grid review layouts drops it on top of its own label. */
.woocommerce .star-rating{float:none;margin:0}
.woocommerce .woocommerce-product-rating .star-rating{display:inline-block;vertical-align:middle;margin-right:.5rem}
/* Inline coupon error. Newer WooCommerce renders this one as a bare <p> with
   no icon and no theme styling at all — 12.75px of default red text under the
   field. Same icon-plus-text row as every other message on the site. */
.coupon-error-notice,
.woocommerce form.checkout_coupon .coupon-error-notice,
.woocommerce-cart table.cart td.actions .coupon .coupon-error-notice,
.woocommerce-checkout table.cart td.actions .coupon .coupon-error-notice{
  display:flex;align-items:center;gap:.45rem;flex-basis:100%;
  margin:.6rem 0 0;font-size:14px;line-height:1.45;color:var(--accent);
}
.coupon-error-notice::before{
  content:"";flex:0 0 auto;width:1.05rem;height:1.05rem;
  background:no-repeat center/contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a2a1c' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Cpath d='M12 16.4v.2'/%3E%3C/svg%3E");
}
/* The coupon field sits outside .form-row, so it never picked up the theme's
   input styling either — it was still wearing WooCommerce's default #cfc8d8
   border. Style it like every other field, and make the error state visible
   without waiting for focus (WooCommerce only colours .has-error on :focus). */
.woocommerce table.cart td.actions .coupon .input-text,
.woocommerce form.checkout_coupon .input-text{
  font:inherit;font-size:1rem;color:var(--ink);background:var(--paper-raised);
  border:1px solid var(--line-strong);border-radius:var(--radius);padding:.7rem .85rem;
}
.woocommerce-cart table.cart td.actions .coupon .input-text.has-error,
.woocommerce-checkout table.cart td.actions .coupon .input-text.has-error,
.woocommerce form.checkout_coupon .input-text.has-error,
.woocommerce form .form-row input.input-text.has-error,
input.has-error{border-color:var(--accent);box-shadow:0 0 0 3px rgba(154,42,28,.12)}

/* Notices printed by playbook_render_notices() on the theme's own templates. */
.playbook-notices{padding-top:1.5rem}
.playbook-notices .woocommerce-message:last-child,
.playbook-notices .woocommerce-info:last-child,
.playbook-notices .woocommerce-error:last-child{margin-bottom:0}

/* ---------- checkout ----------
   Billing on the left, a sticky order-summary card on the right, the way a
   buyer expects a checkout to look. The stock single column put the order
   total and "Place order" a full screen below the last address field. */
@media (min-width:900px){
  .woocommerce-checkout form.checkout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,24rem);gap:0 3rem;align-items:start}
  .woocommerce-checkout form.checkout #customer_details{grid-column:1;grid-row:1/3}
  .woocommerce-checkout form.checkout #order_review_heading{grid-column:2;grid-row:1;margin-top:0}
  .woocommerce-checkout form.checkout #order_review{grid-column:2;grid-row:2;position:sticky;top:6rem}
}
.woocommerce-checkout #order_review{
  background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius-card);
  padding:1.5rem;box-shadow:var(--shadow-card);
}
.woocommerce-checkout #order_review table.shop_table{border:0;background:none;margin-bottom:1rem}
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td{border:0;border-bottom:1px solid var(--line);padding:.7rem 0;background:none}
.woocommerce-checkout #order_review table.shop_table thead th{background:none;padding-top:0}
.woocommerce-checkout #order_review tr.order-total th,
.woocommerce-checkout #order_review tr.order-total td{border-bottom:0;font-size:1.15rem}
.woocommerce-checkout #payment{background:none;border-radius:0}
.woocommerce-checkout #payment ul.payment_methods{border-bottom:1px solid var(--line);padding:0 0 1rem;margin:0 0 1rem}
.woocommerce-checkout #payment div.form-row{padding:0}
.woocommerce-checkout #payment #place_order{display:flex;width:100%;font-size:1.05rem}
.woocommerce-checkout #payment .payment_box{background:var(--paper-deep);border-radius:var(--radius)}
.woocommerce-checkout #payment .payment_box::before{border-bottom-color:var(--paper-deep)}
.woocommerce-checkout h3{font-size:1.2rem}
.checkout-reassurance{display:flex;flex-direction:column;gap:.5rem;margin:1.25rem 0 0;padding:0;list-style:none;font-size:14px;color:var(--muted)}
.checkout-reassurance li{display:flex;align-items:center;gap:.45rem}
.checkout-reassurance .icon{color:var(--accent)}
.woocommerce .cart-collaterals .cart_totals,.woocommerce-checkout #order_review,
.woocommerce .cart-collaterals{width:auto}
.woocommerce-checkout .col2-set .col-1,.woocommerce-checkout .col2-set .col-2,
.woocommerce-cart .cart-collaterals .cart_totals{width:100%;float:none}
.woocommerce form.login,.woocommerce form.register,.woocommerce form.checkout_coupon{border-color:var(--line);border-radius:var(--radius)}
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;padding:0}
.woocommerce-account .woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--line)}
.woocommerce-account .woocommerce-MyAccount-navigation li a{display:block;padding:.6rem 0;text-decoration:none;font-weight:600}
@media (min-width:860px){
  .woocommerce-account .woocommerce-MyAccount-navigation{width:24%}
  .woocommerce-account .woocommerce-MyAccount-content{width:72%}
}

/* =========================================================================
   MOBILE APP SHELL
   Phones are the primary target, so below 820px the site behaves like an
   app: logo-only header, persistent bottom tab bar, generous tap targets.
   ====================================================================== */

/* --- bottom tab bar (mobile only) --- */
.tabbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--paper-raised);
  border-top:1px solid var(--line);
  box-shadow:0 -2px 14px rgba(28,23,18,.10);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar__inner{display:grid;grid-template-columns:repeat(4,1fr)}
.tabbar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;
  min-height:var(--tabbar-h);padding:.5rem .25rem;
  color:var(--muted);text-decoration:none;
  font-size:.7rem;font-weight:700;letter-spacing:.02em;line-height:1;
  -webkit-tap-highlight-color:transparent;transition:color .15s ease,background .15s ease;
}
.tabbar a:active{background:rgba(28,23,18,.06)}
.tabbar a.is-active{color:var(--accent)}
.tabbar svg{width:23px;height:23px;display:block;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tabbar__icon{position:relative;display:block}
.tabbar__badge{
  position:absolute;top:-6px;right:-10px;min-width:17px;height:17px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;border-radius:999px;
  font-size:.65rem;font-weight:700;line-height:1;
}

@media (max-width:820px){
  .tabbar{display:block}

  /* nothing should ever sit underneath the bar */
  .site-footer{padding-bottom:calc(2rem + var(--tabbar-h) + env(safe-area-inset-bottom))}

  /* header collapses to just the logo — Home/Shop/Cart/Account all live in
     the tab bar now, and secondary pages are linked from the footer. */
  .site-header .nav,.site-header .nav-toggle,.site-header .cart-link{display:none!important}
  .header-inner{justify-content:center;min-height:60px}
  .brand{margin-right:0}
  .brand img{max-height:34px}

  /* comfortable, thumb-sized targets everywhere */
  .woocommerce-account .woocommerce-MyAccount-navigation li a{min-height:48px;display:flex;align-items:center}
  .site-footer ul li a,.footer-contact a{min-height:44px;display:inline-flex;align-items:center}
  .btn,.woocommerce a.button,.woocommerce button.button,.wc-block-components-button{min-height:50px;width:100%}
  .hero-actions .btn{width:100%}
  .btn--text{width:auto}
}

/* iOS zooms the page in when a focused input is under 16px. */
input,select,textarea,
.wc-block-components-text-input input,
.wc-block-components-textarea{font-size:17px}

/* =========================================================================
   RESPONSIVE SHOP TABLES (phones)
   Replaces woocommerce-smallscreen.css, which is dequeued in functions.php.
   Generic rule first: any .shop_table_responsive (my-account orders and
   downloads) becomes stacked label/value rows. Then the cart gets a proper
   card layout with the cover image, which the stock stylesheet hides.
   ====================================================================== */
@media (max-width:768px){
  table.shop_table_responsive,
  table.shop_table_responsive tbody,
  table.shop_table_responsive tr,
  table.shop_table_responsive td{display:block;width:100%}
  table.shop_table_responsive thead{display:none}
  table.shop_table_responsive tr{border-bottom:1px solid var(--line);padding:.9rem 1rem}
  table.shop_table_responsive tr:last-child{border-bottom:0}
  table.shop_table_responsive td{
    display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
    border:0;padding:.35rem 0;text-align:right;
  }
  table.shop_table_responsive td[data-title]::before{
    content:attr(data-title);font-weight:700;color:var(--ink);text-align:left;flex:0 0 auto;
  }

  /* Cart totals is a two-column key/value table and already fits a phone.
     Stacking it printed each label twice — once from the <th>, once from the
     <td>'s data-title — so it opts out and stays a table. */
  .cart_totals table.shop_table_responsive{display:table}
  .cart_totals table.shop_table_responsive tbody{display:table-row-group}
  .cart_totals table.shop_table_responsive tr{display:table-row;padding:0}
  .cart_totals table.shop_table_responsive th,
  .cart_totals table.shop_table_responsive td{display:table-cell;padding:.7rem 0}
  .cart_totals table.shop_table_responsive td{text-align:right}
  .cart_totals table.shop_table_responsive td::before{display:none}

  /* Cart: cover + name on one row, price under it, remove on the right. */
  .woocommerce-cart table.cart tr.cart_item{
    display:grid;align-items:start;gap:.15rem .9rem;
    grid-template-columns:72px minmax(0,1fr) 2rem;
    grid-template-areas:"thumb name remove" "thumb price price";
    padding:1.1rem 1rem;
  }
  .woocommerce-cart table.cart tr.cart_item td{display:block;padding:0;text-align:left}
  .woocommerce-cart table.cart tr.cart_item td::before{display:none}
  .woocommerce-cart table.cart td.product-thumbnail{grid-area:thumb;width:auto;display:block}
  .woocommerce-cart table.cart td.product-thumbnail img{width:72px!important;max-width:72px}
  .woocommerce-cart table.cart td.product-name{grid-area:name;font-size:15.5px;line-height:1.4}
  .woocommerce-cart table.cart td.product-remove{grid-area:remove;text-align:right}
  .woocommerce-cart table.cart td.product-subtotal{grid-area:price;font-weight:700;font-size:17px;padding-top:.4rem}
  /* These two have to out-specify the "tr.cart_item td{display:block}" rule
     three lines up, or they come back on phones only. */
  .woocommerce-cart table.cart tr.cart_item td.product-price{display:none}
  body.cart-fixed-quantity table.cart tr.cart_item td.product-quantity{display:none}

  /* Coupon row: full-width field over a full-width button, no wrapping.
     WooCommerce floats .coupon, so it was shrink-to-fit — 196px wide inside a
     330px cell, sitting off to the left with the button under it. float:none
     plus width:100% is what actually makes it fill the row; the ID selector on
     the field is needed to beat the desktop `min-width:12rem` rule, which also
     carries an ID and would otherwise win. */
  .woocommerce-cart table.cart tr:has(td.actions),
  .woocommerce-cart table.cart td.actions{
    display:block;padding:.5rem 1rem!important;
    text-align:left;   /* the generic responsive-table rule right-aligns cells */
  }
  .woocommerce-cart .actions .coupon{
    float:none;width:100%;max-width:none;text-align:left;
    display:flex;flex-direction:column;align-items:stretch;gap:.65rem;
  }
  /* !important is deliberate and scoped: WooCommerce floats this field and
     the theme's own desktop rule pins it to min-width:12rem with an ID
     selector. Without it the field renders 80px wide next to a full-width
     button. */
  .woocommerce-cart table.cart td.actions .coupon input#coupon_code{
    width:100%!important;max-width:none;min-width:0;flex:1 1 auto;float:none;margin:0;
  }
  .woocommerce-cart .actions .coupon .button{width:100%;margin:0;float:none}
  /* A visible label: the stock one is screen-reader-only, so on a phone the
     field read as an unexplained box above a red button. */
  .woocommerce-cart .actions .coupon::before{
    content:"Have a coupon code?";
    font-size:14px;font-weight:700;color:var(--ink);text-align:left;
  }

  /* Checkout order summary sits under the form, not floating. */
  .woocommerce-checkout #order_review{position:static}
  .woocommerce #payment #place_order,
  .woocommerce #payment .terms{width:100%;float:none}
  .woocommerce .lost_reset_password .form-row-first,
  .woocommerce .lost_reset_password .form-row-last{width:100%;float:none}

  /* ---------- My account (phone) ----------
     WooCommerce floats every two-column block on this page at 48% regardless
     of viewport: the logged-in nav beside the content, and the logged-out
     Login card beside the Register card. On a 400px phone that is two 175px
     columns — two or three words per line. All of it stacks here. */
  .woocommerce .u-columns,
  .woocommerce .col2-set{display:block}
  .woocommerce .u-columns .u-column1,
  .woocommerce .u-columns .u-column2,
  .woocommerce .col2-set .col-1,
  .woocommerce .col2-set .col-2,
  .woocommerce-page .col2-set .col-1,
  .woocommerce-page .col2-set .col-2{width:100%;float:none;margin:0}
  .woocommerce .u-columns .u-column2{margin-top:1.75rem}

  /* Login / Register as two stacked cards. */
  .woocommerce-account .u-columns h2{font-size:1.3rem;margin-bottom:.85rem}
  .woocommerce form.login,
  .woocommerce form.register{
    margin:0;padding:1.35rem 1.25rem;
    background:var(--paper-raised);border:1px solid var(--line);
    border-radius:var(--radius-card);box-shadow:var(--shadow-card);
  }
  .woocommerce form.login .form-row,
  .woocommerce form.register .form-row{margin:0 0 1.1rem;padding:0;width:100%}
  .woocommerce form.login .form-row:last-of-type,
  .woocommerce form.register .form-row:last-of-type{margin-bottom:0}
  .woocommerce form.login .button,
  .woocommerce form.register .button{width:100%;margin:.25rem 0 0}
  /* Checkbox + its text on one line: the theme's global `label{display:block}`
     was stacking "Remember me" under its own checkbox and wrapping it. */
  .woocommerce form .form-row label.woocommerce-form-login__rememberme,
  .woocommerce-form-login__rememberme{
    display:flex;align-items:center;gap:.55rem;
    margin:0;font-size:15px;font-weight:600;color:var(--ink);
  }
  .woocommerce form .form-row label.woocommerce-form-login__rememberme input{margin:0;flex:0 0 auto}
  .woocommerce-form-login__rememberme span{font-weight:600}
  .woocommerce-LostPassword{margin:1rem 0 0;font-size:15px}
  /* The register card's privacy paragraph is the longest text on the page. */
  .woocommerce form.register .woocommerce-privacy-policy-text p,
  .woocommerce form.register > p:not(.form-row){font-size:15px;line-height:1.6;color:var(--muted)}
  /* Password field: keep the reveal button clear of the typed characters. */
  .woocommerce form .password-input{display:block;width:100%}
  .woocommerce form .password-input input{padding-right:3rem}

  /* Logged-in: nav above content, as a card list of full-width rows. */
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content{float:none;width:100%}
  .woocommerce-account .woocommerce-MyAccount-navigation{
    margin:0 0 2rem;background:var(--paper-raised);
    border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;
    box-shadow:var(--shadow-card);
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--line)}
  .woocommerce-account .woocommerce-MyAccount-navigation li:last-child{border-bottom:0}
  .woocommerce-account .woocommerce-MyAccount-navigation li a{
    padding:0 1.1rem;min-height:54px;
    display:flex;align-items:center;gap:.85rem;
    font-size:16px;font-weight:600;color:var(--ink);text-decoration:none;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
  .woocommerce-account .woocommerce-MyAccount-navigation li.is-active>a{
    color:var(--accent);background:var(--accent-soft);
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li a:active{background:rgba(28,23,18,.05)}

  /* An icon per row and a chevron on the right, so the account menu reads
     like a phone settings screen instead of six lines of link text. Keyed off
     WooCommerce's own per-endpoint classes, so no template change is needed. */
  .woocommerce-account .woocommerce-MyAccount-navigation li a::before{
    content:"";flex:0 0 auto;width:1.25rem;height:1.25rem;
    background:no-repeat center/contain;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li a::after{
    content:"";margin-left:auto;flex:0 0 auto;width:.85rem;height:.85rem;opacity:.4;
    background:no-repeat center/contain;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1712' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E");
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard a::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1712' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.5'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.5'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--orders a::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1712' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5h12v17l-3-1.6-3 1.6-3-1.6-3 1.6Z'/%3E%3Cpath d='M9 8h6M9 12h6'/%3E%3C/svg%3E");
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--downloads a::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1712' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v11'/%3E%3Cpath d='M7.5 10.5 12 15l4.5-4.5'/%3E%3Cpath d='M4.5 18.5v2h15v-2'/%3E%3C/svg%3E");
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-address a::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1712' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s6.5-6 6.5-11a6.5 6.5 0 1 0-13 0C5.5 15 12 21 12 21Z'/%3E%3Ccircle cx='12' cy='10' r='2.4'/%3E%3C/svg%3E");
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-account a::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1712' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.6'/%3E%3Cpath d='M4.8 20.5a7.4 7.4 0 0 1 14.4 0'/%3E%3C/svg%3E");
  }
  /* Log out is the one destructive row: separated, tinted, and with no
     chevron, because it does not lead anywhere. */
  .woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout{border-top:1px solid var(--line)}
  .woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a{color:var(--accent)}
  .woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a::after{display:none}
  .woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a2a1c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4.5h-8v15h8'/%3E%3Cpath d='M11 12h9.5'/%3E%3Cpath d='m17 8.5 3.5 3.5L17 15.5'/%3E%3C/svg%3E");
  }

  /* Dashboard greeting reads as a header, not a stray paragraph. */
  .woocommerce-account .woocommerce-MyAccount-content>p:first-of-type{
    background:var(--paper-raised);border:1px solid var(--line);
    border-radius:var(--radius-card);padding:1rem 1.15rem;margin:0 0 1.25rem;
    font-size:16px;
  }

  /* Product "additional information" attribute table. */
  .woocommerce table.shop_attributes tr,
  .woocommerce table.shop_attributes th,
  .woocommerce table.shop_attributes td{display:block;width:100%;text-align:left}
  .woocommerce table.shop_attributes th{padding-bottom:0;border-bottom:0}
}

/* Momentum scrolling + in-page anchors that don't jump under the sticky header. */
html{scroll-behavior:smooth;scroll-padding-top:80px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Visible pressed state on every tappable thing (mobile has no hover). */
@media (hover:none){
  a:active,button:active,summary:active{opacity:.75}
}

/* Quote band with no image: the text column takes the full width instead of
   leaving an empty 420px media column beside it. */
@media (min-width:900px){
  .band-grid--textonly{grid-template-columns:minmax(0,1fr)}
  .band-grid--textonly .band-body{max-width:56rem;margin-inline:auto}
}