/*
Theme Name: Terea Abu Dhabi
Theme URI: https://iqos-abu-dhabi.ae/
Author: Terea Abu Dhabi
Description: Custom lightweight storefront theme for iqos-abu-dhabi.ae. Green design system, stacked wordmark header, mobile bottom bar, dark mode honouring the system setting, WooCommerce-ready product card components.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: terea-abudhabi
*/

/* =====================================================================
   1 · DESIGN TOKENS  (light first; dark via system setting + override)
   ===================================================================== */
:root{
 --g:#0A7D4E; --g-dk:#065C39; --g-lt:#E8F3EC; --g-lt2:#F5FAF7; --g-br:#C3DECF;
 --g-glow:rgba(10,125,78,.20);
 --am:#C08A1E; --am-lt:#FAF2DF; --am-dk:#7C5608;
 --ink:#0C1A13; --ink2:#3A4C42; --mut:#5C6E65; --fnt:#5C6E65;
 --bg:#fff; --tint:#F4F9F6; --line:#E4EDE8; --line2:#F0F6F2;
 --card:#fff; --card-a:rgba(255,255,255,.92); --hd:rgba(255,255,255,.86);
 --err:#B22B25;
 --r1:9px; --r2:14px; --r3:18px; --r4:24px; --rp:100px;
 --s1:0 1px 1px rgba(12,26,19,.04),0 0 0 1px rgba(12,26,19,.03);
 --s2:0 2px 4px rgba(12,26,19,.04),0 6px 16px -6px rgba(12,26,19,.10);
 --s3:0 4px 8px rgba(12,26,19,.05),0 18px 36px -12px rgba(12,26,19,.16);
 --s4:0 8px 16px rgba(12,26,19,.07),0 40px 80px -20px rgba(12,26,19,.30);
 --f:'Outfit',system-ui,-apple-system,sans-serif;
 --wrap:1220px;
}
@media (prefers-color-scheme: dark){
 :root:not([data-theme="light"]){
  --bg:#0A100D; --tint:#101915; --line:#1F2C26; --line2:#18231D;
  --card:#121C17; --card-a:rgba(18,28,23,.9); --hd:rgba(10,16,13,.84);
  --ink:#E9F2ED; --ink2:#A6BCB2; --mut:#93A9A0; --fnt:#93A9A0;
  --g:#22A96A; --g-dk:#45CB8C; --g-lt:#12291E; --g-lt2:#0E1B15; --g-br:#22513A;
  --g-glow:rgba(34,169,106,.28);
  --am:#D9A63A; --am-lt:#2A2211; --am-dk:#E8BE64;
  --err:#FF7A70;
  --s1:0 1px 1px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.04);
  --s2:0 2px 4px rgba(0,0,0,.35),0 6px 16px -6px rgba(0,0,0,.5);
  --s3:0 4px 8px rgba(0,0,0,.4),0 18px 36px -12px rgba(0,0,0,.6);
  --s4:0 8px 16px rgba(0,0,0,.45),0 40px 80px -20px rgba(0,0,0,.75);
 }
}
[data-theme="dark"]{
 --bg:#0A100D; --tint:#101915; --line:#1F2C26; --line2:#18231D;
 --card:#121C17; --card-a:rgba(18,28,23,.9); --hd:rgba(10,16,13,.84);
 --ink:#E9F2ED; --ink2:#A6BCB2; --mut:#93A9A0; --fnt:#93A9A0;
 --g:#22A96A; --g-dk:#45CB8C; --g-lt:#12291E; --g-lt2:#0E1B15; --g-br:#22513A;
 --g-glow:rgba(34,169,106,.28);
 --am:#D9A63A; --am-lt:#2A2211; --am-dk:#E8BE64;
 --err:#FF7A70;
 --s1:0 1px 1px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.04);
 --s2:0 2px 4px rgba(0,0,0,.35),0 6px 16px -6px rgba(0,0,0,.5);
 --s3:0 4px 8px rgba(0,0,0,.4),0 18px 36px -12px rgba(0,0,0,.6);
 --s4:0 8px 16px rgba(0,0,0,.45),0 40px 80px -20px rgba(0,0,0,.75);
}

