/* ZooMag layout adaptation candidate, 2026-09-30.
 * Final footer sheet after zm-responsive-stability-r106.css.
 * Preserve native mobile mounts, drawers, search/cart events and product data.
 */

/* One page scroller. Let HTML/body viewport propagation work normally.
 * X:clip + Y:visible does not turn body into a second scroll container.
 * Native drawer state and inline overflow locks are deliberately excluded.
 */
html:not(.zm-mobile-cart-open):not(.zm-mobile-menu-open):not(.navbar-menu-active):not(.mobile-search-active):not(.modal-open):not([style*="overflow"]) {
  overflow: visible !important;
}
html body.zm-storefront-r19:not(.zm-mobile-cart-open):not(.zm-mobile-menu-open):not(.navbar-menu-active):not(.mobile-search-active):not(.modal-open):not([style*="overflow"]) {
  height: auto !important;
  min-height: 100vh !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* Existing named overlays still own the background lock, including any
 * implementation that adds its state to only HTML or only body.
 */
html.zm-mobile-cart-open,
html.zm-mobile-menu-open,
html.navbar-menu-active,
html.mobile-search-active,
html.modal-open,
html:has(> body.zm-mobile-cart-open),
html:has(> body.zm-mobile-menu-open),
html:has(> body.navbar-menu-active),
html:has(> body.mobile-search-active),
html:has(> body.modal-open) {
  overflow: hidden !important;
}

/* Stop grid/flex min-content from expanding these known page containers.
 * The brand/special rails keep their own native horizontal scrolling.
 */
html body.zm-storefront-r19 #common-home #content,
html body.zm-storefront-r19 #common-home .zm-home-specials-r19__rail-wrap,
html body.zm-storefront-r19 #common-home .zm-home-specials-r19__copy,
html body.zm-storefront-r19 #common-home .zm-home-specials-r27__actions,
html body.zm-storefront-r19 #common-home .zoomag-home-contact-block {
  min-width: 0 !important;
}

