/* ═══════════════════════════════════════════════════════════
   VAAZHA — v3.14-fixes.css
   Post-feedback fixes (v3.14 release):
   1. Mobile filter drawer — clean transform-based close, ✕ works reliably
   2. Product page mobile — full-width image, no horizontal overflow,
      visible ADD TO CART, no white gap next to green footer
   3. Contact bar — Instagram + Email only (no WhatsApp)
   Loads LAST so it takes final precedence.
═══════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────
   GLOBAL — kill any horizontal overflow (fixes the white
   strip next to the green footer on mobile)
─────────────────────────────────────────────────────────── */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
body {
  position: relative;
}
/* Nothing anywhere should escape the viewport horizontally. */
img, svg, video, iframe, canvas {
  max-width: 100%;
}
/* Common offenders — force them to viewport */
.vzh-footer,
.vzh-footer-main,
.vzh-footer-newsletter-band,
.vzh-footer-bottom,
.vzh-page-content,
.vzh-shop-content,
.vzh-shop-layout,
.vzh-shop-main,
.vzh-single-product,
.woocommerce-tabs,
.related.products,
.up-sells.upsells,
.woocommerce-notices-wrapper {
  max-width: 100%;
  box-sizing: border-box;
}
/* Announcement bar occasionally leaked to the right — clip it. */
.vzh-announce,
.vzh-ticker,
.vzh-ticker-inner { max-width: 100vw; overflow: hidden; }

/* ───────────────────────────────────────────────────────────
   1. MOBILE FILTER DRAWER — reliable close + no phantom hit area
─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Desktop-only sticky positioning must not leak to mobile */
  .vzh-shop-sidebar {
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: translateY(100%);
    visibility: hidden;
    pointer-events: none;
    z-index: 9998;
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.22);
    padding: 0 20px 120px;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.32s;
  }
  .vzh-shop-sidebar.open {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
  }
  /* The sticky drawer head with the ✕ close button */
  .vzh-filter-drawer-head {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 5;
    padding: 18px 4px 12px;
    border-bottom: 1px solid #ece7dc;
  }
  .vzh-filter-drawer-close {
    position: relative;
    z-index: 6;
    min-width: 48px !important;
    min-height: 48px !important;
    font-size: 30px !important;
    line-height: 1 !important;
    color: #0d1a0f !important;
    background: rgba(13, 26, 15, 0.06) !important;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .vzh-filter-drawer-close:hover,
  .vzh-filter-drawer-close:active {
    background: rgba(13, 26, 15, 0.14) !important;
  }
  /* Backdrop only clickable while drawer open */
  .vzh-filter-backdrop {
    pointer-events: none;
  }
  .vzh-filter-backdrop.show {
    pointer-events: auto;
  }
}

/* ───────────────────────────────────────────────────────────
   2. PRODUCT PAGE MOBILE — full-width image + visible CTA
─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Container: no leaked horizontal scroll */
  .vzh-single-product,
  .vzh-single-product .container,
  .single-product div.product {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* Gallery: full width, image never cropped */
  .single-product .woocommerce-product-gallery {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    position: static !important;
    float: none !important;
  }
  .single-product .woocommerce-product-gallery__wrapper,
  .single-product .woocommerce-product-gallery .flex-viewport {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 14px !important;
    background: var(--vzhp-paper, #faf8f3) !important;
  }
  .single-product .woocommerce-product-gallery__image {
    width: 100% !important;
    max-width: 100% !important;
    display: block;
  }
  .single-product .woocommerce-product-gallery__image img,
  .single-product .woocommerce-product-gallery__wrapper img,
  .single-product .wp-post-image {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
  }
  /* Product thumbnails row — even spacing, no overflow */
  .single-product .flex-control-thumbs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 12px 0 0 !important;
  }
  .single-product .flex-control-thumbs li {
    width: calc(25% - 6px) !important;
    margin: 0 !important;
    list-style: none !important;
  }

  /* Summary column — full width, tidy padding */
  .single-product .summary,
  .single-product .vzh-single-product .summary {
    width: 100% !important;
    max-width: 100% !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    float: none !important;
  }

  /* Colour + Size pills wrap cleanly */
  .single-product .vzh-pill-select {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 6px 0 14px !important;
  }
  .vzh-pill-select .vzh-size-chip,
  .vzh-pill-select .vzh-color-chip {
    flex: 0 0 auto !important;
    min-height: 42px;
  }

  /* Quantity + Add-to-cart — stack + full-width, IMPOSSIBLE to miss */
  .single-product form.cart {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 18px 0 !important;
  }
  .single-product form.cart .quantity {
    width: 100% !important;
    height: 52px !important;
  }
  .single-product form.cart .qty {
    flex: 1 1 auto !important;
    width: auto !important;
  }
  /* High-contrast, maroon-accent ADD TO CART button so it is
     clearly visible on mobile (fixes "red/maroon button not seen"). */
  .single_add_to_cart_button,
  .single-product form.cart button.single_add_to_cart_button {
    width: 100% !important;
    flex: 0 0 auto !important;
    height: 56px !important;
    background: linear-gradient(180deg, #7a1e26 0%, #5c1a24 100%) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 12px !important;
    font-size: 17px !important;
    letter-spacing: 3px !important;
    box-shadow: 0 8px 22px rgba(92, 26, 36, 0.30) !important;
  }
  .single_add_to_cart_button:hover,
  .single_add_to_cart_button:focus {
    background: linear-gradient(180deg, #8a2530 0%, #6a1e29 100%) !important;
    box-shadow: 0 12px 28px rgba(92, 26, 36, 0.42) !important;
  }

  /* Trust badges: single column so they don't get clipped */
  .vzh-trust-bar {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 14px !important;
  }
  .vzh-trust-item { justify-content: flex-start !important; }

  /* Product tabs — never spill outside the viewport */
  .single-product .woocommerce-tabs {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding: 24px 0 0 !important;
  }
  .single-product .woocommerce-tabs ul.tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none;
    padding: 0 !important;
  }
  .single-product .woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; }
  .single-product .woocommerce-tabs .panel {
    padding: 16px 4px !important;
  }
}

/* ───────────────────────────────────────────────────────────
   3. FOOTER — no white gap on the right on mobile
─────────────────────────────────────────────────────────── */
.vzh-footer,
.vzh-footer-main,
.vzh-footer-newsletter-band,
.vzh-footer-bottom,
.vzh-footer-newsletter-inner,
.vzh-footer-bottom-inner {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
@media (max-width: 900px) {
  .vzh-footer-main,
  .vzh-footer-newsletter-inner,
  .vzh-footer-bottom-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .vzh-footer-payment {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ───────────────────────────────────────────────────────────
   4. CONTACT PAGE — clickable email/IG links look consistent
─────────────────────────────────────────────────────────── */
.vzh-contact-item-value a {
  color: var(--clr-forest, #0d1a0f);
  text-decoration: none;
  border-bottom: 1px dashed rgba(13, 26, 15, 0.25);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.vzh-contact-item-value a:hover {
  border-bottom-color: var(--clr-forest, #0d1a0f);
}