/*
Theme Name: Tuwaiq
Theme URI: https://tuwaiqseha.com/
Author: tuwaiqseha.com
Description: Arabic-first, RTL-native block theme for a Saudi health and supplements affiliate blog. Cairo typography, WCAG AA colour system, built-in affiliate disclosure and medical reviewer support.
Version: 2.0
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tuwaiq
Tags: blog, rtl-language-support, block-styles, full-site-editing, accessibility-ready
*/


/* =====================================================================
   طويق — design tokens (mirror of tokens.md / theme.json)
   Every colour pair used here is listed with its ratio in tokens.md.
   ===================================================================== */
:root{
  --bg:#F7F2EA; --surface:#FFFFFF; --surface-2:#EDE6D8;
  --border:#D9D0C0; --border-strong:#857B6B;
  --text:#26221D; --text-muted:#5E564B;
  --primary:#0E5A5C; --primary-hover:#0A4547; --primary-soft:#DCEDEB; --on-primary:#FFFFFF; --link:#0E5A5C;
  --accent:#E5A83A; --accent-ink:#8A5A0B; --accent-soft:#FBEFD6; --on-accent:#26221D;
  --star:#B8730F; --star-empty:#D9D0C0;
  --success:#2D6A3E; --success-soft:#DFF0E3; --danger:#A3392A; --danger-soft:#F8E3DF;
  --footer-bg:#1E2A2B; --footer-text:#E9E2D5;
  --shadow-sm:0 1px 2px rgba(38,34,29,.06);
  --shadow-md:0 4px 14px rgba(38,34,29,.08),0 1px 2px rgba(38,34,29,.05);
  --shadow-lg:0 10px 28px rgba(38,34,29,.12);
  --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:16px; --r-pill:999px;
  --s-10:.25rem; --s-20:.5rem; --s-30:.75rem; --s-40:1rem; --s-50:1.5rem; --s-60:2rem; --s-70:3rem; --s-80:4rem; --s-90:6rem;
  --gutter:clamp(1rem,.5rem + 2vw,2rem);
  --font:"Cairo","Segoe UI",Tahoma,"Noto Sans Arabic","Noto Naskh Arabic","Geeza Pro",sans-serif;
  --fs-xs:.8125rem; --fs-sm:.9375rem; --fs-base:clamp(1.0625rem,1rem + .25vw,1.125rem); --fs-md:1.1875rem; --fs-lg:1.375rem;
  --fs-xl:clamp(1.625rem,1.3rem + 1.2vw,1.875rem); --fs-2xl:clamp(1.875rem,1.4rem + 2vw,2.5rem); --fs-3xl:clamp(2.125rem,1.5rem + 2.8vw,3.125rem);
  --t:160ms ease-out;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#161A1B; --surface:#1F2527; --surface-2:#283032;
    --border:#3A4447; --border-strong:#8A9498;
    --text:#EDE7DB; --text-muted:#B5AC9E;
    --primary:#63C4B8; --primary-hover:#86D6CC; --primary-soft:#1B3A3A; --on-primary:#0C1F1F; --link:#7AD0C5;
    --accent:#F0B85A; --accent-ink:#F0B85A; --accent-soft:#3A2E17; --on-accent:#1A1408;
    --star:#F0B85A; --star-empty:#3A4447;
    --success:#7FC994; --success-soft:#1B3325; --danger:#F0917F; --danger-soft:#3A2320;
    --footer-bg:#0F1314; --footer-text:#E9E2D5;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 4px 14px rgba(0,0,0,.45); --shadow-lg:0 10px 28px rgba(0,0,0,.55);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#161A1B; --surface:#1F2527; --surface-2:#283032;
  --border:#3A4447; --border-strong:#8A9498;
  --text:#EDE7DB; --text-muted:#B5AC9E;
  --primary:#63C4B8; --primary-hover:#86D6CC; --primary-soft:#1B3A3A; --on-primary:#0C1F1F; --link:#7AD0C5;
  --accent:#F0B85A; --accent-ink:#F0B85A; --accent-soft:#3A2E17; --on-accent:#1A1408;
  --star:#F0B85A; --star-empty:#3A4447;
  --success:#7FC994; --success-soft:#1B3325; --danger:#F0917F; --danger-soft:#3A2320;
  --footer-bg:#0F1314; --footer-text:#E9E2D5;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 4px 14px rgba(0,0,0,.45); --shadow-lg:0 10px 28px rgba(0,0,0,.55);
  color-scheme:dark;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{direction:rtl}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:var(--fs-base); font-weight:400; line-height:1.8;
  letter-spacing:0; text-align:start; font-kerning:normal; -webkit-font-smoothing:antialiased;
}
@media (min-width:782px){ body{line-height:1.85} }
h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:0; line-height:1.35; text-wrap:balance}
p{margin:0}
a{color:var(--link); text-underline-offset:.2em; text-decoration-thickness:1px}
a:hover{color:var(--primary-hover)}
:where(a,button,input,[tabindex]):focus-visible{outline:3px solid var(--primary); outline-offset:2px}
img,svg{max-inline-size:100%; display:block}
[lang="en"],[dir="ltr"]{unicode-bidi:isolate}
.visually-hidden{position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.wrap{inline-size:min(72rem,100% - 2*var(--gutter)); margin-inline:auto}
.section{padding-block:var(--s-70)}
@media (min-width:782px){ .section{padding-block:var(--s-80)} }
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-40); flex-wrap:wrap; margin-block-end:var(--s-50)}
.section-head h2{font-size:var(--fs-xl); line-height:1.4; position:relative; padding-block-end:var(--s-20)}
.section-head h2::after{content:""; position:absolute; inset-inline-start:0; inset-block-end:0; inline-size:3rem; block-size:4px; border-radius:2px; background:var(--accent)}
.section-head a{font-weight:600; text-decoration:none; font-size:var(--fs-sm)}
.section-head a:hover{text-decoration:underline}
.spec{font-size:var(--fs-xs); color:var(--text-muted); background:var(--surface-2); border-inline-start:4px solid var(--border-strong); padding:var(--s-20) var(--s-40); border-radius:var(--r-sm); margin-block-end:var(--s-50); line-height:1.7}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-20);
  min-block-size:44px; padding:var(--s-30) var(--s-50); border-radius:var(--r-md);
  font:inherit; font-weight:700; line-height:1.5; letter-spacing:0; text-decoration:none; cursor:pointer;
  transition:background var(--t),color var(--t),border-color var(--t),box-shadow var(--t);
}
.btn svg{inline-size:1.15em; block-size:1.15em; flex:none}
.btn-primary{background:var(--accent); color:var(--on-accent); border:1px solid var(--accent-ink)}
.btn-primary:hover{background:var(--accent-ink); color:var(--surface); border-color:var(--accent-ink)}
:root[data-theme="dark"] .btn-primary:hover{background:var(--primary-hover); color:var(--on-primary); border-color:var(--primary-hover)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .btn-primary:hover{background:var(--primary-hover); color:var(--on-primary); border-color:var(--primary-hover)} }
.btn-secondary{background:transparent; color:var(--primary); border:1.5px solid var(--primary)}
.btn-secondary:hover{background:var(--primary-soft); color:var(--primary-hover)}
.btn-link{color:var(--link); font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:var(--s-10); min-block-size:44px}
.btn-link:hover{text-decoration:underline}
.btn-block{inline-size:100%}

