:root{
  --yellow:#ffd21f; --yellow-deep:#f5b800; --ink:#16161d; --ink-2:#2b2d42; --paper:#fffaf0; --card:#ffffff;
  --red:#e2402f; --blue:#1f6fd1; --green:#1e9e6a; --orange:#f08a14; --purple:#7a2b8f;
  --muted:#6b6b78; --line:rgba(22,22,29,.12);
  --radius:22px; --shadow:0 18px 40px -18px rgba(22,22,29,.35);
  --display:"Bricolage Grotesque", system-ui, sans-serif; --body:"DM Sans", system-ui, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);background:var(--paper);color:var(--ink);line-height:1.55;overflow-x:hidden}
body.is-intro{overflow:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3{font-family:var(--display);line-height:1.02;letter-spacing:-.02em}
.eyebrow{font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.7rem}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.95rem 1.5rem;border-radius:999px;font-weight:700;text-decoration:none;transition:transform .2s cubic-bezier(.3,1.6,.5,1),box-shadow .2s}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(0) scale(.97)}
.btn-dark{background:var(--ink);color:#fff;box-shadow:0 6px 0 #000}
.btn-dark:hover{box-shadow:0 9px 0 #000}
.btn-ghost{border:2px solid var(--ink);background:transparent}

/* ---------- studs (brick tops) ---------- */
.stud-bg{background-image:radial-gradient(circle at 50% 50%, rgba(255,255,255,.35) 0 7px, transparent 8px);background-size:28px 28px}

/* ================= INTRO ================= */
#intro{position:fixed;inset:0;z-index:100;background:var(--ink);display:grid;place-items:center;overflow:hidden}
.intro-grid{position:absolute;inset:-40px;background-image:radial-gradient(circle, rgba(255,255,255,.06) 0 6px, transparent 7px);background-size:32px 32px;opacity:0}
.intro-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:2rem;padding:1rem}
.brick-logo{display:flex;gap:calc(var(--px)*1.2);--px:14px}
.glyph{display:grid;grid-template-columns:repeat(5,var(--px));grid-auto-rows:var(--px);gap:2px}
.pix{position:relative;border-radius:3px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.3)}
.pix::after{content:"";position:absolute;left:50%;top:50%;width:52%;height:52%;transform:translate(-50%,-50%);border-radius:50%;background:inherit;box-shadow:0 1px 0 rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.45);filter:brightness(1.06)}
.pix.empty{visibility:hidden}
.intro-tag{color:#fff;font-family:var(--display);font-size:clamp(1.05rem,2.4vw,1.5rem);font-weight:500;text-align:center}
.intro-tag span{display:inline-block;opacity:0;transform:translateY(16px)}
.intro-tag .hl{color:var(--yellow);font-weight:800}
.intro-enter{background:var(--yellow);color:var(--ink);font-weight:800;padding:1rem 1.8rem;border-radius:999px;font-size:1.05rem;box-shadow:0 6px 0 var(--yellow-deep);opacity:0;transform:scale(.6)}
.intro-enter:hover{filter:brightness(1.05)}
.intro-skip{position:absolute;right:20px;bottom:20px;color:rgba(255,255,255,.6);font-size:.85rem;padding:.5rem .8rem;border:1px solid rgba(255,255,255,.2);border-radius:999px}
.intro-skip:hover{color:#fff}

/* ================= STRIP ================= */
.strip{background:var(--ink);color:var(--yellow);overflow:hidden;font-weight:700;font-size:.85rem;letter-spacing:.04em}
.strip-track{display:flex;width:max-content;animation:marquee 30s linear infinite}
.strip-track span{padding:.6rem 1.6rem;white-space:nowrap}
.strip-track span::before{content:"■";margin-right:1.6rem;color:var(--red)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ================= NAV ================= */
.nav{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem clamp(16px,4vw,48px);background:rgba(255,250,240,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s, padding .3s}
.nav.scrolled{border-color:var(--line);padding-top:.6rem;padding-bottom:.6rem}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.logo-mark{width:38px;height:28px;background:var(--red);border-radius:6px;position:relative;display:flex;justify-content:center;gap:5px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.25);transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.logo-mark i{width:11px;height:7px;background:var(--red);border-radius:4px 4px 2px 2px;margin-top:-6px;box-shadow:inset 0 2px 0 rgba(255,255,255,.35)}
.logo:hover .logo-mark{transform:rotate(-8deg) translateY(-3px)}
.logo-word{font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:-.03em}
.nav-links{display:flex;gap:1.8rem}
.nav-links a{text-decoration:none;font-weight:600;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-4px;height:3px;width:100%;background:var(--yellow-deep);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav-links a:hover::after{transform:scaleX(1)}
.basket-btn{display:flex;align-items:center;gap:.5rem;background:var(--yellow);padding:.65rem 1rem;border-radius:999px;font-weight:700;box-shadow:0 4px 0 var(--yellow-deep);transition:transform .2s}
.basket-btn:hover{transform:translateY(-2px)}
.basket-count{background:var(--ink);color:#fff;min-width:24px;height:24px;border-radius:999px;display:grid;place-items:center;font-size:.8rem;padding:0 6px}
.basket-btn.bump{animation:bump .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{30%{transform:scale(1.18) rotate(-4deg)}60%{transform:scale(.95)}}

/* ================= HERO ================= */
.hero{position:relative;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:2rem;min-height:calc(100vh - 110px);padding:3rem clamp(16px,5vw,72px) 4rem;background:var(--yellow);overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle, rgba(255,255,255,.28) 0 9px, transparent 10px);background-size:40px 40px;z-index:-1;mask-image:linear-gradient(120deg,transparent 30%,#000 80%);-webkit-mask-image:linear-gradient(120deg,transparent 30%,#000 80%)}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-copy{position:relative;z-index:2}
.hero-copy .eyebrow{color:var(--ink-2)}
.hero-title{font-size:clamp(2.8rem,6.4vw,6rem);font-weight:800;margin:.2rem 0 1.4rem}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero-title .line>span{display:inline-block}
.hero-title em{font-style:normal;color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:6px 6px 0 var(--ink)}
.hero-sub{font-size:1.15rem;max-width:34ch;margin-bottom:2rem}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap}
.hero-points{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;list-style:none;margin-top:2.2rem;font-size:.95rem}
.hero-points li{background:rgba(255,255,255,.55);padding:.4rem .9rem;border-radius:999px}
.hero-figs{position:relative;height:min(70vh,560px)}
.hero-fig{position:absolute;width:42%;filter:drop-shadow(0 30px 25px rgba(0,0,0,.25));will-change:transform}
.hero-fig.f0{left:29%;top:6%;width:46%;z-index:3}
.hero-fig.f1{left:0;top:26%;z-index:2}
.hero-fig.f2{right:0;top:22%;z-index:1}
.hero-plinth{position:absolute;left:8%;right:8%;bottom:2%;height:16%;background:var(--ink);border-radius:50%;opacity:.12;filter:blur(6px)}
.float-brick{position:absolute;width:64px;height:40px;border-radius:7px;box-shadow:inset 0 -6px 0 rgba(0,0,0,.2);opacity:.9}
.float-brick::before,.float-brick::after{content:"";position:absolute;top:-9px;width:18px;height:11px;border-radius:5px 5px 2px 2px;background:inherit;box-shadow:inset 0 3px 0 rgba(255,255,255,.35)}
.float-brick::before{left:9px}.float-brick::after{right:9px}
.b1{background:var(--red);top:12%;left:48%}
.b2{background:var(--blue);bottom:12%;left:6%;width:48px;height:30px}
.b3{background:var(--green);top:70%;right:6%}
.b4{background:#fff;top:8%;right:10%;width:48px}
.b5{background:var(--orange);bottom:6%;left:44%;width:40px;height:26px}

/* ================= PARADE ================= */
.parade{background:var(--ink);padding:1.4rem 0;overflow:hidden}
.parade-track{display:flex;gap:1.2rem;width:max-content;animation:marquee 40s linear infinite}
.parade:hover .parade-track{animation-play-state:paused}
.parade-item{display:flex;align-items:center;gap:.8rem;background:#23232d;color:#fff;border-radius:999px;padding:.4rem 1.2rem .4rem .4rem;text-decoration:none;white-space:nowrap;font-weight:600;transition:background .2s}
.parade-item:hover{background:var(--red)}
.parade-item .pi-fig{width:48px;height:48px;border-radius:50%;background:#fff;overflow:hidden;display:grid;place-items:center}
.parade-item .pi-fig svg,.parade-item .pi-fig img{width:110%;margin-top:30%}

/* ================= SECTIONS ================= */
section{scroll-margin-top:80px}
.section-head{max-width:640px;margin:0 auto 2.6rem;text-align:center}
.section-head h2,.shop-head h2,.custom h2,.about h2{font-size:clamp(2.1rem,5vw,3.6rem);font-weight:800}
.section-head p:last-child{color:var(--muted);margin-top:.8rem;font-size:1.05rem}
.deals,.cats,.shop{padding:clamp(4rem,9vw,7rem) clamp(16px,5vw,72px)}

/* deals */
.deal-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;max-width:1180px;margin:0 auto}
.deal-card{position:relative;background:var(--card);border-radius:var(--radius);padding:2rem 1.5rem 1.6rem;border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink);transition:transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .25s;overflow:hidden}
.deal-card:hover{transform:translate(-4px,-4px) rotate(-1deg);box-shadow:12px 12px 0 var(--ink)}
.deal-card .qty{font-family:var(--display);font-weight:800;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.deal-card .price{font-family:var(--display);font-weight:800;font-size:3.6rem;line-height:1;margin:.5rem 0}
.deal-card .each{font-weight:700}
.deal-card .save{position:absolute;top:1rem;right:1rem;background:var(--red);color:#fff;font-weight:800;font-size:.8rem;padding:.35rem .7rem;border-radius:999px;transform:rotate(6deg)}
.deal-card .stack{display:flex;gap:4px;margin-top:1.4rem;flex-wrap:wrap}
.deal-card .stack i{width:22px;height:14px;border-radius:3px;position:relative;box-shadow:inset 0 -3px 0 rgba(0,0,0,.2)}
.deal-card.featured{background:var(--yellow)}
.deal-card.free{background:var(--ink);color:#fff;border-color:var(--ink)}
.deal-card.free .qty{color:rgba(255,255,255,.6)}

/* categories */
.cat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem;max-width:1280px;margin:0 auto}
.cat-tile{position:relative;aspect-ratio:3/4;border-radius:var(--radius);overflow:hidden;color:#fff;text-align:left;padding:1.1rem;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.cat-tile::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle, rgba(255,255,255,.16) 0 7px, transparent 8px);background-size:30px 30px}
.cat-tile .ct-fig{position:absolute;left:50%;top:6%;width:78%;transform:translateX(-50%);transition:transform .45s cubic-bezier(.3,1.6,.5,1);filter:drop-shadow(0 14px 12px rgba(0,0,0,.3))}
.cat-tile:hover{transform:translateY(-6px)}
.cat-tile:hover .ct-fig{transform:translateX(-50%) translateY(-10px) rotate(-6deg) scale(1.06)}
.cat-tile h3{position:relative;font-size:1.3rem;font-weight:800}
.cat-tile span{position:relative;font-size:.85rem;opacity:.8}

/* shop */
.shop{background:#fff;border-radius:40px 40px 0 0}
.shop-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;max-width:1280px;margin:0 auto 1.5rem}
.search{display:flex;align-items:center;gap:.5rem;border:2px solid var(--line);border-radius:999px;padding:.65rem 1rem;min-width:min(320px,100%);transition:border-color .2s}
.search:focus-within{border-color:var(--ink)}
.search input{border:0;outline:0;font:inherit;flex:1;background:transparent;min-width:0}
.chips{display:flex;gap:.5rem;flex-wrap:wrap;max-width:1280px;margin:0 auto 2rem}
.chip{padding:.55rem 1.1rem;border-radius:999px;border:2px solid var(--line);font-weight:600;font-size:.92rem;transition:all .2s}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.4rem;max-width:1280px;margin:0 auto}
.card{position:relative;background:var(--card);border-radius:var(--radius);border:1px solid var(--line);overflow:hidden;transition:transform .3s cubic-bezier(.3,1.4,.5,1),box-shadow .3s;transform-style:preserve-3d}
.card:hover{box-shadow:var(--shadow)}
.card-media{position:relative;aspect-ratio:1/1;background:#f4f1ea;display:grid;place-items:center;overflow:hidden;cursor:pointer}
.card-media::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 40%, #fff 0, transparent 65%)}
.card-media .fig{position:relative;width:62%;transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.card-media img.fig{width:80%;height:80%;object-fit:contain}
.card:hover .card-media .fig{transform:translateY(-8px) rotate(-4deg) scale(1.05)}
.card-tag{position:absolute;top:.8rem;left:.8rem;font-size:.75rem;font-weight:700;padding:.25rem .65rem;border-radius:999px;color:#fff}
.card-low{position:absolute;top:.8rem;right:.8rem;font-size:.72rem;font-weight:700;padding:.25rem .6rem;border-radius:999px;background:#fff;border:1px solid var(--line)}
.card-body{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:1rem 1rem 1.1rem}
.card-body h3{font-size:1.12rem;font-weight:700;cursor:pointer}
.card-body .p{font-weight:700;color:var(--muted);font-size:.95rem}
.add{flex:none;width:46px;height:46px;border-radius:50%;background:var(--yellow);font-size:1.6rem;font-weight:700;line-height:1;display:grid;place-items:center;box-shadow:0 4px 0 var(--yellow-deep);transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.add:hover{transform:rotate(90deg) scale(1.08)}
.add:active{transform:scale(.9)}
.empty{text-align:center;color:var(--muted);padding:3rem 0}

/* custom */
.custom{padding:0 clamp(16px,5vw,72px) clamp(4rem,8vw,6rem);background:#fff}
.custom-inner{max-width:1180px;margin:0 auto;background:var(--blue);color:#fff;border-radius:36px;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:2rem;padding:clamp(2rem,5vw,4rem);overflow:hidden;position:relative}
.custom-inner::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle, rgba(255,255,255,.1) 0 8px, transparent 9px);background-size:34px 34px}
.custom-copy{position:relative}
.custom-copy .eyebrow{color:rgba(255,255,255,.7)}
.custom-copy p{margin:1rem 0 1.8rem;max-width:44ch;font-size:1.05rem;opacity:.92}
.custom .btn-dark{background:#fff;color:var(--ink);box-shadow:0 6px 0 rgba(0,0,0,.35)}
.custom-art{position:relative;height:320px}
.custom-art .ca{position:absolute;width:44%;filter:drop-shadow(0 20px 18px rgba(0,0,0,.3))}
.custom-art .ca:nth-child(1){left:28%;top:0;z-index:2;width:50%}
.custom-art .ca:nth-child(2){left:0;top:22%}
.custom-art .ca:nth-child(3){right:0;top:22%}

/* trust */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding:3rem clamp(16px,5vw,72px);background:var(--paper);max-width:1280px;margin:0 auto}
.trust-item{padding:1.5rem;border-radius:var(--radius);background:#fff;border:1px solid var(--line)}
.trust-item .ti{font-size:1.6rem}
.trust-item h3{font-size:1.15rem;margin:.6rem 0 .3rem}
.trust-item p{color:var(--muted);font-size:.95rem}

/* about */
.about{padding:clamp(4rem,8vw,6rem) clamp(16px,5vw,72px);text-align:center}
.about-inner{max-width:720px;margin:0 auto}
.about p:last-child{margin-top:1.2rem;font-size:1.1rem;color:var(--ink-2)}

/* footer */
.footer{background:var(--ink);color:#fff;padding:3rem clamp(16px,5vw,72px) 2rem}
.footer-top{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;padding-bottom:1.6rem;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:1.4rem}
.footer nav{display:flex;gap:1.5rem;flex-wrap:wrap}
.footer nav a{text-decoration:none;opacity:.8}
.footer nav a:hover{opacity:1}
.legal{font-size:.8rem;opacity:.55;max-width:80ch;margin-top:.5rem}

/* ================= MODAL ================= */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px}
.modal[hidden]{display:none}
.modal-backdrop,.drawer-backdrop{position:absolute;inset:0;background:rgba(22,22,29,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modal-card{position:relative;background:#fff;border-radius:30px;display:grid;grid-template-columns:1fr 1fr;width:min(960px,100%);max-height:calc(100vh - 32px);overflow:auto}
.modal-x{position:absolute;top:14px;right:14px;width:42px;height:42px;border-radius:50%;background:#f1efe8;font-size:1.6rem;line-height:1;z-index:2;transition:transform .2s}
.modal-x:hover{transform:rotate(90deg)}
.modal-media{background:#f4f1ea;display:grid;place-items:center;padding:2rem;perspective:900px;min-height:380px}
.tilt{width:72%;transition:transform .15s ease-out;transform-style:preserve-3d;filter:drop-shadow(0 30px 24px rgba(0,0,0,.22))}
.tilt img{width:100%}
.modal-info{padding:2.6rem 2.2rem}
.modal-info h2{font-size:2.4rem;font-weight:800;margin-bottom:.6rem}
.m-price{font-family:var(--display);font-size:1.8rem;font-weight:800;margin-bottom:1rem}
.m-price small{font-family:var(--body);font-size:.85rem;font-weight:500;color:var(--muted)}
#mDesc{color:var(--ink-2);margin-bottom:.8rem}
.m-stock{font-size:.9rem;font-weight:700;color:var(--green);margin-bottom:1.4rem}
.m-actions{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.stepper{display:flex;align-items:center;border:2px solid var(--line);border-radius:999px}
.stepper button{width:42px;height:46px;font-size:1.3rem;font-weight:700}
.stepper span{min-width:28px;text-align:center;font-weight:700}
.m-deals{list-style:none;display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.6rem}
.m-deals li{background:var(--paper);border:1px dashed var(--yellow-deep);padding:.35rem .8rem;border-radius:999px;font-size:.85rem;font-weight:600}

/* ================= DRAWER ================= */
.drawer{position:fixed;inset:0;z-index:70}
.drawer[hidden]{display:none}
.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(440px,100%);background:#fff;display:flex;flex-direction:column;transform:translateX(100%)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:1.4rem 1.4rem .8rem;position:relative}
.drawer-head h2{font-size:1.7rem;font-weight:800}
.drawer-head .modal-x{position:static}
.deal-meter{margin:0 1.4rem 1rem;background:var(--paper);border-radius:16px;padding:1rem}
.deal-meter p{font-weight:700;font-size:.95rem;margin-bottom:.6rem}
.deal-meter p b{color:var(--red)}
.meter{height:12px;background:#ece7da;border-radius:999px;overflow:hidden;position:relative}
.meter i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--yellow),var(--orange));border-radius:999px;transition:width .5s cubic-bezier(.3,1.4,.5,1)}
.meter-ticks{display:flex;justify-content:space-between;font-size:.72rem;color:var(--muted);margin-top:.35rem;font-weight:600}
.drawer-items{flex:1;overflow:auto;padding:0 1.4rem}
.line-item{display:grid;grid-template-columns:64px 1fr auto;gap:.9rem;align-items:center;padding:.9rem 0;border-bottom:1px solid var(--line)}
.li-fig{width:64px;height:64px;border-radius:14px;background:#f4f1ea;display:grid;place-items:center;overflow:hidden}
.li-fig svg{width:70%}.li-fig img{width:90%;height:90%;object-fit:contain}
.li-name{font-weight:700}
.li-sub{font-size:.85rem;color:var(--muted)}
.li-step{display:flex;align-items:center;gap:.2rem;border:1.5px solid var(--line);border-radius:999px}
.li-step button{width:30px;height:32px;font-weight:700}
.li-step span{min-width:18px;text-align:center;font-weight:700;font-size:.9rem}
.drawer-empty{text-align:center;padding:3rem 1rem;color:var(--muted)}
.drawer-empty .btn{margin-top:1.2rem}
.drawer-foot{padding:1.2rem 1.4rem 1.4rem;border-top:1px solid var(--line);background:#fff}
.sum{display:flex;justify-content:space-between;margin-bottom:.4rem;font-size:.95rem}
.sum.save{color:var(--green);font-weight:700}
.sum.total{font-family:var(--display);font-size:1.5rem;font-weight:800;margin:.8rem 0 1rem}
.checkout{width:100%;justify-content:center;font-size:1.05rem}
.checkout[disabled]{opacity:.6;pointer-events:none}
.pay-note{text-align:center;font-size:.8rem;color:var(--muted);margin-top:.7rem}
.err{color:var(--red);font-size:.85rem;margin-top:.6rem;text-align:center}

/* toast + flyer */
.toast{position:fixed;left:50%;bottom:24px;z-index:90;transform:translate(-50%,calc(100% + 60px));visibility:hidden;background:var(--ink);color:#fff;padding:.85rem 1.3rem;border-radius:999px;font-weight:600;box-shadow:var(--shadow);transition:transform .45s cubic-bezier(.3,1.5,.5,1);white-space:nowrap;max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis}
.toast.show{transform:translate(-50%,0);visibility:visible}
.flyer{position:fixed;z-index:95;pointer-events:none;width:80px}

/* reveal */
.reveal{opacity:0;transform:translateY(30px)}
.no-motion .reveal{opacity:1;transform:none}

/* ================= RESPONSIVE ================= */
@media (max-width:1000px){
  .deal-cards{grid-template-columns:repeat(2,1fr)}
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .trust{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .nav-links{display:none}
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:2.4rem;text-align:left}
  .hero-figs{height:360px;order:-1}
  .custom-inner{grid-template-columns:1fr}
  .custom-art{height:240px}
  .modal-card{grid-template-columns:1fr}
  .modal-media{min-height:280px}
  .modal-info{padding:1.6rem 1.4rem 2rem}
}
@media (max-width:560px){
  .brick-logo{--px:7px}
  .hero-title em{-webkit-text-stroke:2px var(--ink);text-shadow:4px 4px 0 var(--ink)}
  .deal-cards{grid-template-columns:1fr 1fr;gap:.8rem}
  .deal-card{padding:1.4rem 1rem 1.2rem;box-shadow:5px 5px 0 var(--ink)}
  .deal-card .price{font-size:2.5rem}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:repeat(2,1fr);gap:.8rem}
  .card-body{padding:.75rem;flex-wrap:nowrap;align-items:flex-end}
  .card-body>div{min-width:0}
  .card-tag,.card-low{font-size:.66rem;padding:.2rem .5rem}
  .card-body h3{font-size:.98rem}
  .add{width:40px;height:40px}
  .trust{grid-template-columns:1fr}
  .basket-btn span:not(.basket-count){display:none}
  .logo-word{font-size:1.25rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}