/* Category + Below-Main Structural Alignment (extracted from inline leakage) */
:root {
  /* Fallbacks if not already defined elsewhere */
  --content-width: 100%;
  --global-content-width: 100%;
  --left-sidebar-w: 260px;
  --left-sidebar-gap: 16px;
  --hero-band-inset: 0px;
  --side-percent: 0%;
  --page-edge-padding: clamp(18px, 4vw, 36px);
  --topband-radius: 18px;
  --topband-shadow: 0 4px 12px rgba(0,0,0,0.06);
  --topband-padding-y: 12px;
  --topband-padding-x: 18px;
  --vendor-logo-height: 48px;
  --vendor-logo-gap: 16px;
}

@media (max-width: 1200px){
  :root {
    --content-width: 100%;
    --side-percent: 0%;
    --page-edge-padding: clamp(16px, 5vw, 28px);
    --global-content-width: 100%;
  }
}

@media (max-width: 1024px){
  :root {
    --content-width: 100%;
    --side-percent: 0;
    --page-edge-padding: clamp(14px, 6vw, 22px);
    --global-content-width: 100%;
  }
}

@media (max-width: 768px){
  :root {
    --page-edge-padding: clamp(12px, 7vw, 18px);
    --global-content-width: 100%;
  }
}

/* Center outer sections like hero row, with 5% left offset for category */
.logo-strip-section { width: var(--content-width); margin-left:auto; margin-right:auto; box-sizing:border-box; }

html body .top-bar,
html body .main-header-wrapper,
html body .main-header-wrapper-v2,
html body .main-nav,
html body header.main-header-wrapper,
html body header.main-header-wrapper-v2 {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  padding-left: var(--page-edge-padding) !important;
  padding-right: var(--page-edge-padding) !important;
  box-sizing: border-box !important;
  position: relative !important;
}

html body .top-bar .container,
html body .top-bar .container-fluid,
html body .main-header-wrapper .container,
html body .main-header-wrapper .container-fluid,
html body .main-header-wrapper-v2 .container,
html body .main-header-wrapper-v2 .container-fluid,
html body .main-nav .container,
html body .main-nav .container-fluid,
html body .top-bar .row,
html body .main-header-wrapper .row,
html body .main-header-wrapper-v2 .row,
html body .main-nav .row,
html body .header-layout-v2 {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: var(--page-edge-padding) !important;
  padding-right: var(--page-edge-padding) !important;
  box-sizing: border-box !important;
}

/* Force exact positioning - override all other CSS */
html body .category-section,
html body .category-section.category-section,
body .category-section,
.category-section { 
  width: 100% !important; 
  margin-left: 0 !important; 
  margin-right: 0 !important; 
  position: static !important;
  transform: none !important;
  left: auto !important;
  max-width: none !important;
  box-sizing: border-box !important; 
}

html body .category-section .category-section-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: var(--topband-padding-y) clamp(18px, 5%, 36px) !important;
  box-sizing: border-box !important;
}

html body .category-section .category-navigation-grid {
    width: 100% !important;
    max-width: 100% !important;
}

/* Inner band aligned to hero column (subtract sidebar + gaps) */
.category-section .category-section-wrapper,
.logo-strip-section .vendor-support-container {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: var(--topband-padding-y) clamp(18px, 5%, 36px) !important;
  box-sizing: border-box !important;
}

@media (max-width:991px){
  .category-section, .logo-strip-section { width: 100%; margin-left:0; margin-right:0; }
  .category-section .category-section-wrapper, .logo-strip-section .vendor-support-container { width:100%; margin-left:0; }
}

  .category-section .category-section-wrapper, .logo-strip-section .vendor-support-container { background:#fff; border-radius: var(--topband-radius); box-shadow: var(--topband-shadow); overflow:hidden; }
.category-section .category-section-wrapper::before { display:none !important; }

/* Below-main row width sync - REMOVED width restriction to allow grid layout */
/* .below-main-row { width: var(--content-width) !important; margin-left:auto; margin-right:auto; } */
.below-main-row .ads-left-sidebar { margin:0 !important; }
.below-main-row .main-content-wrapper { margin:0 !important; padding:0 !important; background:transparent; }
.below-main-row .main-content-wrapper .content-balanced-container,
.below-main-row .main-content-wrapper #main-content { width:100% !important; margin:0 !important; padding:0 !important; }

/* Strip inner container padding except swiper */
.below-main-row .main-content-wrapper .container:not(.swiper-container):not(.main-hero-slider-container),
.below-main-row .main-content-wrapper .container-fluid:not(.swiper-container):not(.main-hero-slider-container),
.below-main-row .main-content-wrapper .section-balanced-wrapper,
.below-main-row .main-content-wrapper .product-section-container,
.below-main-row .main-content-wrapper [class*="-container"]:not(.swiper-container):not(.main-hero-slider-container){ padding:0 !important; margin:0 !important; max-width:none !important; width:100% !important; box-sizing:border-box; }

/* Vendor logos strip */
.vendor-support-section h2 { background: linear-gradient(90deg,#667eea,#764ba2); color:#fff; border-radius: 6px; padding:14px 20px; font-weight:700; margin:0 0 16px 0; }
/* vendor-logos-grid styling moved to vendor-logos-center-fix.css for proper JIB-style layout */

/* Swiper / product layout base resets */
.swiper, .swiper-container, .swiper-wrapper, .swiper-slide { box-sizing:border-box; }
.swiper-container, .swiper { width:100%; }
.swiper-wrapper { display:flex; }
.swiper-slide { flex:0 0 auto; }

/* Generic product grids/carousels */
.product-grid, .product-carousel, .product-slider, .product-list { width:100%; box-sizing:border-box; }
.product-carousel .swiper-wrapper, .product-slider .swiper-wrapper { padding:0 12px; }

/* Responsive vendor logo size */
@media (max-width:768px){ :root { --vendor-logo-height:40px; --vendor-logo-gap:12px; } }
@media (max-width:576px){ :root { --vendor-logo-height:36px; --vendor-logo-gap:10px; } }