/* =====================================================================
   2 · BASE
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;max-width:100%}
body{font-family:var(--f);background:var(--bg);color:var(--ink);font-size:15px;line-height:1.6;
 letter-spacing:-.006em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
 transition:background .3s,color .3s}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.1}
h1{font-size:clamp(2.05rem,4.4vw,3.35rem);letter-spacing:-.045em;line-height:1.03}
h2{font-size:clamp(1.55rem,2.7vw,2.1rem);letter-spacing:-.04em;line-height:1.08}
h3{font-size:1.15rem;letter-spacing:-.03em}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
img,svg{display:block;max-width:100%;height:auto}
b,strong{font-weight:600}
::selection{background:var(--g-lt);color:var(--g-dk)}
:focus-visible{outline:2px solid var(--g);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px;min-width:0}
main,section{min-width:0}
.hide{display:none!important}
.screen-reader-text,.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.skip-link{position:absolute;left:-999px;top:8px;z-index:400;background:var(--ink);color:var(--bg);
 padding:11px 18px;border-radius:var(--rp);font-weight:600;font-size:14px}
.skip-link:focus{left:16px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}

/* =====================================================================
   3 · BUTTONS / CHIPS
   ===================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 24px;
 border-radius:var(--rp);font-size:14.5px;font-weight:600;letter-spacing:-.012em;white-space:nowrap;
 transition:background .16s,box-shadow .2s,transform .12s,border-color .16s}
.btn:active{transform:translateY(1px)}
.b-p{background:var(--g);color:#fff;box-shadow:0 1px 2px rgba(6,92,57,.24),0 6px 16px -6px var(--g-glow)}
.b-p:hover{background:var(--g-dk);box-shadow:0 2px 4px rgba(6,92,57,.26),0 12px 24px -8px var(--g-glow)}
[data-theme="dark"] .b-p{color:#04120B}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .b-p{color:#04120B}}
.b-o{background:var(--card);border:1px solid var(--g-br);color:var(--ink);box-shadow:var(--s1)}
.b-o:hover{border-color:var(--g);color:var(--g-dk)}
.b-d{background:var(--ink);color:var(--bg)}
.b-lg{padding:16px 30px;font-size:15.5px}
.b-sm{padding:9px 16px;font-size:13.5px}
.b-bl{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.icb{width:44px;height:44px;border-radius:var(--rp);background:transparent;border:1px solid var(--line);
 display:grid;place-items:center;position:relative;transition:.16s;flex:none;color:var(--ink2)}
.icb:hover{background:var(--tint);border-color:var(--g-br)}
.cnt{position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px;background:var(--g);
 color:#fff;border-radius:var(--rp);font-size:11px;font-weight:600;display:grid;place-items:center;
 border:2px solid var(--bg)}
[data-theme="dark"] .cnt{color:#04120B;border-color:var(--card)}
.chip{display:inline-flex;align-items:center;gap:7px;border-radius:var(--rp);padding:6px 13px;
 font-size:12.5px;font-weight:600;white-space:nowrap}
.c-g{background:var(--g-lt);color:var(--g-dk)}
.c-a{background:var(--am-lt);color:var(--am-dk)}
.c-o{background:var(--card);border:1px solid var(--line);color:var(--ink2)}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.pls{animation:pls 1.9s ease-in-out infinite}
@keyframes pls{0%,100%{opacity:1}50%{opacity:.28}}
.eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--g-dk)}

/* =====================================================================
   4 · HEADER
   ===================================================================== */
.hd{position:sticky;top:0;z-index:60;background:var(--hd);backdrop-filter:blur(18px) saturate(1.5);
 border-bottom:1px solid var(--line)}
