:root{
  /* ── KitzYou Brand Identity · warm (brown/gold/green) on clean white ── */
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F8F3ED; --surface-3:#F1E8DC;
  --ink:#2B1F18; --muted:#6B5A4A; --faint:#A89A8C; --line:#EBE1D4;
  --brand:#6A442A; --brand-2:#C88A3D; --brand-ink:#6A442A; --brand-soft:#EFE3D3;
  --accent:#C88A3D;
  --gold:#C88A3D; --gold-soft:#F6EAD6; --green:#5FA46A; --green-soft:#E7F1E6; --rose:#C56B86;
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px; --r-pill:999px;
  --shadow-s:0 1px 2px rgba(43,31,24,.05),0 1px 3px rgba(43,31,24,.06);
  --shadow-m:0 6px 22px rgba(43,31,24,.10);
  --shadow-l:0 16px 40px rgba(43,31,24,.13);
  --shadow-cta:0 8px 20px rgba(106,68,42,.26);
  --maxw:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:"Sarabun",system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.has-buybar{padding-bottom:108px}
h1,h2,h3{font-family:"Sarabun",sans-serif;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ───────── top bar / nav ───────── */
.appbar{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.88);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.appbar-in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:12px;padding:12px 18px}
.iconbtn{width:42px;height:42px;border-radius:var(--r-pill);display:grid;place-items:center;background:var(--surface-2);color:var(--ink);border:1px solid var(--line);cursor:pointer;flex:none;transition:.15s}
.iconbtn:hover{background:var(--surface-3)}
.iconbtn svg{width:21px;height:21px}
.brand{flex:1;display:flex;align-items:center;gap:10px;justify-content:center;font-family:"Sarabun";font-weight:700;font-size:21px;letter-spacing:-.02em;color:var(--brand)}
.brand .mark{width:36px;height:36px;border-radius:11px;background:var(--brand);display:grid;place-items:center;box-shadow:var(--shadow-s);flex:none}
.brand .mark svg{width:24px;height:24px}
.brand b{color:var(--green);font-weight:700}
.brand .wm,.fbrand .wm{display:inline-flex;align-items:baseline;white-space:nowrap}
.brand .wm b,.fbrand .wm b{margin:0}
.navlinks{display:none;gap:6px;align-items:center;font-family:"Sarabun";font-weight:600;font-size:15px}
.navlinks a{color:var(--ink);opacity:.85;white-space:nowrap;padding:8px 14px;border-radius:var(--r-pill);transition:.15s}
.navlinks a:hover{color:var(--brand);opacity:1;background:var(--surface-2)}
.navdrop{position:relative}
.navtrigger{background:none;border:none;font:inherit;font-weight:600;font-size:15px;color:var(--ink);opacity:.85;cursor:pointer;display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--r-pill);transition:.15s}
.navtrigger:hover{opacity:1;color:var(--brand);background:var(--surface-2)}
.navtrigger svg{transition:.2s}
.navdrop:hover .navtrigger svg{transform:rotate(180deg)}
.navpanel{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-l);padding:10px;display:none;grid-template-columns:1fr 1fr;gap:2px;width:420px;z-index:60}
.navdrop:hover .navpanel,.navdrop:focus-within .navpanel{display:grid}
.navpanel a{padding:10px 13px;border-radius:var(--r-md);color:var(--ink);font-weight:500;font-size:14.5px;white-space:nowrap;opacity:1;transition:.12s}
.navpanel a:hover{background:var(--surface-2);color:var(--brand)}
.navpanel-all{grid-column:1 / -1;color:var(--brand)!important;font-weight:700;border-top:1px solid var(--line);margin-top:5px;border-radius:0 0 var(--r-md) var(--r-md);padding-top:12px!important}

