/*
 * Cross-template storefront responsive hardening.
 * Loaded after per-theme responsive.css for all six themes.
 *
 * Desktop compression band 1200–1399 CSS px keeps the full desktop header on
 * compact laptops (e.g. 1366×768) without switching to the mobile chrome.
 */

body[class*="storefront-theme-"] {
  min-width: 0;
}

body[class*="storefront-theme-"] .wrapper,
body[class*="storefront-theme-"] .main-panel,
body[class*="storefront-theme-"] .main-panel > .content,
body[class*="storefront-theme-"] .page-inner {
  max-width: 100%;
  min-width: 0;
}

body[class*="storefront-theme-"] .page-inner {
  overflow-x: clip;
}

/* Do NOT set a global `height: auto` here: storefront heroes, product cards and
   banners rely on `height: 100%` + `object-fit: cover` inside ratio containers.
   Forcing height:auto stretches those images. Only cap intrinsic-sized media. */
body[class*="storefront-theme-"] iframe {
  max-width: 100%;
}

/*
 * Centered desktop container with real page margins.
 * Earlier responsiveness work forced `.container` to near full width
 * (`min(1400px, calc(100vw - 24px))`) in this file AND in every theme
 * responsive.css, which removed the left/right page gutters on laptops.
 * Restore a centered, capped container so content keeps side margins while
 * staying close to the design width (1320) so the header still fits.
 */
@media (min-width: 1200px) {
  body[class*="storefront-theme-"] .container {
    max-width: min(1320px, calc(100vw - 96px));
  }
}

body[class*="storefront-theme-"] .row > [class*="col"] {
  min-width: 0;
}

/*
 * Center tab bars in title-center sections (Featured Products, Tab Section, etc.).
 * common/style.css uses margin-inline: auto on .tabs-navigation-scroll .nav; each
 * theme responsive.css resets margin-inline: 0 for horizontal scroll, which
 * left-aligns tabs on merchant storefronts (body.storefront-theme-*).
 */
body[class*="storefront-theme-"] .section-title.title-center .tabs-navigation.tabs-navigation-scroll {
  justify-content: center;
  text-align: center;
}

body[class*="storefront-theme-"] .section-title.title-center .tabs-navigation-scroll .nav {
  margin-inline: auto;
}

/* Override rigid rules from style.css / header-1.css */
body[class*="storefront-theme-"] .main-nav .menu-left .menu-item .btn {
  min-width: 0;
  max-width: 100%;
}

body[class*="storefront-theme-"] .header-search-form {
  width: min(500px, 100%);
  min-width: 0;
  max-width: 100%;
}

