/* =====================================================
   Mad Smokes — Mobile responsive overlay
   Loaded LAST so it can override site.css + site-extra.css
   Breakpoints:
     - tablet:  max-width: 900px
     - mobile:  max-width: 640px
     - small:   max-width: 380px
===================================================== */

/* ---------- Mobile menu drawer (mobile-only component) ---------- */
.hamburger-btn {
  display: none;  /* Hidden by default — only shown on mobile */
  background: transparent;
  border: 0;
  color: var(--bone);
  cursor: pointer;
  padding: 8px;
  align-items: center;
  justify-content: center;
}
.hamburger-btn:hover { color: var(--acid); }
.mobile-menu {
  display: none;  /* Default hidden — visible when .open via JS */
  position: fixed;
  top: 0; right: 0;
  width: min(320px, 80%);
  height: 100vh;
  background: var(--ink-soft);
  border-left: 2px solid var(--ink-2);
  z-index: 200;
  padding: 0;
  overflow-y: auto;
  animation: slideInRight 0.22s cubic-bezier(.2,.8,.2,1);
}
.mobile-menu header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 2px solid var(--ink-2);
}
.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  padding: 16px 0;
}
.mobile-menu-nav a {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bone);
  text-decoration: none;
  padding: 16px 24px;
  border-bottom: 1px solid var(--ink-2);
  cursor: pointer;
}
.mobile-menu-nav a:hover { color: var(--acid); background: rgba(212, 245, 55, 0.05); }
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* ---------- TABLET (≤900px) ---------- */
@media (max-width: 900px) {

  /* Shell padding tightens */
  .shell { padding-left: 20px; padding-right: 20px; }

  /* Hero — flatten so we can reorder children: comic → text → TV */
  .hero-poster-tiles {
    display: flex !important;
    flex-direction: column !important;
    gap: 56px !important;
  }
  .hero-poster-tiles .hp-right-stack { display: contents !important; }
  .hero-poster-tiles .hp-skull { order: 1 !important; min-height: 360px !important; }
  .hero-poster-tiles .hp-left  { order: 2 !important; }
  .hero-poster-tiles .hp-tv    { order: 3 !important; min-height: 320px !important; }
  .hero-poster-tiles .hp-tv .tv-screen { height: 100% !important; min-height: 280px; }

  /* Header: smaller logo */
  body[data-route="home"] .brand-center img,
  .brand-center img { height: 70px !important; }

  /* Section heads — stack title above link */
  .section-head { flex-wrap: wrap; gap: 12px; }
  .section-head h2 { font-size: clamp(40px, 7vw, 64px) !important; }

  /* Page titles */
  .page-title { font-size: clamp(48px, 9vw, 96px) !important; }

  /* Grids collapse */
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* PDP stacks */
  .pdp { grid-template-columns: 1fr !important; gap: 32px !important; }
  .pdp h1 { font-size: clamp(40px, 8vw, 64px) !important; }
  .reviews-summary { grid-template-columns: 1fr !important; }

  /* Checkout */
  .checkout-grid { grid-template-columns: 1fr !important; }
  .checkout-form .row-2,
  .checkout-form .row-3 { grid-template-columns: 1fr !important; }

  /* Account */
  .account-grid { grid-template-columns: 1fr !important; }

  /* Pillars */
  .pillars { grid-template-columns: 1fr !important; }

  /* Brand strip */
  .brand-strip { grid-template-columns: repeat(3, 1fr) !important; }

  /* Footer cols */
  .site-footer .cols { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }

  /* TV section */
  .tv-section { grid-template-columns: 1fr !important; }
  .tv-headline { font-size: clamp(40px, 8vw, 72px) !important; }

  /* Comic strip */
  .comic-strip-section { grid-template-columns: 1fr !important; gap: 32px !important; margin: 64px 0 !important; }
  .comic-strip-title { font-size: clamp(40px, 8vw, 72px) !important; }

  /* Newsletter */
  .news-headline { font-size: clamp(40px, 8vw, 72px) !important; }
}

