/*!
 * Chronovex mobile-fix overrides v4
 * Phase: 9V-CWV-MOBILE-v4 (REAL fix for product page overlap)
 *
 * Root cause of product-page "title + thumbnail overlap":
 * .ps-product__header is flex-flow:row nowrap with two children:
 *   - .ps-product__thumbnail (gallery + vertical thumb strip, ~436px)
 *   - .ps-product__info (H1, price, buttons, ~579px)
 * On mobile (<992px) row nowrap squishes both columns side by side,
 * causing the H1 title to overlap with the gallery thumb strip.
 * Fix: switch to flex-direction:column so gallery renders ABOVE info.
 *
 * Fixes shipped:
 *   A) WhatsApp widget z-index/bottom over mobile bottom nav
 *   B) Product page sticky top-bar redundant on mobile (hide it)
 *   B2) NEW: .ps-product__header switch to column layout on mobile
 *   C) Admin-bar 40px phantom gap on mobile
 *   D) 24px white margin above .cx-trust-strip on mobile
 *   E) WhatsApp panel chips clipped on small phones (BULK QUOTE)
 */

/* ==== FIX A ==== */
@media (max-width: 1199.98px) {
  html body .cvx-wa-wrap {
    bottom: 84px !important;
    z-index: 10010 !important;
  }
}

/* ==== FIX B: hide redundant sticky top-bar on mobile/tablet ==== */
@media (max-width: 1199.98px) {
  html body .ps-product--header-sticky,
  html body article.ps-product--header-sticky {
    display: none !important;
  }
}

/* ==== FIX B2 (NEW): switch product page layout to column on mobile ====
 * Two-column flex was overlapping H1 with gallery thumbnail strip.
 * Stack gallery on top, info (H1 + price + buttons) below.
 */
@media (max-width: 991.98px) {
  html body .ps-product__header {
    flex-flow: column !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
  }
  html body .ps-product__header > .ps-product__thumbnail,
  html body .ps-product__header > .ps-product__info {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  html body .ps-product__header > .ps-product__thumbnail {
    order: 1 !important;
    margin-bottom: 20px !important;
  }
  html body .ps-product__header > .ps-product__info {
    order: 2 !important;
  }
  /* keep vertical gallery thumbs from being a tall narrow strip */
  html body .bb-product-gallery-vertical {
    flex-direction: column !important;
  }
}

/* ==== FIX C: admin-bar phantom gap ==== */
@media (max-width: 991.98px) {
  html body.show-admin-bar {
    margin-top: 0 !important;
  }
  html body.show-admin-bar #admin_bar {
    display: none !important;
  }
  html body.show-admin-bar .ps-panel--sidebar {
    top: 0 !important;
  }
  html body.show-admin-bar #alert-container {
    top: 100px !important;
  }
}

/* ==== FIX D: cx-trust-strip 24px margin ==== */
@media (max-width: 991.98px) {
  html body .cx-trust-strip {
    margin-top: 0 !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}

/* ==== FIX E: WhatsApp panel scrollable on small phones ==== */
@media (max-width: 480px) {
  html body .cvx-wa-card {
    overflow-y: auto !important;
    max-height: calc(100vh - 180px) !important;
  }
  html body .cvx-wa-body {
    overflow: visible !important;
  }
  html body .cvx-wa-chips {
    flex-wrap: wrap !important;
  }
}


/* ==== FIX F: slick-slider thumbnail collision (v5) ==== */
@media (max-width: 991.98px) {
  html body .ps-product__thumbnail {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    clear: both !important;
    margin-bottom: 16px !important;
  }
  html body .ps-product__info {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    clear: both !important;
  }
  html body .bb-product-gallery-vertical {
    flex-direction: column !important;
    width: 100% !important;
  }
  html body .bb-product-gallery-images {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 80vw !important;
    order: 1 !important;
  }
  html body .bb-product-gallery-images .slick-slide {
    position: relative !important;
  }
  html body .bb-product-gallery-thumbnails {
    display: none !important;
    height: 0 !important;
    visibility: hidden !important;
  }
}


/* ==== FIX G: WhatsApp FAB position above mobile bottom nav (v6) ==== */
@media (max-width: 1199.98px) {
  html body .cvx-wa-wrap {
    bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    right: 16px !important;
    z-index: 10010 !important;
  }
  html body .cvx-wa-card {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    right: 16px !important;
  }
}
@media (max-width: 480px) {
  html body .cvx-wa-wrap {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    right: 12px !important;
  }
  html body .cvx-wa-card {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    right: 8px !important;
    max-width: calc(100vw - 16px) !important;
  }
}


/* ==== FIX H: hide redundant #cx-cbar on mobile (v7) ==== */
/* On mobile (<=1199.98px), Botble shows .navigation--list as fixed bottom nav.
   #cx-cbar is a separate fixed bottom bar with WhatsApp/Call CTAs that COLLIDES
   with the bottom nav at the same y-position. WhatsApp/Call CTAs are already
   provided by the floating .cvx-wa-wrap widget, so #cx-cbar is redundant on
   mobile. Hide it entirely below 1200px. */
@media (max-width: 1199.98px) {
  html body #cx-cbar {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    pointer-events: none !important;
  }
}


/* =========================================================
   FIX K — Phase 9V-CAT-DESC: Mobile collapse for category description
   ========================================================= */
@media (max-width: 991.98px){
  html body .cvx-cat-desc-wrap{position:relative;}
  html body .cvx-cat-desc-wrap.is-clamped .cvx-cat-desc-wrap__inner{
    max-height:168px; overflow:hidden; mask-image:linear-gradient(to bottom, #000 70%, transparent 100%);
    -webkit-mask-image:linear-gradient(to bottom, #000 70%, transparent 100%);
  }
  html body .cvx-cat-desc-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    margin:12px 0 8px; padding:10px 22px;
    background:#0a4d7a; color:#fff !important; border:0; border-radius:6px;
    font-size:14px; font-weight:600; cursor:pointer;
    text-transform:uppercase; letter-spacing:0.3px;
    box-shadow:0 2px 6px rgba(10,77,122,0.25);
  }
  html body .cvx-cat-desc-toggle:focus{outline:2px solid #2e7eb8; outline-offset:2px;}
  html body .cvx-cat-desc-toggle .cvx-cdt-less{display:none;}
  html body .cvx-cat-desc-wrap.is-expanded .cvx-cat-desc-toggle .cvx-cdt-more{display:none;}
  html body .cvx-cat-desc-wrap.is-expanded .cvx-cat-desc-toggle .cvx-cdt-less{display:inline;}
}
@media (min-width: 992px){
  html body .cvx-cat-desc-toggle{display:none;}
}
/* end FIX K */

/* ============================================================
   FIX L — Phase 9V-CAT-DESC-v8c: Mobile bottom-nav clearance
   Lifts WhatsApp FAB above .navigation--list bottom bar AND
   adds bottom padding to shop/product wrappers so the last
   lines of the description + the Read more toggle are not
   occluded on viewports ≤ 991.98px.
   See KB: MOBILE-10, MOBILE-11.
   ============================================================ */
@media (max-width: 991.98px){
  /* Lift WhatsApp FAB above bottom nav (nav ~66px, safe-area on iPhone) */
  html body #cvx-wa-wrap{
    bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 10010 !important;
  }
  /* Bottom padding on shop/product page wrappers so content + collapse toggle clear the fixed bottom nav */
  html body .ps-page--shop,
  html body .ps-product,
  html body main{
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Extra breathing room under the category description's collapse toggle */
  html body .cvx-cat-desc-wrap{
    margin-bottom: 16px;
  }
}
/* end FIX L */