/* babickajarmila.store — warm Czech kitchen: cream paper, gingham blue,
   geranium red, tiled-stove green. Layout follows a long-form sales page. */
:root{
  --ink:#2a2420;--ink2:#5a4c42;--muted:#8d7d70;
  --paper:#FBF6EC;--box:#F3EADB;--line:#E6D8C2;--white:#fff;
  --blue:#1c2e5c;--blue2:#2b4a8f;--blue3:#dfe6f5;
  --red:#c4281f;--red2:#a11d15;--redlite:#e2574a;
  --green:#2f5d3a;--gold:#e7c27a;
  --serif:'Lora',Georgia,'Times New Roman',serif;
  --hand:'Caveat','Segoe Script',cursive;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--serif);color:var(--ink);background:var(--paper);line-height:1.6;font-size:18px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--blue2)}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:760px}
.center{text-align:center}
.small{font-size:15px;color:var(--ink2)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ===== sale banner ===== */
.bar{position:sticky;top:0;z-index:50;background:linear-gradient(90deg,var(--red2),var(--red) 50%,var(--red2));color:#fff;text-align:center;padding:10px 16px;font-size:16px;box-shadow:0 3px 14px rgba(0,0,0,.3)}
.bar b{color:#ffe1a8;letter-spacing:.04em}
.bar s{opacity:.7}
.bar .cd{display:inline-flex;gap:6px;margin-left:8px;vertical-align:middle;font-variant-numeric:tabular-nums}
.bar .cd span{background:rgba(0,0,0,.25);border-radius:6px;padding:3px 8px;font-weight:700;min-width:46px;display:inline-block;line-height:1.15}
.bar .cd small{display:block;font-size:9px;letter-spacing:.08em;opacity:.8;font-weight:400}

/* ===== hero ===== */
.hero{position:relative;overflow:hidden;color:var(--paper);background:#16213f}
.hero:before{content:"";position:absolute;inset:0;background:url(/assets/img/jarmila-sesit.jpg) center 30%/cover no-repeat;opacity:.28;filter:saturate(.8)}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,33,63,.55),rgba(22,33,63,.92) 70%,#16213f)}
.wrapc{max-width:960px;margin:0 auto;padding:54px 24px 64px;text-align:center;position:relative;z-index:2}
.headc h1{font-size:54px;line-height:1.12;margin:6px auto 16px;color:#FFF9EF;max-width:880px;font-weight:700;letter-spacing:-.01em}
.formerly{font-style:italic;color:#e9dcc6;opacity:.85;font-size:19px;margin:2px 0 10px}
.subhead{font-size:22px;color:#efe4d2;max-width:740px;margin:0 auto 6px;line-height:1.5}
.downarrow{color:var(--gold);font-size:22px;margin:16px 0 6px;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
.vslwrap{margin:8px auto 26px;max-width:860px}
.soundbar{display:inline-block;background:var(--red);color:#fff;font-size:16px;font-weight:700;margin-bottom:12px;padding:10px 20px;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.vslframe{position:relative}
.vslwrap video{width:100%;display:block;border-radius:14px;background:#000;box-shadow:0 18px 50px rgba(0,0,0,.5);border:1px solid rgba(255,236,200,.25);aspect-ratio:16/9;object-fit:cover}
.playbig{position:absolute;inset:0;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;cursor:pointer;background:rgba(10,14,30,.22);border:0;border-radius:14px;width:100%;padding:0;font-family:var(--serif)}
.playbig span{width:96px;height:96px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.5);animation:pulse 1.8s ease-in-out infinite}
.playbig span::after{content:"";display:block;margin-left:8px;border-style:solid;border-width:19px 0 19px 32px;border-color:transparent transparent transparent #fff}
.playbig b{color:#fff;font-size:18px;text-shadow:0 2px 8px rgba(0,0,0,.8)}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.herocover img{width:300px;margin:10px auto 28px;border-radius:10px;box-shadow:0 28px 70px rgba(0,0,0,.6)}
.bigcta{display:block;max-width:640px;margin:0 auto;background:linear-gradient(180deg,var(--redlite),var(--red2));color:#fff;text-decoration:none;font-weight:700;font-size:28px;padding:20px 30px 16px;border-radius:14px;box-shadow:0 14px 36px rgba(0,0,0,.4);transition:transform .15s}
.bigcta:hover{transform:translateY(-2px)}
.bigcta small{display:block;font-weight:400;font-size:15px;opacity:.95;margin-top:6px}
.seeinside{display:inline-block;margin:20px auto 4px;color:var(--gold);font-size:18px;font-weight:700}

/* ===== sections ===== */
section{padding:66px 0;scroll-margin-top:56px}
body{counter-reset:sec}
section>.wrap>h2,section>.wrap>.faq>h2{position:relative}
section>.wrap>h2::before{counter-increment:sec;content:counter(sec,decimal-leading-zero);display:block;font-size:15px;letter-spacing:.4em;color:var(--red);margin-bottom:6px;font-weight:600}
h2{font-size:40px;line-height:1.15;margin-bottom:12px;text-align:center;color:var(--ink);font-weight:700}
.lead{font-size:20px;text-align:center;max-width:760px;margin:0 auto 38px;color:var(--ink2)}
.cta{display:inline-block;background:linear-gradient(180deg,var(--redlite),var(--red2));color:#fff;text-decoration:none;font-weight:700;font-size:22px;padding:17px 40px;border-radius:12px;box-shadow:0 10px 28px rgba(161,29,21,.35);transition:.15s;border:0;cursor:pointer;font-family:var(--serif)}
.cta:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(161,29,21,.45)}

/* reveal on scroll (only once JS confirmed it can reveal) */
@media(prefers-reduced-motion:no-preference){
  html.js .rvl{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
  html.js .rvl.on{opacity:1;transform:none}
}

/* how */
.how{background:var(--paper);border-bottom:1px solid var(--line)}
.steps{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;max-width:960px;margin:26px auto 0}
.step{flex:1 1 260px;max-width:300px;display:flex;gap:14px;align-items:flex-start;text-align:left}
.step>b{flex:none;width:44px;height:44px;border-radius:50%;background:var(--blue);color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(28,46,92,.3)}
.st{font-size:20px;font-weight:700;margin-bottom:3px}
.sd{font-size:16.5px;color:var(--ink2);line-height:1.5}
.hownote{text-align:center;margin-top:30px;font-size:19px}

/* dishes */
.dishes{background:var(--box);position:relative}
.dishes:before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:repeating-linear-gradient(90deg,var(--blue2) 0 10px,transparent 10px 20px),repeating-linear-gradient(0deg,rgba(43,74,143,.5) 0 5px,transparent 5px 10px);opacity:.55}
.dishgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:28px}
.dish{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 14px 36px rgba(42,36,32,.08)}
.dish img{width:100%;aspect-ratio:16/9;object-fit:cover}
.dish figcaption{padding:18px 22px 22px}
.dish b{display:block;font-size:22px;margin-bottom:6px}
.dish span{font-size:16.5px;color:var(--ink2);line-height:1.55}

/* math */
.mathgrid{display:flex;gap:26px;flex-wrap:wrap}
.mathcol{flex:1 1 320px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 28px}
.mathcol.bad{border-top:5px solid #9a8b7a}
.mathcol.good{border-top:5px solid var(--green)}
.mathcol h3{font-size:23px;margin-bottom:12px}
.mathcol ul{list-style:none;font-size:17px}
.mathcol li{display:block;padding:9px 0;border-bottom:1px dotted #d8ccb4}
.mathcol li b{display:block;color:var(--red2);margin-top:1px}
.mtotal{font-size:21px;font-weight:700;margin-top:16px;border-top:2px solid #d8ccb4;padding-top:12px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mathcol.good .mtotal{color:var(--green)}
.mathnote{font-size:15px;color:var(--ink2);margin-top:18px;text-align:center;font-style:italic}

/* look inside */
.look{border-top:1px solid var(--line)}
.scroller{display:flex;gap:18px;overflow-x:auto;padding:6px 4px 18px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.pgfig{flex:none;width:300px;scroll-snap-align:center}
.pgfig img{width:100%;height:auto;border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 30px rgba(0,0,0,.16);background:#fff}
.pgfig a{display:block;text-decoration:none;position:relative}
.zoom{position:absolute;right:9px;bottom:9px;background:rgba(0,0,0,.72);color:#fff;font-family:Arial,sans-serif;font-size:12px;letter-spacing:.04em;padding:6px 10px;border-radius:20px}
.pgcap{font-size:15px;color:var(--ink2);margin-top:10px;line-height:1.45}
.scrollhint{text-align:center;font-size:15px;color:var(--ink2);margin-top:4px}
.lookcta{text-align:center;margin-top:30px}

/* inside */
.insidesec{background:var(--paper)}
.bullets{list-style:none;max-width:820px;margin:0 auto;text-align:left}
.bullets li{padding:12px 2px 12px 34px;border-bottom:1px dotted #d8ccb4;font-size:18px;line-height:1.5;position:relative}
.bullets li:before{content:"✓";position:absolute;left:4px;top:12px;color:var(--green);font-weight:700}
.bullets .pg{color:var(--muted);font-size:15px;white-space:nowrap}
.tocclose{max-width:820px;margin:24px auto 0;font-size:18px;color:var(--ink2);text-align:center;font-style:italic}

/* stats */
.stats{background:linear-gradient(160deg,#16213f,var(--blue));color:var(--paper);padding:52px 0}
.stats>.wrap>h2::before{display:none}
.statgrid{display:flex;gap:40px;justify-content:center;flex-wrap:wrap;text-align:center}
.stat b{display:block;font-size:54px;color:var(--gold);line-height:1}
.stat span{font-size:16px;color:#e9dcc6}

/* shop */
.shop{background:var(--paper)}
.shopcard{max-width:980px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 70px rgba(0,0,0,.10);overflow:hidden}
.shoptop{display:flex;gap:38px;padding:38px;flex-wrap:wrap}
.shopcov{flex:0 0 250px}
.shopcov img{width:250px;border-radius:10px;box-shadow:0 18px 44px rgba(0,0,0,.25);transform:rotate(-1.5deg)}
.shopinfo{flex:1 1 380px}
.shopformer{font-size:14px;font-style:italic;color:var(--muted)}
.shopname{font-size:34px;font-weight:700;margin:2px 0 6px;line-height:1.15}
.shopstars{color:#d4932f;font-size:18px;letter-spacing:2px}
.shopstars small{color:var(--muted);letter-spacing:0;font-size:14px;margin-left:8px}
.shopbul{list-style:none;margin:14px 0 18px;font-size:17px;line-height:1.7}
.shopbul li{padding-left:26px;position:relative}
.shopbul li::before{content:"✓";color:var(--green);font-weight:700;position:absolute;left:0}
.shopprice{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px}
.pnow2{font-size:42px;color:var(--red);font-weight:700;line-height:1}
.pwas2{font-size:20px;color:var(--muted);text-decoration:line-through}
.psave2{display:inline-block;background:var(--green);color:#fff;font-size:13px;font-weight:700;letter-spacing:.06em;border-radius:999px;padding:6px 13px}
.shopbuy{display:block;text-align:center;background:linear-gradient(180deg,var(--redlite),var(--red2));color:#fff;text-decoration:none;font-weight:700;font-size:23px;padding:17px 20px;border-radius:12px;margin-top:16px;box-shadow:0 10px 26px rgba(161,29,21,.35)}
.shopbuy:hover{filter:brightness(1.05)}
.shopsub{text-align:center;font-size:13.5px;color:var(--muted);margin-top:8px}
.pair{border-top:1px dashed #d8ccb4;background:#FFFDF8;padding:24px 38px;display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.paircovs{display:flex;gap:9px}
.pair img{width:80px;border-radius:6px;box-shadow:0 8px 22px rgba(0,0,0,.22)}
.pairtxt{flex:1 1 260px}
.pairhead{font-size:13px;letter-spacing:.2em;color:var(--red);font-weight:700;margin-bottom:3px}
.pairname{font-size:20px;font-weight:700}
.pairname .and{color:var(--muted);font-weight:400}
.pairmeta{font-size:14.5px;color:var(--ink2);margin-top:2px}
.pairbtns{display:flex;flex-direction:column;gap:8px;min-width:240px}
.pairboth{display:block;text-align:center;background:var(--green);color:#fff;text-decoration:none;font-weight:700;font-size:16.5px;padding:13px 16px;border-radius:10px}
.pairboth s{opacity:.7;font-weight:400;font-size:14px}
.pairone{display:block;text-align:center;border:2px solid var(--blue2);color:var(--blue2);text-decoration:none;font-size:13.5px;line-height:1.35;padding:8px 14px;border-radius:10px}
.pairone b{display:block;font-size:15.5px;margin-top:1px}
.pairdeal{font-size:13px;color:var(--green);text-align:center;font-weight:700}
.shoprev{background:#FBF6EE;border-top:1px solid var(--line);padding:24px 38px 30px}
.shoprevh{font-size:14px;letter-spacing:.24em;color:var(--red);margin-bottom:14px;font-weight:600}
.shopcards{display:flex;gap:16px;flex-wrap:wrap}
.shopcardr{display:none;flex:1 1 250px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.shopcardr.is-on{display:block;animation:revdrop .28s ease}
@keyframes revdrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.rst{color:#d4932f;font-size:14px;letter-spacing:2px;margin-bottom:6px}
.shopcardr p{font-size:15.5px;line-height:1.5;color:#4a3f35;font-style:italic}
.shopcardr .who{margin-top:8px;font-size:13.5px;color:var(--muted)}
.revmore{display:block;width:100%;margin-top:14px;background:#fff;border:2px solid var(--blue2);color:var(--blue2);font:inherit;font-weight:700;font-size:15px;padding:11px 14px;border-radius:10px;cursor:pointer}
.revmore:hover{background:var(--blue2);color:#fff}
.shopfoot{border-top:1px solid var(--line);padding:16px 38px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap;font-size:14px;color:var(--ink2)}

/* author */
.author{background:var(--box)}
.author .wrap{display:flex;flex-direction:column;gap:28px;align-items:center;text-align:center;max-width:860px}
.author img{width:420px;max-width:90%;border-radius:16px;box-shadow:0 16px 40px rgba(0,0,0,.18)}
.author .lead{margin-bottom:18px}
.sig{font-family:var(--hand);font-size:44px;color:var(--blue2);margin-top:4px;transform:rotate(-3deg)}

/* faq */
.faq{max-width:780px;margin:0 auto}
.faq h2{margin-bottom:24px}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;font-weight:700;font-size:19.5px;padding:14px 34px 14px 0;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:4px;top:10px;font-size:26px;color:var(--red);font-weight:400}
.faq details[open] summary:after{content:"−"}
.faq .a{font-size:17.5px;color:var(--ink2);padding:0 0 16px}

/* contact */
.contact{background:var(--box);border-top:1px solid var(--line)}
.cform{max-width:520px;margin:0 auto;text-align:left;position:relative}
.cform label{display:block;font-size:15px;font-weight:700;margin:14px 0 5px}
.cform input,.cform textarea{width:100%;padding:13px 14px;font-size:16px;font-family:inherit;border:1px solid #d9c8ad;border-radius:10px;background:#fff;color:var(--ink)}
.cform input:focus,.cform textarea:focus{outline:2px solid var(--blue2);border-color:transparent}
.cform textarea{min-height:120px;resize:vertical}
.cform button{width:100%;margin-top:14px;background:var(--blue);color:#fff;border:0;font-weight:700;font-size:18px;font-family:inherit;padding:15px;border-radius:10px;cursor:pointer}
.cform button:disabled{opacity:.6}
.cmsg{font-size:16px;margin-top:12px;min-height:1px}

/* final */
.lastcta{background:linear-gradient(160deg,#16213f,var(--blue))}
.lastcta h2{color:var(--paper)}
.lastcta h2::before{color:var(--gold)!important}
.lasttext{text-align:center;max-width:600px;margin:0 auto 26px;color:#e9dcc6;font-size:19px}

/* footer */
footer{background:#121a33;color:#d9cdb9;text-align:center;padding:44px 0 52px;font-size:15px}
footer a{color:var(--gold)}
footer .fq{font-size:17px;margin-bottom:12px}
footer .fsmall{font-size:14px;opacity:.85;margin-bottom:10px}
footer .flinks{font-size:14px;margin-bottom:16px}
footer .fbrand{font-style:italic;opacity:.9}
footer .fdisc{font-size:12.5px;opacity:.6;margin-top:14px;max-width:640px;margin-left:auto;margin-right:auto}

/* sticky mobile bar */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;align-items:center;gap:12px;background:rgba(18,26,51,.97);border-top:1px solid rgba(231,194,122,.3);padding:10px 14px;box-shadow:0 -6px 20px rgba(0,0,0,.35)}
.sticky.on{display:flex}
.sl{flex:1;min-width:0;color:var(--paper);line-height:1.25}
.sl b{display:block;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl span{font-size:13px;color:#d9cdb9}
.sticky a{flex:none;background:linear-gradient(180deg,var(--redlite),var(--red2));color:#fff;text-decoration:none;font-weight:700;font-size:17px;padding:13px 22px;border-radius:9px}
@media(min-width:769px){.sticky.on{display:none}}

/* popup */
.sbackdrop{position:fixed;inset:0;z-index:74;background:rgba(15,18,30,.6);opacity:0;visibility:hidden;transition:opacity .35s}
.sbackdrop.on{opacity:1;visibility:visible}
.slidein{position:fixed;z-index:75;left:50%;top:50%;width:600px;max-width:calc(100vw - 32px);display:flex;background:#FFFDF8;border-radius:20px;box-shadow:0 40px 110px rgba(0,0,0,.5);overflow:hidden;opacity:0;visibility:hidden;transform:translate(-50%,-50%) scale(.92);transition:opacity .35s,transform .35s cubic-bezier(.2,.8,.2,1),visibility .35s}
.slidein.on{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.spleft{flex:0 0 200px;background:radial-gradient(120% 90% at 30% 20%,var(--blue2),var(--blue) 60%,#121a33);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:26px 18px}
.spleft img{width:132px;border-radius:6px;transform:rotate(-4deg);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.spsave{background:var(--red);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.1em;border-radius:999px;padding:7px 12px;white-space:nowrap}
.spright{flex:1;padding:26px 26px 20px;position:relative;min-width:0}
.speye{font-size:11.5px;font-weight:700;letter-spacing:.22em;color:var(--red);margin-bottom:6px}
.slidein h3{font-size:26px;margin:0 0 4px;line-height:1.15;padding-right:30px}
.spsub{font-size:14px;color:var(--ink2);margin-bottom:10px}
.spnow{font-size:34px;font-weight:700;color:var(--red)}
.spwas{font-size:17px;color:var(--ink2);text-decoration:line-through;margin-left:9px;opacity:.6}
.splabel{font-size:13px;color:var(--ink2);margin:2px 0 8px}
.spclockwrap{margin:0 0 14px}
#spclock{display:inline-block;background:#121a33;color:var(--gold);font-size:24px;font-weight:700;letter-spacing:4px;font-variant-numeric:tabular-nums;padding:8px 16px;border-radius:10px}
#spbuy{display:block;text-align:center;background:linear-gradient(180deg,var(--redlite),var(--red2));color:#fff;text-decoration:none;font-weight:700;font-size:17.5px;padding:14px 12px;border-radius:11px}
.slidein .fine{font-size:12.5px;color:#9b8a7d;margin:10px 0 0;line-height:1.4;text-align:center}
.slidein .fine a{color:inherit}
.sclose{position:absolute;top:10px;right:10px;width:40px;height:40px;font-size:24px;line-height:1;border:0;background:rgba(255,253,248,.92);color:#8b7a6c;cursor:pointer;border-radius:50%;font-family:Arial,sans-serif;z-index:2;box-shadow:0 2px 8px rgba(0,0,0,.15)}

/* lightbox */
.lbox{position:fixed;inset:0;z-index:90;background:#140e0c;display:none;overflow:auto;padding:56px 10px 30px;text-align:center}
.lbox.on{display:block}
.lbox img{width:100%;max-width:780px;height:auto;border-radius:6px;margin:0 auto}
.lbox .cap{color:#e8ded2;font-size:15px;line-height:1.5;max-width:780px;margin:14px auto 0}
.lbclose{position:fixed;top:10px;right:10px;z-index:91;width:52px;height:52px;border:0;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:30px;line-height:52px;cursor:pointer;font-family:Arial,sans-serif}
.lbhint{position:fixed;top:22px;left:14px;z-index:91;color:#bcae9f;font-size:13px;font-family:Arial,sans-serif}

/* simple pages */
.minihead{background:var(--blue);padding:14px 20px;text-align:center}
.minihead a{color:#fff;text-decoration:none;font-weight:700;font-size:20px}
.page{padding:46px 0 70px;min-height:60vh}
.page h3{font-size:21px;margin:24px 0 6px}
.page p{margin-bottom:10px}
.ptitle{font-size:38px;text-align:center;margin-bottom:14px;line-height:1.15}
.success .sicon{width:74px;height:74px;border-radius:50%;background:var(--green);color:#fff;font-size:40px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.sitems{display:flex;flex-direction:column;gap:12px;max-width:520px;margin:0 auto 18px}
.sitem{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px}
.sitem img{width:64px;border-radius:6px}
.sitem div{flex:1;text-align:left;font-weight:700}
.sitem a{background:linear-gradient(180deg,var(--redlite),var(--red2));color:#fff;text-decoration:none;font-weight:700;padding:12px 18px;border-radius:10px;white-space:nowrap}

/* bundle builder */
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;margin:10px 0 24px}
.bcard{position:relative;display:flex;gap:14px;align-items:center;background:#fff;border:2px solid var(--line);border-radius:14px;padding:14px;cursor:pointer}
.bcard input{position:absolute;opacity:0}
.bcard img{width:70px;border-radius:6px}
.bci{display:flex;flex-direction:column;gap:2px;font-size:15px}
.bci span{color:var(--ink2);font-size:13.5px}
.bci em{font-style:normal;color:var(--red);font-weight:700}
.tick{position:absolute;top:10px;right:10px;width:24px;height:24px;border-radius:50%;border:2px solid var(--line)}
.bcard:has(input:checked){border-color:var(--green);box-shadow:0 8px 22px rgba(47,93,58,.15)}
.bcard:has(input:checked) .tick{background:var(--green);border-color:var(--green)}
.bcard:has(input:checked) .tick:after{content:"✓";color:#fff;font-size:14px;display:flex;justify-content:center;line-height:20px}
.btotal{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin-bottom:12px}
.btotal b{font-size:30px;color:var(--red)}
.btotal s{color:var(--muted)}
#bcount{display:block;font-size:14px;color:var(--ink2)}

/* ===== mobile ===== */
@media(max-width:640px){
  body{font-size:17px;overflow-x:hidden;padding-bottom:76px}
  .wrap{padding:0 18px}
  section{padding:46px 0}
  h2{font-size:30px}
  .lead{font-size:18px;margin-bottom:28px}
  .bar{font-size:13px;line-height:1.5;padding:8px 10px}
  .bar .cd span{min-width:38px;padding:2px 6px}
  .wrapc{padding:24px 16px 38px}
  .headc h1{font-size:31px;line-height:1.16}
  .formerly{font-size:15px}
  .subhead,.downarrow{display:none}
  .soundbar{font-size:14px;padding:8px 14px}
  .bigcta{font-size:22px;padding:16px 16px 13px}
  .dishgrid{grid-template-columns:1fr}
  .steps{flex-direction:column;align-items:center;gap:16px}
  .mathcol{padding:20px 18px}
  .stat b{font-size:42px}
  .statgrid{gap:26px}
  .shoptop{padding:22px}
  .shopcov{flex:1 1 100%}
  .shopcov img{width:200px;margin:0 auto}
  .shopname{font-size:26px}
  .pnow2{font-size:36px}
  .pair{padding:20px 22px}
  .shoprev{padding:20px 22px 24px}
  .shopfoot{padding:14px 20px}
  .pgfig{width:82vw}
  .slidein{left:16px;right:16px;width:auto;transform:translateY(-50%) scale(.92)}
  .slidein.on{transform:translateY(-50%) scale(1)}
  .spleft{display:none}
  .ptitle{font-size:30px}
  .lookcta .cta,.lastcta .cta{display:block;font-size:19px;padding:16px 20px}
  .sitem{flex-wrap:wrap}
  .sitem a{width:100%;text-align:center}
}