/* ==========================================================================
   Awesome Foods - components.css
   Filters, product grid, drawers, recipe cards, specification panels,
   trade blocks, FAQ, contact form, legal sections.
   Loaded only on the pages that use them.
   ========================================================================== */
/* ---------- filter ---------- */
.fbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:var(--s4)}
.fbar button{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1.5px solid var(--line);
border-radius:999px;padding:11px 20px;min-height:var(--tap);font-family:"Barlow Condensed",sans-serif;
text-transform:uppercase;letter-spacing:1.4px;font-weight:700;font-size:13.5px;color:var(--ink);
transition:background .16s,border-color .16s,color .16s}
.fbar button:hover{border-color:var(--braai)}
.fbar button[aria-pressed=true]{background:var(--paprika);border-color:var(--paprika);color:#fff}
.fbar button[aria-pressed=true] .meter i{background:#fff}
.fbar button[aria-pressed=true] .meter i.off{background:rgba(255,255,255,.4)}
.meter{display:flex;gap:3px}
.meter i{width:13px;height:7px;background:var(--turmeric);display:block;border-radius:2px}
.meter i.off{background:var(--line)}


/* ---------- range grid ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.card.hide{display:none}
.card-btn{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--line);
border-radius:26px;overflow:hidden;box-shadow:var(--soft);height:100%;
transition:transform .18s,box-shadow .18s,border-color .18s}
.card-btn:hover{transform:translateY(-6px);box-shadow:var(--lift);border-color:#DCCFB2}
.card-btn[aria-expanded=true]{border-color:var(--paprika);box-shadow:var(--lift)}
.card-stage{display:flex;justify-content:center;padding:var(--s4) var(--s3) var(--s2);
background:linear-gradient(180deg,#FDF6E7 0%,#F8EFDC 100%)}
.card-stage .pk{width:min(196px,58%);height:auto;filter:drop-shadow(0 20px 26px rgba(90,58,34,.28));
transition:transform .18s}
.card-btn:hover .card-stage .pk{transform:translateY(-5px) scale(1.03)}
.card-body{display:block;padding:var(--s3) var(--s3) var(--s4)}
.card-sku{display:block;font-family:"Barlow Condensed",sans-serif;letter-spacing:2.6px;font-size:11.5px;
font-weight:800;color:var(--paprika)}
.card-name{display:block;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;
font-weight:900;font-size:32px;line-height:1;margin:5px 0 6px;color:var(--ink)}
.card-desc{display:block;font-size:16px;color:var(--muted);margin-bottom:14px}
.card-heat{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.card-heat em{font-style:normal;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;
letter-spacing:1.4px;font-weight:800;font-size:13px;color:var(--braai)}
.card-ic{display:flex;gap:12px;padding:14px 0 12px}
.card-ic .ic{width:32px;height:32px}
.card-more{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:1.8px;
font-weight:800;font-size:13px;color:var(--paprika)}
.card-more:after{content:" \2192"}


/* ---------- drawer ---------- */
.drawer{display:none;margin-top:var(--s4)}
.drawer.open{display:block}
.dr{display:grid;grid-template-columns:270px 1fr;gap:var(--s5);background:#fff;
border:1px solid var(--line);border-radius:28px;padding:var(--s5);box-shadow:var(--soft)}
.dr-stage{background:linear-gradient(180deg,#FDF6E7 0%,#F8EFDC 100%);border-radius:20px;
padding:var(--s3);display:flex;justify-content:center;align-self:start}
.dr-stage .pk{width:100%;height:auto;filter:drop-shadow(0 22px 28px rgba(90,58,34,.3))}.dr h3,.dr h2{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;font-weight:900;
font-size:clamp(34px,4.6vw,56px);line-height:.92;color:var(--ink);margin:4px 0 4px}
.dr .tg{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;font-weight:900;
font-size:23px;color:var(--paprika);margin-bottom:var(--s2)}
.dr .sku{font-family:"Barlow Condensed",sans-serif;letter-spacing:2.6px;font-size:12px;
font-weight:800;color:var(--muted)}
.dr p{max-width:62ch;margin-bottom:var(--s3)}
.specs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:var(--s3)}
.specs div{background:var(--cream);border-radius:14px;padding:11px 18px;min-width:118px}
.specs dt{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:2px;
font-size:11px;color:var(--muted);margin-bottom:2px}
.specs dd{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;font-weight:800;
font-size:18px;color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:var(--s3)}
.chip{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);
border-radius:999px;padding:7px 16px 7px 8px}
.chip .ic{width:26px;height:26px}
.chip em{font-style:normal;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;
letter-spacing:1.2px;font-size:12px;font-weight:700;color:var(--braai)}
.close{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:1.8px;
font-size:13px;font-weight:800;color:var(--muted);border:1.5px solid var(--line);border-radius:999px;
padding:11px 22px;min-height:var(--tap)}
.close:hover{border-color:var(--braai);color:var(--braai)}


/* ---------- table ---------- */
.tablewrap{background:#fff;border:1px solid var(--line);border-radius:24px;padding:var(--s4);
box-shadow:var(--soft);margin-top:var(--s5)}
table{width:100%;border-collapse:collapse;font-size:16px}
caption{text-align:left;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;
letter-spacing:2.6px;font-size:12px;color:var(--muted);padding-bottom:var(--s3)}
thead th{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:1.4px;
font-size:12.5px;color:var(--paprika);text-align:left;padding:0 16px 12px 0;
border-bottom:2px solid var(--line);font-weight:800}
tbody th{text-align:left;font-family:"Barlow Condensed",sans-serif;letter-spacing:1.8px;font-size:13px;
font-weight:800;color:var(--braai);padding:14px 16px 14px 0;border-bottom:1px solid var(--line);white-space:nowrap}
tbody td{padding:14px 16px 14px 0;border-bottom:1px solid var(--line)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}


/* ---------- recipes ---------- */
.rfilter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 var(--s3)}
.rfilter button{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:1.3px;
font-weight:700;font-size:13.5px;padding:11px 18px;min-height:var(--tap);border:1.5px solid var(--line);
background:#fff;border-radius:999px;color:var(--ink);transition:background .16s,color .16s,border-color .16s}
.rfilter button:hover{border-color:var(--braai)}
.rfilter button.on{background:var(--braai);border-color:var(--braai);color:#fff}
.rcount{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:1.6px;
font-weight:700;font-size:13px;color:var(--muted);margin:0 0 var(--s3)}
.rgrid{display:grid;gap:var(--s2)}
.rc{border:1.5px solid var(--line);border-radius:16px;background:#fff;overflow:hidden;
box-shadow:0 2px 0 rgba(90,58,34,.04)}
.rc.hide{display:none}
.rc details>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--s2);
padding:var(--s2) var(--s3);min-height:var(--tap)}
.rc details>summary::-webkit-details-marker{display:none}
.rc details>summary:hover{background:var(--cream)}
.rc-ic{flex:none;width:52px;height:52px;border-radius:50%;background:var(--cream);
display:grid;place-items:center}
.rc-ic .ic{width:30px;height:30px}
.rc-t{flex:1;min-width:0}
.rc-cat{display:block;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;
letter-spacing:1.6px;font-weight:700;font-size:11.5px;color:var(--paprika)}.rc-t h3,.rc-t h2{font-family:"Barlow Condensed",sans-serif;font-weight:900;text-transform:uppercase;
font-size:clamp(20px,2.4vw,25px);line-height:1.08;color:var(--ink);letter-spacing:.3px}
.rc-m{display:block;font-size:14px;color:var(--muted);margin-top:2px}
.rc-x{flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);
position:relative;transition:transform .2s,background .2s}
.rc-x::before,.rc-x::after{content:"";position:absolute;background:var(--ink);left:50%;top:50%}
.rc-x::before{width:12px;height:2px;transform:translate(-50%,-50%)}
.rc-x::after{width:2px;height:12px;transform:translate(-50%,-50%);transition:opacity .2s}
.rc details[open] .rc-x{background:var(--turmeric);border-color:var(--turmeric);transform:rotate(90deg)}
.rc details[open] .rc-x::after{opacity:0}
.rc-b{padding:0 var(--s3) var(--s3);border-top:1px solid var(--line);margin-top:var(--s1)}.rc-b h4,.rc-b h3{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:1.7px;
font-weight:700;font-size:12.5px;color:var(--muted);margin:var(--s3) 0 10px}
.rc-af{background:linear-gradient(180deg,#FDF6E4,#FBF1DC);border:1.5px solid #F0DFB6;
border-radius:12px;padding:2px var(--s3) var(--s2);margin-top:var(--s3)}.rc-af h4,.rc-af h3{color:var(--braai);margin-top:var(--s2)}
.rc-af ul{list-style:none;display:grid;gap:8px}
.rc-af li{font-weight:600;padding-left:22px;position:relative}
.rc-af li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;
border-radius:2px;background:var(--turmeric)}
a.sl{color:var(--paprika);font-weight:700;text-decoration:none;border-bottom:2px solid rgba(193,52,45,.28);
padding-bottom:1px;transition:border-color .16s,background .16s}
a.sl:hover{border-bottom-color:var(--paprika);background:rgba(193,52,45,.06)}
a.sl span{font-family:"Barlow Condensed",sans-serif;font-size:12.5px;letter-spacing:1.2px;
color:var(--muted);font-weight:700}
.rc-cols{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--s4)}
.rc-ing{list-style:none;display:grid;gap:7px}
.rc-ing li{padding-left:20px;position:relative;font-size:16.5px}
.rc-ing li::before{content:"";position:absolute;left:0;top:.66em;width:7px;height:7px;
border-radius:50%;border:1.5px solid var(--braai)}
.rc-st{list-style:none;counter-reset:st;display:grid;gap:14px}
.rc-st li{counter-increment:st;display:flex;gap:14px;font-size:16.5px}
.rc-st li::before{content:counter(st);flex:none;width:28px;height:28px;border-radius:50%;
background:var(--braai);color:#fff;font-family:"Barlow Condensed",sans-serif;font-weight:900;
font-size:15px;display:grid;place-items:center;margin-top:2px}
.rc-tip{margin-top:var(--s3);padding:var(--s2) var(--s3);background:var(--cream);
border-left:4px solid var(--paprika);border-radius:0 10px 10px 0;font-size:16.5px}
.rc-tip strong{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;
letter-spacing:1.5px;font-size:13px;color:var(--paprika);display:block}
.rc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s3)}
a.rchip{display:inline-flex;align-items:center;gap:8px;background:var(--cream);border:1px solid var(--line);
border-radius:999px;padding:8px 16px 8px 10px;min-height:var(--tap);text-decoration:none;
transition:background .16s,border-color .16s}
a.rchip:hover{background:#fff;border-color:var(--braai)}
a.rchip .ic{width:22px;height:22px}
a.rchip em{font-style:normal;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;
letter-spacing:1.3px;font-weight:700;font-size:13px;color:var(--ink)}
.rnone{text-align:center;padding:var(--s5) 0;color:var(--muted);font-size:19px}


/* ---------- where to buy ---------- */
.where{background:linear-gradient(180deg,var(--cream),var(--paper))}
.wgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.wcard{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:var(--s3);
position:relative;display:flex;flex-direction:column;gap:10px}
.wcard .ic{width:40px;height:40px}.wcard h3,.wcard h2{font-family:"Barlow Condensed",sans-serif;font-weight:900;text-transform:uppercase;
font-size:24px;color:var(--ink);line-height:1.05}
.wcard p{font-size:16.5px;flex:1}
.wbtn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);
background:var(--paprika);color:#fff;text-decoration:none;padding:12px 24px;border-radius:999px;
font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:1.5px;
font-weight:700;font-size:14.5px;transition:background .16s;text-align:center}
.wbtn:hover{background:#A6291F}
.wbtn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--braai)}
.wbtn.ghost:hover{background:var(--cream)}
.wnote{margin-top:var(--s4);background:#fff;border:1.5px solid var(--line);border-left:5px solid var(--turmeric);
border-radius:0 14px 14px 0;padding:var(--s3)}
.wnote p{font-size:16.5px}


