/* ZooMag r106 — Mobile Core Stabilization
   Final responsive layer loaded after the historical r4-r21 cascade.
   Scope: layout stability, readable mobile cards, touch targets and contrast.
   Does not change desktop commerce logic or SEO markup. */

:root {
  --zm106-green: #176b43;
  --zm106-green-strong: #0f5635;
  --zm106-ink: #17263a;
  --zm106-muted: #59697a;
  --zm106-edge: clamp(12px, 3.8vw, 18px);
  --zm106-radius: 18px;
}

/* Keep media intrinsically inside their boxes on every route. */
html body img,
html body svg,
html body video,
html body iframe { max-width: 100%; }
html body img { height: auto; }

/* Restore visible keyboard focus over legacy outline:none rules. */
html body :is(a,button,input,select,textarea,[tabindex]):focus-visible {
  outline: 3px solid #f47d2a !important;
  outline-offset: 3px !important;
}

/* Strong green surfaces always use white text. */
html body :is(.zm-public-btn--primary,.petz-btn-primary,.zoomag-mobile-toggle,.zoohub-buy-button,.zoohub-add-to-cart):not(:disabled) {
  color: #fff !important;
}

/* Blog cards: use the visual area instead of showing a tiny image in a large frame. */
#zm-blog-r21 .zm-blog-card__media {
  min-height: 260px;
  padding: 0 !important;
  aspect-ratio: 16 / 10 !important;
}
#zm-blog-r21 .zm-blog-card__media-frame {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#zm-blog-r21 .zm-blog-card__image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: none !important;
}
#zm-blog-r21 .zm-blog-card:hover .zm-blog-card__image { transform: scale(1.025); }
#zm-blog-r21 .zm-blog-card__fallback {
  width: 100%;
  height: 100%;
  min-height: 260px !important;
}
#zm-blog-r21 .zm-blog-card__fallback--litter {
  background: linear-gradient(145deg,#176b43,#27855a) !important;
  color: #fff !important;
}
#zm-blog-r21 .zm-blog-card__fallback--litter b,
#zm-blog-r21 .zm-blog-card__fallback--litter span { color: #fff !important; }

@media (max-width: 991.98px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  html body * { min-width: 0; }
  html body :is(input,select,textarea) { font-size: 16px !important; }
  html body :is(h1,h2,h3,h4,p,a,span,strong,small,li) { overflow-wrap: break-word; }

  /* One predictable viewport container, regardless of older 100vw/calc rules. */
  .zoomag_main_container,
  .zoomag_main_container > main,
  main,
  #content,
  .container,
  .container-fluid,
  .zm-public-page,
  .zm-public-page__container,
  #common-home,
  #product-category,
  .zoohub-product-showcase {
    max-width: 100% !important;
  }

  /* Header: stable 1-column command bar + full-width search. */
  .zoomag_top_panel { display: none !important; }
  .zoomag_main_header_block { overflow: visible !important; }
  .zoomag_main_header_block > .container {
    width: 100% !important;
    padding-inline: var(--zm106-edge) !important;
  }
  body .zoomag_header_layout {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    grid-template-areas: "command" "search" !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  .zoomag-mobile-commandbar {
    grid-area: command !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0,1fr) auto !important;
    gap: 7px !important;
    width: 100% !important;
  }
  .zoomag-mobile-brand { overflow: hidden; }
  .zoomag-mobile-brand__name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .zoomag-mobile-actions { gap: 3px !important; }
  .zoomag_logo_section,
  .zoomag_cart_section { display: none !important; }
  .zoomag_search_section {
    grid-area: search !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  .zoomag_search_section :is(form,.search-form,.zoomag-search-form,#search) {
    width: 100% !important;
    max-width: 100% !important;
  }
  .zoomag_search_section input[type="search"],
  .zoomag_search_section input[type="text"] {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important;
  }

  /* Drawers must fit real phone height, including mobile browser bars. */
  :is(.mobile-menu-overlay,.mobile-menu-panel,.zoomag-mobile-menu,.zm-search-overlay,.zoomag-search-overlay) {
    max-width: 100vw !important;
    max-height: 100dvh !important;
  }

  /* HOME — no child may force viewport width; rails remain touch-scrollable. */
  html body #common-home {
    width: 100% !important;
    padding-inline: var(--zm106-edge) !important;
    overflow: hidden !important;
  }
  #common-home > *,
  #common-home :is(.zm-home-slot-r19--banners,.zm-home-specials-r19,.zm-home-articles-r34,.zoomag-banner-shell) {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }
  #common-home .zoomag-main-hero-slider,
  #common-home .zoomag-main-hero-slider :is(.zoomag-banner-stage,.zoomag-banner-carousel,.carousel-inner,.carousel-item,.zoomag-banner-slide,.zoomag-banner-media,.zoomag-banner-figure,.zoomag-banner-link) {
    width: 100% !important;
    max-width: 100% !important;
  }
  #common-home .zoomag-main-hero-slider .zoomag-banner-image {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
  #common-home .zm-home-specials-r19__rail,
  #common-home .zm-home-articles-r34__grid {
    max-width: 100% !important;
    overscroll-behavior-inline: contain;
  }

  /* CATEGORY — remove the cramped 2-column phone cards from r305. */
  #product-category.zoomag-category-page {
    width: 100% !important;
    padding-inline: var(--zm106-edge) !important;
    overflow: hidden !important;
  }
  #product-category > .row,
  #product-category .zoomag-category-content,
  #product-category .zoomag-products-section { width: 100% !important; max-width: 100% !important; }
  #product-category .zoomag-category-header { padding: 14px !important; }
  #product-category .zoomag-category-title-wrapper {
    display: grid !important;
    grid-template-columns: auto minmax(0,1fr) !important;
    align-items: center !important;
  }
  #product-category .zoomag-category-title {
    font-size: clamp(1.35rem,6.5vw,1.9rem) !important;
    overflow-wrap: anywhere;
  }
  #product-category .zoomag-filter-sidebar-container {
    position: relative !important;
    top: auto !important;
    z-index: 20 !important;
  }
  #product-category #product-list,
  body.zm-final-grid-mode #product-category #product-list,
  body #product-category #product-list.zm-final-grid,
  body #product-category #product-list.zoomag-products-grid {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 12px !important;
  }
  #product-category .zoomag-product-item,
  #product-category .petz-product-card { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
  #product-category .petz-product-image { max-width: 100% !important; object-fit: contain !important; }
  #product-category .petz-product-name { overflow-wrap: anywhere; }

  /* PRODUCT — force the desktop two-column jungle into one stable column. */
  .zoohub-product-showcase .zoohub-container {
    width: 100% !important;
    padding-inline: var(--zm106-edge) !important;
  }
  .zoohub-product-showcase .zoohub-layout,
  .zoohub-product-showcase .zoohub-main,
  .zoohub-product-showcase .zoohub-product-jungle {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 14px !important;
  }
  .zoohub-product-showcase :is(.zoohub-gallery-den,.zoohub-info-sanctuary,.zoohub-tabs-savannah,.zoohub-tabs-content) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .zoohub-product-showcase .zoohub-image-frame {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
  }
  .zoohub-product-showcase .zoohub-gallery-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
  .zoohub-product-showcase .zoohub-product-title {
    font-size: clamp(1.35rem,6vw,1.85rem) !important;
    overflow-wrap: anywhere;
  }
  .zoohub-product-showcase :is(.zoohub-tabs-content,.zoohub-tab-pane,[data-zm-product-description]) {
    overflow-wrap: anywhere;
  }
  .zoohub-product-showcase table { width: 100% !important; max-width: 100% !important; }
  .zoohub-product-showcase :is(.table-responsive,.zoohub-table-wrap) { max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* BLOG INDEX — one readable column and large, useful thumbnails. */
  #zm-blog-r21 .zm-public-page__container {
    width: 100% !important;
    padding-inline: var(--zm106-edge) !important;
  }
  #zm-blog-r21 .zm-page-hero { padding: 18px !important; }
  #zm-blog-r21 .zm-page-hero h1 { font-size: clamp(1.65rem,8vw,2.25rem) !important; }
  #zm-blog-r21 .zm-blog-tools {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 12px !important;
    padding: 14px !important;
  }
  #zm-blog-r21 .zm-blog-tools > * { width: 100% !important; }
  #zm-blog-r21 .zm-public-btn { width: 100% !important; min-height: 48px !important; }
  #zm-blog-r21 .zm-blog-grid {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 16px !important;
  }
  #zm-blog-r21 .zm-blog-card { border-radius: 18px !important; }
  #zm-blog-r21 .zm-blog-card__media {
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
  }
  #zm-blog-r21 .zm-blog-card__fallback { min-height: 100% !important; }
  #zm-blog-r21 .zm-blog-card__body { padding: 16px !important; }
  #zm-blog-r21 .zm-blog-card h2 { font-size: clamp(1.15rem,5.3vw,1.4rem) !important; }
  #zm-blog-r21 .zm-blog-card p { font-size: .95rem !important; line-height: 1.55 !important; }

  /* ARTICLE DETAIL — media and long content never create horizontal scroll. */
  #cms-blog-r41,
  #cms-blog-r41 .zm-blog-r41-page,
  #cms-blog-r41 .zm-blog-r41-page__inner,
  #cms-blog-r41 .zm-blog-r41-page__content { width: 100% !important; max-width: 100% !important; }
  #cms-blog-r41 .zm-blog-r41-page__cover-stage {
    width: 100% !important;
    height: auto !important;
    min-height: 220px !important;
    aspect-ratio: 4 / 3 !important;
  }
  #cms-blog-r41 .zm-blog-r41-page__cover-image { width: 100% !important; height: 100% !important; object-fit: contain !important; }
  #cms-blog-r41 :is(pre,table) { max-width: 100%; }
  #cms-blog-r41 pre { overflow-x: auto; }
  #cms-blog-r41 table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Public pages, cart/account and forms: keep cards and controls inside the viewport. */
  :is(#information-contact,#information-sitemap,#product-manufacturer,#checkout-cart,#account-login,#account-register,#account-account) {
    max-width: 100% !important;
  }
  :is(#information-contact,#information-sitemap,#product-manufacturer,#checkout-cart,#account-login,#account-register,#account-account) :is(input,select,textarea,button) {
    max-width: 100% !important;
  }

  /* FOOTER — predictable stack and no clipped phone numbers. */
  .main-site-footer { width: 100% !important; overflow: hidden; }
  .main-site-footer .container { width: 100% !important; padding-inline: var(--zm106-edge) !important; }
  .main-site-footer .row { row-gap: 14px !important; }
  .main-site-footer [class*="col-"] { min-width: 0 !important; }
  .main-site-footer :is(.footer-contacts-section,.footer-info-section,.footer-services-section) { height: auto !important; }
  .main-site-footer :is(.phone-number,.nav-link,.working-hours,.metro-station) { overflow-wrap: anywhere; }
  .main-site-footer .social-media-section { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; }

  /* Floating UI must not cover primary mobile content. */
  #zoomag-ai-assistant.zoomag-ai-assistant {
    right: max(8px,env(safe-area-inset-right,0px)) !important;
    max-width: calc(100vw - 16px) !important;
  }
  #zoomag-ai-assistant :is(.zm-ai-panel,.zm-ai-feedback) {
    width: auto !important;
    max-width: calc(100vw - 88px) !important;
  }
}