body[class*="storefront-theme-"] .menu .cart-dropdown {
  min-width: 0;
  width: min(450px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  box-sizing: border-box;
}

body[class*="storefront-theme-"] .menu .category-dropdown .mega-dropdown {
  width: min(992px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
}

/* Header top: long email / phone strings */
body[class*="storefront-theme-"] .header .header-top .header-left ul,
body[class*="storefront-theme-"] .header .header-top .header-right .menu,
body[class*="storefront-theme-"] .header .header-top .header-right ul {
  flex-wrap: wrap;
  row-gap: 6px;
}

body[class*="storefront-theme-"] .header .header-top .header-left ul > li,
body[class*="storefront-theme-"] .header .header-top .header-right .menu > li {
  min-width: 0;
  overflow-wrap: anywhere;
}

body[class*="storefront-theme-"] .header .header-top .header-center p {
  overflow-wrap: anywhere;
}

/* Header middle text: header-top is hidden below 1200px (see header-1.css). */
body[class*="storefront-theme-"] .header .storefront-header-middle-text-mobile {
  display: none;
  padding: 8px 12px;
  text-align: center;
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  background: var(--storefront-surface, var(--color-white, #fff));
  color: var(--storefront-text-body, inherit);
  border-bottom: 1px solid var(--border-2, rgba(0, 0, 0, 0.08));
}

@media (max-width: 1199.98px) {
  body[class*="storefront-theme-"] .header .storefront-header-middle-text-mobile {
    display: block;
  }
}

/* Fashion / furniture: primary nav lives in header-middle center */
body[class*="storefront-theme-"] .header .header-middle .header-center .menu.mobile-nav,
body[class*="storefront-theme-"] .header .header-middle .header-center .menu-right {
  min-width: 0;
  overflow: visible;
}

body[class*="storefront-theme-"] .header .header-middle .header-center .nav-link {
  overflow-wrap: anywhere;
}

/* Shared desktop header middle row (logo + search/nav + icons) */
body[class*="storefront-theme-"] .header .header-middle > .container,
body[class*="storefront-theme-"] .header .header-middle .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

body[class*="storefront-theme-"] .header .header-middle .header-left,
body[class*="storefront-theme-"] .header .header-middle .header-right {
  flex: 0 0 auto;
  min-width: 0;
}

body[class*="storefront-theme-"] .header .header-middle .header-center {
  flex: 1 1 auto;
  min-width: 0;
}

body[class*="storefront-theme-"] .header .header-middle .header-right .menu {
  display: flex;
  align-items: center;
  min-width: 0;
}

body[class*="storefront-theme-"] .header .header-bottom .main-nav {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: visible;
}

body[class*="storefront-theme-"] .header .header-bottom .menu.mobile-nav {
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
}

/*
 * Logo containment (all widths). style.css pins `.header-left .brand-logo`
 * to width:100px, but the logo <img> renders at its natural width and spills
 * out of that box, overlapping the search/nav. Let the box size to the logo
 * (bounded by max-width) and keep the image inside it.
 */
body[class*="storefront-theme-"] .header .brand-logo {
  width: auto;
  max-width: 160px;
  flex: 0 0 auto;
  min-width: 0;
}

body[class*="storefront-theme-"] .header .brand-logo > a {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  line-height: 0;
}

body[class*="storefront-theme-"] .header .brand-logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 58px;
}

/* Inner pages (shop, cart, checkout, product, account) */
body[class*="storefront-theme-"] .shopping-area .item-list,
body[class*="storefront-theme-"] .shopping-area .shopping-table {
  max-width: 100%;
}

body[class*="storefront-theme-"] .cart-page .cart-container {
  max-width: min(1140px, 100%);
}

body[class*="storefront-theme-"] .cart-page .cart-item-product,
body[class*="storefront-theme-"] .cart-page .cart-item-actions {
  min-width: 0;
}

body[class*="storefront-theme-"] .shopping-table .product-desc,
body[class*="storefront-theme-"] .shopping-table .product-desc .product-desc-wrapper {
  width: auto;
  max-width: 100%;
  min-width: 0;
}

body[class*="storefront-theme-"] .compare-area {
  overflow-x: auto;
  max-width: 100%;
}

body[class*="storefront-theme-"] .compare-area .table {
  width: 100%;
  min-width: min(600px, 100%);
}

body[class*="storefront-theme-"] .sidebar-widget-area {
  min-width: 0;
  max-width: 100%;
}

body[class*="storefront-theme-"] .product-single-default .product-single-details,
body[class*="storefront-theme-"] .product-single-default .product-single-gallery {
  min-width: 0;
}

body[class*="storefront-theme-"] .product-single-default .product-single-details .product-action .product-list-group {
  flex-wrap: wrap;
}

body[class*="storefront-theme-"] .authentication-area .auth-form,
body[class*="storefront-theme-"] .page-title-area ul {
  min-width: 0;
  max-width: 100%;
}

/* Guest checkout CTA: theme link colors override .checkout-guest in inner-pages.css */
body[class*="storefront-theme-"] .authentication-area a.checkout-guest {
  color: var(--storefront-action-text, #ffffff);
  text-decoration: none;
}

body[class*="storefront-theme-"] .authentication-area a.checkout-guest:is(:hover, :focus) {
  color: var(--color-primary);
}

body[class*="storefront-theme-"] .breadcrumb-area .breadcrumb {
  flex-wrap: wrap;
  row-gap: 4px;
}

body[class*="storefront-theme-"] .breadcrumb-area .breadcrumb-item {
  overflow-wrap: anywhere;
}

/*
 * Compact desktop band (1200–1399px): compress chrome, keep desktop header.
 * Covers 1366×768 at 100% zoom and similar laptop widths.
 */
@media (max-width: 1399.98px) and (min-width: 1200px) {
  body[class*="storefront-theme-"] .header .header-middle {
    margin-bottom: 16px;
  }

  body[class*="storefront-theme-"] .header .header-top .header-center p {
    font-size: 12px;
    line-height: 1.35;
    padding-inline: 8px;
  }

  body[class*="storefront-theme-"] .header .header-top .header-left ul > li,
  body[class*="storefront-theme-"] .header .header-top .header-right .menu > li > a {
    font-size: 13px;
  }

  body[class*="storefront-theme-"] .header .brand-logo {
    max-width: 150px;
  }

  /* High specificity to beat per-theme `.brand-logo img { max-width: NNNpx }`
     band rules so the image can never exceed its (capped) container. */
  body[class*="storefront-theme-"] .header .header-middle .brand-logo img,
  body[class*="storefront-theme-"] .header .header-bottom .brand-logo img,
  body[class*="storefront-theme-"] .header .brand-logo img {
    max-width: 100%;
    max-height: 46px;
  }

  body[class*="storefront-theme-"] .header-search-form {
    width: clamp(280px, 34vw, 460px);
  }

  body[class*="storefront-theme-"] .header-search-form .select-custom {
    flex: 0 1 30%;
    min-width: 96px;
  }

  body[class*="storefront-theme-"] .header-search-form .select-custom .nice-select {
    padding-inline: 10px 22px;
    font-size: 13px;
  }

  body[class*="storefront-theme-"] .header-search-form .search-input input {
    font-size: 14px;
    height: 42px;
  }

  /* Account / wishlist row: keep labels, just tighten spacing slightly. */
  body[class*="storefront-theme-"] .header .header-middle .header-right .menu .menu-item:not(:last-child) {
    margin-inline-end: 10px;
  }

  /* Fashion / furniture: inline primary nav in header-middle */
  body[class*="storefront-theme-"] .header .header-middle .header-center .nav-link {
    font-size: 13px;
    padding-inline: 6px;
    white-space: nowrap;
  }

  body[class*="storefront-theme-"] .header .header-middle .header-center .menu-right {
    gap: 0;
  }

  /* 3-row themes: bottom nav row. Keep the "Browse All Categories" label;
     only trim padding so it fits alongside the primary nav. */
  body[class*="storefront-theme-"] .header .header-bottom .menu-left {
    padding-inline-end: 10px;
  }

  body[class*="storefront-theme-"] .header .header-bottom .menu-left .btn {
    min-width: 0;
    padding: 10px 16px;
    gap: 6px;
  }

  body[class*="storefront-theme-"] .header .header-bottom .nav-link {
    font-size: 13px;
    padding-inline: 6px;
    white-space: nowrap;
  }

  body[class*="storefront-theme-"] .header .header-bottom .main-nav {
    gap: 8px;
  }

  /* Shop with sidebar at lg: sort bar must wrap */
  body[class*="storefront-theme-"] .product-sort-area {
    flex-wrap: wrap;
    gap: 10px;
  }

  body[class*="storefront-theme-"] .product-sort-area .product-sort-list {
    flex-wrap: wrap;
    gap: 10px;
  }

  body[class*="storefront-theme-"] .product-sort-area .product-sort-list .serch-product {
    min-width: 0;
    flex: 1 1 150px;
  }
}

/* Shop sidebar + grid: lg breakpoint is tight before tablet stack */
@media (max-width: 1199.98px) and (min-width: 992px) {
  body[class*="storefront-theme-"] .product-sort-area {
    flex-wrap: wrap;
    gap: 12px;
  }

  body[class*="storefront-theme-"] .product-sort-area .product-sort-list {
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
  }

  body[class*="storefront-theme-"] .product-sort-area .product-sort-list .serch-product {
    min-width: 0;
    flex: 1 1 160px;
  }

  body[class*="storefront-theme-"] .product-sort-area .view-and-filter {
    flex-wrap: wrap;
  }
}

@media (max-width: 991.98px) {
  body[class*="storefront-theme-"] .shopping-table tbody .quantity-input {
    width: min(180px, 100%);
  }

  body[class*="storefront-theme-"] .shopping-area .form-block {
    min-width: 0;
  }
}

@media (max-width: 767.98px) {
  body[class*="storefront-theme-"] .container {
    max-width: calc(100vw - 24px);
  }

  body[class*="storefront-theme-"] .p-30 {
    padding: 20px;
  }
}

@media (max-width: 575.98px) {
  body[class*="storefront-theme-"] .container {
    width: 100%;
    max-width: 100%;
    padding-inline: 16px;
  }

  body[class*="storefront-theme-"] .row {
    --bs-gutter-x: 20px;
  }
}

/*
 * Kids theme: logo sits in header-center (search left, icons right).
 * Equal flex on the side columns centers the logo. Generic header-middle
 * rules above assume logo-left / search-center (manti, grocery, etc.).
 */
body.storefront-theme-kids .header .header-middle .header-left,
body.storefront-theme-kids .header .header-middle .header-right {
  flex: 1 1 0;
}

body.storefront-theme-kids .header .header-middle .header-center {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  text-align: center;
}