/* ---------- product information ---------- */
.pigrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.pi{border:1.5px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}
.pi-h{display:flex;align-items:center;gap:var(--s2);padding:var(--s3);background:var(--cream);
border-bottom:1.5px solid var(--line);flex-wrap:wrap}
.pi-h .ic{width:38px;height:38px;flex:none}
.pi-h>div{flex:1;min-width:0}
.pi-sku{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:1.7px;
font-weight:700;font-size:12px;color:var(--muted)}.pi-h h3,.pi-h h2{font-family:"Barlow Condensed",sans-serif;font-weight:900;text-transform:uppercase;
font-size:26px;line-height:1.02;color:var(--ink)}
.pi-d{font-size:14.5px;color:var(--muted)}
.pi-go{flex:none;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:1.4px;
font-weight:700;font-size:13px;color:var(--paprika);text-decoration:none;border:1.5px solid var(--paprika);
border-radius:999px;padding:9px 16px;min-height:var(--tap);display:inline-flex;align-items:center}
.pi-go:hover{background:var(--paprika);color:#fff}
.pi-t{padding:var(--s2) var(--s3) var(--s3)}
.pi-t>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--s2);
padding:11px 0;border-bottom:1px solid var(--line)}
.pi-t>div:last-child{border-bottom:0}
.pi-t dt{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:1.4px;
font-weight:700;font-size:12.5px;color:var(--muted);padding-top:3px}
.pi-t dd{font-size:16px}
.hm{display:inline-flex;gap:3px;vertical-align:middle;margin-left:6px}
.hm i{width:9px;height:14px;border-radius:2px;background:var(--line);display:block}
.hm i.on{background:var(--paprika)}


