/* Shared look for the article mockups (design/README.md Foundation + AR3). Header/footer rules copied from index.html. */
:root{
  --bg:#FFFFFF; --ink:#12333D; --text:#222222; --mute:#46626B;
  --aqua:#B4DFE8; --mist:#C5D7E1; --mist-hover:#B4CAD6; --wash:#E4F4F7; --wash-ink:#246A78;
  --rule:#E2E2E2; --line:#B4B4B4; --card-line:#E3ECEF; --well:#F2F2F2;
  --ok:#2F7A43; --ok-wash:#E3F1E6; --sale:#B4231F; --line-green:#06C755; --btn-ink:#0F2F38;
  --done:#79BFCE; --todo:#D6E6EC;
  --head:"Anuphan",system-ui,sans-serif; --body:"IBM Plex Sans Thai","Anuphan",system-ui,sans-serif;
  --r-card:26px; --r-pill:36px; --r-in:14px; --ease:cubic-bezier(.22,1,.36,1);
  --fs:17px; --measure:680px; --r-img:26px; --r-img-sm:18px;
  --shadow:5px 6px 6px -2px rgba(16,22,34,.19); --hh:104px;
  color-scheme:light;
}
@media (max-width:899px){:root{--hh:92px}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hh) + 24px)}
body{margin:0;background:var(--bg);color:var(--text);font:400 15px/1.65 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,select,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
h1,h2,h3,h4{font-family:var(--head);font-weight:500;color:var(--ink);margin:0;text-wrap:balance}
p{margin:0}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:10px}
.i{width:20px;height:20px;flex:none}
.wrap{max-width:1200px;margin:0 auto;padding-inline:40px}
@media (max-width:899px){.wrap{padding-inline:16px}}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-variant-numeric:tabular-nums}

