/* ROYAL SKATE storefront */
body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
@media(min-width:900px){body{padding-bottom:0}}
.app{min-height:60vh;outline:0;animation:pg .2s var(--t) both}
@keyframes pg{from{opacity:0;transform:translateY(6px)}}
.app.leaving{opacity:0;transition:opacity .12s}
section.sec{padding-block:36px}
@media(min-width:900px){section.sec{padding-block:56px}}
.sec-h{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:20px}
.sec-h h2{font-size:22px}.sec-h p{color:var(--ink3);font-size:14px;margin-top:2px}
@media(min-width:900px){.sec-h h2{font-size:28px}}
.bg2{background:var(--bg2)}

/* announcement */
.announce{background:var(--ink);color:#fff;font-size:13px;position:relative;height:38px;overflow:hidden}
.announce .slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;padding-inline:16px;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s;text-align:center;white-space:nowrap}
.announce .slide.on{opacity:1;transform:none}
.announce a.cta{background:rgba(255,255,255,.14);padding:2px 10px;border-radius:99px;font-weight:600}
.announce a.cta:hover{background:rgba(255,255,255,.24)}
@media(max-width:560px){.announce .slide{font-size:12px}.announce a.cta{display:none}}

/* header */
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line);transition:box-shadow var(--t)}
.header .bar{display:flex;align-items:center;gap:14px;height:64px;transition:height var(--t)}
.header.sm .bar{height:54px}.header.sm{box-shadow:0 6px 20px -16px rgba(20,23,28,.3)}
.logo{display:flex;align-items:center;gap:8px;flex:none}
.logo img{height:34px;width:auto;transition:height var(--t)}.header.sm .logo img{height:28px}
.logo-txt{display:none;font-weight:800;letter-spacing:.08em;font-size:15px;line-height:1}
.logo-txt b{color:var(--blue)}
.nav{display:none;gap:2px;margin-inline-start:12px}
.nav a{padding:8px 11px;border-radius:10px;font-weight:500;font-size:14.5px;color:var(--ink2);transition:var(--t)}
.nav a:hover{background:var(--bg3);color:var(--ink)}.nav a.on{color:var(--blue-d);background:var(--blue-soft)}
.hsearch{display:none;position:relative;flex:1;max-width:340px;margin-inline-start:auto}
.hsearch .input{min-height:42px;border-radius:99px;padding-inline-start:42px;background:var(--bg2);border-color:transparent}
.hsearch .input:focus{background:#fff;border-color:var(--blue)}
.hsearch>.i-wrap{position:absolute;top:50%;inset-inline-start:14px;transform:translateY(-50%);color:var(--ink3);display:flex;pointer-events:none}
.hactions{display:flex;align-items:center;gap:2px;margin-inline-start:auto}
.hbtn{position:relative;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;transition:var(--t);color:var(--ink)}
.hbtn:hover{background:var(--bg3)}.hbtn:active{transform:scale(.92)}
.hbtn .i{width:23px;height:23px}
.cnt{position:absolute;top:3px;inset-inline-end:2px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--blue);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
.cnt.bump{animation:bump .3s}@keyframes bump{50%{transform:scale(1.35)}}
.lang{font-size:12.5px;font-weight:700;padding:0 10px;width:auto;letter-spacing:.04em}
@media(min-width:900px){.nav{display:flex}.hsearch{display:block}.hactions{margin-inline-start:0}.logo-txt{display:block}.hide-d{display:none!important}}
@media(max-width:899px){.hide-m{display:none!important}}
.suggest{position:absolute;top:calc(100% + 8px);inset-inline:0;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh);padding:8px;z-index:60;min-width:340px}
.sg-i{display:flex;gap:12px;align-items:center;padding:8px;border-radius:12px}.sg-i:hover,.sg-i.on{background:var(--bg2)}
.sg-i img{width:44px;height:44px;border-radius:10px;background:var(--bg2);object-fit:contain;padding:4px}
.sg-t{font-size:12px;color:var(--ink3);padding:8px 8px 4px}

