/* KineticPep — comprehensive mobile responsive overrides
   The original Claude Design CSS lacks responsive rules for ~19 inline
   grid declarations spread across pages. We force 1-col layouts and
   adjust spacing / typography for true mobile usability. */

/* ===== TABLET — collapse 2-col layouts to 1-col ===== */
@media (max-width: 992px) {
  /* Force any inline 2-col / 3-col grid back to single column */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1.2fr 1fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns:1fr 1.2fr"],
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Section padding tightened */
  .section { padding: 56px 0 !important; }
  .section-tight { padding: 32px 0 !important; }

  /* Heros and big sections */
  section[style*="padding:120px"] { padding: 64px 0 56px !important; }
  section[style*="padding:24px 0 96px"] { padding: 16px 0 56px !important; }

  /* PDP grid sticky reset */
  .kp-pdp-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .kp-pdp-info [style*="position:sticky"] { position: static !important; }
}

/* ===== MOBILE 768 — full mobile-first treatment ===== */
@media (max-width: 768px) {

  /* Type scale — smaller hero numbers */
  .h1 { font-size: 2rem !important; line-height: 1.1 !important; }
  .h2 { font-size: 1.625rem !important; line-height: 1.2 !important; }
  .h3 { font-size: 1.375rem !important; line-height: 1.25 !important; }
  .h4 { font-size: 1.125rem !important; }
  .body-lg { font-size: 1rem !important; }

  /* PDP main title narrower */
  .kp-pdp-info h1.h1 { font-size: 2rem !important; }

  /* Wrap padding tighter */
  .wrap { padding: 0 16px !important; }

  /* Trust bar — horizontal scroll with snap, smaller chips */
  .kp-trust-bar { height: auto !important; padding: 6px 0 !important; }
  .kp-trust-bar__inner { gap: 18px !important; padding: 0 16px !important; scroll-snap-type: x mandatory; }
  .kp-trust-bar__item { font-size: 0.6875rem !important; scroll-snap-align: start; flex-shrink: 0; }

  /* Header / nav */
  .kp-header__inner { gap: 8px !important; }
  .kp-header__logo img { height: 22px !important; }
  .kp-header__icon-btn { width: 36px !important; height: 36px !important; }

  /* Hero numbers stat row stacked */
  section.surface-dark [style*="gap:48px;margin-top:48px"] {
    gap: 24px !important;
    margin-top: 32px !important;
    flex-direction: column !important;
  }
  section.surface-dark [style*="gap:48px;margin-top:48px"] > div {
    width: 100%;
  }

  /* Cards / category grid */
  .grid-4 { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
  .grid-4 > .card { padding: 20px !important; }
  .grid-4 .h4 { font-size: 1rem !important; }
  .grid-4 .body-sm { font-size: 0.8125rem !important; }

  /* Feature cards icon shrink */
  .grid-4 [style*="width:48px;height:48px"] {
    width: 40px !important; height: 40px !important;
    margin-bottom: 16px !important;
  }

  /* Section headers with right CTA stack */
  [style*="display:flex"][style*="justify-content:space-between"][style*="flex-wrap:wrap"] {
    gap: 16px !important;
  }

  /* Buttons full width on mobile when grouped */
  .btn-lg { padding: 14px 20px !important; font-size: 0.9375rem !important; }
  [style*="display:flex;gap:12px;flex-wrap:wrap"] .btn { width: 100% !important; }
  [style*="display:flex;gap:12px;flex-wrap:wrap"] { flex-direction: column !important; gap: 12px !important; }

  /* PDP CTA cart button full width */
  .kp-pdp-cta { width: 100% !important; }
  .kp-pdp-cta form.cart { flex-direction: column !important; }
  .kp-pdp-cta form.cart .quantity { width: 100% !important; }
  .kp-pdp-cta form.cart input.qty { width: 100% !important; }
  .kp-pdp-cta form.cart button[type="submit"],
  .kp-pdp-cta form.cart .single_add_to_cart_button { width: 100% !important; }
  .kp-pdp-cta .add_to_cart_inline,
  .kp-pdp-cta .add_to_cart_inline > a {
    width: 100% !important;
    text-align: center !important;
    display: inline-block !important;
  }

  /* Price block */
  .kp-pdp-price { flex-wrap: wrap !important; gap: 8px !important; }
  .kp-pdp-price .h2 { font-size: 2rem !important; }

  /* PDP specs */
  .kp-pdp-specs { grid-template-columns: 1fr 1fr !important; padding: 18px !important; gap: 12px !important; }
  .kp-pdp-specs .h4 { font-size: 0.9375rem !important; }
  .kp-pdp-media { padding: 32px !important; aspect-ratio: 1 !important; }

  /* Card hover lift disabled on mobile (touch devices don't hover) */
  .card.hover-lift:hover {
    transform: none !important;
    box-shadow: var(--shadow-sm) !important;
  }

  /* Featured product grid */
  .kp-product-card__body { padding: 16px !important; }
  .kp-product-card__price { font-size: 1.0625rem !important; }

  /* COA card on hero dark side */
  section.surface-dark .card {
    padding: 24px !important;
  }

  /* FAQ details */
  details summary { font-size: 1rem !important; }

  /* Footer columns 1-col on phone */
  .kp-footer { padding: 56px 0 24px !important; }
  .kp-footer__grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding-bottom: 32px !important;
  }
  .kp-footer__brand { max-width: 100% !important; }
  .kp-footer__legal { flex-direction: column !important; align-items: flex-start !important; }

  /* WC related products on PDP */
  ul.products { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
  ul.products li.product { padding: 12px !important; }
  ul.products li.product h2,
  ul.products li.product .woocommerce-loop-product__title { font-size: 0.875rem !important; }
  ul.products li.product .price { font-size: 1rem !important; }

  /* Tighten shop archive title row */
  [style*="display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:48px"] {
    margin-bottom: 24px !important;
  }
}

/* ===== PHONE 480 — narrow phone treatment ===== */
@media (max-width: 480px) {
  .h1 { font-size: 1.75rem !important; }
  .h2 { font-size: 1.375rem !important; }
  .grid-4 { grid-template-columns: 1fr !important; }
  ul.products { grid-template-columns: 1fr !important; }
  .kp-pdp-specs { grid-template-columns: 1fr !important; }

  /* Mobile drawer wider on narrow phones */
  .kp-mobile-drawer { width: 280px !important; }

  /* Footer social */
  .kp-footer__social { flex-wrap: wrap !important; }

  /* Padding tighter */
  .wrap { padding: 0 14px !important; }
  .section { padding: 40px 0 !important; }
}

/* ===== UTILITIES — safe-area + scroll behavior ===== */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; max-width: 100vw; }
img, svg { max-width: 100%; height: auto; }