/* ============================================================
   KAPOW! — Bold Comic / Pop-Art Landing Template
   Self-hosted. No frameworks, no CDNs, no tracking.
   1.Fonts 2.Tokens 3.Base 4.A11y 5.Layout 6.Nav 7.Buttons
   8.Hero 9.Comic panels 10.Specs 11.Steps 12.Pricing 13.FAQ
   14.Forms 15.Footer 16.404 17.Responsive 18.Motion
   ============================================================ */

/* ---------- 1. FONTS ---------- */
@font-face { font-family:"Bebas Neue"; src:url("../fonts/BebasNeue-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Courier Prime"; src:url("../fonts/courier-prime-v11-latin-regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Courier Prime"; src:url("../fonts/courier-prime-v11-latin-700.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"Inter"; src:url("../fonts/Inter-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Inter"; src:url("../fonts/Inter-ExtraBold.woff2") format("woff2"); font-weight:800; font-display:swap; }

/* ---------- 2. TOKENS ---------- */
:root {
  --red:#e61e25;
  --yellow:#ffcc00;
  --ink:#000;
  --paper:#fff;
  --cream:#fff8e6;
  --maxw:1100px;
  --border:5px solid var(--ink);
  --shadow:12px 12px 0 var(--ink);
  --shadow-red:12px 12px 0 var(--red);
  --shadow-sm:6px 6px 0 var(--ink);
}

/* ---------- 3. BASE ---------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:"Inter",system-ui,Arial,sans-serif;
  color:var(--ink);
  background-color:var(--yellow);
  background-image:radial-gradient(var(--ink) 2.2px, transparent 2.3px);
  background-size:22px 22px;
  line-height:1.55; font-weight:400; font-size:1rem;
  overflow-x:hidden; min-height:100vh;
}
img { max-width:100%; height:auto; display:block; }
a { color:inherit; }
ul { list-style:none; }
.display { font-family:"Bebas Neue",Impact,sans-serif; letter-spacing:1px; line-height:0.92; }
.mono { font-family:"Courier Prime",ui-monospace,monospace; }
h1,h2,h3 { font-family:"Bebas Neue",Impact,sans-serif; letter-spacing:1px; line-height:0.9; text-transform:uppercase; }

/* ---------- 4. A11Y ---------- */
.skip-link { position:absolute; left:8px; top:-50px; background:var(--ink); color:var(--yellow); font-weight:800; padding:10px 18px; z-index:300; border:3px solid var(--yellow); transition:top .2s ease; }
.skip-link:focus { top:8px; }
:focus-visible { outline:4px solid var(--red); outline-offset:3px; }
.visually-hidden { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- 5. LAYOUT ---------- */
.container { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 22px; }
.section { padding:80px 0; }
.eyebrow { display:inline-block; font-family:"Courier Prime",monospace; font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.28em; background:var(--ink); color:var(--yellow); padding:6px 14px; margin-bottom:18px; }
.section-title { font-size:clamp(2.6rem,8vw,5rem); color:var(--ink); }
.section-title .red { color:var(--red); -webkit-text-stroke:2px #000; }
.lead { font-weight:800; font-size:1.05rem; max-width:60ch; }
.center { text-align:center; }
.center .lead { margin-inline:auto; }

/* ---------- 6. NAV ---------- */
.site-header { position:sticky; top:0; z-index:100; background:var(--ink); border-bottom:5px solid var(--yellow); }
.nav { display:flex; align-items:center; justify-content:space-between; padding:14px 22px; max-width:var(--maxw); margin:0 auto; }
.brand { font-family:"Bebas Neue",Impact,sans-serif; font-size:2.1rem; color:var(--yellow); letter-spacing:2px; }
.brand .bang { color:var(--red); -webkit-text-stroke:1px var(--yellow); }
.nav-links { display:flex; align-items:center; gap:26px; }
.nav-links a { font-family:"Courier Prime",monospace; font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.16em; color:var(--paper); transition:color .2s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color:var(--yellow); }
.nav-toggle { display:none; background:var(--yellow); border:3px solid var(--yellow); color:var(--ink); width:46px; height:42px; font-size:1.3rem; cursor:pointer; }

/* ---------- 7. BUTTONS ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:"Bebas Neue",Impact,sans-serif; font-size:1.4rem; letter-spacing:1.5px; text-transform:uppercase; padding:14px 30px; border:var(--border); cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; box-shadow:var(--shadow-sm); }
.btn:hover { transform:translate(-3px,-3px); box-shadow:9px 9px 0 var(--ink); }
.btn:active { transform:translate(0,0); box-shadow:3px 3px 0 var(--ink); }
.btn-red { background:var(--red); color:var(--paper); }
.btn-yellow { background:var(--yellow); color:var(--ink); }
.btn-white { background:var(--paper); color:var(--ink); }
.btn-block { width:100%; }

/* ---------- 8. HERO ---------- */
.hero { padding:64px 0; }
.hero-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; }
.alert-bar { background:var(--red); color:var(--paper); border:var(--border); box-shadow:var(--shadow); font-family:"Bebas Neue",Impact,sans-serif; font-size:clamp(1.4rem,4vw,2.2rem); letter-spacing:3px; text-align:center; padding:12px; margin-bottom:26px; }
.hero h1 { font-size:clamp(3.4rem,12vw,7rem); color:var(--ink); text-shadow:4px 4px 0 var(--paper), 8px 8px 0 var(--red); }
.hero p.tagline { font-weight:800; font-size:1.2rem; margin:24px 0 30px; max-width:42ch; }
.hero-actions { display:flex; gap:16px; flex-wrap:wrap; }
.hero-art { position:relative; }
.hero-art .frame { border:var(--border); box-shadow:var(--shadow-red); background:var(--paper); }
.hero-art img { width:100%; display:block; }
.pow-bubble { position:absolute; top:-26px; right:-18px; background:var(--yellow); border:4px solid var(--ink); font-family:"Bebas Neue",Impact,sans-serif; font-size:1.5rem; padding:16px 20px; transform:rotate(8deg); clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.price-splash { position:absolute; bottom:-22px; left:-20px; width:110px; height:110px; background:var(--red); color:var(--paper); border:4px solid var(--ink); border-radius:50%; display:grid; place-items:center; text-align:center; transform:rotate(-12deg); }
.price-splash .amt { font-family:"Bebas Neue",Impact,sans-serif; font-size:2rem; line-height:.8; }
.price-splash .lbl { font-family:"Courier Prime",monospace; font-size:.6rem; text-transform:uppercase; }

/* ---------- marquee strip ---------- */
.strip { background:var(--ink); color:var(--yellow); border-block:5px solid var(--yellow); padding:14px 0; }
.strip .container { display:flex; gap:40px; justify-content:center; flex-wrap:wrap; font-family:"Courier Prime",monospace; font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.2em; }
.strip .star { color:var(--red); }

/* ---------- 9. COMIC PANELS ---------- */
.panel { background:var(--paper); border:var(--border); box-shadow:var(--shadow); padding:28px; }
.panel.red { background:var(--red); color:var(--paper); }
.panel.yellow { background:var(--yellow); }
.panel.ink { background:var(--ink); color:var(--paper); }
.panel h2 { font-size:2.4rem; color:var(--red); text-shadow:2px 2px 0 var(--ink); margin-bottom:12px; }
.panel.red h2, .panel.ink h2 { color:var(--yellow); text-shadow:2px 2px 0 var(--ink); }
.panel p, .panel li { font-weight:800; }
.panel-grid { display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.comic-list { margin-top:8px; }
.comic-list li { display:flex; gap:10px; padding:7px 0; }
.comic-list li::before { content:"\25B6"; color:var(--red); font-size:.8rem; line-height:1.6; }
.panel.red .comic-list li::before, .panel.ink .comic-list li::before { color:var(--yellow); }

/* ---------- 10. SPEC READOUT (was terminal) ---------- */
.specs { display:grid; grid-template-columns:1fr 1fr; gap:0; border:var(--border); box-shadow:var(--shadow); }
.spec-row { display:contents; }
.spec-hero { padding:26px; background:var(--paper); border-right:5px solid var(--ink); border-bottom:5px solid var(--ink); display:flex; flex-direction:column; justify-content:center; }
.spec-hero h3 { font-size:2.6rem; color:var(--red); line-height:.85; }
.spec-hero p { font-family:"Courier Prime",monospace; font-weight:700; text-transform:uppercase; letter-spacing:.1em; }
.spec-data { padding:26px; background:var(--ink); color:var(--yellow); font-family:"Courier Prime",monospace; font-size:.92rem; line-height:1.5; border-bottom:5px solid var(--ink); }
.spec-data .label { color:var(--red); font-weight:700; text-transform:uppercase; }
.spec-data .tag { background:#333; color:var(--paper); padding:2px 6px; }
.spec-hero.alt { background:var(--yellow); }
.spec-hero.alt h3 { color:var(--ink); }

/* ---------- 11. STEPS ---------- */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.step { background:var(--paper); border:var(--border); box-shadow:var(--shadow-sm); padding:26px; position:relative; }
.step .num { position:absolute; top:-22px; left:-12px; width:48px; height:48px; background:var(--red); color:var(--paper); border:4px solid var(--ink); border-radius:50%; display:grid; place-items:center; font-family:"Bebas Neue",Impact,sans-serif; font-size:1.6rem; }
.step h3 { font-size:1.7rem; margin-bottom:8px; }
.step p { font-weight:800; font-size:.95rem; }

/* ---------- 12. PRICING ---------- */
.prices { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:stretch; }
.tier { background:var(--paper); border:var(--border); box-shadow:var(--shadow-sm); padding:30px; display:flex; flex-direction:column; }
.tier.hot { background:var(--yellow); box-shadow:var(--shadow); transform:rotate(-1deg); }
.tier .name { font-family:"Courier Prime",monospace; font-weight:700; text-transform:uppercase; letter-spacing:.2em; font-size:.8rem; }
.tier .amt { font-family:"Bebas Neue",Impact,sans-serif; font-size:3.6rem; line-height:.9; color:var(--red); margin:8px 0; }
.tier .amt small { font-family:"Inter",sans-serif; font-size:.9rem; color:var(--ink); font-weight:800; }
.tier ul { margin:14px 0 22px; }
.tier li { font-weight:800; padding:7px 0; border-bottom:2px dashed var(--ink); }
.tier .btn { margin-top:auto; }

/* ---------- 13. FAQ ---------- */
.faq { max-width:800px; margin:0 auto; }
.faq-item { background:var(--paper); border:var(--border); box-shadow:var(--shadow-sm); margin-bottom:16px; }
.faq-q { width:100%; text-align:left; background:none; border:none; font-family:"Bebas Neue",Impact,sans-serif; font-size:1.5rem; letter-spacing:.5px; padding:18px 22px; cursor:pointer; display:flex; justify-content:space-between; gap:14px; align-items:center; color:var(--ink); }
.faq-q .sign { color:var(--red); font-family:"Bebas Neue",sans-serif; font-size:2rem; transition:transform .2s; }
.faq-q[aria-expanded="true"] .sign { transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a div { padding:0 22px 20px; font-weight:800; }

/* ---------- CTA ---------- */
.cta { background:var(--red); color:var(--paper); border:var(--border); box-shadow:var(--shadow); text-align:center; padding:64px 24px; }
.cta h2 { font-size:clamp(2.6rem,8vw,5rem); color:var(--paper); text-shadow:3px 3px 0 var(--ink); margin-bottom:18px; }
.cta p { font-weight:800; max-width:46ch; margin:0 auto 28px; }

/* ---------- 14. FORMS ---------- */
.page-hero { padding:56px 0; border-bottom:5px solid var(--ink); }
.page-hero h1 { font-size:clamp(2.8rem,9vw,5rem); text-shadow:3px 3px 0 var(--paper),6px 6px 0 var(--red); }
.prose { max-width:760px; }
.prose h2 { font-size:2rem; color:var(--red); text-shadow:2px 2px 0 var(--ink); margin:32px 0 12px; }
.prose p, .prose li { font-weight:800; margin-bottom:12px; }
.prose ul { padding-left:22px; }
.prose ul li { list-style:square; }
.contact-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:start; }
.field { margin-bottom:18px; }
.field label { display:block; font-family:"Courier Prime",monospace; font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.16em; margin-bottom:6px; }
.field input, .field textarea { width:100%; background:var(--paper); border:var(--border); padding:13px 15px; font-family:"Inter",sans-serif; font-weight:800; font-size:1rem; }
.field input:focus, .field textarea:focus { outline:none; box-shadow:var(--shadow-sm); }
.form-status { margin-top:14px; font-family:"Courier Prime",monospace; font-weight:700; background:var(--ink); color:var(--yellow); display:inline-block; padding:8px 12px; }
.form-status:empty { display:none; }
.form-note { font-weight:800; font-size:.86rem; margin-top:10px; }
.info { background:var(--ink); color:var(--paper); border:var(--border); box-shadow:var(--shadow-sm); padding:26px; }
.info li { padding:14px 0; border-bottom:2px dashed var(--yellow); }
.info .k { display:block; font-family:"Courier Prime",monospace; font-weight:700; font-size:.7rem; text-transform:uppercase; letter-spacing:.16em; color:var(--yellow); margin-bottom:4px; }

/* ---------- 15. FOOTER ---------- */
.site-footer { background:var(--ink); color:var(--paper); border-top:5px solid var(--yellow); padding:56px 0 28px; margin-top:40px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:36px; margin-bottom:40px; }
.footer-brand .brand { font-size:2.6rem; }
.footer-brand p { font-weight:800; margin-top:12px; max-width:34ch; color:#ddd; }
.footer-col h4 { font-family:"Courier Prime",monospace; font-weight:700; font-size:.74rem; text-transform:uppercase; letter-spacing:.16em; color:var(--yellow); margin-bottom:14px; }
.footer-col a { display:block; color:#ddd; font-weight:800; padding:5px 0; transition:color .2s; }
.footer-col a:hover { color:var(--yellow); }
.footer-bottom { border-top:2px dashed #555; padding-top:22px; text-align:center; font-family:"Courier Prime",monospace; font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.2em; color:#bbb; }

/* ---------- 16. 404 ---------- */
.error-page { min-height:66vh; display:grid; place-items:center; text-align:center; padding:70px 22px; }
.error-page .code { font-family:"Bebas Neue",Impact,sans-serif; font-size:clamp(6rem,24vw,15rem); line-height:.8; color:var(--red); text-shadow:5px 5px 0 var(--paper),10px 10px 0 var(--ink); }

/* ---------- 17. RESPONSIVE ---------- */
@media (max-width:900px){
  .hero-grid { grid-template-columns:1fr; }
  .panel-grid, .specs, .steps, .prices { grid-template-columns:1fr; }
  .spec-hero { border-right:0; }
  .contact-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .nav-links { position:fixed; inset:62px 0 auto 0; flex-direction:column; gap:0; background:var(--ink); border-bottom:5px solid var(--yellow); padding:6px 0; transform:translateY(-130%); transition:transform .3s ease; }
  .nav-links.open { transform:translateY(0); }
  .nav-links a { padding:15px 22px; width:100%; }
  .nav-toggle { display:inline-flex; align-items:center; justify-content:center; }
  .section { padding:56px 0; }
  .footer-grid { grid-template-columns:1fr; }
  .pow-bubble, .price-splash { position:static; display:inline-block; transform:none; clip-path:none; border-radius:0; width:auto; height:auto; margin-bottom:12px; }
}

/* ---------- 18. REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}


/* ============================================================
   19. COMMERCE ADDITIONS (Shopify) — comic-styled shared
   component vocabulary (pcard, pdp, cart, paginate, acct...)
   ============================================================ */

/* ---- Announcement + header commerce ---- */
.announce { background:var(--red); color:var(--paper); text-align:center; font-family:"Bebas Neue",Impact,sans-serif; font-size:1rem; letter-spacing:2px; padding:8px 16px; border-bottom:5px solid var(--ink); }
.nav-cta { font-family:"Bebas Neue",Impact,sans-serif; background:var(--yellow); color:var(--ink)!important; border:3px solid var(--yellow); padding:8px 16px; font-size:1rem; letter-spacing:1.5px; }
.nav-cta:hover { background:var(--red); border-color:var(--red); color:var(--paper)!important; }
.cart-count { background:var(--ink); color:var(--yellow); font-family:"Courier Prime",monospace; font-weight:700; font-size:.68rem; padding:1px 7px; margin-left:8px; }

/* ---- Page banner (utility pages) ---- */
.page-head { padding:52px 0; border-bottom:5px solid var(--ink); }
.page-head .wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 22px; }
.page-head .kh { display:inline-block; font-family:"Courier Prime",monospace; font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.28em; background:var(--ink); color:var(--yellow); padding:6px 14px; margin-bottom:16px; }
.page-head h1 { font-size:clamp(2.6rem,9vw,4.6rem); text-shadow:3px 3px 0 var(--paper),6px 6px 0 var(--red); }
.kh { font-family:"Courier Prime",monospace; font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.28em; }
.section-pad { padding:64px 0; }
.prose-wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 22px; }

/* ---- Product cards ---- */
.product-grid { max-width:var(--maxw); margin:0 auto; padding:0 22px; display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.pcard { background:var(--paper); border:var(--border); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; color:var(--ink); text-decoration:none; transition:transform .12s ease, box-shadow .12s ease; }
.pcard:hover { transform:translate(-3px,-3px); box-shadow:9px 9px 0 var(--ink); }
.pcard .ph { aspect-ratio:1; border-bottom:5px solid var(--ink); overflow:hidden; position:relative; background:var(--cream); }
.pcard .ph img { width:100%; height:100%; object-fit:cover; }
.pcard .ph .tag { position:absolute; top:10px; left:10px; font-family:"Courier Prime",monospace; font-weight:700; font-size:.62rem; text-transform:uppercase; letter-spacing:.16em; background:var(--yellow); border:3px solid var(--ink); padding:3px 9px; }
.badge-soldout { position:absolute; top:10px; right:10px; background:var(--red); color:var(--paper); border:3px solid var(--ink); font-family:"Bebas Neue",Impact,sans-serif; font-size:.85rem; letter-spacing:1px; padding:3px 10px; transform:rotate(4deg); }
.pcard .pc-body { padding:18px; }
.pcard h3 { font-size:1.4rem; }
.pcard .price { font-family:"Bebas Neue",Impact,sans-serif; font-size:1.3rem; color:var(--red); margin-top:6px; display:block; }
.pcard .price s { font-family:"Inter",sans-serif; font-size:.85rem; color:var(--ink); margin-left:8px; }

/* ---- Collection tools + pagination ---- */
.coll-tools { max-width:var(--maxw); margin:0 auto 30px; padding:0 22px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.coll-tools .count { font-family:"Courier Prime",monospace; font-weight:700; font-size:.75rem; text-transform:uppercase; letter-spacing:.2em; }
.coll-tools select { border:var(--border); background:var(--paper); padding:10px 14px; font-family:"Courier Prime",monospace; font-weight:700; font-size:.8rem; max-width:100%; }
.paginate { display:flex; justify-content:center; gap:12px; margin:52px auto 0; padding:0 22px; flex-wrap:wrap; }
.paginate a, .paginate span { border:4px solid var(--ink); background:var(--paper); padding:9px 15px; font-family:"Bebas Neue",Impact,sans-serif; font-size:1.05rem; box-shadow:4px 4px 0 var(--ink); }
.paginate span.current { background:var(--red); color:var(--paper); }
.paginate a:hover { background:var(--yellow); }

/* ---- Product page ---- */
.pdp { max-width:var(--maxw); margin:0 auto; padding:64px 22px; display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }
.pdp-media { position:sticky; top:96px; }
.pdp-media .main-img { border:var(--border); box-shadow:var(--shadow-red); background:var(--paper); aspect-ratio:1; overflow:hidden; }
.pdp-media .main-img img { width:100%; height:100%; object-fit:cover; }
.pdp-thumbs { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:18px; }
.pdp-thumbs a { border:4px solid var(--ink); aspect-ratio:1; overflow:hidden; display:block; background:var(--paper); box-shadow:4px 4px 0 var(--ink); }
.pdp-thumbs img { width:100%; height:100%; object-fit:cover; }
.pdp-info .kh { display:inline-block; background:var(--ink); color:var(--yellow); padding:6px 14px; margin-bottom:14px; }
.pdp-info h1 { font-size:clamp(2.4rem,7vw,4.2rem); text-shadow:3px 3px 0 var(--paper),6px 6px 0 var(--red); }
.pdp-price { font-family:"Bebas Neue",Impact,sans-serif; font-size:2.4rem; color:var(--red); margin:18px 0; }
.pdp-price s { font-family:"Inter",sans-serif; font-weight:800; color:var(--ink); font-size:1.2rem; margin-left:10px; }
.pdp-price .sale-flag { background:var(--yellow); border:3px solid var(--ink); font-size:1rem; letter-spacing:1px; padding:3px 10px; vertical-align:middle; margin-left:10px; display:inline-block; transform:rotate(-3deg); }
.pdp-desc { font-weight:800; margin:22px 0; max-width:60ch; }
.pdp-desc p { margin-bottom:12px; }
.qty-row { display:flex; gap:14px; margin:22px 0; flex-wrap:wrap; }
.qty-row input[type="number"] { width:92px; border:var(--border); padding:12px; font-family:"Bebas Neue",Impact,sans-serif; font-size:1.3rem; text-align:center; background:var(--paper); }
.pdp .btn { width:100%; margin-top:6px; }
.pdp-meta { margin-top:26px; border-top:5px solid var(--ink); }
.pdp-meta li { padding:13px 0; border-bottom:2px dashed var(--ink); font-weight:800; font-size:.92rem; display:flex; gap:12px; }
.pdp-meta .k { font-family:"Courier Prime",monospace; font-weight:700; text-transform:uppercase; font-size:.7rem; letter-spacing:.14em; color:var(--red); min-width:100px; padding-top:3px; }
.field select { width:100%; background:var(--paper); border:var(--border); padding:13px 15px; font-family:"Inter",sans-serif; font-weight:800; font-size:1rem; }

/* ---- Cart ---- */
.cart-wrap { max-width:var(--maxw); margin:0 auto; padding:64px 22px; }
.cart-line { display:grid; grid-template-columns:100px 1fr auto auto; gap:20px; align-items:center; background:var(--paper); border:var(--border); box-shadow:var(--shadow-sm); padding:18px; margin-bottom:18px; }
.cart-line .th { border:4px solid var(--ink); width:100px; aspect-ratio:1; overflow:hidden; background:var(--cream); display:block; }
.cart-line .th img { width:100%; height:100%; object-fit:cover; }
.cart-line h3 { font-size:1.3rem; }
.cart-line .var { font-family:"Courier Prime",monospace; font-weight:700; font-size:.75rem; text-transform:uppercase; margin-top:4px; }
.cart-line .rm { font-family:"Courier Prime",monospace; font-weight:700; font-size:.7rem; text-transform:uppercase; letter-spacing:.14em; text-decoration:underline; margin-top:8px; display:inline-block; color:var(--red); }
.cart-line input[type="number"] { width:78px; border:4px solid var(--ink); padding:10px; font-family:"Bebas Neue",Impact,sans-serif; font-size:1.2rem; text-align:center; }
.cart-line .lp { font-family:"Bebas Neue",Impact,sans-serif; font-size:1.5rem; color:var(--red); }
.cart-foot { display:flex; justify-content:flex-end; margin-top:30px; }
.cart-tot { background:var(--paper); border:var(--border); box-shadow:var(--shadow); padding:26px; min-width:min(360px,100%); }
.cart-tot .row { display:flex; justify-content:space-between; font-family:"Bebas Neue",Impact,sans-serif; font-size:1.6rem; margin-bottom:6px; }
.cart-tot .note { font-family:"Courier Prime",monospace; font-weight:700; font-size:.75rem; text-transform:uppercase; margin-bottom:16px; }
.cart-tot .btn { width:100%; }
.cart-empty { text-align:center; padding:50px 0; }
.cart-empty h2 { font-size:2.4rem; text-shadow:2px 2px 0 var(--paper),4px 4px 0 var(--red); margin-bottom:20px; }

/* ---- Search ---- */
.search-bar { max-width:760px; margin:0 auto 44px; padding:0 22px; display:flex; }
.search-bar input { flex:1; min-width:0; border:var(--border); border-right:0; padding:15px; font-family:"Inter",sans-serif; font-weight:800; font-size:1rem; background:var(--paper); }
.search-bar button { flex:none; border:var(--border); background:var(--ink); color:var(--yellow); font-family:"Bebas Neue",Impact,sans-serif; font-size:1.2rem; letter-spacing:1px; padding:0 24px; cursor:pointer; }
.search-bar button:hover { background:var(--red); color:var(--paper); }

/* ---- Blog / article ---- */
.article-card { background:var(--paper); border:var(--border); box-shadow:var(--shadow-sm); color:var(--ink); }
.article-card .ph { aspect-ratio:16/9; border-bottom:5px solid var(--ink); overflow:hidden; background:var(--cream); }
.article-card .ph img { width:100%; height:100%; object-fit:cover; }
.article-card .pc-body { padding:18px; }
.article-card h3 { font-size:1.5rem; }
.article-card .date { font-family:"Courier Prime",monospace; font-weight:700; font-size:.7rem; text-transform:uppercase; letter-spacing:.2em; margin-top:8px; display:block; }
.article-body { max-width:760px; margin:0 auto; padding:56px 22px; }
.article-body img { border:var(--border); box-shadow:var(--shadow-sm); }

/* ---- Accounts / tables / misc ---- */
.acct-wrap { max-width:560px; margin:0 auto; padding:56px 22px; }
.acct-wrap.wide { max-width:var(--maxw); }
.acct-wrap h2 { font-size:1.8rem; margin:30px 0 14px; }
.acct-links { margin-top:18px; font-weight:800; font-size:.9rem; }
.acct-links a { text-decoration:underline; }
.acct-links a:hover { color:var(--red); }
.form-errors { border:var(--border); background:var(--yellow); box-shadow:var(--shadow-sm); padding:14px 18px; margin-bottom:20px; font-weight:800; font-size:.9rem; }
.form-errors ul { list-style:square; padding-left:20px; }
.tbl { width:100%; border-collapse:collapse; font-size:.92rem; background:var(--paper); border:var(--border); box-shadow:var(--shadow-sm); }
.tbl th { font-family:"Courier Prime",monospace; font-weight:700; text-transform:uppercase; font-size:.7rem; letter-spacing:.14em; text-align:left; border-bottom:5px solid var(--ink); padding:12px; background:var(--yellow); }
.tbl td { border-bottom:2px dashed var(--ink); padding:13px 12px; font-weight:800; }
.addr-card { background:var(--paper); border:var(--border); box-shadow:var(--shadow-sm); padding:20px; margin-bottom:16px; font-weight:800; }
.center { text-align:center; }
.mt-2 { margin-top:18px; }
.password-hero { min-height:70vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:60px 22px; }
.password-hero .code { font-family:"Bebas Neue",Impact,sans-serif; color:var(--red); text-shadow:4px 4px 0 var(--paper),8px 8px 0 var(--ink); }
.info { list-style:none; }

/* ============================================================
   20. MOBILE REFINEMENTS (overflow + rhythm, baked in)
   ============================================================ */
html, body { overflow-x:clip; }
.field input, .field textarea, .field select { min-width:0; }

@media (max-width:900px){
  .pdp { grid-template-columns:1fr; padding:44px 20px; gap:34px; }
  .pdp-media { position:static; }
  .product-grid { grid-template-columns:1fr 1fr; }
  .cart-line { grid-template-columns:84px 1fr; }
  .cart-line .th { width:84px; }
  .cart-line .qcol, .cart-line .lp { grid-column:2; }
  .cart-wrap, .acct-wrap, .article-body { padding:44px 20px; }
  .page-head { padding:38px 0; }
  .hero { padding:44px 0; }
  .hero h1 { font-size:clamp(2.8rem,13vw,4.4rem); }
  .alert-bar { box-shadow:var(--shadow-sm); }
  .section { padding:56px 0; }
  .cta { padding:44px 20px; }
}
@media (max-width:640px){
  .product-grid { grid-template-columns:1fr; }
  .page-head { padding:32px 0; }
  .page-head h1 { font-size:clamp(2.2rem,11vw,3rem); }
  .search-bar { padding:0 20px; }
  .search-bar button { padding:0 16px; font-size:1rem; }
  .paginate a, .paginate span { padding:7px 12px; }
  .tier.hot { transform:none; }
  .pdp-info h1 { font-size:clamp(2rem,10vw,2.8rem); }
  .cart-tot .row { font-size:1.3rem; }
  .btn { font-size:1.2rem; padding:12px 24px; }
}

/* ============================================================
   21. DESKTOP-STYLE HERO ON MOBILE
   Keep the text-beside-art hero grid on phones, scaled, with
   the comic bubble and price splash back in their overlaid
   positions. Loads last, so it overrides earlier stacking.
   ============================================================ */
@media (max-width:900px){
  .hero-grid { grid-template-columns:1.05fr .95fr; gap:18px; align-items:center; }
  .hero h1 { font-size:clamp(2rem,8.5vw,3rem); }
  .hero .tagline { font-size:.85rem; }
  .hero-actions { gap:10px; }
  .hero-actions .btn { padding:10px 14px; font-size:.95rem; }
  .hero-art .frame { box-shadow:6px 6px 0 var(--red); }
  .pow-bubble, .price-splash { position:absolute; margin:0; }
  .pow-bubble { top:-16px; right:-6px; font-size:1rem; padding:10px 12px; border-width:3px; transform:rotate(8deg); clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
  .price-splash { bottom:-14px; left:-8px; width:74px; height:74px; border-width:3px; border-radius:50%; transform:rotate(-12deg); }
  .price-splash .amt { font-size:1.3rem; }
  .price-splash .lbl { font-size:.5rem; }
}
@media (max-width:640px){
  .hero-grid { gap:14px; }
  .alert-bar { font-size:.8rem; padding:8px 10px; }
}


/* ============================================================
   22. LEGIBILITY PASS — calmer halftone, solid reading surfaces
   The comic identity stays; text stops fighting the dots.
   ============================================================ */
/* Softer, sparser halftone (was 2.2px ink dots every 22px) */
body {
  background-image: radial-gradient(rgba(0,0,0,0.10) 1.6px, transparent 1.7px);
  background-size: 26px 26px;
}

/* Anything meant to be READ sits on a solid panel */
.pdp-info, .cart-wrap .cart-empty, .acct-wrap, .article-body, .prose-wrap .prose {
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  padding: 28px;
}
.pdp-info { padding: 32px; }
.prose-wrap .prose { padding: 32px 34px; }
.coll-tools .count { background: var(--paper); border: 2px solid var(--ink); padding: 6px 10px; }
.pdp-meta li, .faq-item, .cart-line, .cart-tot, .field input, .field textarea, .field select { background: var(--paper); }

/* Heading shadows: single clean offset instead of double-layer ghosting */
.hero h1 { text-shadow: 5px 5px 0 var(--red); }
.page-hero h1, .page-head h1, .pdp-info h1 { text-shadow: 4px 4px 0 var(--red); }
.cart-empty h2 { text-shadow: 3px 3px 0 var(--red); }
.error-page .code { text-shadow: 7px 7px 0 var(--ink); }
.password-hero .code { text-shadow: 6px 6px 0 var(--ink); }

/* Body text: never letter-spaced or shadowed on pattern */
.tagline, .pdp-desc, .lead { text-shadow: none; }
@media (max-width:640px){
  body { background-size: 30px 30px; }
  .pdp-info { padding: 22px; }
}


/* Static edition helpers: local cart/search only. */
.static-cart-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.static-cart-actions .btn{width:auto}.static-note{font-family:"Courier Prime",monospace;font-weight:700;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;margin-top:12px}.pcard-actions{padding:0 18px 18px}.pcard-actions .btn{width:100%}.search-empty{display:none}.search-empty.is-visible{display:block}.product-grid[hidden]{display:none!important}