/* =========================================================
   The Pack Guys — mobile.css
   Comprehensive responsive layer. Linked from every page.
   Breakpoints: tablet ≤960, phone ≤640, narrow ≤420.
   ========================================================= */

/* ---------- Universal: touch targets + base ---------- */
@media (max-width: 960px) {
  /* All form inputs minimum 16px to prevent iOS auto-zoom */
  input, select, textarea, button { font-size: 16px !important; }

  /* All clickable elements min 44px tall touch target */
  .pill, button.submit, .case-picker label, .qty-picker label,
  .color-picker label, .drawer-link, .drawer-toggle { min-height: 44px; }

  /* Pills wider tap area */
  .pill { padding: 14px 28px !important; }
}

/* ---------- TABLET ≤ 960px ---------- */
@media (max-width: 960px) {
  /* Nav tightens */
  .nav { padding: 13px 21px !important; }
  .nav-links { gap: 21px !important; }
  .nav-links a { font-size: 13px !important; }
  .logo { font-size: 22px !important; }

  /* Hero scales down */
  .hero { padding-top: 34px !important; padding-bottom: 21px !important; }
  .hero h1 { font-size: clamp(40px, 9vw, 72px) !important; letter-spacing: -1.5px !important; }
  .hero .sub { font-size: 17px !important; }
  .hero-tube-wrap { transform: none !important; } /* disable parallax on touch */
  .hero-tube { height: 360px !important; }
  .hero-stage { margin-bottom: -120px !important; }

  /* Tighter sections */
  .catalog, .samples, .pricing, .how, .faq, .why, .founder, .sla, .stockists, .band, .form-wrap {
    padding-left: 21px !important;
    padding-right: 21px !important;
    padding-top: 55px !important;
    padding-bottom: 55px !important;
  }

  /* Section headlines */
  .catalog h2, .samples h2, .pricing h2, .how h2, .faq h2, .why h2,
  .founder-body h2, .sla h2, .band h2, .page-header h1 {
    font-size: clamp(34px, 7vw, 55px) !important;
  }
  .hero-text h1 { letter-spacing: -1px !important; }

  /* Pricing tiers: 5-col → 2-col grid */
  .tier-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 13px !important; }
  .tier:nth-child(2) { transform: none !important; }
  .tier:nth-child(2):hover { transform: translateY(-8px) !important; }
  .tier { min-height: auto !important; padding: 21px !important; }
  .tier .total { font-size: 34px !important; }
  .tier-badge { font-size: 9px !important; padding: 4px 10px !important; }

  /* How-it-works: 3-col → vertical stack */
  .how-grid { grid-template-columns: 1fr !important; gap: 34px !important; }
  .step { padding: 21px; background: rgba(255,255,255,0.5); border-radius: 16px; }
  .step .num { font-size: 55px !important; margin-bottom: 13px !important; }

  /* SLA 3-col → vertical */
  .sla-grid { grid-template-columns: 1fr !important; gap: 13px !important; max-width: 100% !important; }
  .sla-num { font-size: 42px !important; }

  /* Why-us 3-col → vertical */
  .why-grid { grid-template-columns: 1fr !important; gap: 21px !important; }
  .why-item { padding: 21px !important; }

  /* Compliance row 4-col → 2-col */
  .compliance-row { grid-template-columns: 1fr 1fr !important; gap: 13px !important; }

  /* Footer 4-col → 2-col */
  .footer { padding: 55px 21px 21px !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 34px !important; }

  /* Forms: 2-col field rows → single column */
  .field-row { grid-template-columns: 1fr !important; }
  .field-row.triple { grid-template-columns: 2fr 1fr 1fr !important; }
  .form-card { padding: 34px 21px !important; border-radius: 21px !important; }
  .form-section { margin-bottom: 34px !important; }
  .color-picker { grid-template-columns: repeat(3, 1fr) !important; }
  .qty-picker { grid-template-columns: 1fr !important; }
  .submit-row { flex-direction: column !important; align-items: stretch !important; }
  button.submit { width: 100% !important; padding: 17px !important; }
  .perks { grid-template-columns: repeat(2, 1fr) !important; gap: 21px !important; }

  /* Catalog grid + summary stack (override builder-inner) */
  .builder-inner { grid-template-columns: 1fr !important; gap: 21px !important; }
  .summary { position: relative !important; top: auto !important; }
  .product-row { grid-template-columns: 96px 1fr !important; gap: 13px !important; padding: 21px !important; }
  .product-row img { height: 96px !important; }
  .product-row .img-slot { min-height: 96px !important; }
  .case-picker label { padding: 10px 13px !important; font-size: 13px !important; }
  .qty-line { gap: 8px !important; }
  .qty-line .line-total { font-size: 21px !important; }
  .tier-info { padding: 13px !important; flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  .tier-info-price { font-size: 24px !important; }
  .stock-banner { flex-direction: column !important; gap: 8px !important; text-align: left !important; padding: 13px !important; align-items: flex-start !important; }

  /* Founder section already stacks at 800; reinforce */
  .founder-inner { grid-template-columns: 1fr !important; gap: 34px !important; text-align: center; }
  .founder-monogram { width: 144px !important; height: 144px !important; font-size: 89px !important; }
  .founder-receipts { justify-content: center; }

  /* Samples section on home */
  .samples-inner { grid-template-columns: 1fr !important; gap: 34px !important; text-align: center; }
  .samples-img img { height: 233px !important; }
  .samples .bullets { justify-content: center; }

  /* Promo banner shrinks */
  .promo-banner { font-size: 10px !important; padding: 10px 34px 10px 13px !important; min-height: 34px !important; }
  .promo-msg { white-space: normal !important; line-height: 1.3 !important; padding: 0 21px !important; }
  body { padding-top: 34px !important; }
  .nav { top: 34px !important; }

  /* Blog posts narrower padding */
  article.post { padding: 34px 21px 89px !important; }
  .post-title { font-size: clamp(28px, 7vw, 42px) !important; }
  .post-lead { font-size: 18px !important; }
  .post-body { font-size: 16px !important; }
}

