/*
  Global ecommerce layout normalization (structure-only)
  - Keeps each theme’s visual identity (colors, fonts, sizes)
  - Normalizes containers, alignment, responsive wrapping, and spacing
  - Avoids hardcoded pixel widths except safe min/max
  - Targets common header patterns used across themes
*/

:root {
  /* Safe max width for centered content areas (header/nav/banner) */
  --ecom-max-width: 1200px;
  --ecom-side-pad: 12px;
}

/* Center the main header row content inside a max-width container */
header.mobile-header > .row.align-items-center,
header.mobile-header > .row.g-0.align-items-center,
header.mobile-header > .ecom-header-main {
  max-width: min(var(--ecom-max-width), 92vw);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ecom-side-pad);
  padding-right: var(--ecom-side-pad);
}

/* Ensure any nav row under header aligns to the same container grid */
header.mobile-header [class*="nav-row"],
header.mobile-header .ecom-nav-container {
  max-width: min(var(--ecom-max-width), 92vw);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ecom-side-pad);
  padding-right: var(--ecom-side-pad);
}

/* Shipping / free-shipping banners when present */
.shipping-banner-wrap,
header.mobile-header .shipping-banner-wrap,
header + .shipping-banner-wrap,
header.mobile-header + .shipping-banner-wrap {
  max-width: min(var(--ecom-max-width), 92vw);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ecom-side-pad);
  padding-right: var(--ecom-side-pad);
}

/* Improve flex behavior so items do not stretch too far apart on desktop */
header.mobile-header .logo-header,
header.mobile-header .logo-sec {
  min-width: 120px; /* safe min for logos; theme still controls height/actual image */
}

/* Treat middle search area as a flexible region that can shrink without overflow */
header.mobile-header .industrial-search-container,
header.mobile-header .outdoor-search-container,
header.mobile-header .search-container,
header.mobile-header .search-form,
header.mobile-header .ecom-search-wrap {
  min-width: 0; /* allow input to shrink */
  flex: 1 1 420px; /* prominent search on desktop, but can shrink */
}

/* Make input groups behave well in tight spaces */
header.mobile-header .search-form .input-group,
header.mobile-header .ecom-search-wrap .input-group {
  width: 100%;
}

/* Avoid vertical misalignment across header items */
header.mobile-header .action-container .d-flex,
header.mobile-header .users-wrap .d-flex {
  align-items: center;
}

/* Prevent header-induced horizontal overflow on any theme */
header.mobile-header {
  overflow-x: clip; /* modern safe alternative to hidden for RTL awareness */
}

/* Keep nav compact and aligned; allow wrapping gracefully */
header.mobile-header nav.navbar .navbar-nav {
  flex-wrap: wrap;
  gap: 0.25rem;
}

/* Tablet adjustments */
@media (max-width: 991.98px) {
  header.mobile-header > .row.align-items-center,
  header.mobile-header > .row.g-0.align-items-center,
  header.mobile-header [class*="nav-row"] {
    padding-left: 10px;
    padding-right: 10px;
  }

  header.mobile-header .search-form,
  header.mobile-header .ecom-search-wrap {
    padding-top: .25rem;
    padding-bottom: .25rem;
  }
}

/* Mobile: preserve compact spacing and existing behavior */
@media (max-width: 575.98px) {
  header.mobile-header > .row.align-items-center,
  header.mobile-header > .row.g-0.align-items-center,
  header.mobile-header [class*="nav-row"] {
    padding-left: 8px;
    padding-right: 8px;
  }

  /* Keep header compact; let search be usable without overflowing */
  header.mobile-header .search-form input[type="text"],
  header.mobile-header .ecom-search-wrap input[type="text"] {
    min-width: 0;
  }
}