:root{
  --paper:#F7F5EF; --card:#FFFFFF; --ink:#182421; --ink-2:#55625C; --ink-3:#939C97;
  --line:#E6E3DA; --line-2:#D9D5CA;
  --accent:#0F7A55; --accent-d:#0B5C40; --accent-tint:#E7F2EC;
  --sale:#C0492E;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px;
  --r-s:10px; --r-m:14px; --r-l:18px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font,'Instrument Sans',sans-serif);background:#E4E1D8;color:var(--ink);-webkit-font-smoothing:antialiased;min-height:100vh;display:grid;place-items:center;padding:var(--s6)}
.mono{font-family:'Spline Sans Mono',monospace;font-feature-settings:"tnum"}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select{font:inherit}
.phone{width:100%;max-width:412px;background:#0c1512;border-radius:40px;padding:11px;box-shadow:0 30px 80px rgba(20,32,28,.3)}
.screen{position:relative;background:var(--paper);border-radius:30px;overflow:hidden;display:flex;flex-direction:column;height:min(788px,90vh)}
/* header */
.hd{display:flex;align-items:center;justify-content:space-between;padding:var(--s4) var(--s5);background:var(--card);border-bottom:1px solid var(--line);z-index:6}
.brand{display:flex;align-items:center;gap:var(--s2);font-weight:700;font-size:17px;letter-spacing:-.015em}
.brand .mk{width:29px;height:29px;border-radius:9px;background:var(--ink);display:grid;place-items:center}
.brand .mk svg{width:16px;height:16px;color:var(--paper)}
.cartbtn{position:relative;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--paper);display:grid;place-items:center;color:var(--ink)}
.cartbtn svg{width:20px;height:20px}
.cbadge{position:absolute;top:-7px;right:-7px;min-width:21px;height:21px;border-radius:11px;background:var(--accent);color:#fff;font-size:12px;font-weight:600;display:none;align-items:center;justify-content:center;padding:0 6px}
.cbadge.on{display:flex}
.offline{background:var(--accent-tint);color:var(--accent-d);font-size:12px;text-align:center;padding:var(--s2)}
/* product base (persistent) */
.main{flex:1;overflow-y:auto;padding:var(--s5) var(--s5) var(--s6)}
.main::-webkit-scrollbar{width:0}
.h-sec{font-size:19px;font-weight:700;letter-spacing:-.015em;line-height:1.2}
.h-sec-help{font-size:14px;color:var(--ink-3);margin-top:var(--s1)}
.price{font-family:'Spline Sans Mono',monospace;font-weight:500}
.prod .media{height:196px;border-radius:var(--r-l);display:grid;place-items:center;color:#fff;font-weight:600;font-size:15px;text-shadow:0 1px 6px rgba(0,0,0,.28);margin-bottom:var(--s4);overflow:hidden}
.prod .media.media-fit{height:auto;display:block;background:none;text-shadow:none}
.prod .media.media-fit img{width:100%;height:auto;display:block;border-radius:var(--r-l)}
.gal-strip{display:flex;gap:8px;margin-top:10px;margin-bottom:var(--s4);overflow-x:auto;scrollbar-width:none}
.bundles-inline{display:flex;flex-direction:column;gap:var(--s2);margin:var(--s4) 0 0}
.bundles-inline .bundle{cursor:pointer}
.bundles-inline .bundle.sel{border-color:var(--accent)}
.ups{margin:var(--s4) 0 var(--s3);padding-top:var(--s4);border-top:1px solid var(--line)}
.ups-h{font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:var(--s3)}
.ups-i{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.ups-i:last-child{border-bottom:0}
.ups-t{width:46px;height:46px;border-radius:10px;flex-shrink:0;background:var(--line);background-size:cover;background-position:center}
.ups-b{flex:1;min-width:0}
.ups-n{font-weight:600;font-size:14px}
.ups-d{font-size:12.5px;color:var(--ink-3);margin-top:1px}
.ups-p{font-size:13px;color:var(--ink-2);margin-top:2px}
.ups-a{flex-shrink:0;border:1.5px solid var(--line-2);border-radius:var(--r-s);padding:8px 14px;font-size:13.5px;font-weight:600;background:var(--card);color:var(--ink)}
.ups-a:hover{border-color:var(--ink-3)}
.ups-a[disabled]{opacity:.6}
.rich{font-size:15px;line-height:1.6;color:var(--ink-2)}
.rich h1,.rich h2,.rich h3{color:var(--ink);font-weight:700;margin:14px 0 6px;font-size:17px}
.rich p{margin:0 0 10px}
.rich ul,.rich ol{margin:0 0 10px 18px}
.rich img{max-width:100%;height:auto;border-radius:var(--r-s)}
.rich a{color:var(--accent-d)}
.rich table{width:100%;border-collapse:collapse;font-size:14px}
.rich td,.rich th{padding:8px 0;border-bottom:1px solid var(--line);text-align:left}
.cardimg img{width:100%;height:auto;display:block;border-radius:var(--r-m)}
.cardimg .cap{font-size:13px;color:var(--ink-3);margin-top:8px}
.vwrap{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--r-m);overflow:hidden;background:#000}
.vwrap iframe,.vwrap video{position:absolute;inset:0;width:100%;height:100%;border:0}
.vfallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--card);color:var(--ink-2);text-align:center;padding:20px}
.vfallback p{margin:0;font-size:14.5px;font-weight:500;color:var(--ink)}
.vfallback .sm{font-size:13px;font-weight:400;color:var(--ink-3)}
.vfallback a{font-size:13px;color:var(--accent-d);margin-top:4px}
/* keep a tall product photo from swallowing a phone screen */
@media(max-width:819px){ .prod .media.media-fit img{max-height:62vh;object-fit:contain} }
.gal-strip::-webkit-scrollbar{display:none}
.gthumb{width:60px;height:60px;flex-shrink:0;border-radius:10px;background-size:cover;background-position:center;border:0;box-shadow:0 0 0 1px var(--line-2);cursor:pointer;transition:box-shadow .12s}
/* two-column product on wide viewports (inline storefront + desktop) */
.prodgrid{display:block}
.pg-media{margin-bottom:var(--s4)}
body.inline .main,body.embed .main{max-width:1120px;margin:0 auto;width:100%}
@media(min-width:820px){
  body.inline .buyrow,body.embed .buyrow{margin-top:var(--s4)}
}
.prod .title{font-size:var(--title-size,24px);font-weight:var(--title-weight,700);letter-spacing:-.02em;line-height:1.1}
.prod .desc{font-size:var(--body-size,15px);color:var(--ink-2);line-height:1.5;margin-top:var(--s2)}
.prod .row{display:flex;align-items:baseline;gap:var(--price-gap,10px);margin-top:var(--s3);flex-wrap:wrap}
.prod .amt{font-size:var(--price-size,20px)}
.prod .promo{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:var(--ink);background:#FFE300;padding:6px 10px;border-radius:8px;margin-top:var(--s3)}
.prod .promo svg{width:13px;height:13px}
.buyrow{display:flex;gap:var(--s3);margin:var(--s6) 0 var(--s4)}
.qty{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--card);flex-shrink:0}
.qty button{width:44px;height:52px;display:grid;place-items:center;color:var(--ink-2);font-size:18px}
.qty .n{min-width:28px;text-align:center;font-weight:600;font-size:15px}
.btn{display:flex;align-items:center;justify-content:center;gap:var(--s2);font-weight:var(--btn-w,600);font-size:16px;border-radius:var(--btn-r,var(--r-m));padding:0 var(--s5);height:var(--btn-h,52px);width:100%}
.btn svg{width:19px;height:19px}
.btn-primary{background:var(--btn-bg,var(--ink));color:var(--btn-fg,var(--paper))}
.btn-primary:disabled{background:var(--line-2);color:#fff}
.btn-primary:not(:disabled):active{transform:translateY(1px)}
.info-list{display:flex;flex-direction:column;gap:var(--s2)}
.info-card{display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:var(--s4);transition:border-color .12s}
.info-card:hover{border-color:var(--line-2)}
.info-card .ic{width:38px;height:38px;border-radius:10px;background:var(--accent-tint);color:var(--accent-d);display:grid;place-items:center;flex-shrink:0}
.info-card .ic svg{width:19px;height:19px}
.info-card .tx{flex:1}
.info-card .tx .l{display:block;font-weight:600;font-size:15px}
.info-card .tx .s{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}
.info-card .chev{color:var(--ink-3)}
.info-card .chev svg{width:18px;height:18px}
.ask-link{display:block;width:100%;text-align:center;font-size:13.5px;color:var(--ink-3);padding:var(--s4) 0 0;text-decoration:underline;text-underline-offset:3px}
/* ===== ONE MORPHING BOTTOM DRAWER ===== */
.scrim{position:absolute;inset:0;background:rgba(20,32,28,.42);opacity:0;pointer-events:none;transition:opacity .24s;z-index:10}
.scrim.show{opacity:1;pointer-events:auto}
.drawer{position:absolute;left:0;right:0;bottom:0;background:var(--paper);border-radius:24px 24px 0 0;z-index:11;transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.85,.25,1);max-height:88%;display:flex;flex-direction:column;box-shadow:0 -12px 40px rgba(20,32,28,.18)}
.drawer.up{transform:translateY(0)}
.dw-hd{display:flex;align-items:center;justify-content:space-between;padding:var(--s5) var(--s5) var(--s3);flex-shrink:0}
.dw-hd .t{font-size:18px;font-weight:700;letter-spacing:-.015em}
.dw-hd .x{width:34px;height:34px;border-radius:50%;background:var(--line);display:grid;place-items:center;color:var(--ink-2);font-size:18px;flex-shrink:0}
.dw-body{padding:0 var(--s5);overflow-y:auto;flex:1}
.dw-body::-webkit-scrollbar{width:0}
.dw-foot{padding:var(--s4) var(--s5) var(--s5);flex-shrink:0}
/* morph: cross-fade inner content */
.morph{animation:fadein .22s ease}
@keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* bundles (SweetPlaid container) */
.bundles{display:flex;flex-direction:column;gap:var(--s3);padding-bottom:var(--s2)}
.bundle{border:1.5px solid var(--line-2);border-radius:var(--r-l);background:var(--card);overflow:hidden;transition:border-color .15s}
.bundle.sel{border-color:var(--accent);border-width:2px}
.bundle-hd{display:flex;align-items:center;gap:var(--s3);padding:var(--s4);position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bundle .rad{width:22px;height:22px;border-radius:50%;border:2px solid var(--pack-border,var(--line-2));flex-shrink:0;box-sizing:border-box;background-clip:padding-box;transition:border-color .14s,box-shadow .14s,background .14s}
.bundle.sel .rad{border-color:var(--pack-sel,var(--accent));background:var(--pack-sel,var(--accent));box-shadow:inset 0 0 0 4px var(--pack-bg,var(--card))}
.bundle .bi{flex:1;min-width:0}
.bundle .bl{font-weight:700;font-size:15.5px}
.bundle .bp{margin-top:3px;font-size:14px}
.bundle .was{color:var(--ink-3);text-decoration:line-through;margin-left:7px;font-size:12.5px}
.bundle .bsave{font-size:12.5px;color:var(--accent-d);margin-top:3px}
.bundle .bflag{position:absolute;top:var(--s4);right:var(--s4);font-size:10.5px;font-weight:700;color:#fff;background:var(--sale);padding:3px 9px;border-radius:6px}
.bundle.best .bflag{background:var(--accent)}
.bundle-body{border-top:1px solid var(--line);padding:var(--s4);display:none;background:#FBFAF6}
.bundle.sel .bundle-body{display:block}
.unit{margin-bottom:var(--s4)}.unit:last-child{margin-bottom:0}
.unit .ul{font-size:12px;font-weight:600;color:var(--ink-2);text-transform:uppercase;letter-spacing:.03em;margin-bottom:var(--s2)}
.mini{display:flex;gap:var(--s2)}
.mini .msel{flex:1}.mini .ml{font-size:11px;color:var(--ink-3);margin-bottom:4px}
.mini select{width:100%;font-size:14px;padding:10px 11px;border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--card);color:var(--ink);appearance:none;background-image: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='%23939c97' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:30px}
/* variant card (no bundle) */
.vgroup{margin-bottom:var(--s5)}.vgroup:last-child{margin-bottom:0}
.vgroup .gl{font-size:15px;font-weight:600;margin-bottom:var(--s1)}
.vgroup .gh{font-size:12.5px;color:var(--ink-3);margin-bottom:var(--s3)}
.swatch-wrap{display:flex;gap:var(--s4);padding-bottom:24px}
.swatch{width:46px;height:46px;border-radius:50%;box-shadow:0 0 0 1px var(--line-2);position:relative;transition:box-shadow .12s,transform .1s;cursor:pointer;padding:0;border:none}
.swatch:hover{box-shadow:0 0 0 2px var(--ink-3)}
.swatch:active{transform:scale(.94)}
.swatch.on{box-shadow:0 0 0 3px var(--accent)}
.swatch.on::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 2px #fff}
.swatch .nm{position:absolute;top:54px;left:50%;transform:translateX(-50%);font-size:11.5px;color:var(--ink-2);white-space:nowrap}
.sizes{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)}
.size{border:1.5px solid var(--line-2);border-radius:var(--r-s);height:50px;display:grid;place-items:center;font-weight:600;font-size:15px;transition:border-color .12s,background .12s,transform .1s;cursor:pointer;background:var(--card);color:var(--ink)}
.size:hover:not(:disabled):not(.oos){border-color:var(--ink-3);background:var(--paper)}
.size:active:not(:disabled){transform:scale(.97)}
.size.on{border-color:var(--accent);border-width:2px;color:var(--accent-d);background:var(--accent-tint)}
.size.oos{opacity:.4;text-decoration:line-through;cursor:not-allowed;background:var(--line);border-color:var(--line)}
.size:disabled{cursor:not-allowed}
/* cart lines */
.cline{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.cline .cthumb{width:46px;height:46px;border-radius:10px;flex-shrink:0;background:var(--line)}
.cline .cinfo{flex:1;min-width:0}
.cline .cname{font-weight:600;font-size:14.5px}
.cline .copt{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.cline .cact{display:flex;gap:var(--s3);margin-top:var(--s2)}
.cline .cact button{font-size:12.5px;font-weight:600;color:var(--accent-d)}
.cline .cact button.rem{color:var(--ink-3)}
.cline .cprice{font-family:'Spline Sans Mono',monospace;font-size:14px;font-weight:500;flex-shrink:0}
.csum{display:flex;justify-content:space-between;font-weight:700;font-size:16px;padding:var(--s4) 0 var(--s1)}
.cship{font-size:12.5px;color:var(--accent-d);padding-bottom:var(--s2)}
.cempty{color:var(--ink-3);font-size:14px;padding:var(--s5) 0}
/* forms & payment (checkout in drawer) */
.form{display:flex;flex-direction:column;gap:var(--s3);padding-bottom:var(--s2)}
.form input{width:100%;padding:14px var(--s4);border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--card);font-size:15px}
.form input:focus{outline:2px solid var(--accent);border-color:transparent}
.form .fr{display:flex;gap:var(--s3)}
.pays{display:flex;flex-direction:column;gap:var(--s3);padding-bottom:var(--s2)}
.pay{display:flex;align-items:center;gap:var(--s3);border:1.5px solid var(--line-2);border-radius:var(--r-m);padding:var(--s4);background:var(--card)}
.pay.on{border-color:var(--accent);border-width:2px}
.pay .pi{flex:1}.pay .pl{font-weight:600;font-size:15px}.pay .ps{font-size:12.5px;color:var(--ink-3);margin-top:1px}
.pay .rad{width:22px;height:22px;border-radius:50%;border:2px solid var(--line-2)}
.pay.on .rad{border-color:var(--accent);background:radial-gradient(circle,var(--accent) 45%,transparent 49%)}
.dw-total{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s3)}
.dw-total .lt{font-size:13px;color:var(--ink-3)}.dw-total .rt{font-weight:700;font-size:17px}.dw-total .free{font-size:12px;color:var(--accent-d)}
.done{text-align:center;padding:var(--s6) 0}
.done .ok{width:60px;height:60px;border-radius:50%;background:var(--accent-tint);color:var(--accent-d);display:grid;place-items:center;margin:0 auto var(--s4)}
.done .ok svg{width:30px;height:30px}
.done .dt{font-size:20px;font-weight:700}.done .ds{font-size:14px;color:var(--ink-2);margin-top:var(--s2);line-height:1.5}
/* info panel content (reuses drawer) */
.vframe{position:relative;height:210px;border-radius:var(--r-m);display:grid;place-items:center;overflow:hidden;margin-bottom:var(--s2)}
.vplay{width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.95);display:grid;place-items:center;color:var(--ink)}
.vplay svg{width:24px;height:24px;margin-left:2px}
.vlabel{position:absolute;left:14px;bottom:12px;font-size:12px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.spec-desc{font-size:14.5px;color:var(--ink-2);line-height:1.55;margin-bottom:var(--s4)}
.spec-tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.spec-tbl td{padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.spec-tbl td:last-child{text-align:right;font-weight:500}.spec-tbl tr:last-child td{border-bottom:none}
.spec-rev{font-size:13.5px;color:var(--ink-2);font-style:italic;margin-top:var(--s4);border-left:2px solid var(--line-2);padding-left:var(--s3)}
.chart{width:100%;border-collapse:collapse;font-size:14px}
.chart th{text-align:left;color:var(--ink-3);font-weight:500;padding:var(--s2) var(--s1);border-bottom:1px solid var(--line)}
.chart td{padding:var(--s3) var(--s1);border-bottom:1px solid var(--line)}.chart tr:last-child td{border-bottom:none}
.chart-note{font-size:13px;color:var(--accent-d);margin-top:var(--s3)}
.color-panel{display:flex;gap:var(--s5);flex-wrap:wrap;padding-top:var(--s2)}
.color-panel .cp{text-align:center}
.color-panel .cp .dot{width:56px;height:56px;border-radius:50%;box-shadow:0 0 0 1px var(--line-2)}
.color-panel .cp .cn{font-size:12.5px;color:var(--ink-2);margin-top:var(--s2)}
/* reviews */
.rev-head{display:flex;align-items:center;gap:var(--s4);padding-bottom:var(--s4);margin-bottom:var(--s2);border-bottom:1px solid var(--line)}
.rev-avg{font-size:34px;font-weight:700;letter-spacing:-.02em;line-height:1}
.rev-stars{display:flex;gap:2px}
.rev-stars span svg,.rev-s span svg{width:15px;height:15px}
.rev-count{font-size:12.5px;color:var(--ink-3);margin-top:3px}
.rev-item{padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.rev-item:last-child{border-bottom:none}
.rev-top{display:flex;align-items:center;justify-content:space-between}
.rev-name{font-weight:600;font-size:14px}
.rev-s{display:flex;gap:1px}
.rev-t{font-weight:600;font-size:14px;margin-top:var(--s2)}
.rev-b{font-size:13.5px;color:var(--ink-2);line-height:1.5;margin-top:var(--s1)}
/* faq */
.faq-list{display:flex;flex-direction:column}
.faq-item{padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.faq-item:last-child{border-bottom:none}
.faq-q{font-weight:600;font-size:14.5px}
.faq-a{font-size:13.5px;color:var(--ink-2);line-height:1.5;margin-top:var(--s2)}
.ask-bar{display:flex;gap:var(--s3);align-items:center;padding:var(--s2) 0 var(--s4)}
.ask-bar input{flex:1;min-width:0;padding:14px var(--s4);border:1px solid var(--line-2);border-radius:999px;background:var(--card);font-size:15px}
.ask-bar input:focus{outline:2px solid var(--accent);border-color:transparent}
.ask-bar .snd{width:48px;height:48px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;flex-shrink:0}
.ask-bar .snd svg{width:19px;height:19px}
.ans{font-size:14.5px;line-height:1.5;padding:var(--s3) 0}
.typing{display:inline-flex;gap:5px;padding:var(--s3) 0}
.typing span{width:7px;height:7px;border-radius:50%;background:var(--ink-3);animation:bl 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
@keyframes bl{0%,60%,100%{opacity:.25}30%{opacity:1}}
/* ---- embed mode (inside the storefront iframe): no phone frame, fill viewport ---- */
body.embed{padding:0;background:transparent;display:block;min-height:100vh}
body.embed .phone{max-width:none;width:100%;background:none;border-radius:0;padding:0;box-shadow:none}
body.embed .screen{height:100vh;height:100dvh;border-radius:0}
body.embed .offline{display:none!important}
/* inline = the storefront page itself: no card look, no duplicate top bar */
body.inline{background:transparent}
body.inline .screen{height:auto;min-height:0;background:transparent}
body.inline .hd{display:none}
body.inline .main{overflow:visible;padding-top:var(--s5)}
body.inline .drawer{position:fixed;max-height:88vh}
body.inline .scrim{position:fixed}
/* Desktop: the drawer behaves like a cart drawer — slides in from the right. */
@media(min-width:820px){
  body.inline .drawer,body.embed .drawer{
    left:auto;right:0;top:0;bottom:0;
    width:min(480px,94vw);max-height:none;height:100%;
    border-radius:0;
    transform:translateX(100%);
    box-shadow:-18px 0 50px rgba(20,32,28,.22);
  }
  body.inline .drawer.up,body.embed .drawer.up{transform:translateX(0)}
  body.inline .dw-hd,body.embed .dw-hd{padding-top:var(--s5)}
}
/* upsell option picker */
.upsp{padding-bottom:var(--s3)}
.upsp-h{font-weight:600;font-size:15.5px;color:var(--ink)}

/* was-price and saving beside the selling price */
.prod .was-amt{font-size:16px;color:var(--ink-3);text-decoration:line-through}
.prod .save-amt{font-size:13px;font-weight:600;color:var(--sale,#C0492E)}
/* merchant logo in the header */
.brand .mk.mk-logo{background:none;overflow:hidden}
.brand .mk.mk-logo img{width:100%;height:100%;object-fit:contain;display:block}


/* ---- P1: seller-controlled layout ---- */
body.btn-inline .buyrow .btn{width:auto;min-width:220px;align-self:flex-start}
body.no-header .hd{display:none}
body.no-sticky .hd{position:static}
.brand .mk.mk-logo{height:var(--logo-h,29px);width:auto;min-width:var(--logo-h,29px)}
.pg-info>*+*{margin-top:var(--sec-gap,16px)}
.pg-info>*:first-child{margin-top:0}
.prod .save-amt.chip{border-radius:var(--r-s);line-height:1.25;display:inline-block}


/* ---------------------------------------------------------------------------
 * Layout controls. These live here, not in page.html, so the admin preview
 * (which runs in embed mode) shows exactly what the storefront will show.
 * ------------------------------------------------------------------------- */
body.inline .main,body.embed .main,body.page .main{max-width:var(--max-w,1180px);margin:0 auto;width:100%}
@media(min-width:820px){
  /* Two columns without changing the DOM: the image is lifted into its own
     column and everything else stacks beside it, so one ordered list still
     drives the mobile layout. */
  body.inline .pg-info,body.embed .pg-info,body.page .pg-info{
    display:grid;grid-template-columns:var(--cols,minmax(0,1.05fr) minmax(0,.95fr));
    gap:0 var(--col-gap,48px);align-items:start}
  body.inline .pg-info>*,body.embed .pg-info>*,body.page .pg-info>*{grid-column:2}
  body.inline .pg-info>.sec-media,body.embed .pg-info>.sec-media,body.page .pg-info>.sec-media{
    grid-column:1;grid-row:1 / span 99;position:sticky;top:var(--media-top,24px);margin-top:0}
  body.media-right .pg-info>.sec-media{grid-column:2}
  body.media-right .pg-info>*:not(.sec-media){grid-column:1}
  /* in-flow: no separate column, the image sits in the stack */
  body.media-inline .pg-info{display:block}
  body.media-inline .pg-info>.sec-media{position:static}
}


/* seller-controlled surfaces for the info cards and packs */
.info-card{background:var(--card-bg-o,var(--card));border-color:var(--card-border,var(--line))}
.info-card .l{color:var(--card-text,var(--ink))}
.info-card .s{color:var(--card-sub,var(--ink-3))}
.info-card .ic{background:var(--card-icon-bg,var(--accent-tint));color:var(--card-icon,var(--accent))}
.bundle{background:var(--pack-bg,var(--card));border-color:var(--pack-border,var(--line-2))}
.bundle.sel,.bundles-inline .bundle.sel{border-color:var(--pack-sel,var(--accent))}
.pg-media-inline{position:static!important;margin-bottom:0}

/* ---- pack subline ---- */
.bundle .bsub{margin-top:2px;line-height:1.35}

/* ---- checklist card ---- */
.cklist{list-style:none;display:grid;gap:10px;padding:4px 0}
.cklist li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink-2)}
.cklist li svg{width:16px;height:16px;color:var(--accent);flex-shrink:0;margin-top:2px}

/* ---- star rating ---- */
/* Spacing belongs to the wrapper, not the stars inside it. Putting it on the
 * inner element meant a value could only ADD to the default gap, never reduce
 * it — so lowering the number did nothing. */
.pg-info>*+.sec-rating{margin-top:var(--rating-above,var(--sec-gap,16px))}
.pg-info>.sec-rating+*{margin-top:var(--rating-below,var(--sec-gap,16px))}
.pg-info>.sec-rating:first-child{margin-top:0}
.rt{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:inherit}
a.rt:hover .rt-t{text-decoration:underline}
.rt-s{display:inline-flex;gap:2px;line-height:0}
.st{position:relative;display:inline-block}
.st-b,.st-f{position:absolute;inset:0;overflow:hidden;display:block}
.st-b{opacity:.24}
.st-b svg,.st-f svg{width:100%;height:100%;display:block}
.st-f{width:0}
.rt-t{font-size:13px;color:var(--ink-2)}


/* ---- gallery: swipes on touch, arrows when it overflows ---- */
.gal-wrap{position:relative;margin-top:10px;margin-bottom:var(--s4)}
.gal-strip{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px}
.gal-strip::-webkit-scrollbar{display:none}
.gthumb{width:64px;height:64px;flex:0 0 64px;border-radius:10px;overflow:hidden;border:0;padding:0;
  background:var(--card);cursor:pointer;scroll-snap-align:start;position:relative;
  box-shadow:0 0 0 1px var(--line);transition:box-shadow .14s,opacity .14s;opacity:.62}
.gthumb img{width:100%;height:100%;object-fit:cover;display:block}
.gthumb:hover{opacity:.9}
/* the selected thumb reads by being the clear one, not by a heavy ring */
.gthumb.on{opacity:1;box-shadow:0 0 0 1px var(--line)}
.gthumb.on::after{content:"";position:absolute;left:8px;right:8px;bottom:-6px;height:2px;border-radius:2px;background:var(--ink)}
.gal-wrap .gnav{position:absolute;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;
  background:var(--card);box-shadow:0 1px 4px rgba(20,32,28,.2);display:grid;place-items:center;color:var(--ink);z-index:2}
.gal-wrap .gnav svg{width:15px;height:15px}
.gal-wrap .gnav.prev{left:-6px}
.gal-wrap .gnav.next{right:-6px}
.gal-wrap .gnav:disabled{opacity:.3;pointer-events:none}
.gal-dots{display:none;justify-content:center;gap:5px;margin-top:9px}
.gdot{width:5px;height:5px;border-radius:50%;background:var(--line-2);transition:background .14s,transform .14s}
.gdot.on{background:var(--ink);transform:scale(1.25)}
@media(hover:none){
  .gal-wrap .gnav{display:none!important}   /* touch swipes instead */
  .gal-dots{display:flex}
}

/* ---- image card with more than one image ---- */
.cardimgs{position:relative}
.ci-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:var(--r-m)}
.ci-track::-webkit-scrollbar{display:none}
.ci-slide{flex:0 0 100%;scroll-snap-align:center}
.ci-slide img{width:100%;height:auto;display:block;border-radius:var(--r-m)}
.ci-dots{display:flex;justify-content:center;gap:5px;margin-top:10px}

/* the merchant's own description formatting, kept readable in our type scale */
.desc.rich-desc p{margin:0 0 9px}
.desc.rich-desc p:last-child{margin-bottom:0}
.desc.rich-desc ul,.desc.rich-desc ol{margin:0 0 9px 18px}
.desc.rich-desc li{margin-bottom:4px}
.desc.rich-desc strong,.desc.rich-desc b{color:var(--ink);font-weight:600}
.desc.rich-desc a{color:var(--accent-d);text-decoration:underline}
.desc.rich-desc img{max-width:100%;height:auto;border-radius:var(--r-s);margin:6px 0}
.desc.rich-desc h1,.desc.rich-desc h2,.desc.rich-desc h3{font-size:16px;font-weight:600;color:var(--ink);margin:12px 0 6px;line-height:1.3}
.desc.rich-desc br{line-height:1.5}

/* cards and packs are separate surfaces, styled independently */
.info-card:hover{border-color:var(--card-hover,var(--ink-3))}
.bundle:hover{border-color:var(--pack-hover,var(--ink-3))}
.bundle .bl{color:var(--pack-text,var(--ink))}
.bundle .bp .price{color:var(--pack-price,var(--ink))}
.bundle .bp .was{color:var(--pack-was,var(--ink-3))}
.bundle .bsave{color:var(--pack-saving,var(--accent))}

/* the info-cards block can be spaced independently, including negatively */
.pg-info>.sec-cards{margin-top:var(--card-gap,var(--sec-gap,16px))}

/* something went wrong loading the page — say so rather than showing nothing */
.load-err{max-width:44ch;margin:56px auto;text-align:center;padding:26px 22px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--card)}
.load-err .t{font-weight:600;font-size:16px;margin-bottom:8px}
.load-err .d{font-size:14px;color:var(--ink-2);line-height:1.5}
.load-err .d.sm{font-size:13px;color:var(--ink-3);margin-top:10px}

body.page .drawer{overflow:hidden}


/* ---- the sliding panel is its own surface, styleable on its own ---- */
.drawer{background:var(--modal-bg,var(--paper))}
.dw-body{color:var(--modal-text,var(--ink-2))}
.dw-hd .t{color:var(--modal-title,var(--ink))}
.scrim{background:var(--modal-scrim,rgba(20,32,28,.42))}

/* asking for a choice rather than making one */
.bundles-inline.nudge .bundle{animation:cl-nudge .5s ease}
@keyframes cl-nudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.bundles-inline.nudge .bundle{border-color:var(--pack-sel,var(--accent))}

/* ---- stock ---- */
.stock{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:500}
.stock .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}
.stock.ok{color:var(--accent)}
.stock.low{color:var(--sale)}
.stock.out{color:var(--ink-3)}

/* ---- free-shipping progress ---- */
.shipbar{font-size:13px}
.shiptxt{display:flex;align-items:center;gap:7px;color:var(--accent-d);font-weight:500}
.shiptxt svg{width:15px;height:15px;flex-shrink:0}
.shiptrack{height:5px;border-radius:99px;background:var(--line);margin-top:7px;overflow:hidden}
.shiptrack span{display:block;height:100%;border-radius:99px;background:var(--accent);transition:width .3s}

/* ---- trust row ---- */
.trust{color:var(--ink-2)}
.trust-row{display:flex;flex-wrap:wrap;gap:10px 18px}
.trust-i{display:inline-flex;align-items:center;gap:7px;font-size:13.5px}
.trust-i .ti{color:var(--accent);display:inline-flex}
.trust-i svg{width:16px;height:16px}
.pay-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;justify-content:center}
.paymark{display:inline-flex;width:42px;height:26px;flex:0 0 42px}
.paymark svg{width:100%;height:100%;display:block}


/* ---- countdown ---- */
.countdown{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;
  background:var(--sale);color:#fff;padding:7px 12px;border-radius:var(--r-s)}
.countdown svg{width:15px;height:15px}

/* ---- sticky buy bar ---- */
.sticky-buy{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;gap:12px;
  padding:10px 14px;background:var(--card);border-top:1px solid var(--line);
  box-shadow:0 -6px 24px rgba(20,32,28,.1);
  transform:translateY(110%);transition:transform .24s cubic-bezier(.2,.85,.25,1)}
.sticky-buy.on{transform:translateY(0)}
.sticky-buy .sb-img{width:40px;height:40px;flex-shrink:0;border-radius:9px;background:var(--line) center/cover no-repeat}
.sticky-buy .sb-info{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.sticky-buy .sb-t{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-buy .sb-p{font-size:12.5px;color:var(--ink-2);font-family:'Spline Sans Mono',monospace}
.sticky-buy .sb-btn{width:auto;min-width:150px;height:42px;flex-shrink:0;font-size:14px}
@media(min-width:820px){
  .sticky-buy:not(.always){display:none}
  .sticky-buy.always{left:auto;right:24px;bottom:24px;border-radius:var(--r-l);border:1px solid var(--line);max-width:420px}
}

/* ---- thumbnails beside the image ---- */
@media(min-width:820px){
  /* The rail sits beside the image. The selector has to out-rank the
     .pg-info>.sec-media column rule, which is more specific. */
  body.thumbs-left .pg-info>.sec-media,
  body.thumbs-left .sec-media{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;align-items:start}
  body.thumbs-left .sec-media>.gal-wrap{order:-1;margin:0;grid-column:1}
  body.thumbs-left .sec-media>.media{grid-column:2}
  body.thumbs-left .sec-media .gal-strip{flex-direction:column;max-height:460px;overflow-y:auto;overflow-x:hidden;padding-right:2px}
  body.thumbs-left .sec-media .gthumb{width:100%;flex:0 0 68px;height:68px}
  body.thumbs-left .sec-media .gnav{display:none!important}
  body.thumbs-left .sec-media .gal-dots{display:none}
}
body.thumbs-none .gal-wrap{display:none}

/* ---- fixed aspect when cropping ---- */
.prod .media{aspect-ratio:var(--media-aspect,auto)}
/* aspect-ratio does nothing against a fixed height, so release it when the
   seller has chosen a shape */
body.has-aspect .prod .media{height:auto}
body.has-aspect .prod .media.media-fit img{aspect-ratio:var(--media-aspect,auto);object-fit:cover;height:auto}
body.zoomable .prod .media{cursor:zoom-in}
.zoomwrap img{width:100%;height:auto;display:block;border-radius:var(--r-m)}

/* ---- motion off ---- */
body.no-motion *,body.no-motion *::before,body.no-motion *::after{
  animation-duration:.001ms!important;transition-duration:.001ms!important}

/* ---- cart note and discount code ---- */
.cart-extra{margin-top:14px}
.ce-l{display:block;font-size:12px;color:var(--ink-3);margin-bottom:5px}
.cart-extra textarea,.ce-row input{width:100%;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r-s);
  background:var(--card);color:var(--ink);font:inherit;font-size:14px;resize:vertical}
.cart-extra textarea:focus,.ce-row input:focus{outline:2px solid var(--accent)}
.ce-row{display:flex;gap:8px}
.ce-btn{flex-shrink:0;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--r-s);
  background:var(--card);font-size:13.5px;font-weight:600;color:var(--ink)}
.ce-btn:hover{border-color:var(--ink-3)}
.ce-note{font-size:12px;margin-top:5px;min-height:15px;color:var(--ink-3)}
.ce-note.ok{color:var(--accent)}
.ce-note.bad{color:var(--sale)}
.cart-empty{padding:26px 0;color:var(--ink-3);font-size:14px;text-align:center}

/* ---- benefit icons ---- */
.benefits li{display:flex;gap:9px;align-items:flex-start;line-height:1.4}
.benefits .bi{color:var(--accent);display:inline-flex;flex-shrink:0;margin-top:1px}
.benefits .bi svg{width:17px;height:17px}

/* ---- cards that expand in place ---- */
.info-card.acc{display:block;padding:0;overflow:hidden}
.info-card.acc .acc-h{display:flex;align-items:center;gap:11px;width:100%;padding:11px 13px;text-align:left;background:none;border:0}
.info-card.acc .chev{transition:transform .18s}
.info-card.acc.open .chev{transform:rotate(90deg)}
.info-card.acc .acc-b{padding:0 13px 14px;border-top:1px solid var(--card-border,var(--line))}
.info-card.acc .acc-b>*:first-child{margin-top:12px}

/* ---- express checkout ---- */
.buyrow{flex-wrap:wrap}
.buyrow .btn.express{margin-top:8px;width:100%;flex:1 0 100%}
.btn-outline{background:transparent;color:var(--btn-bg,var(--ink));box-shadow:inset 0 0 0 1.5px var(--btn-bg,var(--ink))}
.btn-outline:hover{background:rgba(20,32,28,.04)}

/* Google Material Symbols, when a seller names one */
.msym{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;
  font-size:1.15em;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;
  white-space:nowrap;direction:ltr;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24}
.benefits .bi .msym,.trust-i .ti .msym{font-size:19px}


/* ---- benefits: the column choice applies on mobile too ---- */
.benefits{list-style:none;display:grid;gap:var(--ben-gap,9px);color:var(--ink-2)}
.benefits.m-cols-2{grid-template-columns:1fr 1fr;column-gap:18px}
.benefits.m-cols-1{grid-template-columns:1fr}
@media(min-width:560px){
  .benefits.cols-2{grid-template-columns:1fr 1fr;column-gap:20px}
  .benefits.cols-1{grid-template-columns:1fr}
}


/* the pack is one target: a click anywhere on it selects, including the radio */
.bundle{cursor:pointer}
.bundle .bundle-body{cursor:default}
.bundle:focus-visible{outline:2px solid var(--pack-sel,var(--accent));outline-offset:2px}