/* พวงหรีดตราด — design tokens (จาก design system) */
:root{
--ink-900:#17140F;--ink-800:#2A2622;--ink-700:#3D3832;--ink-600:#57504A;--ink-500:#736B63;--ink-400:#9A928A;
--paper-0:#FFFFFF;--paper-50:#FBF8F2;--paper-100:#F4EFE6;--paper-200:#E8E1D5;--paper-300:#D6CDBE;
--gold-100:#F4EBD6;--gold-300:#DCC48E;--gold-500:#B5914A;--gold-600:#94742F;--gold-700:#735822;
--leaf-100:#E4ECE2;--leaf-500:#3E6B47;--leaf-700:#25432D;
--rose-100:#F7E3E2;--rose-600:#A3242C;--rose-700:#851C23;
--line-green:#06C755;--line-green-dark:#05A647;
--surface-page:var(--paper-50);--surface-card:var(--paper-0);--surface-sunken:var(--paper-100);--surface-inverse:var(--ink-900);
--text-strong:var(--ink-900);--text-body:var(--ink-700);--text-muted:var(--ink-500);--text-on-inverse-muted:var(--paper-300);--text-accent:var(--gold-700);
--border:var(--paper-200);--border-strong:var(--paper-300);--focus-ring:var(--gold-500);
--font-display:'Noto Serif Thai','Noto Serif',Georgia,serif;
--font-body:'IBM Plex Sans Thai Looped','IBM Plex Sans','Leelawadee UI','Tahoma',sans-serif;
--type-h2:600 30px/1.4 var(--font-display);
--type-body:400 16px/1.7 var(--font-body);
--type-body-sm:400 14px/1.7 var(--font-body);
--type-label:500 14px/1.4 var(--font-body);
--type-caption:400 12px/1.5 var(--font-body);
--ease-out:cubic-bezier(.2,.7,.2,1);--dur-fast:120ms;--dur-base:200ms;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--text-body);font:var(--type-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;color:var(--text-strong);text-wrap:pretty}
p{margin:0;text-wrap:pretty}
a{color:var(--ink-900);text-underline-offset:3px}
a:hover{color:var(--ink-700)}
img{max-width:100%;display:block}
button{font:inherit}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ico{flex-shrink:0;display:block}

.wrap{max-width:1200px;margin:0 auto;padding:56px 20px;display:flex;flex-direction:column;gap:24px}
.sec-head{display:flex;flex-direction:column;gap:8px}
.sec-head h2,.h2{font:var(--type-h2);color:var(--ink-900)}
.muted{color:var(--text-muted)}
.anchor{scroll-margin-top:72px}

/* ---------- Buttons (design-system Button) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;border:1.5px solid transparent;font:600 16px/1.2 var(--font-body);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast)}
.btn:active{transform:scale(.98)}
.btn-sm{min-height:36px;padding:0 14px;font-size:14px}
.btn-lg{min-height:52px;padding:0 28px;font-size:18px}
.btn-block{display:flex;width:100%}
.btn-line{background:var(--line-green);border-color:var(--line-green);color:#fff}
.btn-line:hover{background:var(--line-green-dark);color:#fff}
.btn-gold{background:var(--gold-500);border-color:var(--gold-500);color:var(--ink-900)}
.btn-gold:hover{background:var(--gold-300);color:var(--ink-900)}
.btn-outline{height:48px;padding:0 28px;border-radius:999px;border:1.5px solid var(--ink-900);background:transparent;color:var(--ink-900);font:var(--type-label);cursor:pointer;align-self:center}
.btn-outline:hover{background:var(--paper-100)}

/* ---------- Chip ---------- */
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 16px;border-radius:999px;border:1.5px solid var(--border-strong);background:var(--paper-0);color:var(--ink-800);font:500 14px/1.2 var(--font-body);cursor:pointer;white-space:nowrap;transition:all var(--dur-fast)}
.chip:hover{border-color:var(--ink-400)}
.chip[aria-pressed="true"]{background:var(--ink-900);border-color:var(--ink-900);color:var(--paper-0)}

