/* =========================================================
   06-mobile-surface-system.css — Mobile Surface System
   Version: 1.0 — Reduces card overuse on mobile for premium feel
   
   PROBLEM:
   Every section/module is styled as a card (bg, border, shadow, radius),
   creating a stacked "form UI" look instead of premium.
   
   SOLUTION:
   - Remove card styling from most sections on mobile (≤767px)
   - Keep cards ONLY for key interactive elements (price/CTA, timer)
   - Replace boxes with simple separators (1px borders)
   - Desktop unchanged
   
   SCOPED: body.single-product / .bt-custom-product-page only
   ========================================================= */

/* =========================
   MOBILE ONLY (≤767px)
   ========================= */
@media (max-width: 767px) {
  
  /* =========================
     REMOVE CARDS FROM:
     1. Trust Section
     2. Tab Content Panels
     3. Tab Buttons (simplify)
     4. Shipping Progress
     5. Section Backgrounds
     ========================= */
  
  /* 1. TRUST SECTION - Remove card styling */
  body.single-product .bt-custom-product-page .btp-trust-section {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: var(--bt-space-4) 0 !important;
    /* Add top border separator instead */
    border-top: 1px solid rgba(17, 24, 39, 0.08) !important;
    margin-top: var(--bt-space-4) !important;
  }
  
  /* Trust items - remove nested card styling */
  body.single-product .bt-custom-product-page .btp-trust-item {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: var(--bt-space-2) 0 !important;
  }
  
  /* 2. TAB CONTENT PANELS - Remove card styling */
  body.single-product .bt-custom-product-page .bt-tab-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: var(--bt-space-4) 0 !important;
    /* Add top border separator */
    border-top: 1px solid rgba(17, 24, 39, 0.08) !important;
    margin-top: var(--bt-space-3) !important;
  }
  
  /* 3. TAB BUTTONS - Simplify (remove shadow, reduce border) */
  body.single-product .bt-custom-product-page .bt-tab {
    background: transparent !important;
    border: 1px solid rgba(17, 24, 39, 0.12) !important;
    box-shadow: none !important;
    border-radius: var(--bt-radius-full) !important;
    /* Keep radius for pill shape but remove card feel */
  }
  
  body.single-product .bt-custom-product-page .bt-tab:hover {
    box-shadow: none !important;
    border-color: var(--bt-pink-border) !important;
  }
  
  body.single-product .bt-custom-product-page .bt-tab.active {
    background: var(--bt-pink-subtle) !important;
    box-shadow: none !important;
  }
  
  /* 4. SHIPPING PROGRESS - Remove card styling */
  body.single-product .bt-custom-product-page .bt-shipping-progress,
  body.single-product .bt-custom-product-page .bt-free-shipping-badge {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: var(--bt-space-3) 0 !important;
    margin-top: var(--bt-space-3) !important;
  }
  
  /* 5. SECTION BACKGROUNDS - Remove soft background */
  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 {
    background: transparent !important;
    /* Add separator instead */
    border-top: 1px solid rgba(17, 24, 39, 0.08) !important;
  }
  
  /* 6. GALLERY MAIN - Remove border/shadow, keep minimal radius for image */
  body.single-product .bt-custom-product-page .bt-gallery-main {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    /* Keep small radius for image container only */
    border-radius: var(--bt-radius-md) !important;
  }
  
  /* 7. BREADCRUMB - Remove background, keep border separator */
  body.single-product .bt-custom-product-page .bt-breadcrumb {
    background: transparent !important;
    /* Keep bottom border as separator */
  }
  
  /* =========================
     KEEP CARDS FOR KEY ELEMENTS:
     1. Price Section (key info)
     2. Cart Section (primary CTA)
     3. Urgency Block/Timer (conversion element)
     ========================= */
  
  /* Price section - KEEP card styling */
  /* .bt-price-section - no changes */
  
  /* Cart section - KEEP card styling */
  /* .bt-cart-section - no changes */
  
  /* Urgency block - KEEP card styling */
  /* .bt-urgency-block - no changes */
  
  /* =========================
     ADD SEPARATORS BETWEEN SECTIONS
     Replace card backgrounds with clean borders
     ========================= */
  
  /* Add separator after product main section */
  body.single-product .bt-custom-product-page .bt-product-main {
    border-bottom: 1px solid rgba(17, 24, 39, 0.08) !important;
    padding-bottom: var(--bt-space-5) !important;
  }
  
  /* Add separator before tabs */
  body.single-product .bt-custom-product-page .bt-tabs-section {
    border-top: 1px solid rgba(17, 24, 39, 0.08) !important;
    padding-top: var(--bt-space-5) !important;
  }
  
  /* Add separator before upsells/related */
  body.single-product .bt-custom-product-page .bt-upsells-section,
  body.single-product .bt-custom-product-page .bt-related-section {
    padding-top: var(--bt-space-5) !important;
  }
  
  /* =========================
     REDUCE BORDER RADIUS ON REMAINING CARDS
     Make them less "boxy" on mobile
     ========================= */
  
  body.single-product .bt-custom-product-page .bt-price-section,
  body.single-product .bt-custom-product-page .bt-cart-section,
  body.single-product .bt-custom-product-page .bt-urgency-block {
    border-radius: var(--bt-radius-md) !important;
    /* Reduce from card-radius to medium radius */
  }
  
  /* =========================
     SIMPLIFY BADGES AND CHIPS
     Remove excessive styling
     ========================= */
  
  /* Verified badge - simplify */
  body.single-product .bt-custom-product-page .bt-verified-badge {
    background: transparent !important;
    border: 1px solid rgba(17, 24, 39, 0.12) !important;
  }
  
  /* Sold badge - simplify */
  body.single-product .bt-custom-product-page .bt-sold-badge {
    background: transparent !important;
    border: 1px solid var(--bt-pink-border) !important;
  }
  
  /* Discount badge - simplify */
  body.single-product .bt-custom-product-page .bt-discount-badge {
    background: transparent !important;
    border: 1px solid var(--bt-pink-border) !important;
  }
  
  /* Gallery badges - keep minimal (they're decorative) */
  body.single-product .bt-custom-product-page .bt-badge {
    background: rgba(255, 255, 255, 0.9) !important;
    /* Keep backdrop blur for readability */
  }
}

/* =========================
   DESKTOP: NO CHANGES
   All card styling preserved above 768px
   ========================= */