@media (min-width: 992px) {
  html body.zm-storefront-r19 .zoomag_main_header_block {
    min-height: 0 !important;
    padding-block: 16px !important;
  }
  html body.zm-storefront-r19 .zoomag_main_header_block .zoomag_header_layout {
    display: grid !important;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) minmax(180px, 220px) !important;
    grid-template-areas: "logo search cart" !important;
    align-items: center !important;
    gap: clamp(16px, 1.5vw, 24px) !important;
    min-height: 112px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  html body.zm-storefront-r19 .zoomag_main_header_block .zoomag_logo_section,
  html body.zm-storefront-r19 .zoomag_main_header_block .zoomag_search_section,
  html body.zm-storefront-r19 .zoomag_main_header_block .zoomag_cart_section {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Original logo and coin artwork stay intact; scale their existing stage. */
  html body.zm-storefront-r19 .zoomag_main_header_block .zoomag_logo_with_coins {
    --zm-coin-logo-size: 112px !important;
    --zm-coin-left-stage: 20px !important;
    --zm-coin-stage-gap: 6px !important;
    --zm-coin-stage-width: calc(var(--zm-coin-logo-size) + var(--zm-coin-left-stage)) !important;
    flex: 0 0 var(--zm-coin-stage-width) !important;
    width: var(--zm-coin-stage-width) !important;
    min-width: var(--zm-coin-stage-width) !important;
    max-width: var(--zm-coin-stage-width) !important;
    height: var(--zm-coin-logo-size) !important;
  }
  html body.zm-storefront-r19 .zoomag_main_header_block .zoomag_logo_block > a {
    gap: 14px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  html body.zm-storefront-r19 .zoomag_main_header_block .zoomag_logo_text {
    min-width: 0 !important;
    max-width: 194px !important;
  }
  html body.zm-storefront-r19 .zoomag_main_header_block .zoomag_logo_title {
    font-size: clamp(30px, 2.2vw, 36px) !important;
    line-height: 1.1 !important;
  }
  html body.zm-storefront-r19 .zoomag_main_header_block .zoomag_logo_subtitle {
    font-size: 13px !important;
    line-height: 1.35 !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  /* A compact consistent search and cart height. Keep existing event hooks. */
  html body.zm-storefront-r19 .zoomag_main_header_block .zoomag_search_section,
  html body.zm-storefront-r19 .zoomag_main_header_block .zoomag_search_block,
  html body.zm-storefront-r19 .zoomag_main_header_block .zoomag-magic-search,
  html body.zm-storefront-r19 .zoomag_main_header_block .magic-search-form {
    min-height: 0 !important;
    height: auto !important;
  }
  html body.zm-storefront-r19 .zoomag_main_header_block .magic-search-input-wrapper {
    height: 58px !important;
    min-height: 58px !important;
    padding: 4px !important;
  }
  html body.zm-storefront-r19 .zoomag_main_header_block .magic-search-input {
    height: 48px !important;
    min-height: 48px !important;
    padding-inline: 16px 116px !important;
    font-size: 16px !important;
    line-height: 48px !important;
  }
  html body.zm-storefront-r19 .zoomag_main_header_block .magic-search-btn {
    top: 6px !important;
    right: 6px !important;
    bottom: 6px !important;
    width: 100px !important;
    min-width: 100px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding-inline: 12px !important;
    font-size: 15px !important;
  }

  html body.zm-storefront-r19 .zoomag_main_header_block .zoomag_cart_block,
  html body.zm-storefront-r19 .zoomag_main_header_block .floating-cart-wrapper,
  html body.zm-storefront-r19 .zoomag_main_header_block .cloud-cart-container,
  html body.zm-storefront-r19 .zoomag_main_header_block .cloud-cart-btn {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  html body.zm-storefront-r19 .zoomag_main_header_block .cloud-cart-btn {
    min-height: 58px !important;
    height: 58px !important;
    padding: 8px 12px !important;
    gap: 8px !important;
    border-radius: 16px !important;
  }
  html body.zm-storefront-r19 .zoomag_main_header_block .cloud-cart-icon {
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
  }
  html body.zm-storefront-r19 .zoomag_main_header_block .cloud-cart-price {
    min-width: 0 !important;
    font-size: 14px !important;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  html body.zm-storefront-r19 .zoomag_main_header_block .zoomag_header_layout {
    grid-template-columns: 280px minmax(0, 1fr) 190px !important;
    gap: 16px !important;
    min-height: 96px !important;
  }
  html body.zm-storefront-r19 .zoomag_main_header_block .zoomag_logo_with_coins {
    --zm-coin-logo-size: 96px !important;
  }
  html body.zm-storefront-r19 .zoomag_main_header_block .zoomag_logo_block > a {
    gap: 12px !important;
  }
  html body.zm-storefront-r19 .zoomag_main_header_block .zoomag_logo_title {
    font-size: 30px !important;
  }
}

@media (max-width: 767.98px) {
  html body.zm-storefront-r19 #common-home .zoomag-home-contact-value,
  html body.zm-storefront-r19 #common-home .zoomag-home-contact-subtitle,
  html body.zm-storefront-r19 #common-home .zm-home-specials-r19__copy h2 {
    overflow-wrap: anywhere !important;
  }
  html body.zm-storefront-r19 #common-home .zm-home-specials-r27__actions a {
    min-height: 44px !important;
    white-space: normal !important;
  }
}

/* Revision 2: measured category pagination and footer gutter containment.
 * Keep all pagination links and existing footer content/column breakpoints.
 */
html body.zm-storefront-r19 #product-category .zoomag-pagination,
html body.zm-storefront-r19 #product-category .pagination {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
html body.zm-storefront-r19 #product-category .pagination {
  display: flex !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  row-gap: 8px !important;
}
html body.zm-storefront-r19 #product-category .pagination > li {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
html body.zm-storefront-r19 .main-site-footer > .container {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
html body.zm-storefront-r19 .main-site-footer > .container > .row {
  box-sizing: border-box !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
}
html body.zm-storefront-r19 .main-site-footer > .container > .row > * {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
}