/* ---------- MOBILE (≤640px) ---------- */
@media (max-width: 640px) {

  /* Shell padding even tighter */
  .shell { padding-left: 16px; padding-right: 16px; }

  /* Notice bar: smaller letters, no marquee */
  .notice {
    font-size: 10px !important;
    letter-spacing: .12em !important;
    padding: 6px 10px !important;
    line-height: 1.4 !important;
  }

  /* ---------- Header / nav ---------- */
  .site-header { height: 56px !important; }
  .site-header .shell.header-grid {
    grid-template-columns: auto 1fr auto !important;
    gap: 8px !important;
    padding: 0 12px !important;
    align-items: center;
  }
  /* Hide the desktop nav links on mobile — use hamburger menu instead */
  .nav-left { display: none !important; }
  /* Show hamburger button on mobile */
  .hamburger-btn { display: inline-flex !important; }
  .mobile-menu { display: block; }
  /* On home, brand-center is absolutely positioned via desktop CSS — reset to in-flow on mobile */
  body[data-route="home"] .brand-center {
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
  }
  body[data-route="home"] .brand-center img,
  .brand-center img { height: 40px !important; margin-top: 0 !important; }
  .age-chip { display: none !important; }
  .header-tools { gap: 4px !important; }
  .header-tools .icon-btn { padding: 6px !important; }
  .cart-pill { padding: 6px 10px !important; font-size: 12px !important; }

  /* ---------- Hero ---------- */
  /* Switch to flex + flatten hp-right-stack so we can reorder: comic → text → TV */
  .hero-poster-tiles {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    gap: 32px !important;
    margin: 16px 0 48px !important;
  }
  .hero-poster-tiles .hp-right-stack {
    display: contents !important;
  }
  .hero-poster-tiles .hp-skull { order: 1 !important; }   /* comic first */
  .hero-poster-tiles .hp-left  { order: 2 !important; }   /* then text */
  .hero-poster-tiles .hp-tv    { order: 3 !important; }   /* then TV */
  .hero-poster-tiles .hp-left {
    padding: 32px 24px !important;
    transform: rotate(-.5deg) !important;
  }
  .hero-poster-tiles .hp-left h1 {
    font-size: clamp(34px, 9.5vw, 56px) !important;
    text-wrap: balance !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    text-shadow: 4px 4px 0 var(--bone) !important;
    line-height: .92 !important;
    max-width: 100%;
  }
  .hero-poster-tiles .hp-left .lead { font-size: 15px !important; margin-top: 16px !important; }
  /* Generous gap so the offset drop-shadows on TV (right/down) and comic (left/down) don't overlap */
  .hero-poster-tiles .hp-right-stack { gap: 56px !important; }
  .hero-poster-tiles .hp-tv { min-height: 260px !important; }
  .hero-poster-tiles .hp-skull { min-height: 280px !important; }
  .hero-poster-tiles .hp-tv .tv-screen { height: 100% !important; min-height: 240px; }
  /* On phones the green drop-shadow on the left edge gets clipped — flip to right so it shows */
  .hero-poster-tiles .hp-skull {
    filter: drop-shadow(8px 8px 0 var(--acid-deep)) drop-shadow(10px 10px 0 var(--ink)) !important;
    transform: rotate(-1deg) !important;
    margin-bottom: 12px;
  }
  .hero-poster-tiles .hp-tv {
    transform: rotate(1deg) !important;
  }

  /* Flat hero */
  .hero-flat { grid-template-columns: 1fr !important; min-height: 0 !important; }
  .hero-flat .left { padding: 32px 24px !important; }
  .hero-flat .right { border-left: 0 !important; border-top: 2px solid var(--ink) !important; min-height: 280px; }
  .hero-flat h1 { font-size: clamp(48px, 14vw, 72px) !important; }

  /* Mascot hero */
  .hero-mascot { padding: 32px 24px 0 !important; }
  .hero-mascot h1 { font-size: clamp(56px, 16vw, 96px) !important; }

  /* ---------- Marquee / poster-band ---------- */
  .poster-band { padding: 14px 0 !important; }
  .poster-band .marquee { font-size: 14px !important; gap: 24px !important; }

  /* ---------- Product cards ---------- */
  .grid-4, .grid-3 { grid-template-columns: 1fr !important; gap: 16px !important; }
  .card.product { padding: 16px !important; }
  .card.product .img { padding: 24px 0 !important; }
  .card.product .name { font-size: 18px !important; }
  .card.product .price { font-size: 22px !important; }
  .card.product .meta { font-size: 11px !important; }

  /* Shop list row → stack */
  .shop-list .product {
    grid-template-columns: 80px 1fr !important;
    gap: 12px !important;
    grid-template-rows: auto auto !important;
  }
  .shop-list .product > div:nth-of-type(2) { grid-column: 1 / -1; }
  .shop-list .product .btn { grid-column: 1 / -1; width: 100%; }
  .shop-list .product .img { width: 80px; }

  /* Shop toolbar */
  .shop-toolbar { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }

  /* ---------- Section heads ---------- */
  .section-head { margin: 48px 0 24px !important; }
  .section-head h2 { font-size: clamp(36px, 9vw, 56px) !important; line-height: .92 !important; }
  .section-head .sticker-tag { font-size: 11px !important; padding: 5px 10px !important; }

  /* ---------- Page titles ---------- */
  .page-title { font-size: clamp(40px, 11vw, 72px) !important; margin-top: 24px !important; }
  .page-sub { font-size: 14px !important; }

  /* ---------- Deal strip ---------- */
  .deal-strip { grid-template-columns: 1fr !important; }
  .deal-left { padding: 32px 24px !important; }
  .deal-headline { font-size: clamp(56px, 18vw, 88px) !important; }
  .deal-right { min-height: 200px !important; border-left: 0 !important; border-top: 2px solid var(--bone) !important; padding: 24px !important; }

  /* ---------- Pillars ---------- */
  .pillars { grid-template-columns: 1fr !important; gap: 16px !important; }
  .pillar { padding: 24px !important; }
  .pillar h3 { font-size: 24px !important; }

  /* ---------- Brand strip ---------- */
  .brand-strip { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .brand-card { padding: 20px 12px !important; font-size: 18px !important; }
  .brand-strip[style*="repeat(5"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* ---------- Wordmark strip ---------- */
  .wordmark-strip .row { font-size: 36px !important; gap: 18px !important; }
  .wordmark-strip .star { font-size: 20px !important; }

  /* ---------- Comic strip section ---------- */
  .comic-strip-section { grid-template-columns: 1fr !important; gap: 24px !important; margin: 56px 0 !important; }
  .comic-strip-title { font-size: clamp(36px, 10vw, 56px) !important; line-height: .95 !important; }
  .comic-strip-blurb { font-size: 14px !important; }
  .comic-strip-meta { flex-wrap: wrap !important; gap: 8px !important; font-size: 11px !important; }
  .comic-strip-frame { padding: 16px !important; }

  /* ---------- TV section ---------- */
  .tv-section { grid-template-columns: 1fr !important; gap: 24px !important; }
  .tv-headline { font-size: clamp(36px, 10vw, 56px) !important; line-height: .95 !important; }
  .tv-blurb { font-size: 14px !important; }
  .tv-bullets li { font-size: 13px !important; }

  /* ---------- Promo strip ---------- */
  .promo-strip { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; padding: 28px 24px !important; }
  .promo-strip h3 { font-size: 28px !important; }

  /* ---------- Newsletter ---------- */
  .news-headline { font-size: clamp(40px, 12vw, 72px) !important; line-height: .92 !important; }
  .news-inner { padding: 48px 24px 40px !important; }
  .news-form { flex-direction: column !important; gap: 10px !important; }
  .news-form input { width: 100% !important; }
  .news-form button { width: 100% !important; }
  .news-sub { font-size: 13px !important; }
  .news-meta { flex-direction: column !important; gap: 4px !important; font-size: 11px !important; align-items: flex-start !important; }
  .news-skull-l, .news-skull-r { display: none !important; }

  /* ---------- Blog ---------- */
  .blog-grid { grid-template-columns: 1fr !important; gap: 16px !important; margin: 0 0 64px !important; }
  .blog-card { transform: none !important; }
  .blog-card:hover { transform: translateY(-3px) !important; }
  .blog-title { font-size: 18px !important; }
  .blog-thumb { aspect-ratio: 16 / 9 !important; }
  .blog-num { font-size: 48px !important; }
  .blog-quote { font-size: 22px !important; }

  /* Blog post page */
  .blog-post { padding: 24px 0 !important; }
  .blog-post-title { font-size: clamp(32px, 8vw, 56px) !important; line-height: .95 !important; }
  .blog-post-deck { font-size: 15px !important; }
  .blog-post-meta { flex-wrap: wrap !important; gap: 8px !important; }
  .blog-post-hero { aspect-ratio: 16 / 9 !important; }
  .blog-post-hero .blog-num { font-size: 64px !important; }
  .blog-post-body .bp-h2 { font-size: 24px !important; margin-top: 28px !important; }
  .blog-post-body .bp-p { font-size: 15px !important; }
  .blog-post-body .bp-pull { font-size: 18px !important; padding: 16px 20px !important; }
  .blog-post-related { padding-top: 48px !important; }
  .blog-related-grid { grid-template-columns: 1fr !important; }
  .blog-post-footer { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }

  /* ---------- FAQ ---------- */
  .faq-list { max-width: 100% !important; }
  .faq-q { padding: 16px !important; }
  .faq-q .q-text { font-size: 14px !important; }
  .faq-item.open .faq-a { padding: 0 16px 16px !important; font-size: 14px !important; }

  /* ---------- PDP ---------- */
  .pdp { grid-template-columns: 1fr !important; gap: 24px !important; }
  .pdp h1 { font-size: clamp(36px, 9vw, 56px) !important; }
  .pdp .gallery { aspect-ratio: 1 !important; }
  .pdp .spec-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .pdp .spec { padding: 10px 12px !important; }
  .pdp .spec dt { font-size: 10px !important; }
  .pdp .spec dd { font-size: 12px !important; }
  .price-row { flex-wrap: wrap !important; }
  .price-row .price { font-size: 36px !important; }
  .price-row .per { font-size: 11px !important; flex-basis: 100% !important; }
  .reviews-summary { grid-template-columns: 1fr !important; gap: 24px !important; }
  .review-big { font-size: 64px !important; }
  .cross-sell .grid-4 { grid-template-columns: 1fr !important; }

  /* ---------- Cart / Checkout ---------- */
  .drawer { width: 100% !important; max-width: 100% !important; }
  .drawer .line { grid-template-columns: 60px 1fr auto !important; gap: 10px !important; }
  .drawer .ph { width: 60px !important; height: 60px !important; }
  .checkout-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .checkout-steps { gap: 6px !important; overflow-x: auto !important; padding-bottom: 8px; }
  .checkout-step { flex-shrink: 0 !important; padding: 6px 10px !important; font-size: 11px !important; }
  .step-num { width: 22px !important; height: 22px !important; font-size: 11px !important; }
  .checkout-form .row-2,
  .checkout-form .row-3 { grid-template-columns: 1fr !important; }
  .summary-card { padding: 20px !important; }
  .summary-line.total .v { font-size: 22px !important; }

  /* Confirmation */
  .confirm-card { padding: 40px 24px !important; }
  .confirm-card h1 { font-size: clamp(48px, 12vw, 72px) !important; }
  .confirm-card .skull { height: 100px !important; }
  .order-num { font-size: 16px !important; padding: 10px 16px !important; }

  /* ---------- Account ---------- */
  .account-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .account-nav { flex-direction: row !important; overflow-x: auto !important; gap: 16px !important; padding-bottom: 8px !important; border-bottom: 2px solid var(--ink-2) !important; }
  .account-nav a { flex-shrink: 0 !important; font-size: 12px !important; padding: 6px 0 !important; }
  .order-row { grid-template-columns: 1fr auto !important; gap: 8px !important; padding: 14px !important; }
  .order-row > span:nth-of-type(2),
  .order-row > .status { grid-column: 1; }
  .order-row .btn { grid-column: 1 / -1; width: 100% !important; }

  /* ---------- Track order ---------- */
  .tracker { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
  .tracker-line { display: none !important; }
  .tracker-step .label { font-size: 12px !important; }
  .tracker-step .when { font-size: 10px !important; }

  /* ---------- Footer ---------- */
  .site-footer .cols { grid-template-columns: 1fr !important; gap: 24px !important; }
  .site-footer h5 { font-size: 14px !important; }
  .site-footer .legal { font-size: 11px !important; line-height: 1.5 !important; }

  /* ---------- AgeGate ---------- */
  .modal { max-width: 94% !important; padding: 24px !important; }
  .modal h2 { font-size: 32px !important; }
  .modal p { font-size: 14px !important; }

  /* ---------- Decorative stickers — hide on small ---------- */
  .deco-sticker { display: none !important; }

  /* ---------- Tweaks panel — hide on mobile (dev tool) ---------- */
  .tweaks-trigger,
  .tweaks-panel { display: none !important; }

  /* ---------- Generic: prevent horizontal overflow ---------- */
  html, body { overflow-x: hidden; }
  img, video { max-width: 100%; height: auto; }
}

/* ---------- VERY SMALL (≤380px) ---------- */
@media (max-width: 380px) {
  .nav-left { gap: 8px !important; }
  .nav-left a { font-size: 10px !important; }
  .brand-center img { height: 36px !important; }
  .hero-poster-tiles .hp-left h1 { font-size: 34px !important; line-height: .94 !important; }
  .hero-poster-tiles .hp-left { padding: 22px 16px !important; }
  .page-title { font-size: 40px !important; }
  .section-head h2 { font-size: 32px !important; }
  .btn { padding: 10px 14px !important; font-size: 11px !important; }
  .btn-lg { padding: 12px 18px !important; font-size: 12px !important; }
}