@media (max-width: 575.98px) {
  /* Real phones get one product per row: two 170px cards were the main readability regression. */
  #product-category #product-list,
  body.zm-final-grid-mode #product-category #product-list,
  body #product-category #product-list.zm-final-grid,
  body #product-category #product-list.zoomag-products-grid {
    grid-template-columns: minmax(0,1fr) !important;
  }
  #product-category .petz-product-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  #product-category .petz-image-section,
  #product-category .petz-content-section { width: 100% !important; min-width: 0 !important; }
  #product-category .petz-image-container { width: 100% !important; min-height: 220px !important; }
  #product-category .petz-action-buttons { gap: 8px !important; }

  #product-category .zoomag-controls-panel .row.g-3 { grid-template-columns: minmax(0,1fr) !important; }
  #product-category .zm-category-brands__grid { grid-template-columns: minmax(0,1fr) !important; }

  .zoohub-product-showcase .zoohub-facts-grid,
  .zoohub-product-showcase .zoohub-conversion-trust,
  .zoohub-product-showcase .zoohub-variant-switches__grid {
    grid-template-columns: minmax(0,1fr) !important;
  }
  .zoohub-product-showcase .zoohub-tab-btn { min-width: 118px !important; }

  #common-home .zm-home-specials-r19__rail,
  #common-home .zm-home-articles-r34__grid {
    grid-auto-columns: minmax(250px,88%) !important;
  }

  #zm-blog-r21 .zm-blog-card__media { aspect-ratio: 16 / 11 !important; }
}

@media (max-width: 420px) {
  :root { --zm106-edge: 10px; }
  .zoomag-mobile-commandbar { grid-template-columns: 42px minmax(0,1fr) auto !important; gap: 5px !important; }
  .zoomag-mobile-commandbar .zoomag_mobile_menu_slot,
  .zoomag-mobile-commandbar .mobile-menu-toggle { width: 42px !important; min-width: 42px !important; height: 42px !important; }
  .zoomag-mobile-brand__mark { display: none !important; }
  .zoomag-mobile-action { width: 39px !important; height: 39px !important; }
  .zoomag-mobile-brand__name { font-size: 1rem !important; }

  #product-category .petz-image-container { min-height: 205px !important; }

  #cms-blog-r41 .zm-blog-r41-page__cover-stage { min-height: 190px !important; }
}

@media (prefers-reduced-motion: reduce) {
  #zm-blog-r21 .zm-blog-card,
  #zm-blog-r21 .zm-blog-card__image { transition: none !important; }
}

/* ========================================================================== */
/* ZooMag r106.1 — Mobile Header Recovery                                     */
/* Screenshot-driven fix: compact visible command bar, 48px search, no empty  */
/* legacy menu shell, explicit light storefront on forced-dark mobile UAs.     */
/* ========================================================================== */

html {
  color-scheme: only light !important;
  background: #ffffff !important;
}
html body,
html body .zoomag_main_container {
  background: #ffffff !important;
}