/* ───────── pager ───────── */
.pager{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;align-items:center;margin:24px 18px 6px}
.pager a,.pager .pg-cur,.pager .pg-gap{min-width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-md);font-family:"Sarabun";font-weight:600;font-size:14.5px}
.pager a{background:var(--surface);border:1px solid var(--line);color:var(--ink);transition:.15s}
.pager a:hover{color:var(--brand);border-color:var(--brand-soft)}
.pager .pg-cur{background:var(--brand);color:#fff}
.pager .pg-gap{color:var(--faint)}
.pager .pg-arrow{font-size:18px}

/* ───────── search ───────── */
.searchpage{margin:18px 18px}
.searchbox{display:flex;align-items:center;gap:11px;background:var(--surface);border:1.5px solid var(--brand);border-radius:var(--r-pill);padding:14px 20px;box-shadow:var(--shadow-s);color:var(--muted)}
.searchbox svg{color:var(--brand);flex:none}
.searchbox input{flex:1;border:none;outline:none;background:none;font:inherit;font-size:16px;color:var(--ink)}
#sresults{margin-top:18px}
.sempty{color:var(--faint);font-size:14.5px;text-align:center;padding:34px 0}
.sgroup{margin-bottom:16px}
.slabel{font-family:"Sarabun";font-weight:700;font-size:14px;color:var(--muted);margin:6px 0 9px}
.schips{display:flex;flex-wrap:wrap;gap:8px}
.schip{font-size:14.5px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:9px 15px;color:var(--ink);transition:.15s}
.schip:hover{color:var(--brand);border-color:var(--brand-soft)}

/* ───────── filter bar ───────── */
.filterbar{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:0 18px 14px}
.filterbar select,.filterbar input{font:inherit;font-size:14.5px;padding:9px 13px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);color:var(--ink)}
.filterbar select{max-width:170px}
.filterbar input{width:112px}
.fchk{display:flex;align-items:center;gap:7px;font-size:14.5px;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:9px 13px;cursor:pointer}
.fcount{font-size:14.5px;color:var(--muted);margin:0 18px 12px;font-weight:600}
.more-btn{display:block;margin:18px auto;background:var(--surface);border:1.5px solid var(--brand);color:var(--brand-ink);font-family:"Sarabun";font-weight:700;font-size:14.5px;padding:12px 30px;border-radius:var(--r-pill);cursor:pointer;transition:.15s}
.more-btn:hover{background:var(--brand);color:#fff}

/* ───────── layout ───────── */
.wrap{max-width:520px;margin:0 auto;padding:0 4px}

/* breadcrumb */
.crumbs{display:flex;gap:7px;overflow-x:auto;padding:14px 18px 6px;scrollbar-width:none}
.crumbs::-webkit-scrollbar{display:none}
.crumbs a,.crumbs span{flex:none;font-size:14px;color:var(--muted);white-space:nowrap}
.crumbs a:hover{color:var(--brand)}
.crumbs .here{color:var(--ink);font-weight:600}

/* gallery */
.gallery{padding:10px 18px 0}
.stage{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-s);aspect-ratio:1/1}
.stage img{width:100%;height:100%;object-fit:cover}
.badge-disc{position:absolute;top:14px;left:14px;background:var(--rose);color:#fff;font-family:"Sarabun";font-weight:700;font-size:14px;padding:7px 12px;border-radius:var(--r-pill);box-shadow:var(--shadow-s)}
.badge-disc small{font-weight:400;font-size:12px;opacity:.9;display:block;line-height:1;margin-top:1px}
.heart{position:absolute;top:14px;right:14px;width:42px;height:42px;border-radius:var(--r-pill);background:rgba(255,255,255,.95);display:grid;place-items:center;box-shadow:var(--shadow-s);border:1px solid var(--line);cursor:pointer;color:var(--rose)}
.heart svg{width:21px;height:21px}.heart.on svg{fill:var(--rose)}
.dots{position:absolute;bottom:12px;left:0;right:0;display:flex;gap:5px;justify-content:center}
.dots i{width:6px;height:6px;border-radius:var(--r-pill);background:rgba(26,29,33,.22);transition:.2s}
.dots i.on{width:18px;background:var(--brand)}
.thumbs{display:flex;gap:10px;overflow-x:auto;padding:12px 0 2px;scrollbar-width:none}
.thumbs::-webkit-scrollbar{display:none}
.thumb{flex:none;width:62px;height:62px;border-radius:var(--r-md);overflow:hidden;background:var(--surface-2);border:2px solid var(--line);cursor:pointer;transition:.18s}
.thumb.on{border-color:var(--brand)}
.thumb img{width:100%;height:100%;object-fit:cover}

/* ───────── cards ───────── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-s);margin:14px 18px;padding:20px}
.title{font-family:"Sarabun";font-weight:700;font-size:22px;line-height:1.35;letter-spacing:-.01em}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;padding:6px 12px;border-radius:var(--r-pill);font-weight:600}
.chip svg{width:14px;height:14px}
.chip.brand-c{background:var(--surface-2);color:var(--muted);border:1px solid var(--line);font-weight:500}
.chip.official{background:var(--green-soft);color:var(--green)}
.chip.top{background:var(--gold-soft);color:#8A5A12}
.priceblock{display:flex;align-items:flex-end;gap:11px;margin-top:17px;flex-wrap:wrap}
.price-now{font-family:"Sarabun";font-weight:700;font-size:38px;color:var(--brand);line-height:1;letter-spacing:-.02em}
.price-was{font-size:16px;color:var(--faint);text-decoration:line-through;margin-bottom:4px}
.price-off{background:var(--green-soft);color:var(--green);font-weight:700;font-size:13.5px;padding:5px 10px;border-radius:8px;margin-bottom:4px}
.cta-row{display:flex;gap:10px;margin-top:18px}
.cta-primary{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--brand);color:#fff;font-family:"Sarabun";font-weight:700;font-size:16.5px;padding:15px 18px;border-radius:var(--r-pill);box-shadow:var(--shadow-cta);transition:.15s}
.cta-primary:hover{filter:brightness(1.07)}
.cta-primary svg{width:20px;height:20px}
.cta-secondary{flex:none;display:flex;align-items:center;justify-content:center;gap:6px;background:#fff;color:var(--brand-ink);border:1.5px solid var(--brand);font-family:"Sarabun";font-weight:700;font-size:14px;padding:14px 15px;border-radius:var(--r-pill);white-space:nowrap;transition:.15s}
.cta-secondary:hover{background:var(--brand-soft)}
.cta-secondary svg{width:16px;height:16px}
.stats{display:flex;gap:0;margin-top:18px;border-top:1px solid var(--line);padding-top:15px}
.stat{flex:1;text-align:center;position:relative}
.stat+.stat::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:1px;background:var(--line)}
.stat b{display:block;font-family:"Sarabun";font-weight:700;font-size:17px}
.stat span{font-size:13.5px;color:var(--muted)}
.stat .gold{color:var(--gold)}.stat .green{color:var(--green)}

.sec-h{display:flex;align-items:center;gap:8px;font-family:"Sarabun";font-weight:700;font-size:17px;margin-bottom:14px;letter-spacing:-.01em}
.sec-h svg{width:19px;height:19px;color:var(--brand)}
.lbl{font-size:13.5px;color:var(--muted);font-weight:600;margin-bottom:10px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{font-size:14px;padding:9px 14px;border-radius:var(--r-pill);background:var(--surface-2);border:1.5px solid var(--line);cursor:pointer;transition:.16s;color:var(--ink)}
.opt.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink);font-weight:600}

.feats{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.feat{display:flex;gap:11px;align-items:flex-start;background:var(--surface-2);border-radius:var(--r-md);padding:13px}
.feat .fi{width:36px;height:36px;border-radius:11px;background:#fff;display:grid;place-items:center;flex:none;color:var(--brand);box-shadow:var(--shadow-s)}
.feat .fi svg{width:19px;height:19px}
.feat b{font-family:"Sarabun";font-weight:700;font-size:14.5px;display:block;line-height:1.3}
.feat span{font-size:13.5px;color:var(--muted);line-height:1.4}

.desc{font-size:15px;color:#3A3F46;line-height:1.8;position:relative;max-height:124px;overflow:hidden;transition:max-height .3s}
.desc.open{max-height:5000px}
.desc p{margin-bottom:11px}.desc ul{margin:0 0 11px 18px}.desc li{margin-bottom:5px}
.desc-fade{position:absolute;left:0;right:0;bottom:0;height:56px;background:linear-gradient(transparent,var(--surface));pointer-events:none}
.desc.open + .desc-fade{display:none}
.readmore{margin-top:12px;display:inline-flex;align-items:center;gap:5px;color:var(--brand);font-weight:700;font-size:14px;background:none;border:none;cursor:pointer;font-family:"Sarabun"}
.readmore svg{width:16px;height:16px;transition:.2s}

.attrs{display:flex;flex-wrap:wrap;gap:8px}
.attr{font-size:13.5px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 13px;color:var(--muted)}
.attr b{color:var(--ink);font-weight:600}

/* ───────── related / product grid ───────── */
.rel-h{display:flex;align-items:center;justify-content:space-between;margin:30px 18px 14px}
.rel-h h2{font-family:"Sarabun";font-weight:700;font-size:20px;letter-spacing:-.01em}
.rel-h a{font-size:14px;color:var(--brand);font-weight:700}
.rail{display:flex;gap:14px;overflow-x:auto;padding:2px 18px 8px;scrollbar-width:none;scroll-snap-type:x mandatory}
.rail::-webkit-scrollbar{display:none}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:2px 18px 8px}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-s);overflow:hidden;transition:.16s}
.pcard:hover{box-shadow:var(--shadow-m);transform:translateY(-2px)}
.rail .pcard{flex:none;width:168px;scroll-snap-align:start}
.pcard .pimg{position:relative;aspect-ratio:1/1;background:var(--surface-2)}
.pcard .pimg img{width:100%;height:100%;object-fit:cover}
.pcard .pdisc{position:absolute;top:8px;left:8px;background:var(--rose);color:#fff;font-size:13px;font-weight:700;padding:3px 8px;border-radius:var(--r-pill)}
.pcard .pb{padding:11px 12px 13px}
.pcard .pt{font-size:14px;line-height:1.45;height:38px;overflow:hidden;color:var(--ink)}
.pcard .pp{font-family:"Sarabun";font-weight:700;font-size:16px;color:var(--brand);margin-top:6px}
.pcard .pp s{font-weight:400;font-size:13.5px;color:var(--faint);margin-left:5px}
.pcard .pm{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--muted);margin-top:4px}
.pcard .pm svg{width:12px;height:12px;color:var(--gold)}
.pcard .pbrand{font-size:13px;color:var(--muted);font-weight:600;margin-bottom:2px}
.pcard .pcoff{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center}
.pcard .pcoff svg{width:12px;height:12px}
.pcard .pfav{position:absolute;bottom:8px;right:8px;width:29px;height:29px;border-radius:50%;background:rgba(255,255,255,.95);border:1px solid var(--line);display:grid;place-items:center;color:var(--rose);cursor:pointer;box-shadow:var(--shadow-s)}
.pcard .pfav svg{width:15px;height:15px}.pcard .pfav.on svg{fill:var(--rose)}

