:root{--ivory:#FAF8F3;--cream:#F3EDE3;--tea:#A8B89B;--tea-d:#5E7255;--gold:#C9AA72;--red:#C8102E;--ink:#2E2820;--muted:#6F675B;--line:#E4DAC8}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;color-scheme:light}
body{font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;background:#EAE3D5;color:var(--ink);font-size:15px;line-height:1.55}
body.lock{overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.serif,h1,h2,h3.serif{font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif}
.app{max-width:480px;margin:0 auto;background:var(--ivory);min-height:100vh;padding-bottom:calc(84px + env(safe-area-inset-bottom));position:relative;overflow-x:clip;box-shadow:0 0 40px rgba(46,40,32,.08)}
section{scroll-margin-top:64px}

/* header */
.hdr{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:6px 8px 6px 16px;background:rgba(250,248,243,.93);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:inherit}
.logo .lm{height:36px;width:auto;display:block}
.logo .lw{height:34px;width:auto;display:block}
.icobtn{position:relative;width:44px;height:44px;display:grid;place-items:center;border-radius:50%}
.badge{position:absolute;top:3px;right:1px;min-width:18px;height:18px;border-radius:9px;background:var(--red);color:#fff;font-size:11px;font-weight:600;display:grid;place-items:center;padding:0 5px}
.badge:empty{display:none}

/* scenes: linen + plate drawings */
.scene{position:relative;overflow:hidden;background:
 repeating-linear-gradient(90deg,rgba(120,100,70,.05) 0 1px,transparent 1px 3px),
 repeating-linear-gradient(0deg,rgba(120,100,70,.045) 0 1px,transparent 1px 3px),
 linear-gradient(160deg,#F7F1E5,#EADFCB)}
.scene svg{display:block;width:100%;height:100%}
.demo{position:absolute;left:8px;bottom:8px;font-size:10px;font-weight:600;letter-spacing:.04em;color:var(--muted);background:rgba(250,248,243,.85);border:1px solid var(--line);border-radius:4px;padding:1px 6px;pointer-events:none}

/* hero */
.hero{position:relative}
.slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.slides::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:start;position:relative;height:min(620px,calc(100svh - 110px));min-height:540px}
.slide .scene{position:absolute;inset:0}
.slide::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60%;background:linear-gradient(to top,var(--ivory) 34%,rgba(250,248,243,0));pointer-events:none}
.copy{position:absolute;left:20px;right:20px;bottom:70px;z-index:2}
.h1{font-weight:700;font-size:clamp(36px,10.6vw,47px);line-height:1.1;letter-spacing:.005em;margin-bottom:10px}
.h1 span{display:block}
.h2{font-weight:700;font-size:clamp(34px,10vw,44px);line-height:1.08;margin-bottom:6px}
.copy p{color:var(--muted);margin-bottom:16px;max-width:30ch}
.row{display:flex;gap:10px;flex-wrap:wrap}
.seal{position:absolute;top:16px;right:16px;z-index:2;width:56px;height:56px;border-radius:50%;background:rgba(250,248,243,.95);box-shadow:0 2px 10px rgba(46,40,32,.16);display:grid;place-items:center}
.seal img{display:block;width:56%;height:auto}
.hctl{position:absolute;left:20px;right:12px;bottom:12px;z-index:3;display:flex;align-items:center;justify-content:space-between}
.dots{display:flex;gap:2px}
.dot{width:28px;height:28px;display:grid;place-items:center}
.dot i{display:block;width:18px;height:3px;border-radius:2px;background:var(--line);transition:background .2s,width .2s}
.dot[aria-current="true"] i{background:var(--ink);width:26px}
.hbtns{display:flex}
.hbtns button{width:40px;height:40px;display:grid;place-items:center;border-radius:50%}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border-radius:999px;background:var(--ink);color:var(--ivory);font-weight:500;font-size:14px}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn.sm{min-height:40px;padding:0 12px;width:100%;font-size:13px}
.btn.block{width:100%}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.link{text-decoration:underline;text-underline-offset:3px;color:var(--ink)}

/* sections */
.sec{padding:44px 20px 4px}
.sec h2{font-size:32px;line-height:1.1;font-weight:700;margin-bottom:10px}
.sec>p.lead{color:var(--muted);max-width:44ch}
.steps{display:flex;align-items:center;gap:0;margin-top:22px}
.steps div{flex:1;text-align:center;font-size:13px;font-weight:500}
.steps div b{display:grid;place-items:center;width:34px;height:34px;margin:0 auto 6px;border-radius:50%;background:var(--cream);box-shadow:inset 0 0 0 1px var(--gold);font-family:'Cormorant Garamond',Georgia,serif;font-size:18px}
.steps hr{flex:0 0 22px;border:0;border-top:1px solid var(--gold);margin:-20px 0 0}

.hscroll{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:18px -20px 0;padding:0 20px 6px;scrollbar-width:none}
.hscroll::-webkit-scrollbar{display:none}
.fl{flex:0 0 68%;scroll-snap-align:start;text-align:left}
.fl .scene{aspect-ratio:4/5;border-radius:14px}
.fl h3{font-family:'Cormorant Garamond',Georgia,serif;font-size:24px;font-weight:700;margin-top:10px;line-height:1.1}
.fl p{font-size:13px;color:var(--muted)}

.ctl{margin-top:16px;display:grid;gap:10px}
.search{display:flex;align-items:center;gap:8px;height:46px;padding:0 14px;border-radius:999px;background:var(--cream);box-shadow:inset 0 0 0 1px var(--line)}
.search input{flex:1;border:0;background:transparent;outline:none;min-width:0;height:100%}
.search:focus-within{box-shadow:inset 0 0 0 2px var(--ink)}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:0 20px}
.chips::-webkit-scrollbar{display:none}
.ing{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0 14px}
.ing button{display:grid;justify-items:center;gap:6px;padding:12px 4px 10px;border-radius:16px;background:var(--cream);box-shadow:inset 0 0 0 1px var(--line);font-size:12.5px;line-height:1.25;text-align:center}
.ing svg,.seg svg{display:block;width:42px;height:42px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 16px}
.seg button{display:grid;justify-items:center;align-content:start;gap:5px;padding:10px 4px;border-radius:14px;background:var(--ivory);box-shadow:inset 0 0 0 1px var(--line);font-size:12px;line-height:1.25;text-align:center}
.seg button[aria-pressed="true"]{background:var(--tea);box-shadow:inset 0 0 0 2px var(--ink);font-weight:600}
.band .seg button{background:rgba(250,248,243,.7)}
.pg h3{font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;font-size:25px;line-height:1.15;font-weight:700;margin:24px 0 6px}
.pg p{color:var(--muted);margin-bottom:8px;max-width:46ch}
.pg .brandrow{display:flex;align-items:center;gap:12px;margin:8px 0 4px}
.pg .brandrow img{width:54px;height:auto;display:block}
.stp{display:grid;gap:12px;margin:12px 0}
.stp div{display:flex;gap:12px;align-items:flex-start}
.stp b{flex:none;width:30px;height:30px;border-radius:50%;background:var(--cream);box-shadow:inset 0 0 0 1px var(--gold);display:grid;place-items:center;font-family:'Cormorant Garamond',Georgia,serif;font-size:17px}
.stp span{color:var(--ink);font-size:14.5px;padding-top:3px}
.photo{aspect-ratio:16/10;border-radius:14px;border:1.5px dashed var(--gold);background:var(--cream);display:grid;place-items:center;text-align:center;color:var(--muted);font-size:13px;padding:12px;margin:8px 0}
.opts{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 14px}
.lbl{font-size:13px;font-weight:500;margin-top:4px}
.chips.tiles{gap:6px;padding-bottom:4px}
.qchips.tiles{display:flex;justify-content:space-between;gap:4px;margin-bottom:10px}
.qchips .tile{min-width:72px;max-width:88px;white-space:normal}
.m .mi{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ivory);box-shadow:inset 0 0 0 1px var(--line);vertical-align:middle;margin-right:8px}
.m .mi svg{display:block;width:30px;height:30px}
.tile{flex:none;min-width:76px;display:grid;justify-items:center;gap:5px;font-size:12px;line-height:1.25;text-align:center;white-space:nowrap;color:var(--ink)}
.tile .ti{width:58px;height:58px;border-radius:50%;background:var(--cream);box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center;transition:background .2s}
.tile .ti svg{display:block;width:42px;height:42px}
.tile[aria-pressed="true"]{font-weight:600}
.tile[aria-pressed="true"] .ti{background:var(--tea);box-shadow:0 0 0 2px var(--ink)}
.chip,.pill{flex:none;height:36px;padding:0 14px;border-radius:999px;font-size:13px;box-shadow:inset 0 0 0 1px var(--line);background:var(--ivory);white-space:nowrap}
.chip[aria-pressed="true"],.pill.on{background:var(--tea);box-shadow:none;font-weight:600}
.sortrow{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted)}
.sortrow select{height:36px;border:0;border-radius:999px;background:var(--cream);padding:0 10px;box-shadow:inset 0 0 0 1px var(--line)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 12px;margin-top:16px}
.card h3{font-size:14px;font-weight:600;line-height:1.3;margin:10px 0 2px}
.card h3 button{text-align:left}
.meta{font-size:12px;color:var(--muted)}
.price{font-weight:600;margin:2px 0 10px}
.pimg{position:relative;border-radius:14px;overflow:hidden}
.pimg .scene{aspect-ratio:1;border-radius:14px}
.imgbtn{display:block;width:100%}
.fav{position:absolute;top:4px;right:4px;width:40px;height:40px;display:grid;place-items:center;color:var(--ink)}
.fav svg{fill:rgba(250,248,243,.6)}
.fav.on{color:var(--red)}
.fav.on svg{fill:var(--red)}
.empty{grid-column:1/-1;text-align:center;padding:36px 8px;color:var(--muted)}
.empty .btn{margin-top:14px}
.fine{font-size:12px;color:var(--muted);margin-top:16px}