/* ---------- Notice + header ---------- */
.notice{background:var(--ink-900);color:var(--paper-200);font:var(--type-caption);text-align:center;padding:8px 16px}
.site-header{position:sticky;top:0;z-index:30;background:var(--paper-0);border-bottom:1px solid var(--border)}
.site-header .in{max-width:1200px;margin:0 auto;padding:0 20px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink-900)}
.brand-ring{width:42px;height:42px;border-radius:999px;padding:2px;background:var(--gold-500);box-shadow:0 0 0 1px var(--ink-900);flex-shrink:0;display:block}
.brand-ring img{width:38px;height:38px;border-radius:999px;object-fit:cover;border:1.5px solid var(--ink-900)}
.brand-name{font:600 22px/1 var(--font-display)}
.main-nav{display:flex;gap:26px;font:var(--type-label)}
.main-nav a{text-decoration:none;color:var(--ink-700)}
.main-nav a:hover{color:var(--ink-900)}
.hdr-actions{display:flex;gap:8px;align-items:center}
.ship-btn{white-space:nowrap;flex-shrink:0;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:999px;border:1.5px solid var(--ink-900);color:var(--ink-900);text-decoration:none;font:var(--type-label)}
.ship-btn:hover{background:var(--paper-100)}
.only-narrow{display:none}
@media (max-width:819px){
  .only-wide{display:none!important}
  .only-narrow{display:inline}
}

/* ---------- Hero ---------- */
.hero{background:var(--ink-900);color:var(--paper-0);overflow:hidden}
.hero .in{max-width:1200px;margin:0 auto;padding:56px 20px 64px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:48px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:24px;max-width:560px}
.pill-gold{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border:2px solid var(--gold-500);border-radius:999px;font:var(--type-label);color:var(--paper-0)}
.hero h1{font:600 clamp(44px,7vw,72px)/1.2 var(--font-display);color:var(--paper-0)}
.hero-sub{font:400 20px/1.75 var(--font-body);color:var(--paper-100)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding-top:24px;border-top:1px solid var(--ink-700)}
.stats div{display:flex;flex-direction:column;gap:2px}
.stats b{font:600 22px/1.3 var(--font-display);color:var(--gold-300)}
.stats span{font:var(--type-caption);color:var(--paper-200)}
.hero-media{position:relative;padding:0 0 56px 0;min-width:0}
.hero-photo{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--gold-600);aspect-ratio:4/5;max-height:620px;margin-left:auto;width:min(100%,480px)}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.polaroid{position:absolute;left:0;bottom:0;margin:0;width:min(50%,250px);display:flex;flex-direction:column;background:var(--paper-0);padding:8px 8px 10px;border-radius:10px;box-shadow:0 18px 40px rgba(0,0,0,.35);transform:rotate(-3deg)}
.polaroid img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:6px}
.polaroid figcaption{padding-top:8px;text-align:center;font:500 13px/1.3 var(--font-body);color:var(--ink-900)}
.hero-tag{position:absolute;right:16px;top:16px;display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:var(--ink-900);border:2px solid var(--gold-500);border-radius:999px;font:var(--type-label);color:var(--paper-0)}

/* ---------- Trust row ---------- */
.trust{background:var(--paper-0);border-bottom:1px solid var(--border)}
.trust .in{max-width:1200px;margin:0 auto;padding:28px 20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:20px}
.trust-item{display:flex;gap:14px;align-items:flex-start}
.trust-ico{width:40px;height:40px;border-radius:999px;background:var(--gold-100);color:var(--gold-700);display:grid;place-items:center;flex-shrink:0}
.trust-item div{display:flex;flex-direction:column;gap:2px}
.trust-item strong{font:600 16px/1.5 var(--font-body);color:var(--ink-900)}
.trust-item span{font:var(--type-body-sm);color:var(--text-muted)}