/* ---------- header ---------- */
.site-header{background:var(--surface); border-block-end:1px solid var(--border); position:sticky; inset-block-start:0; z-index:10}
.site-header .wrap{display:flex; align-items:center; gap:var(--s-40); min-block-size:64px}
.brand{display:inline-flex; align-items:center; gap:var(--s-20); color:var(--primary); text-decoration:none; font-weight:800; font-size:var(--fs-lg); line-height:1}
.brand .tq-mark{inline-size:36px; block-size:36px}
.brand small{display:block; font-size:var(--fs-xs); font-weight:500; color:var(--text-muted); margin-block-start:.15rem}
.nav{display:none; gap:var(--s-10); margin-inline-start:var(--s-40)}
.nav a{color:var(--text); text-decoration:none; font-weight:600; font-size:var(--fs-sm); padding:var(--s-20) var(--s-30); border-radius:var(--r-sm); min-block-size:44px; display:inline-flex; align-items:center}
.nav a:hover,.nav a[aria-current]{color:var(--primary); background:var(--primary-soft)}
@media (min-width:900px){ .nav{display:flex} .menu-btn{display:none} }
.header-actions{margin-inline-start:auto; display:flex; gap:var(--s-20); align-items:center}
.icon-btn{inline-size:44px; block-size:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--r-sm); border:1.5px solid var(--border-strong); background:transparent; color:var(--text); cursor:pointer}
.icon-btn:hover{border-color:var(--primary); color:var(--primary)}
.icon-btn svg{inline-size:22px; block-size:22px}