.video{position:relative;margin-top:18px;border-radius:14px;overflow:hidden;width:100%;display:block}
.video .scene{aspect-ratio:16/10}
.play{position:absolute;inset:0;display:grid;place-items:center}
.play span{width:64px;height:64px;border-radius:50%;background:rgba(250,248,243,.92);display:grid;place-items:center;color:var(--ink)}

.combo{display:grid;gap:12px;margin-top:18px}
.cb{display:flex;gap:14px;align-items:center;padding:12px;border-radius:14px;background:var(--cream)}
.cb .scene{flex:0 0 92px;height:92px;border-radius:10px}
.cb h3{font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;line-height:1.1;font-weight:700}
.cb p{font-size:12px;color:var(--muted);margin:2px 0 8px}

.band{margin:48px 20px 0;padding:26px 20px;border-radius:16px;background:var(--tea);color:#26301F}
.band h2{font-size:30px;line-height:1.1;font-weight:700;margin-bottom:8px}
.band p{margin-bottom:16px;max-width:38ch}
.band .btn{background:var(--ink)}

footer{margin-top:52px;padding:30px 20px 20px;background:var(--cream)}
footer .logo .lm{height:46px}
footer .logo .lw{height:44px}
footer nav{display:flex;flex-wrap:wrap;gap:6px 20px;margin:14px 0}
footer nav button{min-height:36px;text-decoration:underline;text-underline-offset:3px}
footer p{font-size:12px;color:var(--muted);margin-top:6px}

/* bottom nav */
.bnav{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:min(100%,480px);z-index:40;display:grid;grid-template-columns:repeat(5,1fr);background:rgba(250,248,243,.97);border-top:1px solid var(--line);padding:4px 0 env(safe-area-inset-bottom);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.bnav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:58px;font-size:11px;color:var(--muted)}
.bnav button[aria-current="page"]{color:var(--ink);font-weight:600}
.bnav button[aria-current="page"] svg{stroke:var(--red)}

/* popup + assistant + toast */
.popup{position:fixed;left:50%;bottom:calc(72px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(calc(100% - 24px),456px);z-index:30;display:none;overflow:hidden;background:var(--cream);border:1px solid var(--line);border-radius:18px;box-shadow:0 10px 32px rgba(46,40,32,.2)}
.popup.show{display:block;animation:pop .3s ease-out}
details.acc{border-top:1px solid var(--line)}
details.acc>summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;font-weight:600;cursor:pointer;list-style:none}
details.acc>summary::-webkit-details-marker{display:none}
details.acc>summary::after{content:"+";font-size:20px;font-weight:400;color:var(--muted)}
details.acc[open]>summary::after{content:"–"}
details.acc .accb{padding:0 0 12px;color:var(--muted);font-size:14px}
details.acc .accb p{margin-bottom:6px}
details.acc details.acc{border-top:1px dashed var(--line)}
details.acc details.acc>summary{font-weight:500;font-size:14px;min-height:42px}
.cpn{display:flex;gap:8px;margin-top:14px}
.cpn input{flex:1;min-width:0;height:46px;padding:0 14px;border-radius:999px;border:0;background:var(--cream);box-shadow:inset 0 0 0 1px var(--line);text-transform:uppercase}
.cpnon{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding:10px 14px;border-radius:12px;background:var(--cream);font-size:13px}
.sum.total{font-weight:700;font-size:16px}
.pol h3{font-family:'Cormorant Garamond',Georgia,serif;font-size:21px;font-weight:700;margin:18px 0 2px}
.pol p{color:var(--muted);font-size:14px}
.pol .pend{font-style:italic}
.legal{display:flex;flex-wrap:wrap;gap:4px 18px;margin:6px 0 8px}
.legal button{min-height:36px;font-size:12.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.pbanner{position:relative;height:clamp(150px,27svh,230px);overflow:hidden;touch-action:pan-y}
.fl.bl .scene{aspect-ratio:4/3}
.scene img.real{display:block;width:100%;height:100%;object-fit:cover}
.wp-mode .demo,.wp-mode .demo-only{display:none!important}
.consent{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(72px + env(safe-area-inset-bottom));width:min(calc(100% - 24px),456px);z-index:33;background:var(--ivory);border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 26px rgba(46,40,32,.2);padding:14px}
.consent[hidden]{display:none}
.consent p{font-size:13px;margin-bottom:10px}
.consent .btn{min-height:42px;flex:1}
body.lock .consent{display:none}
body.consent-on .ai{bottom:calc(84px + var(--consent-h,170px) + env(safe-area-inset-bottom))}
.xs{margin-top:16px;border-top:1px solid var(--line);padding-top:8px}
.xs .lbl{margin-top:4px}
.shipbar{margin-top:14px;font-size:12.5px;color:var(--muted)}
.shipbar .bar{height:6px;border-radius:3px;background:var(--cream);overflow:hidden;margin-bottom:6px;box-shadow:inset 0 0 0 1px var(--line)}
.shipbar .bar i{display:block;height:100%;background:var(--tea)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ok{background:var(--tea);padding:10px 12px;border-radius:12px;font-size:14px;margin-top:10px}
.remind{margin-top:14px}
.remind.on{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:12px;background:var(--cream);font-size:13px}
.remind.on .link{flex:none}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:13px;margin:4px 0 12px;cursor:pointer}
.chk input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--ink)}
.sph{margin:10px 0}
.sph img{display:block;width:100%;height:auto;border-radius:14px}
.sph figcaption{font-size:12.5px;color:var(--muted);margin-top:4px}
.pplay{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.pplay svg{width:44px;height:44px;filter:drop-shadow(0 2px 6px rgba(46,40,32,.35))}
.plist{display:grid;gap:12px;margin-top:12px}
.pcard{display:flex;gap:12px;text-align:left;align-items:flex-start;color:var(--ink);width:100%}
.pcard .pc{position:relative;flex:0 0 112px}
.pcard .pc .scene{height:84px;border-radius:12px}
.pcard b{display:block;font-size:14.5px;line-height:1.3}
.pcard small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--muted);font-size:12.5px;margin-top:3px}
.pcard .tag{display:block;font-size:11.5px;color:var(--muted);margin-top:3px}
.cover{position:relative;border-radius:14px;overflow:hidden;margin:6px 0 10px}
.cover .scene{aspect-ratio:4/3}
.art h2{font-family:'Cormorant Garamond',Georgia,serif;font-size:30px;line-height:1.12;font-weight:700;margin:6px 0 4px}
.art .meta2{font-size:12.5px;color:var(--muted)}
.vph{aspect-ratio:16/9;border-radius:14px;border:1.5px dashed var(--gold);background:var(--cream);display:grid;place-items:center;text-align:center;color:var(--muted);font-size:13px;padding:12px;margin:12px 0}
.art video{width:100%;border-radius:14px;margin:12px 0;background:#000}
.art .grow{border-top:1px solid var(--line)}
.ptrack{display:flex;height:100%;transition:transform .6s cubic-bezier(.65,0,.35,1)}
.ptrack .scene{flex:0 0 100%;height:100%}
.pdots{position:absolute;left:0;right:0;bottom:2px;display:flex;justify-content:center}
.pdots button{width:32px;height:28px;display:grid;place-items:center}
.pdots i{display:block;width:18px;height:3px;border-radius:2px;background:rgba(46,40,32,.25);transition:background .2s,width .2s}
.pdots button[aria-current="true"] i{background:var(--ink);width:26px}
.popup .x{position:absolute;top:8px;right:8px;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:rgba(250,248,243,.92);z-index:2}
.pbody{padding:14px 16px 10px;display:grid;gap:4px}
.pbody b{font-size:22px;line-height:1.15;font-weight:700;min-height:2.3em;display:flex;align-items:center;text-wrap:balance}
.pbody p{color:var(--muted);font-size:14px;margin-bottom:8px;min-height:3.1em}
.pbody .btn{min-height:48px}
.pbody .link{justify-self:center;min-height:40px;font-size:13px;color:var(--muted)}
.ai{position:fixed;z-index:31;right:max(12px,calc(50% - 228px));bottom:calc(76px + env(safe-area-inset-bottom));height:56px;padding:4px 16px 4px 4px;border-radius:999px;background:var(--ivory);color:var(--ink);display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;box-shadow:0 6px 18px rgba(46,40,32,.22),inset 0 0 0 1px var(--line)}
body.popup-on .ai{bottom:calc(72px + var(--pop-h,300px) + 12px + env(safe-area-inset-bottom))}
.mascot{display:block;flex:none;width:44px;height:44px;border-radius:50%;overflow:hidden;background:#FFEFD0;border:2.5px solid var(--red)}
.mascot svg{display:block;width:100%;height:100%}
.ai .mascot{width:48px;height:48px}
.mascot.lg{width:clamp(64px,11svh,92px);height:clamp(64px,11svh,92px);margin:4px auto 10px;animation:hi .6s ease-out}
@keyframes hi{from{transform:scale(.7) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}
.hi{text-align:center}
@keyframes pop{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}
body.lock .popup,body.lock .ai{display:none}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(88px + env(safe-area-inset-bottom));z-index:60;display:none;align-items:center;gap:14px;padding:10px 14px;border-radius:12px;background:var(--ink);color:var(--ivory);font-size:13px;max-width:calc(100% - 24px)}
.toast.show{display:flex}
.toast button{text-decoration:underline;font-weight:600;white-space:nowrap}

/* sheet */
.sheet{position:fixed;inset:0;z-index:50;display:none}
.sheet.open{display:block}
.sheet .bd{position:absolute;inset:0;background:rgba(46,40,32,.45)}
.panel{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,480px);max-height:92svh;display:flex;flex-direction:column;background:var(--ivory);border-radius:20px 20px 0 0;animation:up .22s ease-out}
@keyframes up{from{transform:translate(-50%,24px);opacity:.5}to{transform:translate(-50%,0);opacity:1}}
.ph{display:flex;align-items:center;justify-content:space-between;padding:10px 8px 4px 20px}
.ph h2{font-size:28px;font-weight:700;line-height:1.1}
.pb{overflow:auto;padding:6px 20px 20px;flex:1;overscroll-behavior:contain}
.pf{padding:12px 20px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.pf[hidden]{display:none}
.qv .scene{aspect-ratio:1;border-radius:14px}
.qv .price{font-size:20px;margin:12px 0 4px}
.qv dl{margin:14px 0;font-size:14px}
.qv dt{font-weight:600;margin-top:8px}
.qv dd{color:var(--muted)}
.stepper{display:inline-flex;align-items:center;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line)}
.stepper button{width:40px;height:40px;display:grid;place-items:center;border-radius:50%}
.stepper button[disabled]{opacity:.3}
.stepper span{min-width:28px;text-align:center;font-weight:600}
.rel{display:flex;gap:10px;margin-top:8px}
.rel button{flex:1;text-align:left}
.rel .scene{aspect-ratio:1;border-radius:10px;margin-bottom:4px}
.rel small{font-size:12px}
.crow{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.cth{flex:0 0 68px;height:68px;border-radius:10px;overflow:hidden}
.cth .scene{width:100%;height:100%}
.cmeta{flex:1;min-width:0}
.cmeta b{display:block;font-size:14px}
.cmeta small{display:block;color:var(--muted);font-size:12px;margin:2px 0 6px;overflow-wrap:anywhere}
.cline{display:flex;align-items:center;justify-content:space-between}
.sum{display:flex;justify-content:space-between;font-weight:600;font-size:17px;margin-bottom:4px}
.note{font-size:12px;color:var(--muted);margin:4px 0 10px}
.warn{margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--cream);font-size:13px}
.err{color:var(--red);font-size:12px;margin-top:2px}
.grow{display:flex;align-items:center;gap:12px;padding:8px 0}
.grow .scene{flex:0 0 52px;height:52px;border-radius:10px}
.grow div.t{flex:1;font-size:14px;line-height:1.3}
.grow small{display:block;color:var(--muted);font-size:12px}
.prog{height:6px;border-radius:3px;background:var(--cream);overflow:hidden;margin:6px 0 4px}
.prog i{display:block;height:100%;background:var(--tea-d);transition:width .2s}
.boxprev svg{width:100%;display:block;border-radius:12px}
.boxopts{display:flex;gap:8px;margin:12px 0}
.field{display:grid;gap:4px;margin-bottom:12px;font-size:13px;font-weight:500}
.field input,.field select,.field textarea{width:100%;min-height:46px;padding:10px 12px;border-radius:12px;border:0;background:var(--cream);box-shadow:inset 0 0 0 1px var(--line);font-weight:400;font-size:15px}
.field textarea{min-height:80px;resize:vertical}
.demo-note{font-size:12px;color:var(--muted);background:var(--cream);padding:8px 10px;border-radius:10px;margin-bottom:10px}
.langs{display:flex;gap:6px;overflow-x:auto;margin-bottom:10px}
.msgs{display:grid;gap:8px;align-content:start}
.m{max-width:86%;padding:9px 12px;border-radius:14px;font-size:14px;line-height:1.5}
.m.bot{background:var(--cream);justify-self:start;border-bottom-left-radius:4px}
.m.me{background:var(--ink);color:var(--ivory);justify-self:end;border-bottom-right-radius:4px}
.qchips{display:flex;gap:6px;overflow-x:auto;margin-bottom:8px;scrollbar-width:none}
.cform{display:flex;gap:8px}
.cform input{flex:1;min-width:0;height:46px;padding:0 14px;border-radius:999px;border:0;background:var(--cream);box-shadow:inset 0 0 0 1px var(--line)}
.cform .btn{padding:0 16px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* ===== V19 ===== */
/* language picker: small card under the header, no backdrop */
.langpop{position:fixed;z-index:34;left:50%;top:calc(var(--hdr-h,57px) + 8px);transform:translate(-50%,-6px);width:min(calc(100% - 24px),456px);background:var(--ivory);border:1px solid rgba(201,170,114,.6);border-radius:16px;box-shadow:0 10px 28px rgba(46,40,32,.16);padding:12px;opacity:0;transition:opacity .2s ease-out,transform .2s ease-out}
.langpop.in{opacity:1;transform:translate(-50%,0)}
.langpop[hidden]{display:none}
.langpop:focus,.langpop:focus-visible{outline:none}
.lp-head{display:flex;align-items:center;gap:10px;min-height:32px;padding-right:40px;margin-bottom:8px}
.lp-logo{width:26px;height:auto;flex:none;display:block}
#langTitle{display:flex;flex-direction:column;line-height:1.2;font-size:14px}
#langTitle b{font-weight:600}
#langTitle span{font-size:12.5px;color:var(--muted)}
.langpop .x{position:absolute;top:6px;right:6px;width:40px;height:40px;display:grid;place-items:center;border-radius:50%}
.lp-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lp-grid button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:6px 10px;border-radius:12px;background:var(--cream);box-shadow:inset 0 0 0 1px var(--line);font-size:15px;font-weight:500;color:var(--ink);text-align:center;line-height:1.2}
.lp-grid button[aria-pressed="true"]{background:#fff;box-shadow:inset 0 0 0 2px var(--ink)}
.lp-grid .flag{font-size:20px;line-height:1;flex:none}
.lp-grid button:focus-visible,.langpop .x:focus-visible,.langbtn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
body.lock .langpop{display:none}
.langbtn{display:flex;align-items:center;justify-content:center;gap:2px;width:auto;min-width:44px;padding:0 6px;border-radius:22px}
.langbtn .lc{font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--muted)}
/* promo banner image 150–210px depending on screen */
.pbanner{height:clamp(150px,25svh,210px)}
/* assistant: official logo + label, compact; hides while it would cover a buy button */
.ai{height:48px;padding:4px 14px 4px 4px;gap:8px;font-size:12.5px;transition:opacity .18s,transform .18s}
.ailogo{flex:none;width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px var(--red);display:grid;place-items:center}
.ailogo img{width:24px;height:auto;display:block}
.ai .mascot{width:40px;height:40px}
.ai.dodge{opacity:0;pointer-events:none;transform:translateY(10px)}
body.woocommerce-checkout .ai,body.woocommerce-cart .ai{display:none}
/* turn loose packs into a gift box */
.gup{display:flex;gap:10px;align-items:center;margin-top:14px;padding:10px 12px;border-radius:14px;background:var(--cream);box-shadow:inset 0 0 0 1px var(--line)}
.gup>svg{flex:none;width:40px;height:40px}
.gup>div{flex:1;min-width:0}
.gup b{display:block;font-size:13.5px;line-height:1.3}
.gup small{display:block;font-size:12px;color:var(--muted);line-height:1.35;margin-top:2px}
.gup .btn{flex:none;min-height:40px;padding:0 12px;font-size:13px}
.gfrom{background:var(--cream);padding:8px 10px;border-radius:10px}
/* weight / variant selector */
.vsel{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 4px}
.vsel button{min-width:84px;min-height:48px;padding:6px 12px;border-radius:12px;background:var(--cream);box-shadow:inset 0 0 0 1px var(--line);display:grid;justify-items:center;line-height:1.2}
.vsel button b{font-size:15px}
.vsel button small{font-size:12px;color:var(--muted)}
.vsel button[aria-checked="true"]{background:var(--tea);box-shadow:inset 0 0 0 2px var(--ink)}
.vsel button:disabled{opacity:.45}
/* staff handoff form inside chat */
.m.sform{display:grid;gap:2px;width:100%;max-width:100%}
.m.sform .field{font-size:13px}
.m.sform .row .btn{flex:1;min-height:42px;font-size:13px;gap:6px;display:inline-flex;align-items:center;justify-content:center}
.m.ok{background:var(--tea)}
.qchips .tile{min-width:66px}
/* Korean and Chinese: system CJK fonts (no extra downloads), headings in the same family */
html:lang(ko) body{font-family:'Be Vietnam Pro','Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',system-ui,sans-serif}
html:lang(zh) body{font-family:'Be Vietnam Pro','PingFang SC','Noto Sans SC','Microsoft YaHei',system-ui,sans-serif}
html:lang(ko) .serif,html:lang(ko) h1,html:lang(ko) h2,html:lang(ko) h3.serif,html:lang(ko) .fl h3,html:lang(ko) .cb h3,html:lang(ko) .pg h3,html:lang(ko) .art h2,html:lang(ko) .pol h3{font-family:'Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',system-ui,sans-serif;letter-spacing:-.01em}
html:lang(zh) .serif,html:lang(zh) h1,html:lang(zh) h2,html:lang(zh) h3.serif,html:lang(zh) .fl h3,html:lang(zh) .cb h3,html:lang(zh) .pg h3,html:lang(zh) .art h2,html:lang(zh) .pol h3{font-family:'PingFang SC','Noto Sans SC','Microsoft YaHei',system-ui,sans-serif}
/* V19: nutrition rows, Vietnamese-only notice */
.nr{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed var(--line);padding:3px 0;font-size:13px}
.nr b{font-weight:600}
/* V20: phụ phí kiểu hộp quà hiện trên nút chọn hộp */
.boxopts{flex-wrap:wrap}
.pill .bfee{font-size:11px;font-weight:500;opacity:.75}


/* ---- phần bổ sung cho giao diện WordPress ---- */
.wrap{min-height:50vh}
.wrap h1{font-size:32px;line-height:1.12;font-weight:700;margin-bottom:10px}
.entry{font-size:15.5px;line-height:1.7}
.entry h2,.entry h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:700;margin:20px 0 6px}
.entry p,.entry ul,.entry ol{margin-bottom:10px}
.entry ul,.entry ol{padding-left:20px}
.entry img,.entry video{max-width:100%;height:auto;border-radius:12px}
.crumbs{font-size:12.5px;color:var(--muted);margin-bottom:8px}
.crumbs a{color:var(--muted)}
.plainlist{list-style:none;padding:0}
.plainlist li{padding:6px 0}
footer nav a,.legal a{display:inline-flex;align-items:center;min-height:36px;text-decoration:underline;text-underline-offset:3px;color:inherit}
.legal a{font-size:12.5px;color:var(--muted)}
.crawl{margin:34px 20px 0;padding:18px 0 0;border-top:1px solid var(--line);font-size:13px}
.crawl h2{font-size:22px;margin-bottom:4px}
.crawl h3{font-size:13px;margin:10px 0 2px;color:var(--muted);font-weight:600}
.crawl ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:2px 14px}
.crawl a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.woocommerce ul.products{display:grid;grid-template-columns:1fr 1fr;gap:14px;list-style:none;padding:0;margin:14px 0}
.woocommerce ul.products li.product{margin:0;width:auto;float:none}
.woocommerce ul.products li.product a img{width:100%;height:auto;border-radius:14px;margin:0 0 6px}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:14.5px;font-weight:600;padding:0}
.woocommerce ul.products li.product .price{font-weight:600;color:var(--ink)}
.woocommerce ul.products li.product .button{display:none}
.woocommerce div.product div.images,.woocommerce div.product div.summary{float:none;width:100%}
.woocommerce div.product div.images img{width:100%;height:auto;border-radius:16px}
.woocommerce div.product .product_title{font-family:'Cormorant Garamond',Georgia,serif;font-size:32px;line-height:1.12;margin:10px 0 6px}
.woocommerce div.product p.price,.woocommerce div.product span.price{font-size:22px;font-weight:700;color:var(--ink)}
.woocommerce-breadcrumb{font-size:12.5px;color:var(--muted);margin-bottom:8px}
.woocommerce-breadcrumb a{color:var(--muted)}
.mimi-extra{margin-top:18px}
.mimi-extra dl{display:grid;gap:4px}
.mimi-extra dt{font-weight:600;color:var(--ink)}
.mimi-extra dd{margin:0 0 8px}
.woocommerce-result-count,.woocommerce-ordering{font-size:13px;color:var(--muted)}
.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout{font-size:14.5px}
/* ---- V19: ngôn ngữ, ghi chú "chỉ có tiếng Việt", trang B2B ---- */
.vionly{background:var(--cream);border-radius:10px;padding:8px 12px;font-size:13px;color:var(--ink);margin:6px 0 12px}
.langnav{display:flex;flex-wrap:wrap;gap:4px 14px;margin:8px 0 4px;font-size:13px}
.langnav a{color:inherit;text-decoration:underline;text-underline-offset:3px;min-height:32px;display:inline-flex;align-items:center}
.langnav a[aria-current=true]{font-weight:700;text-decoration:none}
.b2bcta{background:var(--cream);border-radius:14px;padding:14px 16px;margin:12px 0}
.vsel-wp{margin:10px 0}