/* ---------- Products ---------- */
.bg-50{background:var(--paper-50)}
.bg-100{background:var(--paper-100)}
.bg-0{background:var(--paper-0)}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(46%,230px),1fr));gap:24px}
@media (max-width:819px){.product-grid{gap:12px}}
.card{display:flex;flex-direction:column;background:var(--paper-0);border:1px solid var(--border);border-radius:8px;overflow:hidden;min-width:0}
.card[hidden]{display:none}
.card-img{position:relative;display:block;background:var(--paper-100);aspect-ratio:3/4;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover}
.badge{position:absolute;top:10px;padding:4px 10px;border-radius:999px;font:600 12px/1.2 var(--font-body)}
.badge-best{right:10px;background:var(--gold-500);color:var(--ink-900)}
.badge-kd{left:10px;background:var(--ink-900);color:var(--paper-0);font-weight:500}
.card-body{display:flex;flex-direction:column;gap:6px;padding:12px;flex:1}
.card-code{font:var(--type-caption);color:var(--text-muted)}
.card-name{font:500 15px/1.5 var(--font-body);color:var(--ink-900)}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:4px;flex-wrap:wrap}
.price{font:600 20px/1.2 var(--font-body);color:var(--ink-900)}
.order-btn{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;background:var(--ink-900);color:var(--paper-0);font:var(--type-label);text-decoration:none}
.order-btn:hover{background:var(--ink-700);color:var(--paper-0)}