/* ---------- PHONE ≤ 640px ---------- */
@media (max-width: 640px) {
  /* Hide nav-links text — drawer handles primary nav now */
  .nav-links { display: none !important; }
  .nav { padding: 13px 16px !important; justify-content: space-between !important; }
  .pill { padding: 11px 21px !important; font-size: 13px !important; }
  .nav .pill { padding: 10px 18px !important; font-size: 12px !important; }

  /* Hero further reduces */
  .hero h1 { font-size: clamp(34px, 11vw, 55px) !important; }
  .hero-text { padding: 0 8px; }
  .hero-tube { height: 280px !important; }

  /* Hide the ground shadow on tiny screens — looks weird at small scale */
  .ground-shadow { display: none !important; }

  /* Compliance row: 1-col on phone */
  .compliance-row { grid-template-columns: 1fr !important; }

  /* Footer 1-col on phone */
  .footer-grid { grid-template-columns: 1fr !important; gap: 21px !important; }

  /* Color picker: 5-col → 2 rows of 3-2 */
  .color-picker { grid-template-columns: repeat(2, 1fr) !important; }

  /* Cards bigger touch targets */
  .case-picker { gap: 8px !important; }
  .case-picker label { flex: 1 1 calc(50% - 4px); text-align: center; }
}

/* ---------- NARROW PHONE ≤ 420px ---------- */
@media (max-width: 420px) {
  .hero h1 { font-size: 34px !important; }
  .tier-grid { grid-template-columns: 1fr !important; }
  .tier:nth-child(2) { transform: none !important; }
  .perks { grid-template-columns: 1fr !important; }
  .promo-banner { font-size: 9px !important; letter-spacing: 1px !important; }
  .cr-badge { flex-wrap: wrap !important; font-size: 11px !important; }
}

/* ============================================================
   STICKY MOBILE ACTION BAR — primary mobile CTA pattern
   Injected per-page by shell.js with page-aware content
   ============================================================ */
.mobile-action-bar { display: none; }
@media (max-width: 768px) {
  .mobile-action-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #2A2A2A;
    color: #FAF6EE;
    padding: 13px 21px;
    z-index: 75;
    align-items: center;
    justify-content: space-between;
    gap: 13px;
    box-shadow: 0 -8px 21px rgba(42,42,42,0.30);
    font-family: 'Inter', sans-serif;
    min-height: 56px;
  }
  .mobile-action-bar .mab-label {
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(250,246,238,0.65);
    font-weight: 600;
    line-height: 1.2;
  }
  .mobile-action-bar .mab-amount {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 21px;
    color: #C5D4B5;
    margin-right: 4px;
  }
  .mobile-action-bar .mab-cta {
    background: #C5D4B5;
    color: #2A2A2A;
    padding: 11px 21px;
    border-radius: 100px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.3px;
    text-decoration: none;
    flex-shrink: 0;
    white-space: nowrap;
    box-shadow: 0 4px 13px rgba(197,212,181,0.32);
    min-height: 42px;
    display: inline-flex;
    align-items: center;
  }
  .mobile-action-bar .mab-cta:hover { background: #fff; }
  body { padding-bottom: 70px; }
}