/* ---------- 1. hero ---------- */
.hero{background:var(--surface-2); border-block-end:1px solid var(--border); overflow:hidden; position:relative}
.hero .wrap{display:grid; gap:var(--s-50); padding-block:var(--s-70); position:relative}
@media (min-width:900px){ .hero .wrap{grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:center; padding-block:var(--s-90)} }
.hero-eyebrow{display:inline-flex; align-items:center; gap:var(--s-20); font-size:var(--fs-sm); font-weight:600; color:var(--primary); background:var(--primary-soft); padding:var(--s-10) var(--s-30); border-radius:var(--r-pill); inline-size:fit-content}
.hero h1{font-size:var(--fs-3xl); font-weight:800; line-height:1.2; margin-block:var(--s-40) var(--s-30)}
.hero h1 em{font-style:normal; color:var(--primary)}
.hero-lead{font-size:var(--fs-md); line-height:1.7; color:var(--text-muted); max-inline-size:38ch}
.hero-actions{display:flex; flex-wrap:wrap; gap:var(--s-30); margin-block:var(--s-50) var(--s-40)}
@media (max-width:599px){ .hero-actions .btn{inline-size:100%} }
.disclosure{
  display:flex; gap:var(--s-20); align-items:flex-start;
  font-size:var(--fs-xs); line-height:1.7; color:var(--text-muted);
  background:var(--accent-soft); border-inline-start:4px solid var(--accent-ink);
  padding:var(--s-20) var(--s-30); border-radius:var(--r-sm); max-inline-size:60ch;
}
.disclosure svg{inline-size:18px; block-size:18px; flex:none; color:var(--accent-ink); margin-block-start:.2em}
.disclosure a{color:var(--link)}
.hero-side{position:relative}
.hero-strata{inline-size:100%; block-size:auto; color:var(--primary)}
.trust{list-style:none; margin:0; padding:0; display:grid; gap:var(--s-20); margin-block-start:calc(-1 * var(--s-60)); position:relative}
.trust li{display:flex; gap:var(--s-30); align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s-30) var(--s-40); box-shadow:var(--shadow-sm); font-size:var(--fs-sm); font-weight:600}
.trust svg{inline-size:22px; block-size:22px; color:var(--primary); flex:none}
.trust span{font-weight:400; color:var(--text-muted); display:block}

/* ---------- 2. product cards ---------- */
.product-grid{display:grid; gap:var(--s-40); grid-template-columns:repeat(auto-fill,minmax(min(100%,15.5rem),1fr))}
@media (min-width:782px){ .product-grid{gap:var(--s-50)} }
.product{
  display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  box-shadow:var(--shadow-sm); overflow:hidden; position:relative; transition:box-shadow var(--t),border-color var(--t),transform var(--t);
}
.product:hover{box-shadow:var(--shadow-md); border-color:var(--border-strong); transform:translateY(-2px)}
.product-media{background:var(--surface-2); aspect-ratio:1/1; display:grid; place-items:center; padding:var(--s-40)}
.product-media svg{inline-size:60%; block-size:auto; color:var(--primary)}
.ribbon{position:absolute; inset-block-start:var(--s-30); inset-inline-start:var(--s-30); background:var(--accent-soft); color:var(--accent-ink); font-size:var(--fs-xs); font-weight:700; padding:.1rem var(--s-20); border-radius:var(--r-xs); border:1px solid var(--accent-ink)}
.product-body{padding:var(--s-40); display:flex; flex-direction:column; gap:var(--s-20); flex:1}
.product-brand{font-size:var(--fs-sm); color:var(--text-muted); font-weight:500}
.product-name{font-size:var(--fs-md); line-height:1.5; font-weight:700}
.product-name a{color:var(--text); text-decoration:none}
.product-name a:hover{color:var(--primary); text-decoration:underline}
.product-dose{font-size:var(--fs-sm); color:var(--text-muted)}
.rating{display:flex; align-items:center; gap:var(--s-20); font-size:var(--fs-sm)}
.stars{display:inline-flex; gap:2px; direction:ltr}
.stars svg{inline-size:16px; block-size:16px}
.rating strong{font-weight:700}
.rating span{color:var(--text-muted)}
.why{font-size:var(--fs-sm); line-height:1.7; padding-inline-start:var(--s-30); border-inline-start:3px solid var(--accent); margin-block-start:var(--s-10)}
.why b{color:var(--accent-ink); font-weight:700}
.product-foot{margin-block-start:auto; padding-block-start:var(--s-30); display:flex; flex-direction:column; gap:var(--s-30)}
.price{display:flex; align-items:baseline; gap:var(--s-10); font-weight:700; font-size:var(--fs-lg); line-height:1.3; font-variant-numeric:tabular-nums}
.price small{font-size:var(--fs-sm); font-weight:600; color:var(--text-muted)}
.price .per{font-size:var(--fs-xs); font-weight:500; color:var(--text-muted); margin-inline-start:auto}