.brail{display:flex;gap:11px;overflow-x:auto;padding:2px 18px 8px;scrollbar-width:none}
.brail::-webkit-scrollbar{display:none}
.bgrid{display:grid;grid-template-columns:1fr 1fr;gap:13px;padding:2px 18px}
.bcard{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-s);padding:13px;transition:.16s}
.bcard:hover{box-shadow:var(--shadow-m)}
.brail .bcard{flex:none;width:182px}
.bmono{width:42px;height:42px;border-radius:12px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-family:"Sarabun";font-weight:700;font-size:18px;flex:none}
.bmono.lg{width:62px;height:62px;font-size:26px;border-radius:16px}
.bcard b{font-family:"Sarabun";font-weight:700;font-size:14.5px;display:block;line-height:1.2}
.bcard span{font-size:13.5px;color:var(--muted)}
.brandhead{display:flex;align-items:center;gap:15px;margin:18px 18px}
.brandhead h1{font-size:26px;line-height:1.2}
.brandhead span{font-size:14.5px;color:var(--muted)}
.infostrip{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;margin:0}
.info-i{display:flex;gap:9px;align-items:flex-start;background:var(--surface-2);border-radius:var(--r-md);padding:11px;font-size:13px;color:var(--muted);line-height:1.35}
.info-i svg{color:var(--brand);flex:none}
.info-i b{display:block;color:var(--ink);font-size:13px;font-weight:700;margin-top:1px}
.spec{width:100%;border-collapse:collapse;font-size:14px}
.spec td{padding:9px 0;border-bottom:1px solid var(--line);vertical-align:top}
.spec td:first-child{color:var(--muted);width:38%}
.spec td:last-child{color:var(--ink);font-weight:500}
.spec tr:last-child td{border-bottom:none}
.tagrow{display:flex;flex-wrap:wrap;gap:8px}
.tagpill{font-size:13.5px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 13px;color:var(--brand-ink)}
.cnt{color:var(--muted);font-weight:400;font-size:15px}
/* article index filter chips (/articles/) */
.afilter{display:flex;flex-wrap:wrap;gap:10px;padding:0 18px;margin:20px 0 0}
.afilter:first-of-type{margin-top:16px}
.afilter+.afilter{margin-top:14px}
.afilter:last-of-type{margin-bottom:28px}
.achip{font-size:13.5px;font-weight:600;line-height:1;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:9px 16px;color:var(--brand-ink);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.achip:hover{background:var(--surface-3)}
.achip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.afilter-empty{padding:18px;color:var(--muted);font-size:14.5px}

.faq-item{border-bottom:1px solid var(--line)}.faq-item:last-child{border-bottom:none}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 0;cursor:pointer;font-family:"Sarabun";font-weight:700;font-size:15px}
.faq-q svg{width:18px;height:18px;color:var(--muted);transition:.2s;flex:none}
.faq-item.open .faq-q svg{transform:rotate(180deg);color:var(--brand)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .26s;font-size:14px;color:var(--muted);line-height:1.7}
.faq-item.open .faq-a{max-height:500px;padding-bottom:15px}

