/* OptHub — wholesale shoes. Ink + logo orange; condensed display type like the logo; shipping-label motif */
:root{
  --bg:#ffffff; --bg2:#f4f3f1; --surface:#ffffff; --ink:#141414; --muted:#66625d; --line:#e3e0dc;
  --accent:#f07800; --accent-ink:#b85a00; --accent-soft:#fff1e2; --on-accent:#141414;
  --ok:#1d7a44; --ok-soft:#e4f3ea; --warn:#8a5a00; --warn-soft:#fbf0d9;
  --display:"Fira Sans Extra Condensed","Arial Narrow","Roboto Condensed",Arial,sans-serif;
  --body:"Golos Text","Segoe UI",Roboto,Arial,sans-serif;
  --r:10px; --wrap:1200px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#121110; --bg2:#191715; --surface:#1d1b18; --ink:#f3efea; --muted:#a59e96; --line:#2e2a26;
  --accent:#ff8a1f; --accent-ink:#ff9d45; --accent-soft:#33210f; --on-accent:#141414;
  --ok:#62c98e; --ok-soft:#163222; --warn:#e7b65c; --warn-soft:#32260f; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#121110; --bg2:#191715; --surface:#1d1b18; --ink:#f3efea; --muted:#a59e96; --line:#2e2a26;
  --accent:#ff8a1f; --accent-ink:#ff9d45; --accent-soft:#33210f; --on-accent:#141414;
  --ok:#62c98e; --ok-soft:#163222; --warn:#e7b65c; --warn-soft:#32260f; color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55}
img{max-width:100%;display:block}
a{color:var(--accent-ink)}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.05;margin:0;text-wrap:balance;letter-spacing:.005em}
h1{font-size:clamp(34px,5vw,58px);font-weight:800}
h2{font-size:clamp(26px,3.2vw,36px)}
h3{font-size:21px}
p{margin:0}
main>section,.foot-in,.top-in{max-width:var(--wrap);margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
main{display:grid;gap:56px;padding-block:28px 72px}

/* header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--bg)}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:24px;min-height:64px;padding-block:8px}
.logo{font-family:var(--display);font-weight:800;font-size:32px;line-height:1;color:var(--ink);text-decoration:none;letter-spacing:-.005em}
.logo span{color:var(--accent)}
.nav{display:flex;gap:4px;flex:1;overflow-x:auto;scrollbar-width:none}
.nav a{color:var(--ink);text-decoration:none;font-weight:500;padding:8px 10px;border-radius:8px;white-space:nowrap}
.nav a:hover,.nav a[aria-current]{background:var(--bg2)}
.top-cta{display:flex;align-items:center;gap:14px}
.tel{color:var(--ink);text-decoration:none;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:var(--on-accent);font-weight:700;text-decoration:none;border:2px solid var(--accent);border-radius:8px;padding:9px 16px;cursor:pointer;font:inherit;font-weight:700;line-height:1.2;white-space:nowrap}
.btn:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--bg)}
.btn-lg{padding:14px 22px;font-size:17px}
.btn-sm{padding:7px 12px;font-size:14px}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:48px;align-items:center;padding-top:12px}
.hero-text{display:grid;gap:20px;min-width:0}
.lead{font-size:clamp(17px,1.6vw,20px);color:var(--muted);max-width:34em}
.hero-act{display:flex;gap:12px;flex-wrap:wrap}
.label{background:var(--surface);border:3px solid var(--ink);border-radius:6px;padding:18px 20px;display:grid;gap:10px;transform:rotate(-1.2deg);box-shadow:8px 8px 0 var(--accent);max-width:420px;justify-self:end;width:100%}
.label-row{display:flex;justify-content:space-between;gap:12px;border-top:1px dashed var(--line);padding-top:8px;font-size:15px}
.label-row b{font-family:var(--display);font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.label-head{border-top:0;padding-top:0;font-family:var(--display);font-weight:800;font-size:22px;text-transform:uppercase;letter-spacing:.04em}
.label-head span:last-child{font-size:15px;font-weight:600;color:var(--muted);letter-spacing:.02em;align-self:center}
.label-head b{color:var(--accent);font-weight:800}
.label-big{font-family:var(--display);font-weight:800;font-size:clamp(34px,4.4vw,46px);line-height:1;padding:6px 0;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.label-run{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.label-run span{border:2px solid var(--ink);border-radius:4px;text-align:center;font-family:var(--display);font-weight:700;font-size:18px;padding:4px 0;font-variant-numeric:tabular-nums}
.label-bar{height:34px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 7px,transparent 7px 9px,var(--ink) 9px 10px,transparent 10px 13px);opacity:.9}

/* terms strip */
.terms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:var(--r);background:var(--bg2)}
.terms div{padding:18px 20px;display:grid;gap:4px;min-width:0}
.terms div+div{border-left:1px solid var(--line)}
.terms b{font-family:var(--display);font-size:24px;font-weight:700;color:var(--ink)}
.terms span{color:var(--muted);font-size:14.5px}

