/* ═══════════════════════════════════════════════════════════
   Janosci Product Detail — Mobile UI (≤991.98px)
   Authoritative mobile layout for product.php. Loaded LAST so it
   wins over premium-mobile.css / mobile-final.css conflicts.
   Desktop (≥992px) is untouched — see product-detail.css.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {

  /* ── Overflow guard: nothing on the PDP may exceed the viewport ── */
  body.pdp-page { overflow-x: hidden !important; }
  .pdp-ml,
  .pdp-ml * { box-sizing: border-box !important; }
  .pdp-ml,
  .pdp-ml .container,
  .pdp-ml-top,
  .pdp-ml-buy,
  .pdp-ml-gallery,
  .pdp-ml-tabs-wrap {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .pdp-ml .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* ── Layout: single column, comfortable spacing ── */
  .pdp-ml-top {
    display: block !important;
    margin-bottom: 1rem !important;
  }

  /* ── Gallery card ── */
  .pdp-ml-gallery {
    position: static !important;
    padding: 12px !important;
    border-radius: 16px !important;
    margin-bottom: 14px !important;
  }
  .pdp-ml-gallery-grid { flex-direction: column !important; gap: 10px !important; }
  .pdp-ml-main {
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }
  .pdp-ml-main img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    object-fit: contain !important;
    padding: 14px !important;
  }
  .pdp-ml-thumbs {
    flex-direction: row !important;
    width: 100% !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 8px !important;
    padding-bottom: 2px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pdp-ml-thumbs::-webkit-scrollbar { display: none; }
  .pdp-ml-thumb { width: 58px !important; height: 58px !important; flex: 0 0 58px !important; }

  /* ── Buy card ── */
  .pdp-ml-buy {
    padding: 16px 14px !important;
    border-radius: 16px !important;
  }
  .pdp-ml-title { font-size: 1.25rem !important; line-height: 1.3 !important; }
  .pdp-ml-sku { font-size: 0.8rem !important; }
  .pdp-ml-short { font-size: 0.88rem !important; line-height: 1.55 !important; }

  .pdp-ml-pricebox { margin: 0.75rem 0 !important; }
  .pdp-ml-price .now { font-size: 1.6rem !important; }
  .pdp-ml-price .was { font-size: 1rem !important; }
  .pdp-ml-price .off { font-size: 0.8rem !important; }

  /* ── Quantity row — override the leaked product-card flex rules ──
     (premium-mobile.css styles `.add-to-cart-form > div`; we win with
      the extra `body.pdp-page` + `.pdp-ml-buy` specificity.) */
  body.pdp-page .pdp-ml-buy .add-to-cart-form > .pdp-ml-qty {
    display: flex !important;
    align-items: center !important;
    gap: 0.7rem !important;
    margin-bottom: 0.85rem !important;
    border: 0 !important;
    overflow: visible !important;
    flex: none !important;
  }
  body.pdp-page .pdp-ml-buy .pdp-ml-qty-ctrl {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    border: 1.5px solid var(--pdp-border, #e2e8f0) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #fff !important;
  }
  body.pdp-page .pdp-ml-buy .pdp-ml-qty-ctrl button {
    width: 42px !important;
    height: 44px !important;
    font-size: 1.2rem !important;
    background: #f8fafc !important;
    border: none !important;
    color: #0d1b4b !important;
  }
  body.pdp-page .pdp-ml-buy .pdp-ml-qty-ctrl input {
    width: 46px !important;
    height: 44px !important;
    font-size: 0.95rem !important;
    border: none !important;
  }

  /* ── Actions — stacked, full-width, no overflow ── */
  body.pdp-page .pdp-ml-buy .add-to-cart-form > .pdp-ml-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.55rem !important;
    margin-bottom: 0.85rem !important;
    border: 0 !important;
    overflow: visible !important;
    flex: none !important;
  }
  .pdp-ml-actions .pdp-ml-btn,
  .pdp-ml-buy .add-to-cart-form button[type="submit"] {
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    height: auto !important;
    min-height: 48px !important;
    padding: 0.8rem 0.75rem !important;
    font-size: 0.92rem !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* Keep the intended brand colours (premium-mobile forces navy on submit) */
  .pdp-ml-buy .add-to-cart-form button.pdp-ml-btn-primary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #fff !important;
  }
  .pdp-ml-btn-gold { background: linear-gradient(135deg, #fbbf24, #f59e0b) !important; color: #0d1b4b !important; }
  .pdp-ml-btn-outline { background: #fff !important; color: #1e40af !important; border: 1.5px solid #bfdbfe !important; }
  .pdp-ml-btn-wa { background: #25d366 !important; color: #fff !important; }

  /* Secondary row: Inquiry + WhatsApp side-by-side, safely contained */
  .pdp-ml-row2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.55rem !important;
  }
  .pdp-ml-row2 .pdp-ml-btn { font-size: 0.82rem !important; padding: 0.75rem 0.5rem !important; }

  /* Save (wishlist) */
  .pdp-ml-buy form[method="POST"] .pdp-ml-btn { min-height: 44px !important; }

  /* ── Trust badges — even, no clipping ── */
  .pdp-ml-trust {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem !important;
    margin-top: 0.9rem !important;
  }
  .pdp-ml-trust div {
    padding: 0.65rem 0.3rem !important;
    font-size: 0.66rem !important;
    line-height: 1.25 !important;
    border-radius: 12px !important;
    min-width: 0 !important;
  }
  .pdp-ml-trust i { font-size: 1rem !important; margin-bottom: 0.3rem !important; }

  /* ── Tabs — horizontal scroll strip ── */
  .pdp-ml-tabs-wrap { border-radius: 16px !important; margin-bottom: 1.1rem !important; }
  .pdp-ml-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pdp-ml-tabs::-webkit-scrollbar { display: none; }
  .pdp-ml-tab { white-space: nowrap !important; padding: 0.85rem 1rem !important; font-size: 0.82rem !important; }
  .pdp-ml-panel { padding: 1.1rem 1rem !important; }
  .pdp-ml-spec th, .pdp-ml-spec td { font-size: 0.84rem !important; padding: 0.6rem 0.6rem !important; }

  /* ── Sticky buy bar sits above the bottom nav; keep it clear of the FAB ── */
  .pdp-mobile-buy-bar { z-index: 1065 !important; }
  /* Hide the floating WhatsApp FAB on the PDP — the buy bar + in-page
     WhatsApp button already cover it, and stacking them looks cluttered. */
  body.pdp-page .app-fab-wa { display: none !important; }
}

/* Very small phones: let the secondary buttons stack if cramped */
@media (max-width: 360px) {
  .pdp-ml-row2 { grid-template-columns: 1fr !important; }
  .pdp-ml-trust { grid-template-columns: 1fr 1fr 1fr !important; }
  .pdp-ml-trust div { font-size: 0.6rem !important; }
}