/* =========================================================
   10-layout.css — BeautyTrouvailles Layout System
   Version: 3.0 — Clean Grid Architecture
   
   Contents:
   1. Main Product Layout
   2. Two-Column Grid
   3. Breadcrumb
   4. Section Spacing
   ========================================================= */

/* =========================
   1. MAIN PRODUCT LAYOUT
   ========================= */
.bt-custom-product-page .bt-product-main {
  padding-block: var(--bt-section-pad);
  padding-top: var(--bt-space-5);
}

/* =========================
   2. TWO-COLUMN GRID
   Stable proportions, no collapse
   ========================= */
.bt-custom-product-page .bt-product-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--bt-gap-lg);
  align-items: start;
  width: 100%;
}

/* Ensure children don't overflow */
.bt-custom-product-page .bt-gallery,
.bt-custom-product-page .bt-product-info {
  width: 100%;
  min-width: 0;
}

/* =========================
   3. BREADCRUMB
   ========================= */
.bt-custom-product-page .bt-breadcrumb {
  padding: var(--bt-space-4) 0;
  font-size: var(--bt-text-sm);
  color: var(--bt-muted);
  border-bottom: 1px solid var(--bt-border);
  background: var(--bt-bg-soft);
}

.bt-custom-product-page .bt-breadcrumb .bt-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bt-space-2);
}

.bt-custom-product-page .bt-breadcrumb a {
  font-weight: 600;
  color: var(--bt-muted);
  transition: color var(--bt-transition-fast);
}

.bt-custom-product-page .bt-breadcrumb a:hover {
  color: var(--bt-pink);
}

.bt-custom-product-page .bt-breadcrumb .separator {
  display: flex;
  align-items: center;
  color: var(--bt-border-strong);
}

.bt-custom-product-page .bt-breadcrumb .separator svg {
  width: 14px;
  height: 14px;
}

.bt-custom-product-page .bt-breadcrumb .current {
  font-weight: 700;
  color: var(--bt-navy);
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================
   4. SECTION SPACING
   Consistent rhythm throughout
   ========================= */
.bt-custom-product-page section {
  position: relative;
}

.bt-custom-product-page .bt-upsells-section,
.bt-custom-product-page .bt-related-section,
.bt-custom-product-page .bt-recently-viewed {
  padding-block: var(--bt-section-pad);
  background: var(--bt-bg-soft);
  /* Content visibility for below-fold sections */
  content-visibility: auto;
  contain-intrinsic-size: 600px;
}

.bt-custom-product-page .bt-upsells-section + .bt-related-section,
.bt-custom-product-page .bt-related-section + .bt-recently-viewed {
  padding-top: 0;
}

/* =========================
   RESPONSIVE LAYOUT
   ========================= */

/* Tablet */
@media (max-width: 991px) {
  .bt-custom-product-page .bt-product-grid {
    grid-template-columns: 1fr;
    gap: var(--bt-space-6);
  }
  
  .bt-custom-product-page .bt-gallery {
    max-width: 600px;
    margin-inline: auto;
  }
}

/* Mobile */
@media (max-width: 767px) {
  /* Spacing handled by 05-fullwidth-mobile.css */
  .bt-custom-product-page .bt-breadcrumb .current {
    max-width: 120px;
  }
}

@media (max-width: 520px) {
  .bt-custom-product-page .bt-breadcrumb {
    padding: var(--bt-space-3) 0;
    font-size: var(--bt-text-xs);
  }
}