/* ---------- 3. category tiles ---------- */
.cat-grid{display:grid; gap:var(--s-40); grid-template-columns:repeat(auto-fill,minmax(min(100%,13.5rem),1fr))}
.cat{
  display:flex; flex-direction:column; gap:var(--s-20); padding:var(--s-50) var(--s-40);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); color:var(--text); text-decoration:none;
  box-shadow:var(--shadow-sm); position:relative; overflow:hidden; transition:box-shadow var(--t),border-color var(--t),transform var(--t);
}
.cat::before{content:""; position:absolute; inset-block-start:0; inset-inline:0; block-size:4px; background:var(--border); transition:background var(--t)}
.cat:hover{box-shadow:var(--shadow-md); border-color:var(--border-strong); transform:translateY(-2px); color:var(--text)}
.cat:hover::before{background:var(--accent)}
.cat-icon{inline-size:48px; block-size:48px; border-radius:var(--r-md); background:var(--primary-soft); color:var(--primary); display:grid; place-items:center}
.cat-icon svg{inline-size:26px; block-size:26px}
.cat h3{font-size:var(--fs-md); line-height:1.5}
.cat p{font-size:var(--fs-sm); color:var(--text-muted); line-height:1.7}
.cat-meta{margin-block-start:auto; padding-block-start:var(--s-20); display:flex; justify-content:space-between; align-items:center; font-size:var(--fs-sm); font-weight:600; color:var(--primary)}
.cat-meta span{font-weight:500; color:var(--text-muted)}

/* ---------- 4. article cards ---------- */
.post-grid{display:grid; gap:var(--s-40); grid-template-columns:repeat(auto-fill,minmax(min(100%,18rem),1fr))}
@media (min-width:782px){ .post-grid{gap:var(--s-50)} }
.post{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; color:var(--text); text-decoration:none; box-shadow:var(--shadow-sm); transition:box-shadow var(--t),border-color var(--t),transform var(--t)}
.post:hover{box-shadow:var(--shadow-md); border-color:var(--border-strong); transform:translateY(-2px); color:var(--text)}
.post-media{aspect-ratio:16/9; background:var(--surface-2); position:relative; display:grid; place-items:center; overflow:hidden}
.post-media svg{inline-size:100%; block-size:100%; color:var(--border-strong); opacity:.55}
.badge{display:inline-block; font-size:var(--fs-xs); font-weight:700; padding:.15rem var(--s-20); border-radius:var(--r-xs); background:var(--primary-soft); color:var(--primary); line-height:1.6}
.post-media .badge{position:absolute; inset-block-start:var(--s-30); inset-inline-start:var(--s-30)}
.post-body{padding:var(--s-40); display:flex; flex-direction:column; gap:var(--s-20); flex:1}
.post h3{font-size:var(--fs-md); line-height:1.5}
.post:hover h3{color:var(--primary); text-decoration:underline; text-underline-offset:.2em}
.post p{font-size:var(--fs-sm); color:var(--text-muted); line-height:1.7; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.post-meta{margin-block-start:auto; padding-block-start:var(--s-20); display:flex; flex-wrap:wrap; gap:var(--s-10) var(--s-30); font-size:var(--fs-xs); font-weight:500; color:var(--text-muted)}
.post-meta span{display:inline-flex; align-items:center; gap:var(--s-10)}
.post-meta svg{inline-size:15px; block-size:15px}

/* ---------- 5. author / reviewer box ---------- */
.byline{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); overflow:hidden; max-inline-size:68ch}
.byline-row{display:grid; grid-template-columns:auto 1fr; gap:var(--s-40); padding:var(--s-50) var(--s-40); align-items:start}
.byline-row + .byline-row{border-block-start:1px solid var(--border)}
.avatar{inline-size:64px; block-size:64px; border-radius:var(--r-lg); background:var(--primary-soft); color:var(--primary); display:grid; place-items:center; font-weight:800; font-size:var(--fs-lg); flex:none}
.avatar.rev{background:var(--surface-2); color:var(--text)}
.byline-role{font-size:var(--fs-xs); font-weight:600; color:var(--text-muted); display:flex; align-items:center; gap:var(--s-10)}
.byline-role svg{inline-size:16px; block-size:16px; color:var(--primary)}
.byline-name{font-size:var(--fs-md); font-weight:700; line-height:1.5; margin-block:.1rem}
.byline-name a{color:var(--text); text-decoration:none}
.byline-name a:hover{color:var(--primary); text-decoration:underline}
.cred{font-size:var(--fs-sm); font-weight:600; color:var(--primary); line-height:1.6}
.byline-bio{font-size:var(--fs-sm); color:var(--text-muted); line-height:1.7; margin-block-start:var(--s-10)}
.byline-foot{background:var(--surface-2); padding:var(--s-40); display:grid; gap:var(--s-30)}
.updated{font-size:var(--fs-xs); font-weight:600; display:flex; gap:var(--s-30); flex-wrap:wrap; color:var(--text-muted)}
.updated a{font-weight:600}
.med-disclaimer{font-size:var(--fs-xs); line-height:1.7; color:var(--text-muted); display:flex; gap:var(--s-20)}
.med-disclaimer svg{inline-size:18px; block-size:18px; flex:none; color:var(--danger); margin-block-start:.2em}