.hd .wrap{display:flex;align-items:center;gap:22px;height:80px}
.lg{display:flex;align-items:center;gap:10px;flex:none;min-width:0}
.lg>span{min-width:0}
.lg-n{font-size:25px;font-weight:600;letter-spacing:-.045em;line-height:.98;display:block;color:var(--ink)}
.lg-s{font-size:10px;font-weight:600;letter-spacing:.2em;color:var(--mut);text-transform:uppercase;
 margin-top:4px;display:block}
.lg-mark{color:var(--g);flex:none}
.nv{display:flex;gap:2px;margin-left:6px}
.nv>a{padding:10px 15px;border-radius:var(--rp);font-size:14.5px;font-weight:500;color:var(--ink2);
 display:flex;align-items:center;gap:6px;letter-spacing:-.01em}
.nv>a:hover{background:var(--g-lt);color:var(--g-dk)}
.nv>a.on{background:var(--g-lt);color:var(--g-dk);font-weight:600}
.hr-a{margin-left:auto;display:flex;align-items:center;gap:9px}
.area-b{display:inline-flex;align-items:center;gap:8px;background:var(--g);color:#fff;padding:10px 17px;
 border-radius:var(--rp);font-size:13.5px;font-weight:600;box-shadow:0 1px 2px rgba(6,92,57,.22)}
.area-b:hover{background:var(--g-dk)}
[data-theme="dark"] .area-b{color:#04120B}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .area-b{color:#04120B}}
.burg{display:none}
/* theme toggle icon swap */
.thm .moon{display:none}
[data-theme="dark"] .thm .sun{display:none}
[data-theme="dark"] .thm .moon{display:block}
@media (prefers-color-scheme: dark){
 :root:not([data-theme="light"]) .thm .sun{display:none}
 :root:not([data-theme="light"]) .thm .moon{display:block}
}

/* mobile menu panel */
.mnav{position:fixed;inset:0;z-index:200;display:none}
.mnav.on{display:block}
.mnav-scrim{position:absolute;inset:0;background:rgba(12,26,19,.45);backdrop-filter:blur(3px)}
.mnav-p{position:absolute;top:0;right:0;bottom:0;width:min(360px,92%);background:var(--card);
 box-shadow:var(--s4);padding:20px 20px 32px;overflow-y:auto}
.mnav-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.mnav-p a.mlink,.mnav-p button.mlink,.mnav-p summary.mlink{width:100%;display:flex;justify-content:space-between;align-items:center;
 gap:12px;padding:14px 16px;margin-bottom:7px;border:1px solid var(--line);border-radius:var(--r1);
 background:var(--card);text-align:left;font-size:14.5px;font-weight:500;color:var(--ink)}
.mnav-p a.mlink:hover,.mnav-p button.mlink:hover,.mnav-p summary.mlink:hover{border-color:var(--g-br);background:var(--g-lt2)}
.mnav-p h4{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--mut);margin:18px 0 10px}
.x{width:38px;height:38px;border-radius:var(--rp);display:grid;place-items:center;color:var(--mut);
 font-size:20px;line-height:1;flex:none}
.x:hover{background:var(--tint);color:var(--ink)}

/* =====================================================================
   5 · SECTIONS / HERO
   ===================================================================== */
.sec{padding:76px 0}
.sec-t{padding:52px 0}
.sh{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;margin-bottom:32px;flex-wrap:wrap}
.sh p{margin-top:8px;color:var(--ink2);font-size:15.5px;max-width:56ch}
.hero{background:linear-gradient(180deg,var(--tint) 0%,var(--bg) 88%);padding:64px 0 8px;
 position:relative;overflow:hidden}
.hero::after{content:'';position:absolute;width:640px;height:640px;border-radius:50%;right:-230px;top:-290px;
 background:radial-gradient(circle,var(--g-glow),transparent 66%)}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
 gap:56px;align-items:center}
