/* ========================================================================== ZooMag responsive layout guard — Round 7 (2026-07-15) Purpose: - structural layout uses Grid/Flex instead of positional offsets; - decorative absolute/fixed elements remain decorative; - prevent horizontal overflow in custom product/category HTML; - stabilize header, banner, cards and floating widgets from 320px upward. Loaded LAST in . ========================================================================== */ :root { --zm-r7-site-max: 1440px; --zm-r7-gutter: clamp(10px, 2.2vw, 28px); --zm-r7-gap: clamp(10px, 1.8vw, 24px); --zm-r7-radius: clamp(16px, 2vw, 28px); } html { max-width: 100%; overflow-x: clip; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { max-width: 100%; overflow-x: hidden; } *, *::before, *::after { box-sizing: border-box; } img, picture, video, canvas, svg, iframe { max-width: 100%; } img, video { height: auto; } body :where(.container) { width: min(calc(100% - (var(--zm-r7-gutter) * 2)), var(--zm-r7-site-max)); max-width: var(--zm-r7-site-max); margin-inline: auto; } :where( .zoomag_main_container, .zoomag_main_content, .zoomag-category-page, .zoomag-category-content, .zoohub-product-showcase, .zoohub-container, .zoohub-layout, .zoohub-main, #content, main, section, article ) { min-width: 0; } :where(h1, h2, h3, h4, h5, h6, p, a, button, label, span, strong, small) { overflow-wrap: anywhere; } /* -------------------------------------------------------------------------- Header: remove structural left offsets and fixed 210px blocks -------------------------------------------------------------------------- */ .zoomag_top_panel .container { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 8px 14px !important; min-height: 0 !important; } .zoomag_currency_language_block, .zoomag_navigation_buttons_block { flex: 0 1 auto !important; min-width: 0 !important; } .zoomag_navigation_buttons_block { margin-left: auto !important; } .zoomag_nav_buttons_list, .zoomag_currency_list { max-width: 100% !important; } .zoomag_main_header_block { padding: clamp(12px, 2vw, 24px) 0 !important; } .zoomag_header_layout { display: grid !important; grid-template-columns: minmax(230px, .9fr) minmax(320px, 1.75fr) minmax(150px, .55fr) !important; grid-template-areas: "logo search cart" !important; align-items: center !important; gap: var(--zm-r7-gap) !important; width: 100% !important; } .zoomag_logo_section, .zoomag_search_section, .zoomag_cart_section { width: auto !important; min-width: 0 !important; margin: 0 !important; flex: none !important; } .zoomag_logo_section { grid-area: logo !important; } .zoomag_search_section { grid-area: search !important; } .zoomag_cart_section { grid-area: cart !important; } .zoomag_logo_block, .zoomag_logo_block > a { width: 100% !important; height: auto !important; min-width: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: clamp(8px, 1.4vw, 16px) !important; } .zoomag_logo_with_coins { position: relative !important; inset: auto !important; flex: 0 0 clamp(86px, 8vw, 126px) !important; width: clamp(86px, 8vw, 126px) !important; height: auto !important; aspect-ratio: 1 / 1 !important; max-width: 126px !important; max-height: 126px !important; margin: 0 !important; overflow: visible !important; } .zoomag_logo_image { position: relative !important; inset: auto !important; left: auto !important; top: auto !important; display: block !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; transform: none !important; } .zoomag_logo_with_coins .coin { position: absolute !important; inset: 4% !important; left: 4% !important; top: 4% !important; width: 92% !important; height: 92% !important; max-width: none !important; max-height: none !important; pointer-events: none !important; } .zoomag_logo_text { position: static !important; inset: auto !important; left: auto !important; min-width: 0 !important; margin: 0 !important; align-items: flex-start !important; } .zoomag_logo_title { font-size: clamp(1.45rem, 2.4vw, 2.55rem) !important; line-height: 1.05 !important; white-space: nowrap !important; } .zoomag_logo_subtitle { margin-top: 4px !important; font-size: clamp(.76rem, 1.25vw, 1.08rem) !important; line-height: 1.25 !important; } .zoomag_search_block, .zoomag-magic-search, .magic-search-input-wrapper { width: 100% !important; max-width: none !important; min-width: 0 !important; } .zoomag_cart_block { width: 100% !important; max-width: none !important; min-width: 0 !important; padding: 8px !important; } #cart > .dropdown-menu, .zoomag_account_dropdown_menu { max-width: min(420px, calc(100vw - 20px)) !important; } /* Tablet/mobile hierarchy: compact logo, search and cart remain usable. */ @media (max-width: 991.98px) { .zoomag_top_panel { padding-block: 6px !important; } .zoomag_top_panel .container { flex-wrap: nowrap !important; } .zoomag_currency_language_block { flex: 0 0 auto !important; } .zoomag_navigation_buttons_block { flex: 1 1 auto !important; overflow: hidden !important; } .zoomag_nav_buttons_list { justify-content: flex-end !important; gap: 5px !important; } .zoomag_header_nav_button { min-width: 34px !important; height: 34px !important; padding: 6px 9px !important; } .zoomag_header_layout { grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "logo logo" "search cart" !important; gap: 9px !important; } .zoomag_logo_block, .zoomag_logo_block > a { flex-direction: row !important; justify-content: center !important; gap: 9px !important; } .zoomag_logo_with_coins { flex-basis: clamp(68px, 13vw, 92px) !important; width: clamp(68px, 13vw, 92px) !important; max-width: 92px !important; max-height: 92px !important; } .zoomag_logo_text { align-items: flex-start !important; text-align: left !important; } .zoomag_logo_title { font-size: clamp(1.35rem, 5.8vw, 2rem) !important; text-align: left !important; } .zoomag_logo_subtitle { font-size: clamp(.72rem, 3.2vw, .98rem) !important; text-align: left !important; } .zoomag_cart_block { width: auto !important; min-width: 42px !important; padding: 0 !important; } #cart > .dropdown-menu { position: fixed !important; top: auto !important; left: 10px !important; right: 10px !important; bottom: 10px !important; width: auto !important; max-width: none !important; max-height: min(72dvh, 620px) !important; overflow: auto !important; } } @media (max-width: 575.98px) { .zoomag_main_header_block { padding: 9px 0 !important; } .zoomag_header_layout { grid-template-columns: minmax(0, 1fr) 42px !important; gap: 7px !important; } .zoomag_logo_with_coins { flex-basis: 62px !important; width: 62px !important; max-width: 62px !important; max-height: 62px !important; } .zoomag_logo_title { font-size: clamp(1.2rem, 7vw, 1.65rem) !important; } .zoomag_logo_subtitle { max-width: 210px !important; font-size: .72rem !important; } .magic-search-input-wrapper { min-height: 38px !important; border-radius: 14px !important; } .magic-search-input { min-height: 34px !important; font-size: 16px !important; /* prevents iOS zoom */ } } /* -------------------------------------------------------------------------- Main banner: normal flow only, no header overlap, no fixed desktop width. -------------------------------------------------------------------------- */ #common-home .zoomag-banner-shell.zoomag-main-hero-slider { position: relative !important; inset: auto !important; width: 100% !important; max-width: min(100%, 1180px) !important; margin: clamp(10px, 1.7vw, 22px) auto clamp(18px, 2.5vw, 32px) !important; aspect-ratio: 3 / 1 !important; min-height: 0 !important; max-height: none !important; overflow: hidden !important; border-radius: var(--zm-r7-radius) !important; } #common-home .zoomag-banner-shell.zoomag-main-hero-slider :where( .zoomag-banner-stage, .zoomag-banner-track, .carousel-inner, .carousel-item, .zoomag-banner-slide, .zoomag-banner-media, .zoomag-banner-figure, .zoomag-banner-link ) { position: relative !important; inset: auto !important; width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; padding: 0 !important; } #common-home .zoomag-banner-shell.zoomag-main-hero-slider .zoomag-banner-image { position: static !important; inset: auto !important; display: block !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: cover !important; object-position: center !important; transform: none !important; } @media (max-width: 575.98px) { #common-home .zoomag-banner-shell.zoomag-main-hero-slider { width: 100% !important; aspect-ratio: 16 / 7 !important; border-radius: 15px !important; } } /* -------------------------------------------------------------------------- Menu and overlays: viewport-safe panels, no hard-coded overflow. -------------------------------------------------------------------------- */ .main-menu, .main-menu .menu-list, .main-menu .submenu-container, .main-menu .menu-container, .main-menu .mobile-submenu-panel { max-width: 100% !important; } .main-menu .menu-list { width: min(100%, var(--zm-r7-site-max)) !important; margin-inline: auto !important; } .main-menu .menu-link, .main-menu .submenu-link, .main-menu .mobile-menu-link, .main-menu .mobile-submenu-link { min-width: 0 !important; } .main-menu .menu-text, .main-menu .submenu-text, .main-menu .mobile-menu-text, .main-menu .mobile-submenu-text { min-width: 0 !important; white-space: normal !important; line-height: 1.2 !important; } @media (max-width: 991.98px) { .main-menu .menu-container { width: min(420px, calc(100vw - 14px)) !important; height: 100dvh !important; max-height: 100dvh !important; padding-bottom: env(safe-area-inset-bottom) !important; } .main-menu .mobile-submenu-panel { width: min(420px, calc(100vw - 20px)) !important; max-height: calc(100dvh - 20px) !important; } } /* -------------------------------------------------------------------------- Category and product structure: fluid columns, cards and media. -------------------------------------------------------------------------- */ .zoomag-category-page, .zoohub-container { width: min(calc(100% - (var(--zm-r7-gutter) * 2)), var(--zm-r7-site-max)) !important; max-width: var(--zm-r7-site-max) !important; margin-inline: auto !important; padding-inline: 0 !important; } .zoomag-category-header, .zoomag-controls-panel, .zoomag-products-footer, .zoomag-category-accordion, .zoomag-subcategories-section, .zoohub-gallery-den, .zoohub-info-sanctuary, .zoohub-tabs-savannah { max-width: 100% !important; min-width: 0 !important; } .zoomag-subcategories-grid, .zoomag-products-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)) !important; gap: var(--zm-r7-gap) !important; } .zoomag-product-item, .zoomag-subcategory-card, .zoomag-subcategory-inner, .product-thumb { min-width: 0 !important; max-width: 100% !important; } .zoomag-subcategory-image, .zoomag-product-image, .product-thumb .image { height: auto !important; aspect-ratio: 1 / 1 !important; } .zoomag-subcategory-img, .zoomag-product-image img, .product-thumb .image img { width: 100% !important; height: 100% !important; object-fit: contain !important; } .zoomag-controls-panel .row, .zoomag-products-footer .row { row-gap: 12px !important; } .zoomag-select-wrapper, .zoomag-select, .zoomag-control-group { max-width: 100% !important; min-width: 0 !important; } .zoohub-product-jungle { display: grid !important; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr) !important; gap: clamp(14px, 2.2vw, 32px) !important; align-items: start !important; } .zoohub-gallery-den, .zoohub-info-sanctuary, .zoohub-gallery-habitat, .zoohub-gallery-main, .zoohub-image-petting-zone, .zoohub-image-frame { width: 100% !important; min-width: 0 !important; } .zoohub-image-frame { height: auto !important; min-height: 0 !important; aspect-ratio: 1 / 1 !important; } .zoohub-gallery-image { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; } .zoohub-facts-grid, .zoohub-conversion-trust, .zoohub-specification-grid { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)) !important; } .zoohub-action-buttons, .zoohub-btn-group, .zoohub-quantity-section { max-width: 100% !important; min-width: 0 !important; flex-wrap: wrap !important; } @media (max-width: 1050px) { .zoohub-product-jungle { grid-template-columns: 1fr !important; } .zoohub-gallery-den { max-width: 760px !important; margin-inline: auto !important; } } @media (max-width: 767.98px) { .zoomag-subcategories-grid, .zoomag-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } .zoomag-category-header .row, .zoomag-controls-panel .row, .zoomag-products-footer .row { display: grid !important; grid-template-columns: 1fr !important; } .zoomag-category-header .text-lg-end { text-align: left !important; } .zoohub-product-title, .zoomag-category-title { font-size: clamp(1.4rem, 7vw, 2.1rem) !important; line-height: 1.15 !important; } } @media (max-width: 420px) { .zoomag-subcategories-grid, .zoomag-products-grid { grid-template-columns: 1fr !important; } } /* -------------------------------------------------------------------------- Imported rich descriptions: contain old positional CSS without flattening decorative absolute elements. Structural overflow is corrected dynamically by zm-responsive-layout-round7.js only when it actually exceeds viewport. -------------------------------------------------------------------------- */ [data-zm-product-description], .zoomag-description-content, .zm-ui-content-readable { width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow-wrap: anywhere !important; } [data-zm-product-description] *, .zoomag-description-content *, .zm-ui-content-readable * { max-width: 100%; box-sizing: border-box; } [data-zm-product-description] :where(table), .zoomag-description-content :where(table), .zm-ui-content-readable :where(table) { max-width: 100% !important; } [data-zm-product-description] :where(.table-wrap, [class*="table-wrap"]), .zoomag-description-content :where(.table-wrap, [class*="table-wrap"]), .zm-ui-content-readable :where(.table-wrap, [class*="table-wrap"]) { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } .zm-r7-flow-fix { position: relative !important; inset: auto !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; transform: none !important; margin-inline: 0 !important; } .zm-r7-width-fix { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } /* -------------------------------------------------------------------------- Floating helpers: respect viewport and mobile safe areas. -------------------------------------------------------------------------- */ #zoomag-ai-assistant.zoomag-ai-assistant { right: max(10px, env(safe-area-inset-right)) !important; bottom: max(10px, env(safe-area-inset-bottom)) !important; } .zm-ai-panel, .zm-ai-feedback, .zm-ai-tooltip { max-width: min(680px, calc(100vw - 24px)) !important; max-height: min(86dvh, 760px) !important; } @media (max-width: 575.98px) { .zm-ai-panel, .zm-ai-feedback, .zm-ai-tooltip { position: fixed !important; inset: auto 8px calc(68px + env(safe-area-inset-bottom)) 8px !important; width: auto !important; max-width: none !important; max-height: 72dvh !important; } } /* -------------------------------------------------------------------------- Motion/accessibility and layout debug mode. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .floating-pets-container, .coin { display: none !important; } } @media (max-width: 1024px) { .floating-pets-container { display: none !important; } } html.zm-r7-layout-debug .zm-r7-overflow-source { outline: 3px solid #e11d48 !important; outline-offset: 2px !important; } html.zm-r7-layout-debug::after { content: "ZooMag layout debug: red outline = horizontal overflow"; position: fixed; z-index: 2147483647; left: 8px; bottom: 8px; padding: 7px 10px; border-radius: 10px; background: #111827; color: #fff; font: 700 12px/1.3 system-ui, sans-serif; pointer-events: none; }