/* ---------- footer (no social links by design) ---------- */
.site-footer{background:var(--footer-bg); color:var(--footer-text); margin-block-start:var(--s-70); padding-block:var(--s-70) var(--s-50)}
.site-footer .wrap{display:grid; gap:var(--s-60)}
@media (min-width:782px){ .site-footer .wrap{grid-template-columns:1.4fr 1fr 1fr} }
.site-footer a{color:var(--footer-text)}
.site-footer .brand{color:var(--accent)}
.site-footer p{font-size:var(--fs-sm); line-height:1.7; opacity:.9; margin-block-start:var(--s-30)}
.site-footer h3{font-size:var(--fs-sm); font-weight:700; margin-block-end:var(--s-30); color:var(--accent)}
.site-footer ul{list-style:none; margin:0; padding:0; display:grid; gap:var(--s-10)}
.site-footer li a{text-decoration:none; font-size:var(--fs-sm); min-block-size:32px; display:inline-flex; align-items:center}
.site-footer li a:hover{text-decoration:underline; color:var(--accent)}
.subscribe{display:grid; gap:var(--s-20)}
.subscribe label{font-size:var(--fs-sm); font-weight:600}
.subscribe .row{display:flex; gap:var(--s-20); flex-wrap:wrap}
.subscribe input{flex:1 1 12rem; min-block-size:44px; padding:var(--s-20) var(--s-30); border-radius:var(--r-sm); border:1.5px solid var(--border-strong); background:var(--surface); color:var(--text); font:inherit; font-size:var(--fs-sm)}
.subscribe input::placeholder{color:var(--text-muted)}
.subscribe small{font-size:var(--fs-xs); opacity:.8; line-height:1.6}
.legal{border-block-start:1px solid rgba(233,226,213,.18); margin-block-start:var(--s-60); padding-block-start:var(--s-40); font-size:var(--fs-xs); display:flex; flex-wrap:wrap; gap:var(--s-20) var(--s-40); justify-content:space-between; opacity:.85}

@media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition:none!important; transform:none!important} }

/* ---------------------------------------------------------------------
   Hero — simplified.
   One message, one action. No trust list, no secondary button, no
   graphic. Centred single column at every width.
   --------------------------------------------------------------------- */
.hero.hero-simple{
  background:var(--surface-2);
  border-block-end:1px solid var(--border);
  padding-block:var(--s-70);
  text-align:center;
}
@media (min-width:782px){ .hero.hero-simple{padding-block:var(--s-80)} }

