/* ==========================================================================
   fix-product.css — per-area graphic fix layer (loaded LAST, overrides shared sheets)
   Add !important / higher specificity here. DO NOT edit woocommerce.css etc.
   Hardcoded hex only — NO css variables.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RELATED / UP-SELLS GRID COLLAPSE  (root cause of "crammed trash" bottom)
   --------------------------------------------------------------------------
   WooCommerce renders related products as <section class="related products">.
   That double-class matches the generic ".products" grid rule in woocommerce.css
   (".woocommerce .products { display:grid; grid-template-columns:repeat(4,1fr) }"),
   which turns the SECTION itself into a 4-column grid. The inner <ul.products>
   is then squished into ONE 265px column, and ITS 4 cards collapse to ~44px each
   -> everything touching. Reset ONLY the <section> wrapper to block; the inner
   ul.products is already a correct responsive grid and now spans full width.
   This is <section>-scoped so it can never affect the <ul>.              */
section.related.products,
section.up-sells,
.woocommerce section.related,
.woocommerce section.up-sells,
.bwc-related-products section.related,
.bwc-related-products section.up-sells {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* The related ul.products is now the real grid. Pin full width + tidy edges.
   NOTE: grid-template-columns + gap are set DESKTOP-ONLY below so the mobile
   responsive rules in woocommerce.css (2-col @ <=992px, 15px gap @ <=600px)
   still apply — this sheet loads last and would otherwise override them. */
.bwc-related-products ul.products,
.woocommerce .related.products ul.products,
.woocommerce .up-sells ul.products {
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

@media (min-width: 993px) {
  .bwc-related-products ul.products,
  .woocommerce .related.products ul.products,
  .woocommerce .up-sells ul.products {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
  }
}

/* Cards: prevent grid-item overflow, fill the cell height so rows align. */
.bwc-related-products ul.products > .product-card,
.bwc-related-products .related.products .product-card,
.bwc-related-products .up-sells .product-card {
  min-width: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   2. SECTION BREATHING ROOM  (tabs <-> related shouldn't collide)
   -------------------------------------------------------------------------- */
.bwc-product-tabs-section {
  padding: 0 0 72px !important;
}

.bwc-related-products,
.bwc-related-products.bwc-dark-products {
  padding-top: 72px !important;
  padding-bottom: 96px !important;
}

/* The WC "Related products" h2 is hidden via woocommerce.css; keep it gone so
   only our "You May Also Like" heading shows, with consistent spacing. */
.bwc-related-products .related.products > h2,
.bwc-related-products .up-sells > h2 {
  display: none !important;
  margin: 0 !important;
}

.bwc-related-products .bwc-section-heading {
  margin-top: 0 !important;
  margin-bottom: 44px !important;
}

/* --------------------------------------------------------------------------
   3. RELATED CARD POLISH  (clean luxury look on the dark bg)
   -------------------------------------------------------------------------- */
.bwc-related-products .product-card {
  background-color: #0a1a12 !important;
  border: 1px solid #1a1a1a !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.bwc-related-products .product-card-body {
  padding: 18px 18px 20px !important;
}

.bwc-related-products .product-card-title {
  font-size: 0.95rem !important;
  line-height: 1.4 !important;
  margin-bottom: 10px !important;
}

.bwc-related-products .product-card-title a {
  color: #ffffff !important;
}

.bwc-related-products .product-card-title a:hover {
  color: #c5a059 !important;
}

.bwc-related-products .product-card-price {
  color: #c5a059 !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
}

/* Add-to-cart button inside related cards — outline gold, full width. */
.bwc-related-products .product-card .button,
.bwc-related-products .product-card .product-card-actions .button,
.bwc-related-products .product-card-actions a.add_to_cart_button {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 14px 0 0 !important;
  text-align: center !important;
  background-color: transparent !important;
  border: 1px solid #c5a059 !important;
  color: #c5a059 !important;
  padding: 10px 14px !important;
  font-size: 0.72rem !important;
  text-transform: uppercase !important;
  letter-spacing: 1.4px !important;
  font-weight: 600 !important;
  border-radius: 0 !important;
  transition: background-color 0.25s ease, color 0.25s ease !important;
}

.bwc-related-products .product-card .button:hover,
.bwc-related-products .product-card .product-card-actions .button:hover,
.bwc-related-products .product-card-actions a.add_to_cart_button:hover {
  background-color: #c5a059 !important;
  color: #031c12 !important;
}

/* --------------------------------------------------------------------------
   4. TABS PANEL READABILITY + SPACING
   -------------------------------------------------------------------------- */
.woocommerce div.product .woocommerce-tabs .panel {
  padding: 40px 0 8px !important;
  color: #cccccc !important;
  line-height: 1.8 !important;
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
  color: #ffffff !important;
  margin-bottom: 20px !important;
}

.woocommerce div.product .woocommerce-tabs .panel p {
  color: #cccccc !important;
  max-width: 860px;
}