@media (max-width: 991.98px) {
  /* Header must occupy only its real content height. */
  html body .zoomag_main_header_block,
  html body.zm-storefront-r1 .zoomag_main_header_block,
  html body.zm-storefront-r2 .zoomag_main_header_block {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 7px 0 8px !important;
    overflow: visible !important;
    background: #ffffff !important;
    border: 0 !important;
    box-shadow: 0 1px 0 rgba(23,107,67,.10) !important;
  }
  html body .zoomag_main_header_block > .container {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding-inline: var(--zm106-edge) !important;
    background: #ffffff !important;
  }
  html body .zoomag_header_layout,
  html body.zm-storefront-r1 .zoomag_header_layout,
  html body.zm-storefront-r2 .zoomag_header_layout {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    grid-template-rows: 44px 48px !important;
    grid-template-areas: "command" "search" !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: 99px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
  }

  /* Command bar: never disappear into browser dark mode. */
  html body .zoomag-mobile-commandbar {
    grid-area: command !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0,1fr) auto !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: #ffffff !important;
    color: #18352a !important;
  }
  html body .zoomag_mobile_menu_slot {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
  }
  html body #mobileMenuToggle,
  html body .zoomag_mobile_menu_slot .mobile-menu-toggle,
  html body .zoomag-mobile-commandbar .zm-classic-nav__toggle {
    position: static !important;
    inset: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #176b43 !important;
    border-radius: 12px !important;
    background: #176b43 !important;
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none !important;
    transform: none !important;
  }
  html body .zoomag-mobile-brand {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    color: #173b2c !important;
    background: transparent !important;
    text-decoration: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  html body .zoomag-mobile-brand__mark { color: #176b43 !important; }
  html body .zoomag-mobile-brand__name {
    display: block !important;
    color: #173b2c !important;
    -webkit-text-fill-color: #173b2c !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }
  html body .zoomag-mobile-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  html body .zoomag-mobile-action {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 39px !important;
    min-width: 39px !important;
    height: 39px !important;
    min-height: 39px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #d9e5de !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #176b43 !important;
    -webkit-text-fill-color: #176b43 !important;
    box-shadow: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Search: a real compact field, not a 100+px decorative capsule. */
  html body .zoomag_search_section,
  html body .zoomag_search_block,
  html body .zoomag_search_section .zoomag-magic-search,
  html body .zoomag_search_section .magic-search-form {
    grid-area: search !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    height: 48px !important;
    max-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    overflow: visible !important;
  }
  html body .zoomag_search_section .magic-search-input-wrapper {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    height: 48px !important;
    max-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #cfded5 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;
    transform: none !important;
    overflow: hidden !important;
  }
  html body .zoomag_search_section .magic-search-input-wrapper::before,
  html body .zoomag_search_section .magic-search-input-wrapper::after {
    display: none !important;
    content: none !important;
  }
  html body .zoomag_search_section .magic-search-input {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    height: 46px !important;
    max-height: 46px !important;
    margin: 0 !important;
    padding: 0 76px 0 15px !important;
    border: 0 !important;
    border-radius: 13px !important;
    outline: 0 !important;
    background: #ffffff !important;
    background-image: none !important;
    color: #17263a !important;
    -webkit-text-fill-color: #17263a !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 46px !important;
    animation: none !important;
    transform: none !important;
    box-shadow: none !important;
  }
  html body .zoomag_search_section .magic-search-input::placeholder {
    background: none !important;
    color: #65756d !important;
    -webkit-text-fill-color: #65756d !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    opacity: 1 !important;
    animation: none !important;
  }
  html body .zoomag_search_section .magic-loupe,
  html body .zoomag_search_section .orbit-paws,
  html body .zoomag_search_section .floating-particles { display: none !important; }
  html body .zoomag_search_section .magic-search-btn {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    bottom: auto !important;
    left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 66px !important;
    min-width: 66px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #176b43 !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    animation: none !important;
    transform: none !important;
  }

  /* Old menu host remains in DOM, but it must consume zero layout height after
     the hamburger is moved into the command bar. Drawer/overlay stays fixed. */
  html body .zoomag_main_content {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }
  html body .zoomag_main_content > .main-menu,
  html body .zoomag_main_content .zm-classic-nav {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }
  html body .zoomag_main_content .zm-classic-nav__inner {
    min-height: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
  }
  html body .zoomag_main_content .zm-classic-nav__desktop-panel,
  html body .zoomag_main_content .zm-classic-nav__quick-links,
  html body .zoomag_main_content .zm-classic-nav__service {
    display: none !important;
  }
  html body .zoomag_main_content .menu-overlay,
  html body .zoomag_main_content .zm-classic-drawer {
    height: auto !important;
    max-height: 100dvh !important;
  }

  /* Light-storefront anchors for mobile browsers with forced dark webpages. */
  html body :is(#common-home,#product-category,#zm-blog-r21,#cms-blog-r41,.zm-public-page,.zoohub-product-showcase,.main-site-footer) {
    color-scheme: only light !important;
  }
  html body :is(#common-home,#product-category,#zm-blog-r21,#cms-blog-r41,.zm-public-page) {
    background-color: #ffffff !important;
  }
}

@media (max-width: 420px) {
  html body .zoomag_header_layout {
    grid-template-rows: 42px 48px !important;
    height: 97px !important;
  }
  html body .zoomag-mobile-commandbar { height: 42px !important; min-height: 42px !important; max-height: 42px !important; }
  html body .zoomag_mobile_menu_slot,
  html body #mobileMenuToggle { width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; }
  html body .zoomag-mobile-brand__mark { display: none !important; }
  html body .zoomag-mobile-brand__name { font-size: 16px !important; }
  html body .zoomag-mobile-action { width: 37px !important; min-width: 37px !important; height: 37px !important; min-height: 37px !important; }
  html body .zoomag_search_section .magic-search-input { padding-right: 66px !important; }
  html body .zoomag_search_section .magic-search-btn { width: 56px !important; min-width: 56px !important; font-size: 12px !important; }
}

/* ========================================================================== */

/* ========================================================================== */
/* ZooMag r106.3 — Detached Mobile Header Root                               */
/* Real-device fix: move all visible phone header UI outside legacy header   */
/* hosts. Menu/search overlays are portaled to body, then old top/header/nav */
/* wrappers are removed from mobile layout entirely.                         */
/* ========================================================================== */

@media (max-width: 768px) {
  html.zm1063-mobile-mounted,
  html.zm1063-mobile-mounted body {
    color-scheme: only light !important;
    overflow-x: hidden !important;
  }

  html.zm1063-mobile-mounted body .zoomag_main_container {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #fff !important;
  }

  /* The legacy wrappers are no longer visual hosts on phones. Their mobile
     drawer/search overlay have already been portaled to body by r106.3 JS. */
  html.zm1063-mobile-mounted body .zoomag_top_panel,
  html.zm1063-mobile-mounted body .zoomag_main_header_block,
  html.zm1063-mobile-mounted body .zoomag_main_content {
    display: none !important;
    position: static !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  /* New root-level shell: always normal-flow, never absolute/sticky. */
  html body .zm1063-mobile-shell {
    position: relative !important;
    inset: auto !important;
    z-index: 2100 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 46px 46px !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 110px !important;
    min-height: 110px !important;
    max-height: 110px !important;
    margin: 0 !important;
    padding: 6px 12px 10px !important;
    border: 0 !important;
    border-bottom: 1px solid #e4ece7 !important;
    background: #fff !important;
    box-shadow: 0 5px 16px rgba(19, 55, 39, .045) !important;
    overflow: visible !important;
    transform: none !important;
  }

  html body .zm1063-mobile-shell > .zoomag-mobile-commandbar {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 7px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: #fff !important;
    overflow: visible !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  html body .zm1063-mobile-shell .zoomag_mobile_menu_slot,
  html body .zm1063-mobile-shell #mobileMenuToggle,
  html body .zm1063-mobile-shell .mobile-menu-toggle {
    position: static !important;
    inset: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 13px !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  html body .zm1063-mobile-shell .zoomag-mobile-brand {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 3px !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  html body .zm1063-mobile-shell .zoomag-mobile-brand__mark { display: none !important; }
  html body .zm1063-mobile-shell .zoomag-mobile-brand__name {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    color: #173b2c !important;
    -webkit-text-fill-color: #173b2c !important;
    font-size: 18px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
  }

  html body .zm1063-mobile-shell .zoomag-mobile-actions {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    width: auto !important;
    min-width: 0 !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  html body .zm1063-mobile-shell .zoomag-mobile-action {
    position: relative !important;
    inset: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #d8e4dc !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #176b43 !important;
    -webkit-text-fill-color: #176b43 !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  html body .zm1063-mobile-search-trigger {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    margin: 0 !important;
    padding: 0 52px 0 15px !important;
    border: 1px solid #cbdcd2 !important;
    border-radius: 14px !important;
    background: #f8fbf9 !important;
    color: #5b6c63 !important;
    -webkit-text-fill-color: #5b6c63 !important;
    font: inherit !important;
    font-size: 16px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    text-align: left !important;
    box-shadow: none !important;
    transform: none !important;
    overflow: hidden !important;
    cursor: pointer !important;
  }
  html body .zm1063-mobile-search-trigger::after {
    content: "" !important;
    position: absolute !important;
    right: 8px !important;
    top: 7px !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 32px !important;
    height: 32px !important;
    border: 9px solid #178451 !important;
    border-radius: 10px !important;
    background: #178451 !important;
    box-shadow: inset 0 0 0 2px #fff !important;
    transform: none !important;
  }
  html body .zm1063-mobile-search-trigger::before {
    content: "" !important;
    position: absolute !important;
    z-index: 2 !important;
    right: 15px !important;
    top: 16px !important;
    width: 7px !important;
    height: 7px !important;
    border: 2px solid #fff !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  /* Portaled overlays live directly under body, independent of hidden hosts. */
  html body > #mobile-magic-overlay,
  html body > #menuOverlay {
    z-index: 2147483000 !important;
  }
  html body > #mobile-magic-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
  }

  /* Remove all legacy mobile header/search residue after portal mount. */
  html.zm1063-mobile-mounted body .zoomag_search_section,
  html.zm1063-mobile-mounted body .zoomag_search_block,
  html.zm1063-mobile-mounted body .zoomag-magic-search,
  html.zm1063-mobile-mounted body .magic-search-form,
  html.zm1063-mobile-mounted body .magic-search-input-wrapper {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* The new shell is normal-flow; first content block must not be pulled under it. */
  html.zm1063-mobile-mounted body #common-home,
  html.zm1063-mobile-mounted body main,
  html.zm1063-mobile-mounted body #content {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

@media (max-width: 390px) {
  html body .zm1063-mobile-shell {
    padding-inline: 8px !important;
  }
  html body .zm1063-mobile-shell > .zoomag-mobile-commandbar {
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    gap: 4px !important;
  }
  html body .zm1063-mobile-shell .zoomag_mobile_menu_slot,
  html body .zm1063-mobile-shell #mobileMenuToggle,
  html body .zm1063-mobile-shell .mobile-menu-toggle {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
  }
  html body .zm1063-mobile-shell .zoomag-mobile-action {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
  }
  html body .zm1063-mobile-shell .zoomag-mobile-actions { gap: 3px !important; }
  html body .zm1063-mobile-shell .zoomag-mobile-brand__name { font-size: 17px !important; }
}

/* ========================================================================== */
/* ZooMag r106.4 — Root Mobile Header Flow                                   */
/* The phone header is a first-level body block. The complete historical     */
/* header container is removed from phone layout after its interactive       */
/* overlays and alert host are portaled out.                                 */
/* ========================================================================== */

@media (max-width: 768px) {
  html.zm1064-mobile-mounted,
  html.zm1064-mobile-mounted body {
    color-scheme: only light !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Nothing from the historical header may reserve mobile geometry. */
  html.zm1064-mobile-mounted body > .zoomag_main_container {
    display: none !important;
    position: static !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  /* The only visible phone header. Normal document flow: no overlaying hero. */
  html.zm1064-mobile-mounted body > .zm1064-mobile-shell {
    position: relative !important;
    inset: auto !important;
    z-index: 2100 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 46px 46px !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 116px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 8px 12px 8px !important;
    border: 0 !important;
    border-bottom: 1px solid #e4ece7 !important;
    background: #ffffff !important;
    box-shadow: 0 4px 14px rgba(19,55,39,.045) !important;
    overflow: visible !important;
    transform: none !important;
  }

  html.zm1064-mobile-mounted body > .zm1064-mobile-shell > .zoomag-mobile-commandbar {
    position: relative !important;
    inset: auto !important;
    z-index: auto !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 7px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: #ffffff !important;
    overflow: visible !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  html.zm1064-mobile-mounted body > .zm1064-mobile-shell .zoomag_mobile_menu_slot,
  html.zm1064-mobile-mounted body > .zm1064-mobile-shell #mobileMenuToggle,
  html.zm1064-mobile-mounted body > .zm1064-mobile-shell .mobile-menu-toggle {
    position: static !important;
    inset: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 13px !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  html.zm1064-mobile-mounted body > .zm1064-mobile-shell .zm-classic-nav__toggle-text {
    display: none !important;
  }

  html.zm1064-mobile-mounted body > .zm1064-mobile-shell .zoomag-mobile-brand {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 3px !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  html.zm1064-mobile-mounted body > .zm1064-mobile-shell .zoomag-mobile-brand__mark { display: none !important; }
  html.zm1064-mobile-mounted body > .zm1064-mobile-shell .zoomag-mobile-brand__name {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    color: #173b2c !important;
    -webkit-text-fill-color: #173b2c !important;
    font-size: 18px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
  }

  html.zm1064-mobile-mounted body > .zm1064-mobile-shell .zoomag-mobile-actions {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    width: auto !important;
    min-width: 0 !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  html.zm1064-mobile-mounted body > .zm1064-mobile-shell .zoomag-mobile-action {
    position: relative !important;
    inset: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #d8e4dc !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #176b43 !important;
    -webkit-text-fill-color: #176b43 !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  html.zm1064-mobile-mounted body > .zm1064-mobile-shell .zm1064-mobile-search-trigger {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    margin: 0 !important;
    padding: 0 50px 0 15px !important;
    border: 1px solid #cbdcd2 !important;
    border-radius: 14px !important;
    background: #f8fbf9 !important;
    color: #52655b !important;
    -webkit-text-fill-color: #52655b !important;
    font: inherit !important;
    font-size: 16px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    text-align: left !important;
    box-shadow: none !important;
    transform: none !important;
    overflow: hidden !important;
    cursor: pointer !important;
  }
  html.zm1064-mobile-mounted body > .zm1064-mobile-shell .zm1064-mobile-search-trigger > i {
    position: absolute !important;
    right: 8px !important;
    top: 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    background: #178451 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 14px !important;
  }

  /* Portaled interactive layers remain usable after the legacy header is hidden. */
  html.zm1064-mobile-mounted body > #mobile-magic-overlay,
  html.zm1064-mobile-mounted body > #menuOverlay {
    z-index: 2147483000 !important;
  }
  html.zm1064-mobile-mounted body > #mobile-magic-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
  }

  /* Alerts are portaled too, but should not reserve permanent space. */
  html.zm1064-mobile-mounted body > #alert:empty { display: none !important; }
  html.zm1064-mobile-mounted body > #alert:not(:empty) {
    position: fixed !important;
    z-index: 2147482500 !important;
    top: 8px !important;
    right: 10px !important;
    left: 10px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }

  /* Content begins after the shell in ordinary flow; cancel historical pulls. */
  html.zm1064-mobile-mounted body #common-home,
  html.zm1064-mobile-mounted body #product-category,
  html.zm1064-mobile-mounted body .zoohub-product-showcase,
  html.zm1064-mobile-mounted body #zm-blog-r21,
  html.zm1064-mobile-mounted body main,
  html.zm1064-mobile-mounted body #content {
    position: relative !important;
    top: auto !important;
    inset-block-start: auto !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    transform: none !important;
  }
  html.zm1064-mobile-mounted body #common-home > .row { margin-top: 0 !important; }
  html.zm1064-mobile-mounted body #common-home .zoomag-home-hero-banner { margin-top: 10px !important; }
}

@media (max-width: 390px) {
  html.zm1064-mobile-mounted body > .zm1064-mobile-shell { padding-inline: 8px !important; }
  html.zm1064-mobile-mounted body > .zm1064-mobile-shell > .zoomag-mobile-commandbar {
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    gap: 4px !important;
  }
  html.zm1064-mobile-mounted body > .zm1064-mobile-shell .zoomag-mobile-action {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
  }
  html.zm1064-mobile-mounted body > .zm1064-mobile-shell .zoomag-mobile-actions { gap: 3px !important; }
  html.zm1064-mobile-mounted body > .zm1064-mobile-shell .zoomag-mobile-brand__name { font-size: 17px !important; }
}

/* ========================================================================== */
/* ZooMag r106.5 — Mobile Shell Explicit Grid Placement                       */
/* r106.4 detached the shell correctly, but historical storefront CSS still   */
/* gave .zoomag-mobile-commandbar `grid-area: mobile !important`. Reset every  */
/* placement axis so the shell is exactly: commandbar -> search -> content.    */
/* ========================================================================== */
@media (max-width: 768px) {
  html.zm1064-mobile-mounted body > .zm1064-mobile-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 46px 46px !important;
    grid-template-areas: "command" "search" !important;
    align-content: start !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    box-sizing: border-box !important;
    height: 108px !important;
    min-height: 108px !important;
    max-height: 108px !important;
    gap: 8px !important;
    padding: 4px 12px !important;
  }

  html.zm1064-mobile-mounted body > .zm1064-mobile-shell > .zoomag-mobile-commandbar {
    grid-area: command !important;
    grid-row: 1 / 2 !important;
    grid-column: 1 / 2 !important;
    order: 0 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    place-self: stretch !important;
    margin: 0 !important;
  }

  html.zm1064-mobile-mounted body > .zm1064-mobile-shell > .zm1064-mobile-search-trigger {
    grid-area: search !important;
    grid-row: 2 / 3 !important;
    grid-column: 1 / 2 !important;
    order: 0 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    place-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  html.zm1064-mobile-mounted body > .zm1064-mobile-shell > .zm1064-mobile-search-trigger > span {
    display: block !important;
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 44px) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    writing-mode: horizontal-tb !important;
    transform: none !important;
  }
}

@media (max-width: 390px) {
  html.zm1064-mobile-mounted body > .zm1064-mobile-shell {
    height: 108px !important;
    min-height: 108px !important;
    max-height: 108px !important;
    padding-inline: 8px !important;
  }
}

/* ========================================================================== */
/* ZooMag r106.6 — Mobile Drawer Portal Recovery                              */
/* r106.4 portals #menuOverlay from .zm-classic-nav into <body>. The classic   */
/* menu's panel geometry was scoped to `.main-menu.zm-classic-nav ...`, so     */
/* after the portal the overlay could become active while its drawer panel     */
/* lost the positioning/size rules. Re-state only the portal geometry here.   */
/* ========================================================================== */
@media (max-width: 991.98px) {
  html.zm1064-mobile-mounted body > #menuOverlay.zm-classic-drawer {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483600 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    transform: none !important;
  }

  html.zm1064-mobile-mounted body > #menuOverlay.zm-classic-drawer:not(.active) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html.zm1064-mobile-mounted body > #menuOverlay.zm-classic-drawer.active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html.zm1064-mobile-mounted body > #menuOverlay > .zm-classic-drawer__backdrop {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    background: rgba(17, 29, 22, .48) !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html.zm1064-mobile-mounted body > #menuOverlay > .menu-container.zm-classic-drawer__panel,
  html.zm1064-mobile-mounted body > #menuOverlay > .zm-classic-drawer__panel {
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    width: min(420px, 92vw) !important;
    min-width: 0 !important;
    max-width: 92vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    overflow-y: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    color: #26352d !important;
    box-shadow: 18px 0 50px rgba(17, 29, 22, .22) !important;
    translate: none !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html.zm1064-mobile-mounted body > #menuOverlay .zm-classic-drawer__header {
    flex: 0 0 auto !important;
  }

  html.zm1064-mobile-mounted body > #menuOverlay .zm-classic-drawer__body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }
}

/* ========================================================================== */
/* ZooMag r107 — Mobile Catalogue Polish                                      */
/* Stable post-r106.6 catalogue-only layer. No header/menu/template changes.  */
/* Goals: compact filter/control flow, touch-friendly subcategories, readable */
/* single-column phone product cards, no horizontal overflow or tiny actions. */
/* ========================================================================== */
@media (max-width: 767.98px) {
  /* Category canvas and breadcrumb: calm, edge-safe, no inherited wide gaps. */
  #product-category.zoomag-category-page {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 10px !important;
    overflow-x: clip !important;
  }
  #product-category > .zm-info-unique-breadcrumb-wrapper {
    margin: 4px 0 8px !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  #product-category .zm-ui-breadcrumbs,
  #product-category .zm-info-unique-breadcrumb {
    min-height: 42px !important;
    height: auto !important;
    padding: 6px 8px !important;
    gap: 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #product-category .zm-ui-breadcrumbs::-webkit-scrollbar,
  #product-category .zm-info-unique-breadcrumb::-webkit-scrollbar { display: none !important; }
  #product-category .zm-ui-breadcrumbs__link,
  #product-category .zm-info-unique-breadcrumb-link {
    min-height: 34px !important;
    padding: 7px 9px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  /* Filter stays a single entry point. When expanded, actions remain visible. */
  #product-category .zoomag-filter-sidebar-container {
    margin: 0 0 8px !important;
    z-index: 20 !important;
  }
  #product-category .zoomag-filter-sidebar {
    border-radius: 15px !important;
    box-shadow: 0 6px 18px rgba(29, 78, 55, .07) !important;
  }
  #product-category .zoomag-filter-header { padding: 5px !important; }
  #product-category .zoomag-mobile-toggle {
    min-height: 46px !important;
    height: 46px !important;
    padding-inline: 13px !important;
    color: #176b45 !important;
    -webkit-text-fill-color: #176b45 !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    touch-action: manipulation;
  }
  #product-category .zoomag-mobile-toggle::after {
    color: #607269 !important;
    font-size: 11px !important;
  }
  #product-category .zoomag-filter-panel.is-open {
    display: flex !important;
    flex-direction: column !important;
    max-height: min(72dvh, 620px) !important;
    overflow: hidden !important;
  }
  #product-category .zoomag-filter-panel.is-open .zoomag-filter-accordion-compact {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #product-category .zoomag-filter-panel.is-open .zoomag-filter-footer {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 2 !important;
    flex: 0 0 auto !important;
    background: rgba(255,255,255,.98) !important;
    border-top: 1px solid rgba(23,132,81,.12) !important;
    box-shadow: 0 -8px 18px rgba(29,78,55,.06) !important;
  }

  /* Heading: readable title, small category image, compact product count pill. */
  #product-category .zoomag-category-header {
    margin: 0 0 10px !important;
    padding: 13px 14px !important;
    border-radius: 16px !important;
    animation: none !important;
  }
  #product-category .zoomag-category-title-wrapper {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
  }
  #product-category .zoomag-category-title {
    min-width: 0 !important;
    margin: 0 !important;
    font-size: clamp(1.4rem, 6vw, 1.8rem) !important;
    line-height: 1.12 !important;
    font-weight: 900 !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
    animation: none !important;
    transform: none !important;
  }
  #product-category .zoomag-category-icon,
  #product-category .zoomag-category-thumb {
    width: 50px !important;
    min-width: 50px !important;
    height: 50px !important;
    max-height: 50px !important;
    border-radius: 13px !important;
  }
  #product-category .zoomag-category-stats {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 8px 0 0 !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    animation: none !important;
    transform: none !important;
    box-shadow: none !important;
  }
  #product-category .zoomag-category-stats .zoomag-stats-content {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
  }
  #product-category .zoomag-category-stats .zoomag-stats-subtitle { display: none !important; }
  #product-category .zoomag-category-stats .zoomag-stats-icon { font-size: 11px !important; }
  #product-category .zoomag-products-count { font-size: 12px !important; line-height: 1 !important; }

  /* Touch subcategory rails instead of long vertical walls before products. */
  #product-category :is(.zoomag-subcategories-section,.zm-seo-landings-r101,.zm-related-seo-landings-r102) {
    min-width: 0 !important;
    margin-block: 10px !important;
    overflow: hidden !important;
  }
  #product-category :is(.zoomag-subcategories-section,.zm-seo-landings-r101,.zm-related-seo-landings-r102) .zoomag-section-header {
    margin-bottom: 8px !important;
  }
  #product-category :is(.zoomag-subcategories-section,.zm-seo-landings-r101,.zm-related-seo-landings-r102) .zoomag-subcategories-title {
    font-size: 1rem !important;
    line-height: 1.2 !important;
  }
  #product-category :is(.zoomag-subcategories-section,.zm-seo-landings-r101,.zm-related-seo-landings-r102) .zoomag-subcategories-grid {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(220px, 82vw) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 2px 2px 7px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity !important;
    overscroll-behavior-inline: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
  }
  #product-category :is(.zoomag-subcategories-section,.zm-seo-landings-r101,.zm-related-seo-landings-r102) .zoomag-subcategory-card {
    min-width: 0 !important;
    min-height: 88px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 15px !important;
    scroll-snap-align: start !important;
    animation: none !important;
    transform: none !important;
  }
  #product-category .zoomag-subcategory-inner {
    min-height: 88px !important;
    padding: 11px !important;
  }
  #product-category .zoomag-subcategory-icon {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    font-size: 1.35rem !important;
    border-radius: 13px !important;
  }
  #product-category .zoomag-subcategory-name {
    font-size: 14px !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere !important;
  }
  #product-category .zm-subcategory-caption { font-size: 11px !important; line-height: 1.2 !important; }

  /* Sorting: no view/compare clutter; two useful controls when width permits. */
  #product-category .zoomag-controls-panel {
    margin: 10px 0 12px !important;
    padding: 9px !important;
    border-radius: 15px !important;
  }
  #product-category .zoomag-controls-panel > .row > :first-child,
  #product-category .zoomag-controls-panel .zoomag-view-control,
  #product-category .zoomag-view-toggle { display: none !important; }
  #product-category .zoomag-controls-panel .row.g-3 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 108px !important;
    gap: 8px !important;
    align-items: end !important;
    margin: 0 !important;
  }
  #product-category .zoomag-select-label {
    margin: 0 0 5px !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }
  #product-category .zoomag-select {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 30px 0 10px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    touch-action: manipulation;
  }

  /* Footer/pagination never pushes the viewport sideways. */
  #product-category .zoomag-products-footer {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 12px !important;
    padding: 10px !important;
    overflow: hidden !important;
  }
  #product-category .zoomag-products-footer .row {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 10px !important;
    margin: 0 !important;
  }
  #product-category .zoomag-products-footer [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  #product-category .zoomag-pagination-wrapper,
  #product-category .zoomag-pagination {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #product-category .pagination { flex-wrap: nowrap !important; min-width: max-content !important; }
}

