/* Copy of the <style> block of index.html (2026-10-06), shared by info-3 / brands-3 / 404-3 / search-3 mockups. Re-copy when index.html changes. */

/* Layout: Mixsoon-style clickable shop — home / collection / product views by hash, cart drawer. Single light look by design. */
:root{
  --bg:#FFFFFF; --cream:#E4F4F7; --cream-ink:#246A78; --ok:#2f7a43; --well:#F2F2F2; --ink:#12333D; --text:#222222; --mute:#666666; --soft:#767676;
  --line:#B4B4B4; --rule:#E2E2E2; --marquee:#A5DCE6; --line-green:#06C755; --sale:#B4231F;
  --head:"Anuphan",system-ui,sans-serif; --body:"IBM Plex Sans Thai","Anuphan",system-ui,sans-serif;
  --r:24px; --r-sm:16px;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;overflow-x:clip;background:var(--bg);color:var(--text);font:400 .9375rem/1.65 var(--body);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:8px}
h1,h2,h3{font-family:var(--head);font-weight:500;line-height:1.3;text-wrap:balance;margin:0}
.wrap{max-width:1200px;margin:0 auto;padding-inline:clamp(16px,3vw,32px)}

/* header */
header.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--bg)}
.top{display:flex;align-items:center;gap:24px;padding-block:16px}
.logo{font:600 1.375rem/1 var(--head);letter-spacing:.06em}
.nav{display:flex;gap:24px;margin:0 auto;font-size:.90625rem}
.nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px}
.pills{display:flex;align-items:center;border:1.5px solid var(--ink);border-radius:999px;font-size:.875rem}
.pills>*{padding:6px 14px;white-space:nowrap}
.pills .sep{width:1px;height:16px;background:var(--rule);padding:0}
.count{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:6px;padding:0 5px;border-radius:9px;background:var(--ink);color:#fff;font-size:.6875rem;font-variant-numeric:tabular-nums}
.marquee{overflow:hidden;background:var(--marquee);font-size:.75rem;color:#333;white-space:nowrap}
.marquee div{display:inline-block;padding-block:6px;animation:slide 40s linear infinite}
.marquee span{padding-inline:28px}
.marquee:hover div{animation-play-state:paused}
.bump{animation:bump .5s}
@keyframes bump{40%{transform:scale(1.35)}}
.rv{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{transform:translateY(22px);opacity:.25}}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.feature img,.campaign>img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.feature:hover img,.campaign:hover>img{transform:scale(1.04)}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee div,.rv,.bump{animation:none}*{transition-duration:.01ms!important}}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:.8125rem;color:var(--soft);padding-block:18px 14px}
.crumbs a:hover{color:var(--text)}
.crumbs b{font-weight:400;color:var(--text)}