/* header (index.html) */
header.bar{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.96);color:var(--ink);box-shadow:0 1px 0 var(--rule);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.marquee{overflow:hidden;background:radial-gradient(90% 160% at 20% -20%,rgba(186,228,236,.8),rgba(186,228,236,0) 60%),linear-gradient(100deg,#A5DDE7 0%,#90D1DE 50%,#79BFCE 100%);font-size:12px;color:#0f3f4a;white-space:nowrap}
.marquee div{display:inline-block;padding-block:6px;animation:slide 40s linear infinite}
.marquee span{padding-inline:28px}
@keyframes slide{to{transform:translateX(-50%)}}
header.bar .top{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:24px;align-items:center;padding-block:12px}
header.bar .nav{display:flex;align-items:center;gap:26px;font-size:14.5px}
.nav a{position:relative;padding-block:6px}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.logo{justify-self:center;white-space:nowrap;line-height:1;font-size:26px;color:var(--ink)}
.bs{display:inline-block;font:700 1em/1 'Instrument Sans',sans-serif;letter-spacing:.1em;white-space:nowrap;text-transform:uppercase}.bs .r{display:flex;align-items:center;gap:.4em}.bs svg{width:.62em;height:.62em;flex:none;margin-top:-.02em}.bs small{display:block;font-weight:500;font-size:.36em;letter-spacing:.32em;border-top:1px solid currentColor;padding-top:.7em;margin-top:.55em;opacity:.85}.bs.mini small{display:none}
.tools{display:flex;justify-content:flex-end;gap:4px}
.ib{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;transition:background .2s}
.ib:hover{background:rgba(127,127,127,.16)}.ib .i{width:22px;height:22px}
.count{position:absolute;top:1px;right:-1px;display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--ink);color:#fff;font-size:11px;font-variant-numeric:tabular-nums;pointer-events:none}
.bump{animation:bump .5s}@keyframes bump{40%{transform:scale(1.35)}}
.menubtn{display:none}
.burg{position:relative;display:block;width:20px;height:14px}
.burg i{position:absolute;left:0;width:100%;height:1.6px;border-radius:2px;background:currentColor;transition:transform .35s,opacity .2s,top .35s}
.burg i:nth-child(1){top:0}.burg i:nth-child(2){top:6.2px}.burg i:nth-child(3){top:12.4px}
.menubtn[aria-expanded="true"] .burg i:nth-child(1){top:6.2px;transform:rotate(45deg)}
.menubtn[aria-expanded="true"] .burg i:nth-child(2){opacity:0}
.menubtn[aria-expanded="true"] .burg i:nth-child(3){top:6.2px;transform:rotate(-45deg)}
.mnav{border-top:1px solid var(--rule);padding:8px 16px 16px;display:grid}
.mnav a{padding:12px 4px;font:500 16px var(--head);border-bottom:1px solid var(--rule)}
@media (max-width:899px){
  .menubtn{display:inline-grid}.nav a{display:none}header.bar .top{gap:4px}
  .logo{font-size:14px}.tools{gap:0}.ib .i{width:20px;height:20px}
}
/* tools must keep their 44px tap targets, so the burger/tools columns size to content and the wordmark takes what is left */
@media (max-width:520px){header.bar .top{grid-template-columns:auto minmax(0,1fr) auto;gap:2px}}
/* 360px: four 44px tools leave the centred wordmark ~104px, so 14px would touch the account icon */
@media (max-width:380px){.logo{font-size:12.5px}}
@media (min-width:900px){.mnav{display:none!important}}

/* footer (index.html) */
.site-foot{margin:72px 0 0;padding:56px max(16px,calc((100vw - 1200px)/2)) 0;color:#0f2f38;overflow:hidden;background:radial-gradient(60% 120% at 0% 0%,rgba(255,255,255,.95) 0%,rgba(255,255,255,.5) 30%,rgba(255,255,255,0) 62%),linear-gradient(150deg,#E9F6F9 0%,#D2ECF2 45%,#B4DFE8 100%)}
.ft-top{display:grid;grid-template-columns:1.6fr repeat(4,minmax(0,1fr));gap:32px}
.ft-logo{font-size:30px;color:var(--ink)}.ft-logo small{font-size:11.5px}
.ft-brand p{margin:14px 0 22px;max-width:34ch;color:#1f4954;font-size:14px}
.ft-news label{display:block;font-size:13px;margin-bottom:8px}
.ft-news div{display:flex;align-items:center;border-bottom:1.5px solid #1c3038;max-width:320px}
.ft-news input{flex:1;min-width:0;border:0;background:none;padding:10px 0;font:400 15px var(--body);outline:0}
.ft-news button{display:grid;place-items:center;width:44px;height:44px}
.ft-col h4{margin:0 0 14px;font:500 12.5px var(--body);letter-spacing:.12em;color:#1f4954}
.ft-col a{display:block;width:fit-content;padding-block:6px;font-size:14.5px;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .3s}
.ft-col a:hover{background-size:100% 1px}
.ft-social{display:flex;gap:8px}
.ft-social a{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid #a9d8e2;border-radius:50%;background:none;transition:background .2s,color .2s,border-color .2s}
.ft-social a:hover{background:#1c3038;border-color:#1c3038;color:#fff}
.ft-line{white-space:nowrap;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:36px;background:var(--mist);color:var(--btn-ink);font:500 14px var(--body)}
.ft-line .i{color:var(--line-green)}
.ft-hours{display:flex;align-items:center;gap:8px;margin:14px 0;font-size:14px;color:#1f4954}
.ft-mark{margin-top:48px;font:700 min(8vw,115px)/1 'Instrument Sans',sans-serif;white-space:nowrap;color:var(--ink);text-align:center;user-select:none}.ft-mark .bs{letter-spacing:.1em}
.ft-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:18px 0 22px;border-top:1px solid rgba(15,63,74,.2);font-size:13px;color:#1f4954}
.ft-bottom a{margin-left:20px}
@media (max-width:899px){.ft-top{grid-template-columns:1fr 1fr}.ft-brand{grid-column:1/-1}.ft-bottom a{margin:0 16px 0 0}}

/* glass: QuickLiquid spec 2 when it loads; CSS fallback until then */
.glass{background:rgba(255,255,255,.46);border:1px solid rgba(255,255,255,.7);-webkit-backdrop-filter:blur(10px) saturate(2);backdrop-filter:blur(10px) saturate(2)}
.has-liquid .glass{-webkit-backdrop-filter:none;backdrop-filter:none}
[data-lq]>div[style*="z-index"]{display:inherit;flex-direction:inherit;flex-wrap:inherit;align-items:inherit;justify-content:inherit;gap:inherit;grid-template-columns:inherit;grid-template-rows:inherit;min-width:0}
.gcard>.ql-content{width:100%}
.gcard{border-radius:var(--r-card);background:linear-gradient(155deg,rgba(255,255,255,.95) 0%,rgba(236,241,244,.85) 55%,rgba(226,233,237,.8) 100%);border:1.5px solid rgba(200,210,216,.7);box-shadow:var(--shadow)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 28px;border-radius:var(--r-pill);background:var(--mist);border:1.5px solid var(--mist);color:var(--btn-ink);font:500 15.5px var(--head);white-space:nowrap;transition:background .2s var(--ease),transform .15s}
.btn:hover{background:var(--mist-hover);border-color:var(--mist-hover)}
.btn:active{transform:scale(.98)}
.btn .i{width:18px;height:18px}
.btn.ghost{background:rgba(255,255,255,.46);border-color:rgba(18,51,61,.18);color:var(--ink)}
.btn.ghost:hover{background:var(--mist-hover)}
.btn.line{background:var(--line-green);border:0;color:var(--btn-ink)}  /* white on LINE green is 2.3:1; the dark ink is 6.3:1 */
.btn.sm{height:44px;padding:0 18px;font-size:14.5px}
@media (max-width:899px){.btn{height:50px}}
.tlink{display:inline-flex;align-items:center;gap:6px;font:500 14.5px var(--head);color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;min-height:44px}
.tlink:hover{color:var(--wash-ink)}
.tlink .i{width:16px;height:16px}
.chip{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;border-radius:var(--r-pill);font:500 14.5px var(--head);color:var(--ink);white-space:nowrap;flex:none;box-shadow:5px 6px 5px -2px rgba(16,22,34,.19);transition:background .2s}
.chip[aria-pressed="true"],.chip[aria-selected="true"]{background:var(--mist);border-color:var(--mist)}
.chip small{font:400 13px var(--body);color:var(--mute)}
.chip[aria-pressed="true"] small{color:var(--btn-ink)}
.chip .i{width:16px;height:16px}
.chiprow{display:flex;gap:8px;flex-wrap:wrap;padding-block:8px}
@media (max-width:899px){.search input{font-size:14.5px}.chiprow{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}.chiprow::-webkit-scrollbar{display:none}}
.cat{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:36px;background:var(--wash);color:var(--wash-ink);font:500 12.5px var(--head);white-space:nowrap;width:fit-content}
.in{height:50px;width:100%;border-radius:var(--r-in);border:1px solid var(--line);background:#fff;padding:0 16px;font-size:15px;outline:0}
.in:focus{border-color:var(--ink);box-shadow:0 0 0 3px var(--aqua)}
.sel{height:44px;border-radius:var(--r-in);border:1px solid var(--line);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2312333D' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;appearance:none;padding:0 40px 0 14px;font-size:14.5px;color:var(--ink)}
.search{position:relative;display:flex;align-items:center}
.search>.i{position:absolute;left:16px;width:18px;height:18px;color:var(--mute);pointer-events:none}
.search input{height:48px;width:100%;border-radius:36px;border:1px solid var(--line);background:#fff;padding:0 40px 0 42px;text-overflow:ellipsis;font-size:15px;outline:0;-webkit-appearance:none}
.search input::-webkit-search-cancel-button{display:none}
.search input:focus{border-color:var(--ink);box-shadow:0 0 0 3px var(--aqua)}
.search .clr{position:absolute;right:4px;width:40px;height:40px;display:grid;place-items:center;border-radius:50%}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:13.5px;color:var(--mute);padding-block:20px 16px}
.crumbs .i{width:14px;height:14px}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs [aria-current]{color:var(--ink)}

/* article card (home-A, list-A, related) */
.acard{position:relative;display:flex;flex-direction:column;padding:10px 10px 18px;min-width:0;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.acard>a,.acard .ql-content>a{display:flex;flex-direction:column;gap:0;min-width:0}
.acard .aw{position:relative;border-radius:var(--r-img-sm);overflow:hidden;background:var(--mist);aspect-ratio:4/5}
.acard.w32 .aw{aspect-ratio:3/2}
.aw img,.ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.acard .cat{margin:12px 6px 0}
.acard h3{font-size:17px;line-height:1.45;margin:8px 6px 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.acard .ex,.ex{text-wrap:pretty}
.acard .ex{margin:0 6px 8px;font-size:14.5px;line-height:1.65;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:13px;color:var(--mute);margin:0 6px}
.meta .i{width:14px;height:14px}
.meta span{display:inline-flex;align-items:center;gap:4px}
@media (hover:hover){.acard:hover{transform:translateY(-4px)}.acard:hover .aw img{transform:scale(1.03)}}
.bm{position:absolute;top:20px;right:20px;z-index:2;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:var(--ink)}
.bm .i{width:18px;height:18px}
[data-save] .on,[data-save][aria-pressed="true"] .off{display:none}[data-save][aria-pressed="true"] .on{display:block}
.ph{position:relative;background:var(--mist);overflow:hidden}
.noimg{position:absolute;inset:0;display:grid;place-items:center;background:var(--mist);color:rgba(18,51,61,.35)}.noimg .i{width:28px;height:28px}
.ring{position:absolute;left:10px;bottom:10px;z-index:2;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--ink)}
.ring svg{width:28px;height:28px;transform:rotate(-90deg)}
.ring .i{width:14px;height:14px}

/* product mini card (copied look of index .card) */
.card{display:flex;flex-direction:column;padding:12px 12px 16px;min-width:0}
.card .well{position:relative;display:block;background:var(--mist);border-radius:14px;aspect-ratio:1/1;overflow:hidden}
.card .well img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card h3{font:400 15px/1.45 var(--body);color:var(--text);margin:12px 4px 2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card p{font-size:13px;color:var(--mute);margin:0 4px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.card .foot{display:flex;justify-content:space-between;align-items:center;margin:auto 4px 0;padding-top:12px;gap:8px}
.price{font:500 16px var(--head);color:var(--ink);font-variant-numeric:tabular-nums}
.price s{font:400 13px var(--body);color:var(--mute);margin-left:6px}
.addb{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:var(--ink);flex:none}
.addb .i{width:20px;height:20px}
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media (max-width:899px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.card{padding:8px 8px 12px}.card h3{font-size:14px}}
/* pmini product row (rails, hubs) */
.pmini{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:center}
.pmini .mw{width:64px;height:64px;border-radius:14px;background:var(--mist);overflow:hidden}
.pmini .mw img{width:100%;height:100%;object-fit:cover}
.pmini b{display:block;font:500 14.5px/1.4 var(--head);color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* section heads */
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:24px}
.shead h2{font-size:26px;line-height:1.35}
.lede{font-size:15px;color:var(--mute);margin-top:6px}
@media (max-width:899px){.shead h2{font-size:21px}}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:90;max-width:min(360px,calc(100% - 32px));padding:11px 20px;border-radius:36px;background:var(--ink);color:#fff;font-size:14px;text-align:center;box-shadow:0 8px 24px rgba(18,51,61,.2)}

/* A/B/C switcher (mockup only) */
.sw{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:80;display:flex;align-items:center;gap:4px;padding:5px 5px 5px 14px;border-radius:36px;font:500 13px var(--head);color:var(--ink);box-shadow:0 6px 20px rgba(18,51,61,.16);background:rgba(255,255,255,.86)}
.sw button{min-width:44px;height:40px;padding:0 12px;border-radius:36px;font:500 14px var(--head)}
.sw button[aria-pressed="true"]{background:var(--ink);color:#fff}
.sw .l{margin-right:4px}
.sample{white-space:nowrap;display:inline-block;margin-left:6px;padding:0 8px;border-radius:36px;background:#FFF1D6;color:#7A4B00;font:500 12.5px var(--head);vertical-align:1px}

@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation:none!important;scroll-behavior:auto!important}}