/* =========================================================
   05-fullwidth-mobile.css — Full-Width Layout Override (ALL SIZES)
   Version: 2.0 — Removes Blocksy container constraints on ALL screen sizes
   
   ROOT CAUSE ANALYSIS:
   Blocksy theme wraps content in:
   - .hero-section.is-width-constrained (max-width constraint)
   - .ct-container (centered container with max-width: 1200px)
   - .entry-content (WooCommerce wrapper with padding)
   
   These create a "boxed" appearance with side margins on all screen sizes.
   
   SOLUTION:
   Override all Blocksy/WooCommerce container constraints for single product pages
   on ALL screen sizes (mobile + desktop) for true full-width layout.
   ========================================================= */

/* =========================
   GLOBAL FULL-WIDTH OVERRIDE (ALL SCREEN SIZES)
   Target: body.single-product + .bt-custom-product-page
   ========================= */

/* Remove container max-width constraint - apply to ALL sizes */
body.single-product .bt-custom-product-page {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Override Blocksy container constraints - ALL SIZES */
body.single-product .hero-section.is-width-constrained,
body.single-product .bt-custom-product-page .hero-section.is-width-constrained,
body.single-product .hero-section[data-type="type-1"],
body.single-product .hero-section[data-type="type-2"],
body.single-product .ct-container,
body.single-product .bt-custom-product-page .ct-container,
body.single-product .ct-container[data-width="normal"],
body.single-product .ct-container[data-width="narrow"],
body.single-product .ct-container[data-width="wide"],
body.single-product .entry-content,
body.single-product .woocommerce .entry-content,
body.single-product .bt-custom-product-page .entry-content,
body.single-product #main-container,
body.single-product .site-main,
body.single-product .content-area {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Override our own container max-width - make it truly full-width */
body.single-product .bt-custom-product-page .bt-container {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* Keep intentional inner padding */
  padding-left: var(--bt-container-pad) !important;
  padding-right: var(--bt-container-pad) !important;
}

/* Full-width sections */
body.single-product .bt-custom-product-page .bt-breadcrumb,
body.single-product .bt-custom-product-page .bt-live-bar,
body.single-product .bt-custom-product-page .bt-product-main,
body.single-product .bt-custom-product-page .bt-product-grid,
body.single-product .bt-custom-product-page .bt-tabs-section,
body.single-product .bt-custom-product-page .bt-upsells-section,
body.single-product .bt-custom-product-page .bt-related-section,
body.single-product .bt-custom-product-page .bt-recently-viewed {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Override any Blocksy responsive container classes */
body.single-product [class*="ct-container"],
body.single-product [class*="is-width-constrained"],
body.single-product [class*="content-area"] {
  max-width: none !important;
  width: 100% !important;
}

/* =========================
   REMOVE WHITE GAP BETWEEN HEADER AND FIRST SECTION
   ========================= */
body.single-product .bt-custom-product-page {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body.single-product .bt-custom-product-page > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Remove hero section spacing */
body.single-product .hero-section,
body.single-product .hero-section.is-width-constrained,
body.single-product .bt-custom-product-page .hero-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Remove spacing from breadcrumb (first visible element) */
body.single-product .bt-custom-product-page .bt-breadcrumb {
  margin-top: 0 !important;
  padding-top: var(--bt-space-3) !important;
}

/* Remove top padding from product-main */
body.single-product .bt-custom-product-page .bt-product-main {
  padding-top: var(--bt-space-4) !important;
}

/* =========================
   MOBILE-SPECIFIC ADJUSTMENTS
   ========================= */
@media (max-width: 767px) {
  /* Tighter padding on mobile */
  body.single-product .bt-custom-product-page .bt-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  
  /* Minimal top spacing on mobile */
  body.single-product .bt-custom-product-page .bt-breadcrumb {
    padding-top: var(--bt-space-2) !important;
  }
  
  body.single-product .bt-custom-product-page .bt-product-main {
    padding-top: var(--bt-space-3) !important;
  }
  
  /* Prevent horizontal overflow */
  body.single-product .bt-custom-product-page {
    overflow-x: hidden;
  }
}

/* =========================
   EXTRA SMALL MOBILE (320px - 520px)
   Even tighter padding
   ========================= */
@media (max-width: 520px) {
  body.single-product .bt-custom-product-page .bt-container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* =========================
   DESKTOP: Full-width with comfortable padding
   ========================= */
@media (min-width: 768px) {
  /* Desktop: Full-width but with comfortable inner padding */
  body.single-product .bt-custom-product-page .bt-container {
    padding-left: clamp(24px, 5vw, 48px) !important;
    padding-right: clamp(24px, 5vw, 48px) !important;
  }
}

/* =========================
   LARGE DESKTOP: Even more padding for readability
   ========================= */
@media (min-width: 1400px) {
  body.single-product .bt-custom-product-page .bt-container {
    padding-left: clamp(48px, 8vw, 80px) !important;
    padding-right: clamp(48px, 8vw, 80px) !important;
  }
}