@media (max-width: 575.98px) {
  /* Phones: one useful card per row, less vertical waste than the old square card. */
  #product-category #product-list,
  body.zm-final-grid-mode #product-category #product-list,
  body #product-category #product-list.zm-final-grid,
  body #product-category #product-list.zoomag-products-grid {
    grid-template-columns: minmax(0,1fr) !important;
    gap: 14px !important;
    margin: 0 0 16px !important;
  }
  #product-category #product-list .petz-product-card {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 18px !important;
    animation: none !important;
    transform: none !important;
    box-shadow: 0 8px 24px rgba(33,72,51,.08) !important;
  }
  #product-category #product-list .petz-image-section {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
    padding: 10px 10px 0 !important;
  }
  #product-category #product-list :is(.petz-image-link,.petz-image-container) {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
  }
  #product-category #product-list .petz-image-container {
    min-height: 0 !important;
    border-radius: 14px !important;
    background: #fbfdfb !important;
  }
  #product-category #product-list .petz-product-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }
  #product-category #product-list .petz-content-section {
    padding: 13px 14px 14px !important;
    gap: 9px !important;
  }
  #product-category #product-list .petz-category {
    max-width: 100% !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
  }
  #product-category #product-list .petz-product-name {
    min-height: 0 !important;
  }
  #product-category #product-list .petz-product-name a {
    font-size: 16px !important;
    line-height: 1.28 !important;
    font-weight: 800 !important;
    -webkit-line-clamp: 3 !important;
  }
  #product-category #product-list .petz-features {
    display: grid !important;
    gap: 4px !important;
    max-height: none !important;
    overflow: visible !important;
  }
  #product-category #product-list .petz-feature {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }
  #product-category #product-list .petz-feature:nth-child(n+3) { display: none !important; }
  #product-category #product-list :is(.petz-price-main,.petz-special-price) {
    font-size: 21px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
  }
  #product-category #product-list .petz-old-price { font-size: 12px !important; }
  #product-category #product-list .petz-savings-badge { font-size: 11px !important; padding: 4px 7px !important; }

  /* Listing quantity is 1 by default; keep the phone card focused on buying. */
  #product-category #product-list .petz-quantity-control { display: none !important; }
  #product-category #product-list .petz-action-buttons {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  #product-category #product-list .petz-cart-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    height: 46px !important;
    border-radius: 13px !important;
    font-size: 14px !important;
  }
  #product-category #product-list .petz-secondary-actions {
    display: grid !important;
    grid-template-columns: repeat(2, 44px) !important;
    gap: 7px !important;
    width: auto !important;
    margin: 0 !important;
  }
  #product-category #product-list .petz-secondary-actions :is(.petz-btn,.petz-btn-secondary) {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    border-radius: 13px !important;
  }
  #product-category #product-list :is(button,a,select,input) { touch-action: manipulation; }
}

