/*
 * FILE: assets/css/components/mobile-fixes.css
 * PATTERN Gold — Global Mobile & Responsive Fix Layer
 * Covers: product page, cart, checkout, shop, home sections, header
 * Pearl & Champagne light theme — consistent across breakpoints
 * Updated: comprehensive audit pass
 */

/* =========================================================
   GLOBAL — prevent horizontal overflow on all pages
   ========================================================= */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
img, video, iframe { max-width: 100%; height: auto; }

/* =========================================================
   HEADER — correct sticky position accounting for topbar
   ========================================================= */
/* topbar = 36px, header = ~64-74px. Pills and sticky elements must sit below both */
@media (max-width: 1023px) {
  /* Topbar height is 36px, header height is 64px */
  .pg-header { top: 36px !important; }
  .admin-bar .pg-header { top: calc(36px + 46px) !important; }
}
@media (max-width: 480px) {
  .pg-nav-inner { padding: 0 16px !important; height: 60px !important; }
  .pg-logo-img  { max-height: 38px; }
  .pg-nav-icon-btn { width: 36px !important; height: 36px !important; }
  .pg-nav-icon-btn svg { width: 17px !important; height: 17px !important; }
}

/* =========================================================
   HERO — dark overlay on home hero slides keeps text readable
   ========================================================= */
@media (max-width: 767px) {
  /* Home hero — keep dark overlay so text is visible on image backgrounds */
  .pg-hero { height: 78vh !important; min-height: 420px !important; }
  .pg-hero-overlay {
    /* Dark gradient — NEVER force white here; that washes out text on dark photos */
    background: linear-gradient(135deg, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.22) 70%, transparent 100%) !important;
  }
  .pg-hero-content { padding: 0 20px !important; }
  .pg-hero-text    { max-width: 100%; }
  .pg-hero-title   { font-size: clamp(26px, 7.5vw, 42px) !important; }
  .pg-hero-sub     { font-size: 14px; max-width: 100%; }
  .pg-hero-ctas    { flex-direction: column; gap: 10px; }
  .pg-hero-btn, .pg-hero-btn-primary, .pg-hero-btn-outline,
  .pg-hero-btn-ghost { width: 100%; justify-content: center; text-align: center; }
  /* Hide left/right arrows on touch devices — user swipes */
  .pg-hero-prev, .pg-hero-next { display: none; }
}
@media (max-width: 479px) {
  .pg-hero { height: 85vh !important; min-height: 380px !important; }
  .pg-hero-title { font-size: clamp(22px, 8vw, 36px) !important; }
}

/* =========================================================
   HOME — category icons, grids, newsletter, social
   ========================================================= */