/* ---------- trade ---------- */
.tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);margin-bottom:var(--s5)}
.tcard{border:1.5px solid var(--line);border-radius:16px;background:#fff;padding:var(--s3)}
.tcard.hero{background:var(--braai);border-color:var(--braai);color:#F3E9DC}.tcard.hero h3,.tcard.hero h2,.tcard.hero .tt{color:#fff}
.tcard.hero .tl li::before{background:var(--turmeric)}
.tt{display:block;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;
letter-spacing:1.7px;font-weight:700;font-size:12px;color:var(--paprika);margin-bottom:4px}.tcard h3,.tcard h2{font-family:"Barlow Condensed",sans-serif;font-weight:900;text-transform:uppercase;
font-size:27px;line-height:1.04;color:var(--ink);margin-bottom:10px}
.tcard p{font-size:16.5px;margin-bottom:var(--s2)}
.tl{list-style:none;display:grid;gap:9px}
.tl li{padding-left:20px;position:relative;font-size:16px}
.tl li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;
border-radius:2px;background:var(--braai)}
.tsub{font-family:"Barlow Condensed",sans-serif;font-weight:900;text-transform:uppercase;
font-size:clamp(24px,3vw,32px);color:var(--ink);margin-bottom:var(--s3);letter-spacing:.4px}
.tcta{margin-top:var(--s5);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
gap:var(--s4);align-items:center;background:var(--cream);border:1.5px solid var(--line);
border-radius:18px;padding:var(--s4)}.tcta h3,.tcta h2{font-family:"Barlow Condensed",sans-serif;font-weight:900;text-transform:uppercase;
font-size:clamp(24px,3vw,32px);color:var(--ink);line-height:1.04;margin-bottom:8px}
.tbtns{display:grid;gap:10px}


/* ---------- stockists ---------- */
ol.steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
ol.steps li{counter-increment:s;background:#fff;border:1px solid var(--line);border-radius:22px;
padding:var(--s4);display:grid;grid-template-columns:56px 1fr;gap:18px;align-items:start;
box-shadow:var(--soft)}
ol.steps li:before{content:counter(s);font-family:"Barlow Condensed",sans-serif;font-size:30px;
font-weight:900;color:#fff;background:var(--paprika);width:48px;height:48px;border-radius:50%;
display:flex;align-items:center;justify-content:center;line-height:1}
ol.steps strong{display:block;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;
font-size:20px;color:var(--ink);margin-bottom:4px}
ol.steps span{color:var(--muted)}


/* ---------- faq ---------- */
.faq{display:grid;gap:var(--s2)}
.fq{background:#fff;border:1px solid var(--line);border-radius:20px;padding:var(--s3) var(--s4)}.fq h3,.fq h2{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;font-weight:800;
font-size:21px;color:var(--ink);margin-bottom:6px}
.fq p{max-width:74ch;margin:0;color:var(--muted)}


/* ---------- contact ---------- */
.contact{background:linear-gradient(180deg,var(--paper) 0%,#F4EEE0 100%)}
.cts{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s5);align-items:start}
.panel{background:#fff;border:1px solid var(--line);border-radius:26px;padding:var(--s5);
box-shadow:var(--soft)}
label{display:block;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;
letter-spacing:2px;font-size:11.5px;color:var(--muted);margin:var(--s2) 0 6px}
input,select,textarea{width:100%;background:var(--paper);border:1.5px solid var(--line);border-radius:14px;
color:var(--ink);padding:13px 16px;min-height:var(--tap);font-family:Barlow,sans-serif;font-size:16px}
input:focus,select:focus,textarea:focus{border-color:var(--paprika);outline:none;background:#fff}
textarea{min-height:118px;resize:vertical}
form .btn{margin-top:var(--s3)}
.kv{display:flex;align-items:center;gap:16px;padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.kv:last-child{border-bottom:0}
.kv .ic{width:34px;height:34px;flex:none}
.kv dt{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:2px;
font-size:11.5px;color:var(--muted);margin-bottom:2px}
.kv dd{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;font-weight:800;
font-size:20px;color:var(--ink);overflow-wrap:anywhere}
.kv a{color:var(--paprika);text-decoration:none;display:inline-flex;align-items:center;
min-height:var(--tap);overflow-wrap:anywhere;max-width:100%}
.kv a:hover{text-decoration:underline}


/* ---------- privacy ---------- */
.legal .panel{max-width:none}.legal h3,.legal h2{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;font-weight:800;
font-size:20px;color:var(--paprika);margin:var(--s3) 0 6px}
.legal p,.legal li{max-width:76ch;overflow-wrap:anywhere}
.legal a{color:var(--paprika);overflow-wrap:anywhere}
.legal ul{margin:0 0 var(--s2) 22px}
.legal li{margin-bottom:6px;color:var(--muted)}
.legal li::marker{color:var(--turmeric)}
.stamp{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:2.4px;
font-size:12px;color:var(--muted);margin-top:var(--s3)}
.fill{color:var(--braai);background:#FDF3DC;padding:1px 7px;border-radius:6px}




/* ---------- TL;DR / key takeaways (answer-first extractability) ---------- */
.tldr{margin:var(--s3) 0 0;padding:var(--s3) var(--s3) calc(var(--s3) - 4px);
background:#fff;border:1px solid var(--line);border-left:5px solid var(--turmeric);
border-radius:14px;max-width:74ch}
.tldr h2{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:13px;
letter-spacing:2.2px;text-transform:uppercase;color:var(--paprika);margin:0 0 10px}
.tldr ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tldr li{position:relative;padding-left:22px;font-size:16.5px;line-height:1.5;color:var(--ink)}
.tldr li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;
border-radius:2px;background:var(--turmeric)}
.tldrwrap{padding:var(--s3) 0 0}
@media(max-width:640px){.tldr{padding:var(--s2);border-radius:12px}.tldr li{font-size:16px}}


/* ---------- sticky action buttons ---------- */
.sticky-actions{position:fixed;right:0;bottom:0;z-index:90;pointer-events:none;
padding:0 clamp(12px,3vw,26px) clamp(12px,3vw,24px);
display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.sa{pointer-events:auto;display:inline-flex;align-items:center;gap:9px;
min-height:52px;padding:0 20px;border:0;border-radius:999px;cursor:pointer;
font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:15.5px;
letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;
box-shadow:0 6px 22px rgba(31,27,22,.26);transition:transform .16s,box-shadow .16s,background .16s}
.sa svg{width:22px;height:22px;flex:none}
.sa:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(31,27,22,.32)}
.sa:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.sa-wa{background:#25D366;color:#0B3D22}
.sa-wa:hover{background:#1FBE5A}
.sa-install{background:var(--braai);color:var(--cream)}
.sa-install:hover{background:#482D1A}
.sa-install[hidden]{display:none}
.sa-tip{pointer-events:auto;order:-1;max-width:min(300px,74vw);
background:var(--ink);color:var(--cream);padding:12px 15px;border-radius:12px;
font-size:14.5px;line-height:1.45;text-align:left;box-shadow:0 8px 26px rgba(31,27,22,.3)}
.sa-tip[hidden]{display:none}
.sa-tip strong{color:var(--turmeric)}
.sticky-actions{position:fixed}
@media(max-width:560px){
  .sa{min-height:50px;padding:0 15px;font-size:13.5px;letter-spacing:1px}
  .sa svg{width:20px;height:20px}
  .sa .lbl-long{display:none}
}
@media(prefers-reduced-motion:reduce){.sa{transition:none}.sa:hover{transform:none}}
/* keep the last of the page clear of the bar */
footer{padding-bottom:calc(var(--s5) + 128px)}


/* C4 - visible published + last-updated stamps (E-E-A-T) */
.pmeta{margin:.35rem 0 1.15rem;font-size:.8rem;line-height:1.5;letter-spacing:.02em;
  color:var(--muted,#6B6459);display:flex;flex-wrap:wrap;gap:.3rem .85rem;align-items:baseline}
.pmeta .pmeta-org{font-weight:600;color:var(--ink,#1F1B16)}
.pmeta time{font-variant-numeric:tabular-nums}
.pmeta .pmeta-sep{opacity:.45}
@media (max-width:520px){.pmeta{font-size:.75rem;gap:.2rem .6rem}}