/* catalog */
.cat{display:grid;gap:20px}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.sec-head a{font-weight:600}
.catalog{display:grid;gap:20px}
.cat-bar{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap}
.sort{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--muted)}
.sort select{font:inherit;font-weight:600;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:8px;padding:7px 30px 7px 12px;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.more-wrap{display:grid;justify-items:center;gap:8px;padding-top:12px}
.more-btn{min-width:min(320px,100%)}
.more-btn[hidden]{display:none}
.more-count{color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips button{font:inherit;font-weight:600;font-size:15px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:7px 14px;cursor:pointer}
.chips button span{color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums}
.chips button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chips button[aria-pressed="true"] span{color:inherit;opacity:.7}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:24px 20px}
.card{display:flex;flex-direction:column;gap:10px;min-width:0}
.card[hidden]{display:none}
.card-pic{position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--bg2);max-width:100%}
.track{display:flex;width:100%;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain}
.track::-webkit-scrollbar{display:none}
.track img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:start;scroll-snap-stop:always}
.track .noimg{flex:0 0 100%}
.sl{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#141414;font:700 26px/1 var(--display);display:grid;place-items:center;padding:0 0 3px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.18);opacity:.9;transition:opacity .15s}
.sl:hover{opacity:1;background:#fff}
.sl-prev{left:8px}
.sl-next{right:8px}
.sl[hidden]{display:none}
.dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:6px;pointer-events:none}
.dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.dots i.on{background:#fff;width:18px;border-radius:4px}
@media (hover:hover){.card-pic .sl{opacity:0}.card-pic:hover .sl,.card-pic .sl:focus-visible{opacity:.92}}
.noimg{display:grid;place-items:center;height:100%;color:var(--muted);font-size:14px;aspect-ratio:4/5;background:var(--bg2);border-radius:var(--r)}
.stamp{position:absolute;left:10px;top:10px;background:var(--ok-soft);color:var(--ok);font-size:12.5px;font-weight:700;padding:3px 9px;border-radius:999px}
.stamp-old{background:var(--warn-soft);color:var(--warn)}
.more{position:absolute;right:10px;bottom:10px;background:rgba(20,20,20,.72);color:#fff;font-size:12.5px;font-weight:600;padding:3px 8px;border-radius:999px}
.card-body{display:grid;gap:6px}
.card h3{font-family:var(--body);font-size:15.5px;font-weight:600;line-height:1.3}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a:hover{text-decoration:underline}
.price{display:flex;align-items:baseline;gap:6px}
.price b{font-family:var(--display);font-size:28px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.price span{color:var(--muted);font-size:14px}
.price-lg b{font-size:46px}
.price-rng{flex-wrap:wrap;column-gap:6px;row-gap:0}
.price-rng b{font-size:24px}
.price-lg.price-rng b{font-size:40px}
.cart-total b{text-align:right}
.boxline{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.sizes{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.sizes li{font-size:12.5px;font-weight:600;border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-variant-numeric:tabular-nums;color:var(--ink)}
.sizes-lg li{font-family:var(--display);font-size:20px;padding:4px 12px;border:2px solid var(--ink)}
.card-act{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:4px}
.art{font:inherit;font-size:13px;color:var(--muted);background:none;border:1px dashed var(--line);border-radius:6px;padding:5px 8px;cursor:pointer;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.art:hover{color:var(--ink);border-color:var(--ink)}
.art.copied,.btn.copied{border-style:solid;border-color:var(--ok);color:var(--ok)}

/* cart */
.cart-btn b{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--ink);color:var(--bg);font-size:13px;font-variant-numeric:tabular-nums}
.cart-btn:not(.has) b{opacity:.35}
.btn.in-cart{background:var(--ink);border-color:var(--ink);color:var(--bg)}
body.no-scroll{overflow:hidden}
.cart{position:fixed;inset:0;z-index:50}
.cart-shade{position:absolute;inset:0;background:rgba(10,10,10,.5)}
.cart-panel{position:absolute;top:0;right:0;bottom:0;width:min(460px,100%);background:var(--bg);color:var(--ink);display:flex;flex-direction:column;gap:14px;overflow-y:auto;padding:calc(18px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) 20px;box-shadow:-10px 0 30px rgba(0,0,0,.2)}
.cart-head{display:flex;justify-content:space-between;align-items:center}
.cart-x{font:400 32px/1 var(--body);background:none;border:0;color:var(--ink);cursor:pointer;width:40px;height:40px}
.cart-empty p{color:var(--muted)}
.cart-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ci{display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.ci-pic{display:block;aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:var(--bg2)}
.ci-pic img{width:100%;height:100%;object-fit:cover}
.ci-info{display:grid;gap:6px;min-width:0}
.ci-t{color:var(--ink);font-weight:600;text-decoration:none;line-height:1.3}
.ci-m{font-size:13px;color:var(--muted)}
.ci-row{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.ci-row b{font-family:var(--display);font-size:22px;font-variant-numeric:tabular-nums}
.qty{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:8px}
.qty button{font:600 18px/1 var(--body);width:34px;height:34px;background:none;border:0;color:var(--ink);cursor:pointer}
.qty span{min-width:92px;text-align:center;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.ci-del{justify-self:start;font:inherit;font-size:13px;background:none;border:0;padding:0;color:var(--muted);text-decoration:underline;cursor:pointer}
.cart-foot{display:grid;gap:10px}
.cart-total{display:flex;justify-content:space-between;align-items:baseline}
.cart-total span{font-weight:600}
.cart-total b{font-family:var(--display);font-size:34px;font-variant-numeric:tabular-nums}
.cart-sub{color:var(--muted);font-size:14px}
.cart-form{display:grid;gap:6px;padding-top:6px}
.cart-form label{font-size:14px;font-weight:600}
.cart-form input,.cart-text{font:inherit;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:6px;width:100%}
.cart-form .btn{margin-top:6px}
.cart-note{font-size:13px;color:var(--muted)}
.cart-text{min-height:160px;font-size:13px;resize:vertical}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:60;background:var(--ink);color:var(--bg);padding:12px 16px;border-radius:10px;font-size:14.5px;display:flex;gap:12px;align-items:center;max-width:calc(100% - 32px);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.toast button{font:inherit;font-weight:700;background:none;border:0;color:var(--accent);cursor:pointer;white-space:nowrap;padding:0}

/* how / trust / faq */
.how{display:grid;gap:20px}
.how ol{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.how li{counter-increment:s;display:grid;gap:6px;align-content:start;padding-top:14px;border-top:3px solid var(--ink)}
.how li::before{content:counter(s);font-family:var(--display);font-weight:800;font-size:40px;line-height:1;color:var(--accent)}
.how b{font-size:18px}
.how span{color:var(--muted);font-size:15px}
.trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;background:var(--bg2);border-radius:var(--r);padding-block:28px}
.trust div{display:grid;gap:6px;align-content:start;min-width:0}
.trust p{color:var(--muted);font-size:15px}
.seo-text,.text{display:grid;gap:14px;max-width:780px}
.seo-text p,.text p{color:var(--muted)}
.text h2{font-size:26px;margin-top:10px}
.faq{display:grid;gap:8px;max-width:820px}
.faq h2{margin-bottom:8px}
.faq details{border-bottom:1px solid var(--line);padding:12px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:"+";font-family:var(--display);font-size:24px;line-height:1;color:var(--accent)}
.faq details[open] summary::after{content:"–"}
.faq summary::-webkit-details-marker{display:none}
.faq details p{color:var(--muted);padding-top:8px;max-width:65ch}

/* inner pages */
.page-head{display:grid;gap:14px}
.intro{display:grid;gap:8px;max-width:760px;color:var(--muted);font-size:17px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;font-size:14px;color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--line)}
.crumbs a{color:var(--muted)}
.prod{display:grid;gap:16px}
.prod-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:start}
.gallery{display:grid;gap:10px;min-width:0;max-width:600px}
.pg-main{position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--bg2);max-width:100%}
.pg-track img{cursor:zoom-in}
.pg-count{position:absolute;right:10px;bottom:10px;background:rgba(20,20,20,.72);color:#fff;font-size:13px;font-weight:600;padding:3px 9px;border-radius:999px;font-variant-numeric:tabular-nums}
.pg-zoom{position:absolute;right:10px;top:10px;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#141414;font-size:20px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.pg-main .sl{opacity:.92}
.pg-thumbs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.pg-thumbs button{flex:0 0 72px;aspect-ratio:4/5;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;background:var(--bg2);cursor:pointer;opacity:.65}
.pg-thumbs button.on{border-color:var(--accent);opacity:1}
.pg-thumbs img{width:100%;height:100%;object-fit:cover}
.lb{position:fixed;inset:0;z-index:70;background:rgba(8,8,8,.96)}
.lb-track{display:flex;width:100%;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior:contain}
.lb-track::-webkit-scrollbar{display:none}
.lb-slide{flex:0 0 100%;height:100%;display:grid;place-items:center;scroll-snap-align:start;scroll-snap-stop:always;padding:calc(56px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) calc(56px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
.lb-slide img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}
.lb-x{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));right:max(10px,env(safe-area-inset-right,0px));width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font:400 34px/1 var(--body);cursor:pointer}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font:700 34px/1 var(--display);cursor:pointer;padding-bottom:4px}
.lb-nav:hover,.lb-x:hover{background:rgba(255,255,255,.26)}
.lb-prev{left:max(12px,env(safe-area-inset-left,0px))}
.lb-next{right:max(12px,env(safe-area-inset-right,0px))}
.lb-count{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));color:#fff;font-weight:600;font-size:15px;font-variant-numeric:tabular-nums}
@media (max-width:640px){.lb-nav{display:none}}
.prod-info{display:grid;gap:14px;position:sticky;top:88px;min-width:0}
.prod-info h2{font-size:20px;margin-top:6px}
.muted{color:var(--muted);font-size:14.5px}
.feats{margin:0;padding-left:20px;display:grid;gap:4px}
.prod-act{display:flex;gap:10px;flex-wrap:wrap}
.contacts{max-width:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}

/* footer */
.foot{background:var(--bg2);border-top:1px solid var(--line);padding-block:40px 28px}
.foot-in{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:28px}
.foot h3{font-size:18px;margin-bottom:8px}
.foot p{color:var(--muted);font-size:14.5px;line-height:1.7}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--ink)}
.foot-note{max-width:var(--wrap);margin:28px auto 0;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));font-size:13px;color:var(--muted)}

@media (max-width:980px){
  .hero{grid-template-columns:1fr;gap:32px}
  .label{justify-self:start;transform:none}
  .terms{grid-template-columns:repeat(2,minmax(0,1fr))}
  .terms div:nth-child(3){border-left:0}
  .terms div:nth-child(n+3){border-top:1px solid var(--line)}
  .how ol,.trust{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-in{grid-template-columns:1fr 1fr}
  .prod-grid{grid-template-columns:1fr}
  .prod-info{position:static}
  .contacts{grid-template-columns:1fr}
  .tel{display:none}
}
@media (max-width:640px){
  main{gap:40px}
  .top-in{flex-wrap:wrap;gap:8px 16px}
  .nav{order:3;flex-basis:100%;margin-inline:-6px}
  .top-cta{margin-left:auto}
  .btn-tg,.cart-btn{padding:7px 12px;font-size:14px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
  .price b{font-size:23px}
  .price-rng b{font-size:18px}
  .price-lg.price-rng b{font-size:32px}
  .card-act{flex-direction:column;align-items:stretch}
  .card-act .btn{width:100%}
  .terms,.how ol,.trust,.foot-in{grid-template-columns:1fr}
  .terms div+div{border-left:0;border-top:1px solid var(--line)}
  .label-run span{font-size:15px}
}
.mbar{display:none}
@media (max-width:640px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .top{position:static}
  .top-cta{display:none}
  .mbar{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--bg);border-top:1px solid var(--line);padding:8px max(12px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
  .mbar a,.mbar button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:46px;border-radius:10px;font:inherit;font-weight:700;font-size:15px;text-decoration:none;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
  .mbar-cart{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--on-accent)!important}
  .mbar-cart b{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--on-accent);color:var(--accent);font-size:13px}
  .toast{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .hero-act .btn{width:100%}
  .card-act .art{display:none}
  .boxline{font-size:13px}
  .sl{width:32px;height:32px;font-size:22px}
  .prod-act .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}