.hero h1{margin:20px 0 18px}
.hero h1 em{font-style:normal;color:var(--g)}
.hero .sub{font-size:17px;color:var(--ink2);line-height:1.58;max-width:44ch;margin-bottom:28px}
.hero .cta{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:30px}
.trust{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:56px}
/* delivery card */
.lc{background:var(--card);border:1px solid var(--line);border-radius:var(--r4);box-shadow:var(--s4);overflow:hidden}
.lc-h{padding:19px 22px;border-bottom:1px solid var(--line2);display:flex;align-items:center;
 justify-content:space-between;gap:12px}
.lc-h b{font-size:15.5px;font-weight:600}
.lc-b{padding:20px 22px 22px}
.lc-hero{background:linear-gradient(165deg,var(--card),var(--g-lt));border:1px solid var(--g-br);
 border-radius:var(--r3);padding:18px;text-align:center;margin-bottom:15px}
.lc-hero .big{font-size:2.6rem;font-weight:600;letter-spacing:-.05em;color:var(--g-dk);line-height:1}
.lc-hero .cap{font-size:13px;color:var(--g-dk);opacity:.85;margin-top:5px}
.lc-row{display:flex;gap:12px;align-items:center;padding:11px 0}
.lc-row+.lc-row{border-top:1px dashed var(--line)}
.lc-row .ic{width:38px;height:38px;border-radius:var(--rp);display:grid;place-items:center;flex:none;
 background:var(--g-lt);color:var(--g-dk)}
.lc-row .ic.amb{background:var(--am-lt);color:var(--am-dk)}
.lc-row b{display:block;font-size:14px;font-weight:600}
.lc-row span{display:block;font-size:12.5px;color:var(--mut);margin-top:1px}
/* step cards */
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:16px}
.step-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r3);padding:24px}
.step-card .num-row{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.step-card .num-row .ic{width:42px;height:42px;border-radius:var(--rp);background:var(--g-lt);
 color:var(--g-dk);display:grid;place-items:center}
.step-card .num-row .stlabel{font-size:12px;font-weight:700;color:var(--mut)}
.step-card h3{margin-bottom:7px}
.step-card p{font-size:14.5px;color:var(--ink2);line-height:1.6}

/* =====================================================================
   6 · CONTENT / ARTICLE CONTAINER
   ===================================================================== */
.article-wrap{max-width:840px;margin:0 auto;padding:36px 26px 72px}
.entry-header{padding:26px 0 6px}
.entry-header .crumbs{font-size:12.5px;color:var(--mut);margin-bottom:12px}
.entry-header .crumbs a{color:var(--g-dk);font-weight:600}
.entry-content{font-size:16px;line-height:1.7;color:var(--ink)}
.entry-content>*+*{margin-top:1.1em}
.entry-content h2{margin-top:1.9em;font-size:1.55rem}
.entry-content h3{margin-top:1.6em;font-size:1.18rem}
.entry-content p{color:var(--ink2)}
.entry-content li{color:var(--ink2);margin:.35em 0}
.entry-content ul,.entry-content ol{padding-left:1.3em}
.entry-content a{color:var(--g-dk);font-weight:600;text-decoration:underline;text-decoration-color:var(--g-br);text-underline-offset:3px}
.entry-content a:hover{text-decoration-color:var(--g)}
.entry-content blockquote{border-left:3px solid var(--g);background:var(--tint);margin:1.4em 0;
 padding:14px 18px;border-radius:0 var(--r1) var(--r1) 0}
.entry-content table{width:100%;border-collapse:collapse;font-size:14.5px}
.entry-content th,.entry-content td{padding:10px 12px;border-bottom:1px solid var(--line2);text-align:left}
.entry-content th{font-weight:600;color:var(--ink)}
.entry-content img{border-radius:var(--r2)}
.entry-content .wp-block-table,.entry-content figure{margin-left:0;margin-right:0}
/* FAQ pattern (details/summary — works with no JS, cache-safe) */
.entry-content details{border-bottom:1px solid var(--line);padding:4px 0}
.entry-content details:first-of-type{border-top:1px solid var(--line)}
.entry-content summary{cursor:pointer;font-weight:600;font-size:15.5px;padding:15px 34px 15px 0;
 position:relative;list-style:none;color:var(--ink)}
.entry-content summary::-webkit-details-marker{display:none}
.entry-content summary::after{content:'';position:absolute;right:12px;top:24px;width:9px;height:9px;
 border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);transform:rotate(45deg);transition:.2s}