.disclose{margin:16px 18px 0;font-size:13px;color:var(--faint);line-height:1.6;display:flex;gap:8px}
.disclose svg{width:15px;height:15px;flex:none;margin-top:2px}
.site-footer{margin-top:44px;width:100vw;margin-left:calc(50% - 50vw);border-top:1px solid var(--line);background:var(--surface-2);color:var(--muted)}
.footer-in{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:28px;padding:36px 24px 26px}
.footer-brand .fbrand{display:inline-flex;align-items:center;gap:8px;font-family:"Sarabun";font-weight:700;font-size:19px;color:var(--brand);margin-bottom:12px}
.footer-brand .fbrand .mark{width:30px;height:30px;border-radius:9px;background:var(--brand);display:grid;place-items:center}
.footer-brand .fbrand .mark svg{width:20px;height:20px}
.footer-brand .fbrand b{color:var(--green)}
.footer-blurb{font-size:14.5px;line-height:1.7;color:var(--muted);max-width:320px;margin:0}
.footer-col h3{font-family:"Sarabun";font-weight:700;font-size:14px;color:var(--ink);margin:0 0 12px}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.footer-col a{color:var(--muted);font-size:14.5px}
.footer-col a:hover{color:var(--brand)}
.footer-bottom{max-width:var(--maxw);margin:0 auto;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between;align-items:center;padding:16px 24px 30px;font-size:13px;color:var(--faint)}
.footer-aff{max-width:600px;line-height:1.55}
@media (max-width:760px){.footer-in{grid-template-columns:1fr 1fr;gap:22px 20px}.footer-brand{grid-column:1 / -1}}
/* hero popular searches */
.hero-pop{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14.5px}
.hero-pop span{color:#fff;opacity:.8;font-weight:600}
.hero-pop a{background:rgba(255,255,255,.16);color:#fff;padding:6px 13px;border-radius:var(--r-pill);transition:background .15s}
.hero-pop a:hover{background:rgba(255,255,255,.3)}
/* home about / intro block */
.home-about{margin:38px 18px 0;font-size:15px;line-height:1.85;color:#3A3F46}
.home-about h2{font-family:"Sarabun";font-weight:700;font-size:22px;margin-bottom:12px;letter-spacing:-.01em;color:var(--ink)}
.home-about p{margin-bottom:12px}
/* home FAQ extras */
.faq-intro{font-size:14.5px;line-height:1.7;color:var(--muted);margin:2px 0 8px;padding:0 2px}
.faq-toggle{margin:8px auto 2px;display:block;background:none;border:none;color:var(--brand);font-family:"Sarabun";font-weight:700;font-size:14.5px;cursor:pointer;padding:8px}
.faq-toggle:hover{text-decoration:underline}
/* static info pages */
.static-page{padding:0 18px;max-width:760px;font-size:16px;line-height:1.85;color:#34393F}
.static-page h1{font-family:"Sarabun";font-weight:700;font-size:30px;margin:14px 0 16px;color:var(--ink);letter-spacing:-.01em}
.static-page h2{font-family:"Sarabun";font-weight:700;font-size:21px;margin:26px 0 10px;color:var(--ink)}
.static-page p{margin:12px 0}
.static-page ul{margin:12px 0 12px 4px;padding-left:22px}
.static-page li{margin:7px 0}
.static-page a{color:var(--brand);font-weight:700;text-decoration:underline;text-decoration-color:var(--brand-soft);text-underline-offset:3px}
/* mobile slide-down menu */
.mobile-menu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow-m);padding:8px;max-height:78vh;overflow-y:auto;flex-direction:column;gap:2px;z-index:55}
body.menu-open .mobile-menu{display:flex}
.mobile-menu a{padding:13px 14px;border-radius:var(--r-md);color:var(--ink);font-weight:500;font-size:15px}
.mobile-menu a:hover{background:var(--surface-2);color:var(--brand)}
.mobile-menu .mm-all{color:var(--brand);font-weight:700;border-bottom:1px solid var(--line);margin-bottom:4px;padding-bottom:14px}

/* ───────── sticky buy bar ───────── */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;justify-content:center;pointer-events:none}
.buybar-in{pointer-events:auto;width:100%;max-width:520px;display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.96);backdrop-filter:blur(12px) saturate(1.4);border-top:1px solid var(--line);padding:14px 18px calc(14px + env(safe-area-inset-bottom));box-shadow:0 -6px 22px rgba(16,24,40,.08)}
.bb-thumb{width:58px;height:58px;border-radius:14px;object-fit:cover;flex:none;border:1px solid var(--line)}
.bb-price{flex:1;min-width:0}
.bb-price small{font-size:13.5px;color:var(--muted);display:block;line-height:1.2}
.bb-price b{font-family:"Sarabun";font-weight:700;font-size:23px;color:var(--brand)}
.bb-cta{flex:none;display:flex;align-items:center;justify-content:center;gap:7px;background:var(--brand);color:#fff;font-family:"Sarabun";font-weight:700;font-size:16px;padding:14px 24px;border-radius:var(--r-pill);box-shadow:var(--shadow-cta)}
.bb-cta svg{width:20px;height:20px}

/* ───────── hero (home) ───────── */
.hero{margin:18px 18px;background:linear-gradient(135deg,#7A4A2B,#A8662F);color:#fff;border-radius:var(--r-xl);padding:34px 26px;box-shadow:var(--shadow-m);position:relative;overflow:hidden}
.hero h1{font-size:28px;font-weight:700;line-height:1.3;color:#fff;letter-spacing:-.02em}
.hero p{margin-top:10px;font-size:15px;opacity:.94}
.hero .search{margin-top:20px;display:flex;align-items:center;gap:9px;background:#fff;border-radius:var(--r-pill);padding:13px 18px;color:var(--muted);position:relative;z-index:1}
.hero .search svg{width:18px;height:18px;color:var(--brand)}
.sec-title{font-family:"Sarabun";font-weight:700;font-size:22px;margin:30px 18px 14px;letter-spacing:-.01em}
.cats-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;padding:0 18px}
.cat-tile{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-s);padding:14px;transition:.16s}
.cat-tile:hover{box-shadow:var(--shadow-m);transform:translateY(-2px)}
.cat-tile:active{transform:scale(.98)}
.cat-tile .cat-img{width:56px;height:56px;border-radius:50%;overflow:hidden;flex:none;background:var(--surface-2)}
.cat-tile .cat-img img{width:100%;height:100%;object-fit:cover}
.cat-tile .ci{width:54px;height:54px;border-radius:50%;background:var(--brand-soft);display:grid;place-items:center;color:var(--brand);flex:none}
.cat-tile .ci svg{width:26px;height:26px}
.cat-tile .cat-tx{flex:1;min-width:0}
.cat-tile b{font-family:"Sarabun";font-weight:700;font-size:14.5px;display:block;line-height:1.3}
.cat-tile span{font-size:13.5px;color:var(--muted)}
.cat-tile .cat-go{width:32px;height:32px;border-radius:50%;background:var(--green);display:grid;place-items:center;color:#fff;flex:none}
.cat-tile .cat-go svg{width:16px;height:16px}
/* homepage category rail — horizontal scroll w/ prev-next arrow buttons */
.cat-railwrap{position:relative}
.rail-nav{position:absolute;top:calc(50% - 5px);transform:translateY(-50%);z-index:5;width:40px;height:40px;border-radius:50%;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-m);color:var(--brand);display:grid;place-items:center;cursor:pointer;transition:.15s}
.rail-nav:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.rail-nav.prev{left:4px}
.rail-nav.next{right:4px}
.rail-nav[hidden]{display:none}
.cat-rail{display:flex;gap:12px;overflow-x:auto;padding:2px 18px 10px;scrollbar-width:none}
.cat-rail::-webkit-scrollbar{display:none}
.cat-card{flex:none;width:132px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-s);padding:16px 12px;transition:.16s}
.cat-card:hover{box-shadow:var(--shadow-m);transform:translateY(-2px)}
.cat-card:active{transform:scale(.98)}
.cat-card .ci{width:56px;height:56px;border-radius:50%;background:var(--brand-soft);display:grid;place-items:center;color:var(--brand);flex:none}
.cat-card .ci svg{width:27px;height:27px}
.cat-card b{font-family:"Sarabun";font-weight:700;font-size:14px;line-height:1.3;color:var(--ink)}
.cat-card .cc{font-size:13px;color:var(--muted);margin-top:auto}

/* category intro */
.intro{margin:14px 18px;font-size:15px;color:#3A3F46;line-height:1.75}
.cat-intro p{margin:0 0 10px}.cat-intro p:last-child{margin-bottom:0}
.cat-faq{margin:8px 18px 4px}
.subchips{display:flex;gap:8px;overflow-x:auto;padding:4px 18px 10px;scrollbar-width:none}
.subchips::-webkit-scrollbar{display:none}
.subchip{flex:none;font-size:14px;padding:9px 15px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);white-space:nowrap;color:var(--ink);transition:.15s}
.subchip:hover{border-color:var(--brand-soft)}
.subchip.on{background:var(--brand-soft);color:var(--brand-ink);font-weight:600;border-color:transparent}

/* ───────── desktop ───────── */
@media (min-width:920px){
  .wrap{max-width:var(--maxw);padding:0 28px}
  .navlinks{display:flex;flex:1;justify-content:center}
  .brand{flex:none;justify-content:flex-start;font-size:22px}
  .appbar-in{gap:28px;padding:14px 28px}
  .menu-toggle{display:none}
  .mobile-menu{display:none!important}
  .crumbs{padding:18px 0 6px}
  .ptop{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:36px;align-items:start;margin-top:6px}
  .media{position:sticky;top:88px}
  .gallery{padding:0}
  .summary{display:flex;flex-direction:column}
  .summary .card{margin:0 0 16px}
  .pbody{margin-top:22px}
  .pbody .card,.disclose,.intro{margin-left:0;margin-right:0}
  .rel-h{margin-left:0;margin-right:0}
  .rail{padding-left:0;padding-right:0}
  .rail .pcard{width:200px}
  .grid{grid-template-columns:repeat(4,1fr);padding-left:0;padding-right:0}
  .cats-grid{grid-template-columns:repeat(4,1fr);padding:0}
  .cat-rail{padding-left:0;padding-right:0}
  .bgrid{grid-template-columns:repeat(4,1fr);padding-left:0;padding-right:0}
  .brail{padding-left:0;padding-right:0}
  .brandhead{margin-left:0;margin-right:0}
  .feats{grid-template-columns:repeat(4,1fr)}
  .subchips{padding-left:0;padding-right:0;flex-wrap:wrap;overflow-x:visible}
  /* desktop: horizontal rails get a visible slim scrollbar (mobile uses touch) */
  .rail,.brail,.cat-rail{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  .rail::-webkit-scrollbar,.brail::-webkit-scrollbar,.cat-rail::-webkit-scrollbar{display:block;height:9px}
  .rail::-webkit-scrollbar-thumb,.brail::-webkit-scrollbar-thumb,.cat-rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--r-pill)}
  .rail:hover::-webkit-scrollbar-thumb,.brail:hover::-webkit-scrollbar-thumb,.cat-rail:hover::-webkit-scrollbar-thumb{background:var(--faint)}
  .rail::-webkit-scrollbar-track,.brail::-webkit-scrollbar-track,.cat-rail::-webkit-scrollbar-track{background:transparent}
  .pager{margin-left:0;margin-right:0}
  .searchpage,.filterbar,.fcount{margin-left:0;margin-right:0}
  .buybar-in{max-width:var(--maxw);border-radius:18px 18px 0 0}
  .hero{margin-left:0;margin-right:0;padding:48px 40px}
  .hero h1{font-size:36px}
  .sec-title{margin-left:0;margin-right:0}
  .home-about{margin-left:0;margin-right:0}
  .static-page{padding-left:0;padding-right:0}
  .site-footer{margin-top:48px}
}

/* ═══════════ CONTENT HUB — articles & buying guides ═══════════ */
.article{padding:0 18px}
.article>h1{font-family:"Sarabun";font-weight:700;font-size:32px;line-height:1.25;margin:16px 0 0;color:var(--ink);letter-spacing:-.02em}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:14px 0 4px;font-size:14px;color:var(--muted)}
.article-meta span,.article-meta a{display:inline-flex;align-items:center;gap:5px}
.article-meta svg{width:13px;height:13px;color:var(--brand)}
.article-cat{background:var(--brand-soft);color:var(--brand-ink)!important;font-weight:700;padding:6px 12px;border-radius:var(--r-pill)}
.article-hero{margin:20px 0 6px;width:100%}
.article-hero img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-xl);background:var(--surface-2)}
.article .lead{font-size:18px;line-height:1.75;color:#3A3F46;margin:16px 0}

.article-toc{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;margin:22px 0}
.article-toc b{display:block;font-family:"Sarabun";font-weight:700;font-size:14px;color:var(--brand);margin-bottom:10px}
.article-toc ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:7px}
.article-toc li{font-size:14.5px}
.article-toc a{color:var(--ink);opacity:.86}
.article-toc a:hover{color:var(--brand);opacity:1}