/* ---------- Fan table ---------- */
.table-wrap{overflow-x:auto;background:var(--paper-0);border:1px solid var(--border);border-radius:8px}
.fan-table{width:100%;min-width:780px;border-collapse:collapse;font:var(--type-body-sm)}
.fan-table thead tr{background:var(--ink-900);color:var(--paper-0)}
.fan-table th{text-align:right;padding:14px 16px;font:var(--type-label)}
.fan-table th:first-child{text-align:left}
.fan-table tbody tr{border-top:1px solid var(--border)}
.fan-table td{text-align:right;padding:6px 10px}
.fan-table td.model{text-align:left;padding:10px 16px;font:500 15px/1.5 var(--font-body);color:var(--ink-900)}
.fan-price{display:inline-block;padding:6px 10px;border-radius:6px;border:1px solid transparent;color:var(--ink-900);font:500 15px/1.4 var(--font-body);text-decoration:none}
.fan-price:hover{border-color:var(--ink-900);background:var(--gold-100);color:var(--ink-900)}
.fan-none{color:var(--ink-400)}
.fan-table tr.premium td{padding:14px 16px}
.fan-table tr.premium a{font:var(--type-label)}
.h3{margin:16px 0 0;font:600 20px/1.4 var(--font-display);color:var(--ink-900)}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(46%,200px),1fr));gap:16px}
.photo-grid.tight{gap:12px}
.ph{aspect-ratio:3/4;border-radius:8px;overflow:hidden;background:var(--paper-200)}
.ph img{width:100%;height:100%;object-fit:cover}
.fan-fig{margin:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.fan-fig figcaption{font:500 14px/1.5 var(--font-body);color:var(--ink-900)}
.fan-fig figcaption span{display:block;font:var(--type-caption);color:var(--text-muted)}
.bg-0 .ph{background:var(--paper-100)}

/* ---------- Shipping ---------- */
.ship-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:24px;align-items:start}
.temple-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:0;padding:0;list-style:none}
.temple{display:flex;flex-direction:column;align-items:flex-start;gap:2px;height:100%;padding:10px 12px;border-radius:8px;border:1.5px solid var(--border-strong);background:var(--paper-0);color:var(--ink-900);text-align:left;text-decoration:none;transition:border-color var(--dur-fast)}
.temple:hover{border-color:var(--ink-900);color:var(--ink-900)}
.temple b{font:500 15px/1.4 var(--font-body)}
.temple span{font:var(--type-caption);color:var(--text-muted)}
.temple.is-free{border-color:var(--leaf-500);background:var(--leaf-100)}
.temple.is-free:hover{border-color:var(--leaf-700)}
.temple span.free{display:inline-flex;align-items:center;margin-top:2px;padding:2px 10px;border-radius:999px;background:var(--leaf-500);color:#fff;font:600 12px/1.5 var(--font-body);letter-spacing:.2px}
.temple-group{margin:0 0 8px;font:600 15px/1.5 var(--font-body);color:var(--ink-900);display:flex;align-items:center;gap:8px}
.temple-group.free-h{color:var(--leaf-700)}
.temple-group .cnt{font:var(--type-caption);color:var(--text-muted);font-weight:400}
.temple-list + .temple-group{margin-top:20px}
.panel-more{display:inline-block;margin-top:14px;font:var(--type-label);color:var(--ink-900)}
.free-pill{display:inline-flex;align-items:center;padding:2px 12px;border-radius:999px;background:var(--leaf-500);color:#fff;font:600 13px/1.6 var(--font-body)}
.ship-panel h3{font:600 17px/1.5 var(--font-body);color:var(--ink-900);margin:0 0 10px}
.js .ship-panel{display:none}
.js .ship-panel.active{display:block}
.js .ship-panel h3{display:none}
.ship-panels{display:flex;flex-direction:column;gap:24px}
.no-js-hide{display:none}
.js .no-js-hide{display:flex}
.dark-card{display:flex;flex-direction:column;gap:14px;padding:24px;border-radius:12px;background:var(--ink-900);color:var(--paper-0);border:2px solid var(--gold-500)}
.ship-card{position:sticky;top:84px}
.dark-card strong.t{font:600 22px/1.4 var(--font-display);color:var(--paper-0)}
.dark-card .d{color:var(--paper-100);font:var(--type-body-sm)}
.ship-rates{display:grid;grid-template-columns:1fr auto;gap:6px 16px;padding:14px 0;border-top:1px solid var(--ink-700);border-bottom:1px solid var(--ink-700);font:var(--type-body-sm);color:var(--paper-100)}
.ship-rates .g{justify-self:end}
.gold-link{color:var(--gold-300);font:var(--type-label)}
.gold-link:hover{color:var(--gold-100)}

/* ---------- Show more ---------- */
.js :not(.show-extra) > .extra{display:none}
.more-btn{display:none}
.js .more-btn{display:inline-flex;align-items:center}
.js .show-extra + .more-btn,.more-btn[hidden]{display:none!important}

/* ---------- Reviews ---------- */
.reviews .wrap{padding:64px 20px;gap:28px}
.split-head{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:flex-end}
.stars-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.stars-big{color:#F5B400;font:600 22px/1 var(--font-body);letter-spacing:2px}
.outline-link{white-space:nowrap;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border:1.5px solid var(--ink-900);border-radius:999px;color:var(--ink-900);text-decoration:none;font:var(--type-label)}
.outline-link.soft{border-color:var(--border-strong)}
.outline-link:hover{background:var(--paper-0)}
.review-cols{columns:3 300px;column-gap:16px}
.review{break-inside:avoid;margin:0 0 16px;display:flex;flex-direction:column;gap:12px;padding:20px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.rv-head{display:flex;align-items:center;gap:12px}
.avatar{width:44px;height:44px;border-radius:999px;color:#fff;display:grid;place-items:center;font:500 20px/1 var(--font-body);flex-shrink:0}
.rv-who{display:flex;flex-direction:column;min-width:0;flex:1}
.rv-who strong{font:600 16px/1.3 var(--font-body);color:#202124}
.rv-who span{font:13px/1.4 var(--font-body);color:#5F6368}
.g-mark{font:700 15px/1 Arial,sans-serif;color:#4285F4}
.rv-stars{display:flex;align-items:center;gap:10px}
.rv-stars b{color:#F5B400;font:400 16px/1 var(--font-body);letter-spacing:1px}
.rv-stars span{font:13px/1 var(--font-body);color:#5F6368}
.review blockquote{margin:0;font:400 16px/1.7 var(--font-body);color:#202124;text-wrap:pretty}
.review .rv-photo{width:60%;aspect-ratio:1;object-fit:cover;border-radius:10px}
.review figcaption{display:flex;align-items:center;gap:6px;font:var(--type-caption);color:var(--leaf-500)}

/* ---------- How ---------- */
.steps{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:16px}
.steps li{display:flex;flex-direction:column;gap:10px;padding:20px;background:var(--paper-50);border:1px solid var(--border);border-radius:8px}
.step-n{width:36px;height:36px;border-radius:999px;background:var(--ink-900);border:2px solid var(--gold-500);color:var(--paper-0);display:grid;place-items:center;font:600 15px/1 var(--font-body)}
.steps strong{font:600 17px/1.5 var(--font-body);color:var(--ink-900)}
.steps span{font:var(--type-body-sm);color:var(--text-muted)}
.note-gold{padding:14px 18px;border-radius:8px;background:var(--gold-100);color:var(--ink-900);font:500 15px/1.6 var(--font-body)}

/* ---------- Article teasers ---------- */
.art-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:16px}
.art-card{display:flex;flex-direction:column;gap:8px;padding:20px;background:var(--paper-0);border:1px solid var(--border);border-radius:8px;text-decoration:none;color:var(--ink-900);transition:border-color var(--dur-fast)}
.art-card:hover{border-color:var(--ink-400);color:var(--ink-900)}
.art-card .tag{font:var(--type-caption);color:var(--text-accent)}
.art-card strong{font:600 18px/1.5 var(--font-display)}
.art-card span.ex{font:var(--type-body-sm);color:var(--text-muted)}
.label-link{font:var(--type-label);color:var(--ink-900)}

/* ---------- FAQ + CTA ---------- */
.faq-grid{max-width:1200px;margin:0 auto;padding:56px 20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:40px;align-items:start}
.faq-col{display:flex;flex-direction:column;gap:16px}
.accordion{border-top:1px solid var(--border)}
.accordion details{border-bottom:1px solid var(--border)}
.accordion summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;cursor:pointer;list-style:none;font:500 16px/1.5 var(--font-body);color:var(--text-strong)}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary .ico{color:var(--ink-500);transition:transform var(--dur-base) var(--ease-out)}
.accordion details[open] summary .ico{transform:rotate(180deg)}
.accordion .ans{padding:0 0 18px;font:var(--type-body);color:var(--text-body)}
.cta-card{display:flex;flex-direction:column;gap:20px;padding:32px;background:var(--ink-900);border:2px solid var(--gold-500);border-radius:12px;color:var(--paper-0)}
.cta-card h2{font:var(--type-h2);color:var(--paper-0)}
.cta-card p{color:var(--paper-100)}
.cta-btns{display:flex;flex-direction:column;gap:10px}
.map-btn{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;border-radius:999px;border:1.5px solid var(--ink-600);color:var(--paper-0);text-decoration:none;font:var(--type-label)}
.map-btn:hover{background:var(--ink-800);color:var(--paper-0)}
.cta-card address{display:flex;gap:10px;align-items:flex-start;padding-top:8px;font:var(--type-body-sm);font-style:normal;color:var(--paper-100)}

/* ---------- Footer (design-system SiteFooter) ---------- */
.site-footer{background:var(--surface-inverse);color:var(--paper-0);padding:48px 20px 32px}
.site-footer .cols{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px}
.ft-brand{font:600 24px/1.3 var(--font-display);margin-bottom:8px}
.ft-h{font:600 14px/1.4 var(--font-body);color:var(--gold-300);margin-bottom:12px}
.ft-list{display:grid;gap:6px}
.ft-li{font:var(--type-body-sm);color:var(--text-on-inverse-muted);text-decoration:none}
a.ft-li:hover{color:var(--paper-0)}
.ft-phone{display:inline-flex;gap:8px;align-items:center;color:#fff;text-decoration:none;font:600 18px/1 var(--font-body)}
.ft-phone:hover{color:var(--gold-300)}
.ft-copy{max-width:1200px;margin:32px auto 0;padding-top:20px;border-top:1px solid var(--ink-700);font:var(--type-caption);color:var(--ink-400)}

/* ---------- Floating capsule, consent, toast ---------- */
.float-spacer{height:72px}
.float-bar{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:var(--ink-900);border:1.5px solid var(--gold-500);box-shadow:0 10px 30px rgba(23,20,15,.28)}
.float-bar a{display:flex;align-items:center;gap:8px;height:44px;border-radius:999px;text-decoration:none;font:500 14px/1 var(--font-body);white-space:nowrap}
.fb-call{padding:0 16px 0 14px;color:var(--paper-0)}
.fb-call:hover{background:var(--ink-700);color:var(--paper-0)}
.fb-sep{width:1px;height:22px;background:var(--ink-600)}
.fb-line{padding:0 16px 0 12px;background:var(--line-green);color:#fff;font-weight:600!important}
.fb-line:hover{background:var(--line-green-dark);color:#fff}
.consent{position:fixed;left:12px;right:12px;bottom:80px;z-index:56;margin:0 auto;max-width:520px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;background:var(--paper-0);border:1px solid var(--border);box-shadow:0 10px 30px rgba(23,20,15,.18)}
.consent[hidden]{display:none}
.consent span{flex:1 1 260px;font:var(--type-body-sm);color:var(--ink-800)}
.consent div{display:flex;gap:8px}
.consent button{height:38px;padding:0 14px;border-radius:999px;border:1.5px solid var(--border-strong);background:#fff;color:var(--ink-900);font:var(--type-label);cursor:pointer}
.consent button.yes{padding:0 16px;border:0;background:var(--ink-900);color:var(--paper-0)}
.toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);z-index:55;max-width:min(92vw,420px);padding:12px 18px;border-radius:12px;background:var(--paper-0);border:1px solid var(--border);box-shadow:0 10px 30px rgba(23,20,15,.2);color:var(--ink-900);font:500 14px/1.6 var(--font-body);text-align:center}
.toast[hidden]{display:none}

/* ---------- Articles page ---------- */
.art-page{background:var(--paper-50)}
.art-header .in{max-width:1100px}
.art-header .brand-name{font-size:20px}
.art-layout{max-width:1100px;margin:0 auto;padding:40px 20px 80px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:40px;align-items:start}
.toc{position:sticky;top:88px;display:flex;flex-direction:column;gap:6px;padding:20px;background:var(--paper-0);border:1px solid var(--border);border-radius:10px;max-width:300px}
.toc .crumb{font:var(--type-caption);color:var(--text-muted)}
.toc .crumb a{color:inherit}
.toc strong{font:600 18px/1.4 var(--font-display);color:var(--ink-900);margin-bottom:6px}
.toc a.t{font:var(--type-body-sm);text-decoration:none}
.toc a.t:hover{text-decoration:underline}
.art-main{grid-column:span 2;min-width:0;display:flex;flex-direction:column;gap:56px;max-width:720px}
@media (max-width:640px){.art-main{grid-column:auto}.toc{position:static;max-width:none}}
.art-main h1{font:600 clamp(32px,5vw,44px)/1.3 var(--font-display);color:var(--ink-900)}
.art{scroll-margin-top:84px;display:flex;flex-direction:column;gap:14px}
.art .tag{font:var(--type-caption);color:var(--text-accent)}
.art h2{font:var(--type-h2);color:var(--ink-900)}
.art h3{margin:8px 0 0;font:600 19px/1.5 var(--font-body);color:var(--ink-900)}
.art ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.art ul.gap8{gap:8px}
.warn{padding:14px 16px;border-radius:8px;background:var(--rose-100);color:var(--rose-700);font:500 15px/1.6 var(--font-body)}
.district-box{scroll-margin-top:84px;display:flex;flex-direction:column;gap:10px;padding:20px;background:var(--paper-0);border:1px solid var(--border);border-radius:8px}
.district-box .hd{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px}
.district-box h3{margin:0;font:600 20px/1.4 var(--font-display)}
.district-box .hd span{font:var(--type-caption);color:var(--text-muted)}
.wat-list{margin:0;padding:0!important;list-style:none;display:grid!important;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px 16px!important}
.wat-list li{display:flex;flex-direction:column;padding:6px 0;border-bottom:1px solid var(--border)}
.wat-list b{font:500 15px/1.5 var(--font-body);color:var(--ink-900)}
.wat-list span{font:var(--type-caption);color:var(--text-muted)}
.src{font:var(--type-caption);color:var(--text-muted)}
.line-pill{align-self:flex-start;display:inline-flex;align-items:center;height:48px;padding:0 22px;border-radius:999px;background:var(--line-green);color:#fff;text-decoration:none;font:var(--type-label)}
.line-pill:hover{background:var(--line-green-dark);color:#fff}
.dist-item{display:flex;flex-direction:column;gap:6px}
.dist-item h3{margin:0}
.art-cta{display:flex;flex-direction:column;gap:14px;padding:28px;border-radius:12px;background:var(--ink-900);border:2px solid var(--gold-500);color:var(--paper-0)}
.art-cta strong{font:600 24px/1.4 var(--font-display)}

/* ---------- Local pages (อำเภอ / วัด) ---------- */
.local-main{max-width:1100px;margin:0 auto;padding:20px 20px 40px;display:flex;flex-direction:column;gap:48px}
.crumbs{font:var(--type-caption);color:var(--text-muted)}
.crumbs a{color:var(--text-muted)}
.local-hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:24px;align-items:start}
.local-hero-copy{display:flex;flex-direction:column;gap:18px}
.local-hero .pill-gold{color:var(--ink-900)}
.local-hero h1{font:600 clamp(32px,5vw,46px)/1.3 var(--font-display);color:var(--ink-900)}
.local-hero .lead{font:400 18px/1.75 var(--font-body);color:var(--ink-700)}
.ship-box{display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:12px;background:var(--ink-900);border:2px solid var(--gold-500);color:var(--paper-0)}
.ship-box.free{background:var(--leaf-700);border-color:var(--leaf-500)}
.ship-box strong{font:600 22px/1.4 var(--font-display)}
.ship-box p{color:var(--paper-100);font:var(--type-body-sm)}
.ship-box dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;padding-top:12px;border-top:1px solid rgba(255,255,255,.18);font:var(--type-body-sm)}
.ship-box dt{color:var(--paper-300)}
.ship-box dd{margin:0;color:var(--paper-0)}
.local-sec{display:flex;flex-direction:column;gap:18px}
.local-sec h2{font:var(--type-h2);color:var(--ink-900)}
.local-sec > p{max-width:760px}
.pop-list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.pop-list a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 16px;border-radius:999px;border:1.5px solid var(--border-strong);background:var(--paper-0);color:var(--ink-900);font:500 14px/1.2 var(--font-body);text-decoration:none}
.pop-list a:hover{border-color:var(--ink-900)}
.pop-list a.is-free{border-color:var(--leaf-500);background:var(--leaf-100)}
.pop-list a .free-pill{font-size:11px;padding:0 8px}
.dist-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.dist-links a{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:8px;border:1px solid var(--border);background:var(--paper-0);text-decoration:none;color:var(--ink-900)}
.dist-links a:hover{border-color:var(--ink-400)}
.dist-links b{font:600 16px/1.4 var(--font-display)}
.dist-links span{font:var(--type-caption);color:var(--text-muted)}
.local-main .product-grid{grid-template-columns:repeat(auto-fill,minmax(min(46%,200px),1fr));gap:16px}
.faq-list{display:flex;flex-direction:column;gap:14px;max-width:760px}
.faq-list h3{font:600 17px/1.5 var(--font-body);color:var(--ink-900);margin:0}
.faq-list p{color:var(--text-body)}
.ft-list a.ft-li{text-decoration:none}

.art-single{max-width:760px;width:100%}
.art-single h1,.page-h1{font:600 clamp(30px,5vw,42px)/1.35 var(--font-display);color:var(--ink-900)}
.art-single .wat-list a{color:var(--ink-900)}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}