@media (max-width: 1023px) {
  .pg-cat-icons-grid { grid-template-columns: repeat(5, 1fr) !important; gap: 10px; }
}
@media (max-width: 767px) {
  /* Category icon strip: 5 cols on 767 */
  .pg-cat-icons-grid { grid-template-columns: repeat(5, 1fr) !important; gap: 6px; }
  .pg-cat-icon-circle { width: 52px; height: 52px; }
  .pg-cat-icon-emoji { font-size: 20px; }
  .pg-cat-icon-label { font-size: 9px; letter-spacing: 0; }
  /* Social cards: 2-column on mobile */
  .pg-home-social-grid,
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .pg-section { padding-left: 16px !important; padding-right: 16px !important; }
  /* Newsletter: single column */
  .pg-newsletter-inner { grid-template-columns: 1fr !important; gap: 24px !important; }
  .pg-nl-row { flex-direction: column; }
  .pg-nl-input, .pg-nl-btn { width: 100%; box-sizing: border-box; }
  /* WhatsApp CTA grid */
  .pg-wa-cta-inner { grid-template-columns: 1fr !important; gap: 24px !important; padding: 24px 20px !important; }
  .pg-wa-cta-left { flex-direction: column; }
  /* Budget grid: 2 col */
  .pg-budget-grid { grid-template-columns: repeat(2, 1fr) !important; }
  /* Occasions: 2 col */
  .pg-occasions-grid { grid-template-columns: repeat(2, 1fr) !important; }
  /* Craftsmanship */
  .pg-craftsmanship-grid { grid-template-columns: 1fr !important; gap: 32px; }
  .pg-craftsmanship-pillars { grid-template-columns: 1fr 1fr; }
  /* Gold ticker */
  .pg-gold-ticker-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
  /* Promo banner */
  .pg-promo-banner-bg { min-height: 300px; }
  .pg-promo-banner-content { min-height: unset; padding: 40px 20px; }
  /* Trust bar */
  .pg-trust-bar-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
  /* Bridal split */
  .pg-bridal-split { grid-template-columns: 1fr !important; height: auto !important; }
  .pg-bridal-panels-right { grid-template-columns: 1fr 1fr !important; grid-template-rows: none !important; }
}
@media (max-width: 479px) {
  .pg-cat-icons-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .pg-cat-icon-circle { width: 46px; height: 46px; }
  .pg-trust-bar-grid { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .pg-budget-grid { grid-template-columns: 1fr 1fr !important; }
  .pg-bridal-panels-right { grid-template-columns: 1fr !important; }
  .pg-occasions-grid { grid-template-columns: 1fr 1fr !important; }
}

/* =========================================================
   SHOP / CATEGORY PAGES — hero, pills, toolbar, grid
   ========================================================= */
@media (max-width: 767px) {
  /* Category hero banner */
  .pgm-cat-hero {
    min-height: 180px;
    padding: 20px 16px 28px;
    align-items: flex-end;
  }
  .pgm-cat-hero-title { font-size: clamp(22px, 6vw, 34px); margin-bottom: 6px; }
  .pgm-cat-hero-desc  { font-size: 13px; display: none; /* hide on mobile for space */ }
  .pgm-cat-hero-meta  { gap: 6px; }
  .pgm-trust-badge    { font-size: 10px; padding: 3px 8px; }
  /* Shop main area */
  .pgm-shop-main { padding: 16px 0 48px; }
  .pgm-toolbar   { padding: 0 16px 10px; flex-wrap: wrap; gap: 8px; }
  /* Filter button full width row */
  .pgm-mob-filter { font-size: 12px; }
  /* Category layout */
  .pgm-layout { grid-template-columns: 1fr !important; gap: 0 !important; }
}
/* Pills strip — must sit below topbar (36px) + header (64px) = 100px total on mobile */
@media (max-width: 1023px) {
  .pgm-pills-wrap { top: 100px !important; }
}
@media (max-width: 479px) {
  .pgm-pills-wrap { top: 96px !important; }
  .pgm-4col { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .pgm-pill  { padding: 5px 12px; font-size: 11px; }
}

/* =========================================================
   PRODUCT PAGE — gallery, summary, actions
   ========================================================= */
@media (max-width: 1023px) {
  .pg-product-layout-malabar {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .pg-zoom-result { display: none !important; }
  .pg-tab-desc-grid   { grid-template-columns: 1fr !important; }
  .pg-specs-full-grid { grid-template-columns: 1fr !important; gap: 20px; }
  .pg-4col-grid       { grid-template-columns: repeat(2, 1fr) !important; }
  .pg-trust-badges    { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 767px) {
  .pg-product-layout-malabar { gap: 20px !important; }
  .pg-gallery-wrap { flex-direction: column-reverse; }
  .pg-thumb-h { width: 58px; height: 58px; }
  .pg-gallery-stage { aspect-ratio: 1 / 1; }
  /* Product summary — remove sticky on mobile */
  .pg-product-summary {
    position: static !important;
    padding: 20px 16px !important;
    margin: 0 !important;
  }
  /* Product details section margin fix */
  .pg-product-details-section {
    margin: 0 0 32px !important;
    padding: 20px 16px !important;
  }
  /* Actions stack */
  .pg-qty-row { flex-wrap: wrap; gap: 8px; }
  .pg-add-to-cart { height: 48px; }
  .pg-buy-now { height: 48px; }
  /* Price */
  .pg-price-current { font-size: 26px; }
  /* Services strip labels hidden on very small screens */
  .pg-service-label { font-size: 9px; }
  /* EMI grid: 3 col stays */
  .pg-emi-options { grid-template-columns: repeat(3, 1fr); }
  /* Delivery grid: single column */
  .pg-delivery-grid { grid-template-columns: 1fr !important; }
  /* Sticky bar simplified */
  .pg-sticky-bar-info { display: none; }
  .pg-sticky-bar-inner { justify-content: center; gap: 8px; padding: 10px 16px; }
  .pg-sticky-whatsapp span { display: none; }
  /* Related product scrollable strip */
  .pg-4col-grid { gap: 12px !important; }
}
@media (max-width: 479px) {
  .pg-price-current   { font-size: 22px; }
  .pg-product-title   { font-size: 19px; }
  .pg-thumb-h         { width: 50px; height: 50px; }
  .pg-metal-dots      { gap: 5px; }
  .pg-metal-dot-btn   { min-width: 50px; padding: 6px 6px; }
  .pg-karat-selector  { flex-wrap: wrap; }
  .pg-karat-btn       { flex: 1 1 calc(33% - 6px); }
  .pg-4col-grid       { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .pg-trust-badges    { grid-template-columns: repeat(2, 1fr) !important; }
  .pg-emi-options     { grid-template-columns: repeat(3, 1fr); }
  /* Sticky bar — text-only icons */
  .pg-sticky-add-to-cart span { display: none; }
  .pg-sticky-add-to-cart { padding: 10px 12px; }
}

/* =========================================================
   CART PAGE — stacked layout, coupon, totals
   ========================================================= */
@media (max-width: 1023px) {
  .pg-cart-layout {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }
  .pg-cart-right { position: static !important; }
  .pg-cart-summary-box { position: static !important; }
}
@media (max-width: 600px) {
  .pg-cart-main { padding: 16px 0 40px; }
  .pg-cart-item { flex-direction: row; gap: 12px; }
  .pg-cart-item-img { width: 76px; height: 76px; }
  /* Steps */
  .pg-steps { gap: 0; max-width: 100%; }
  .pg-step-label { display: none; }
  .pg-step-icon  { width: 36px; height: 36px; }
  /* Coupon row: full width inputs */
  .pg-coupon-row { flex-direction: column; gap: 8px; }
  .pg-coupon-input { width: 100% !important; box-sizing: border-box; }
  .pg-coupon-btn   { width: 100%; }
  /* Cart actions row */
  .pg-cart-actions-row { flex-direction: column; align-items: stretch; }
  .pg-update-cart-btn  { width: 100%; justify-content: center; }
  /* WA bar */
  .pg-cart-wa-bar { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 479px) {
  .pg-cart-item-img { width: 64px; height: 64px; }
  .pg-cart-item-name { font-size: 14px; }
}

/* =========================================================
   CHECKOUT PAGE — stacked, field sizes
   ========================================================= */
@media (max-width: 1023px) {
  .pg-checkout-layout {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }
}
@media (max-width: 600px) {
  .pg-checkout-main     { padding: 16px 0 40px; }
  .pg-co-section        { padding: 18px 16px; }
  .pg-co-section-title  { font-size: 17px; }
  .pg-place-order-btn   { width: 100%; font-size: 14px; padding: 16px; }
  .pg-wa-btn            { font-size: 13px; padding: 12px 16px; width: 100%; }
  /* Inline address row → stack on mobile */
  .pg-address-row { flex-direction: column !important; }
}

/* =========================================================
   WHATSAPP FAB — avoid phone bottom bar + sticky bar
   ========================================================= */
@media (max-width: 767px) {
  .pg-whatsapp-fab {
    bottom: 72px; /* push up above any sticky bar */
    right: 14px;
    width: 48px;
    height: 48px;
    box-shadow: 0 4px 16px rgba(37,211,102,.35);
  }
  .pg-whatsapp-fab svg { width: 22px; height: 22px; }
}
@media (max-width: 479px) {
  .pg-whatsapp-fab { bottom: 80px; right: 12px; }
}

/* =========================================================
   CART DRAWER — full-width on very small screens
   ========================================================= */
@media (max-width: 479px) {
  .pg-cart-drawer { width: 100% !important; right: -100% !important; }
  .pg-cart-drawer.is-open { right: 0 !important; }
}

/* =========================================================
   ANNOUNCEMENT / TOPBAR — wrap text on tiny screens
   ========================================================= */
@media (max-width: 360px) {
  .pg-announcement-bar { font-size: 10px; }
  .pg-topbar { font-size: 10px; }
}

/* =========================================================
   TABLES — horizontal scroll on mobile
   ========================================================= */
@media (max-width: 600px) {
  .pg-rate-table,
  .woocommerce-order-details table,
  .woocommerce-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* =========================================================
   FOOTER — 2-col then 1-col stack
   ========================================================= */
@media (max-width: 767px) {
  .pg-footer-grid,
  [class*="pg-footer"] [style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }
  .pg-footer-main { padding: 40px 20px 32px !important; }
  .pg-footer-bottom { flex-direction: column; gap: 12px; text-align: center; padding: 16px 20px !important; }
}
@media (max-width: 479px) {
  .pg-footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
}

/* =========================================================
   CONTAINER — horizontal padding on small screens
   ========================================================= */
@media (max-width: 767px) {
  .pg-container    { padding-left: 16px !important; padding-right: 16px !important; }
  .pg-container-md { padding-left: 16px !important; padding-right: 16px !important; }
}
@media (max-width: 479px) {
  .pg-container    { padding-left: 12px !important; padding-right: 12px !important; }
  .pg-container-md { padding-left: 12px !important; padding-right: 12px !important; }
}

/* =========================================================
   TOAST — prevent overflow on narrow screens
   ========================================================= */
@media (max-width: 479px) {
  .pg-toast {
    white-space: normal;
    width: calc(100% - 32px);
    left: 16px;
    right: 16px;
    transform: translateX(0) translateY(80px);
    text-align: center;
  }
  .pg-toast.is-visible {
    transform: translateX(0) translateY(0);
  }
}

/* =========================================================
   MY ACCOUNT — stack tabs on mobile
   ========================================================= */
@media (max-width: 767px) {
  .pg-account-layout { grid-template-columns: 1fr !important; gap: 20px; }
  .pg-account-nav   { position: static !important; }
}

/* =========================================================
   WC NATIVE OVERRIDES — ensure WC elements are mobile safe
   ========================================================= */
@media (max-width: 767px) {
  /* WC product grid fallback */
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  /* WC order table */
  .woocommerce-account .woocommerce-orders-table { font-size: 12px; }
}
@media (max-width: 479px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}

/* =========================================================
   DRAWER — sub-menu indentation on mobile
   ========================================================= */
.pg-drawer-menu-list .sub-menu { display: none !important; } /* hide sub-menus in drawer — top level only */
.pg-drawer-menu-list > .menu-item-has-children > a::after {
  content: ' →';
  opacity: .4;
  font-size: 12px;
}