/* PACKZONE MOBILE UX — responsive-only additions.
   Loaded after existing styles; desktop presentation is unchanged. */
@media (max-width: 767px) {
  html { scroll-padding-top: 20px; }
  body { overflow-x: clip; padding-bottom: env(safe-area-inset-bottom, 0px); }
  img, video, svg { max-width: 100%; }
  .pz-mobile-nav {
    padding-bottom: max(9px, env(safe-area-inset-bottom, 0px)) !important;
    min-height: 66px;
    border-top: 1px solid #168ce8 !important;
    background: rgba(2, 9, 27, .97) !important;
    box-shadow: 0 -6px 25px #006eff35;
  }
  .pz-mobile-nav a, .pz-mobile-nav button {
    min-width: 0; min-height: 44px; display: flex;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; color: #eaf7ff !important; font-size: 10px;
    -webkit-tap-highlight-color: transparent;
  }
  .pz-mobile-nav i { font-size: 19px; color: #40caff; }
  header.glass-panel > div { padding: 10px 14px !important; gap: 10px !important; }
  header.glass-panel > div > a:first-child { min-width: 0; flex-shrink: 1; }
  header.glass-panel .pz-electric-header-logo { width: clamp(160px, 46vw, 245px) !important; height: auto !important; max-height: 50px; object-fit: contain; }
  header.glass-panel .pz-header-logo { width: 37px !important; height: 37px !important; object-fit: contain; }
  header.glass-panel > div > a:last-child { padding: 9px 10px !important; gap: 7px !important; flex-shrink: 0; }
  #navCartCount { flex-shrink: 0; min-width: 23px !important; min-height: 23px !important; background: #f7fdff !important; color: #031632 !important; border: 1px solid #00baff !important; box-shadow: 0 0 12px #009eff88; font-size: 12px !important; }
  .pz-cart-drawer { width: min(100vw, 420px) !important; max-width: 100vw !important; padding-bottom: max(15px, env(safe-area-inset-bottom, 0px)); }
  .pz-drawer-head { gap: 12px; }
  .pz-drawer-items, .pz-drawer-bottom { min-width: 0; }
  .pz-cookie-overlay { padding: 10px !important; align-items: flex-end !important; }
  .pz-cookie-panel { width: 100% !important; max-height: min(85dvh, 740px); overflow-y: auto; border-radius: 17px !important; padding: 18px !important; }
  .pz-cookie-actions button { min-height: 44px; }
  .pz-footer { padding-bottom: calc(85px + env(safe-area-inset-bottom, 0px)) !important; }
  .pz-footer-inner { gap: 18px !important; }
  .pz-footer nav a, .pz-footer nav button { padding: 8px 0 !important; line-height: 1.5; }
  .pz-footer-brand { max-width: 100%; }
  .pz-footer-brand strong { font-size: clamp(18px, 5vw, 26px) !important; overflow-wrap: anywhere; }
  .pz-social-grid { grid-template-columns: 1fr !important; }
  .pz-social-tile { min-height: 0 !important; padding: 24px 16px !important; }
  .pz-search-wrap, .pz-search-suggestions { max-width: 100%; }
  .pz-legal-top { flex-wrap: wrap; align-items: center; gap: 12px; }
  .pz-legal-wrap { padding: 28px 14px 105px !important; }
  .pz-legal-card { padding: 18px 15px !important; border-radius: 15px !important; }
  .pz-legal-card h1 { overflow-wrap: anywhere; }
  .pz-legal-nav { gap: 8px !important; }
  .pz-legal-nav a { padding: 10px 12px !important; }
  .pz-neon-inner input:not([type="checkbox"]):not([type="radio"]),
  .pz-neon-inner select, .pz-neon-inner textarea { font-size: 16px !important; min-width: 0; max-width: 100%; }
  .pz-neon-checkout .glass-panel { border-radius: 17px !important; padding: 17px !important; }
  .pz-neon-checkout .grid.grid-cols-3 { gap: 8px !important; }
  .pz-neon-checkout .grid.grid-cols-3 input { padding: 12px 8px !important; }
  .pz-neon-checkout label.flex.items-center.justify-between { gap: 10px; flex-wrap: wrap; }
  .pz-neon-checkout button[onclick="submitOrder()"] { white-space: normal; line-height: 1.45; min-height: 52px; padding: 13px !important; }
  #fiveCardsGrid { gap: 9px !important; }
  .pz-flip-card { max-width: 100%; }
  #packOpenerSection { padding-top: 46px !important; padding-bottom: 46px !important; }
  #packOpenerSection h2 { font-size: clamp(21px, 6vw, 29px) !important; line-height: 1.22 !important; }
  .pz-clickable-pack { max-width: min(90vw, 360px); }
}
@media (max-width: 767px) {
  /* Homepage: preserve both characters by displaying the banner as a true image,
     then place the title in a separate, readable panel below it. */
  body.pz-landing .pz-neon-hero {
    height: auto !important; display: flex; flex-direction: column;
    overflow: visible !important; background: #020c21;
  }
  body.pz-landing .pz-neon-hero > img {
    display: block; width: 100%; height: auto !important;
    aspect-ratio: 2048 / 462; object-fit: contain !important;
    object-position: center !important; transform: none !important;
  }
  body.pz-landing .pz-neon-hero-shade { display: none; }
  body.pz-landing .pz-neon-hero .pz-hero-copy {
    position: relative !important; left: auto !important; top: auto !important;
    transform: none !important; max-width: none !important; width: 100%;
    padding: 18px 16px 20px; text-align: left;
    background: linear-gradient(160deg, #071e42, #020817 85%);
    border-bottom: 1px solid #0b76c7; filter: none;
  }
  body.pz-landing .pz-neon-hero .pz-hero-copy h1 {
    font-size: clamp(29px, 8.2vw, 48px) !important; line-height: 1.04 !important;
    letter-spacing: -.04em; margin: 0 0 12px !important;
  }
  body.pz-landing .pz-neon-hero .pz-hero-copy p {
    font-size: 13px !important; line-height: 1.55; margin: 0 0 16px !important;
    max-width: 36ch;
  }
  body.pz-landing .pz-neon-hero .pz-hero-actions { gap: 9px !important; }
  body.pz-landing .pz-neon-hero .pz-hero-actions a {
    min-height: 44px !important; padding: 11px 13px !important;
    font-size: 12px !important; white-space: normal; text-align: center;
  }
  body.pz-landing .pz-neon-categories { margin-top: 14px !important; padding: 0 12px !important; }
  body.pz-landing .pz-neon-category-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  body.pz-landing .pz-neon-category-grid > a {
    height: clamp(148px, 41vw, 210px); border-radius: 12px;
    isolation: isolate;
  }
  body.pz-landing .pz-neon-category-grid > a > img {
    position: absolute; inset: 0; width: 100% !important;
    height: 100% !important; min-height: 0 !important;
    object-fit: cover !important; object-position: center !important;
  }
  body.pz-landing .pz-neon-category-grid > a::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(0,5,18,.87), rgba(0,8,24,.34) 63%, transparent);
  }
  body.pz-landing .pz-neon-tile-title {
    position: absolute; z-index: 2; left: 16px; top: 50%;
    transform: translateY(-50%); width: min(67%, 260px);
    font-size: clamp(17px, 5.2vw, 25px) !important;
    line-height: 1.13 !important; overflow-wrap: anywhere;
    text-shadow: 0 2px 12px #000;
  }
  body.pz-landing .pz-neon-benefits {
    margin: 16px 12px 28px !important; padding: 14px 16px !important;
    gap: 12px !important;
  }
  body.pz-landing .pz-neon-benefits > div { justify-content: flex-start !important; gap: 14px; }
  body.pz-landing .pz-neon-benefits strong { font-size: 11px; }
  body.pz-landing .pz-neon-benefits small { font-size: 10px; }
  body.pz-landing .pz-neon-social { padding: 0 12px !important; }
  body.pz-landing .pz-neon-social-heading h2 { font-size: clamp(22px, 6vw, 30px); }
  body.pz-landing .pz-neon-social-grid { grid-template-columns: 1fr !important; gap: 12px; }
  body.pz-landing .pz-neon-social-grid a { border-radius: 12px; }
  body.pz-landing .pz-neon-social-grid img { width: 100%; height: auto !important; max-height: none !important; display: block; }
  body.pz-landing .pz-neon-home { padding-bottom: 35px; }
}
@media (max-width: 390px) {
  header.glass-panel > div > a:last-child > span:not(#navCartCount) { display: none; }
  .pz-footer nav { grid-template-columns: 1fr !important; }
  .pz-neon-checkout .grid.grid-cols-3 { grid-template-columns: 1fr !important; }
  .pz-neon-checkout .grid.grid-cols-3 > * { grid-column: 1 / -1 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .pz-mobile-nav *, .pz-neon-category-grid > a { transition: none !important; }
}