.entry-content details[open] summary::after{transform:rotate(-135deg)}
.entry-content details>*:not(summary){margin:0 0 18px;color:var(--ink2);font-size:14.5px;line-height:1.65}
/* notice boxes for content */
.note-g{background:var(--g-lt);border:1px solid var(--g-br);border-radius:var(--r2);padding:14px 16px;
 font-size:14px;color:var(--g-dk);line-height:1.6}
.note-a{background:var(--am-lt);border:1px solid rgba(192,138,30,.3);border-radius:var(--r2);
 padding:14px 16px;font-size:14px;color:var(--am-dk);line-height:1.6}
/* archive cards */
.post-list{display:grid;gap:18px;padding:8px 0 64px}
.post-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r3);padding:22px;
 box-shadow:var(--s1);transition:.18s}
.post-card:hover{border-color:var(--g-br);box-shadow:var(--s3);transform:translateY(-2px)}
.post-card h2{font-size:1.3rem;margin-bottom:8px}
.post-card p{color:var(--ink2);font-size:14.5px}
.post-card .more{display:inline-flex;align-items:center;gap:6px;margin-top:12px;color:var(--g-dk);font-weight:600;font-size:14px}

/* =====================================================================
   7 · PRODUCT CARD + STEPPER (ready for WooCommerce, Phase 4)
   ===================================================================== */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(218px,1fr));gap:20px}
.pc{background:var(--card);border:1px solid var(--line);border-radius:var(--r3);overflow:hidden;
 display:flex;flex-direction:column;box-shadow:var(--s1);transition:.18s;position:relative}
