/* =========================================================
   07-mobile-fluid-container.css — Mobile Fluid Container System
   Version: 1.0 — Makes containers truly fluid on mobile
   
   PROBLEM ANALYSIS:
   Even after removing Blocksy container constraints, the page still
   feels "boxed" because:
   1. .bt-container uses padding-inline with clamp() that can be too wide
   2. Container might still have margin:auto or other centering
   3. Need tighter, more controlled padding on mobile (12-16px max)
   
   SOLUTION:
   - Make .bt-container truly fluid on mobile (no max-width, no centering)
   - Reduce padding to minimal (12-16px) for premium edge-to-edge feel
   - Ensure all nested containers are also fluid
   - Desktop unchanged
   
   SCOPED: body.single-product / .bt-custom-product-page only
   ========================================================= */

/* =========================
   MOBILE ONLY (≤767px)
   ========================= */
@media (max-width: 767px) {
  
  /* =========================
     Override CSS variable for consistency
     ========================= */
  body.single-product .bt-custom-product-page {
    --bt-container-pad: 16px;
  }
  
  /* =========================
     CRITICAL: Make .bt-container truly fluid
     ========================= */
  body.single-product .bt-custom-product-page .bt-container {
    /* Remove any max-width constraints */
    max-width: none !important;
    
    /* Full width */
    width: 100% !important;
    
    /* Remove centering margins */
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-inline: 0 !important;
    
    /* Minimal, controlled side padding for premium feel */
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-inline: 16px !important;
  }
  
  /* =========================
     Ensure nested containers are also fluid
     ========================= */
  body.single-product .bt-custom-product-page .bt-container .bt-container {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

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

/* =========================
   VERY SMALL MOBILE (≤360px)
   Minimal padding
   ========================= */
@media (max-width: 360px) {
  body.single-product .bt-custom-product-page .bt-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-inline: 12px !important;
  }
  
  /* =========================
     Ensure nested containers are also fluid
     ========================= */
  body.single-product .bt-custom-product-page .bt-container .bt-container {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* =========================
   DESKTOP: NO CHANGES
   All container behavior preserved above 768px
   ========================= */