/* ==========================================================================
   Layout Fixes - Simple Full Width Implementation
   ========================================================================== */

.content-layout {
    width: 100%;
    max-width: 100%;
}

.product-content {
    width: 100%;
    max-width: 100%;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Default: Desktop */
    gap: 1.5rem;
    margin-top: 1rem;
}

/* Tablet: 3 columns */
@media (max-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobile: 2 columns */
@media (max-width: 640px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
} 

/* === UNIFORM LINK WOOCOMMERCE OVERRIDES (2025-07) === */

/* Stop Salient pushing sort dropdown to the page footer */
.product-controls .woocommerce-ordering,
.woocommerce-ordering {
  position: static !important;
  float: none !important;
  margin: 0 !important;
}

/* Retire deprecated search bar until markup gone everywhere */
.search-control { display: none !important; }

/* === KIT BUILDER LAYOUT FIX - GLOBAL (2025-01) === */

/*
 * Problem: Kit Builder widget renders at full viewport width, which causes
 * Salient's fullWidthSections() to miscalculate sibling row widths.
 *
 * Solution: JavaScript removes full-width-section/full-width-content classes
 * from sibling rows so Salient skips them. CSS then styles the marked rows.
 * This works on ANY page with Kit Builder (detected via body.has-kitbuilder).
 */

/* 1. Prevent horizontal scrollbar on pages with Kit Builder */
body.has-kitbuilder {
  overflow-x: hidden !important;
}

/* 2. Contain overflow at key container levels */
body.has-kitbuilder .main-content,
body.has-kitbuilder #ajax-content-wrap,
body.has-kitbuilder .container-wrap {
  overflow-x: clip !important;
  max-width: 100% !important;
}

/* 3. Style rows that had full-width classes removed by JS */
body.has-kitbuilder .kb-was-full-width-section,
body.has-kitbuilder .kb-was-full-width-content {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: auto !important;
  transform: none !important;
}

/* 4. Kit Builder row - break out to full viewport width */
body.has-kitbuilder .kitbuilder-row {
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 5. Ensure Kit Builder content fills the row */
body.has-kitbuilder .kitbuilder-row > .span_12,
body.has-kitbuilder .kitbuilder-row > .vc_column_container {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}

/* 6. Fallback for any rows marked as processed but not specifically classed */
body.has-kitbuilder [data-kb-processed="true"]:not(.kitbuilder-row) {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: auto !important;
}