.pc:hover{border-color:var(--g-br);box-shadow:var(--s3);transform:translateY(-4px)}
.pc-img{position:relative;background:var(--g-lt2);overflow:hidden}
.pc-img img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .34s cubic-bezier(.2,.7,.3,1)}
.pc:hover .pc-img img{transform:scale(1.055) translateY(-4px)}
.pc-tag{position:absolute;top:11px;left:11px;z-index:2}
.pc-b{padding:15px 16px 16px;display:flex;flex-direction:column;gap:7px;flex:1}
.pc-o{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--mut)}
.pc-n{font-size:16.5px;font-weight:600;letter-spacing:-.03em;line-height:1.2;color:var(--ink)}
.pc-f{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:9px}
.pc-p b{font-size:19px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pc-p span{font-size:11.5px;color:var(--mut);display:block;margin-top:-2px}
/* quantity stepper — always visible: − 0 + */
.stp{display:inline-flex;align-items:center;gap:1px;background:var(--g);color:#fff;
 border-radius:var(--rp);height:42px;padding:0 3px;flex:none;
 box-shadow:0 1px 2px rgba(6,92,57,.26),0 5px 12px -4px var(--g-glow)}
.stp>button{width:34px;height:34px;border-radius:var(--rp);display:grid;place-items:center;
 color:inherit;transition:background .14s}
.stp>button:hover{background:rgba(255,255,255,.2)}
.stp>button:disabled{opacity:.38;cursor:not-allowed}
.stp>b{min-width:21px;text-align:center;font-size:14.5px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.stp-0{background:transparent;color:var(--g-dk);border:1.5px solid var(--g-br);box-shadow:none}
.stp-0>b{color:var(--mut);font-weight:600}
.stp-0>button:not(:disabled):hover{background:var(--g-lt)}
.stp-0>.pcp{background:var(--g);color:#fff}
.stp-0>.pcp:hover{background:var(--g-dk)}
[data-theme="dark"] .stp{color:#04120B}
[data-theme="dark"] .stp-0{color:var(--g)}
[data-theme="dark"] .stp-0>.pcp{color:#04120B}

/* =====================================================================
   8 · FOOTER + COMPLIANCE
   ===================================================================== */
.ft{background:#0C1A13;color:#C3D2CB;font-size:14px;margin-top:20px}
.ft-m{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;padding:64px 0 44px}
.ft h4{font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:#8FA69B;
 font-weight:700;margin-bottom:14px}
.ft-l{display:flex;flex-direction:column;gap:8px}
.ft-l a{text-align:left;color:#C3D2CB;font-size:14px;padding:3px 0}
.ft-l a:hover{color:#fff}
.ft .lg-n{color:#fff}
.ft .lg-s{color:#9BAFA5}
.ft-blurb{line-height:1.65;max-width:34ch;margin:14px 0 16px;color:#9BAFA5}
.ft-w{border:1px solid rgba(255,255,255,.16);border-radius:var(--r2);padding:14px 16px;font-size:12.5px;
 color:#C3D2CB;line-height:1.6;margin-bottom:18px}
.ft-w b{color:#fff;display:block;margin-bottom:3px}
.ft-lg{border-top:1px solid rgba(255,255,255,.1);padding:22px 0 34px;display:flex;flex-wrap:wrap;
 gap:18px;justify-content:space-between}
.ft-na{font-size:12px;color:#9BAFA5;line-height:1.6;max-width:64ch}
.ft-small{font-size:12px;color:#8FA69B}

/* mobile bottom bar */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:110;background:var(--card-a);
 backdrop-filter:blur(14px);border-top:1px solid var(--line);
 padding:9px 14px calc(9px + env(safe-area-inset-bottom));
 display:none;gap:9px;align-items:center}
.mbar .btn{flex:1}
.mb-i{width:46px;height:46px;border-radius:var(--rp);background:var(--tint);display:grid;
 place-items:center;position:relative;flex:none;color:var(--ink2)}
.mb-wa{background:#1FA855;color:#fff}
.mb-wa:hover{background:#188A46}

/* =====================================================================
   9 · AGE GATE
   ===================================================================== */
.agate{position:fixed;inset:0;z-index:500;display:none;place-items:center;padding:22px;
 background:rgba(12,26,19,.55);backdrop-filter:blur(5px)}
.agate.on{display:grid}
.agate-md{background:var(--card);border-radius:var(--r4);box-shadow:var(--s4);width:100%;max-width:460px;
 max-height:90vh;overflow-y:auto;text-align:center;padding:38px 32px 32px}
.agate-md h2{font-size:1.5rem;margin-bottom:10px}
.agate-md .lead{font-size:14.5px;color:var(--ink2);line-height:1.6;margin-bottom:24px}
.agate-btns{display:flex;gap:11px}
.agate-btns .btn{flex:1}
.agate-no{margin-top:20px;background:var(--tint);border-radius:var(--r2);padding:15px;font-size:13.5px;
 color:var(--ink2);text-align:left}
.age-na{font-size:11.5px;line-height:1.55;color:var(--mut);margin-top:18px;
 padding-top:15px;border-top:1px solid var(--line);text-align:left}

/* =====================================================================
   10 · RESPONSIVE
   ===================================================================== */
@media(max-width:1000px){
 .hero .wrap{grid-template-columns:minmax(0,1fr)}
 .lc{max-width:460px}
 .ft-m{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
 .nv{display:none}
 .burg{display:grid}
 .hd .wrap{gap:12px;height:66px}
 .lg-n{font-size:22px}
 .lg-s{font-size:9.5px;letter-spacing:.18em;margin-top:3px}
 .sec{padding:44px 0}
 .mbar{display:flex}
 body{padding-bottom:76px}
}
@media(max-width:600px){
 .hr-a{gap:7px}
 .hd .wrap{gap:8px}
 .area-b{width:40px;height:40px;padding:0;justify-content:center;flex:none}
 .area-b .area-t{display:none}
 .icb{width:40px;height:40px}
 .wrap{padding:0 16px}
 .article-wrap{padding-left:16px;padding-right:16px}
 .pgrid{grid-template-columns:1fr 1fr;gap:11px}
 .pc-n{font-size:14.5px}
 .pc-p b{font-size:17px}
 .stp{height:36px;padding:0 2px}
 .stp>button{width:29px;height:29px}
 .stp>b{min-width:17px;font-size:13.5px}
 .pc-f{flex-direction:column;align-items:stretch;gap:9px}
 .pc-f>.stp{width:100%;height:38px;justify-content:space-between;padding:0 5px}
 .ft-m{grid-template-columns:1fr}
 .ft-l a{padding:6px 0;min-height:30px}
}
@media(max-width:380px){
 .hr-a>.srch{display:none}
 .lg-n{font-size:20px}
 .lg-s{font-size:8.5px;letter-spacing:.14em}
 .hr-a{gap:5px}
}

/* =====================================================================
   11 · WOOCOMMERCE LIGHT-TOUCH (full templates in Phase 4)
   ===================================================================== */
.woocommerce-store-notice{background:var(--g);color:#fff;padding:10px 16px;font-size:13.5px;text-align:center}
.woocommerce .button,.woocommerce a.button,.woocommerce button.button{
 background:var(--g);color:#fff;border-radius:var(--rp);font-weight:600;border:0;
 padding:12px 22px;font-family:var(--f)}
.woocommerce .button:hover{background:var(--g-dk);color:#fff}

/* Primary-nav dropdown (a top-level menu item that has children) */
.nv-d{position:relative}
.nv-d>a,.nv-d>.nv-t{display:inline-block;padding:10px 15px;border-radius:var(--rp);font-size:14.5px;font-weight:500;color:var(--ink2)}
.nv-d>a::after,.nv-d>.nv-t::after{content:"";display:inline-block;width:5px;height:5px;margin-left:7px;vertical-align:3px;
  border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;transform:rotate(45deg)}
.nv-d>.nv-t{cursor:default;user-select:none}
.nv-d:hover>a,.nv-d:focus-within>a,.nv-d:hover>.nv-t,.nv-d:focus-within>.nv-t{background:var(--g-lt);color:var(--g-dk)}
.nv-dd{position:absolute;top:100%;left:0;min-width:236px;padding:6px;margin-top:6px;display:none;
  flex-direction:column;gap:1px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r2);box-shadow:var(--s3);z-index:130}
.nv-d:hover .nv-dd,.nv-d:focus-within .nv-dd{display:flex}
.nv-dd a{padding:9px 12px;border-radius:var(--r1);font-size:14px;font-weight:500;color:var(--ink2);white-space:nowrap}
.nv-dd a:hover,.nv-dd a:focus-visible{background:var(--g-lt);color:var(--g-dk)}
.mlink-sub{padding-left:28px;color:var(--mut)}

/* Mobile drawer: an item with children opens the SAME dropdown panel as
   desktop - identical card, border, shadow and compact rows (.nv-dd).
   Rendered in flow rather than absolutely, so it cannot clip inside the
   scrolling drawer. Uses <details> - no JavaScript. */
.mgrp{display:block;margin-bottom:7px}
.mnav-p summary.mlink{list-style:none;cursor:pointer;margin-bottom:0}
.mnav-p summary.mlink::-webkit-details-marker{display:none}
.mnav-p summary.mlink>svg{display:none}
.mcar{width:8px;height:8px;flex:0 0 auto;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transform-origin:60% 60%;transition:transform .18s ease}
.mgrp[open]>summary .mcar{transform:rotate(-135deg)}

.mdd{padding:6px;margin-top:6px;display:flex;flex-direction:column;gap:1px;
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r2);box-shadow:var(--s3)}
.mnav-p .mdd a.mlink{width:auto;padding:9px 12px;margin-bottom:0;border:0;
  border-radius:var(--r1);font-size:14px;font-weight:500;color:var(--ink2)}
.mnav-p .mdd a.mlink:hover,.mnav-p .mdd a.mlink:focus-visible{
  background:var(--g-lt);color:var(--g-dk);border:0}
.mnav-p .mdd a.mlink>svg{opacity:.45}