@media (max-width: 389.98px) {
  #product-category.zoomag-category-page { padding-inline: 8px !important; }
  #product-category .zoomag-controls-panel .row.g-3 {
    grid-template-columns: minmax(0,1fr) !important;
  }
  #product-category :is(.zoomag-subcategories-section,.zm-seo-landings-r101,.zm-related-seo-landings-r102) .zoomag-subcategories-grid {
    grid-auto-columns: minmax(210px, 88vw) !important;
  }
  #product-category #product-list .petz-product-name a { font-size: 15px !important; }
}

@media (hover: none) and (pointer: coarse) {
  #product-category .zoomag-subcategory-card:hover,
  #product-category #product-list .petz-product-card:hover,
  #product-category #product-list .petz-product-image:hover {
    transform: none !important;
  }
}

/* ========================================================================== */
/* ZooMag r108 — Mobile Product Conversion Polish                             */
/* Product-only mobile refinement. Keeps r106.6 header/menu and r107 catalogue */
/* untouched while prioritising image -> title -> price -> purchase.           */
/* ========================================================================== */
@media (max-width: 768px) {
  .zoohub-product-showcase {
    --zm108-gap: 10px;
    --zm108-radius: 16px;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  .zoohub-product-showcase .zoohub-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 10px !important;
  }

  /* Breadcrumbs: one compact horizontal rail instead of wrapping into height. */
  .zoohub-product-showcase .zoohub-breadcrumb-trail {
    width: 100% !important;
    max-width: 100% !important;
    margin: 4px 0 8px !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .zoohub-product-showcase .zoohub-breadcrumb-trail::-webkit-scrollbar { display: none; }
  .zoohub-product-showcase .zoohub-breadcrumb {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: max-content !important;
    min-width: 100% !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .zoohub-product-showcase .zoohub-breadcrumb-item {
    flex: 0 0 auto !important;
    max-width: 210px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 12px !important;
  }

  .zoohub-product-showcase .zoohub-product-jungle { gap: var(--zm108-gap) !important; }

  /* Gallery: large enough to inspect, short enough not to consume the first screen. */
  .zoohub-product-showcase .zoohub-gallery-den {
    position: static !important;
    top: auto !important;
    padding: 8px !important;
    border-radius: var(--zm108-radius) !important;
    box-shadow: 0 5px 18px rgba(28, 72, 51, .06) !important;
  }
  .zoohub-product-showcase .zoohub-gallery-main { gap: 8px !important; }
  .zoohub-product-showcase .zoohub-image-frame {
    width: 100% !important;
    height: auto !important;
    max-height: min(72vw, 330px) !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
    border-radius: 14px !important;
    padding: 5px !important;
  }
  .zoohub-product-showcase .zoohub-gallery-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }
  .zoohub-product-showcase .zoohub-image-paws,
  .zoohub-product-showcase .zoohub-thumb-animal { display: none !important; }
  .zoohub-product-showcase .zoohub-gallery-nav-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  /* Thumbnails become a single touch rail, never a multi-row wall. */
  .zoohub-product-showcase .zoohub-gallery-thumbnails {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 2px 0 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .zoohub-product-showcase .zoohub-gallery-thumbnails::-webkit-scrollbar { display: none; }
  .zoohub-product-showcase .zoohub-gallery-thumb {
    flex: 0 0 68px !important;
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    height: 68px !important;
    margin: 0 !important;
    scroll-snap-align: start;
  }
  .zoohub-product-showcase .zoohub-thumb-frame {
    width: 68px !important;
    height: 68px !important;
    min-height: 68px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 11px !important;
  }

  /* Product information: reduce decoration, increase commercial hierarchy. */
  .zoohub-product-showcase .zoohub-info-sanctuary {
    padding: 14px !important;
    border-radius: var(--zm108-radius) !important;
    box-shadow: 0 5px 18px rgba(28, 72, 51, .055) !important;
  }
  .zoohub-product-showcase .zoohub-product-header { margin: 0 0 8px !important; }
  .zoohub-product-showcase .zoohub-product-title {
    margin: 0 0 8px !important;
    max-width: none !important;
    font-size: clamp(1.32rem, 5.8vw, 1.7rem) !important;
    line-height: 1.16 !important;
    letter-spacing: -.015em !important;
  }
  .zoohub-product-showcase .zoohub-title-underline { display: none !important; }
  .zoohub-product-showcase .zoohub-rating-forest {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin: 0 !important;
  }
  .zoohub-product-showcase .zoohub-rating-paw { font-size: 15px !important; }
  .zoohub-product-showcase .zoohub-rating-link { font-size: 13px !important; }

  /* Facts stay useful but stop looking like four full-width cards. */
  .zoohub-product-showcase .zoohub-quick-facts { margin: 8px 0 !important; }
  .zoohub-product-showcase .zoohub-facts-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  .zoohub-product-showcase .zoohub-fact-item {
    min-height: 50px !important;
    padding: 8px 9px !important;
    border-radius: 12px !important;
  }
  .zoohub-product-showcase .zoohub-fact-icon { display: none !important; }
  .zoohub-product-showcase .zoohub-fact-label {
    font-size: 10.5px !important;
    line-height: 1.15 !important;
  }
  .zoohub-product-showcase .zoohub-fact-value {
    font-size: 13px !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere;
  }

  /* Price is the strongest text block after H1. */
  .zoohub-product-showcase .zoohub-price-meadow {
    margin: 9px 0 !important;
    padding: 11px 12px !important;
    border-radius: 14px !important;
  }
  .zoohub-product-showcase .zoohub-price-main {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 5px 10px !important;
  }
  .zoohub-product-showcase .zoohub-price-old {
    order: 1;
    font-size: 14px !important;
    line-height: 1.2 !important;
  }
  .zoohub-product-showcase .zoohub-price-current {
    order: 2;
    font-size: clamp(1.65rem, 8vw, 2.05rem) !important;
    line-height: 1.05 !important;
    white-space: nowrap;
  }
  .zoohub-product-showcase .zoohub-price-savings {
    order: 3;
    width: 100% !important;
    margin-top: 2px !important;
    font-size: 12.5px !important;
  }
  .zoohub-product-showcase .zoohub-price-points,
  .zoohub-product-showcase .zoohub-discounts { font-size: 12px !important; }

  /* Delivery / pickup / help become swipeable chips rather than four tall rows. */
  .zoohub-product-showcase .zoohub-conversion-trust {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 8px 0 !important;
    padding: 1px 0 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .zoohub-product-showcase .zoohub-conversion-trust::-webkit-scrollbar { display: none; }
  .zoohub-product-showcase .zoohub-conversion-trust__item {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 0 11px !important;
    gap: 6px !important;
    border-radius: 12px !important;
    scroll-snap-align: start;
    white-space: nowrap !important;
  }
  .zoohub-product-showcase .zoohub-conversion-trust__icon { font-size: 15px !important; }
  .zoohub-product-showcase .zoohub-conversion-trust__text { font-size: 12.5px !important; }
  .zoohub-product-showcase .zoohub-conversion-trust__arrow { display: none !important; }

  /* Variant axes are horizontal chip rails on mobile. */
  .zoohub-product-showcase .zoohub-variant-switches {
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px 0 !important;
    padding: 10px !important;
    border-radius: 14px !important;
  }
  .zoohub-product-showcase .zoohub-variant-switches__header { margin-bottom: 7px !important; }
  .zoohub-product-showcase .zoohub-variant-switches__icon { font-size: 18px !important; }
  .zoohub-product-showcase .zoohub-variant-switches__title { font-size: 14px !important; }
  .zoohub-product-showcase .zoohub-variant-switches__family,
  .zoohub-product-showcase .zoohub-variant-matrix__text small { font-size: 11px !important; }
  .zoohub-product-showcase .zoohub-variant-matrix__row { display: block !important; margin-top: 8px !important; }
  .zoohub-product-showcase .zoohub-variant-matrix__label { margin-bottom: 5px !important; }
  .zoohub-product-showcase .zoohub-variant-switches__grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    gap: 7px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 1px 0 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .zoohub-product-showcase .zoohub-variant-switches__grid::-webkit-scrollbar { display: none; }
  .zoohub-product-showcase .zoohub-variant-chip {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 116px !important;
    max-width: 76vw !important;
    min-height: 46px !important;
    padding: 7px 10px !important;
    border-radius: 12px !important;
    scroll-snap-align: center;
  }
  .zoohub-product-showcase .zoohub-variant-chip__label { font-size: 13px !important; }
  .zoohub-product-showcase .zoohub-variant-chip__hint,
  .zoohub-product-showcase .zoohub-variant-chip__price { font-size: 11.5px !important; }

  /* Wishlist / comparison remain available without competing with checkout. */
  .zoohub-product-showcase .zoohub-action-buttons { margin: 7px 0 !important; }
  .zoohub-product-showcase .zoohub-btn-group {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  .zoohub-product-showcase :is(.zoohub-wishlist-btn,.zoohub-compare-btn) {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 0 9px !important;
    border-radius: 12px !important;
    font-size: 12.5px !important;
  }

  /* Purchase row: quantity + primary CTA on one line. */
  .zoohub-product-showcase .zoohub-purchase-nest {
    margin-top: 8px !important;
    padding: 0 !important;
  }
  .zoohub-product-showcase .zoohub-action-section {
    display: grid !important;
    grid-template-columns: 116px minmax(0, 1fr) !important;
    align-items: end !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .zoohub-product-showcase .zoohub-quantity-block { width: 116px !important; min-width: 0 !important; }
  .zoohub-product-showcase .zoohub-quantity-label {
    display: block !important;
    margin: 0 0 4px !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
  }
  .zoohub-product-showcase .zoohub-quantity-controls {
    width: 116px !important;
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 12px !important;
  }
  .zoohub-product-showcase .zoohub-quantity-btn {
    width: 36px !important;
    min-width: 36px !important;
    height: 44px !important;
    min-height: 44px !important;
  }
  .zoohub-product-showcase .zoohub-quantity-input {
    width: 42px !important;
    min-width: 0 !important;
    height: 44px !important;
    font-size: 15px !important;
  }
  .zoohub-product-showcase .zoohub-cart-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding-inline: 12px !important;
    border-radius: 14px !important;
  }
  .zoohub-product-showcase .zoohub-button-text { font-size: 15px !important; }

  /* Options use native full-width controls with mobile-sized targets. */
  .zoohub-product-showcase .zoohub-options-section,
  .zoohub-product-showcase .zoohub-subscription-section {
    margin: 8px 0 !important;
    padding: 10px !important;
    border-radius: 14px !important;
  }
  .zoohub-product-showcase .zoohub-options-title,
  .zoohub-product-showcase .zoohub-subscription-title { font-size: 14px !important; }
  .zoohub-product-showcase :is(.zoohub-select,.zoohub-text-input,.zoohub-textarea,.zoohub-date-input,.zoohub-time-input,.zoohub-datetime-input,.zoohub-upload-btn) {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 46px !important;
    font-size: 16px !important;
  }

  /* Tabs become a swipeable nav; decorative animals are hidden on small screens. */
  .zoohub-product-showcase .zoohub-tabs-savannah { margin-top: 12px !important; }
  .zoohub-product-showcase .zoohub-tabs-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 3px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .zoohub-product-showcase .zoohub-tabs-nav::-webkit-scrollbar { display: none; }
  .zoohub-product-showcase .zoohub-tab-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 104px !important;
    min-height: 44px !important;
    padding: 0 11px !important;
    gap: 5px !important;
    border-radius: 11px !important;
    scroll-snap-align: center;
    font-size: 12.5px !important;
  }
  .zoohub-product-showcase .zoohub-tab-icon { font-size: 16px !important; }
  .zoohub-product-showcase .zoohub-tab-animal { display: none !important; }
  .zoohub-product-showcase .zoohub-tabs-content {
    margin-top: 8px !important;
    padding: 13px !important;
    border-radius: 14px !important;
  }
  .zoohub-product-showcase .zoohub-tab-pane { font-size: 15px !important; line-height: 1.58 !important; }
  .zoohub-product-showcase .zoohub-specification-grid,
  .zoohub-product-showcase .zoohub-stores-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 9px !important; }
  .zoohub-product-showcase .zoohub-store-card { padding: 11px !important; border-radius: 13px !important; }

  /* Existing mobile buybar: stable safe-area layout, truly noninteractive while hidden. */
  .zoohub-product-showcase .zoohub-mobile-buybar {
    position: fixed !important;
    z-index: 2147481800 !important;
    right: 8px !important;
    bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
    left: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: auto !important;
    max-width: none !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 7px 8px 7px 12px !important;
    border: 1px solid rgba(23, 132, 81, .18) !important;
    border-radius: 17px !important;
    background: rgba(255,255,255,.97) !important;
    box-shadow: 0 12px 32px rgba(25, 68, 48, .20) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(calc(100% + 18px)) !important;
    transition: opacity .18s ease, transform .18s ease, visibility .18s linear !important;
  }
  .zoohub-product-showcase .zoohub-mobile-buybar.zoohub-mobile-buybar--visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }
  .zoohub-product-showcase .zoohub-mobile-buybar__info { min-width: 0 !important; }
  .zoohub-product-showcase .zoohub-mobile-buybar__label {
    display: block !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
  }
  .zoohub-product-showcase .zoohub-mobile-buybar__price {
    display: block !important;
    font-size: 17px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }
  .zoohub-product-showcase .zoohub-mobile-buybar__button {
    flex: 0 0 auto !important;
    min-width: 126px !important;
    min-height: 44px !important;
    padding: 0 15px !important;
    border-radius: 13px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 575.98px) {
  .zoohub-product-showcase .zoohub-container { padding-inline: 8px !important; }
  .zoohub-product-showcase .zoohub-image-frame { max-height: min(76vw, 300px) !important; }
  .zoohub-product-showcase .zoohub-info-sanctuary { padding: 12px !important; }
  .zoohub-product-showcase .zoohub-product-title { font-size: clamp(1.24rem, 6vw, 1.52rem) !important; }
  .zoohub-product-showcase .zoohub-facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .zoohub-product-showcase .zoohub-action-section { grid-template-columns: 106px minmax(0, 1fr) !important; }
  .zoohub-product-showcase .zoohub-quantity-block,
  .zoohub-product-showcase .zoohub-quantity-controls { width: 106px !important; }
  .zoohub-product-showcase .zoohub-quantity-btn { width: 32px !important; min-width: 32px !important; }
  .zoohub-product-showcase .zoohub-quantity-input { width: 42px !important; }
  .zoohub-product-showcase .zoohub-btn-text { font-size: 11.5px !important; }
  .zoohub-product-showcase .zoohub-tab-btn { min-width: 98px !important; }
}

@media (max-width: 390px) {
  .zoohub-product-showcase .zoohub-fact-item { padding-inline: 7px !important; }
  .zoohub-product-showcase .zoohub-fact-value { font-size: 12px !important; }
  .zoohub-product-showcase .zoohub-action-section { grid-template-columns: 100px minmax(0, 1fr) !important; gap: 6px !important; }
  .zoohub-product-showcase .zoohub-quantity-block,
  .zoohub-product-showcase .zoohub-quantity-controls { width: 100px !important; }
  .zoohub-product-showcase .zoohub-quantity-btn { width: 30px !important; min-width: 30px !important; }
  .zoohub-product-showcase .zoohub-quantity-input { width: 40px !important; }
  .zoohub-product-showcase .zoohub-mobile-buybar__button { min-width: 116px !important; padding-inline: 11px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .zoohub-product-showcase .zoohub-mobile-buybar { transition: none !important; }
}