@import url("https://fonts.googleapis.com/css2?family=Bangers&family=Neucha&display=swap");

/* Active font system only:
   Page titles: ActionTitle / Action Comics Black
   Page UI: Bangers
   Body copy: Neucha
   Character card/effect accents: character-specific local fonts below
*/
@font-face { font-family:"ActionTitle"; src:url("../assets/fonts/Action-Comics-Black.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"ModernThrash"; src:url("../assets/fonts/Modern-Thrash-Demo.otf") format("opentype"); font-display:swap; }
@font-face { font-family:"SpiderFont"; src:url("../assets/fonts/The-Amazing-Spider-Man.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"VenomFont"; src:url("../assets/fonts/VENOM.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"HulkFont"; src:url("../assets/fonts/Hulk-Comic.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"IronManFont"; src:url("../assets/fonts/IRONMAN.TTF") format("truetype"); font-display:swap; }
@font-face { font-family:"BatmanFont"; src:url("../assets/fonts/BatmanRiddler-Regular.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"WonderWomanFont"; src:url("../assets/fonts/Wonder-Woman.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"SuperComic3"; src:url("../assets/fonts/Super-Comic.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Chopper"; src:url("../assets/fonts/CHOPPERRR.otf") format("opentype"); font-display:swap; }
@font-face { font-family:"Bazinga"; src:url("../assets/fonts/Bazinga-Regular.otf") format("opentype"); font-display:swap; }
@font-face { font-family:"KaBlam"; src:url("../assets/fonts/Ka-Blam.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"DirtyBrush"; src:url("../assets/fonts/DirtyBrush.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Avengeance"; src:url("../assets/fonts/AVENGEANCE-MIGHTIEST-AVENGER.ttf") format("truetype"); font-display:swap; }

:root{--bg:#050505;--yellow:#ffd400;--red:#e21b23;--blue:#19e6ff;--comic:"Bangers",Impact,"Arial Black",sans-serif;--body:"Neucha","Trebuchet MS",Arial,sans-serif;--nav:74px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#050505;color:#fff;font-family:var(--body);overflow-x:hidden}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}.skip-link{position:absolute;left:-999px}.skip-link:focus{left:8px;top:8px;z-index:99999;background:#fff;color:#000;padding:8px}
.site-loader{position:fixed;inset:0;background:#000;z-index:9999;display:grid;place-items:center;transition:.25s}.site-loader.hide{opacity:0;visibility:hidden}.loader-stage{position:relative;width:min(900px,94vw);height:420px;display:grid;place-items:center}.loader-word{position:absolute;font:900 clamp(60px,12vw,150px) var(--comic);color:var(--yellow);-webkit-text-stroke:4px #000;text-shadow:10px 10px 0 var(--red);opacity:0}.loader-logo{position:absolute;bottom:0;width:260px;opacity:0}
.topbar{position:fixed;top:0;left:0;right:0;height:var(--nav);z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,4vw,54px);background:rgba(0,0,0,.82);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.15)}
.brand-placeholder{display:flex;align-items:center;gap:10px;min-width:0}.brand-logo-placeholder{width:42px;height:42px;display:grid;place-items:center;background:#111;color:var(--yellow);border:2px solid #fff;box-shadow:3px 3px 0 var(--red);font:900 10px var(--comic);line-height:1}.brand-name-placeholder{color:#fff;font:900 18px var(--comic);letter-spacing:.04em;line-height:1;text-shadow:2px 2px 0 #000;white-space:nowrap}
.navlinks{display:flex;align-items:center;gap:22px;font:900 15px var(--comic);letter-spacing:.05em}.navlinks a,.cart-open{background:transparent;color:#fff;border:0;font:900 15px var(--comic);cursor:pointer;text-shadow:2px 2px 0 #000}.cart-count{display:inline-grid;place-items:center;min-width:24px;height:24px;margin-left:6px;background:var(--yellow);color:#000;border:2px solid #000;box-shadow:2px 2px 0 var(--red)}.menu-btn{display:none;background:#111;color:#fff;border:2px solid #fff;padding:10px 14px;font:900 14px var(--comic)}
h1,h2,h3,.kicker,.btn,.mini-btn,.price{font-family:var(--comic);line-height:.92;margin:0;letter-spacing:.02em}h1{font-size:clamp(64px,11vw,160px);-webkit-text-stroke:2px #050505;text-shadow:3px 3px 0 #000,6px 6px 0 var(--red),9px 9px 0 var(--yellow);text-transform:uppercase}h2{font-size:clamp(46px,7vw,100px);-webkit-text-stroke:1.5px #050505;text-shadow:2px 2px 0 #000,5px 5px 0 var(--red),7px 7px 0 var(--yellow);text-transform:uppercase}h3{font-size:42px;-webkit-text-stroke:1px #050505;text-shadow:2px 2px 0 #000,4px 4px 0 var(--red)}.kicker{display:inline-block;color:var(--yellow);font-size:clamp(18px,2.2vw,30px);-webkit-text-stroke:1px #050505;text-shadow:2px 2px 0 #000,4px 4px 0 var(--red);transform:skew(-4deg);margin-bottom:14px}p{line-height:1.55;color:#eee}.btn,.mini-btn{border:3px solid #000;background:var(--yellow);color:#000;box-shadow:7px 7px 0 var(--red);padding:14px 20px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.18s}.btn:hover,.mini-btn:hover{transform:scale(1.08) rotate(-1deg)}.btn.dark{background:#111;color:#fff;border-color:#fff;box-shadow:7px 7px 0 var(--blue)}

/* =========================================================
   TITLE LINE SPACING - ONE CLEAN SOURCE OF TRUTH
   Desktop/base titles use this. Mobile spacing is handled once
   inside the clean max-width:760px section below.
========================================================= */
.big-title .title-line,
.hero-title .title-line,
.hero h1 .title-line,
#characters h2 .title-line,
#gallery h2 .title-line,
.cta h2 .title-line,
.page-hero h1 .title-line{
  display:block;
  line-height:1.18;
  margin:0 0 .72em 0;
  padding:0;
  white-space:normal;
  overflow:visible;
  transform:none;
}

.big-title .title-line:last-child,
.hero-title .title-line:last-child,
.hero h1 .title-line:last-child,
#characters h2 .title-line:last-child,
#gallery h2 .title-line:last-child,
.cta h2 .title-line:last-child,
.page-hero h1 .title-line:last-child{
  margin-bottom:0;
}

.hero{min-height:100vh;position:relative;display:grid;place-items:center;padding-top:var(--nav);overflow:hidden;background:radial-gradient(circle at 75% 25%,rgba(255,42,42,.18),transparent 30%),radial-gradient(circle at 20% 80%,rgba(25,230,255,.16),transparent 30%),#050505}.hero:before{content:"";position:absolute;inset:-80px;background:radial-gradient(circle,rgba(255,212,0,.16) 1.5px,transparent 2px);background-size:24px 24px;animation:drift 18s linear infinite}.hero-video-placeholder{position:absolute;inset:9%;border:2px solid rgba(255,255,255,.12);background:linear-gradient(135deg,rgba(255,212,0,.12),rgba(255,42,42,.06),rgba(25,230,255,.12));clip-path:polygon(4% 10%,96% 0,90% 91%,0 100%)}.hero-inner{position:relative;z-index:2;width:min(1180px,94vw)}.hero-actions{margin-top:34px}.floating-word{position:absolute;font:900 clamp(46px,7vw,115px) var(--comic);color:rgba(255,212,0,.12);-webkit-text-stroke:2px rgba(255,255,255,.14);pointer-events:none}.fw1{top:18%;right:8%;transform:rotate(11deg)}.fw2{bottom:12%;left:7%;transform:rotate(-16deg)}.fw3{bottom:28%;right:18%;transform:rotate(-5deg)}
.section{padding:96px clamp(18px,4vw,58px)}.wrap{max-width:1220px;margin:0 auto}.character-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:42px;perspective:1200px}.character-card{position:relative;min-height:470px;background:#111;border:5px solid var(--c2);overflow:hidden;cursor:pointer;box-shadow:12px 12px 0 rgba(255,212,0,.75),0 22px 55px rgba(0,0,0,.7);transition:.22s;isolation:isolate}.character-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 25%,var(--c2),transparent 36%),linear-gradient(145deg,var(--c1),#040404 60%);z-index:-3}.theme-overlay{position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.28),transparent 24%),radial-gradient(circle at 78% 68%,var(--c2),transparent 30%),repeating-linear-gradient(135deg,rgba(255,255,255,.16) 0 2px,transparent 2px 14px);background-size:cover;opacity:.48;mix-blend-mode:screen;z-index:-2;transition:.28s}.character-card:hover{transform:scale(1.36) rotate(var(--rot,-1deg));z-index:50;box-shadow:0 30px 90px rgba(0,0,0,.9),0 0 70px var(--c2)}.character-card:hover .theme-overlay{opacity:1;transform:scale(1.2)}.character-card img.main-art{height:100%;width:100%;object-fit:cover;opacity:.94}.wordmark{position:absolute;top:12px;left:12px;right:12px;z-index:5;background:rgba(0,0,0,.78);border:2px solid rgba(255,255,255,.5);padding:6px}.wordmark img{height:52px;width:100%;object-fit:contain}.product-price{position:absolute;top:82px;right:14px;z-index:7;background:var(--yellow);color:#000;border:3px solid #000;box-shadow:5px 5px 0 var(--red);font:900 22px var(--comic);padding:9px 12px}.card-info{position:absolute;left:0;right:0;bottom:88px;padding:20px;background:linear-gradient(transparent,rgba(0,0,0,.96) 35%,#000)}.card-info span{display:inline-block;background:var(--yellow);color:#000;font-weight:900;padding:4px 8px;margin-bottom:8px}.card-info h3{font-size:clamp(34px,3vw,50px)}.product-actions{position:absolute;left:18px;right:18px;bottom:18px;z-index:6;display:flex;gap:10px}.product-actions button{flex:1;min-width:0;padding:12px 10px}.gallery-wall{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:42px}.gallery-item{min-height:280px;background:#222;border:3px solid #fff;overflow:hidden;cursor:pointer;transition:.22s;box-shadow:8px 8px 0 rgba(255,212,0,.5)}.gallery-item:hover{transform:scale(1.12) rotate(var(--grot,2deg));z-index:20;box-shadow:14px 14px 0 var(--red)}.gallery-item img{width:100%;height:100%;object-fit:cover}.cta{min-height:62vh;display:grid;place-items:center;text-align:center;background:radial-gradient(circle at 50% 50%,rgba(255,212,0,.18),transparent 35%),#090909;padding:96px 18px}
.modal{position:fixed;inset:0;z-index:9996;background:rgba(0,0,0,.88);display:none;align-items:start;justify-content:center;overflow-y:auto;padding:20px}.modal.open{display:flex}.modal-content{width:min(1120px,96vw);max-height:calc(100vh - 40px);overflow-y:auto;margin:20px auto;background:#070707;border:5px solid #fff;box-shadow:14px 14px 0 var(--red);padding:22px}.close-modal{float:right;background:var(--yellow);color:#000;border:0;padding:10px 14px;font-weight:900;cursor:pointer}.modal-product{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:28px;align-items:start}.modal-product .logo-img{margin-bottom:12px}.modal-product .product-art{width:100%;max-height:58vh;object-fit:contain;border:4px solid #fff;box-shadow:8px 8px 0 var(--yellow);background:#111}.modal-info h3{font-size:clamp(44px,5vw,82px);margin:0 0 8px}.bio-title{font:900 clamp(28px,3vw,44px) var(--comic);color:var(--yellow);text-shadow:2px 2px 0 #000,4px 4px 0 var(--red);margin-bottom:14px}.modal-info p{font-size:18px;color:#f2f2f2}.product-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}.product-fact{background:#111;border:3px solid #fff;padding:12px;box-shadow:5px 5px 0 var(--yellow)}.product-fact strong{display:block;color:var(--yellow);font:900 20px var(--comic)}.modal-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}.effect-pop{position:fixed;z-index:9997;left:50%;top:50%;pointer-events:none;opacity:0;width:min(700px,88vw);filter:drop-shadow(14px 14px 0 #000)}.effect-pop.show{animation:pop .72s cubic-bezier(.18,1.45,.25,1) forwards}.cart-drawer{position:fixed;top:0;right:0;width:min(420px,92vw);height:100vh;background:#090909;border-left:4px solid #fff;z-index:9999;transform:translateX(110%);transition:.28s;box-shadow:-24px 0 70px rgba(0,0,0,.6);padding:24px;display:flex;flex-direction:column;gap:18px}.cart-drawer.open{transform:translateX(0)}.cart-head{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #333;padding-bottom:12px}.cart-close,.cart-clear{background:var(--yellow);color:#000;border:0;padding:10px 12px;font-weight:900;cursor:pointer}.cart-items{display:grid;gap:12px;overflow:auto}.cart-item{display:grid;grid-template-columns:72px 1fr;gap:12px;border:2px solid #333;background:#111;padding:10px}.cart-item img{width:72px;height:92px;object-fit:cover}.sound-toggle{position:fixed;right:18px;bottom:18px;z-index:1001;background:#111;color:#fff;border:3px solid #fff;padding:12px;font-weight:900}.page-hero{min-height:45vh;padding-top:calc(var(--nav) + 80px);display:grid;place-items:center;text-align:center;background:#111}.form{display:grid;gap:16px;max-width:720px;margin:auto}.form input,.form textarea,.form select{width:100%;padding:16px;background:#111;border:2px solid #555;color:#fff}.form textarea{min-height:160px}.site-mini-footer{text-align:center;padding:22px;background:#020202;border-top:1px solid #222}.site-mini-footer p{font-size:12px;color:#777}
@keyframes pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.1) rotate(-18deg)}25%,70%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.5) rotate(8deg)}}@keyframes drift{to{transform:translate(-60px,30px)}}@media(max-width:1000px){.character-grid{grid-template-columns:repeat(2,1fr)}.gallery-wall{grid-template-columns:repeat(2,1fr)}.character-card:hover{transform:scale(1.05)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.character-card:hover,.gallery-item:hover{transform:none!important}}


/* === DESKTOP COMIC WORD VARIETY === */
.effect-pop.variant-1.show{animation:pop 1.05s cubic-bezier(.18,1.45,.25,1) forwards}
.effect-pop.variant-2.show{animation:popSpin 1.1s cubic-bezier(.18,1.45,.25,1) forwards}
.effect-pop.variant-3.show{animation:popSlam 1.05s cubic-bezier(.18,1.65,.25,1) forwards}
.effect-pop.variant-4.show{animation:popSlide 1.1s cubic-bezier(.18,1.45,.25,1) forwards}

@keyframes popSpin{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.08) rotate(-45deg)}
  25%,70%{opacity:1}
  75%{transform:translate(-50%,-50%) scale(1.08) rotate(8deg)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.6) rotate(28deg)}
}
@keyframes popSlam{
  0%{opacity:0;transform:translate(-50%,-80%) scale(1.9) rotate(-4deg)}
  28%,72%{opacity:1}
  38%{transform:translate(-50%,-50%) scale(.96) rotate(2deg)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.38) rotate(-7deg)}
}
@keyframes popSlide{
  0%{opacity:0;transform:translate(-115%,-50%) scale(.45) rotate(-12deg)}
  24%,72%{opacity:1}
  65%{transform:translate(-50%,-50%) scale(1.06) rotate(4deg)}
  100%{opacity:0;transform:translate(10%,-50%) scale(1.42) rotate(9deg)}
}

@media (min-width:761px){
  .effect-pop.variant-2{width:min(620px,76vw)}
  .effect-pop.variant-3{width:min(760px,84vw)}
  .effect-pop.variant-4{width:min(680px,80vw)}
}

.sound-toggle{
  display:none !important;
}

.cart-count{
  font-family:Arial, Helvetica, sans-serif;
  font-size:13px;
  font-weight:900;
  line-height:1;
  text-shadow:none;
  -webkit-text-stroke:0;
  filter:none;
  letter-spacing:0;
  transform:none;
}





/* === EFFECT SYSTEM TYPOGRAPHY LOCK === */
p,
.bio-copy,
.modal-info p,
.product-fact,
.cart-item,
.cart-note,
.form input,
.form textarea,
.form select,
.site-mini-footer,
small{
  font-family:var(--body, "Neucha", "Trebuchet MS", Arial, sans-serif);
}

h1,h2,h3,
.kicker,
.btn,
.mini-btn,
.price,
.card-info h3,
.navlinks a,
.cart-open,
.menu-btn,
.product-price,
.bio-title,
.product-fact strong{
  font-family:var(--comic, "Bangers", Impact, "Arial Black", sans-serif);
}

.effect-pop svg text,
.effect-pop-text{
  font-family:var(--effect-font, "Bangers", Impact, "Arial Black", sans-serif);
}

/* === ONOMATOPOEIA / FONT SYSTEM PASS === */
:root {
  --title-font:"ActionTitle","Bangers",Impact,"Arial Black",sans-serif;
  --comic-font-main:"Bangers",Impact,"Arial Black",sans-serif;
  --body-font-main:"Neucha","Trebuchet MS",Arial,sans-serif;
}



h3,
.kicker,
.btn,
.mini-btn,
.price,
.card-info h3,
.navlinks a,
.cart-open,
.menu-btn,
.product-price,
.bio-title,
.product-fact strong {
  font-family:var(--comic-font-main) !important;
}

p,
.bio-copy,
.modal-info p,
.product-fact,
.cart-item,
.cart-note,
.form input,
.form textarea,
.form select,
.site-mini-footer,
small {
  font-family:var(--body-font-main) !important;
}

.character-card[data-id="spiderman"] .card-info h3,
.character-card[data-id="spiderman"] .wordmark,
body.character-spiderman h1 {
  font-family:"SpiderFont", var(--comic-font-main) !important;
}

.character-card[data-id="venom"] .card-info h3,
.character-card[data-id="venom"] .wordmark,
body.character-venom h1 {
  font-family:"VenomFont", var(--comic-font-main) !important;
}

.character-card[data-id="hulk"] .card-info h3,
.character-card[data-id="hulk"] .wordmark,
body.character-hulk h1 {
  font-family:"HulkFont", var(--comic-font-main) !important;
}

.character-card[data-id="ironman"] .card-info h3,
.character-card[data-id="ironman"] .wordmark,
body.character-ironman h1 {
  font-family:"IronManFont", var(--comic-font-main) !important;
}

.character-card[data-id="batman"] .card-info h3,
.character-card[data-id="batman"] .wordmark,
body.character-batman h1 {
  font-family:"BatmanFont", var(--comic-font-main) !important;
}

.character-card[data-id="wonderwoman"] .card-info h3,
.character-card[data-id="wonderwoman"] .wordmark,
body.character-wonderwoman h1 {
  font-family:"WonderWomanFont", var(--comic-font-main) !important;
}

.character-card[data-id="superman"] .card-info h3,
.character-card[data-id="superman"] .wordmark,
body.character-superman h1 {
  font-family:"SuperComic3", var(--comic-font-main) !important;
}

.character-card[data-id="flash"] .card-info h3,
.character-card[data-id="flash"] .wordmark,
body.character-flash h1 {
  font-family:"Chopper", var(--comic-font-main) !important;
}

.character-card[data-id="wolverine"] .card-info h3,
.character-card[data-id="wolverine"] .wordmark,
body.character-wolverine h1 {
  font-family:"ActionTitle", var(--comic-font-main) !important;
}

.character-card[data-id="deadpool"] .card-info h3,
.character-card[data-id="deadpool"] .wordmark,
body.character-deadpool h1 {
  font-family:"Bazinga", var(--comic-font-main) !important;
}




/* === CHARACTER IMAGE PLACEHOLDER PASS === */
.character-card img.main-art{
  object-fit:contain;
  object-position:center center;
  padding:64px 8px 78px;
  transform:scale(1.18);
  filter:drop-shadow(0 18px 20px rgba(0,0,0,.75));
}

.character-card:hover img.main-art{
  transform:scale(1.3);
}

.modal-product .product-art,
.detail-visual img,
.product-art{
  object-fit:contain;
  background:transparent;
  filter:drop-shadow(0 22px 24px rgba(0,0,0,.75));
}

.cart-item img{
  object-fit:contain;
  background:#111;
}




/* === CONTACT FORM CLOSE BUTTON === */
.contact-actions{
  max-width:720px;
  margin:0 auto 18px;
  display:flex;
  justify-content:flex-end;
}

.contact-close-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--yellow);
  color:#000;
  border:3px solid #000;
  box-shadow:6px 6px 0 var(--red);
  padding:12px 18px;
  font-family:var(--comic, "Bangers", Impact, "Arial Black", sans-serif);
  font-weight:900;
  text-decoration:none;
  letter-spacing:.04em;
}

.contact-close-btn:hover,
.contact-close-btn:focus{
  transform:scale(1.05) rotate(-1deg);
}




/* === DESKTOP CARD + TITLE POLISH PASS === */

/* Main title spacing: prevents stacked letters from crashing together */
.hero h1,
.page-hero h1,
.cta h2{
  line-height:1.04;
  letter-spacing:.018em;
}

/* Desktop card art normalized */
@media (min-width:761px){
  .character-card{
    min-height:510px;
  }

  .character-card img.main-art{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center 44%;
    padding:86px 18px 122px;
    transform:scale(1.06);
    filter:drop-shadow(0 18px 22px rgba(0,0,0,.78));
  }

  .character-card:hover img.main-art{
    transform:scale(1.16);
  }

  .card-info{
    bottom:74px;
    padding:16px 12px 14px;
  }

  .card-info h3{
    font-size:clamp(30px, 2.35vw, 43px);
    line-height:.92;
    letter-spacing:.012em;
    max-width:100%;
    overflow-wrap:normal;
    white-space:normal;
    text-align:left;
  }

  .character-card[data-id="venom"] .card-info h3{
    font-size:clamp(32px, 2.65vw, 46px);
    letter-spacing:.018em;
  }

  .character-card[data-id="wolverine"] .card-info h3{
    font-size:clamp(28px, 2.05vw, 38px);
    letter-spacing:0;
  }

  .character-card[data-id="deadpool"] .card-info h3{
    font-size:clamp(29px, 2.15vw, 40px);
    letter-spacing:.006em;
  }

  .character-card[data-id="wonderwoman"] .card-info h3{
    font-size:clamp(25px, 1.75vw, 34px);
    line-height:.88;
    letter-spacing:0;
  }


  .wordmark{
    overflow:hidden;
  }

  .wordmark img{
    max-width:100%;
    object-fit:contain;
  }
}


/* === RESTORE CHARACTER CARD TITLE FONTS === */
/* Font families only. Sizing/spacing fixes stay separate. */
@media (min-width:761px){
  .character-card[data-id="spiderman"] .card-info h3{
    font-family:"SpiderFont", var(--comic-font-main, var(--comic, "Bangers", Impact, "Arial Black", sans-serif)) !important;
  }

  .character-card[data-id="venom"] .card-info h3{
    font-family:"VenomFont", var(--comic-font-main, var(--comic, "Bangers", Impact, "Arial Black", sans-serif)) !important;
  }

  .character-card[data-id="hulk"] .card-info h3{
    font-family:"HulkFont", var(--comic-font-main, var(--comic, "Bangers", Impact, "Arial Black", sans-serif)) !important;
  }

  .character-card[data-id="ironman"] .card-info h3{
    font-family:"IronManFont", var(--comic-font-main, var(--comic, "Bangers", Impact, "Arial Black", sans-serif)) !important;
  }

  .character-card[data-id="batman"] .card-info h3{
    font-family:"BatmanFont", var(--comic-font-main, var(--comic, "Bangers", Impact, "Arial Black", sans-serif)) !important;
  }

  .character-card[data-id="wonderwoman"] .card-info h3{
    font-family:"WonderWomanFont", var(--comic-font-main, var(--comic, "Bangers", Impact, "Arial Black", sans-serif)) !important;
  }

  .character-card[data-id="superman"] .card-info h3{
    font-family:"SuperComic3", var(--comic-font-main, var(--comic, "Bangers", Impact, "Arial Black", sans-serif)) !important;
  }

  .character-card[data-id="flash"] .card-info h3{
    font-family:"Chopper", var(--comic-font-main, var(--comic, "Bangers", Impact, "Arial Black", sans-serif)) !important;
  }

  .character-card[data-id="wolverine"] .card-info h3{
    font-family:"ActionTitle", var(--comic-font-main, var(--comic, "Bangers", Impact, "Arial Black", sans-serif)) !important;
  }

  .character-card[data-id="deadpool"] .card-info h3{
    font-family:"Bazinga", var(--comic-font-main, var(--comic, "Bangers", Impact, "Arial Black", sans-serif)) !important;
  }
}


/* === CLEAN CHARACTER EFFECT ENGINE === */
.clean-effect{
  position:fixed;
  left:50%;
  top:50%;
  width:min(50vw,640px);
  aspect-ratio:var(--effect-aspect, 1.62 / 1);
  transform:translate(-50%, -50%) scale(.66) rotate(-3deg);
  z-index:10060;
  pointer-events:none;
  opacity:0;
  animation:cleanEffectPop 1.7s cubic-bezier(.16,1,.3,1) forwards;
  filter:drop-shadow(14px 14px 0 rgba(0,0,0,.92));
}

.clean-effect-frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
}

.clean-effect-word{
  position:absolute;
  left:var(--word-left, 50%);
  top:var(--word-top, 50%);
  transform:translate(-50%, -50%) rotate(-2deg);
  width:70%;
  max-width:70%;
  text-align:center;
  font-family:var(--effect-font, "Bangers", Impact, "Arial Black", sans-serif);
  font-size:clamp(42px, 5.8vw, 92px);
  line-height:.82;
  letter-spacing:.01em;
  color:#fff;
  -webkit-text-stroke:6px #000;
  text-shadow:7px 7px 0 #000, -2px -2px 0 rgba(255,255,255,.22);
  paint-order:stroke fill;
  text-transform:uppercase;
  overflow-wrap:normal;
  word-break:normal;
}

.clean-effect.effect-word-lg .clean-effect-word{
  font-size:clamp(50px, 6.2vw, 104px);
  width:66%;
  max-width:66%;
}

.clean-effect.effect-word-md .clean-effect-word{
  font-size:clamp(42px, 5.3vw, 88px);
  width:72%;
  max-width:72%;
}

.clean-effect.effect-word-sm .clean-effect-word{
  font-size:clamp(34px, 4.5vw, 72px);
  width:76%;
  max-width:76%;
  line-height:.88;
}

.clean-effect.effect-word-xs .clean-effect-word{
  font-size:clamp(28px, 3.6vw, 58px);
  width:78%;
  max-width:78%;
  line-height:.92;
  letter-spacing:0;
}

.clean-effect.rare-effect{
  width:min(56vw,760px);
  animation-duration:3.4s;
}

.clean-effect.rare-effect .clean-effect-word{
  width:78%;
  max-width:78%;
}

.clean-effect[data-custom-frame="true"] .clean-effect-word{
  width:var(--word-width, 58%);
  max-width:var(--word-width, 58%);
}

@keyframes cleanEffectPop{
  0%{
    opacity:0;
    transform:translate(-50%, -50%) scale(.42) rotate(-9deg);
  }
  12%{
    opacity:1;
    transform:translate(-50%, -50%) scale(1.02) rotate(3deg);
  }
  72%{
    opacity:1;
    transform:translate(-50%, -50%) scale(.98) rotate(-2deg);
  }
  100%{
    opacity:0;
    transform:translate(-50%, -50%) scale(.86) rotate(6deg);
  }
}








/* === FINAL NEW CHARACTER IMAGE SCALE TUNING === */
/* Uses the final 10 uploaded character images. Layout is unchanged. */
@media (min-width:761px){
  .character-card{
    --card-art-scale:1.52;
    --card-art-y:48%;
  }

  .character-card img.main-art{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center var(--card-art-y) !important;
    padding:40px 0 82px !important;
    transform:scale(var(--card-art-scale)) !important;
    transform-origin:center center !important;
  }

  .character-card:hover img.main-art{
    transform:scale(calc(var(--card-art-scale) + .08)) !important;
  }

  .character-card[data-id="spiderman"]{ --card-art-scale:1.85; --card-art-y:48%; }
  .character-card[data-id="venom"]{ --card-art-scale:1.56; --card-art-y:48%; }
  .character-card[data-id="ironman"]{ --card-art-scale:1.48; --card-art-y:48%; }
  .character-card[data-id="hulk"]{ --card-art-scale:1.58; --card-art-y:48%; }
  .character-card[data-id="deadpool"]{ --card-art-scale:1.42; --card-art-y:48%; }
  .character-card[data-id="wolverine"]{ --card-art-scale:1.58; --card-art-y:48%; }
  .character-card[data-id="batman"]{ --card-art-scale:1.48; --card-art-y:48%; }
  .character-card[data-id="superman"]{ --card-art-scale:1.70; --card-art-y:48%; }
  .character-card[data-id="flash"]{ --card-art-scale:1.54; --card-art-y:48%; }
  .character-card[data-id="wonderwoman"]{ --card-art-scale:1.35; --card-art-y:48%; }

  .modal-product .product-art,
  .detail-visual,
  .product-art{
    --preview-art-scale:2.7;
    min-height:600px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
  }

  .modal-product .product-art img,
  .detail-visual img,
  .product-art img{
    width:100% !important;
    height:100% !important;
    max-height:none !important;
    object-fit:contain !important;
    transform:scale(var(--preview-art-scale)) !important;
    transform-origin:center center !important;
  }

  body.character-spiderman .detail-visual,
  .modal-product[data-character="spiderman"] .product-art{ --preview-art-scale:3.25; }

  body.character-venom .detail-visual,
  .modal-product[data-character="venom"] .product-art{ --preview-art-scale:2.7; }

  body.character-ironman .detail-visual,
  .modal-product[data-character="ironman"] .product-art{ --preview-art-scale:2.6; }

  body.character-hulk .detail-visual,
  .modal-product[data-character="hulk"] .product-art{ --preview-art-scale:2.85; }

  body.character-deadpool .detail-visual,
  .modal-product[data-character="deadpool"] .product-art{ --preview-art-scale:2.55; }

  body.character-wolverine .detail-visual,
  .modal-product[data-character="wolverine"] .product-art{ --preview-art-scale:2.85; }

  body.character-batman .detail-visual,
  .modal-product[data-character="batman"] .product-art{ --preview-art-scale:2.6; }

  body.character-superman .detail-visual,
  .modal-product[data-character="superman"] .product-art{ --preview-art-scale:3.0; }

  body.character-flash .detail-visual,
  .modal-product[data-character="flash"] .product-art{ --preview-art-scale:2.7; }

  body.character-wonderwoman .detail-visual,
  .modal-product[data-character="wonderwoman"] .product-art{ --preview-art-scale:2.35; }
}




/* === FINAL IMAGE / LABEL GUARDRAILS === */
.character-card img.main-art{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
}

@media (min-width:761px){
  .character-card{
    --card-art-scale:1.55;
    --card-art-y:48%;
  }

  .character-card img.main-art{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center var(--card-art-y) !important;
    padding:38px 0 78px !important;
    transform:scale(var(--card-art-scale)) !important;
    transform-origin:center center !important;
  }

  .character-card[data-id="spiderman"]{ --card-art-scale:1.88; }
  .character-card[data-id="venom"]{ --card-art-scale:1.58; }
  .character-card[data-id="ironman"]{ --card-art-scale:1.48; }
  .character-card[data-id="hulk"]{ --card-art-scale:1.60; }
  .character-card[data-id="deadpool"]{ --card-art-scale:1.42; }
  .character-card[data-id="wolverine"]{ --card-art-scale:1.60; }
  .character-card[data-id="batman"]{ --card-art-scale:1.50; }
  .character-card[data-id="superman"]{ --card-art-scale:1.72; }
  .character-card[data-id="flash"]{ --card-art-scale:1.56; }
  .character-card[data-id="wonderwoman"]{ --card-art-scale:1.36; }
}




/* === FINAL ACTION COMICS TITLE SYSTEM === */
:root{
  --big-title-font:"ActionTitle", "Action Comics Black", "Bangers", Impact, "Arial Black", sans-serif;
}

.hero h1,
.hero h1.big-title,
#characters h2,
#characters h2.big-title,
#gallery h2,
#gallery h2.big-title,
.page-hero h1,
.page-hero h1.big-title{
  font-family:var(--big-title-font) !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  line-height:1 !important;
  letter-spacing:.012em !important;
  word-spacing:.06em !important;
  white-space:normal !important;
  overflow:visible !important;
  word-break:normal !important;
  transform:none !important;
  font-stretch:normal !important;
}

.kicker,
.navlinks a,
.cart-open,
.menu-btn,
.btn,
.mini-btn,
.price,
.product-price,
.logo-text,
.brand,
.badge,
.tag{
  font-family:"Bangers", Impact, "Arial Black", sans-serif !important;
}

@media (min-width:761px){
  .hero .wrap,
  .hero .hero-inner,
  #characters .wrap,
  #gallery .wrap,
  .page-hero .wrap{
    max-width:1500px !important;
    width:min(1500px, 94vw) !important;
  }

  .hero h1,
  .hero h1.big-title{
    font-size:clamp(74px, 6.8vw, 128px) !important;
    max-width:1500px !important;
  }

  #characters h2,
  #characters h2.big-title,
  #gallery h2,
  #gallery h2.big-title,
  .page-hero h1,
  .page-hero h1.big-title{
    font-size:clamp(60px, 5.7vw, 112px) !important;
    max-width:1400px !important;
  }
}



#collection h2,
#cart h2,
.build-collection h2,
.cta h2{
  font-family:inherit;
}

/* === FINAL REQUESTED TITLE FONT + SPACING GUARDRAIL === */
/* Scope: major large site titles only. Keeps approved layout intact. */
.hero h1,
.hero h1.big-title,
#characters h2,
#characters h2.big-title,
#gallery h2,
#gallery h2.big-title,
.cta h2,
.page-hero h1,
.page-hero h1.big-title{
  font-family:var(--big-title-font) !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  line-height:1 !important;
  letter-spacing:.012em !important;
  word-spacing:.06em !important;
  white-space:normal !important;
  overflow:visible !important;
  transform:none !important;
}

/* === DESKTOP SCALE CORRECTION PASS === */
/* Scope: desktop/tablet only. Fixes oversized 100% desktop view without touching mobile layout. */
@media (min-width:761px){
  .hero{
    min-height:760px !important;
  }

  .hero-inner,
  .hero .wrap,
  #characters .wrap,
  #gallery .wrap,
  .page-hero .wrap,
  .cta .wrap{
    max-width:1180px !important;
    width:min(1180px, 92vw) !important;
  }

  .section{
    padding:72px clamp(18px, 3vw, 46px) !important;
  }

  .hero h1,
  .hero h1.big-title{
    font-size:clamp(58px, 5.2vw, 96px) !important;
    max-width:1120px !important;
  }

  #characters h2,
  #characters h2.big-title,
  #gallery h2,
  #gallery h2.big-title,
  .page-hero h1,
  .page-hero h1.big-title,
  .cta h2{
    font-size:clamp(46px, 4.2vw, 78px) !important;
    max-width:1120px !important;
  }
.kicker{
    font-size:clamp(17px, 1.55vw, 24px) !important;
    margin-bottom:10px !important;
  }


  .hero-actions{
    margin-top:26px !important;
  }

  .character-grid{
    grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
    gap:16px !important;
    margin-top:30px !important;
  }

  .character-card{
    min-height:345px !important;
    box-shadow:8px 8px 0 rgba(255,212,0,.72), 0 16px 38px rgba(0,0,0,.68) !important;
    --card-art-scale:1.16 !important;
    --card-art-y:50% !important;
  }

  .character-card:hover{
    transform:scale(1.10) rotate(var(--rot,-1deg)) !important;
  }

  .character-card img.main-art{
    object-fit:contain !important;
    object-position:center var(--card-art-y) !important;
    padding:44px 0 78px !important;
    transform:scale(var(--card-art-scale)) !important;
  }

  .character-card:hover img.main-art{
    transform:scale(calc(var(--card-art-scale) + .05)) !important;
  }

  .character-card[data-id="spiderman"]{ --card-art-scale:1.36 !important; }
  .character-card[data-id="venom"]{ --card-art-scale:1.24 !important; }
  .character-card[data-id="ironman"]{ --card-art-scale:1.18 !important; }
  .character-card[data-id="hulk"]{ --card-art-scale:1.24 !important; }
  .character-card[data-id="deadpool"]{ --card-art-scale:1.16 !important; }
  .character-card[data-id="wolverine"]{ --card-art-scale:1.24 !important; }
  .character-card[data-id="batman"]{ --card-art-scale:1.18 !important; }
  .character-card[data-id="superman"]{ --card-art-scale:1.30 !important; }
  .character-card[data-id="flash"]{ --card-art-scale:1.22 !important; }
  .character-card[data-id="wonderwoman"]{ --card-art-scale:1.12 !important; }

  .wordmark{
    top:10px !important;
    left:10px !important;
    right:10px !important;
    padding:5px !important;
  }

  .wordmark img{
    height:38px !important;
  }

  .product-price{
    top:64px !important;
    right:12px !important;
    font-size:18px !important;
    padding:7px 10px !important;
  }

  .card-info{
    bottom:70px !important;
    padding:14px !important;
  }

  .card-info h3{
    font-size:clamp(24px, 2.2vw, 36px) !important;
  }

  .product-actions{
    left:12px !important;
    right:12px !important;
    bottom:12px !important;
  }

  .product-actions button,
  .btn,
  .mini-btn{
    padding:11px 16px !important;
  }

  .gallery-wall{
    gap:16px !important;
    margin-top:30px !important;
  }

  .gallery-item{
    min-height:220px !important;
  }

  .cta{
    min-height:430px !important;
    padding:72px 18px !important;
  }

  .modal-content{
    width:min(980px, 94vw) !important;
    max-height:calc(100vh - 34px) !important;
    padding:18px !important;
  }

  .modal-product{
    grid-template-columns:minmax(240px, 340px) 1fr !important;
    gap:24px !important;
  }

  .modal-product .product-art,
  .detail-visual,
  .product-art{
    min-height:0 !important;
    max-height:48vh !important;
    width:100% !important;
    object-fit:contain !important;
    transform:none !important;
  }

  .modal-info h3{
    font-size:clamp(34px, 3.6vw, 58px) !important;
  }

  .bio-title{
    font-size:clamp(22px, 2.2vw, 32px) !important;
  }

  .modal-info p{
    font-size:16px !important;
  }

  .product-facts{
    gap:10px !important;
    margin:14px 0 !important;
  }

  .product-fact{
    padding:10px !important;
  }
}

/* === TARGETED DESKTOP SCALE + TITLE FONT CORRECTION ===
   Scope only: desktop scale, major title font consistency, mobile title/font overlap cleanup. */

/* Keep Build Your Collection on the exact same approved large-title font as the other major section titles. */
.cta h2,
#contact.cta h2,
section.cta h2,
.hero h1,
.hero h1.big-title,
#characters h2,
#characters h2.big-title,
#gallery h2,
#gallery h2.big-title,
.page-hero h1,
.page-hero h1.big-title{
  font-family:var(--big-title-font, "ActionTitle", "Action Comics Black", Impact, "Arial Black", sans-serif) !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  line-height:1.03 !important;
  letter-spacing:.01em !important;
  word-spacing:.045em !important;
  white-space:normal !important;
  overflow:visible !important;
}

/* Desktop: reduce the accidental oversized presentation so 100% browser zoom reads like 100%, not 200%. */
@media (min-width:761px){
  .hero{
    min-height:680px !important;
    padding-top:var(--nav) !important;
  }

  .section{
    padding-top:58px !important;
    padding-bottom:58px !important;
  }

  .hero-inner,
  .hero .wrap,
  #characters .wrap,
  #gallery .wrap,
  .page-hero .wrap,
  .cta .wrap{
    max-width:1100px !important;
    width:min(1100px, 90vw) !important;
  }

  .hero h1,
  .hero h1.big-title{
    font-size:clamp(50px, 4.7vw, 82px) !important;
    max-width:1050px !important;
  }

  #characters h2,
  #characters h2.big-title,
  #gallery h2,
  #gallery h2.big-title,
  .page-hero h1,
  .page-hero h1.big-title,
  .cta h2{
    font-size:clamp(40px, 3.55vw, 66px) !important;
    max-width:1050px !important;
  }
.kicker{
    font-size:clamp(15px, 1.35vw, 21px) !important;
    margin-bottom:8px !important;
  }

  .hero-actions{
    margin-top:22px !important;
  }

  .character-grid{
    grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
    gap:14px !important;
    margin-top:26px !important;
  }

  .character-card{
    min-height:315px !important;
    height:315px !important;
    border-width:4px !important;
    box-shadow:7px 7px 0 rgba(255,212,0,.70), 0 14px 32px rgba(0,0,0,.68) !important;
    --card-art-scale:1.05 !important;
    --card-art-y:50% !important;
  }

  .character-card:hover{
    transform:scale(1.06) rotate(var(--rot,-1deg)) !important;
  }

  .character-card img.main-art{
    object-fit:contain !important;
    object-position:center var(--card-art-y) !important;
    padding:42px 0 72px !important;
    transform:scale(var(--card-art-scale)) !important;
  }

  .character-card:hover img.main-art{
    transform:scale(calc(var(--card-art-scale) + .04)) !important;
  }

  .character-card[data-id="spiderman"]{ --card-art-scale:1.24 !important; }
  .character-card[data-id="venom"]{ --card-art-scale:1.13 !important; }
  .character-card[data-id="ironman"]{ --card-art-scale:1.08 !important; }
  .character-card[data-id="hulk"]{ --card-art-scale:1.14 !important; }
  .character-card[data-id="deadpool"]{ --card-art-scale:1.06 !important; }
  .character-card[data-id="wolverine"]{ --card-art-scale:1.14 !important; }
  .character-card[data-id="batman"]{ --card-art-scale:1.08 !important; }
  .character-card[data-id="superman"]{ --card-art-scale:1.18 !important; }
  .character-card[data-id="flash"]{ --card-art-scale:1.11 !important; }
  .character-card[data-id="wonderwoman"]{ --card-art-scale:1.03 !important; }

  .wordmark{
    top:9px !important;
    left:9px !important;
    right:9px !important;
    padding:4px !important;
  }

  .wordmark img{
    height:32px !important;
  }

  .product-price{
    top:56px !important;
    right:10px !important;
    font-size:16px !important;
    padding:6px 9px !important;
  }

  .card-info{
    bottom:62px !important;
    padding:12px !important;
  }

  .card-info h3{
    font-size:clamp(22px, 1.9vw, 31px) !important;
  }

  .product-actions{
    left:10px !important;
    right:10px !important;
    bottom:10px !important;
    gap:8px !important;
  }

  .product-actions button,
  .btn,
  .mini-btn{
    padding:10px 14px !important;
    font-size:15px !important;
  }

  .gallery-wall{
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    gap:14px !important;
    margin-top:26px !important;
  }

  .gallery-item{
    min-height:200px !important;
  }

  .cta{
    min-height:360px !important;
    padding:58px 18px !important;
  }

  .modal-content{
    width:min(900px, 92vw) !important;
    max-height:calc(100vh - 34px) !important;
    padding:16px !important;
  }

  .modal-product{
    grid-template-columns:minmax(220px, 300px) 1fr !important;
    gap:22px !important;
  }

  .modal-product .product-art,
  .detail-visual,
  .product-art{
    min-height:0 !important;
    max-height:42vh !important;
    width:100% !important;
    object-fit:contain !important;
    transform:none !important;
  }

  .modal-product .product-art img,
  .detail-visual img,
  .product-art img{
    transform:scale(1.45) !important;
    object-fit:contain !important;
  }

  .modal-info h3{
    font-size:clamp(30px, 3vw, 48px) !important;
  }

  .modal-info p{
    font-size:15px !important;
  }
}

/* Mobile: same approved large-title font as desktop, with safer sizes and spacing. */



/* === CHARACTER CARD IMAGE VISIBILITY FIX === */
.character-card img.main-art{
  display:block !important;
  position:relative !important;
  z-index:2 !important;
  opacity:1 !important;
  visibility:visible !important;
}
.character-card .wordmark,
.character-card .product-price,
.character-card .card-info,
.character-card .product-actions{
  z-index:5 !important;
}


/* === SURGICAL EFFECT FRAME SIZE REDUCTION === */
/* Scope: custom onomatopoeia hover frames only. */
@media (min-width:761px){
  .clean-effect{
    width:min(30vw, 430px) !important;
  }
  .clean-effect.rare-effect{
    width:min(34vw, 500px) !important;
  }
}

@media (max-width:760px){

  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  body{
    padding:0;
  }

  section,
  .section{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    overflow-x:hidden;
  }

  /* ===============================
     MOBILE HEADER FIX
     Fixes huge spacing and removes random character logo.
  =============================== */

  .topbar{
    height:58px !important;
    min-height:58px !important;
    padding:0 12px !important;
    gap:8px !important;
  }

  .brand{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    min-width:0 !important;
  }

  .navlinks{
    gap:8px !important;
    font-size:12px !important;
  }

  .navlinks a,
  .cart-open{
    font-size:12px !important;
    padding:4px 0 !important;
    line-height:1 !important;
  }

  .cart-count{
    min-width:20px !important;
    height:20px !important;
    font-size:11px !important;
    margin-left:4px !important;
  }

  /* ===============================
     MOBILE INTRO / LOADER FIX
     Fixes unreadable spread-out shadow.
  =============================== */

  .loader-stage{
    width:100vw !important;
    max-width:100vw !important;
    height:260px !important;
    padding:0 12px !important;
    overflow:hidden !important;
  }

  .loader-word{
    font-size:clamp(42px, 15vw, 74px) !important;
    line-height:.9 !important;
    -webkit-text-stroke:2px #000 !important;
    text-shadow:
      3px 3px 0 #000,
      5px 5px 0 var(--red),
      7px 7px 0 var(--yellow) !important;
    max-width:96vw !important;
    text-align:center !important;
    overflow:visible !important;
  }

  .loader-logo{
    width:150px !important;
    max-width:46vw !important;
  }

  /* ===============================
     MOBILE SECTION SPACING FIX
     Removes giant empty half-page gaps.
  =============================== */

  .hero{
    min-height:auto !important;
    padding-top:78px !important;
    padding-bottom:34px !important;
  }

  .hero-inner,
  .hero .wrap,
  #characters .wrap,
  #gallery .wrap,
  .page-hero .wrap,
  .cta .wrap,
  .wrap{
    width:100% !important;
    max-width:100% !important;
  }

  .section{
    padding-top:38px !important;
    padding-bottom:38px !important;
    padding-left:14px !important;
    padding-right:14px !important;
  }

  #characters.section{
    padding-top:34px !important;
  }

  #gallery.section{
    padding-top:36px !important;
  }

  .cta{
    min-height:auto !important;
    padding-top:42px !important;
    padding-bottom:46px !important;
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .hero-actions{
    margin-top:20px !important;
  }

  .character-grid,
  .gallery-wall{
    margin-top:24px !important;
  }

  /* ===============================
     MOBILE TITLES — LOCKED
     DO NOT TOUCH
  =============================== */

  .hero h1,
  .hero h1.big-title,
  #characters h2,
  #characters h2.big-title,
  #gallery h2,
  #gallery h2.big-title,
  .cta h2,
  .page-hero h1,
  .page-hero h1.big-title{
    width:100%;
    max-width:100%;
    font-size:clamp(24px, 7.8vw, 38px) !important;
    line-height:1.15 !important;
    text-align:left !important;
    white-space:normal !important;
    overflow:visible !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
  }

  .hero h1 .title-line,
  .hero h1.big-title .title-line{
    display:block !important;
    line-height:1.22 !important;
    margin:0 0 .18em 0 !important;
  }

  #characters h2 .title-line,
  #characters h2.big-title .title-line{
    display:block !important;
    line-height:1.5 !important;
    margin:0 0 .58em 0 !important;
  }

  #gallery h2 .title-line,
  #gallery h2.big-title .title-line{
    display:block !important;
    line-height:1.22 !important;
    margin:0 0 .18em 0 !important;
  }

  .cta h2 .title-line{
    display:block !important;
    line-height:1.22 !important;
    margin:0 0 .18em 0 !important;
  }

  .hero h1 .title-line:last-child,
  .hero h1.big-title .title-line:last-child,
  #characters h2 .title-line:last-child,
  #characters h2.big-title .title-line:last-child,
  #gallery h2 .title-line:last-child,
  #gallery h2.big-title .title-line:last-child,
  .cta h2 .title-line:last-child{
    margin-bottom:0 !important;
  }

  /* ===============================
     MOBILE CHARACTER CARDS — LOCKED
     DO NOT TOUCH
  =============================== */

  .character-grid{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:10px !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    justify-content:stretch !important;
    align-items:stretch !important;
    margin-top:24px !important;
    perspective:none !important;
  }

  .character-card{
    position:relative !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:300px !important;
    min-height:300px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    border-width:2px !important;
    transform:none !important;
  }

  .character-card:hover,
  .character-card:focus,
  .character-card:active{
    transform:scale(1.015) !important;
    z-index:20 !important;
  }

  .theme-overlay{
    opacity:.5 !important;
  }

  .character-card img.main-art{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
    padding:42px 4px 86px !important;
    transform:scale(var(--card-art-scale-mobile, 1.08)) !important;
    transform-origin:center center !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  .character-card[data-id="spiderman"]{ --card-art-scale-mobile:1.22; }
  .character-card[data-id="venom"]{ --card-art-scale-mobile:1.12; }
  .character-card[data-id="ironman"]{ --card-art-scale-mobile:1.08; }
  .character-card[data-id="hulk"]{ --card-art-scale-mobile:1.12; }
  .character-card[data-id="deadpool"]{ --card-art-scale-mobile:1.06; }
  .character-card[data-id="wolverine"]{ --card-art-scale-mobile:1.12; }
  .character-card[data-id="batman"]{ --card-art-scale-mobile:1.08; }
  .character-card[data-id="superman"]{ --card-art-scale-mobile:1.16; }
  .character-card[data-id="flash"]{ --card-art-scale-mobile:1.10; }
  .character-card[data-id="wonderwoman"]{ --card-art-scale-mobile:1.02; }

  .wordmark{
    position:absolute !important;
    top:5px !important;
    left:5px !important;
    right:5px !important;
    height:30px !important;
    padding:2px !important;
    border-width:1px !important;
    overflow:hidden !important;
    z-index:8 !important;
  }

  .wordmark img{
    width:100% !important;
    height:24px !important;
    max-height:24px !important;
    object-fit:contain !important;
  }

  .product-price{
    position:absolute !important;
    top:40px !important;
    right:5px !important;
    font-size:10px !important;
    line-height:1 !important;
    padding:4px 5px !important;
    border-width:1px !important;
    z-index:9 !important;
  }

  .card-info{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:43px !important;
    padding:18px 6px 5px !important;
    background:linear-gradient(transparent, rgba(0,0,0,.92) 30%, #000 100%) !important;
    overflow:hidden !important;
    z-index:7 !important;
  }

  .card-info span{
    font-size:7px !important;
    line-height:1 !important;
    padding:2px 4px !important;
    margin-bottom:3px !important;
  }

  .card-info h3{
    font-size:clamp(13px, 4.2vw, 18px) !important;
    line-height:1 !important;
    letter-spacing:0 !important;
    white-space:normal !important;
    overflow-wrap:normal !important;
  }

  .character-card[data-id="wonderwoman"] .card-info h3,
  .character-card[data-id="wolverine"] .card-info h3,
  .character-card[data-id="deadpool"] .card-info h3{
    font-size:clamp(12px, 3.8vw, 16px) !important;
  }

  .product-actions{
    position:absolute !important;
    left:5px !important;
    right:5px !important;
    bottom:5px !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:4px !important;
    height:34px !important;
    margin:0 !important;
    z-index:10 !important;
  }

  .product-actions button{
    width:100% !important;
    min-width:0 !important;
    height:32px !important;
    min-height:32px !important;
    padding:3px 2px !important;
    font-size:10px !important;
    line-height:1 !important;
    white-space:nowrap !important;
    border-width:1px !important;
    box-sizing:border-box !important;
  }

  /* ===============================
     MOBILE PREVIEW MODAL — CLEAN REAL FIX
     Fixes:
     - no sideways scroll
     - logo centered
     - close button inside modal card
     - image too large
     - missing/off-screen bio + facts + buttons
     - giant blank modal scroll
  =============================== */

  .modal{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    padding:10px !important;
    align-items:flex-start !important;
    justify-content:center !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  .modal.open{
    display:flex !important;
  }

  .modal-content{
    position:relative !important;
    width:100% !important;
    max-width:390px !important;
    height:auto !important;
    min-height:0 !important;
    max-height:calc(100dvh - 20px) !important;
    margin:0 auto !important;
    padding:48px 12px 14px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    box-sizing:border-box !important;
    border-width:3px !important;
    box-shadow:7px 7px 0 var(--red) !important;
  }

  .close-modal{
    position:absolute !important;
    top:8px !important;
    right:8px !important;
    z-index:60 !important;
    float:none !important;
    width:auto !important;
    height:30px !important;
    min-width:0 !important;
    min-height:30px !important;
    padding:5px 10px !important;
    font-size:11px !important;
    line-height:1 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .modal-body{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
    box-sizing:border-box !important;
  }

  .modal-product{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    gap:10px !important;
    overflow:visible !important;
    box-sizing:border-box !important;
  }

  .modal-product > div:first-child{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    overflow:visible !important;
    box-sizing:border-box !important;
  }

  .modal-product .logo-img{
    display:block !important;
    width:auto !important;
    max-width:190px !important;
    height:auto !important;
    max-height:42px !important;
    object-fit:contain !important;
    object-position:center center !important;
    margin:0 auto 8px auto !important;
    padding:0 !important;
  }

  .modal-product .product-art{
    display:block !important;
    width:auto !important;
    max-width:100% !important;
    height:auto !important;
    max-height:31dvh !important;
    min-height:0 !important;
    object-fit:contain !important;
    object-position:center center !important;
    transform:none !important;
    margin:0 auto !important;
    padding:0 !important;
    border-width:3px !important;
    box-shadow:5px 5px 0 var(--yellow) !important;
    background:#111 !important;
  }

  .modal-info{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
    box-sizing:border-box !important;
  }

  .modal-info h3{
    font-size:clamp(24px, 8vw, 34px) !important;
    line-height:1 !important;
    margin:4px 0 8px !important;
  }

  .bio-title{
    font-size:clamp(18px, 6vw, 25px) !important;
    line-height:1 !important;
    margin:0 0 8px !important;
  }

  .modal-info p,
  .bio-copy{
    display:block !important;
    font-size:14px !important;
    line-height:1.32 !important;
    margin:0 0 10px !important;
    max-width:100% !important;
  }

  .product-facts{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:7px !important;
    width:100% !important;
    max-width:100% !important;
    margin:10px 0 !important;
  }

  .product-fact{
    width:100% !important;
    max-width:100% !important;
    padding:8px !important;
    box-sizing:border-box !important;
    border-width:2px !important;
    box-shadow:3px 3px 0 var(--yellow) !important;
  }

  .product-fact strong{
    font-size:15px !important;
    line-height:1 !important;
  }

  .modal-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    width:100% !important;
    max-width:100% !important;
    margin-top:10px !important;
  }

  .modal-actions .btn,
  .modal-actions button,
  .modal-info .btn{
    width:100% !important;
    max-width:100% !important;
    min-height:38px !important;
    padding:9px 12px !important;
    font-size:13px !important;
    text-align:center !important;
    box-sizing:border-box !important;
  }

  .cta .btn,
  .contact-btn,
  .order-help-btn{
    width:min(88vw, 330px) !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:auto !important;
    box-sizing:border-box !important;
    text-align:center !important;
  }
}

@media (max-width:390px){

  /* MOBILE TITLES — LOCKED */
  .hero h1,
  .hero h1.big-title,
  #characters h2,
  #characters h2.big-title,
  #gallery h2,
  #gallery h2.big-title,
  .cta h2,
  .page-hero h1,
  .page-hero h1.big-title{
    font-size:clamp(22px, 7.2vw, 34px) !important;
  }

  .character-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:9px !important;
  }

  .character-card{
    height:286px !important;
    min-height:286px !important;
  }

  .character-card img.main-art{
    padding:40px 3px 82px !important;
  }

  .product-actions button{
    font-size:9px !important;
    height:30px !important;
    min-height:30px !important;
    padding:3px 1px !important;
  }

  .card-info{
    bottom:41px !important;
  }

  .card-info h3{
    font-size:clamp(12px, 3.7vw, 16px) !important;
  }

  .topbar{
    height:54px !important;
    min-height:54px !important;
    padding:0 10px !important;
  }

  .brand-logo-placeholder{
    width:34px;
    height:34px;
    font-size:9px;
  }

  .brand-name-placeholder{
    font-size:14px;
  }

  .loader-word{
    font-size:clamp(38px, 14vw, 62px) !important;
    text-shadow:
      2px 2px 0 #000,
      4px 4px 0 var(--red),
      5px 5px 0 var(--yellow) !important;
  }

  .section{
    padding-top:32px !important;
    padding-bottom:32px !important;
  }

  .hero{
    padding-top:70px !important;
    padding-bottom:30px !important;
  }

  .modal{
    padding:8px !important;
  }

  .modal-content{
    max-width:100% !important;
    max-height:calc(100dvh - 16px) !important;
    padding:44px 10px 12px !important;
    margin:0 auto !important;
  }

  .modal-product .logo-img{
    max-width:170px !important;
    max-height:38px !important;
  }

  .modal-product .product-art{
    max-height:28dvh !important;
  }

  .modal-info h3{
    font-size:clamp(22px, 7.4vw, 30px) !important;
  }

  .modal-info p,
  .bio-copy{
    font-size:13px !important;
  }
}


/* ===============================
   MOBILE CONTACT PAGE FIX
   Moves Close button up into empty top space
   and reduces the huge gap above Contact / Order Help.
=============================== */

.page-hero{
  min-height:auto !important;
  padding-top:82px !important; /* SPACE ABOVE CONTACT TITLE — lower = less empty space */
  padding-bottom:24px !important; /* SPACE BELOW CONTACT TITLE */
}

.contact-actions{
  max-width:100% !important;
  margin:-18px 0 14px 0 !important; /* MOVES CLOSE BUTTON UP — more negative = higher */
  display:flex !important;
  justify-content:flex-start !important; /* left side */
  padding:0 14px !important;
  box-sizing:border-box !important;
}

.contact-close-btn{
  padding:9px 14px !important; /* BUTTON SIZE */
  font-size:13px !important;
  box-shadow:4px 4px 0 var(--red) !important;
}
/* === Production cleanup pass: accessibility, placeholders, and reduced motion === */
:focus-visible{
  outline:4px solid var(--yellow);
  outline-offset:4px;
}
body.modal-lock{overflow:hidden;}
.brand-logo-placeholder.has-logo-image{
  padding:0;
  overflow:hidden;
  background:#fff;
}
.brand-logo-placeholder.has-logo-image img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.cart-drawer[aria-hidden="true"]{visibility:hidden;}
.cart-drawer.open[aria-hidden="false"]{visibility:visible;}
.data-error{
  grid-column:1/-1;
  background:#140000;
  border:3px solid var(--yellow);
  color:#fff;
  padding:22px;
  box-shadow:8px 8px 0 var(--red);
  font-weight:900;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }
}