/* cards */
.card{display:flex;flex-direction:column;border:1.5px solid var(--line);border-radius:var(--r);padding:12px 12px 16px;background:#fff;min-width:0;container-type:inline-size;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(30,30,30,.10)}
.card:active{transform:scale(.98)}
.card .well img:first-child{transition:transform .6s}
.card:hover .well img:first-child{transform:scale(1.05)}
.well{position:relative;display:block;background:var(--well);border-radius:14px;aspect-ratio:1/1;overflow:hidden;width:100%}
.well img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .35s}
.well img.alt{opacity:0}
.well:hover img.alt,.well:focus-visible img.alt{opacity:1}
.badge{position:absolute;left:10px;top:10px;font-size:.71875rem;border-radius:999px;padding:2px 10px;background:var(--sale);color:#fff}
.card h3{font-size:.96875rem;font-weight:400;margin:12px 2px 4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card p{font-size:.8125rem;color:var(--mute);margin:0 2px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.foot{display:flex;justify-content:space-between;align-items:center;margin:auto 2px 0;padding-top:14px;gap:8px}
.price{font:400 1.0625rem var(--head);font-variant-numeric:tabular-nums}
.price s{font-size:.8125rem;color:var(--soft);margin-left:6px}
.acts{display:flex;gap:6px}
.ic{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;transition:transform .2s,background .2s}
.ic:hover{background:var(--well)}
.ic:active,.btn:active,.add:active,.chip:active,.opt:active{transform:scale(.94)}
.btn,.add,.chip,.opt{transition:transform .15s,background .2s,border-color .2s}
.ic svg{width:22px;height:22px}
.heart{border:1.2px solid var(--ink);width:30px;height:30px}
.heart svg{width:16px;height:16px}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.sec{padding-block:56px 0}
.sechead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px;gap:12px}
.sechead h2{font-size:1.375rem;letter-spacing:.03em}
.sechead a{font-size:.8125rem;color:var(--mute);text-decoration:underline;text-underline-offset:4px}

/* home */
.bento{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;padding-top:18px}
.btn{justify-self:start;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 20px;border-radius:999px;background:var(--ink);color:#fff;font-size:.90625rem}
.feature{position:relative;display:block;border-radius:var(--r);overflow:hidden;background:var(--well);aspect-ratio:16/10}
.feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.float{position:absolute;left:14px;top:14px;background:#fff;border-radius:var(--r-sm);padding:14px 16px;max-width:260px;display:grid;gap:2px}
.float b{font:500 1.0625rem var(--head)}
.float span{font-size:.8125rem;color:var(--mute)}
.mcar{position:relative;min-width:0}
.minis{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 32px)/3);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain;padding:12px 6px 18px;margin:-12px -6px -18px;scroll-padding-inline:6px}
.minis::-webkit-scrollbar{display:none}
.minis>*{scroll-snap-align:start}
.scrub{position:relative;height:4px;margin-top:22px;border-radius:4px;background:#DDF0F4;overflow:hidden}
.scrub i{position:absolute;top:0;bottom:0;left:0;border-radius:4px;background:var(--aqua-btn,#76BBCA);transition:left .35s cubic-bezier(.22,1,.36,1),width .35s cubic-bezier(.22,1,.36,1)}
.chr{display:flex;align-items:center;gap:16px;flex:none}
.carcap{display:flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:rgba(228,244,247,.5);flex:none}
.fhead .carcap{margin-left:auto}.carcap[hidden]{display:none}
.carcap>.ql-content{display:flex;align-items:center;gap:inherit}
.cnav{display:grid;place-items:center;width:44px;height:44px;border:0;background:none;border-radius:50%;color:var(--ink);cursor:pointer;transition:opacity .25s,transform .25s,background .2s}
.cnav:not(:disabled):hover{background:rgba(118,187,202,.18)}
.cnav:not(:disabled):active{transform:scale(.92)}
.cnav:disabled{opacity:.28;cursor:default}
.cnum{min-width:72px;text-align:center;font:500 .9375rem var(--head);font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--ink)}
.cnum i{font-style:normal;color:#3f6b77}
@media (max-width:720px){.cnav{display:none}.carcap{padding:8px 14px}}
.mini h3{font-size:.875rem}
.campaign{position:relative;margin-top:56px;border-radius:var(--r);overflow:hidden;background:var(--well);aspect-ratio:21/9;display:block}
.campaign>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.camcard{position:absolute;left:clamp(12px,2vw,24px);top:clamp(12px,2vw,24px);display:grid;grid-template-columns:140px minmax(0,1fr);gap:16px;align-items:center;background:#fff;border-radius:var(--r-sm);padding:8px 18px 8px 8px;max-width:min(460px,calc(100% - 24px))}
.camcard .well{aspect-ratio:1/1}
.camcard h3{font-size:1.125rem}
.camcard p{margin:4px 0 8px;color:var(--mute);font-size:.84375rem}
.cols{display:flex;gap:10px;height:clamp(300px,34vw,420px)}
.col{position:relative;display:block;flex:1 1 0;min-width:0;border-radius:var(--r-sm);overflow:hidden;background:var(--well);transition:flex-grow .55s cubic-bezier(.2,.7,.2,1)}
.col img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;transition:transform .6s}
.col:hover,.col:focus-visible{flex-grow:3.2}
.col:hover img{transform:scale(1.04)}
.col span{position:absolute;left:8px;right:8px;bottom:8px;background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;padding:7px 10px;font-size:.78125rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.col small{display:block;color:var(--mute);font-size:.71875rem;max-height:0;opacity:0;transition:max-height .4s,opacity .4s}
.col:hover small,.col:focus-visible small{max-height:20px;opacity:1}
.step .num{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;font:500 .9375rem var(--head)}
.step b{font:500 1.0625rem var(--head)}
.step .t{color:var(--mute);font-size:.875rem}
.vis{height:100px;border-radius:16px;background:#fff;display:flex;align-items:center;justify-content:center;gap:8px;overflow:hidden;margin-bottom:6px}
.vis img{height:76px;width:76px;object-fit:cover;border-radius:12px;background:var(--well);transition:transform .4s}
.step:hover .vis img:nth-child(1){transform:rotate(-8deg) translateX(6px)}
.step:hover .vis img:nth-child(3){transform:rotate(8deg) translateX(-6px)}
.chat{display:grid;gap:6px;width:80%}
.chat i{font-style:normal;font-size:.75rem;padding:5px 10px;border-radius:12px;max-width:85%}
.chat i:nth-child(1){justify-self:end;background:var(--line-green);color:#fff}
.chat i:nth-child(2){justify-self:start;background:var(--well);color:var(--text)}
.truck svg{width:64px;height:64px;transition:transform .8s}
.step:hover .truck svg{transform:translateX(18px)}

/* collection */
.banner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:16px}
.bannertext{background:var(--well);border-radius:var(--r);padding:clamp(24px,4vw,48px);display:flex;flex-direction:column;justify-content:flex-end;gap:12px}
.bannertext .th{font-size:.875rem;color:var(--mute)}
.bannertext h1{font-size:clamp(1.75rem,4vw,2.75rem)}
.bannertext p{margin:0;color:var(--mute);max-width:46ch}
.bannerimg{border-radius:var(--r);overflow:hidden;background:var(--well);aspect-ratio:5/4}
.bannerimg img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-block:26px 18px}
.chip{border:1.5px solid var(--rule);border-radius:999px;padding:6px 14px;font-size:.875rem}
.chip[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:#fff}
.grow{flex:1}
.found{font-size:.8125rem;color:var(--soft);font-variant-numeric:tabular-nums}
.sort{border:1.5px solid var(--ink);border-radius:999px;padding:6px 34px 6px 14px;background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231E1E1E' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;appearance:none;font-size:.875rem}

/* product */
.product{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.gallery{display:grid;gap:12px}
.main{position:relative;display:block;width:100%;background:var(--well);border-radius:var(--r);aspect-ratio:1/1;overflow:hidden;cursor:zoom-in}
.main img{width:100%;height:100%;object-fit:contain}
.main img.cover{object-fit:cover}
.zoomhint{position:absolute;right:14px;bottom:14px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.9);font-size:.75rem;color:var(--mute)}
.thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.thumb{background:var(--well);border-radius:var(--r-sm);aspect-ratio:1/1;overflow:hidden;border:1.5px solid transparent}
.thumb img{width:100%;height:100%;object-fit:contain}
.thumb img.cover{object-fit:cover}
.thumb[aria-current="true"]{border-color:var(--ink)}
.info{display:grid;gap:16px;min-width:0}
.brandline{font-size:.8125rem;color:var(--mute);letter-spacing:.04em;text-transform:uppercase}
.info h1{font-size:clamp(1.625rem,3vw,2.125rem)}
.lead{color:var(--mute);font-size:.875rem;margin:-6px 0 0}
.bigprice{font:500 1.75rem/1 var(--head);font-variant-numeric:tabular-nums}
.bigprice s{font:400 1rem var(--body);color:var(--soft);margin-left:10px}
.opts{display:grid;gap:8px}
.opts .label{font-size:.8125rem;color:var(--mute)}
.optrow{display:flex;flex-wrap:wrap;gap:10px}
.opt{border:1.5px solid var(--rule);border-radius:14px;padding:9px 16px;font-size:.875rem;line-height:1.35;text-align:left}
.opt span{display:block;font-size:.78125rem;color:var(--mute);font-variant-numeric:tabular-nums}
.opt[aria-pressed="true"]{border-color:var(--ink)}
.buy{display:flex;gap:12px}
.add{flex:1;min-height:48px;border-radius:999px;background:var(--ink);color:#fff;font-size:1rem}
.qty{display:flex;align-items:center;border:1.5px solid var(--ink);border-radius:999px;font-variant-numeric:tabular-nums}
.qty button{width:42px;height:46px;font-size:1.25rem}
.qty output{min-width:26px;text-align:center}
.ship{font-size:.8125rem;color:var(--mute);display:flex;flex-wrap:wrap;gap:6px 18px}
.acc{border-top:1px solid var(--rule)}
.acc details{border-bottom:1px solid var(--rule);padding-inline:4px}
.acc summary{display:flex;justify-content:space-between;align-items:center;list-style:none;cursor:pointer;padding-block:15px;font:500 .9375rem var(--head);letter-spacing:.03em}
.acc summary::-webkit-details-marker{display:none}
.acc summary .pm{font:300 1.375rem/1 var(--body);transition:transform .2s}
.acc details[open] summary .pm{transform:rotate(45deg)}
.acc .body{padding-bottom:16px;color:var(--mute);font-size:.875rem}
.acc ul{margin:0;padding-left:18px}
.spec{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0}
.spec dt{color:var(--soft)}.spec dd{margin:0;color:var(--text)}

/* footer, overlays */
.fbox{border:1.5px solid var(--line);border-radius:var(--r);padding:28px;margin-block:56px 32px;display:grid;grid-template-columns:2fr 1fr 1fr 1.6fr;gap:24px;font-size:.875rem}
.fbox .logo{grid-column:1/-1}
.fbox a{display:block;padding-block:2px}
.fbox small{color:var(--soft);display:block}
.lb{position:fixed;inset:0;background:rgba(20,20,20,.86);display:grid;place-items:center;z-index:50;padding:16px}
.lb img{max-height:86vh;max-width:min(92vw,900px);border-radius:18px;background:var(--well)}
.lb button{position:absolute;color:#fff;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.14);font-size:1.375rem}
.lb .x{top:calc(16px + env(safe-area-inset-top,0px));right:16px}
.lb .prev{left:16px}.lb .next{right:16px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:999px;font-size:.875rem;z-index:60;max-width:calc(100% - 32px)}

@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento,.banner,.product{grid-template-columns:minmax(0,1fr)}
  .portrait{min-height:440px}.bannertext{order:2}
  .steps{grid-template-columns:minmax(0,1fr)}.cols{overflow-x:auto;height:300px}.col{flex:0 0 150px}.col:hover,.col:focus-visible{flex-grow:0}
  .campaign{aspect-ratio:auto;display:flex;flex-direction:column}
  .campaign>img{position:static;aspect-ratio:3/2;height:auto}
  .camcard{position:static;max-width:none;margin:12px}
  .nav{display:none}.top{justify-content:space-between}.fbox{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){.minis{gap:8px;grid-auto-columns:calc((100% - 16px)/2.3)}.mini{padding:6px 6px 10px}.mini p,.mini .acts{display:none}.mini h3{font-size:.78125rem}.grid{gap:12px}.card h3{font-size:.875rem}.camcard{grid-template-columns:96px minmax(0,1fr)}.buy{flex-wrap:wrap}.add{flex-basis:100%}}

.i{width:20px;height:20px;flex:none;vertical-align:middle}
.i.big{width:64px;height:64px;stroke-width:1.2}
.ic .i{width:20px;height:20px}
.heart .i.on{display:none;color:var(--ink)}.heart[aria-pressed="true"] .i.on{display:inline}.heart[aria-pressed="true"] .i.off{display:none}
#cartBtn,.add,.lineid,.rm{display:inline-flex;align-items:center;justify-content:center;gap:8px}
#cartBtn .i,.rm .i{width:16px;height:16px}
.acc summary .pm{display:inline-flex}.acc summary .pm .i{width:18px;height:18px}
#minus,#plus,[data-cq]{display:inline-flex;align-items:center;justify-content:center}
#minus .i,#plus .i,[data-cq] .i{width:16px;height:16px}
#lbPrev .i,#lbNext .i,#lbX .i{width:24px;height:24px}
/* header v2: transparent over the home hero */
header.bar{position:sticky;top:0;z-index:40;background:var(--bg);transition:background .35s,color .35s,box-shadow .35s}
header.bar .top{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;padding-block:12px}
header.bar .logo{font:600 1.375rem/1 var(--head);letter-spacing:.14em;justify-self:center;white-space:nowrap}
header.bar .nav{display:flex;align-items:center;gap:26px;margin:0;font-size:.90625rem}
.nav a,.megabtn{position:relative;padding-block:6px}
.nav a::after,.megabtn::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,.megabtn:hover::after,.megabtn[aria-expanded="true"]::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.megabtn{display:inline-flex;align-items:center;gap:4px;font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.megabtn::after{right:20px}
.megabtn .i{width:16px;height:16px;transition:transform .3s}.megabtn[aria-expanded="true"] .i{transform:rotate(180deg)}
.tools{display:flex;justify-content:flex-end;gap:4px}
.ib{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer;transition:background .2s}
.ib:hover{background:rgba(127,127,127,.16)}.ib .i{width:22px;height:22px}
.ib .count{position:absolute;top:1px;right:-1px;margin:0}
.menubtn{display:none}
/* 4th nav item (บทความ): tighter nav in the band where the header has no room to spare */@media (min-width:901px) and (max-width:1040px){header.bar .nav{gap:12px;font-size:.84375rem}}
header.bar .marquee{background:var(--cream);color:#333;transition:background .35s,color .35s}
body.onhero header.bar{position:fixed;left:0;right:0;background:transparent;color:#fff}
body.onhero header.bar .top{border-bottom:1px solid rgba(255,255,255,.3)}
body.onhero header.bar .marquee{background:rgba(255,255,255,.14);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
body.onhero header.bar.solid,body.onhero header.bar.open{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)}
body.onhero header.bar.solid .top,body.onhero header.bar.open .top{border-bottom-color:transparent}
body.onhero header.bar.solid .marquee,body.onhero header.bar.open .marquee{background:var(--cream);color:#333}
body.onhero header.bar .count{background:#fff;color:var(--ink)}
body.onhero header.bar.solid .count,body.onhero header.bar.open .count{background:var(--ink);color:#fff}
/* mega menu */
.mega{position:absolute;left:0;right:0;top:100%;background:#fff;color:var(--ink);border-top:1px solid var(--rule);box-shadow:0 24px 40px -24px rgba(0,0,0,.25);animation:drop .28s ease-out}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* search */
.srch{position:absolute;left:0;right:0;top:100%;background:#fff;color:var(--ink);border-top:1px solid var(--rule);box-shadow:0 24px 40px -24px rgba(0,0,0,.25);padding-block:18px 22px;animation:drop .25s ease-out}
.srchbox{display:flex;align-items:center;gap:10px;border-bottom:1.5px solid var(--ink);padding-bottom:6px}
.srchbox>.i{width:22px;height:22px}
.srchbox input{flex:1;min-width:0;border:0;outline:0;font:400 1.125rem var(--body);background:none;color:var(--ink)}
.srchres{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-top:14px}
.srchres a{display:flex;align-items:center;gap:12px;padding:8px;border-radius:14px;transition:background .2s}
.srchres a:hover{background:var(--well)}
.srchres img{width:52px;height:52px;flex:none;object-fit:contain;background:var(--well);border-radius:10px}
.srchres p{margin:0;font-size:.875rem;line-height:1.35}.srchres p small{color:var(--mute)}
/* full-bleed hero */
.fullhero{position:relative;height:100svh;min-height:600px;max-height:1000px;overflow:hidden;color:#fff;background:#3a2e26}
.fullhero .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.fullhero .slide.on{opacity:1}
.fullhero .slide img{width:100%;height:100%;object-fit:cover;object-position:62% 30%;transform:scale(1.06);transition:transform 7s ease-out}
.fullhero .slide.on img{transform:scale(1)}
.fullhero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,48,58,.5) 0%,rgba(16,48,58,.16) 45%,rgba(0,0,0,0) 70%),linear-gradient(0deg,rgba(16,48,58,.5),rgba(0,0,0,0) 45%),linear-gradient(180deg,rgba(16,48,58,.35),rgba(0,0,0,0) 22%);pointer-events:none}
.herotext{position:absolute;z-index:2;left:max(16px,calc((100vw - 1200px)/2));bottom:clamp(40px,9vh,96px);max-width:640px;padding-right:16px}
.herotext h1{margin:0 0 14px;font:400 clamp(2rem,4.6vw,3.625rem)/1.18 var(--head);letter-spacing:-.01em;color:#fff}
.herotext p{margin:0 0 28px;font-size:clamp(.9375rem,1.3vw,1.0625rem);max-width:480px;color:#fff}
.cta{display:inline-flex;align-items:center;gap:6px}
.cta .round{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#fff;color:var(--ink);transition:transform .35s}
.cta .pill{display:inline-flex;align-items:center;height:56px;padding:0 30px;border-radius:999px;background:#fff;color:var(--ink);font-weight:500;transition:background .3s,color .3s}
.cta:hover .round{transform:rotate(45deg)}.cta:hover .pill{background:var(--ink);color:#fff}
.cta .round .i{width:24px;height:24px}
.hthumbs{position:absolute;z-index:2;right:max(16px,calc((100vw - 1200px)/2));bottom:clamp(40px,9vh,96px);display:flex;gap:18px}
.hthumbs button{position:relative;width:96px;height:96px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.hthumbs img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:62% 30%;filter:grayscale(1);transition:filter .4s,transform .4s}
.hthumbs button[aria-pressed="true"] img{filter:none;transform:scale(.86)}
.hthumbs svg.ring{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);transform:rotate(-90deg);pointer-events:none}
.hthumbs .ring circle{fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:315;stroke-dashoffset:315;opacity:0}
.hthumbs button[aria-pressed="true"] .ring circle{opacity:1;animation:ring 7s linear forwards}
@keyframes ring{to{stroke-dashoffset:0}}
@media (max-width:900px){
  .menubtn{display:inline-grid}.nav a,.megabtn{display:none}
  header.bar .top{gap:8px}
  .hthumbs button{width:60px;height:60px}.hthumbs{gap:12px;right:16px;bottom:24px}
  .herotext{bottom:110px}
}
@media (prefers-reduced-motion:reduce){.fullhero .slide img{transition:none;transform:none}.hthumbs .ring circle{animation:none;stroke-dashoffset:0}}


.colhero{height:82svh;min-height:560px;max-height:860px;background:#bcd3e6}
.colhero .slide img{object-position:70% 30%}
.colhero::after{background:linear-gradient(90deg,rgba(16,28,44,.62) 0%,rgba(16,28,44,.42) 32%,rgba(16,28,44,.1) 52%,rgba(0,0,0,0) 64%),linear-gradient(180deg,rgba(20,32,48,.32),rgba(0,0,0,0) 22%)}
.herotext .kick{font-size:.875rem;letter-spacing:.04em;margin-bottom:10px;color:#fff}
.crumbs.aftr{padding-top:22px}

/* footer */
.site-foot{margin:72px calc(50% - 50vw) 0;padding:56px max(16px,calc((100vw - 1200px)/2)) 0;background:var(--cream);color:#1c3038;overflow:hidden}
.ft-top{display:grid;grid-template-columns:1.6fr repeat(4,minmax(0,1fr));gap:32px}
.ft-logo{font:600 1.25rem/1 var(--head);letter-spacing:.14em}
.ft-brand p{margin:14px 0 22px;max-width:34ch;color:#4f676d;font-size:.875rem}
.ft-news label{display:block;font-size:.8125rem;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 .9375rem var(--body);color:inherit;outline:0}
.ft-news button{display:grid;place-items:center;width:40px;height:40px;border:0;background:none;cursor:pointer;color:inherit;transition:transform .3s}
.ft-news button:hover{transform:translateX(4px)}
.ft-col h4{margin:0 0 14px;font:500 .78125rem var(--body);letter-spacing:.12em;color:#86a0a5}
.ft-col a:not(.ft-line),#fcols a{display:block;width:fit-content;padding-block:6px;font-size:.90625rem;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .3s}
.ft-col a:not(.ft-line):hover,#fcols a:hover{background-size:100% 1px}
.ft-line{white-space:nowrap;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:0;border-radius:36px;font:500 .875rem var(--body);cursor:pointer;transition:transform .2s}
.ft-line:hover{transform:translateY(-2px)}
.ft-line .i{width:18px;height:18px}
.ft-hours{display:flex;align-items:center;gap:8px;margin:14px 0;font-size:.875rem;color:#4f676d}
.ft-hours .i{width:18px;height:18px}
.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-mark{margin-top:48px;font:600 min(10.2vw,9.25rem)/.8 var(--head);letter-spacing:.04em;white-space:nowrap;color:#12333D;-webkit-text-stroke:0;text-align:center;user-select:none}
.ft-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:18px 0 22px;border-top:1px solid #e2d9cf;font-size:.8125rem;color:#71898f}
.ft-bottom a{margin-left:20px}
@media (max-width:900px){.ft-line{font-size:.8125rem;padding:8px 12px}.ft-top{grid-template-columns:1fr 1fr}.ft-brand{grid-column:1/-1}.ft-bottom a{margin:0 16px 0 0}}
/* cart drawer v2: slides in, staggered lines, sticky checkout */
html.locked{overflow:hidden}
.shade{position:fixed;inset:0;z-index:44;background:rgba(16,48,58,.38);-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);opacity:0;visibility:hidden;transition:opacity .5s cubic-bezier(.22,1,.36,1),backdrop-filter .5s,-webkit-backdrop-filter .5s,visibility 0s .5s}
.shade.on{opacity:1;visibility:visible;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .5s cubic-bezier(.22,1,.36,1),backdrop-filter .5s,-webkit-backdrop-filter .5s,visibility 0s}
.drawer{position:fixed;top:10px;right:10px;bottom:10px;z-index:45;width:min(440px,calc(100% - 20px));display:flex;flex-direction:column;background:#fff;border-radius:24px;box-shadow:0 30px 80px -20px rgba(16,48,58,.35),0 0 0 1px rgba(0,0,0,.04);overflow:hidden;transform:translateX(calc(100% + 24px));transition:transform .62s cubic-bezier(.32,.72,0,1);will-change:transform}
.drawer.open{transform:none}
/* closed: hidden once the slide-out ends, so the off-screen drawer's box-shadow cannot bleed into the page's right edge */
.drawer:not(.open){visibility:hidden;transition:transform .62s cubic-bezier(.32,.72,0,1),visibility 0s .62s}
.drawer>*{transition:opacity .4s,transform .5s cubic-bezier(.22,1,.36,1)}
.drawer:not(.open)>*{opacity:0;transform:translateX(24px)}
.drawer.open>:nth-child(1){transition-delay:.12s}.drawer.open>:nth-child(2){transition-delay:.17s}.drawer.open>:nth-child(3){transition-delay:.22s}.drawer.open>:nth-child(4){transition-delay:.27s}
.dhead{display:flex;justify-content:space-between;align-items:center;padding:20px 20px 14px 24px}
.dhead h2{margin:0;font:500 1.3125rem/1.2 var(--head)}
.dcount{color:var(--soft);font-weight:400;font-variant-numeric:tabular-nums}
.dx{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:var(--well);color:var(--ink);cursor:pointer;transition:transform .4s cubic-bezier(.22,1,.36,1),background .2s}
.dx:hover{transform:rotate(90deg);background:#e8e8e8}
.dperks{display:flex;gap:8px;padding:0 24px 14px;border-bottom:1px solid var(--rule);font-size:.78125rem;color:var(--mute)}
.dperks span{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:#EEF8FA}
.dperks .i{width:15px;height:15px}
.drawer .items{flex:1;overflow:auto;overscroll-behavior:contain;display:block;padding:6px 24px}
.item{display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;padding:14px 0;border-bottom:1px solid var(--rule);overflow:hidden;transition:height .38s cubic-bezier(.4,0,.2,1),opacity .25s,transform .38s,padding .38s}
.drawer.entering .item{animation:lineIn .55s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(.22s + var(--d,0ms))}
@keyframes lineIn{from{opacity:0;transform:translateX(28px)}}
.item.fresh{animation:lineIn .55s cubic-bezier(.22,1,.36,1) both,glow 1.6s .3s}
@keyframes glow{0%,100%{background:transparent}30%{background:#FBF6EE}}
.item.leaving{opacity:0;transform:translateX(40px);padding-block:0;border-bottom-color:transparent}
.ithumb{display:grid;place-items:center;width:84px;height:84px;border-radius:16px;background:var(--well);overflow:hidden}
.ithumb img{width:88%;height:88%;object-fit:contain;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.item:hover .ithumb img{transform:scale(1.07)}
.imain{display:flex;flex-direction:column;min-width:0}
.itop{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.iname{font-size:.90625rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.iname:hover{text-decoration:underline;text-underline-offset:3px}
.item .rm{flex:none;display:grid;place-items:center;width:32px;height:32px;margin:0;border:0;border-radius:50%;background:none;color:var(--soft);cursor:pointer;transition:color .2s,background .2s}
.item .rm:hover{color:#b3261e;background:#fdecea}
.item .rm .i{width:17px;height:17px}
.ivar{font-size:.78125rem;color:var(--mute);margin-top:2px}
.ibot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:10px}
.item .q{display:inline-flex;align-items:center;height:34px;border:1px solid var(--rule);border-radius:999px;margin:0}
.item .q button{display:grid;place-items:center;width:34px;height:32px;border:0;border-radius:50%;background:none;color:var(--ink);cursor:pointer;transition:background .2s}
.item .q button:hover{background:var(--well)}
.item .q .i{width:15px;height:15px}
.qn{min-width:24px;text-align:center;font-size:.875rem;font-variant-numeric:tabular-nums}
.qn.tick{animation:tick .35s cubic-bezier(.22,1,.36,1)}
@keyframes tick{from{transform:translateY(-8px);opacity:0}}
.iprice{font:500 .9375rem var(--head);font-variant-numeric:tabular-nums}
.dfoot{padding:16px 24px 20px;border-top:1px solid var(--rule);background:linear-gradient(#fff,#FCFBF9)}
.dfoot:empty{display:none}
.drow{display:flex;justify-content:space-between;align-items:baseline}
.drow span{font-size:.875rem;color:var(--mute)}
.dtotal{font:500 1.375rem var(--head);font-variant-numeric:tabular-nums}
.dnote{margin:2px 0 14px;font-size:.78125rem;color:var(--soft)}
.dcta{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;height:56px;padding:0 8px 0 22px;border:0;border-radius:999px;background:var(--ink);color:#fff;font:500 .96875rem var(--body);cursor:pointer;overflow:hidden;isolation:isolate}
.dcta span:first-child{display:inline-flex;align-items:center;gap:10px}
.dcta::before{content:"";position:absolute;inset:0;z-index:-1;background:#3F97A8;transform:translateX(-101%);transition:transform .55s cubic-bezier(.22,1,.36,1)}
.dcta:hover::before{transform:none}
.dcta-arrow{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#fff;color:var(--ink);transition:transform .45s cubic-bezier(.22,1,.36,1)}
.dcta:hover .dcta-arrow{transform:translateX(3px) rotate(-45deg)}
.dcta .i{width:20px;height:20px}
.dlink{display:block;margin:12px auto 0;border:0;background:none;color:var(--mute);font:400 .84375rem var(--body);cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.dlink:hover{color:var(--ink)}
.dempty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:44px 12px 28px}
.dbag{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:#EEF8FA;margin-bottom:16px;animation:float 3.2s ease-in-out infinite}
.dbag .i{width:36px;height:36px;stroke-width:1.2}
@keyframes float{50%{transform:translateY(-6px)}}
.dempty h3{margin:0 0 4px;font:500 1.125rem var(--head)}
.dempty p{margin:0 0 18px;color:var(--mute);font-size:.875rem}
.dghost{padding:10px 22px;border:1px solid var(--ink);border-radius:999px;font-size:.875rem;transition:background .25s,color .25s}
.dghost:hover{background:var(--ink);color:#fff}
.dsugs{border-top:1px solid var(--rule);padding-top:16px}
.dsugs h4{margin:0 0 10px;font:500 .75rem var(--body);letter-spacing:.12em;color:var(--soft)}
.dsug{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 0}
.dthumb{display:grid;place-items:center;width:56px;height:56px;border-radius:12px;background:var(--well)}
.dthumb img{width:86%;height:86%;object-fit:contain}
.dname{font-size:.84375rem;line-height:1.35;display:block;min-width:0}
.dname small{display:block;color:var(--mute);margin-top:2px}
.dplus{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--rule);border-radius:50%;background:#fff;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.dplus:hover{background:var(--ink);color:#fff;transform:rotate(90deg)}
.dplus .i{width:16px;height:16px}
.flyer{position:fixed;z-index:60;object-fit:contain;background:#fff;border-radius:16px;box-shadow:0 18px 40px -12px rgba(0,0,0,.35);pointer-events:none}
@media (max-width:520px){.drawer{top:0;right:0;bottom:0;width:100%;border-radius:0}.dperks{flex-wrap:wrap}}
@media (prefers-reduced-motion:reduce){.drawer,.drawer>*,.shade{transition:none}.drawer.entering .item,.dbag{animation:none}}


/* Thai-label tag */
.badges{position:absolute;left:10px;top:10px;display:flex;flex-direction:column;align-items:flex-start;gap:5px;z-index:1}
.badges .badge{position:static}
/* Country of manufacture: the bottom-left flag, ringed so a white flag (KR) stays on the white or aqua well */
.well .flag{position:absolute;top:auto;right:auto;left:10px;bottom:10px;z-index:1;width:24px;height:18px;object-fit:cover;border-radius:3px;box-shadow:0 0 0 1px rgba(15,47,56,.55),0 1px 3px rgba(0,0,0,.3)}
.tl{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.92);border:1px solid #c3e5ec;color:#20404a;font-size:.71875rem;font-weight:500;line-height:1.5;box-shadow:0 2px 6px -2px rgba(0,0,0,.12)}
.tl-lg{width:fit-content;align-self:flex-start;margin:4px 0 2px;font-size:.78125rem;padding:4px 12px}
.chip-tl[aria-pressed="true"]{background:#20404a;border-color:#20404a;color:#fff}

/* home v3 */
.catsec{margin-top:28px}
.bento{grid-template-columns:minmax(0,.9fr) minmax(0,1fr);align-items:center;margin-top:40px}
.bento .feature{aspect-ratio:1/1;min-height:0}
.bestcol{display:flex;flex-direction:column;min-width:0}
.bestcol .sechead{margin-bottom:12px}
.bestcol .minis{grid-auto-columns:calc((100% - 16px)/2.15)}
.brands{margin:56px 0 8px;text-align:center}
.brands p{margin:0 0 14px;font-size:.75rem;letter-spacing:.14em;color:var(--soft)}
.brandtrack{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.brandtrack div{display:inline-flex;white-space:nowrap;animation:slide 50s linear infinite}
.brandtrack span{padding:0 28px;font:500 clamp(1.125rem,2vw,1.5rem)/1.4 var(--head);letter-spacing:.06em;color:#b9b0a6;transition:color .3s}
.brandtrack span:hover{color:var(--ink)}
.brandtrack:hover div{animation-play-state:paused}
@media (max-width:900px){.bento{grid-template-columns:minmax(0,1fr)}.bento .feature{min-height:0}}
/* 3: mobile section headers + tabs on one swipeable row */
@media (max-width:720px){
  .sechead{flex-direction:column;align-items:flex-start;gap:10px}
  .tabs{flex-wrap:nowrap;overflow-x:auto;width:calc(100% + 32px);margin:0 -16px;padding:0 16px 4px;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}.tabs .chip{flex:none}
  .bestcol .minis{grid-auto-columns:calc((100% - 8px)/2.2)}
}
/* 4: sticky buy bar on phones */
.bprice{display:none}
@media (max-width:720px){
  .buy{position:fixed;left:0;right:0;bottom:0;z-index:35;display:flex;flex-wrap:nowrap!important;align-items:center;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 -8px 24px -12px rgba(0,0,0,.18);animation:buyup .5s cubic-bezier(.22,1,.36,1)}
  @keyframes buyup{from{transform:translateY(100%)}}
  .buy .bprice{display:flex;flex-direction:column;line-height:1.15;flex:none}
  .bprice small{font-size:.6875rem;color:var(--mute)}.bprice b{font:500 1.0625rem var(--head);font-variant-numeric:tabular-nums}
  .buy .add{flex:1 1 auto!important;min-width:0;height:48px}
  .buy .qty{flex:none}
  body.on-product{padding-bottom:84px}
  body.on-product .toast{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
}

.colhero .herotext::before{content:"";position:absolute;z-index:-1;inset:-90px -140px -70px -120px;background:radial-gradient(closest-side,rgba(16,48,58,.5),rgba(16,48,58,.4) 55%,rgba(16,48,58,0));pointer-events:none}
.colhero .herotext{isolation:isolate}
.colhero .herotext h1,.colhero .herotext p,.colhero .herotext .kick{text-shadow:0 1px 14px rgba(0,0,0,.25)}

/* tab carousel: one row, 6 per row on desktop */
.tabsec .tabs{margin-bottom:16px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,#000 92%,transparent);mask:linear-gradient(90deg,#000 92%,transparent);padding-right:40px}.tabsec .tabs::-webkit-scrollbar{display:none}.tabsec .tabs .chip{flex:none}
.tcar .minis{grid-auto-columns:calc((100% - 80px)/6)}
.mcar.fits .scrub{display:none}
@media (max-width:1100px){.tcar .minis{grid-auto-columns:calc((100% - 48px)/4)}}
@media (max-width:720px){.tcar .minis{grid-auto-columns:calc((100% - 8px)/2.2)}}
/* skin finder */
.finder{margin-top:48px;padding:clamp(22px,4vw,44px);border-radius:28px;background:var(--cream)}
.fintro{max-width:560px;margin-bottom:22px}
.fkick{display:inline-block;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:#86a0a5;margin-bottom:6px}
.fintro h2{margin:0 0 6px;font:500 clamp(1.5rem,3vw,2.125rem)/1.25 var(--head)}
.fintro p{margin:0;color:#4f676d}
.fstep{display:flex;align-items:center;gap:10px;margin:18px 0 10px}
.fnum{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font-size:.75rem}
.flabel{font-size:.875rem;font-weight:500}
.ftiles{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.ftile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:118px;padding:14px 10px;border:1px solid #c3e5ec;border-radius:20px;background:#fff;color:var(--ink);font:500 .875rem/1.35 var(--body);text-align:center;cursor:pointer;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s,background .25s,color .25s,border-color .25s}
.ftile:hover{transform:translateY(-4px);box-shadow:0 14px 28px -16px rgba(16,48,58,.35)}
.fic{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--cream);transition:background .25s,transform .45s cubic-bezier(.22,1,.36,1)}
.fic .i{width:22px;height:22px}
.ftile:hover .fic{transform:scale(1.08) rotate(-6deg)}
.ftile[aria-checked="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.ftile[aria-checked="true"] .fic{background:rgba(255,255,255,.14)}
.fchips{display:flex;flex-wrap:wrap;gap:8px}
.fchips .chip{background:#fff}
.fchips .chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.fres{margin-top:22px}
.fres.in{animation:fin .55s cubic-bezier(.22,1,.36,1)}
@keyframes fin{from{opacity:0;transform:translateY(14px)}}
.fempty{margin:0;padding:22px;border:1px dashed #bfe4ec;border-radius:18px;text-align:center;color:#71898f;font-size:.875rem}
.fhead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.fhead b{font:500 1.125rem var(--head)}.fhead span{color:#71898f;font-size:.84375rem}
.freset{margin-left:auto;display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:#4f676d;font:400 .8125rem var(--body);cursor:pointer}
.freset .i{width:15px;height:15px;transition:transform .5s}.freset:hover .i{transform:rotate(-180deg)}
.fres .minis{grid-auto-columns:calc((100% - 64px)/5)}
.fres .card{background:#fff}
.fnote{margin:18px 0 0;font-size:.75rem;color:#86a0a5}
@media (max-width:1100px){.ftiles{grid-template-columns:repeat(4,minmax(0,1fr))}.fres .minis{grid-auto-columns:calc((100% - 32px)/3)}}
@media (max-width:720px){.ftiles{grid-template-columns:repeat(2,minmax(0,1fr))}.ftile{min-height:96px;flex-direction:row;justify-content:flex-start;text-align:left;padding:12px}.fic{width:40px;height:40px;flex:none}.fres .minis{grid-auto-columns:calc((100% - 8px)/2.2)}}

/* mobile fixes */
@media (max-width:720px){
  .sechead{flex-direction:row;align-items:baseline;justify-content:space-between}
  .toolbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:20px 16px 14px}
  .toolbar::-webkit-scrollbar{display:none}
  .toolbar>*{flex:none}.toolbar .grow{display:none}
  .ftile{flex-direction:column;justify-content:center;text-align:center;min-height:108px;padding:12px 8px;font-size:.84375rem}
  .fic{width:40px;height:40px}
  .col span{font-size:.8125rem}
}

/* favourites */
.ib .count{pointer-events:none}
[data-save].pop .i{animation:hpop .45s cubic-bezier(.22,1.6,.36,1)}
@keyframes hpop{40%{transform:scale(1.35)}}
.favadd{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border:0;border-radius:999px;background:var(--ink);color:#fff;font:500 .8125rem var(--body);cursor:pointer;transition:transform .2s}
.favadd:hover{transform:translateY(-1px)}.favadd .i{width:16px;height:16px}
/* search results v2 */
.srchres{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.srchhint{grid-column:1/-1;margin:0;font-size:.8125rem;color:var(--mute)}
.sres{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px;border:1px solid var(--rule);border-radius:18px;transition:border-color .2s,box-shadow .25s,transform .25s}
.sres:hover{border-color:#d6d6d6;box-shadow:0 12px 26px -18px rgba(0,0,0,.35);transform:translateY(-2px)}
.sthumb{position:relative;display:grid;place-items:center;width:72px;height:72px;border-radius:14px;background:var(--well);overflow:hidden}
.sthumb img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.sthumb .tl{position:absolute;left:3px;top:3px;padding:1px 6px;font-size:.59375rem;gap:4px}
.sinfo{display:flex;flex-direction:column;min-width:0;gap:2px}
.sname{font-weight:500;font-size:.90625rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ssub{font-size:.78125rem;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sprice{font:500 .875rem var(--head);display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}
.sacts{display:flex;align-items:center;gap:6px}
.sview{display:inline-flex;align-items:center;gap:4px;height:36px;padding:0 12px;border:1px solid var(--ink);border-radius:999px;font-size:.8125rem;white-space:nowrap;transition:background .2s,color .2s}
.sview:hover{background:var(--ink);color:#fff}.sview .i{width:15px;height:15px}
.sadd{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:var(--well);cursor:pointer;transition:background .2s,color .2s,transform .3s}
.sadd:hover{background:var(--ink);color:#fff;transform:rotate(90deg)}.sadd .i{width:16px;height:16px}
.sall{grid-column:1/-1;justify-self:center;margin-top:4px;font-size:.84375rem;text-decoration:underline;text-underline-offset:4px}
@media (max-width:720px){.srchres{grid-template-columns:minmax(0,1fr)}.sres{grid-template-columns:60px minmax(0,1fr) auto;gap:10px}.sthumb{width:60px;height:60px}.sview{padding:0 10px}.srch{max-height:calc(100svh - 96px);overflow-y:auto}}

.tl{white-space:nowrap}
@media (max-width:520px){header.bar .logo .bs{padding:0}header.bar .top{grid-template-columns:auto minmax(0,1fr) auto;gap:2px;padding-inline:12px}.tools{gap:0}.ib .i{width:20px;height:20px}}

/* round 2 */
.ptag{display:inline-block;margin:-2px 0 4px;padding:1px 8px;border-radius:999px;background:var(--cream);color:var(--cream-ink);font-size:.71875rem;font-weight:500;vertical-align:middle}
.ptag-lg{margin:0 0 0 6px;font-size:.8125rem;padding:3px 10px}
.price .from{display:block;font-size:.6875rem;color:var(--mute);font-weight:400;line-height:1}
.lempty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:48px 16px;border:1px dashed #bfe4ec;border-radius:24px;background:#FBF9F6;text-align:center}
.lempty b{font:500 1.125rem var(--head)}.lempty span{color:var(--mute);font-size:.875rem}
.lmore:empty{display:none}.lmore{margin-top:48px}
.orderbox{width:100%;min-height:110px;margin-top:10px;padding:10px;border:1px solid var(--rule);border-radius:12px;font:400 .8125rem/1.5 var(--body);resize:none}
.fullhero.paused .hthumbs button[aria-pressed="true"] .ring circle{animation-play-state:paused}
.catsec{margin-top:8px}
.col span{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* bundle sale */
.bundle{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0 6px}
.bopt{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px 14px 12px;border:1.5px solid var(--rule);border-radius:18px;background:#fff;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:border-color .2s,box-shadow .25s,transform .25s}
.bopt:hover{transform:translateY(-2px);box-shadow:0 10px 22px -16px rgba(0,0,0,.35)}
.bopt[aria-checked="true"]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.bq{font:500 .9375rem var(--head)}
.boff{display:inline-block;margin:2px 0 6px;padding:1px 8px;border-radius:999px;background:var(--cream);color:var(--cream-ink);font-size:.71875rem;font-weight:500}
.boff.plain{background:var(--well);color:var(--mute)}
.btot{font:500 1.0625rem var(--head);font-variant-numeric:tabular-nums}
.bper{font-size:.71875rem;color:var(--mute);line-height:1.35}
.bbest{position:absolute;top:-9px;right:12px;padding:2px 9px;border-radius:999px;background:var(--ink);color:#fff;font-size:.65625rem;letter-spacing:.02em}
.bnudge{min-height:20px;margin:4px 0 10px;font-size:.8125rem;color:var(--cream-ink)}
.bnudge b{font-weight:500;color:var(--ink)}
.iprice s{margin-right:6px;color:var(--soft);font-weight:400;font-size:.78125rem}
.inudge{margin-top:8px;padding:5px 10px;border-radius:10px;background:#EEF8FA;color:var(--cream-ink);font-size:.75rem}
.inudge.on b{color:var(--ok);font-weight:600}
.dsave b{color:var(--ok);font:500 .9375rem var(--head)}
@media (max-width:520px){.bundle{gap:8px}.bopt{padding:12px 10px 10px}.btot{font-size:.9375rem}.bper{font-size:.65625rem}}
.bsave{display:block;color:var(--ok)}
@media (max-width:720px){.addsum{display:none}}

/* round 3 */
.card .ptag{align-self:flex-start}
.sname .ptag{white-space:nowrap}
.dfull span:last-child{color:var(--mute);text-decoration:line-through}
.sadd,.dplus{display:grid;place-items:center;width:36px;height:36px;border:1.5px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);transform:none}
.sadd:hover,.dplus:hover{background:var(--ink);border-color:var(--ink);color:#fff;transform:none}
.sadd .i,.dplus .i{width:18px;height:18px}
.sres{border:1.5px solid var(--line)}
.opt,.bopt{border-radius:16px}
.pheart{flex:none;width:48px;height:48px;border:1.5px solid var(--line);border-radius:50%}
.thumbs.one{display:none}
.brandtrack span{color:#71898f}
.sthumb .tl,.bbest{font-size:.6875rem}
@media (max-width:520px){.bper{font-size:.6875rem}}
.toolbar{flex-wrap:nowrap}
.toolbar .chip{flex:none}
.toolbar{overflow-x:auto;scrollbar-width:none}.toolbar::-webkit-scrollbar{display:none}
@media (max-width:720px){.sname{-webkit-line-clamp:2}}

.gallery{position:relative}
.gheart{display:none}
@media (max-width:720px){.buy .pheart{display:none}.gheart{display:grid;position:absolute;top:12px;right:12px;z-index:2;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.9);border:1.5px solid var(--line)}}

/* round 4 */
.col span{white-space:nowrap;display:block;overflow:hidden;text-overflow:ellipsis;transition:padding .3s}
.col:hover span,.col:focus-visible span{white-space:normal;text-overflow:clip}
.feature img{object-position:50% 80%}
.cheart{position:absolute;top:8px;right:8px;z-index:2;display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 2px 8px -2px rgba(0,0,0,.18);transition:transform .2s}
.cheart:hover{transform:scale(1.08)}
.has-liquid .campcard .cheart,.has-liquid .card .cheart{background:transparent;box-shadow:none}
.cheart .i{width:18px;height:18px}
.card .foot{gap:6px}
.card .acts{flex:none}
/* Price is the largest type that still fits the bottom row next to the 34px cart.
   68px is the fixed chrome around it (foot insets + gap + cart + pill padding), 6 the widest price string in em.
   Scales with the CARD (cqi), not the viewport, so the 6-up carousel cards shrink their price instead of clipping. */
.card .price{height:34px;padding:0 clamp(6px,4cqi,12px);gap:clamp(2px,2cqi,6px);font:400 .9375rem var(--head);font-size:clamp(10px,calc((100cqi - 68px)/6),15px);font-variant-numeric:tabular-nums;overflow:hidden}
.card .price s{font-size:clamp(.53125rem,.8em,.75rem);color:var(--mute);margin-left:0}
.card .price .from{font-size:clamp(.5rem,.73em,.6875rem);color:var(--mute);line-height:1;margin-right:2px}

/* campaign v2: product card as its own floating element */
.campaign2{position:relative;margin-top:56px;padding-block:28px}
.campimg{display:block;border-radius:var(--r);overflow:hidden;background:var(--well);aspect-ratio:21/9}
.campimg img{width:100%;height:100%;object-fit:cover;object-position:60% 40%;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.campimg:hover img{transform:scale(1.04)}
.campcard{position:absolute;left:clamp(16px,3vw,40px);top:50%;transform:translateY(-50%);display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;width:min(520px,calc(100% - 32px));padding:14px 18px 14px 14px;border-radius:26px;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 30px 70px -24px rgba(16,48,58,.35),0 0 0 1px rgba(0,0,0,.04);animation:campin .9s cubic-bezier(.22,1,.36,1) both;transition:box-shadow .4s,transform .4s cubic-bezier(.22,1,.36,1)}
.campcard:hover{transform:translateY(calc(-50% - 4px));box-shadow:0 40px 80px -24px rgba(16,48,58,.42),0 0 0 1px rgba(0,0,0,.04)}
@keyframes campin{from{opacity:0;transform:translateY(-44%) scale(.96)}}
@keyframes campfloat{50%{transform:translateY(calc(-50% - 6px))}}
.campcard:hover{animation-play-state:paused}
.campwell{display:grid;place-items:center;border-radius:18px;background:var(--well);aspect-ratio:3/4;overflow:hidden}
.campwell img{width:82%;height:82%;object-fit:contain;transition:transform .5s}
.campwell:hover img{transform:scale(1.06) rotate(-2deg)}
.campbody{display:flex;flex-direction:column;gap:8px;min-width:0;padding-top:4px}
.campkick{font-size:.75rem;letter-spacing:.06em;color:var(--cream-ink)}
.camptitle{font:500 1.1875rem/1.3 var(--head);padding-right:36px}
.campfacts{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.campfacts li{display:flex;align-items:center;gap:8px;font-size:.8125rem;color:#222}
.campfacts .i{width:17px;height:17px;flex:none;color:var(--cream-ink)}
.campsizes{display:flex;gap:6px}
.campsize{height:32px;padding:0 14px;border:1.5px solid var(--line);border-radius:999px;background:#fff;font:500 .8125rem var(--body);cursor:pointer;transition:border-color .2s,background .2s}
.campsize[aria-checked="true"]{border-color:var(--ink);background:var(--ink);color:#fff}
.campbuy{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px}
.campprice{height:44px;padding:0 18px;font:500 1.375rem var(--head)}
.campadd{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border:0;border-radius:999px;background:var(--ink);color:#fff;font:500 .875rem var(--body);cursor:pointer;transition:transform .2s,box-shadow .2s}
.campadd:hover{transform:translateY(-2px);box-shadow:0 10px 20px -10px rgba(0,0,0,.5)}
.campadd .i{width:18px;height:18px}
.campcard .cheart{top:12px;right:12px}
@media (max-width:900px){
  .campaign2{padding-block:0}
  .campimg{aspect-ratio:4/3}
  .campcard{position:relative;left:auto;top:auto;transform:none;width:auto;margin:-56px 12px 0;grid-template-columns:110px minmax(0,1fr);animation:campin .9s cubic-bezier(.22,1,.36,1) both}
  @keyframes campin{from{opacity:0;transform:translateY(16px) scale(.97)}}
}
@media (prefers-reduced-motion:reduce){.campcard{animation:none}}

.campadd{white-space:nowrap}
@media (max-width:520px){.campcard{grid-template-columns:84px minmax(0,1fr);gap:12px;padding:12px}.campwell{aspect-ratio:1/1}.camptitle{font-size:1.0625rem}.campfacts li{font-size:.78125rem;align-items:flex-start}.campfacts .i{margin-top:2px}.campadd{padding:0 14px;height:42px}.campprice{font-size:1.25rem}.campbuy{grid-column:1/-1}.campsizes{flex-wrap:wrap}}

/* mobile menu v3: tab tree + category carousel */
.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 cubic-bezier(.7,0,.2,1),opacity .2s,top .35s cubic-bezier(.7,0,.2,1)}
.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;transform:scaleX(.2)}
.menubtn[aria-expanded="true"] .burg i:nth-child(3){top:6.2px;transform:rotate(-45deg)}
.mdrw{position:absolute;left:0;right:0;top:100%;height:calc(100svh - 96px);background:#fff;border-top:1px solid var(--rule);overflow:hidden;animation:mnIn .35s cubic-bezier(.2,.8,.2,1)}
@keyframes mnIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mtrack{display:flex;width:200%;height:100%;transition:transform .42s cubic-bezier(.7,0,.2,1)}
.mdrw.deep .mtrack{transform:translateX(-50%)}
.mlev{width:50%;height:100%;overflow-y:auto;overscroll-behavior:contain;padding:8px 20px 32px}
.mrow1{display:flex;align-items:center;gap:12px;width:100%;padding:15px 2px;border:0;border-bottom:1px solid var(--rule);background:none;font:inherit;font-size:1rem;color:var(--ink);text-align:left;cursor:pointer}
.mrow1 .mn{flex:1;min-width:0}
.mrow1 small{display:block;font-size:.75rem;color:var(--soft);margin-top:2px}
.mrow1 .cnt{font-size:.75rem;color:var(--soft)}
.mrow1 .i{width:18px;height:18px;flex:none;color:var(--soft)}
.mrow1:active{background:var(--well)}
.mback{display:flex;align-items:center;gap:6px;padding:12px 0;border:0;background:none;font:inherit;font-size:.875rem;color:var(--soft);cursor:pointer}
.mback .i{width:18px;height:18px}
@media (min-width:901px){.mdrw{display:none!important}}
@media (prefers-reduced-motion:reduce){.mtrack,.burg i,.mdrw{transition:none;animation:none}}
/* QuickLiquid lens on the collection labels: the engine paints its own frost/tint/rim, so drop ours */
.has-liquid .col span{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0}
.col span>div{padding:7px 10px;white-space:inherit;overflow:hidden;text-overflow:ellipsis}
/* hover: the label grows with the card (desktop only) and its text FILLS it. --fth/--fen = fraction of the label's inner
   width one px of font takes (one value for all cards, from the longest name, set by fitCols); .col is a size container so cqw/cqh follow the card as it widens */
@media (hover:hover) and (min-width:901px){
  .col{container-type:size}
  .col span>div{display:flex;flex-direction:column;justify-content:center;white-space:nowrap;text-overflow:clip;transition:padding .55s cubic-bezier(.2,.7,.2,1),font-size .55s cubic-bezier(.2,.7,.2,1)}
  .col span>.ql-content::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;opacity:0;transition:opacity .55s}
  .col:hover span>.ql-content::before,.col:focus-visible span>.ql-content::before{opacity:.2}
  .col small{transition:max-height .4s,opacity .4s,font-size .55s cubic-bezier(.2,.7,.2,1)}
  .col:hover span>div,.col:focus-visible span>div{padding:14px 16px;font-size:min(calc((100cqw - 16px - 32px) * .97 * var(--fth,.03)), calc((70cqh - 8px - 28px) / 2.35));line-height:1.2}
  .col:hover small,.col:focus-visible small{max-height:none;margin-top:.15em;font-size:min(calc((100cqw - 16px - 32px) * .97 * var(--fen,.03)), calc((70cqh - 8px - 28px) / 2.35 * .8));line-height:1.2}
}
/* category strip: dots instead of the browser scrollbar (only shown when the strip scrolls) */
:root{--dot:#d6d6d6;--dot-on:#1E1E1E}
.cols{scrollbar-width:none}.cols::-webkit-scrollbar{display:none}
.cdots{display:none;justify-content:center;gap:8px;margin-top:14px}
.cdots i{width:7px;height:7px;border-radius:50%;background:var(--dot);transition:width .3s,background .3s}
.cdots i.on{width:22px;border-radius:4px;background:var(--dot-on)}
.cdots.show{display:flex}

/* category strip, >= 768px: P'Ek's pick B1 "สำรับเดิม" (.ref/cats-3/cats-b-3.html?d=B1) — one front card,
   up to three more each side (smaller and paler), prev / pause / next, and one chip per category. Below 768
   the deck is display:none and the `.cols` row below stays exactly as it was; at >= 768 that row is hidden
   instead. The label is the GLASS-SPEC CSS glass (P'Ek 2026-10-08), scoped to the deck so the QuickLiquid
   engine (which owns `.col span`) never touches it; it only ever sits over a photo. */
.deck{display:none}
@media (min-width:768px){
  /* `:has(.deck)`: `.catsec` is shared with the /collections index, whose own `.cols` grid must stay */
  .catsec:has(.deck) .cols,.catsec:has(.deck) .cdots{display:none}
  /* full bleed like `.site-foot`, and clipped: the side cards run past the 1200px wrap without scrolling the page */
  .deck{display:block;margin-inline:calc(50% - 50vw);overflow-x:clip}
  .dstage{position:relative;height:408px}
  .dk{position:absolute;left:50%;top:0;width:300px;margin-left:-150px;aspect-ratio:3/4;display:block;
    border-radius:var(--r);overflow:hidden;background:var(--wash);box-shadow:0 18px 40px -22px rgba(18,51,61,.45);
    transition:transform .9s var(--ease),opacity .6s var(--ease)}
  .dk img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;transition:transform 1.2s var(--ease)}
  .dk .veil{position:absolute;inset:0;background:#fff;pointer-events:none;transition:opacity .9s var(--ease)}
  .dk:not(.on){cursor:pointer}
  .dk.on:is(:hover,:focus-visible) img{transform:scale(1.04)}
  span.lab3{position:absolute;left:12px;right:12px;bottom:12px;display:block;padding:9px 16px 10px;text-align:center;
    opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease),transform .6s var(--ease)}
  .dk.on .lab3{opacity:1;transform:none;transition-delay:.25s}
  span.lab3 b{display:block;font:500 1.125rem/1.3 var(--head);color:var(--ink);text-wrap:balance}
  span.lab3 small{display:block;font:400 .78125rem/1.3 var(--body);color:#2c4650;margin-top:1px}
  /* ponytail: the deck's own take on the CSS glass that also lives at `:is(.col span, …)` further down
     (this one sits on a photo, so its white stops are stronger). Kept scoped to the deck on purpose:
     that list is the QuickLiquid host set and carries a hover shrink the deck's label must not
     inherit, and `.col span` is measured by `fitCols()`. */
  .dk .gl{isolation:isolate;border-radius:36px;color:rgb(40,52,60);
    background:linear-gradient(-75deg,rgba(255,255,255,.34),rgba(255,255,255,.58),rgba(255,255,255,.34));
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    box-shadow:inset 0 .125em .125em rgba(0,0,0,.05),inset 0 -.125em .125em rgba(255,255,255,.5),0 .25em .125em -.125em rgba(0,0,0,.2),0 0 .1em .25em inset rgba(255,255,255,.2),0 .6em 1.2em -.6em rgba(0,0,0,.22)}
  .dk .gl::before{content:"";position:absolute;inset:1px;border-radius:inherit;z-index:1;pointer-events:none;mix-blend-mode:screen;
    background:linear-gradient(-45deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.5) 40% 50%,rgba(255,255,255,0) 55%) 0% 50%/200% 200% no-repeat}
  .dk .gl::after{content:"";position:absolute;inset:-.5px;border-radius:inherit;padding:1px;box-sizing:border-box;pointer-events:none;z-index:1;
    background:conic-gradient(from -75deg at 50% 50%,rgba(0,0,0,.5),rgba(0,0,0,0) 5% 40%,rgba(0,0,0,.5) 50%,rgba(0,0,0,0) 60% 95%,rgba(0,0,0,.5)),linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.5));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
  .dk .gl>*{position:relative;z-index:2}
  .dctl{display:flex;justify-content:center;gap:8px;margin:18px 0 14px}
  .dnb{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--card-line);border-radius:50%;background:#fff;color:var(--ink);transition:background .2s var(--ease)}
  .dnb:hover{background:var(--wash)}
  .deckchips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;max-width:1040px;margin:0 auto}
  .dchip{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:36px;border:1px solid var(--card-line);background:#fff;
    font:500 .9375rem var(--head);color:var(--ink);white-space:nowrap;transition:background .3s var(--ease),border-color .3s var(--ease)}
  .dchip:hover{border-color:var(--atc)}
  .dchip.on{background:var(--atc);border-color:var(--atc);color:var(--btn-ink)}
}
/* campaign card sits top-left on desktop */
@media (min-width:901px){
  .campcard{top:calc(28px + clamp(16px,3vw,40px));transform:none}
  .campcard:hover{transform:translateY(-4px)}
}
@keyframes campin{from{opacity:0;transform:translateY(10px) scale(.96)}}
@media (max-width:900px){.campcard:hover{transform:none}}  /* the desktop hover lift (-50%) made the card jump away on tap */
/* finder controls become liquid glass: unselected ones drop their white fill so the lens shows the panel */
.has-liquid .gheart,.has-liquid .btn2,.has-liquid .dghost,.has-liquid .pheart,.has-liquid .bopt:not([aria-checked="true"]),.has-liquid .chip:not([aria-pressed="true"]),.has-liquid .campsize:not([aria-checked="true"]),.has-liquid .opt:not([aria-pressed="true"]){background:transparent;border-color:rgba(255,255,255,.55)}
.has-liquid .finder .ftile:not([aria-checked="true"]),.has-liquid .finder .chip:not([aria-pressed="true"]){background:transparent;border-color:rgba(255,255,255,.55)}
.finder .ftile>div[style*="z-index"]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;height:100%}
.has-liquid .campcard{background:linear-gradient(155deg,rgba(255,255,255,.88) 0%,rgba(244,249,251,.78) 100%);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border:1px solid rgba(255,255,255,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 24px 60px -24px rgba(16,48,58,.35)}
.campcard>div[style*="z-index"]{grid-column:1/-1;display:grid;grid-template-columns:inherit;gap:inherit;align-items:inherit}
.has-liquid .card{background:linear-gradient(155deg,rgba(255,255,255,.95) 0%,rgba(236,241,244,.85) 55%,rgba(226,233,237,.8) 100%);border-color:rgba(200,210,216,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -12px 24px -18px rgba(120,140,150,.25)}  /* frosted even on white */
.card>div[style*="z-index"]{display:flex;flex-direction:column;flex:1;min-width:0}
#addMain>div[style*="z-index"]{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:100%}
/* aqua accents */
.marquee,.topbar{color:#0f3f4a}
::selection{background:#bfe3e1;color:#173540}
.badge{background:#2f8496}
/* home hero: light photos, so no dark shade and dark text (collection heroes keep theirs) */
.fullhero{background:#A5DCE6;color:var(--ink)}
.fullhero::after{background:linear-gradient(90deg,rgba(255,255,255,.35),rgba(255,255,255,0) 50%)}
.fullhero .herotext::before{display:none}
.fullhero .herotext h1,.fullhero .herotext p,.fullhero .herotext .kick{color:var(--ink);text-shadow:none}
.fullhero .slide img{object-position:70% 30%}
@media (max-width:760px){.fullhero::after{background:linear-gradient(0deg,rgba(232,246,249,.96) 0%,rgba(232,246,249,.88) 34%,rgba(232,246,249,0) 58%)}.fullhero .slide img{object-position:62% 10%}}
body.onhero header.bar:not(.solid):not(.open){color:var(--ink);background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
body.onhero header.bar:not(.solid):not(.open) .top{border-bottom-color:rgba(18,51,61,.18)}
body.onhero header.bar:not(.solid):not(.open) .marquee{background:rgba(165,220,230,.55);color:#0f3f4a}
body.onhero header.bar:not(.solid):not(.open) .count{background:var(--ink);color:#fff}
/* light falling on water: a soft highlight top-left and a gentle top-to-bottom shift, kept within a few shades */
:root{--aq-light:radial-gradient(110% 130% at 15% -15%,rgba(186,228,236,.9),rgba(186,228,236,0) 55%),linear-gradient(160deg,#AADAE2 0%,#98D2DE 50%,#82C4D2 100%);
  --aq-deep: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%)}
.finder{background:#B4DFE8 url(img/finder-bg-ref1.jpg) center center/cover no-repeat!important}
/* BELLABELL card: price sits next to the add button as one right-aligned group; photo fills its well */
.campbuy{justify-content:flex-end;gap:12px}
/* one shared price pill: the BELLABELL card look, reused by cards and menu prices */
.pricepill{display:inline-flex;align-items:center;border-radius:999px;background:rgba(197,215,225,.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;min-width:0}
.campwell img{width:100%;height:100%;object-fit:cover}
@media (max-width:520px){.campprice{height:42px;padding:0 16px}}
/* Skin Finder glass radius 60 + veils at 0.5x of the old strength */
.finder .ftile,.finder .chip{border-radius:60px!important}
@media(max-width:700px){.finder{background-image:url(img/finder-bg-ref1-m.jpg)!important;background-position:center top!important}}
/* soft white veil only behind text blocks, so text stays readable over the gel photo */
.finder .fintro,.finder .fnote,.finder .fempty,.finder .fstep,.finder .fhead{background:rgba(255,255,255,.3);border-radius:16px}
.finder .fintro{padding:14px 18px;width:fit-content}.finder .fstep{padding:5px 12px 5px 6px;width:fit-content}.finder .fnote{padding:8px 14px;width:fit-content;background:rgba(255,255,255,.375)}.finder .fhead{padding:6px 14px}.finder .fempty{background:rgba(255,255,255,.35)}
.site-foot{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%),radial-gradient(90% 80% at 6% -10%,rgba(255,250,235,.45),rgba(255,250,235,0) 55%),linear-gradient(150deg,#E9F6F9 0%,#D2ECF2 45%,#B4DFE8 100%)}
.site-foot,.finder{--mute:#1f4954;--soft:#1f4954}
.site-foot{color:#0f2f38}
.ft-col h4,.fkick,.ft-brand p,.ft-hours,.ft-bottom,.ft-bottom a{color:#1f4954}
.ft-bottom{border-top-color:rgba(15,63,74,.2)}
.fempty,.fnote,.freset,.flabel,.fhead span,.fhead small,.fintro p{color:#1f4954}
.fempty{border-color:rgba(15,63,74,.3)}
.marquee,header.bar .marquee,body.onhero header.bar.solid .marquee,body.onhero header.bar.open .marquee{background:var(--aq-deep);color:#0f3f4a}
.fic{background:radial-gradient(circle at 30% 25%,#FFFFFF,#D6EFF4 70%)}
.dbag{background:radial-gradient(circle at 30% 25%,#FFFFFF,#D6EFF4 75%)}
:root{--dot:#BFE4EC;--dot-on:#79BFCE}
/* buttons: #76BBCA with dark text (white on it is only 2.2:1) */
:root{--btn:#76BBCA}
.btn,.chip[aria-pressed="true"],.add,.cta .pill,.cta .round,.mbtn,.dcta,.dplus:hover,.ftile[aria-checked="true"],.fchips .chip[aria-pressed="true"],.favadd,.sview,.sadd,.btnx,.bopt[aria-checked="true"],.campsize[aria-checked="true"],.campadd,.ft-line{background:var(--atc)!important;border-color:var(--atc)!important;color:#0F2F38!important}
.dcta::before{background:#A5DCE6!important}
.ftile[aria-checked="true"] .fic{background:rgba(255,255,255,.4)!important}
/* add-to-cart buttons: #C5D7E1, the same colour as the product photo backdrop */
:root{--atc:#C5D7E1}
.add,.campadd,.favadd,.campsize[aria-checked="true"],.opt[aria-pressed="true"]{background:var(--atc)!important;border:1.5px solid var(--atc)!important;color:#0F2F38!important}
.add:hover,.campadd:hover,.favadd:hover,.campsize[aria-checked="true"]:hover,.opt[aria-pressed="true"]:hover{background:#B4CAD6!important;border-color:#B4CAD6!important}
/* QuickLiquid wraps a host's children in one content div: let it lay them out like the host did */
[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;min-width:0}  /* no width:100%: on shrink-to-fit pills it makes a resize loop */
.dcta>.ql-content,#addMain>.ql-content,.campadd>.ql-content,.favadd>.ql-content,.card>.ql-content{width:100%}  /* fixed-width hosts only */
/* P'Ek's glass spec 2 (2026-10-06) */
.chip{box-shadow:5px 6px 5px -2px rgba(16,22,34,.19)!important}
.tabs,.fchips,.toolbar{padding-top:8px;padding-bottom:8px}
.card{box-shadow:5px 6px 6px -2px rgba(16,22,34,.19)!important}
/* logo13 */
.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}.ft-logo small{font-size:.71875rem}
header.bar .logo{font-size:1.625rem;letter-spacing:0;line-height:1}
.ft-logo{font-size:1.875rem;letter-spacing:0;color:var(--ink)}
.ft-mark{font:700 min(8vw,7.1875rem)/1 'Instrument Sans',sans-serif;letter-spacing:0}.ft-mark{color:#12333D}.ft-mark .bs{letter-spacing:.1em}
/* card text inset: >= 0.6 x radius (26) from the card edge, one left edge for name, sub, price; extra bottom room clears the corner curve */
/* mobile collection labels: grow with their text (English line may wrap), 12px inset clears the card corner */
@media (max-width:900px){.col span{left:12px;right:12px;bottom:12px}.col span>div{padding:8px 12px;white-space:normal;overflow:visible}.col:hover small,.col:focus-visible small{max-height:none;font-size:.6875rem;line-height:1.25;margin-top:2px}}
.opt span{color:#3d5a63}
.card h3,.card p,.card .foot{margin-inline:6px}.card h3,.card p{margin-right:0}.card{padding-bottom:20px}.card .ptag{margin-inline:6px}
@media (max-width:520px){.mini h3,.mini .foot{margin-inline:9px}.mini h3{margin-right:0}.mini{padding-bottom:14px}}
/* 16px cap; 220px = 24px gutters + four 44px controls (the heart is hidden under 520px, so three), as the static shop */
@media (max-width:520px){header.bar .logo{font-size:min(16px,(100vw - 220px)/10.5);letter-spacing:0}}
/* unselected glass pills: visible rim, no colour tint */
.has-liquid .campsize:not([aria-checked="true"]),.has-liquid .opt:not([aria-pressed="true"]){border:1px solid rgba(18,51,61,.2)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 1px 3px rgba(16,22,34,.12)}
/* plain (type) hero slide: the wordmark is in the picture, so no headline text; ring and thumbs stay visible on white */
.fullhero.plainhero .herotext h1,.fullhero.plainhero .herotext p{display:none}
.fullhero .slide.plain img{object-position:70% 50%}
.fullhero.plainhero .hthumbs .ring circle{stroke:var(--ink)}
.hthumbs button img{box-shadow:0 0 0 1px rgba(18,51,61,.18)}
@media (max-width:760px){.fullhero .slide.plain img{object-position:100% 50%}.fullhero.plainhero::after{background:none}.fullhero.plainhero .herotext{bottom:96px}}
@media (max-width:700px){.fullhero .slide.plain img{object-position:50% 50%}}
.sprice .ptag{margin:0}
.srchres a.sthumb{display:block;padding:0}.srchres a.sname{padding:0;display:-webkit-box}

/* ===== collection layout A (owner choice 2026-10-06) ===== */
:root{--barh:96px}
.aban{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);height:232px;border-radius:26px;overflow:hidden;background:#E4F4F7}
.abtx{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:28px 36px;min-width:0}
.abtx h1{font-size:clamp(1.75rem,3vw,2.375rem);color:var(--ink)}
.abtx .en{font:500 .875rem 'Instrument Sans',sans-serif;letter-spacing:.04em;color:#3c6470;margin:0}
.abtx .blurb{margin:8px 0 0;color:#3d5157;font-size:.90625rem}
.afacts{display:flex;flex-wrap:wrap;gap:4px 22px;margin:14px 0 0;padding:0;list-style:none;font-size:.8125rem;color:#3d5157}
.afacts b{font-weight:500;color:var(--ink)}
.abimg{position:relative;min-width:0}
.abimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 28%}
.abimg::before{content:"";position:absolute;inset:0 auto 0 0;width:90px;z-index:1;background:linear-gradient(90deg,#E4F4F7,rgba(228,244,247,0))}
.alay{display:grid;grid-template-columns:256px minmax(0,1fr);gap:40px;padding-top:32px;align-items:start}
.aside{position:sticky;top:calc(var(--barh) + 20px);max-height:calc(100vh - var(--barh) - 40px);overflow:auto;padding-right:6px;scrollbar-width:thin}
.ashead{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:12px;border-bottom:1px solid var(--ink)}
.ashead h2{font-size:1.0625rem}
.lnk{font-size:.84375rem;color:var(--mute);text-decoration:underline;text-underline-offset:4px}
.lnk:hover{color:var(--ink)}
.fsec{padding-block:18px;border-top:1px solid var(--rule)}
.ashead+.fsec,.shb .fsec:first-child{border-top:0}
.fsec h3{font-size:.9375rem;margin-bottom:12px;color:var(--ink)}
.fx-opts{display:grid;gap:2px}
.fx-opt,.fx-sw{position:relative;display:flex;align-items:center;gap:10px;padding:6px 4px;border-radius:10px;cursor:pointer;font-size:.875rem;line-height:1.35;transition:background .15s}
.fx-opt:hover,.fx-sw:hover{background:#E4F4F7}
.fx-opt input,.fx-sw input{position:absolute;opacity:0;width:1px;height:1px}
.fx-box{display:grid;place-items:center;width:20px;height:20px;flex:none;border:1.5px solid #9fb0b6;border-radius:6px;background:#fff;color:transparent;transition:background .15s,border-color .15s}
.fx-box .i{width:14px;height:14px}
.fx-opt input:checked+.fx-box{background:var(--ink);border-color:var(--ink);color:#fff}
.fx-opt input:focus-visible+.fx-box,.fx-sw input:focus-visible+.fx-swt{outline:2px solid var(--ink);outline-offset:2px}
.fx-ol{flex:1;min-width:0}
.fx-opt em,.fx-sw em{font-style:normal;font-size:.78125rem;color:var(--soft);font-variant-numeric:tabular-nums}
.fx-opt.zero{opacity:.45}
.fx-opts .xtra{display:none}.fx-opts.open .xtra{display:flex}
.fx-more{margin-top:6px}
.fx-swt{position:relative;width:38px;height:22px;flex:none;border-radius:22px;background:#d3dde0;transition:background .2s}
.fx-swt::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .25s cubic-bezier(.22,1,.36,1)}
.fx-sw input:checked+.fx-swt{background:var(--ink)}
.fx-sw input:checked+.fx-swt::after{transform:translateX(16px)}
.prv{display:flex;justify-content:space-between;font:500 .9375rem var(--head);color:var(--ink);font-variant-numeric:tabular-nums;margin-bottom:6px}
.dual{position:relative;height:32px}
.dual::before{content:"";position:absolute;left:0;right:0;top:14px;height:4px;border-radius:4px;background:#dfe7ea}
.dual .fill{position:absolute;top:14px;height:4px;border-radius:4px;background:var(--ink)}
.dual input{position:absolute;inset:0;width:100%;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none;height:32px}
.dual input::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:22px;height:22px;border-radius:50%;background:#fff;border:1.5px solid var(--ink);box-shadow:0 2px 6px rgba(16,22,34,.2);cursor:grab}
.dual input::-moz-range-thumb{pointer-events:auto;width:20px;height:20px;border-radius:50%;background:#fff;border:1.5px solid var(--ink);cursor:grab}
.qr{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.qchip{height:32px;padding:0 12px;border:1.5px solid var(--rule);border-radius:36px;background:#fff;font-size:.8125rem;color:var(--ink);white-space:nowrap;transition:background .2s,border-color .2s}
.qchip[aria-pressed="true"]{background:var(--atc);border-color:var(--atc);color:#0F2F38}
.ltool{display:flex;align-items:center;gap:12px;padding:4px 0 16px;flex-wrap:wrap}
.ltool .found{font-size:.875rem;color:var(--mute)}.ltool .found b{color:var(--ink);font-weight:500}
.ltool .sort{border-color:var(--rule);height:38px;padding-block:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dens{display:flex;border:1.5px solid var(--rule);border-radius:36px;padding:2px}
.dens button{display:grid;place-items:center;width:34px;height:30px;border-radius:30px;color:var(--soft)}
.dens button[aria-pressed="true"]{background:var(--atc);color:#0F2F38}
.dens .i{width:18px;height:18px}
.fopen{display:none!important}
.fopen .i{width:17px;height:17px}
.fopen,.fopen>div[style*="z-index"]{gap:6px;align-items:center}
.badge-n{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--ink);color:#fff;font-size:.6875rem;font-variant-numeric:tabular-nums}
.badge-n:empty{display:none}
.actv{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:-4px 0 18px}
.actv:empty{display:none}
.achip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 8px 0 13px;border-radius:36px;background:#E4F4F7;color:var(--ink);font-size:.8125rem}
.achip .i{width:15px;height:15px}.achip:hover{background:#d3edf2}
#lgrid.grid{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:22px}
.lmorew{display:grid;justify-items:center;gap:10px;padding-top:36px;font-size:.84375rem;color:var(--mute)}
.lmorew:empty{display:none}
.lmorew .lbar{width:180px;height:3px;border-radius:3px;background:#e2eaec;overflow:hidden}
.lmorew .lbar i{display:block;height:100%;background:#79BFCE;border-radius:3px}
.lempty .btn{margin-top:10px;justify-self:auto}
.fshade{position:fixed;inset:0;z-index:60;background:rgba(16,48,58,.38);opacity:0;visibility:hidden;transition:opacity .4s cubic-bezier(.22,1,.36,1),visibility 0s .4s}
.fshade.on{opacity:1;visibility:visible;transition:opacity .4s cubic-bezier(.22,1,.36,1)}
.fsheet{position:fixed;left:0;right:0;bottom:0;z-index:61;display:flex;flex-direction:column;max-height:86dvh;background:#fff;border-radius:26px 26px 0 0;box-shadow:0 -20px 50px -20px rgba(16,48,58,.35);transform:translateY(105%);visibility:hidden;transition:transform .45s cubic-bezier(.22,1,.36,1),visibility 0s .45s}
.fsheet.on{transform:none;visibility:visible;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.fsheet:focus{outline:none}
.shh{position:relative;display:flex;align-items:center;justify-content:space-between;padding:10px 16px 6px 20px}
.shh::before{content:"";position:absolute;left:50%;top:8px;width:40px;height:4px;margin-left:-20px;border-radius:4px;background:#d6dfe2}
.shh h2{font-size:1.125rem;padding-top:10px}
.shx{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#f1f5f6;color:var(--ink);margin-top:8px}
.shb{overflow:auto;padding:0 20px 8px;overscroll-behavior:contain}
.shf{display:flex;gap:10px;align-items:center;padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--rule)}
.shf .btn{flex:1;justify-content:center;justify-self:auto}
.vpop{position:fixed;z-index:70;width:260px;padding:10px;border-radius:20px;background:#fff;box-shadow:0 24px 50px -16px rgba(16,48,58,.35),0 0 0 1px rgba(18,51,61,.08);animation:vpop .25s cubic-bezier(.22,1,.36,1)}
.vpop h4{margin:4px 8px 8px;font:500 .875rem var(--head);color:var(--ink)}
.vpop button{display:flex;justify-content:space-between;gap:10px;width:100%;padding:9px 10px;border-radius:12px;font-size:.875rem;text-align:left}
.vpop button:hover,.vpop button:focus-visible{background:#E4F4F7}
.vpop button span:last-child{font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
@keyframes vpop{from{opacity:0;transform:translateY(6px) scale(.97)}}
@media (max-width:1100px){.alay{grid-template-columns:220px minmax(0,1fr);gap:28px}#lgrid.grid{--cols:2!important}.dens{display:none}}
@media (max-width:860px){
  .aban{grid-template-columns:1fr;height:auto}
  .abimg{order:-1;aspect-ratio:16/8}
  .abimg::before{display:none}
  .abtx{padding:20px 20px 22px}
  .alay{grid-template-columns:1fr;padding-top:12px;gap:0}
  .aside{display:none}
  .fopen{display:inline-flex!important}
  .ltool{position:sticky;top:var(--barh);z-index:20;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);margin-inline:-16px;padding:10px 16px;gap:8px;flex-wrap:nowrap}
  .ltool .found{margin-left:auto;font-size:.8125rem}
  .ltool .grow{display:none}
  .ltool .sort{width:132px}
  #lgrid.grid{--cols:2!important;gap:12px}
}

/* ===================== shared additions for info-3 / brands-3 / 404-3 / search-3 (design/README.md §2) ===================== */
:root{--mute:#46626B;--aqua:#B4DFE8;--mist:#C5D7E1;--mist-hover:#B4CAD6;--wash:#E4F4F7;--wash-ink:#246A78;--card-line:#E3ECEF;
  --wait:#7A4B00;--wait-wash:#FFF1D6;--ok-wash:#E3F1E6;--btn-ink:#0F2F38;--done:#79BFCE;--todo:#D6E6EC;--ease:cubic-bezier(.22,1,.36,1);
  --wm:"Instrument Sans","Anuphan",system-ui,sans-serif;--glass-bg:rgba(255,255,255,.46)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#page{min-height:60vh}
#page :focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.own{background:var(--wait-wash);color:var(--wait);border-radius:6px;padding:0 6px;font:500 .84375rem/1.6 var(--head);-webkit-box-decoration-break:clone;box-decoration-break:clone}
mark.hit{background:var(--wash);color:inherit;border-radius:4px;padding:0 2px;font-weight:600}
.xbtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 28px;border-radius:36px;background:var(--mist);border:1.5px solid var(--mist);color:var(--btn-ink);font:500 .96875rem var(--head);white-space:nowrap;cursor:pointer;transition:background .2s var(--ease),transform .15s}
.xbtn:hover{background:var(--mist-hover);border-color:var(--mist-hover)}.xbtn:active{transform:scale(.98)}
.xbtn .i{width:18px;height:18px}
.xbtn.ghost{background:var(--glass-bg);border-color:rgba(18,51,61,.18);color:var(--ink)}.xbtn.ghost:hover{background:var(--mist-hover)}
.xbtn.sm{height:44px;padding:0 20px;font-size:.90625rem}.xbtn.xs{height:40px;padding:0 16px;font-size:.875rem}
.xbtn.line{background:#06C755;border-color:#06C755;color:#0B2614}.xbtn.line:hover{background:#05b34c;border-color:#05b34c}
.xbtn[disabled]{opacity:.45;cursor:not-allowed}
.tlink{font:500 .90625rem var(--head);color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer;background:none;border:0;padding:0}
.tlink:hover{color:var(--wash-ink)}
.xchip{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;border-radius:36px;background:var(--glass-bg);border:1px solid rgba(18,51,61,.14);font:500 .875rem var(--head);color:var(--ink);white-space:nowrap;cursor:pointer;box-shadow:5px 6px 5px -2px rgba(16,22,34,.12);transition:background .2s;flex:none}
.xchip .i{width:16px;height:16px}.xchip small{font:400 .78125rem var(--body);color:var(--mute)}
.xchip:hover{background:var(--wash)}
.xchip[aria-pressed="true"],.xchip[aria-selected="true"],.xchip.on{background:rgba(197,215,225,.86);border-color:rgba(197,215,225,.86)}
.xchip[aria-disabled="true"],.xchip:disabled{opacity:.4;cursor:default}
.xcard{border-radius:26px;background:#fff;border:1px solid var(--card-line);padding:24px}
.xin{height:50px;width:100%;border-radius:14px;border:1px solid var(--line);background:#fff;padding:0 16px;font:400 .9375rem var(--body);color:var(--text)}
.xin:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--aqua)}
.xsearch{position:relative;display:flex;align-items:center}
.xsearch>.i{position:absolute;left:16px;width:18px;height:18px;color:var(--mute);pointer-events:none}
.xsearch input{height:46px;width:100%;border-radius:36px;border:1px solid var(--line);background:#fff;padding:0 46px 0 44px;font:400 .9375rem var(--body);color:var(--text);-webkit-appearance:none;appearance:none}
.xsearch input::-webkit-search-cancel-button{display:none}
.xsearch input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--aqua)}
.xsearch .xclr{position:absolute;right:2px;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:var(--mute);background:none;border:0;cursor:pointer}
.xsearch .xclr .i{width:18px;height:18px}
.wordmark{font-family:var(--wm);font-weight:500;letter-spacing:.01em;color:var(--ink)}
.cntpill{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 8px;border-radius:13px;background:var(--wash);color:var(--wash-ink);font:500 .84375rem var(--head);font-variant-numeric:tabular-nums}
.icbtn{width:44px;height:44px;display:inline-grid;place-items:center;border-radius:50%;color:var(--ink);cursor:pointer;background:none;border:0;transition:background .2s;flex:none}
.icbtn:hover{background:var(--wash)}.icbtn .i{width:18px;height:18px}
.hscroll{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:6px 2px 12px}
.hscroll::-webkit-scrollbar{display:none}
.pagetop{padding-top:40px;padding-bottom:64px}
.ph1{font:500 2rem/1.25 var(--head);color:var(--ink);text-wrap:balance;margin:0}
.psub{font-size:.9375rem;color:var(--mute);margin:8px 0 0}
.h2x{font:500 1.25rem/1.35 var(--head);color:var(--ink);margin:0}
.sheet-shade{position:fixed;inset:0;background:rgba(18,51,61,.35);z-index:70}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:71;background:#fff;border-radius:26px 26px 0 0;max-height:80svh;overflow:auto;padding:20px 16px calc(20px + env(safe-area-inset-bottom,0px));box-shadow:0 -18px 40px -18px rgba(16,48,58,.35)}
.dlg{position:fixed;inset:0;z-index:72;display:grid;place-items:center;padding:16px;background:rgba(18,51,61,.35)}
.dlg>div{background:#fff;border-radius:26px;max-width:960px;width:100%;max-height:85vh;overflow:auto;padding:24px}
@media (max-width:899px){.pagetop{padding-top:24px}.ph1{font-size:1.625rem;line-height:1.3}.h2x{font-size:1.125rem}.xcard{padding:18px}.xbtn{height:50px}}
html:not(.has-liquid) .xchip,html:not(.has-liquid) .xbtn.ghost{-webkit-backdrop-filter:blur(10px) saturate(2);backdrop-filter:blur(10px) saturate(2)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{header.bar,.site-foot,.noprint,.toast{display:none!important}body{font-size:11pt}#page a[href^="http"]::after{content:" (" attr(href) ")"}}

/* ===== Glass buttons and labels (P'Ek 2026-10-07, from the Uiverse button by shokat_2650; playground /playground/cart-button.html).
   Clickable cart buttons move (press, travelling shine, turning rim); labels and price pills are the same glass, still.
   The card's icon-only cart is a plain icon until hover/focus. Doubled classes beat bs-product.css's .atc / .L-A .atc rules. */
@property --gl-a1{syntax:"<angle>";inherits:false;initial-value:-75deg}
.atc.atc,.card .acts .ic{--gl-ease:cubic-bezier(.25,1,.5,1);position:relative;isolation:isolate;border:0;border-radius:999px;color:rgb(50,50,50);cursor:pointer;
  background:linear-gradient(-75deg,rgba(255,255,255,.05),rgba(255,255,255,.2),rgba(255,255,255,.05));
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  box-shadow:inset 0 .125em .125em rgba(0,0,0,.05),inset 0 -.125em .125em rgba(255,255,255,.5),0 .25em .125em -.125em rgba(0,0,0,.2),0 0 .1em .25em inset rgba(255,255,255,.2),0 .5em 1em -.5em rgba(0,0,0,.22);
  transition:transform .4s var(--gl-ease),box-shadow .4s var(--gl-ease),background .4s var(--gl-ease)}
.atc.atc::before,.card .acts .ic::before{content:"";position:absolute;inset:1px;border-radius:inherit;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(-45deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.5) 40% 50%,rgba(255,255,255,0) 55%) 0% 50%/200% 200% no-repeat;transition:background-position .5s var(--gl-ease),opacity .4s var(--gl-ease)}
.atc.atc::after,.card .acts .ic::after,.tl::after,.pricepill::after{content:"";position:absolute;inset:-.5px;border-radius:inherit;padding:1px;box-sizing:border-box;pointer-events:none;z-index:1;
  background:conic-gradient(from var(--gl-a1) at 50% 50%,rgba(0,0,0,.5),rgba(0,0,0,0) 5% 40%,rgba(0,0,0,.5) 50%,rgba(0,0,0,0) 60% 95%,rgba(0,0,0,.5)),linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.5));
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;-webkit-mask-composite:xor;transition:--gl-a1 .5s ease,opacity .4s var(--gl-ease)}
.atc.atc>*,.card .acts .ic>*{position:relative;z-index:2}
.atc.atc:hover,.atc.atc:focus-visible{background:linear-gradient(-75deg,rgba(255,255,255,.05),rgba(255,255,255,.2),rgba(255,255,255,.05));border:0;transform:scale(.975);
  box-shadow:inset 0 .125em .125em rgba(0,0,0,.05),inset 0 -.125em .125em rgba(255,255,255,.5),0 .15em .05em -.1em rgba(0,0,0,.25),0 0 .05em .1em inset rgba(255,255,255,.5),0 .35em .7em -.4em rgba(0,0,0,.22)}
.atc.atc:hover::before,.atc.atc:focus-visible::before{background-position:25% 50%}
.atc.atc:hover::after,.atc.atc:focus-visible::after{--gl-a1:-125deg}
.atc.atc:active{transform:scale(.96)}
.atc.atc:active::before{background-position:50% 15%}
/* card cart: plain icon at rest, the glass drop rises on hover / keyboard focus */
.card .acts .ic:not(:hover):not(:focus-visible){background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.card .acts .ic::before,.card .acts .ic::after{opacity:0}
.card .acts .ic:hover::before,.card .acts .ic:focus-visible::before,.card .acts .ic:hover::after,.card .acts .ic:focus-visible::after{opacity:1}
.card .acts .ic:hover,.card .acts .ic:focus-visible{transform:scale(1.06)}
.card .acts .ic:hover::before{background-position:25% 50%}
.card .acts .ic:active{transform:scale(.97)}
/* labels and price pills: the same glass, never moving */
.tl,.pricepill{position:relative;border:0;color:rgb(50,50,50);
  background:linear-gradient(-75deg,rgba(255,255,255,.35),rgba(255,255,255,.6),rgba(255,255,255,.35));
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  box-shadow:inset 0 .125em .125em rgba(0,0,0,.05),inset 0 -.125em .125em rgba(255,255,255,.5),0 .25em .125em -.125em rgba(0,0,0,.2),0 0 .1em .25em inset rgba(255,255,255,.2),0 .35em .6em -.3em rgba(0,0,0,.18)}
@media (prefers-reduced-motion:reduce){.atc.atc,.card .acts .ic,.atc.atc::before,.atc.atc::after,.card .acts .ic::before,.card .acts .ic::after{transition:none}}

/* ===== Glass on the home page (P'Ek 2026-10-08, approved in /playground/home-glass.html): Skin Finder tiles and chips,
   collection captions, the feature card, campaign size/add buttons, the hero's slideshow buttons; the QuickLiquid
   engine still wraps them (layout) but its visual layers are hidden here. Bestseller tabs are soft raised buttons. */
@property --gx-a{syntax:"<angle>";inherits:false;initial-value:-75deg}
:is(.finder .ftile,.finder .chip,.campsize,.campadd,.cta .round,.cta .pill){position:relative}
:is(.col span, .finder .ftile, .finder .chip, .feature .float, .campsize, .campadd, .cta .round, .cta .pill){isolation:isolate;border:0!important;color:rgb(40,52,60)!important;
  background:linear-gradient(-75deg,rgba(255,255,255,.18),rgba(255,255,255,.42),rgba(255,255,255,.18))!important;
  backdrop-filter:blur(6px)!important;-webkit-backdrop-filter:blur(6px)!important;
  box-shadow:inset 0 .125em .125em rgba(0,0,0,.05),inset 0 -.125em .125em rgba(255,255,255,.5),0 .25em .125em -.125em rgba(0,0,0,.2),0 0 .1em .25em inset rgba(255,255,255,.2),0 .6em 1.2em -.6em rgba(0,0,0,.22)!important;
  transition:transform .4s cubic-bezier(.25,1,.5,1),box-shadow .4s,background .3s!important}

:is(.col span, .finder .ftile, .finder .chip, .feature .float, .campsize, .campadd, .cta .round, .cta .pill)::before{content:"";position:absolute;inset:1px;border-radius:inherit;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(-45deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.5) 40% 50%,rgba(255,255,255,0) 55%) 0% 50%/200% 200% no-repeat;transition:background-position .5s cubic-bezier(.25,1,.5,1)}
:is(.col span, .finder .ftile, .finder .chip, .feature .float, .campsize, .campadd, .cta .round, .cta .pill)::after{content:"";position:absolute;inset:-.5px;border-radius:inherit;padding:1px;box-sizing:border-box;pointer-events:none;z-index:1;
  background:conic-gradient(from var(--gx-a) at 50% 50%,rgba(0,0,0,.5),rgba(0,0,0,0) 5% 40%,rgba(0,0,0,.5) 50%,rgba(0,0,0,0) 60% 95%,rgba(0,0,0,.5)),linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.5));
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;-webkit-mask-composite:xor;transition:--gx-a .5s ease}
:is(.col span, .finder .ftile, .finder .chip, .feature .float, .campsize, .campadd, .cta .round, .cta .pill)>*:not(.ql-lens,.ql-tint,.ql-sheen,.ql-rim){position:relative;z-index:2}
:is(.finder .ftile,.finder .chip):hover,.col:hover span{transform:scale(.975)}
:is(.finder .ftile,.finder .chip):hover::before,.col:hover span::before{background-position:25% 50%}
:is(.finder .ftile,.finder .chip):hover::after,.col:hover span::after{--gx-a:-125deg}
:is(.finder .ftile,.finder .chip):active{transform:scale(.96)}
/* chosen tile / chip: the same glass tinted dark teal so the white label reads */
.finder :is(.ftile[aria-checked="true"],.chip[aria-pressed="true"]){color:#fff!important;
  background:linear-gradient(-75deg,rgba(18,51,61,.72),rgba(18,51,61,.88),rgba(18,51,61,.72))!important}

/* the feature tile's info card: denser glass so the name and price read over the photo; a small lift + shine on hover */
.feature .float{background:linear-gradient(-75deg,rgba(255,255,255,.45),rgba(255,255,255,.7),rgba(255,255,255,.45))!important;transition:transform .45s cubic-bezier(.25,1,.5,1),box-shadow .45s!important}
.feature:hover .float{transform:translateY(-3px)}
.feature:hover .float::before{background-position:25% 50%}
.feature:hover .float::after{--gx-a:-125deg}

/* campaign size chips + add button, hero slideshow buttons: press, shine, rim on hover */
:is(.campsize,.campadd):hover,.cta:hover :is(.round,.pill){transform:scale(.975)}
:is(.campsize,.campadd):hover::before,.cta:hover :is(.round,.pill)::before{background-position:25% 50%}
:is(.campsize,.campadd):hover::after,.cta:hover :is(.round,.pill)::after{--gx-a:-125deg}
:is(.campsize,.campadd):active,.cta:active :is(.round,.pill){transform:scale(.96)}
.campsize[aria-checked="true"]{color:#fff!important;background:linear-gradient(-75deg,rgba(18,51,61,.72),rgba(18,51,61,.88),rgba(18,51,61,.72))!important}

/* bestseller tabs: soft raised buttons (Uiverse by ke1221), on this white page; the chosen tab looks pressed in */
.tabs .chip{border:1px solid #f1f5f7!important;border-radius:.6em!important;background:#fff!important;color:#090909!important;padding:.55em 1.3em!important;
  box-shadow:6px 6px 12px #d3dde2,-6px -6px 12px #ffffff!important;transition:all .3s!important}
.tabs .chip:active,.tabs .chip[aria-pressed="true"]{color:#3d5560!important;box-shadow:inset 4px 4px 10px #d3dde2,inset -4px -4px 10px #ffffff!important}
.tabs{gap:14px!important;padding:10px 4px 14px!important}
.tabs .chip :is(.ql-lens,.ql-tint,.ql-sheen,.ql-rim){display:none!important}
/* the caption's hover wash (.ql-content::before) is square: round it with the pill */
:is(.col span, .finder .ftile, .finder .chip, .feature .float, .campsize, .campadd, .cta .round, .cta .pill) .ql-content,:is(.col span, .finder .ftile, .finder .chip, .feature .float, .campsize, .campadd, .cta .round, .cta .pill) .ql-content::before{border-radius:inherit}
:is(.col span, .finder .ftile, .finder .chip, .feature .float, .campsize, .campadd, .cta .round, .cta .pill){overflow:visible!important}
:is(.col span, .finder .ftile, .finder .chip, .feature .float, .campsize, .campadd, .cta .round, .cta .pill) :is(.ql-lens,.ql-tint,.ql-sheen,.ql-rim){display:none!important}

/* ui-parity: bsui-collection — the collection page (components/bs/collection/CollectionView).
   Ported from the approved static's bs-collection.css, which scoped itself to `body.on-collection`;
   the React page has no body class, so the same rules hang off its own `.bs-collection` wrapper.
   Both accordions are markup-only `<details>`/`<summary>`, no JavaScript. */
/* `--cbarh`: the category page's own sticky tab bar (`.bs-all .cbar`) is 44px of tab/search row,
   2×10px padding and 2 borders, and it pins under the header (`--barh`), so the zones' sticky cards
   have to clear both. The bar wraps into two rows only at ≤900px, where the zone cards are static. */
.bs-collection{padding-bottom:8px;--cbarh:66px}

/* prose blocks keep the reading measure ~70 characters; the intro (inside the head zone, which
   caps it at 62ch itself) is the only one left, the zones under the grid set their own columns */
.bs-collection .cintro{max-width:min(100%,72ch)}
.bs-collection .cintro h2{font:500 clamp(1.375rem,2.4vw,1.75rem)/1.4 var(--head);color:var(--ink);margin:0 0 14px}
.bs-collection .cintro p{margin:0 0 12px;font-size:.96875rem;line-height:1.8;color:var(--text)}
.bs-collection .cintro p:last-child{margin:0}
.bs-collection :is(.cintro,.canswer,.cq .prose,.cq summary) a{color:var(--cream-ink);text-decoration:underline;text-underline-offset:3px}

.bs-collection .canswer{margin-top:44px}
.bs-collection .canswer h2{font:500 clamp(1.375rem,2.4vw,1.75rem)/1.4 var(--head);color:var(--ink);margin:0 0 14px}
.bs-collection .canswer .ans{margin:0 0 18px;font-size:1.0625rem;line-height:1.8;color:var(--ink)}
.bs-collection .crefs{margin:0;padding-left:1.4em;font-size:.9375rem;line-height:1.7;color:var(--text)}
.bs-collection .crefs li{margin:0 0 8px}
.bs-collection .crefs a{color:var(--cream-ink);text-decoration:underline;text-underline-offset:3px;word-break:break-word}
.bs-collection .crefs a .i{width:13px;height:13px;vertical-align:-1px;margin-left:3px}
.bs-collection .crefs .pub{color:var(--mute)}

/* both accordions: <details>/<summary>, no JavaScript */
.bs-collection .cq{margin-top:44px;border-top:1px solid var(--rule)}
.bs-collection .cfaq{margin-top:44px}
.bs-collection .cfaq .zh2{font:500 clamp(1.375rem,2.4vw,1.75rem)/1.4 var(--head);color:var(--ink);margin:0 0 6px}
.bs-collection details{border-bottom:1px solid var(--rule)}
.bs-collection summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:14px 2px;cursor:pointer;list-style:none;font:500 1.0625rem/1.5 var(--head);color:var(--ink)}
.bs-collection summary::-webkit-details-marker{display:none}
.bs-collection summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.bs-collection summary h2{margin:0;font:inherit}
.bs-collection summary .i{width:20px;height:20px;flex:none;color:var(--mute);transition:transform .2s}
.bs-collection details[open] summary .i{transform:rotate(45deg)}
.bs-collection .prose{padding:0 0 20px}
.bs-collection .prose p{margin:0 0 12px;font-size:.96875rem;line-height:1.8;color:var(--text)}
.bs-collection .prose p:last-child{margin:0}
.bs-collection .cfaq .a{margin:0;padding:0 0 20px;font-size:.96875rem;line-height:1.8;color:var(--text)}

@media (max-width:520px){
  .bs-collection :is(.cintro p,.prose p,.cfaq .a){font-size:.9375rem}
  .bs-collection .canswer .ans{font-size:1rem}
}

/* the content zones on direction C (P'Ek 2026-10-14, `.ref/collagen-C.html`): the tabs and the FAQ
   read down the left column, the answer card sticky in a 400px right rail spanning both, so it rides
   down the whole zone (P'Ek 2026-10-14). No LINE card. Ported from the mockup's `.ref/zones.css`
   with its `[data-dir=C]` switch dropped. */
.bs-collection .zones{display:grid;grid-template-columns:minmax(0,1fr) 400px;grid-template-rows:auto 1fr;column-gap:64px;align-items:start;margin-top:72px}
.bs-collection .zones :is(.canswer,.cq,.cfaq){margin-top:0}
.bs-collection .zones>.cq+.cfaq{margin-top:64px}
.bs-collection .canswer{grid-column:2;grid-row:1/span 2;position:sticky;top:calc(var(--barh) + var(--cbarh) + 24px);padding:28px 30px 26px;border-radius:var(--r);background:var(--wash);scroll-margin-top:calc(var(--barh) + var(--cbarh) + 24px)}
.bs-collection .canswer>h2{margin:0 0 14px;font:500 1.3125rem/1.5 var(--head)}
.bs-collection .canswer .ans{margin:0 0 20px;font-size:1rem;line-height:1.75}
.bs-collection .refbox{padding-top:16px;border-top:1px solid rgba(18,51,61,.14)}
.bs-collection .refs-h{margin:0 0 10px;font:500 .9375rem/1.4 var(--head);color:var(--ink)}
.bs-collection .crefs{font-size:.875rem}
.bs-collection .cq{grid-column:1;grid-row:1}
.bs-collection .cfaq{grid-column:1;grid-row:2}
/* deeper than this block's own `.cfaq .zh2` above, which would win on class count */
.bs-collection .zones .cfaq>.zh2{margin:0 0 12px}
.bs-collection .faq-list{border-top:1px solid var(--rule)}
.bs-collection #faq{scroll-margin-top:calc(var(--barh) + var(--cbarh) + 24px)}

@media (max-width:1100px){
  .bs-collection .zones{grid-template-columns:minmax(0,1fr) 340px;column-gap:48px}
}
@media (max-width:900px){
  .bs-collection .zones{display:block}
  .bs-collection .zones>.cq+.cfaq{margin-top:48px}
  .bs-collection .canswer{position:static;margin-bottom:48px}
  .bs-collection .zones .cfaq>.zh2{margin:0 0 16px}
}
@media (max-width:520px){
  .bs-collection .zones{margin-top:48px}
  .bs-collection .canswer{padding:22px 20px}
  .bs-collection .canswer>h2{font-size:1.1875rem}
}
/* ui-parity: bsui-product — the product page on direction C of product-content-3.html: the
   layout-A buy box remade on the reference's own class names (.product/.pthumbs/.gal/.info/
   .bigprice/.buy) and its dossier (.dC). Scoped to .bs-product so no other page changes;
   `.buy` is doubled where src/styles/bs-product.css also styles it. */
.bs-product .product{grid-template-columns:72px minmax(0,1fr) minmax(360px,440px);gap:24px 32px}
.bs-product .product.noimg{grid-template-columns:minmax(0,1fr)}
@media (min-width:901px){.bs-product .product.noimg .info{max-width:440px}}
.bs-product .pthumbs{display:flex;flex-direction:column;gap:10px;position:sticky;top:calc(var(--barh) + 18px)}
.bs-product .thumb{width:72px;height:72px;flex:none;border-radius:14px;aspect-ratio:auto;padding:0;cursor:pointer}
.bs-product.bs-product .gal{position:sticky;top:calc(var(--barh) + 18px);min-width:0}
.bs-product .zoomhint{color:var(--ink)}
.bs-product .info{gap:18px}
/* the reference sizes the h1 with a clamp, not layout A's fixed 34px/26px step */
.bs-product.bs-product .info h1{font-size:clamp(1.625rem,3vw,2.125rem)}
.bs-product .opt{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-height:52px;min-width:84px;padding:6px 18px;border:1.5px solid rgba(18,51,61,.2);border-radius:18px;background:#fff;color:var(--ink);font-size:.90625rem;line-height:1.3;text-align:left}
.bs-product .opt span{display:inline-flex;align-items:center;gap:6px;font-size:inherit;color:inherit}
.bs-product .opt small{font-size:.78125rem;color:#3d5a63;font-variant-numeric:tabular-nums}
.bs-product .opts{display:grid;gap:8px}
.bs-product .opts .label{margin-bottom:0}
/* layout A's 1px tinted rules drift from the reference's ink border and tight subtitle pull */
.bs-product .qty{border:1.5px solid var(--ink)}
.bs-product.bs-product .info .lead{margin-top:-6px}
.bs-product.bs-product .buy{display:flex;align-items:center;gap:10px;padding:0;grid-column:auto}
/* the price belongs to the sticky bar alone: layout A's phone rule would show it in the row too */
.bs-product .buy .bprice{display:none}
.bs-product .sbar .bprice{display:flex;flex-direction:column;line-height:1.15;flex:none}
.bs-product .bprice small{font-size:.6875rem;color:var(--mute)}
.bs-product .bprice b{font:500 1.0625rem var(--head);font-variant-numeric:tabular-nums}
.bs-product .sbar .add{flex:1 1 auto;min-width:0;min-height:46px;font-size:.9375rem;padding:0 18px}
.bs-product .add{border-radius:18px}
/* dossier (direction C) */
.bs-product .dC .cg{display:grid;grid-template-columns:280px minmax(0,720px);gap:56px;padding:48px 0 72px;justify-content:center}
.bs-product .dC .cg.solo{grid-template-columns:minmax(0,720px)}
.bs-product .dC .rail{position:sticky;top:calc(var(--barh) + 24px);display:grid;gap:20px;align-self:start}
.bs-product .dC .rcard{padding:22px}
.bs-product .dC .rcard h2{font:500 .9375rem var(--head);color:var(--mute);margin:0 0 6px}
.bs-product .dC .rdl{margin:0}
.bs-product .dC .rdl div{padding:10px 0;border-bottom:1px solid var(--rule)}
.bs-product .dC .rdl div:last-child{border-bottom:0;padding-bottom:0}
.bs-product .dC .rdl dt{font-size:.8125rem;color:var(--mute)}
.bs-product .dC .rdl dd{margin:0;font:500 .9375rem/1.45 var(--head);color:var(--ink)}
.bs-product .dC .rv{display:flex;align-items:flex-start;gap:14px}
.bs-product .dC .rv .av{display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:50%;overflow:hidden;background:var(--well);color:var(--wash-ink)}
.bs-product .dC .rv .av img{width:100%;height:100%;object-fit:cover;display:block}
.bs-product .dC .rv .av .i{width:24px;height:24px}
.bs-product .dC .rv b{display:block;font:500 1rem/1.4 var(--head);color:var(--ink)}
.bs-product .dC .rv small{display:block;font-size:.84375rem;line-height:1.6;color:var(--mute)}
.bs-product .dC .toc h2{font:500 .84375rem var(--head);color:var(--mute);margin:0 0 8px}
.bs-product .dC .toc a{display:block;padding:8px 0 8px 14px;border-left:2px solid var(--todo);font-size:.90625rem;line-height:1.5;color:var(--text)}
.bs-product .dC .rd>section{scroll-margin-top:calc(var(--barh) + 24px)}
.bs-product .dC .rd>section+section{margin-top:48px}
.bs-product .dC .rd h2{display:flex;align-items:center;gap:12px;font:500 clamp(1.375rem,2.4vw,1.75rem)/1.35 var(--head);color:var(--ink);margin:0 0 16px}
.bs-product .dC .rd h2 .i{width:26px;height:26px;color:var(--wash-ink)}
.bs-product .dC .zh2{font:500 clamp(1.5rem,2.6vw,1.875rem)/1.35 var(--head);color:var(--ink);margin:0 0 16px}
.bs-product .dC .ans{font-size:1.125rem;line-height:1.8;color:var(--ink);margin:0}
.bs-product .dC .tldr{border-radius:22px;background:var(--wash);padding:22px 24px;margin-top:24px}
.bs-product .dC .tldr h3{display:flex;align-items:center;gap:8px;font:500 1rem var(--head);color:var(--wash-ink);margin:0 0 10px}
.bs-product .dC .tldr h3 .i{width:18px;height:18px}
.bs-product .dC .tldr ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.bs-product .dC .tldr li{display:flex;gap:10px;font-size:.96875rem;line-height:1.7;color:var(--ink)}
.bs-product .dC .tldr li .i{width:16px;height:16px;margin-top:5px;color:var(--wash-ink)}
.bs-product .dC .prose p{margin:0 0 12px;font-size:.96875rem;line-height:1.8;color:var(--text)}
.bs-product .dC .prose p:last-child{margin:0}
.bs-product .dC .faq details{border-top:1px solid var(--rule)}
.bs-product .dC .faq details:last-child{border-bottom:1px solid var(--rule)}
.bs-product .dC .faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:12px 0;cursor:pointer;list-style:none;font:500 1.0625rem/1.5 var(--head);color:var(--ink)}
.bs-product .dC .faq summary::-webkit-details-marker{display:none}
.bs-product .dC .faq summary .i{flex:none;transition:transform .2s}
.bs-product .dC .faq details[open] summary .i{transform:rotate(45deg)}
.bs-product .dC .faq .a{font-size:.96875rem;line-height:1.8;padding:0 0 18px;margin:0;color:var(--text)}
.bs-product .dC .refs ol{font-size:.84375rem;line-height:1.7;padding-left:1.4em;margin:0;color:var(--text)}
.bs-product .dC .refs li{margin:0 0 10px;scroll-margin-top:calc(var(--barh) + 24px)}
.bs-product .dC .refs a.ext{color:var(--wash-ink);text-decoration:underline;text-underline-offset:3px;word-break:break-all}
.bs-product .dC .refs a.ext .i{width:13px;height:13px;vertical-align:-1px;margin-left:2px}
.bs-product .dC .disc{display:flex;align-items:flex-start;gap:10px;font-size:.84375rem;line-height:1.7;color:var(--mute);margin:16px 0 0}
.bs-product .dC .disc .i{width:16px;height:16px;margin-top:3px;color:var(--soft)}
/* สรรพคุณ (design C): the imported metadata's benefit list opens the article column, between two
   thin rules. A phrase the merchant wrote with a space stays on one line (`.nw`). */
.bs-product #benefits{margin-bottom:36px}
.bs-product #benefits h2{display:flex;align-items:center;gap:8px;font:500 1.1875rem/1.4 var(--head);color:var(--ink);margin:0}
.bs-product #benefits h2 .i{width:20px;height:20px;flex:none;color:var(--wash-ink)}
.bs-product #benefits h2 span{font:500 .875rem var(--head);color:var(--wash-ink);margin-left:6px}
.bs-product #benefits ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 24px;list-style:none;margin:14px 0 0;padding:14px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.bs-product #benefits li{display:flex;align-items:baseline;gap:8px;font:500 .96875rem/1.45 var(--head);color:var(--ink)}
.bs-product #benefits li .em{font-size:1rem;line-height:1;flex:none}
.bs-product #benefits .nw{white-space:nowrap}
.bs-product .bf-note{display:flex;gap:6px;align-items:flex-start;margin:8px 0 0;font-size:.8125rem;line-height:1.55;color:var(--mute)}
.bs-product .bf-note .i{width:14px;height:14px;flex:none;margin-top:3px;color:var(--wash-ink)}
.bs-product .dC .jbar{display:none}
@media (max-width:900px){
  .bs-product .product{grid-template-columns:minmax(0,1fr);gap:16px}
  .bs-product.bs-product .gal{position:relative;top:auto;order:1;margin-inline:0}
  /* the reference keeps the zoom chip on the phone; layout A hid it */
  .bs-product.bs-product .zoomhint{display:inline-flex}
  .bs-product .info{order:3}
  .bs-product .pthumbs{position:static;order:2;flex-direction:row;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .bs-product .pthumbs::-webkit-scrollbar{display:none}
  .bs-product .thumb{width:60px;height:60px}
}
@media (max-width:899px){
  .bs-product .dC .cg{grid-template-columns:minmax(0,1fr);gap:28px;padding:24px 0 56px}
  .bs-product .dC .rail{position:static;order:2}
  .bs-product .dC .toc{display:none}
  .bs-product .dC .jbar{display:flex;gap:8px;position:sticky;top:var(--barh);z-index:20;margin:0 -16px;padding:8px 16px;background:rgba(255,255,255,.96);overflow-x:auto;scrollbar-width:none;box-shadow:0 1px 0 var(--rule)}
  .bs-product .dC .jbar::-webkit-scrollbar{display:none}
  .bs-product .dC .jbar .xchip{height:40px}
}
@media (max-width:720px){
  .bs-product.bs-product .buy{position:static;left:auto;right:auto;bottom:auto;z-index:auto;flex-wrap:nowrap;padding:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;animation:none}
  .bs-product .buy .add{flex:1 1 auto;flex-basis:auto;min-width:0;height:48px;font-size:.9375rem;padding-inline:10px}
  body:has(.bs-product){padding-bottom:84px}
  body:has(.bs-product) .toast{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:640px){
  /* the lead drops under the heading; two benefit columns fit the phone */
  .bs-product #benefits h2{flex-wrap:wrap}
  .bs-product #benefits h2 span{margin-left:28px;flex-basis:100%}
  .bs-product #benefits ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
  .bs-product #benefits li{font-size:.9375rem}
}
/* ui-parity: bsui-home (2026-10-08). Three things the static `index.html` keeps outside this
   stylesheet, or has no need of because its own JS sets them at runtime. */

/* home article zone: the featured card's save button, its category chip and the keyword row —
   verbatim from the static page's inline `.hB` block, colour tokens renamed to this shop's.
   `.hB` itself lives in bs-home.css, which deliberately leaves these elements out. */
.hB .bm{position:absolute;top:14px;right:14px;z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.9);color:var(--ink);cursor:pointer}
.hB .bm .i{width:20px;height:20px}
.hB [data-save] .on,.hB [data-save][aria-pressed="true"] .off{display:none}
.hB [data-save][aria-pressed="true"] .on{display:block}
.hB .tags{display:flex;align-items:center;gap:10px;margin-top:18px}
.hB .cat{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:#fff;color:var(--wash-ink);font:500 .78125rem var(--head);white-space:nowrap}
.hB .kw{display:flex;flex-wrap:wrap;gap:8px;padding-block:8px;margin-top:8px}
.hB .kw .chip{background:rgba(255,255,255,.7);border-color:rgba(18,51,61,.18)}
.hB .kw .chip .i{width:16px;height:16px}
/* the keyword chips wrap onto more lines on a phone: a hidden-scrollbar scroller left the last chip half off the screen with nothing saying it slides (P'Ek 2026-10-08) */

/* the collection label is not press-shrunk like the chips are: the static grows only the tile
   image (`.col:hover img`) and fills the label's own font (`fitCols`), so the glass block's
   press-shrink comes back off the label. */
.col:hover span,.col:focus-visible span{transform:none}

/* one artwork per breakpoint: the static keeps both hero slides mounted and fades the idle one to
   opacity 0, which leaves a second full-size copy of the photo inside the live slide's own box
   (the probe reads the two hero files as covering each other at 390 and 1440). `display` takes the
   idle slide out of the paint, so a breakpoint shows its artwork once.
   Ceiling: an unpainted slide cannot transition, so the outgoing 1.2s opacity fade becomes a cut
   and the live slide's 7s Ken-Burns zoom arrives as a keyframe instead of the static's own
   transform transition. Upgrade: render only the active slide in `BsHero` and cross-fade the
   section, which is the only way to keep the fade without a second copy of the photo. */
.fullhero .slide:not(.on){display:none}
@keyframes heroIn{from{transform:scale(1.06)}}
.fullhero .slide.on img{animation:heroIn 7s ease-out}
@media (prefers-reduced-motion:reduce){.fullhero .slide.on img{animation:none}}
/* ui-parity: bsui-articles
   Article page (`.VA.art`) and article list (`.wrap.LA`) matched to the approved reference. The
   reference's liquid-glass engine replaces `.gcard`'s gradient and drop shadow with a glass
   surface; offline the CSS fallback (gradient + `--shadow`, the hard chip shadow) is what shows,
   so each rule below restates the reference's rendered look with the engine off. */

/* Byline: the reviewer line is the reference's third row, so the monogram spans three. */
.VA.art .byline .amark{grid-row:span 3}
.VA.art .byline .rv{display:flex;align-items:center;gap:6px;color:var(--wash-ink)}
.VA.art .byline .rv .i{width:16px;height:16px}

/* (the callout/related-card, list-button and chip skins that stood here moved to the
   `ui-parity: bsfix-articles` block at the end of this file) */
.LA .chiprow .chip :is(.ql-lens,.ql-tint,.ql-sheen,.ql-rim){display:none!important}

/* ui-parity: bsui-site — the shared product card and the category tile's hover, against the
   approved static (index.html). Overrides only; the rules above stay verbatim. */

/* ui-parity: bsfix-product - the card is the prototype's raised glass card again: .has-liquid .card paints the
   gradient fill and hairline, and the shadow at the top of this sheet (5px 6px 6px -2px) stays on hover too (no
   flat white / no-shadow override; the lift on hover stays). The tagline is ONE grey line, cut with an ellipsis:
   the store's data is a long descriptor, the prototype prints a short tag, and 2-3 lines made every card taller. */
.card p {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The tile's text holds its size: the label grew with the card on hover (font-size:min(…cqw…)),
   and the glass rim shrank the whole pill (scale .975). Only the image zooms. */
.col:hover span {
  transform: none;
}
/* Scoped to the same query that grows the label (bs-shop.css:758): under 901px the tile holds its
   11px subtitle (bs-shop.css:855), and this must not outrank it. */
@media (hover: hover) and (min-width: 901px) {
  .col:hover span > div,
  .col:focus-visible span > div {
    font-size: inherit;
  }
  .col:hover small,
  .col:focus-visible small {
    font-size: .71875rem;
  }
}
/* ui-parity: bsui-pages */
/* brands-3.html paints the selected view pill #dff0f7; the shared .xchip rule over a white page
   composites to a greyer wash, so the brands switch keeps the reference colour. */
.bs-brands .bseg .xchip[aria-selected="true"]{background:#dff0f7;border-color:#dff0f7}

/* ui-parity: bsui-orch - header nav labels stay on one line (the TH/EN pill shares the nav column and squeezed them into two-line words); */
.bar .nav>a,.bar .nav>.megabtn{white-space:nowrap;flex:none}
.bar .nav{gap:18px}
/* ui-parity: bsui-footer-lang - the TH/EN pill in the footer's bottom bar */
.site-foot .ft-bottom .lang{margin:0 0 0 14px;height:38px;vertical-align:middle}
.site-foot .ft-bottom .lang button{height:30px;min-width:38px;padding:0 10px}
/* ui-parity: bsui-polish - the footer touches the content above it (no 72px white band); the carousel's ดูทั้งหมด sits beside its title, the counter alone on the right */
.site-foot{margin-top:0}
.sechead:has(.chr){flex-direction:row;align-items:baseline;justify-content:flex-start;gap:16px}
.sechead:has(.chr) .chr{margin-left:auto}

/* ui-parity: bsfix-chipcolour (P'Ek 2026-10-08) - the SELECTED chip is light blue again, like the old prototype: fill rgb(197,215,225), dark teal text. */
/* 1. Skin Finder step-2 filter chips (the origin chips and the Thai-label chip) */
.finder .chip[aria-pressed="true"]{background:rgb(197,215,225)!important;color:rgb(15,47,56)!important}
/* 2. campaign banner size chips (30 ml / 10 ml) */
.campsize[aria-checked="true"]{background:rgb(197,215,225)!important;color:rgb(15,47,56)!important}
/* 3. the home bestseller tabs keep their raised/pressed shape; only the active one takes the fill */
.tabs .chip[aria-pressed="true"]{background:rgb(197,215,225)!important;color:rgb(15,47,56)!important}
/* 4. product card cart button: light blue on hover / keyboard focus, resting state unchanged */
.card .acts .ic{transition:transform .4s var(--gl-ease),box-shadow .4s var(--gl-ease),background-color .15s ease}
.card .acts .ic:hover,.card .acts .ic:focus-visible{background:rgb(197,215,225)}
@media (prefers-reduced-motion:reduce){.card .acts .ic{transition:none}}

/* Footer metrics of the static shop's articles/account pages (the variant P'Ek approved): headings 12.5px and link pitch 36px (edited in place above),
   the brand lock-up at 30px on every width, and the wordmark's inherited 1.65 line height, which leaves the 46px between it
   and the bottom rule. The home/collection pages of the static shop used a tighter footer; the shop has one. */
.ft-logo,.ft-mark{line-height:1.65}
.ft-logo{font-family:var(--body)}

/* ui-parity: bsfix-articles - article page, article list and the home article block against the approved static.
   The static's liquid-glass engine paints these surfaces; with no engine here each rule states the colour the
   engine renders: cards fade from (254,255,255) to (238,245,249), buttons are rgb(217,236,246) at rest and
   rgb(206,229,242) on hover, an inactive chip is a .46 white glass. Replaces the earlier bsui-articles skins. */
.VA.art.wrap,.related.wrap,.LA.wrap{max-width:1200px;padding-inline:40px}
@media (max-width:899px){.VA.art.wrap,.related.wrap,.LA.wrap{padding-inline:16px}}
.related.wrap{margin-top:73px;margin-bottom:80px}
.VA.art .pcallout,.related .acard,.LA .acard{background:linear-gradient(155deg,#FEFFFF 0%,#F3F9FB 55%,#EEF5F9 100%);border:1px solid rgba(200,210,216,.7);box-shadow:none}
.VA.art .pcallout{font-size:var(--fs);line-height:1.85}
.VA.art .plabel{line-height:1.85}
.VA.art .pcallout .sub{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.tldr h2,.related h2{line-height:1.65}
.VA.art .pcallout .btn,.LA .feat .btn{background:rgb(217,236,246)!important;border-color:rgb(217,236,246)!important;color:var(--btn-ink)!important}
.LA .feat .btn,.LA .moreb .btn,.LA .empty .btn{height:52px;padding:0 28px;gap:10px;font:500 .96875rem var(--head);border-radius:36px}
.LA .moreb .btn,.LA .empty .btn{background:rgba(255,255,255,.46)!important;border:1px solid rgba(18,51,61,.18)!important;color:var(--ink)!important}
.VA.art .pcallout .btn:hover,.LA .feat .btn:hover,.LA .moreb .btn:hover,.LA .empty .btn:hover{background:rgb(206,229,242)!important;border-color:rgb(206,229,242)!important}
.LA .chiprow .chip{height:40px;padding:0 16px;font:500 .90625rem var(--head);box-shadow:none!important}
.LA .chiprow .chip:not([aria-pressed="true"]){background:rgba(255,255,255,.46)!important;border:1px solid rgba(255,255,255,.7)!important}
.VA.art .helpful .chip{height:44px;padding:0 16px;font:500 .90625rem var(--head);border-radius:36px;background:rgba(255,255,255,.46);border:1px solid rgba(255,255,255,.7);box-shadow:none!important}
@media (max-width:899px){.LA .feat .btn,.LA .moreb .btn,.LA .empty .btn{height:50px}}
.hB .feat .tl{padding:0;background:none;border:0;box-shadow:none;font-size:.78125rem;line-height:normal;font-weight:500;color:rgb(36,106,120)}
.hB .feat .tl::after{display:none}
.hB .meta{color:rgb(102,102,102)}
.hB .feat .tl{display:inline-flex;align-items:center;gap:6px;height:16px}
.hB .feat .tl .i{width:14px;height:14px}
@media (max-width:899px){.VA.art .acts{gap:4px}}
/* ui-parity: bsfix-glass2 */
/* 1. keyword search chips (home article block, empty article search): the raised tab chip of the home bestseller tabs (.tabs .chip),
   the chosen one pressed in light blue. Same declarations as the tab chip above, so the two stay one look. */
.kw .chip,.LA .empty .chiprow .chip{border:1px solid #f1f5f7!important;border-radius:.6em!important;background:#fff!important;color:#090909!important;padding:.55em 1.3em!important;
  box-shadow:6px 6px 12px #d3dde2,-6px -6px 12px #ffffff!important;transition:all .3s!important}
.kw .chip:active,.kw .chip[aria-pressed="true"],.LA .empty .chiprow .chip:active,.LA .empty .chiprow .chip[aria-pressed="true"]{background:rgb(197,215,225)!important;color:rgb(15,47,56)!important;box-shadow:inset 4px 4px 10px #d3dde2,inset -4px -4px 10px #ffffff!important}
.hB .kw{gap:14px;padding-block:10px 14px}

/* 2. category tag over an article title (article cards, featured article, article page, home article block): the static label glass
   of .tl / .pricepill above (same fill, shadow and rim), ink rgb(15,47,56), no animation. .cat.cat outranks .hB .cat. */
.cat.cat{position:relative;isolation:isolate;border:0;color:rgb(15,47,56);
  background:linear-gradient(-75deg,rgba(255,255,255,.35),rgba(255,255,255,.6),rgba(255,255,255,.35));
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  box-shadow:inset 0 .125em .125em rgba(0,0,0,.05),inset 0 -.125em .125em rgba(255,255,255,.5),0 .25em .125em -.125em rgba(0,0,0,.2),0 0 .1em .25em inset rgba(255,255,255,.2),0 .35em .6em -.3em rgba(0,0,0,.18)}
.cat::after{content:"";position:absolute;inset:-.5px;border-radius:inherit;padding:1px;box-sizing:border-box;pointer-events:none;z-index:1;
  background:conic-gradient(from var(--gl-a1) at 50% 50%,rgba(0,0,0,.5),rgba(0,0,0,0) 5% 40%,rgba(0,0,0,.5) 50%,rgba(0,0,0,0) 60% 95%,rgba(0,0,0,.5)),linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.5));
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;-webkit-mask-composite:xor}

/* 4. the LINE button: the cart-button glass (.atc above: glass fill, turning conic rim, travelling shine), instead of the flat
   --atc pill. The doubled class and !important beat the !important --atc fill earlier in this sheet. LINE logo and label stay.
   The order-status help card's pill carries .help-line so it gets the same glass. */
:is(.site-foot,.help-line) .ft-line.ft-line{--gl-ease:cubic-bezier(.25,1,.5,1);position:relative;isolation:isolate;border:0!important;color:rgb(15,47,56)!important;
  background:linear-gradient(-75deg,rgba(255,255,255,.05),rgba(255,255,255,.2),rgba(255,255,255,.05))!important;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  box-shadow:inset 0 .125em .125em rgba(0,0,0,.05),inset 0 -.125em .125em rgba(255,255,255,.5),0 .25em .125em -.125em rgba(0,0,0,.2),0 0 .1em .25em inset rgba(255,255,255,.2),0 .5em 1em -.5em rgba(0,0,0,.22);
  transition:transform .4s var(--gl-ease),box-shadow .4s var(--gl-ease)}
:is(.site-foot,.help-line) .ft-line::before{content:"";position:absolute;inset:1px;border-radius:inherit;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(-45deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.5) 40% 50%,rgba(255,255,255,0) 55%) 0% 50%/200% 200% no-repeat;transition:background-position .5s var(--gl-ease)}
:is(.site-foot,.help-line) .ft-line::after{content:"";position:absolute;inset:-.5px;border-radius:inherit;padding:1px;box-sizing:border-box;pointer-events:none;z-index:1;
  background:conic-gradient(from var(--gl-a1) at 50% 50%,rgba(0,0,0,.5),rgba(0,0,0,0) 5% 40%,rgba(0,0,0,.5) 50%,rgba(0,0,0,0) 60% 95%,rgba(0,0,0,.5)),linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.5));
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;-webkit-mask-composite:xor;transition:--gl-a1 .5s ease}
:is(.site-foot,.help-line) .ft-line>*{position:relative;z-index:2}
:is(.site-foot,.help-line) .ft-line:hover,:is(.site-foot,.help-line) .ft-line:focus-visible{transform:scale(.975);
  box-shadow:inset 0 .125em .125em rgba(0,0,0,.05),inset 0 -.125em .125em rgba(255,255,255,.5),0 .15em .05em -.1em rgba(0,0,0,.25),0 0 .05em .1em inset rgba(255,255,255,.5),0 .35em .7em -.4em rgba(0,0,0,.22)}
:is(.site-foot,.help-line) .ft-line:hover::before,:is(.site-foot,.help-line) .ft-line:focus-visible::before{background-position:25% 50%}
:is(.site-foot,.help-line) .ft-line:hover::after,:is(.site-foot,.help-line) .ft-line:focus-visible::after{--gl-a1:-125deg}
:is(.site-foot,.help-line) .ft-line:active{transform:scale(.96)}
@media (prefers-reduced-motion:reduce){:is(.site-foot,.help-line) .ft-line,:is(.site-foot,.help-line) .ft-line::before,:is(.site-foot,.help-line) .ft-line::after{transition:none}}
.ipre{display:inline-block;align-self:flex-start;margin-top:4px;padding:1px 8px;border-radius:999px;background:var(--wash);color:var(--wash-ink);font-size:.75rem;font-weight:500}

/* ui-parity: bsui-all — `/collections/all`, design C "ชั้นวางตามหมวด"
   (.ref/collection-all/collection-all-3.html?d=C). The shelf index: the category tiles and their
   arrows, the sticky bar (tabs, search, the filter button), the shelves with their own arrows and
   ดูทั้งหมด, the brand chips, and the size panel a multi-size card opens. Everything is scoped to
   `.bs-all`, which only this page renders, so no other page's rules move; the drawer reuses the
   search page's sheet and only gains the desktop side panel. */
.bs-all .knum{font-variant-numeric:tabular-nums}
/* the static's own glass: a white gradient with an inset highlight and a soft drop, where the
   store's `--glass-bg` is a flat 46% white. Scoped here so no other page's glass moves. */
.bs-all{--gl:linear-gradient(-75deg,rgba(255,255,255,.38),rgba(255,255,255,.74),rgba(255,255,255,.38));
  --gl-sh:inset 0 1px 1px rgba(255,255,255,.95),inset 0 -1px 1px rgba(18,51,61,.07),0 0 0 1px rgba(18,51,61,.11),5px 6px 5px -2px rgba(16,22,34,.13)}
/* the static's `.kh1`, not the shared `.ph1`'s fixed 32px: this H1 grows with the viewport. */
.bs-all .ph1{font-size:clamp(1.625rem,3vw,2.25rem);line-height:1.3}
.bs-all .ph1 small{font:400 .9375rem/1 var(--body);color:var(--mute);margin-left:12px;letter-spacing:0}

/* the head: the H1 with the catalogue's own count, and the tiles' two arrows */
.bs-all .chead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:12px 0 18px}
.bs-all .ctnav{display:flex;gap:8px}
.bs-all .cnavb{width:44px;height:44px;border:0;border-radius:50%;display:grid;place-items:center;color:var(--ink);background:var(--gl);box-shadow:var(--gl-sh);transition:background .2s var(--ease)}
.bs-all .cnavb:hover{background:var(--wash)}
.bs-all .cnavb:disabled{opacity:.3;cursor:default;background:var(--gl)}

/* a category page's head (P'Ek 2026-10-14): the category's own picture is the panel's background,
   fading in from the left into the photos' own backdrop (`--mist`); no art = the plain panel. The
   intro is a quote box (Intimo's TL;DR) on glass over it: question 600 18px, then the answer. */
.bs-all .chero{position:relative;isolation:isolate;overflow:hidden;margin:16px 0 8px;padding:4px clamp(20px,3.4vw,44px) clamp(24px,3vw,40px);min-height:380px;border-radius:26px;background:var(--mist)}
.bs-all .chero.noimg{min-height:0}
.bs-all .chero-img{position:absolute;z-index:-1;top:0;right:0;width:62%;height:100%;object-fit:cover;object-position:50% 22%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);mask-image:linear-gradient(90deg,transparent,#000 40%)}
/* `--soft` crumbs and the `--mute` count are too faint on the aqua (< 4.5:1) */
.bs-all .chero .crumbs,.bs-all .chero .ph1 small{color:#1F4954}
.bs-all .chero .crumbs b{color:var(--ink)}
.bs-all .chero .ph1{max-width:min(100%,26ch);margin:6px 0 20px}
.bs-all .chero .cintro{position:relative;max-width:min(100%,62ch);margin:0;padding:22px 26px 24px 34px;border-radius:26px;background:var(--gl);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:var(--gl-sh)}
.bs-all .chero .cintro::before{content:"";position:absolute;left:16px;top:24px;bottom:24px;width:4px;border-radius:4px;background:var(--ink)}
.bs-all .chero .cintro h2{font:600 1.125rem/1.5 var(--head);color:var(--ink);margin:0 0 8px}
@media (max-width:700px){
  /* the picture becomes a band across the top, fading down into the panel; the crumbs start where
     it has faded out, so no words sit on hair or skin */
  .bs-all .chero{min-height:0;padding-top:236px}
  .bs-all .chero.noimg{padding-top:4px}
  .bs-all .chero-img{width:100%;height:270px;object-position:50% 20%;-webkit-mask-image:linear-gradient(180deg,#000 45%,transparent);mask-image:linear-gradient(180deg,#000 45%,transparent)}
  .bs-all .chero .cintro{padding:18px 18px 20px 28px}
  .bs-all .chero .cintro::before{left:13px;top:20px;bottom:20px}
}

/* the tiles (`/all` only): one per category, sideways, with the plain panel when a category has no art */
.bs-all .ctiles{display:grid;grid-auto-flow:column;grid-auto-columns:168px;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px 2px 14px}
.bs-all .ctiles::-webkit-scrollbar,.bs-all .ctabs::-webkit-scrollbar,.bs-all .srow::-webkit-scrollbar,.bs-all .cbrands::-webkit-scrollbar{display:none}
.bs-all .ctile{position:relative;scroll-snap-align:start;aspect-ratio:4/5;border:0;padding:0;border-radius:22px;overflow:hidden;cursor:pointer;background:var(--mist);text-align:left;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.bs-all .ctile img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;transition:transform .6s var(--ease)}
.bs-all .ctile:hover{transform:translateY(-4px);box-shadow:0 16px 30px -14px rgba(18,51,61,.45)}
.bs-all .ctile:hover img{transform:scale(1.04)}
.bs-all .ctile .lab{position:absolute;left:8px;right:8px;bottom:8px;padding:8px 12px;border-radius:36px;background:var(--gl);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:var(--gl-sh);display:flex;flex-direction:column;line-height:1.3}
.bs-all .ctile .lab b{font:500 .875rem/1.35 var(--head);color:#12333D;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bs-all .ctile .lab span{font:400 .75rem/1.3 var(--body);color:#1F4954}
/* the current tile */
.bs-all .ctile[aria-pressed="true"]{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--ink)}
/* the static's `--sel`: the picked tile's pill goes dark and its words white */
.bs-all .ctile[aria-pressed="true"] .lab{background:rgba(18,51,61,.88)}
.bs-all .ctile[aria-pressed="true"] .lab b,.bs-all .ctile[aria-pressed="true"] .lab span{color:#fff}

/* the bar: it stays under the site header while the shelves scroll past */
.bs-all .cbar{position:sticky;top:var(--barh);z-index:20;margin-top:8px;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border-block:1px solid rgba(18,51,61,.08)}
.bs-all .cbar .wrap{display:flex;align-items:center;gap:12px;padding-block:10px}
.bs-all .ctabs{display:flex;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;mask-image:linear-gradient(90deg,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 94%,transparent)}
/* `inline-flex`: a category page's tab is an <a>, and a block anchor would top-align its words in
   the 44px box where /all's <button> centres them, so the label and its underline miss the row */
.bs-all .ctab{position:relative;flex:none;display:inline-flex;align-items:center;height:44px;padding:0 12px;font:500 .90625rem/1.5 var(--head);color:var(--mute);white-space:nowrap}
.bs-all .ctab b{font:400 .75rem/1 var(--body);margin-left:4px;font-variant-numeric:tabular-nums}
.bs-all .ctab::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
/* the active tab, `[aria-pressed]` on /all's button and `[aria-current]` on a category's link */
.bs-all .ctab[aria-pressed="true"],.bs-all .ctab[aria-current="page"]{color:var(--ink)}
.bs-all .ctab[aria-pressed="true"]::after,.bs-all .ctab[aria-current="page"]::after{transform:none}
.bs-all .ctab:hover{color:var(--ink)}
.bs-all .cbar .xsearch{width:240px;flex:none}
/* the static's `.kc`: the filter button is a 40px glass pill, not the shared chip's flat outline */
.bs-all .cfilb{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:40px;padding:0 16px;border:0;background:var(--gl);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.bs-all .cfilb .i{width:18px;height:18px}
/* the static's `.kc` count: a muted number on the pill, not the store's dark badge */
.bs-all .cfilb .badge-n{background:none;color:var(--mute)}
/* the store's `.chip` forces its own drop with `!important` (`bs-shop.css:778`), so the static's
   glass shadow has to match it or the ring and the top highlight never land */
.bs-all .cfilb,.bs-all .cbrands .chip,.bs-all .lempty .chip{box-shadow:var(--gl-sh)!important}
/* the bar's own search field: the static's lighter, slightly thicker ring */
.bs-all .cbar .xsearch input{height:44px;border:1.5px solid #D6E2E8}

/* the chosen category's brands, and the grid's own count and sort row */
.bs-all .cbrands{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:4px 2px 10px;margin:14px 0 6px}
.bs-all .cbrands .lbl{flex:none;align-self:center;font:500 .84375rem/1.5 var(--head);color:var(--mute);margin-right:4px}
.bs-all .cbrands .chip{display:inline-flex;align-items:center;flex:none;min-height:40px;padding:0 16px;border:0;background:var(--gl);cursor:pointer}
/* the static's `--sel`: the picked brand chip goes dark, as the picked tile does */
.bs-all .cbrands .chip[aria-pressed="true"]{background:rgba(18,51,61,.88)!important;border-color:transparent!important;color:#fff!important}
.bs-all .cbrands .chip b{font-weight:400;font-size:.75rem;margin-left:4px;font-variant-numeric:tabular-nums;opacity:.7}
.bs-all .cmain{padding-block:18px 80px}
.bs-all .ctool{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.bs-all .ctool .acount{font:500 .9375rem/1.5 var(--head);color:var(--ink)}
.bs-all .fsec .sort{width:100%;height:44px}

/* the empty state is the static's `.kempty` (an aqua wash), not the shared cream `.lempty` */
.bs-all .lempty{padding:56px 24px;border:0;border-radius:26px;background:rgba(228,244,247,.6)}
.bs-all .lempty b{font:500 1.375rem/1.4 var(--head);color:var(--ink);margin-bottom:8px}
.bs-all .lempty span{font:400 .9375rem/1.65 var(--body);color:var(--mute);margin-bottom:20px}
/* the rescues and the clear sit in one wrapping centred row, the static's `.kchips` */
.bs-all .lempty .echips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
.bs-all .lempty .chip{min-height:40px;padding:0 16px;border:0;background:var(--gl);font:500 .875rem/1.5 var(--head)}

/* the shelves */
.bs-all .shelf{padding:26px 0 8px;border-top:1px solid var(--rule)}
.bs-all .shelf:first-child{border-top:0;padding-top:6px}
.bs-all .shelf header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.bs-all .shelf h2{font:500 1.375rem/1.4 var(--head);color:var(--ink);margin:0}
.bs-all .shelf h2 small{font:400 .875rem/1 var(--body);color:var(--mute);margin-left:10px}
.bs-all .shelf .sr{display:flex;align-items:center;gap:8px}
.bs-all .shelf .sall{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 6px 0 14px;border-radius:36px;font:500 .90625rem/1.5 var(--head);color:var(--ink)}
.bs-all .shelf .sall:hover{background:var(--wash)}
.bs-all .shelf .sall .i{width:18px;height:18px}
.bs-all .srow{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 60px)/4.35);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 4px 24px;margin:0 -4px}
.bs-all .srow>.card{scroll-snap-align:start}

/* the size panel a multi-size card opens: inside the card, so a shelf's rail never clips it */
.bs-all .card{position:relative}
.bs-all .sizepanel{position:absolute;left:8px;right:8px;bottom:8px;z-index:5;border-radius:18px;padding:10px;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(10px) saturate(1.6);backdrop-filter:blur(10px) saturate(1.6);box-shadow:0 0 0 1px rgba(18,51,61,.12),0 18px 36px -12px rgba(18,51,61,.35);animation:bs-all-up .28s var(--ease)}
@keyframes bs-all-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.bs-all .sizepanel header{display:flex;justify-content:space-between;align-items:center;font:500 .84375rem/1.4 var(--head);color:var(--ink);padding:0 2px 6px}
.bs-all .sizepanel .sizex{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--ink)}
.bs-all .sizepanel .sizex:hover{background:var(--wash)}
.bs-all .sizepanel ul{list-style:none;margin:0;padding:0;max-height:178px;overflow:auto}
.bs-all .sizepanel li button{display:flex;justify-content:space-between;gap:10px;width:100%;min-height:40px;padding:6px 10px;border-radius:12px;text-align:left;font:400 .84375rem/1.4 var(--body);color:var(--text)}
.bs-all .sizepanel li button:hover{background:var(--wash)}
.bs-all .sizepanel li button b{font:500 .84375rem/1.4 var(--head);color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.bs-all .sizepanel li button:disabled{opacity:.45;cursor:default;background:none}

/* the drawer's own chrome: the static rules its header off and leaves the close button bare */
.bs-all .shh{border-bottom:1px solid var(--rule)}
.bs-all .shx{background:none}
.bs-all .shx:hover{background:var(--wash)}

/* the drawer on a desktop: the same sheet, hung on the right like the static's `.ksheet.side` */
@media (min-width:901px){
  .bs-all .fsheet{left:auto;top:10px;right:10px;bottom:10px;width:420px;max-height:none;border-radius:26px;transform:translateX(110%)}
  .bs-all .fsheet.on{transform:none}
  /* a side panel has no top edge to grab: the static hides its handle on `.ksheet.side` */
  .bs-all .shh::before{display:none}
}
@media (min-width:901px) and (max-width:1100px){
  .bs-all .srow{grid-auto-columns:calc((100% - 40px)/3.3)}
  /* the static's `.kgrid` is 3-up from here, where the shared `.grid` holds 4 until 900px; the
     lower bound matters, because this selector out-specifies the shared 2-up rule at ≤900px */
  .bs-all .cmain .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .bs-all .chead{padding:6px 0 12px}
  .bs-all .chead .ctnav{display:none}
  .bs-all .ctiles{grid-auto-columns:120px;gap:10px;margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px}
  .bs-all .ctile{border-radius:18px}
  .bs-all .ctile .lab{left:6px;right:6px;bottom:6px;padding:6px 10px}
  .bs-all .ctile .lab b{font-size:.8125rem}
  .bs-all .cbar .wrap{flex-wrap:wrap;gap:8px}
  .bs-all .cbar .xsearch{flex:1;width:auto;min-width:0}
  .bs-all .ctabs{order:2;flex:1 1 100%}
  .bs-all .srow{grid-auto-columns:46%;gap:12px;margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px}
  .bs-all .shelf h2{font-size:1.1875rem}
  .bs-all .shelf .sr .cnavb{display:none}
  .bs-all .cbrands{margin-inline:-16px;padding-inline:16px}
}
/* home tab chips: arrows beside the row, which a mouse wheel cannot scroll sideways (P'Ek 2026-10-14) */
.tabsrow{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.tabsrow>.tabs{flex:1;min-width:0;margin-bottom:0}
@media (max-width:720px){.tabsrow>.carcap{display:none}}

/* ===== Phone accessibility on every page (P'Ek 2026-10-14): nothing changes in normal use.
   A. Touch screens: an invisible 44px hit area round small controls whose ::after is free; the visible size stays.
      Left out: controls whose ::before/::after draw the glass (.finder .chip, .campsize, .campadd, .ft-line, card .acts/.sizepick
      .ic), controls the glass engine clips with overflow:hidden (.card .cheart, .well, .kw/.tabs/.cbrands/.chiprow chips, .cfilb),
      tightly stacked links (.ft-col a 36px apart, the brands A-Z rail, reference lists), inline links inside text, <select>,
      controls styled only by CSS modules, and /checkout (it does not load this sheet; its C rule is in checkout.module.css).
   D. Touch screens: press feedback on pointer-down. :where() keeps it at zero specificity, so any element that already sets a
      transform or a transition keeps its own. React's passive touchstart listener on the document makes iOS apply :active. */
@media (pointer:coarse){
  :is(header.bar a.logo,.sechead>a,.brands .all,.ft-bottom a,.site-foot .lang button,.card h3 a,.crumbs a,.xchip,.qty button){position:relative}
  :is(header.bar a.logo,.sechead>a,.brands .all,.ft-bottom a,.site-foot .lang button,.card h3 a,.crumbs a,.xchip,.qty button)::after{content:"";position:absolute;inset:min(0px,50% - 22px)}
  :where(button:not(:disabled),[role=button],summary,a.ib,a.logo,a.xchip,a.ctab,a.see,a.sall,a.sh,a.cta,a.col,a.feature,a.campimg,a.btn,a.btnx):active{transform:scale(.97);transition:transform .1s ease-out}
}
/* C. The visitor's "reduce transparency" / "increase contrast" setting: glass turns solid with no blur; more contrast also outlines it. */
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  /* every element; the .finder .ftile argument only lifts the specificity over the glass block's !important blur */
  :is(*,.finder .ftile){-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  :is(header.bar,.col span,span.lab,.finder .ftile,.finder .chip,.feature .float,.campcard,.campsize,.campadd,.cta .round,.cta .pill,.cat.cat,.tl,.pricepill,.cintro,.cbar,.sbar,.ltool,.mtoc,.bs-glass,.site-foot .ft-line.ft-line,.help-line .ft-line.ft-line):not([aria-checked="true"],[aria-pressed="true"],[aria-pressed="true"] .lab,.hB .feat .tl){background:#fff!important}
  :is(.finder .ftile[aria-checked="true"],.bs-all .ctile[aria-pressed="true"] .lab){background:var(--ink)!important}
  body.onhero header.bar:not(.solid):not(.open) .marquee.marquee{background:rgb(206,236,241)} /* its rgba(165,220,230,.55) over white */
}
@media (prefers-contrast:more){
  :is(.col span,span.lab,.finder .ftile,.finder .chip,.feature .float,.campsize,.campadd,.cta .round,.cta .pill,.cat.cat,.tl,.pricepill,.site-foot .ft-line.ft-line,.help-line .ft-line.ft-line,.kw .chip,.tabs .chip,.xchip):not(:focus-visible,.hB .feat .tl){outline:2px solid currentColor;outline-offset:-2px}
}