/* edu-plain.css — from src/edu/landing/tpl-plain.html (2026-11-03). Fonts ship with the plugin. */
@font-face{font-family:"Space Grotesk";font-weight:300 700;font-display:swap;src:url(../fonts/space-grotesk.ttf) format("truetype")}
@font-face{font-family:Mulish;font-weight:400 900;font-display:swap;src:url(../fonts/mulish-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:Mulish;font-weight:400 900;font-display:swap;src:url(../fonts/mulish-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+20A0-20AB,U+20AD-20C0}
/* The plain Black Friday landing, built on the live musthaveplugins.com look: near-black navy, Space Grotesk headings, Mulish
   text, the brand yellow for what's on sale, the green buy button, and the home page's tilted cube of plugin tiles as the hero
   picture. Same mechanics as the black-eye page (page.js): per plugin, watch its video -> 60%, answer its three questions -> 70%.
   Single dark look on purpose: it is the brand's own. */
:root{
  color-scheme:dark;
  --bg:#10131B; --bg2:#141824; --panel:#181D2A; --panel2:#1E2433; --rim:#272E40; --rim2:#343C52;
  --ink:#F4F6FB; --text:#A8B0C4; --muted:#6F7790;
  --yellow:#FFE01B; --yellow-ink:#1D1A00; --green:#1FD27A; --green-ink:#03210F; --blue:#4C8DFF;
  --h:"Space Grotesk","Mulish",Arial,sans-serif; --f:"Mulish","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img{max-width:100%;display:block}
a{color:var(--ink)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eyebrow{font:700 13px/1.2 var(--h);letter-spacing:.16em;text-transform:uppercase;color:var(--yellow)}

/* ---------- header ---------- */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(700px 480px at 18% 30%,rgba(92,74,190,.22),transparent 70%),
  radial-gradient(760px 520px at 82% 40%,rgba(42,120,220,.18),transparent 70%),var(--bg)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse at 60% 40%,#000 0%,transparent 70%);mask-image:radial-gradient(ellipse at 60% 40%,#000 0%,transparent 70%)}
.nav{position:relative;z-index:2;display:flex;justify-content:center;padding-block:22px 6px}
.nav img{height:64px;width:auto}
.hgrid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px 48px;align-items:center;padding-block:34px 64px}
.hero h1{margin-top:16px;font:700 clamp(42px,5.6vw,74px)/1.02 var(--h);letter-spacing:-.03em;text-wrap:balance}
.hero h1 span{color:var(--yellow);display:block}
.lead{margin-top:20px;font-size:clamp(17px,1.6vw,19.5px);line-height:1.55;color:var(--text);max-width:48ch}
.lead b{color:var(--ink);font-weight:800}
.cd{display:flex;gap:10px;margin-top:28px;align-items:stretch}
.cd div{min-width:74px;background:rgba(24,29,42,.85);border:1px solid var(--rim);border-radius:14px;padding:10px 12px 9px;text-align:center}
.cd b{display:block;font:700 30px/1 var(--h);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.cd span{display:block;margin-top:5px;font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.cd p{align-self:center;margin-left:6px;font-size:14px;line-height:1.35;color:var(--text);max-width:16ch}
.ctas{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--green);color:var(--green-ink);font:700 17px/1 var(--h);padding:17px 24px;border-radius:12px;text-decoration:none;box-shadow:0 12px 30px rgba(31,210,122,.22);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(31,210,122,.3)}
.link{font:700 16px/1.2 var(--h);color:var(--ink);text-decoration:none;border-bottom:2px solid var(--rim2);padding-bottom:3px}
.link:hover{border-color:var(--yellow)}
.link b{color:var(--yellow);font-weight:700}

/* the cube of plugin tiles, as on the home page */
.cube{position:relative;justify-self:center;width:min(100%,450px);perspective:1400px;padding:54px 10px 20px}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;transform:rotateX(9deg) rotateY(-15deg) rotateZ(2deg);transform-style:preserve-3d}
.tile{aspect-ratio:1;border-radius:20px;background:linear-gradient(160deg,#262c3d,#1a1f2c);border:1px solid rgba(255,255,255,.06);border-bottom:3px solid var(--c,#4C8DFF);
  box-shadow:0 18px 30px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06);display:grid;place-items:center;animation:drop .7s cubic-bezier(.2,.9,.25,1.15) backwards}
.tile img{width:60%;height:60%;object-fit:contain}
.tile.pk{background:linear-gradient(160deg,#2b2a1c,#1f2030);border-color:rgba(255,224,27,.45);border-bottom-color:var(--yellow);box-shadow:0 18px 34px rgba(0,0,0,.5),0 0 0 3px rgba(255,224,27,.12)}
@keyframes drop{0%{opacity:0;transform:translateY(-26px) scale(.94)}100%{opacity:1;transform:none}}
.sticker{position:absolute;right:-30px;top:-6px;z-index:3;width:clamp(104px,11vw,132px);aspect-ratio:1;border-radius:50%;background:var(--yellow);color:var(--yellow-ink);display:grid;place-items:center;text-align:center;
  transform:rotate(-12deg);box-shadow:0 14px 34px rgba(0,0,0,.45),inset 0 0 0 4px rgba(29,26,0,.12);animation:stamp .5s .9s cubic-bezier(.2,1.5,.35,1) backwards}
.sticker b{display:block;font:700 clamp(30px,3.6vw,42px)/.9 var(--h);letter-spacing:-.03em}
.sticker span{display:block;font:800 11.5px/1.15 var(--f);text-transform:uppercase;letter-spacing:.08em}
@keyframes stamp{0%{opacity:0;transform:rotate(-30deg) scale(1.8)}100%{opacity:1;transform:rotate(-12deg) scale(1)}}
.cube .note{margin-top:22px;text-align:center;font-size:14px;color:var(--text);background:rgba(24,29,42,.85);border:1px solid var(--rim);border-radius:999px;padding:9px 16px;width:max-content;max-width:100%;margin-inline:auto}
.cube .note b{color:var(--yellow)}

/* the discount ladder: three steps, drawn as steps */
.ladder-band{background:var(--bg2);border-block:1px solid var(--rim)}
.lgrid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:28px 56px;align-items:end;padding-block:44px}
.lgrid h2{margin-top:10px;font:700 clamp(26px,2.8vw,36px)/1.1 var(--h);letter-spacing:-.02em;text-wrap:balance}
.lgrid .ren{margin-top:12px;color:var(--text);font-size:15.5px;max-width:40ch}
.stairs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end;height:230px}
.stairs li{display:flex;flex-direction:column;justify-content:flex-start;border-radius:16px 16px 6px 6px;padding:16px 16px 14px;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--rim)}
.stairs li:nth-child(1){height:58%}
.stairs li:nth-child(2){height:78%}
.stairs li:nth-child(3){height:100%;background:linear-gradient(180deg,#3a3510,#22220f);border-color:rgba(255,224,27,.5)}
.stairs b{font:700 clamp(32px,3.6vw,46px)/1 var(--h);letter-spacing:-.03em}
.stairs li:nth-child(3) b{color:var(--yellow)}
.stairs span{margin-top:8px;font-size:14px;line-height:1.35;color:var(--text);font-weight:600}
.stairs i{font-style:normal;display:inline-block;margin-bottom:10px;font:700 11.5px/1 var(--h);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------- index ---------- */
.index{padding-block:52px 22px}
.sechead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:8px 20px;margin-bottom:20px}
.sechead h2{font:700 clamp(26px,2.8vw,36px)/1.1 var(--h);letter-spacing:-.02em;margin-top:8px}
.sechead p{color:var(--text);font-size:15.5px;max-width:46ch}
.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.ix{position:relative;display:flex;flex-direction:column;gap:8px;background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--rim);border-bottom:3px solid var(--c,var(--rim2));border-radius:18px;padding:16px 14px 14px;text-decoration:none;color:var(--ink);transition:transform .15s,border-color .15s}
.ix:hover{transform:translateY(-3px);border-color:var(--rim2)}
.ix img{width:46px;height:46px;border-radius:12px;object-fit:contain}
.ix .n{font:700 15.5px/1.2 var(--h);margin-top:4px}
.ix .pr{margin-top:auto;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;font:700 17px/1 var(--h);color:var(--ink)}
.ix .pr small{font:800 11.5px/1 var(--f);color:var(--yellow-ink);background:var(--yellow);border-radius:6px;padding:4px 6px}
.ix.pack{grid-column:span 2;grid-row:span 2;background:radial-gradient(400px 260px at 80% 0%,rgba(255,224,27,.14),transparent 70%),linear-gradient(160deg,#232a3d,#181d2a);border-color:rgba(255,224,27,.35);padding:22px}
.ix.pack img{width:84px;height:84px}
.ix.pack .n{font-size:24px;line-height:1.15;max-width:12ch}
.ix.pack .pr{font-size:28px}
.ix.pack::after{content:"All 11 plugins";position:absolute;right:16px;top:18px;font:700 11.5px/1 var(--h);letter-spacing:.12em;text-transform:uppercase;color:var(--yellow)}

/* ---------- a product ---------- */
.lot{padding-block:60px 34px;scroll-margin-top:8px;border-top:1px solid var(--rim)}
.lot:nth-child(even){background:linear-gradient(180deg,var(--bg2),var(--bg) 70%)}
.ph{display:flex;gap:18px;align-items:center;margin-bottom:24px}
.ph img{width:64px;height:64px;border-radius:16px;flex:none;object-fit:contain;background:var(--panel);border:1px solid var(--rim);padding:6px}
.ph h2{font:700 clamp(28px,3.2vw,40px)/1.05 var(--h);letter-spacing:-.025em}
.ph p{color:var(--text);font-size:clamp(16px,1.6vw,18.5px);margin-top:6px;font-weight:600}
.sale{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(320px,1fr);gap:26px;align-items:start}
.media{min-width:0;position:relative}
.media::before{content:attr(data-len);position:absolute;z-index:2;left:14px;top:14px;font:700 12px/1 var(--h);letter-spacing:.06em;color:var(--ink);background:rgba(16,19,27,.78);border:1px solid var(--rim2);border-radius:999px;padding:7px 11px;pointer-events:none}
.media:has(.vbox.started)::before{display:none}
.vbox{position:relative;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 0 0 1px var(--rim),0 30px 70px rgba(0,0,0,.5),0 0 90px rgba(76,141,255,.08)}
.vbox video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}
.vover{position:absolute;inset:0;cursor:pointer;background:linear-gradient(0deg,rgba(10,12,18,.4),transparent 55%)}
.vbox.started .vover{display:none}
.vplay{position:absolute;right:clamp(12px,2.6vw,26px);bottom:clamp(54px,7vw,74px);width:clamp(60px,7vw,82px);aspect-ratio:1;border-radius:50%;background:var(--yellow);display:grid;place-items:center;box-shadow:0 12px 30px rgba(0,0,0,.5);transition:transform .15s}
.vover:hover .vplay{transform:scale(1.06)}
.vplay .tri{width:0;height:0;border-left:22px solid var(--yellow-ink);border-top:14px solid transparent;border-bottom:14px solid transparent;margin-left:6px}
.vprog{display:flex;align-items:center;gap:12px;margin-top:14px;font-size:14px;color:var(--text);font-weight:700}
.vbar{flex:0 0 clamp(80px,14vw,160px);height:6px;border-radius:3px;background:var(--rim);overflow:hidden}
.vbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--yellow),#ffd000);transition:width .3s}
.vdone{color:var(--yellow);font-weight:800}

.deal{position:relative;background:linear-gradient(170deg,var(--panel2),var(--panel) 60%);border:1px solid var(--rim);border-radius:20px;padding:24px 22px 22px;display:flex;flex-direction:column;gap:14px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.deal::before{content:"";position:absolute;left:22px;right:22px;top:-1px;height:3px;border-radius:0 0 3px 3px;background:var(--yellow)}
.dk{font:700 12.5px/1 var(--h);letter-spacing:.14em;text-transform:uppercase;color:var(--yellow)}
.dl{font-size:14.5px;color:var(--text);font-weight:700;margin-top:-4px}
.dp{display:flex;align-items:flex-end;flex-wrap:wrap;gap:4px 14px;margin-top:-6px}
.dp .now{font:700 clamp(54px,5.6vw,70px)/1 var(--h);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.dp .now sup,.oprice sup{font-size:.46em;vertical-align:.95em;margin-left:2px;letter-spacing:0}
.dp .was{display:flex;flex-direction:column;gap:6px;padding-bottom:8px}
.dp s{color:var(--muted);font-size:17px;font-weight:700}
.dp .off{background:var(--yellow);color:var(--yellow-ink);font:800 13.5px/1 var(--f);padding:6px 9px;border-radius:7px}
.back{font-size:14px;line-height:1.5;color:var(--text)}
.buy{display:flex;align-items:center;justify-content:center;background:var(--green);color:var(--green-ink);font:700 19px/1 var(--h);padding:18px;border-radius:13px;text-decoration:none;text-align:center;box-shadow:0 12px 28px rgba(31,210,122,.2);transition:transform .12s,box-shadow .12s}
.buy:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(31,210,122,.3)}
.ladder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;align-items:end}
.ladder li{border:1px solid var(--rim);border-radius:11px;padding:8px 9px 7px;display:flex;flex-direction:column;gap:3px;color:var(--muted);background:rgba(16,19,27,.4)}
.ladder li:nth-child(1){min-height:56px} .ladder li:nth-child(2){min-height:64px} .ladder li:nth-child(3){min-height:72px}
.ladder b{font:700 20px/1 var(--h);letter-spacing:-.02em}
.ladder span{font-size:11.5px;line-height:1.25;font-weight:700}
.ladder li.on{color:var(--ink);border-color:var(--rim2)}
.ladder li.cur{background:var(--yellow);color:var(--yellow-ink);border-color:var(--yellow)}
.watch{display:flex;align-items:center;gap:12px;width:100%;border:1.5px solid var(--rim2);background:rgba(16,19,27,.5);border-radius:13px;padding:13px 15px;font:700 16px/1.25 var(--h);text-align:left;color:var(--ink);text-decoration:none;transition:border-color .15s,background .15s}
.watch:hover{border-color:var(--yellow);background:rgba(255,224,27,.06)}
.watch .tri{flex:none;width:0;height:0;border-left:13px solid var(--yellow);border-top:8px solid transparent;border-bottom:8px solid transparent}
.nudge{font-size:14px;line-height:1.5;color:var(--text)}
.nudge b{color:var(--ink)}
.nudge.best{color:var(--yellow);font-weight:800}

.pitch{margin-top:26px}
.what .s{color:var(--text);max-width:62ch;font-size:16.5px}
.feats{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.feats li{font-size:13.5px;font-weight:800;color:var(--ink);background:var(--panel);border:1px solid var(--rim);border-radius:999px;padding:7px 13px}
.feats li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:8px;vertical-align:2px}
.sizes{margin-top:34px;padding:22px;border:1px solid rgba(255,224,27,.28);border-radius:24px;background:radial-gradient(120% 140% at 0 0,rgba(255,224,27,.07),transparent 55%),var(--bg2)}
.sz-h{display:flex;align-items:flex-start;gap:4px;margin-bottom:8px}
.sz-tag{display:flex;align-items:center;gap:14px;min-width:0;padding:10px 22px 10px 10px;border-radius:16px;background:var(--yellow);color:var(--yellow-ink);box-shadow:0 14px 34px rgba(255,224,27,.14)}
.sz-logo{flex:none;display:grid;place-items:center;width:58px;height:58px;border-radius:13px;background:var(--bg)}
.sz-logo img{width:40px;height:40px;object-fit:contain}
.sz-tag h3{font:700 clamp(22px,2.6vw,30px)/1.08 var(--h);letter-spacing:-.015em;text-wrap:balance}
.sz-tag p{margin-top:4px;font-size:14px;line-height:1.35;font-weight:700;color:rgba(29,26,0,.78)}
.sz-arr{flex:none;width:128px;height:85px;margin-top:20px;fill:none;stroke:var(--yellow);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.offers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.offers.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.og{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;padding:18px 16px 16px;border:1px solid var(--rim2);border-radius:18px;background:linear-gradient(170deg,var(--panel2),var(--panel) 70%)}
.og::before{content:"";position:absolute;left:16px;right:16px;top:-1px;height:3px;border-radius:0 0 3px 3px;background:var(--green)}
.og.lock{background:var(--panel);border-style:dashed}
.og.lock::before{background:var(--rim2)}
.og-h b{display:block;font:700 20px/1.15 var(--h);color:var(--ink)}
.og-h span{display:block;margin-top:4px;font-size:13px;line-height:1.4;font-weight:700;color:var(--text)}
.og-rows{flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;align-content:start}
.ocell{display:flex;flex-direction:column;gap:3px;min-width:0;padding:12px;border:1px solid var(--rim);border-radius:13px;background:rgba(16,19,27,.55)}
.osites{font-size:14px;font-weight:800;color:var(--ink)}
.osites small{margin-left:3px;font-size:12.5px;font-weight:700;color:var(--muted)}
.oprice{font:700 30px/1.05 var(--h);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.oprice s{margin-left:7px;font:700 13px var(--f);letter-spacing:0;color:var(--muted)}
.ounit{font-size:12.5px;font-weight:700;color:var(--muted)}
.obuy{margin-top:9px;display:flex;justify-content:center;padding:11px 10px;border-radius:10px;background:var(--green);color:var(--green-ink);font:700 15px/1 var(--h);text-decoration:none;transition:transform .12s,box-shadow .12s}
.obuy:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(31,210,122,.22)}
.osoon{margin-top:9px;font-size:12.5px;font-weight:700;color:var(--muted)}
.og.lock .ocell{opacity:.62}
.ogo{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:12px 12px;border:1.5px solid var(--yellow);border-radius:12px;background:rgba(255,224,27,.08);color:var(--ink);font:700 14.5px/1.25 var(--h);text-align:center;transition:background .15s}
.ogo:hover{background:rgba(255,224,27,.17)}
.ogo svg{flex:none;width:15px;height:15px;fill:var(--yellow)}
.og.fresh{animation:fresh 1.3s ease-out}
@keyframes fresh{0%{box-shadow:0 0 0 0 rgba(31,210,122,.65)}100%{box-shadow:0 0 0 20px rgba(31,210,122,0)}}
.lot.hit .deal{animation:hit .9s ease-out}
@keyframes hit{0%{box-shadow:0 0 0 0 rgba(255,224,27,.5)}100%{box-shadow:0 0 0 18px rgba(255,224,27,0)}}

/* ---------- ending ---------- */
.ending{border-top:1px solid var(--rim);background:radial-gradient(700px 360px at 50% 0%,rgba(255,224,27,.09),transparent 70%),var(--bg)}
.ending .wrap{padding-block:64px 36px;text-align:center;display:flex;flex-direction:column;align-items:center}
.ending h2{margin-top:12px;font:700 clamp(34px,5vw,60px)/1.04 var(--h);letter-spacing:-.03em;max-width:18ch;text-wrap:balance}
.ending p{margin-top:12px;color:var(--text);font-size:18px}
.ending .cd{justify-content:center}
.ending .ctas{justify-content:center}
.fine{padding-block:22px 110px;color:var(--muted);font-size:13px;max-width:84ch;text-align:center;margin-inline:auto}
.fine button{color:var(--text);text-decoration:underline;font-weight:700}
.bb{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(14,17,25,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--rim2);transform:translateY(110%);transition:transform .25s;padding-bottom:env(safe-area-inset-bottom,0px)}
.bb.on{transform:none}
.bb .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px 18px;padding-block:10px;flex-wrap:wrap}
.bb p{font-size:14px;color:var(--text);font-weight:700}
.bb p b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:800}
.bb a{background:var(--yellow);color:var(--yellow-ink);font:700 15px/1 var(--h);padding:11px 15px;border-radius:10px;text-decoration:none;white-space:nowrap}
.toast{position:fixed;left:50%;bottom:76px;transform:translate(-50%,20px);opacity:0;z-index:60;background:var(--ink);color:var(--bg);font-weight:700;font-size:15px;line-height:1.4;padding:12px 16px;border-radius:12px;max-width:min(560px,calc(100% - 32px));transition:all .2s;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:1060px){ .grid{grid-template-columns:repeat(3,minmax(0,1fr))} .offers{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:900px){
  .hgrid,.sale,.pitch,.lgrid{grid-template-columns:minmax(0,1fr)}
  .cube{width:min(100%,340px);padding-top:46px}
  .hgrid{padding-block:16px 48px}
}
@media (max-width:620px){
  .nav img{height:50px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ix.pack{grid-row:auto}
  .ix:last-child{grid-column:span 2}
  .sticker{right:-8px;top:0}
  .cd div{min-width:0;flex:1;padding:9px 6px 8px}
  .cd b{font-size:24px}
  .cd p{display:none}
  .stairs{height:200px;gap:8px}
  .stairs li{padding:12px 10px}
  .stairs span{font-size:12.5px}
  .deal{padding:20px 16px 18px}
  .sizes{padding:14px 12px 12px;border-radius:20px}
  .sz-h{flex-direction:column;gap:0;margin-bottom:4px}
  .sz-tag{align-self:stretch;gap:12px;padding:9px 14px 9px 9px;border-radius:14px}
  .sz-logo{width:48px;height:48px;border-radius:11px}
  .sz-logo img{width:32px;height:32px}
  .sz-tag p{font-size:13px}
  .sz-arr{align-self:flex-end;width:62px;height:42px;margin:2px 26px 0 0}
  .offers,.offers.two{grid-template-columns:minmax(0,1fr)}
  .og-rows{grid-template-columns:repeat(2,minmax(0,1fr))}
  .oprice{font-size:26px}
  .bb p span{display:none}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .tile,.sticker{animation:none} .lot.hit .deal,.og.fresh{animation:none} .ix,.buy,.btn,.obuy{transition:none} }

/* the sticky plugin bar (edu.js) */
.tn{position:fixed;left:0;right:0;top:0;z-index:41;padding-top:env(safe-area-inset-top,0px);background:rgba(14,17,25,.93);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--rim2);transform:translateY(-110%);transition:transform .25s}
.tn.on{transform:none}
.tn ul{position:relative;display:flex;gap:5px;max-width:max-content;margin:0 auto;padding-block:9px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));overflow-x:auto;scrollbar-width:none;list-style:none}
.tn ul::-webkit-scrollbar{display:none}
.tn li{flex:none}
.tn a{display:flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border:1px solid var(--rim);border-radius:999px;background:var(--panel);color:var(--ink);font:700 13px/1 var(--h);text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.tn a:hover{border-color:var(--rim2);background:var(--panel2)}
.tn img{width:22px;height:22px;padding:2px;border-radius:6px;background:var(--bg);object-fit:contain}
.tn a.pk{border-color:rgba(255,224,27,.55)}
.tn a.cur{background:var(--yellow);border-color:var(--yellow);color:var(--yellow-ink)}
.lot{scroll-margin-top:62px}
@media (prefers-reduced-motion:reduce){ .tn,.tn a{transition:none} }