/* =========================================================
   99-responsive.css — BeautyTrouvailles Responsive Overrides
   Version: 3.0 — Consolidated Breakpoints
   
   This file contains any final responsive adjustments that
   didn't fit cleanly into component files.
   
   Breakpoints:
   - Desktop: 992px+
   - Tablet: 768px - 991px
   - Mobile: 521px - 767px  
   - Small Mobile: 520px and below
   ========================================================= */

/* =========================
   TABLET (768px - 991px)
   ========================= */
@media (max-width: 991px) and (min-width: 768px) {
  /* Gallery and info side by side but tighter */
  .bt-custom-product-page .bt-product-grid {
    gap: var(--bt-space-5);
  }
  
  /* Slightly smaller section padding */
  .bt-custom-product-page {
    --bt-section-pad: clamp(16px, 3vw, 28px);
  }
}

/* =========================
   MOBILE (below 768px)
   ========================= */
@media (max-width: 767px) {
  /* Tighter container padding */
  .bt-custom-product-page {
    --bt-container-pad: 16px;
  }
  
  /* Spacing handled by 05-fullwidth-mobile.css */
  
  /* Ensure text doesn't get too small */
  .bt-custom-product-page .bt-product-title {
    font-size: clamp(22px, 5vw, 32px);
  }
  
  /* Timer units need to stay in one row */
  .bt-custom-product-page .bt-timer-row {
    flex-wrap: nowrap;
  }
}

/* =========================
   SMALL MOBILE (520px and below)
   ========================= */
@media (max-width: 520px) {
  /* Tightest container padding */
  .bt-custom-product-page {
    --bt-container-pad: 14px;
    --bt-card-padding: var(--bt-space-4);
  }
  
  /* All cards get consistent padding */
  .bt-custom-product-page .bt-price-section,
  .bt-custom-product-page .bt-stock-section,
  .bt-custom-product-page .bt-features-section,
  .bt-custom-product-page .bt-cart-section,
  .bt-custom-product-page .bt-urgency-block,
  .bt-custom-product-page .btp-trust-section,
  .bt-custom-product-page .bt-payment-section {
    padding: var(--bt-space-4);
  }
  
  /* Smaller price display */
  .bt-custom-product-page .bt-price-current {
    font-size: 26px;
  }
  
  /* Compact rating bar */
  .bt-custom-product-page .bt-rating-bar {
    gap: var(--bt-space-2);
  }
  
  .bt-custom-product-page .bt-sold-badge {
    margin-left: 0;
    margin-top: var(--bt-space-2);
  }
  
  /* Full width sold badge on very small screens */
  .bt-custom-product-page .bt-rating-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  
  /* Ensure buttons remain touch-friendly */
  .bt-custom-product-page .bt-btn {
    min-height: 52px;
  }
}

/* =========================
   EXTRA SMALL (360px and below)
   ========================= */
@media (max-width: 360px) {
  .bt-custom-product-page {
    --bt-container-pad: 12px;
  }
  
  .bt-custom-product-page .bt-product-title {
    font-size: 20px;
  }
  
  .bt-custom-product-page .bt-price-current {
    font-size: 24px;
  }
  
  /* Single column for everything */
  .bt-custom-product-page .bt-secondary-actions,
  .bt-custom-product-page .btp-trust-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================
   LANDSCAPE MOBILE
   ========================= */
@media (max-height: 500px) and (orientation: landscape) {
  /* Reduce vertical spacing for landscape phones */
  .bt-custom-product-page .bt-product-main {
    padding-block: var(--bt-space-3);
  }
  
  .bt-custom-product-page .bt-product-info > * + * {
    margin-top: var(--bt-space-3);
  }
}

/* =========================
   HOVER MEDIA QUERY
   Only apply hover effects on devices that support it
   ========================= */
@media (hover: none) {
  /* Show quick add buttons always on touch devices */
  .bt-custom-product-page .bt-quick-add {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Remove hover lift effects that feel janky on touch */
  .bt-custom-product-page .bt-product-card:hover {
    transform: none;
  }
  
  .bt-custom-product-page .bt-product-card:active {
    transform: scale(0.98);
  }
}

/* =========================
   PRINT STYLES
   ========================= */
@media print {
  .bt-custom-product-page .bt-live-bar,
  .bt-custom-product-page .bt-sticky-cart,
  .bt-custom-product-page .bt-lightbox,
  .bt-custom-product-page .bt-share-modal,
  .bt-custom-product-page .bt-urgency-block,
  .bt-custom-product-page .bt-btn-whatsapp,
  .bt-custom-product-page .bt-secondary-actions,
  .bt-custom-product-page .bt-quick-add {
    display: none !important;
  }
  
  .bt-custom-product-page .bt-product-grid {
    display: block;
  }
  
  .bt-custom-product-page .bt-gallery {
    max-width: 50%;
    float: left;
    margin-right: 20px;
  }
}