.article-body{font-size:17px;line-height:1.85;color:#34393F}
.article-body h2{font-family:"Sarabun";font-weight:700;font-size:26px;line-height:1.3;margin:38px 0 12px;color:var(--ink);letter-spacing:-.02em;scroll-margin-top:84px}
.article-body h3{font-family:"Sarabun";font-weight:700;font-size:20px;margin:26px 0 10px;color:var(--ink)}
.article-body p{margin:14px 0}
.article-body ul{margin:14px 0 14px 4px;padding-left:22px;list-style:none}
.article-body li{position:relative;margin:8px 0;padding-left:20px}
.article-body li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.article-body a{color:var(--brand);font-weight:700;text-decoration:underline;text-decoration-color:var(--brand-soft);text-underline-offset:3px}
.article-body a:hover{text-decoration-color:var(--brand)}
.article-body strong{font-weight:700;color:var(--ink)}
.article-body hr{border:none;border-top:1px solid var(--line);margin:30px 0}
.article-outro{margin-top:10px}

/* in-article product card */
.apcard{display:grid;grid-template-columns:260px 1fr;gap:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-s);padding:16px;margin:26px 0;align-items:stretch;transition:.16s}
.apcard:hover{box-shadow:var(--shadow-m)}
.apcard-img{position:relative;display:block;width:260px;min-height:200px;align-self:stretch;border-radius:var(--r-md);overflow:hidden;background:var(--surface-2)}
.apcard-img img{width:100%;height:100%;object-fit:cover}
.apcard-rank{position:absolute;top:8px;left:8px;background:var(--brand);color:#fff;font-family:"Sarabun";font-weight:700;font-size:13.5px;line-height:1;padding:6px 10px;border-radius:var(--r-pill);box-shadow:var(--shadow-s)}
.apcard-body{min-width:0;display:flex;flex-direction:column;gap:8px}
.apcard-title{font-family:"Sarabun";font-weight:700;font-size:16px;line-height:1.4;color:var(--ink)}
.apcard-title:hover{color:var(--brand)}
.apcard-meta{display:flex;flex-wrap:wrap;align-items:center;gap:11px;font-size:14px;color:var(--muted)}
.apcard-stars{display:inline-flex;align-items:center;gap:3px;color:var(--gold);font-weight:700}
.apcard-stars svg{width:13px;height:13px}
.apcard-price{font-family:"Sarabun";font-weight:700;font-size:19px;color:var(--brand)}
.apcard-sold{font-size:13px;color:var(--muted)}
.apcard-why{font-size:14px;line-height:1.6;color:#4A4036;background:var(--gold-soft);border-left:3px solid var(--gold);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:10px 13px;margin:2px 0}
.apcard-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;background:var(--brand);color:#fff!important;font-family:"Sarabun";font-weight:700;font-size:14.5px;padding:11px 20px;border-radius:var(--r-pill);box-shadow:var(--shadow-cta);margin-top:auto;transition:.15s}
.apcard-cta:hover{filter:brightness(1.07)}
.apcard-cta svg{width:16px;height:16px;color:#fff}

/* article FAQ */
.article-faq{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-s);padding:8px 20px 10px;margin:36px 0}
.article-faq>h2{font-family:"Sarabun";font-weight:700;font-size:23px;margin:16px 0 4px;letter-spacing:-.01em}
.article-faq .faq-a p{margin:8px 0}

/* related articles strip */
.art-rel{display:grid;grid-template-columns:1fr 1fr;gap:13px;padding:2px 0 6px}
.art-rel-i{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-s);padding:15px 16px;display:flex;flex-direction:column;gap:8px;transition:.16s}
.art-rel-i:hover{border-color:var(--brand-soft);box-shadow:var(--shadow-m)}
.art-rel-badge{align-self:flex-start;font-size:13px;font-weight:700;color:var(--brand);background:var(--brand-soft);padding:4px 10px;border-radius:var(--r-pill)}
.art-rel-i b{font-family:"Sarabun";font-weight:700;font-size:14.5px;line-height:1.45;color:var(--ink)}

.article-back{display:inline-flex;align-items:center;gap:6px;margin:28px 0 10px;color:var(--brand);font-weight:700;font-size:14.5px}
.article-back svg{width:16px;height:16px}

/* /articles/ index grid */
.art-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:24px;padding:2px 18px}
.art-card{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-s);overflow:hidden;border-radius:var(--r-xl);display:flex;flex-direction:column;transition:transform .16s,box-shadow .16s}
.art-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-m)}
.art-card:active{transform:scale(.99)}
.art-card-img{aspect-ratio:16/9;background:var(--surface-2);overflow:hidden}
.art-card-img img{width:100%;height:100%;object-fit:cover}
.art-card-b{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.art-card-badge{align-self:flex-start;font-size:13.5px;font-weight:700;color:var(--brand);letter-spacing:.02em}
.art-card-t{font-family:"Sarabun";font-weight:700;font-size:19px;line-height:1.35;color:var(--ink);letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.art-card-x{font-size:14.5px;line-height:1.6;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.art-card-m{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:auto;font-size:14px;color:var(--muted)}

/* ───────── mobile: stack in-article product card (was overlapping on phones) ───────── */
@media (max-width:600px){
  .apcard{grid-template-columns:1fr;gap:14px}
  .apcard-img{width:100%;min-height:0;aspect-ratio:4/3}
  .apcard-body{gap:7px}
  .apcard-cta{align-self:stretch;justify-content:center;margin-top:8px}
}
/* ── product-page: AI description accordion + EEAT + related articles (2026-07-02) ── */
.desc.desc-full{max-height:none;overflow:visible}
.acc-lead{line-height:1.8;margin:.2rem 0 .8rem;color:#3A3F46}
.acc{display:block}
.acc-item{border:1px solid #eadfce;border-radius:12px;margin:.5rem 0;overflow:hidden;background:#fff}
.acc-h{width:100%;text-align:left;background:#faf7f2;border:0;padding:.85rem 1rem;font-weight:700;color:#3a2a1a;font-size:.98rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.acc-h .cx{transition:transform .2s;color:#C88A3D}
.acc-item.open .acc-h .cx{transform:rotate(180deg)}
.acc-b{max-height:0;overflow:hidden;transition:max-height .3s;padding:0 1rem}
.acc-item.open .acc-b{max-height:3000px;padding:.7rem 1rem 1rem}
.acc-b h3{font-size:1rem;margin:.7em 0 .3em;color:#3a2a1a}
.acc-b p{margin:.5em 0;line-height:1.8}
.acc-b ul{margin:.4em 0 .8em;padding-left:1.2em}.acc-b li{margin:.3em 0;line-height:1.7}
.acc-b strong{color:#6A442A}
.eeat{background:#faf7f2;border-color:#eadfce}
.eeat p{margin:.4em 0;line-height:1.7;font-size:.95rem}
.eeat-links{display:flex;gap:.6rem;flex-wrap:wrap;margin:.7rem 0}
.eeat-links a{display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem;background:#fff;border:1px solid #e3d8c6;border-radius:999px;padding:.4rem .8rem;color:#6A442A;text-decoration:none}
.eeat-note{font-size:.82rem;color:#8a7a63;background:#fff;border-radius:8px;padding:.55rem .75rem;margin-top:.5rem!important}
.rel-arts{display:grid;gap:.6rem}
.rel-art{display:flex;flex-direction:column;gap:.2rem;border:1px solid #eadfce;border-radius:10px;padding:.75rem .9rem;text-decoration:none;background:#fff}
.ra-tag{font-size:.72rem;color:#C88A3D;font-weight:700}
.ra-title{color:#222;font-weight:600;line-height:1.45}

/* ── Category bar + hover mega menu (cfg.headerCatbar) — desktop only.
   Breakpoint matches .navlinks/.menu-toggle (920px) so there is never a
   window where neither burger nor catbar offers category navigation. ── */
.ky-catbar{display:none}
@media (min-width:920px){
  .ky-catbar{display:block;background:var(--surface);border-top:1px solid var(--line)}
  .ky-catbar-in{max-width:var(--maxw);margin:0 auto;padding:0 10px;display:flex;flex-wrap:nowrap;justify-content:space-between;gap:0}
  .ky-cat{position:relative;display:flex}
  .ky-cat-link{display:flex;align-items:center;gap:2px;padding:9px 7px;font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;border-bottom:2.5px solid transparent;transition:.13s}
  .ky-cat-link:hover{color:var(--brand);border-bottom-color:var(--brand)}
  .ky-cat-link svg{width:12px;height:12px;opacity:.5;transition:transform .15s}
  .ky-cat:hover .ky-cat-link,.ky-cat:focus-within .ky-cat-link{color:var(--brand);border-bottom-color:var(--brand)}
  .ky-cat:hover .ky-cat-link svg,.ky-cat:focus-within .ky-cat-link svg{transform:rotate(180deg)}
  .ky-mega{display:none;position:absolute;top:100%;left:0;z-index:70;min-width:240px;background:var(--surface);border:1px solid var(--line);border-radius:0 0 var(--r-lg) var(--r-lg);box-shadow:var(--shadow-l);padding:8px;grid-template-columns:1fr;gap:1px}
  .ky-mega[data-wide]{grid-template-columns:1fr 1fr;min-width:460px}
  .ky-cat:hover .ky-mega,.ky-cat:focus-within .ky-mega{display:grid}
  .ky-mega a{padding:9px 13px;border-radius:var(--r-md);color:var(--ink);font-weight:500;font-size:14px;white-space:nowrap;transition:.12s}
  .ky-mega a:hover{background:var(--surface-2);color:var(--brand)}
  .ky-mega .ky-mega-all{grid-column:1 / -1;color:var(--brand);font-weight:700;border-top:1px solid var(--line);margin-top:5px;padding-top:11px;border-radius:0 0 var(--r-md) var(--r-md)}
  /* panels near the right edge open leftwards so they don't overflow the viewport */
  .ky-cat:nth-last-child(-n+4) .ky-mega{left:auto;right:0;border-radius:0 0 0 var(--r-lg)}
}

/* ── Homepage articles: compact horizontal rows (thumb left, text right) ── */
.art-list{display:flex;flex-direction:column;gap:12px;padding:2px 18px}
.art-row{display:flex;align-items:stretch;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-s);transition:transform .16s,box-shadow .16s}
.art-row:hover{transform:translateY(-2px);box-shadow:var(--shadow-m)}
.art-row-img{flex:none;width:132px;background:var(--surface-2);overflow:hidden}
.art-row-img img{width:100%;height:100%;object-fit:cover;display:block}
.art-row-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding:11px 14px}
.art-row-t{font-family:"Sarabun";font-weight:700;font-size:15.5px;line-height:1.4;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.art-row-x{font-size:13.5px;line-height:1.55;color:var(--muted);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.art-row-d{font-size:12.5px;color:var(--faint);margin-top:auto}
@media (min-width:760px){
  .art-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:2px 0;max-width:none}
  .art-row{flex-direction:column}
  .art-row-img{width:100%;aspect-ratio:16/9}
  .art-row-b{padding:13px 15px;gap:4px}
  .art-row-t{font-size:16.5px;-webkit-line-clamp:2}
  .art-row-x{-webkit-line-clamp:2;font-size:14px}
}