/* mobile search overlay */
.msearch{position:fixed;inset:0;z-index:110;background:#fff;display:flex;flex-direction:column;animation:fade .15s both}
.msearch .top{display:flex;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);align-items:center}
.msearch .res{overflow:auto;padding:8px 12px;flex:1}

/* bottom nav */
.bottomnav{position:fixed;bottom:0;inset-inline:0;z-index:55;display:flex;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.bottomnav a,.bottomnav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0 7px;font-size:11px;font-weight:600;color:var(--ink3);transition:var(--t);position:relative}
.bottomnav .i{width:23px;height:23px}
.bottomnav .on{color:var(--blue-d)}.bottomnav a:active,.bottomnav button:active{transform:scale(.93)}
@media(min-width:900px){.bottomnav{display:none}}

/* hero */
.hero{background:linear-gradient(180deg,var(--bg2),#fff);overflow:hidden}
.hero .in{display:grid;gap:12px;align-items:center;padding-block:28px 24px}
.hero .copy{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.hero h1{font-size:30px;line-height:1.2;letter-spacing:-.02em}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero p.lead{color:var(--ink2);font-size:16px;max-width:520px}
.hero .art{position:relative;max-width:520px;margin-inline:auto;width:100%}
.hero .art img{width:100%;height:auto;animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}
.hero .cta{display:flex;gap:10px;flex-wrap:wrap}
.hero .trust{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin-top:6px;font-size:13.5px;color:var(--ink2);font-weight:500}
.hero .trust span{display:flex;align-items:center;gap:7px}.hero .trust .i{color:var(--blue);width:18px;height:18px}
@media(min-width:900px){.hero .in{grid-template-columns:1.05fr 1fr;gap:32px;padding-block:56px 48px}.hero h1{font-size:46px}.hero .trust{grid-template-columns:repeat(4,auto);gap:8px 22px}.hero .trust-wrap{grid-column:1/-1}}
.speed{position:absolute;inset-inline-start:-6%;top:62%;width:130px;display:none}

/* banner slider */
.slider{position:relative;border-radius:var(--r-l);overflow:hidden;background:var(--bg2)}
.slides{display:flex;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.slide-b{min-width:100%;position:relative;aspect-ratio:16/10;display:flex;align-items:center}
@media(min-width:760px){.slide-b{aspect-ratio:21/7}}
.slide-b picture,.slide-b img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide-b .txt{position:relative;padding:20px;max-width:520px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.slide-b.center{justify-content:center;text-align:center}.slide-b.center .txt{align-items:center}
.slide-b.end{justify-content:flex-end}
.slide-b h3{font-size:22px}@media(min-width:760px){.slide-b h3{font-size:30px}.slide-b .txt{padding:36px}}
.dots{position:absolute;bottom:10px;inset-inline:0;display:flex;gap:6px;justify-content:center}
.dots button{width:7px;height:7px;border-radius:99px;background:rgba(20,23,28,.25);transition:var(--t)}.dots button.on{width:22px;background:var(--ink)}

/* categories */
.cats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:620px){.cats{grid-template-columns:repeat(4,1fr)}}@media(min-width:1000px){.cats{grid-template-columns:repeat(6,1fr)}}
.cat{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform var(--t),box-shadow var(--t),border-color var(--t);display:block}
.cat:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--blue-line)}.cat:active{transform:scale(.98)}
.cat .im{aspect-ratio:1/.82;background:var(--bg2);overflow:hidden}.cat img{width:100%;height:100%;object-fit:cover;transition:transform .35s}.cat:hover img{transform:scale(1.05)}
.cat .tx{padding:10px 12px 12px}.cat b{display:block;font-size:14.5px}.cat span{display:flex;justify-content:space-between;color:var(--ink3);font-size:12px}

/* picker */
.picker{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-l);padding:20px;display:grid;gap:16px}
@media(min-width:900px){.picker{padding:34px;grid-template-columns:.9fr 1.5fr;align-items:center}}
.picker h2{font-size:24px}.picker .fields{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media(min-width:900px){.picker .fields{grid-template-columns:repeat(4,1fr)}.picker .go{grid-column:1/-1}}
.picker .go{grid-column:1/-1}
.hint-box{font-size:13px;color:var(--ink2);background:#fff;border:1px dashed var(--line2);border-radius:12px;padding:10px 14px}

/* product grid + card */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:700px){.grid{grid-template-columns:repeat(3,1fr);gap:16px}}@media(min-width:1100px){.grid{grid-template-columns:repeat(4,1fr)}}
.grid.g3{grid-template-columns:repeat(2,1fr)}@media(min-width:1000px){.grid.g3{grid-template-columns:repeat(3,1fr)}}
.pc{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.pc:hover{box-shadow:var(--sh);border-color:var(--line2);transform:translateY(-2px)}
.pc .im{position:relative;aspect-ratio:1;background:var(--bg2);display:block;overflow:hidden}
.pc .im img{width:100%;height:100%;object-fit:contain;padding:12%;transition:transform .35s;mix-blend-mode:multiply}
.pc:hover .im img{transform:scale(1.06)}
.pc .bd{position:absolute;top:10px;inset-inline-start:10px;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.pc .heart{position:absolute;top:8px;inset-inline-end:8px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--ink2);transition:var(--t)}
.pc .heart:hover{color:var(--bad)}.pc .heart.on{color:var(--bad)}.pc .heart.on .i{fill:currentColor}.pc .heart:active{transform:scale(.85)}
.pc .qv{position:absolute;bottom:10px;inset-inline:10px;opacity:0;transform:translateY(6px);transition:var(--t);display:none}
@media(hover:hover) and (min-width:900px){.pc .qv{display:flex}.pc:hover .qv{opacity:1;transform:none}}
.pc .b{padding:12px 14px 14px;display:flex;flex-direction:column;gap:3px;flex:1}
.pc .br{font-size:11.5px;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:.06em}
.pc .nm{font-weight:600;font-size:14.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
.pc .sp{font-size:12.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc .pr{display:flex;align-items:baseline;gap:6px;margin-top:6px;flex-wrap:wrap}
.pc .pr b{font-size:17px}.pc .pr s{color:var(--ink3);font-size:13px}.pc .pr small{color:var(--ink3);font-size:12px}
.pc .st{font-size:12.5px;display:flex;align-items:center;gap:6px;margin:4px 0 10px;color:var(--ink2);min-height:20px}
.pc .st.pre{color:var(--blue-d)}.pc .st.ok{color:var(--ok)}.pc .st.warn{color:var(--warn)}.pc .st.bad{color:var(--ink3)}
.pc .btn{margin-top:auto}
.demand{display:inline-flex;gap:4px;align-items:center;font-size:12px;font-weight:600}
.demand.high{color:var(--bad)}.demand.medium{color:var(--warn)}.demand.low{color:var(--ink3)}

/* next shipment */
.ship-i{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;transition:var(--t)}
.ship-i:hover{border-color:var(--blue-line);box-shadow:var(--sh)}
.ship-i img{width:64px;height:64px;border-radius:12px;background:var(--bg2);object-fit:contain;padding:6px}
.ship-i .bar{height:6px;border-radius:9px;background:var(--bg3);margin-top:8px;overflow:hidden}.ship-i .bar i{display:block;height:100%;background:var(--blue);border-radius:9px}

/* poll */
.poll{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:22px;max-width:640px}
.opt{position:relative;display:flex;align-items:center;gap:10px;padding:12px 14px;border:1.5px solid var(--line2);border-radius:12px;margin-top:10px;overflow:hidden;cursor:pointer;transition:var(--t);min-height:48px}
.opt:hover{border-color:var(--blue)}.opt.on{border-color:var(--blue);background:var(--blue-soft)}
.opt .fill{position:absolute;inset-block:0;inset-inline-start:0;background:var(--blue-soft);z-index:0;transition:width .5s}
.opt>*:not(.fill){position:relative;z-index:1}

/* bundles */
.bundle{display:grid;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:18px;grid-template-columns:96px 1fr}
.bundle img{width:96px;height:96px;border-radius:16px;background:var(--bg2);object-fit:cover}
.bundle ul{font-size:13.5px;color:var(--ink2);margin:6px 0 10px}.bundle li::before{content:"✓ ";color:var(--blue)}

/* counters */
.counters{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}@media(min-width:760px){.counters{grid-template-columns:repeat(4,1fr)}}
.counter{text-align:center;padding:20px 10px;background:#fff;border:1px solid var(--line);border-radius:18px}.counter b{display:block;font-size:30px;color:var(--blue);font-variant-numeric:tabular-nums}.counter span{color:var(--ink3);font-size:13px}

/* suggest box */
.sbox{display:grid;gap:22px;background:linear-gradient(135deg,#F2F7FF,var(--bg2));border:1px solid var(--blue-line);border-radius:28px;padding:22px}
@media(min-width:960px){.sbox{grid-template-columns:.8fr 1.2fr;padding:44px;gap:44px;align-items:start}}
.sbox .ill{max-width:360px;margin-top:10px}
.sbox h2{font-size:26px}
.sform{display:grid;gap:12px;grid-template-columns:1fr 1fr}.sform .full{grid-column:1/-1}
.sform .field.s2{grid-column:span 1}
@media(max-width:559px){.sform{grid-template-columns:1fr}.sform .field{grid-column:1/-1!important}}
.dz{border:1.5px dashed var(--line2);border-radius:12px;padding:14px;text-align:center;color:var(--ink3);cursor:pointer;transition:var(--t);display:flex;gap:10px;align-items:center;justify-content:center;min-height:56px;background:#fff}
.dz:hover{border-color:var(--blue);color:var(--blue-d)}.dz img{height:44px;border-radius:8px}
.ok-box{text-align:center;padding:24px 8px;display:grid;gap:10px;justify-items:center}.ok-box .ic{width:64px;height:64px;border-radius:50%;background:var(--ok-soft);color:var(--ok);display:grid;place-items:center}.ok-box .ic .i{width:32px;height:32px;stroke-width:2.4}

/* footer */
.footer{background:var(--ink);color:#C9CFD8;margin-top:40px;padding-block:44px 28px}
.footer .cols{display:grid;gap:28px;grid-template-columns:1fr 1fr}
@media(min-width:900px){.footer .cols{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.footer .about{grid-column:1/-1}@media(min-width:900px){.footer .about{grid-column:auto}}
.footer h4{color:#fff;font-size:14px;margin-bottom:12px}.footer li a{display:block;padding:5px 0;font-size:14px;color:#AEB6C2}.footer li a:hover{color:#fff}
.footer .soc{display:flex;gap:8px;margin-top:14px}.footer .soc a{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff;transition:var(--t)}.footer .soc a:hover{background:var(--blue)}
.footer .copy{margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px;color:#8993A1}
.footer img.fl{height:36px;margin-bottom:12px}

/* shop */
.crumbs{font-size:13px;color:var(--ink3);padding-block:14px 0}.crumbs a:hover{color:var(--blue-d)}
.shop-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:10px 18px;flex-wrap:wrap}
.shop-h h1{font-size:24px}
.shop{display:grid;gap:24px}@media(min-width:960px){.shop{grid-template-columns:260px 1fr;align-items:start}}
.filters{display:none}
@media(min-width:960px){.filters{display:block;position:sticky;top:84px;max-height:calc(100vh - 100px);overflow:auto;padding-inline-end:6px}}
.fg{border-bottom:1px solid var(--line);padding-block:14px}.fg summary{display:flex;justify-content:space-between;font-weight:700;font-size:14px;cursor:pointer;list-style:none}.fg summary::-webkit-details-marker{display:none}.fg summary .i{transition:var(--t)}.fg[open] summary .i{transform:rotate(180deg)}
.fg .opts{margin-top:8px;display:grid;gap:2px;max-height:240px;overflow:auto}.fg .check small{margin-inline-start:auto;color:var(--ink3)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border-radius:99px;background:var(--bg3);font-size:13px;font-weight:500}
.chip.blue{background:var(--blue-soft);color:var(--blue-d)}.chip button{display:grid;place-items:center}.chip .i{width:14px;height:14px}
.sheet-f{display:block}
.empty{text-align:center;padding:56px 16px;display:grid;gap:12px;justify-items:center}.empty img{width:150px;opacity:.9}.empty h3{font-size:20px}.empty p{color:var(--ink3);max-width:420px}

/* product page */
.pp{display:grid;gap:24px;padding-block:14px 30px}@media(min-width:960px){.pp{grid-template-columns:1.1fr 1fr;gap:48px;padding-block:20px 50px}}
.gal{display:grid;gap:10px;min-width:0}
.gal-main{position:relative;aspect-ratio:1;background:var(--bg2);border-radius:22px;overflow:hidden;cursor:zoom-in}
.gal-main .track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gal-main .track::-webkit-scrollbar{display:none}
.gal-main .track>div{min-width:100%;height:100%;scroll-snap-align:center;display:grid;place-items:center}
.gal-main img{width:100%;height:100%;object-fit:contain;padding:8%;mix-blend-mode:multiply;transition:transform .2s;transform-origin:var(--zx,50%) var(--zy,50%)}
@media(hover:hover){.gal-main:hover img.z{transform:scale(1.8)}}
.thumbs{display:flex;gap:10px;overflow:auto;scrollbar-width:none}
.thumbs button{width:68px;height:68px;border-radius:14px;background:var(--bg2);border:2px solid transparent;flex:none;overflow:hidden;transition:var(--t)}.thumbs button.on{border-color:var(--ink)}.thumbs img{width:100%;height:100%;object-fit:contain;padding:6px;mix-blend-mode:multiply}
.pp .info{display:flex;flex-direction:column;gap:16px;min-width:0}
.pp h1{font-size:26px}@media(min-width:960px){.pp h1{font-size:32px}}
.pp .price{font-size:30px;font-weight:700;display:flex;align-items:baseline;gap:10px}.pp .price s{font-size:16px;color:var(--ink3);font-weight:400}.pp .price small{font-size:14px;color:var(--ink3);font-weight:500}
.optg .lbl{margin-bottom:8px;display:flex;justify-content:space-between}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{min-height:42px;min-width:52px;padding:0 16px;border:1.5px solid var(--line2);border-radius:12px;font-weight:600;font-size:14px;background:#fff;transition:var(--t);position:relative}
.pill:hover{border-color:var(--ink)}.pill.on{border-color:var(--blue);background:var(--blue-soft);color:var(--blue-d);box-shadow:0 0 0 3px var(--blue-soft)}
.pill.na{color:var(--ink3);background:var(--bg2);border-style:dashed}.pill.na::after{content:"";position:absolute;inset:50% 8px auto;height:1.5px;background:var(--ink3);transform:rotate(-12deg);opacity:.6}
.pill.na.on{background:var(--bg3);box-shadow:none;border-color:var(--ink3);color:var(--ink2)}
.note{border-radius:16px;padding:14px 16px;font-size:14px;display:grid;gap:4px}
.note.pre{background:var(--blue-soft);border:1px solid var(--blue-line)}.note.bad{background:var(--bg2);border:1px solid var(--line)}.note.warn{background:var(--warn-soft)}.note.ok{background:var(--ok-soft)}
.note b{display:flex;gap:8px;align-items:center}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line2);border-radius:12px;height:46px;background:#fff}
.qty button{width:42px;height:100%;display:grid;place-items:center;border-radius:10px}.qty button:hover{background:var(--bg3)}.qty button:active{transform:scale(.9)}.qty input{width:44px;text-align:center;border:0;background:none;font-weight:700;font-size:16px;-moz-appearance:textfield}.qty input::-webkit-inner-spin-button{display:none}
.compat{border:1px solid var(--line);border-radius:18px;padding:16px;display:grid;gap:10px;background:var(--bg2)}
.compat h4{display:flex;gap:8px;align-items:center;font-size:15px}
.acc details{border-bottom:1px solid var(--line)}.acc summary{padding:16px 2px;font-weight:700;cursor:pointer;display:flex;justify-content:space-between;list-style:none}.acc summary::-webkit-details-marker{display:none}.acc summary .i{transition:var(--t)}.acc details[open] summary .i{transform:rotate(180deg)}.acc .c{padding:0 2px 18px;color:var(--ink2);line-height:1.8}
.specs{width:100%;border-collapse:collapse}.specs td{padding:9px 0;border-bottom:1px dashed var(--line)}.specs td:first-child{color:var(--ink3);width:42%}
.stickybuy{position:fixed;inset-inline:0;bottom:calc(60px + env(safe-area-inset-bottom));z-index:54;background:#fff;border-top:1px solid var(--line);padding:10px 16px;display:flex;gap:12px;align-items:center;transform:translateY(120%);transition:transform .25s}
.stickybuy.show{transform:none}@media(min-width:900px){.stickybuy{display:none}}
.lightbox{position:fixed;inset:0;z-index:130;background:rgba(10,12,16,.94);display:flex;align-items:center;justify-content:center;animation:fade .15s}
.lightbox img{max-width:92vw;max-height:84vh;object-fit:contain;background:#fff;border-radius:16px;padding:16px;touch-action:pan-y}
.lightbox .nv{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center}
.lightbox .nv.p{inset-inline-start:14px}.lightbox .nv.n{inset-inline-end:14px}.lightbox .cl{position:absolute;top:14px;inset-inline-end:14px;color:#fff;width:44px;height:44px;display:grid;place-items:center;background:rgba(255,255,255,.14);border-radius:50%}

/* cart drawer */
.drawer{position:fixed;top:0;bottom:0;inset-inline-start:0;z-index:101;width:min(430px,100vw);background:#fff;display:flex;flex-direction:column;animation:slidein .24s var(--t) both;box-shadow:var(--sh)}
[dir=rtl] .drawer{inset-inline-start:auto;inset-inline-end:auto;left:0}
[dir=ltr] .drawer{left:auto;right:0}
@keyframes slidein{from{transform:translateX(-30px);opacity:0}}
[dir=ltr] .drawer{animation-name:slideinr}@keyframes slideinr{from{transform:translateX(30px);opacity:0}}
.drawer .hd{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line);font-weight:700;font-size:18px}
.drawer .bd2{flex:1;overflow:auto;padding:8px 20px}
.drawer .ft{padding:16px 20px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--line);display:grid;gap:10px;background:#fff}
.ci{display:grid;grid-template-columns:72px 1fr auto;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);align-items:start}
.ci img{width:72px;height:72px;border-radius:14px;background:var(--bg2);object-fit:contain;padding:6px}
.ci .t{font-weight:600;font-size:14.5px;line-height:1.4}.ci .m{font-size:12.5px;color:var(--ink3)}
.ci .qty{height:36px;margin-top:8px}.ci .qty button{width:34px}.ci .qty input{width:34px;font-size:14px}
.sumrow{display:flex;justify-content:space-between;gap:12px;font-size:14.5px}.sumrow.t{font-size:18px;font-weight:700;padding-top:10px;border-top:1px dashed var(--line2)}

/* checkout */
.co{display:grid;gap:24px;padding-block:20px 40px}@media(min-width:960px){.co{grid-template-columns:1.25fr .85fr;gap:40px;align-items:start}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:20px}
.card h3{font-size:17px;margin-bottom:14px;display:flex;gap:10px;align-items:center}.card h3 .n{width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;font-size:13px;display:grid;place-items:center}
.fgrid{display:grid;gap:12px;grid-template-columns:1fr 1fr}.fgrid .full{grid-column:1/-1}@media(max-width:559px){.fgrid{grid-template-columns:1fr}}
.rcard{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line2);border-radius:14px;padding:14px;cursor:pointer;transition:var(--t);margin-top:10px}
.rcard:hover{border-color:var(--ink)}.rcard.on{border-color:var(--blue);background:var(--blue-soft)}.rcard input{margin-top:3px;accent-color:var(--blue);width:18px;height:18px}
.rcard .d{font-size:13px;color:var(--ink2);margin-top:4px;display:none}.rcard.on .d{display:block}
.sticky-sum{position:sticky;top:90px}

/* timeline */
.tl{position:relative;display:grid;gap:0}
.tl-i{position:relative;display:grid;grid-template-columns:34px 1fr;gap:14px;padding-bottom:22px}
.tl-i:last-child{padding-bottom:0}
.tl-i::before{content:"";position:absolute;inset-inline-start:16px;top:34px;bottom:0;width:2px;background:var(--line2)}
.tl-i:last-child::before{display:none}.tl-i.done::before{background:var(--blue)}
.tl-d{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--line2);color:var(--ink3);font-weight:700;font-size:13px;z-index:1}
.tl-i.done .tl-d{background:var(--blue);border-color:var(--blue);color:#fff}
.tl-i.current .tl-d{border-color:var(--blue);color:var(--blue);box-shadow:0 0 0 5px var(--blue-soft);animation:pulse 1.8s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 9px rgba(18,124,255,.08)}}
.tl-i .tt{font-weight:700;padding-top:5px}.tl-i.todo .tt{color:var(--ink3);font-weight:500}.tl-i .ds{font-size:13.5px;color:var(--ink2);margin-top:2px;line-height:1.7}
.steps9 .tl-i{padding-bottom:26px}.steps9 .tl-d{width:40px;height:40px;font-size:16px}.steps9 .tl-i{grid-template-columns:40px 1fr}.steps9 .tl-i::before{inset-inline-start:19px;top:40px}
.page-h{padding-block:30px 10px}.page-h h1{font-size:30px}.page-h p{color:var(--ink2);margin-top:6px;max-width:640px}
.prose{max-width:760px;line-height:1.9;color:var(--ink2)}.prose p+p{margin-top:12px}
.badge-top{display:inline-flex}
.fab-wa{position:fixed;inset-inline-start:16px;bottom:calc(76px + env(safe-area-inset-bottom));z-index:52;width:52px;height:52px;border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center;box-shadow:0 8px 22px -6px rgba(31,168,85,.6);transition:var(--t)}
.fab-wa:hover{transform:scale(1.06)}.fab-wa .i{width:26px;height:26px}
@media(min-width:900px){.fab-wa{bottom:24px;inset-inline-start:24px}}
.pager{display:flex;justify-content:center;margin-top:28px}
.err-page{text-align:center;padding:64px 16px;display:grid;gap:14px;justify-items:center}.err-page .big{font-size:84px;font-weight:800;letter-spacing:-.04em;color:var(--blue);line-height:1}
.btn.on .i{fill:var(--bad);color:var(--bad)}
.hero .trust{display:flex;flex-wrap:wrap;gap:8px 22px}
@media(max-width:899px){.hero .cta .btn{flex:1;min-width:150px}}
.note b{display:inline}.note>b:first-child{display:flex}
.gal-main img[src*="/img/art/"],.pc .im img[src*="/img/art/"],.thumbs img[src*="/img/art/"]{padding:0;object-fit:cover;mix-blend-mode:normal}
.ship-i img[src*="/img/art/"]{padding:0;object-fit:cover}