.hero.hero-simple .wrap{
  display:block;
  inline-size:min(48rem,100% - 2*var(--gutter));
}
.hero.hero-simple h1{
  font-size:var(--fs-3xl);
  line-height:1.3;
  margin-block-end:var(--s-30);
  text-wrap:balance;
}
.hero.hero-simple .hero-lead{
  font-size:var(--fs-md);
  color:var(--text-muted);
  line-height:1.75;
  margin-block-end:var(--s-50);
  text-wrap:balance;
}
.hero.hero-simple .hero-actions{
  display:flex;
  justify-content:center;
  margin-block-end:var(--s-30);
}
.btn-lg{
  font-size:var(--fs-md);
  padding:var(--s-40) var(--s-70);
  min-block-size:56px;
}
.disclosure-mini{
  font-size:var(--fs-xs);
  color:var(--text-muted);
  line-height:1.6;
  margin:0;
}

/* ---------------------------------------------------------------------
   Price with discount anchoring.
   Current price leads; the struck original and the percentage support it.
   The percentage is computed from the two prices, never typed, so the
   badge cannot contradict the numbers next to it.
   --------------------------------------------------------------------- */
.price{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--s-20);
}
.price-now{
  font-size:var(--fs-lg);
  font-weight:700;
  color:var(--text);
}
.price-was{
  font-size:var(--fs-sm);
  color:var(--text-muted);
  text-decoration:line-through;
  text-decoration-thickness:1px;
}
.price-off{
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--danger);
  background:var(--danger-soft);
  border:1px solid var(--danger);
  border-radius:var(--r-pill);
  padding:.1rem .5rem;
  white-space:nowrap;
}
.price .per{
  flex-basis:100%;
  font-size:var(--fs-xs);
  color:var(--text-muted);
  font-weight:400;
}

/* ---------------------------------------------------------------------
   Mobile navigation.
   Below 900px the nav collapses behind a button. Without this the links
   are simply unreachable on phones — which is most of the audience.
   --------------------------------------------------------------------- */
.site-header{position:sticky; inset-block-start:0; z-index:20}
.site-header .wrap{position:relative}

.menu-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  inline-size:44px;
  block-size:44px;
  flex:none;
  margin-inline-start:auto;
  border:1.5px solid var(--border-strong);
  border-radius:var(--r-sm);
  background:transparent;
  color:var(--text);
  cursor:pointer;
}
.menu-btn:hover{background:var(--primary-soft); color:var(--primary); border-color:var(--primary)}

/* When the menu is open the button sits beside the panel it controls. */
.site-header[data-nav-open="true"] .nav{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:var(--s-10);
  position:absolute;
  inset-inline:0;
  inset-block-start:100%;
  margin:0;
  padding:var(--s-30);
  background:var(--surface);
  border-block-start:1px solid var(--border);
  border-block-end:1px solid var(--border);
  box-shadow:var(--shadow-md);
}
.site-header[data-nav-open="true"] .nav a{
  min-block-size:48px;
  font-size:var(--fs-base);
}

@media (min-width:900px){
  .menu-btn{display:none}
  .site-header .header-actions{margin-inline-start:0}
}

/* On narrow screens the shop button shares the row with the menu button. */
@media (max-width:899px){
  .header-actions .btn{padding-inline:var(--s-40); font-size:var(--fs-sm)}
}

/* Footer links were 32px tall — below the 44px tap-target minimum. */
.site-footer li a{min-block-size:44px}

/* Category tile: inline-only children, styled as blocks.
   Block tags inside the anchor get mangled by wpautop. */
.cat-title{display:block; font-size:var(--fs-md); line-height:1.5; font-weight:700}
.cat-desc{display:block; font-size:var(--fs-sm); color:var(--text-muted); line-height:1.7}

/* Header CTA must never wrap to a second line. */
.header-actions .btn{white-space:nowrap}

/* Category tile — final.
   Name reads as the heading it is; the card itself is the link, so there is
   no separate "browse" line competing with it. */
.cat-title{
  display:block;
  font-size:var(--fs-md);
  line-height:1.5;
  font-weight:700;
  color:var(--text);
}
.cat-desc{
  display:block;
  font-size:var(--fs-sm);
  color:var(--text-muted);
  line-height:1.7;
}
.cat .cat-meta{
  margin-block-start:auto;
  padding-block-start:var(--s-20);
  justify-content:flex-start;
}


/* Header CTA — exactly two lines, set explicitly rather than left to wrapping.
   Each span is its own row, so the break never lands mid-phrase. */
.header-actions .btn{
  flex-direction:column;
  gap:0;
  line-height:1.3;
  text-align:center;
  white-space:nowrap;
  padding-block:var(--s-20);
}
.header-actions .btn span{display:block}