/* * ZOOMAG STANDARD STOREFRONT r1 — 2026-08-10 * Canonical visual layer for the public storefront. * Goal: ordinary, predictable ecommerce UI with readable typography, * wide desktop layout, restrained decoration and stable responsive behavior. * * This file is intentionally loaded once in and once at the end of the * document during the migration period. The second cached reference makes this * canonical layer win over legacy per-page CSS without deleting old files yet. */ :root { --zm-ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --zm-ui-text: #1f2937; --zm-ui-text-strong: #111827; --zm-ui-muted: #667085; --zm-ui-muted-2: #98a2b3; --zm-ui-border: #e5e7eb; --zm-ui-border-strong: #d0d5dd; --zm-ui-surface: #ffffff; --zm-ui-surface-soft: #f7f8fa; --zm-ui-surface-soft-2: #f2f4f7; --zm-ui-primary: #267447; --zm-ui-primary-hover: #1f603a; --zm-ui-primary-soft: #edf7f0; --zm-ui-accent: #e87524; --zm-ui-accent-hover: #c95f18; --zm-ui-danger: #d92d20; --zm-ui-warning: #b54708; --zm-ui-success: #15803d; --zm-ui-radius-xs: 6px; --zm-ui-radius-sm: 8px; --zm-ui-radius: 12px; --zm-ui-radius-lg: 16px; --zm-ui-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05); --zm-ui-shadow-sm: 0 4px 14px rgba(16, 24, 40, .07); --zm-ui-shadow-md: 0 14px 34px rgba(16, 24, 40, .11); --zm-ui-site-max: 1540px; --zm-ui-reading: 860px; --zm-ui-gutter: 28px; } /* ========================================================================== */ /* 1. FOUNDATION / TYPOGRAPHY */ /* ========================================================================== */ html { color-scheme: light; font-size: 16px !important; background: #fff; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body.zm-storefront-r1, body.zm-storefront-r1 :where(input, button, select, textarea) { font-family: var(--zm-ui-font) !important; } body.zm-storefront-r1 { margin: 0 !important; color: var(--zm-ui-text) !important; background: #fff !important; font-size: 16px !important; line-height: 1.55 !important; letter-spacing: 0 !important; overflow-x: hidden !important; } body.zm-storefront-r1 :where(h1, h2, h3, h4, h5, h6) { margin-top: 0; color: var(--zm-ui-text-strong) !important; font-family: var(--zm-ui-font) !important; font-weight: 700 !important; letter-spacing: -.02em !important; text-shadow: none !important; -webkit-text-fill-color: currentColor !important; background: none !important; animation: none !important; } body.zm-storefront-r1 h1 { font-size: clamp(30px, 2.3vw, 40px) !important; line-height: 1.15 !important; } body.zm-storefront-r1 h2 { font-size: clamp(25px, 1.7vw, 32px) !important; line-height: 1.22 !important; } body.zm-storefront-r1 h3 { font-size: clamp(20px, 1.3vw, 25px) !important; line-height: 1.28 !important; } body.zm-storefront-r1 h4 { font-size: 19px !important; line-height: 1.35 !important; } body.zm-storefront-r1 h5 { font-size: 17px !important; line-height: 1.4 !important; } body.zm-storefront-r1 h6 { font-size: 16px !important; line-height: 1.4 !important; } body.zm-storefront-r1 p, body.zm-storefront-r1 li, body.zm-storefront-r1 label, body.zm-storefront-r1 td, body.zm-storefront-r1 th { font-size: 16px; } body.zm-storefront-r1 a { color: var(--zm-ui-primary); text-decoration-thickness: 1px; text-underline-offset: 2px; } body.zm-storefront-r1 a:hover { color: var(--zm-ui-primary-hover); } body.zm-storefront-r1 :where(img, svg, video, canvas) { max-width: 100%; } body.zm-storefront-r1 :where(.container, .zm-container) { width: min(calc(100% - (var(--zm-ui-gutter) * 2)), var(--zm-ui-site-max)) !important; max-width: var(--zm-ui-site-max) !important; margin-inline: auto !important; padding-inline: 0 !important; } body.zm-storefront-r1 .container-fluid { width: 100% !important; max-width: none !important; padding-inline: var(--zm-ui-gutter) !important; } body.zm-storefront-r1 #content { min-width: 0 !important; } body.zm-storefront-r1 :where(main, section, article, aside, div) { min-width: 0; } /* Disable the previous “animated zoo” decoration language site-wide. */ body.zm-storefront-r1 :where( .floating-pets-container, .zoomag-animated-background, .zoomag-home-background-elements, .zoomag-home-floating-pet, .zoomag-home-decor-circle, .zoomag-home-decor-paw, .zoomag-home-particle, .zoomag-home-light-flare, .zoomag-home-floating-shape, .zoomag-title-decoration, .zoomag-paw-left, .zoomag-paw-right, .zoomag-hexagon, .zoomag-divider, .zoomag-paw-divider, .zoomag-product-glow, .zoomag-subcategory-decoration, .zoomag-subcategory-glow, .zoomag-category-icon-glow, .petz-decoration, .petz-badge-paw, .petz-image-overlay, .zoohub-image-paws, .zoohub-thumb-animal, .zoohub-title-underline, .footer-decoration-elements, .footer-animal, .zoomag-home-banner-decoration, .zoomag-home-rotating-pets, .coin ) { display: none !important; animation: none !important; } body.zm-storefront-r1 :where(.animate-float, .animate-bounce, .animate-pulse, .animate-fade-in) { animation: none !important; transform: none !important; } /* ========================================================================== */ /* 2. STANDARD CONTROLS */ /* ========================================================================== */ body.zm-storefront-r1 :where(.btn, button, [type="button"], [type="submit"]) { font-family: var(--zm-ui-font) !important; } body.zm-storefront-r1 :where(.btn-primary, .btn-success, .petz-btn-primary, .btn-primary-cloud) { min-height: 44px; border: 1px solid var(--zm-ui-primary) !important; border-radius: var(--zm-ui-radius-sm) !important; background: var(--zm-ui-primary) !important; color: #fff !important; box-shadow: none !important; font-weight: 700 !important; text-shadow: none !important; } body.zm-storefront-r1 :where(.btn-primary, .btn-success, .petz-btn-primary, .btn-primary-cloud):hover { border-color: var(--zm-ui-primary-hover) !important; background: var(--zm-ui-primary-hover) !important; transform: none !important; } body.zm-storefront-r1 :where(.btn-outline-primary, .btn-outline-secondary, .petz-btn-secondary, .btn-outline-cloud) { min-height: 42px; border: 1px solid var(--zm-ui-border-strong) !important; border-radius: var(--zm-ui-radius-sm) !important; background: #fff !important; color: var(--zm-ui-text) !important; box-shadow: none !important; } body.zm-storefront-r1 :where(.btn-outline-primary, .btn-outline-secondary, .petz-btn-secondary, .btn-outline-cloud):hover { border-color: #98a2b3 !important; background: var(--zm-ui-surface-soft) !important; color: var(--zm-ui-text-strong) !important; transform: none !important; } body.zm-storefront-r1 :where(.form-control, .form-select, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], select, textarea) { min-height: 44px; border: 1px solid var(--zm-ui-border-strong) !important; border-radius: var(--zm-ui-radius-sm) !important; background: #fff !important; color: var(--zm-ui-text) !important; box-shadow: none !important; font-size: 15px !important; } body.zm-storefront-r1 textarea { min-height: 110px; } body.zm-storefront-r1 :where(.form-control, .form-select, input, select, textarea):focus { border-color: var(--zm-ui-primary) !important; outline: 3px solid rgba(38, 116, 71, .13) !important; outline-offset: 0 !important; box-shadow: none !important; } body.zm-storefront-r1 :where(.card, .panel, .well, .list-group, .dropdown-menu) { border-color: var(--zm-ui-border) !important; border-radius: var(--zm-ui-radius) !important; box-shadow: var(--zm-ui-shadow-sm) !important; } body.zm-storefront-r1 table { color: var(--zm-ui-text) !important; border-color: var(--zm-ui-border) !important; } body.zm-storefront-r1 .table > :not(caption) > * > * { padding: 12px 14px !important; border-bottom-color: var(--zm-ui-border) !important; } /* ========================================================================== */ /* 3. HEADER */ /* ========================================================================== */ body.zm-storefront-r1 .zoomag_main_container { position: relative !important; z-index: auto !important; width: 100% !important; background: #fff !important; } body.zm-storefront-r1 .zoomag_top_panel { min-height: 38px !important; padding: 0 !important; display: flex !important; align-items: center !important; background: var(--zm-ui-surface-soft) !important; color: var(--zm-ui-muted) !important; border: 0 !important; border-bottom: 1px solid var(--zm-ui-border) !important; box-shadow: none !important; } body.zm-storefront-r1 .zoomag_top_panel .container { min-height: 38px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; } body.zm-storefront-r1 :where(.zoomag_currency_list, .zoomag_nav_buttons_list) { margin: 0 !important; padding: 0 !important; list-style: none !important; } body.zm-storefront-r1 .zoomag_currency_language_block :where(a, button, .zoomag_currency_toggle), body.zm-storefront-r1 .zoomag_header_nav_button { min-height: 34px !important; height: 34px !important; padding: 0 10px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; border: 0 !important; border-radius: var(--zm-ui-radius-xs) !important; background: transparent !important; color: #475467 !important; box-shadow: none !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1 !important; text-decoration: none !important; transform: none !important; text-shadow: none !important; } body.zm-storefront-r1 .zoomag_header_nav_button:hover, body.zm-storefront-r1 .zoomag_currency_language_block :where(a, button):hover { background: #eaecf0 !important; color: var(--zm-ui-text-strong) !important; transform: none !important; } body.zm-storefront-r1 .zoomag_header_icon { width: 18px !important; color: var(--zm-ui-muted) !important; font-size: 14px !important; transform: none !important; } body.zm-storefront-r1 .zoomag_account_dropdown_menu { top: calc(100% + 8px) !important; min-width: 220px !important; padding: 6px !important; border: 1px solid var(--zm-ui-border) !important; border-radius: 10px !important; background: #fff !important; box-shadow: var(--zm-ui-shadow-md) !important; backdrop-filter: none !important; } body.zm-storefront-r1 .zoomag_account_menu_item { min-height: 40px !important; margin: 0 !important; padding: 9px 10px !important; border: 0 !important; border-radius: 7px !important; background: transparent !important; color: var(--zm-ui-text) !important; font-size: 14px !important; font-weight: 600 !important; transform: none !important; } body.zm-storefront-r1 .zoomag_account_menu_item:hover { background: var(--zm-ui-surface-soft) !important; color: var(--zm-ui-primary) !important; } body.zm-storefront-r1 .zoomag_main_header_block { min-height: 88px !important; padding: 12px 0 !important; display: flex !important; align-items: center !important; background: #fff !important; border: 0 !important; border-bottom: 1px solid var(--zm-ui-border) !important; box-shadow: none !important; } body.zm-storefront-r1 .zoomag_header_layout { width: 100% !important; min-height: 64px !important; display: grid !important; grid-template-columns: minmax(220px, 300px) minmax(360px, 1fr) minmax(190px, 250px) !important; grid-template-areas: "logo search cart" !important; align-items: center !important; gap: clamp(18px, 2.2vw, 34px) !important; } body.zm-storefront-r1 .zoomag_logo_section { grid-area: logo !important; } body.zm-storefront-r1 .zoomag_search_section { grid-area: search !important; } body.zm-storefront-r1 .zoomag_cart_section { grid-area: cart !important; } body.zm-storefront-r1 :where(.zoomag_logo_section, .zoomag_search_section, .zoomag_cart_section) { width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } body.zm-storefront-r1 :where(.zoomag_logo_block, .zoomag_logo_block > a) { width: 100% !important; min-width: 0 !important; height: auto !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; text-decoration: none !important; } body.zm-storefront-r1 .zoomag_logo_with_coins { position: relative !important; inset: auto !important; flex: 0 0 72px !important; width: 72px !important; height: 72px !important; aspect-ratio: 1 !important; margin: 0 !important; overflow: hidden !important; border-radius: 14px !important; background: #fff !important; } body.zm-storefront-r1 .zoomag_logo_image { position: static !important; inset: auto !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; border: 0 !important; border-radius: 0 !important; transform: none !important; box-shadow: none !important; } body.zm-storefront-r1 .zoomag_logo_text { position: static !important; inset: auto !important; min-width: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 2px !important; } body.zm-storefront-r1 .zoomag_logo_title { margin: 0 !important; color: var(--zm-ui-text-strong) !important; background: none !important; font-family: var(--zm-ui-font) !important; font-size: 25px !important; font-weight: 800 !important; line-height: 1.05 !important; letter-spacing: -.03em !important; white-space: nowrap !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important; animation: none !important; } body.zm-storefront-r1 .zoomag_logo_subtitle { max-width: 190px !important; margin: 0 !important; color: var(--zm-ui-muted) !important; font-family: var(--zm-ui-font) !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.3 !important; } body.zm-storefront-r1 :where(.zoomag_search_block, .zoomag-magic-search, .magic-search-form) { width: 100% !important; max-width: none !important; margin: 0 !important; } body.zm-storefront-r1 .magic-search-input-wrapper { position: relative !important; min-height: 50px !important; height: 50px !important; padding: 0 !important; display: flex !important; align-items: center !important; border: 1px solid #cfd5dc !important; border-radius: 10px !important; background: #fff !important; box-shadow: none !important; overflow: visible !important; } body.zm-storefront-r1 :where(.magic-glow, .floating-particles, .orbit-paws, .btn-sparkles) { display: none !important; } body.zm-storefront-r1 .magic-loupe { position: absolute !important; left: 16px !important; right: auto !important; top: 50% !important; z-index: 2 !important; width: 20px !important; height: 20px !important; display: grid !important; place-items: center !important; color: #98a2b3 !important; transform: translateY(-50%) !important; pointer-events: none !important; } body.zm-storefront-r1 .magic-search-input { width: 100% !important; min-height: 48px !important; height: 48px !important; padding: 0 118px 0 46px !important; border: 0 !important; border-radius: 9px !important; background: transparent !important; color: var(--zm-ui-text) !important; box-shadow: none !important; outline: none !important; font-size: 16px !important; font-weight: 400 !important; } body.zm-storefront-r1 .magic-search-input::placeholder { color: #98a2b3 !important; opacity: 1 !important; } body.zm-storefront-r1 .magic-search-btn { position: absolute !important; right: 4px !important; top: 4px !important; bottom: 4px !important; left: auto !important; min-width: 102px !important; min-height: 42px !important; height: 42px !important; padding: 0 16px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 0 !important; border-radius: 7px !important; background: var(--zm-ui-primary) !important; color: #fff !important; box-shadow: none !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1 !important; transform: none !important; } body.zm-storefront-r1 .magic-search-btn:hover { background: var(--zm-ui-primary-hover) !important; transform: none !important; } body.zm-storefront-r1 .magic-search-btn span { font-size: 0 !important; } body.zm-storefront-r1 .magic-search-btn span::after { content: "Найти"; font-size: 14px !important; } body.zm-storefront-r1 .zoomag-magic-search .magic-results-dropdown, body.zm-storefront-r1 #magic-results-dropdown { top: calc(100% + 8px) !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: none !important; margin: 0 !important; border: 1px solid var(--zm-ui-border) !important; border-radius: 10px !important; background: #fff !important; box-shadow: var(--zm-ui-shadow-md) !important; transform: none !important; } body.zm-storefront-r1 .zoomag-magic-search .magic-results-inner { gap: 0 !important; padding: 6px !important; max-height: min(520px, 65vh) !important; } body.zm-storefront-r1 .zoomag-magic-search .magic-result-item { min-height: 82px !important; padding: 10px !important; gap: 12px !important; border-radius: 8px !important; background: #fff !important; } body.zm-storefront-r1 .zoomag-magic-search .magic-result-item:hover { background: var(--zm-ui-surface-soft) !important; } body.zm-storefront-r1 .zoomag-magic-search .magic-result-thumb, body.zm-storefront-r1 .zoomag-magic-search .magic-result-item img { width: 62px !important; height: 62px !important; min-width: 62px !important; min-height: 62px !important; flex-basis: 62px !important; object-fit: contain !important; border: 1px solid var(--zm-ui-border) !important; border-radius: 8px !important; background: #fff !important; } body.zm-storefront-r1 .zoomag-magic-search .magic-result-name { color: var(--zm-ui-text) !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.35 !important; } body.zm-storefront-r1 .zoomag-magic-search .magic-result-price { font-size: 16px !important; font-weight: 700 !important; } body.zm-storefront-r1 .zoomag_cart_block { min-height: 50px !important; width: 100% !important; max-width: none !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; border: 0 !important; background: transparent !important; box-shadow: none !important; transform: none !important; } body.zm-storefront-r1 .zoomag_cart_icon { display: none !important; } body.zm-storefront-r1 :where(.floating-cart-wrapper, .cloud-cart-container) { width: 100% !important; } body.zm-storefront-r1 .cloud-cart-btn { width: 100% !important; min-height: 50px !important; padding: 0 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; border: 1px solid var(--zm-ui-border-strong) !important; border-radius: 10px !important; background: #fff !important; color: var(--zm-ui-text) !important; box-shadow: none !important; transform: none !important; } body.zm-storefront-r1 .cloud-cart-btn:hover { border-color: #98a2b3 !important; background: var(--zm-ui-surface-soft) !important; } body.zm-storefront-r1 .cloud-cart-icon { color: var(--zm-ui-primary) !important; font-size: 19px !important; } body.zm-storefront-r1 .cloud-cart-price { color: var(--zm-ui-text-strong) !important; font-size: 14px !important; font-weight: 700 !important; } body.zm-storefront-r1 .cart-badge-cloud { top: -8px !important; right: -9px !important; min-width: 20px !important; height: 20px !important; padding: 0 5px !important; display: grid !important; place-items: center !important; border: 2px solid #fff !important; border-radius: 999px !important; background: var(--zm-ui-accent) !important; color: #fff !important; font-size: 10px !important; font-weight: 800 !important; } body.zm-storefront-r1 .cloud-cart-dropdown { width: min(420px, calc(100vw - 28px)) !important; min-width: 360px !important; max-width: calc(100vw - 28px) !important; margin-top: 8px !important; padding: 0 !important; border: 1px solid var(--zm-ui-border) !important; border-radius: 12px !important; background: #fff !important; box-shadow: var(--zm-ui-shadow-md) !important; } body.zm-storefront-r1 :where(.random-pet-cloud, .sleeping-pet-cloud, .bouncing-toys-cloud) { display: none !important; } body.zm-storefront-r1 .cloud-cart-header { padding: 15px 16px !important; border-bottom: 1px solid var(--zm-ui-border) !important; } body.zm-storefront-r1 .cloud-cart-content { padding: 10px !important; } body.zm-storefront-r1 .cloud-cart-item { padding: 10px 0 !important; border-bottom: 1px solid var(--zm-ui-border) !important; } body.zm-storefront-r1 .item-title-cloud { color: var(--zm-ui-text) !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.35 !important; } body.zm-storefront-r1 .item-price-cloud { color: var(--zm-ui-text-strong) !important; font-weight: 700 !important; } /* ========================================================================== */ /* 4. MENU / MEGA MENU */ /* ========================================================================== */ body.zm-storefront-r1 .main-menu.zm-classic-nav { border-top: 0 !important; border-bottom: 1px solid var(--zm-ui-border) !important; background: #fff !important; box-shadow: none !important; } body.zm-storefront-r1 .zm-classic-nav__inner, body.zm-storefront-r1 .zm-classic-nav__desktop-panel-inner { width: min(calc(100% - (var(--zm-ui-gutter) * 2)), var(--zm-ui-site-max)) !important; max-width: var(--zm-ui-site-max) !important; } body.zm-storefront-r1 .zm-classic-nav__inner { min-height: 60px !important; gap: 4px !important; } body.zm-storefront-r1 .zm-classic-nav__catalog-button { min-width: 232px !important; min-height: 60px !important; padding: 0 18px !important; gap: 11px !important; border: 0 !important; border-radius: 0 !important; background: var(--zm-ui-primary) !important; color: #fff !important; font-size: 15px !important; font-weight: 750 !important; box-shadow: none !important; } body.zm-storefront-r1 .zm-classic-nav__catalog-button:hover, body.zm-storefront-r1 .zm-classic-nav__catalog-button[aria-expanded="true"] { background: var(--zm-ui-primary-hover) !important; } body.zm-storefront-r1 .zm-classic-nav__quick-link { min-height: 60px !important; padding: 0 13px !important; color: #344054 !important; background: transparent !important; font-size: 15px !important; font-weight: 650 !important; } body.zm-storefront-r1 .zm-classic-nav__quick-link:hover, body.zm-storefront-r1 .zm-classic-nav__quick-item:focus-within > .zm-classic-nav__quick-link { color: var(--zm-ui-primary) !important; background: var(--zm-ui-primary-soft) !important; } body.zm-storefront-r1 .zm-classic-nav__service a { min-height: 60px !important; padding: 0 10px !important; color: var(--zm-ui-muted) !important; font-size: 14px !important; font-weight: 600 !important; } body.zm-storefront-r1 .zm-classic-nav__quick-dropdown { width: 330px !important; padding: 8px !important; border: 1px solid var(--zm-ui-border) !important; border-radius: 0 0 10px 10px !important; background: #fff !important; box-shadow: var(--zm-ui-shadow-md) !important; } body.zm-storefront-r1 .zm-classic-nav__quick-title { padding: 10px !important; color: var(--zm-ui-primary) !important; font-size: 14px !important; font-weight: 700 !important; } body.zm-storefront-r1 .zm-classic-nav__quick-dropdown li a { padding: 9px 10px !important; color: #475467 !important; font-size: 14px !important; line-height: 1.35 !important; } body.zm-storefront-r1 .zm-classic-nav__desktop-panel { border-bottom: 1px solid var(--zm-ui-border) !important; background: #fff !important; box-shadow: 0 18px 42px rgba(16, 24, 40, .12) !important; } body.zm-storefront-r1 .zm-classic-nav__desktop-panel-inner { max-height: calc(100vh - 150px) !important; padding: 26px 0 22px !important; } body.zm-storefront-r1 .zm-classic-nav__desktop-head { margin-bottom: 20px !important; padding-bottom: 16px !important; border-bottom: 1px solid var(--zm-ui-border) !important; } body.zm-storefront-r1 .zm-classic-nav__desktop-head strong { font-size: 24px !important; font-weight: 750 !important; } body.zm-storefront-r1 .zm-classic-nav__desktop-head span { margin-top: 4px !important; color: var(--zm-ui-muted) !important; font-size: 15px !important; } body.zm-storefront-r1 .zm-classic-nav__mega-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 22px 34px !important; } body.zm-storefront-r1 .zm-classic-nav__mega-section { padding: 0 0 20px !important; border-bottom: 1px solid #eef0f2 !important; } body.zm-storefront-r1 .zm-classic-nav__mega-title { margin-bottom: 8px !important; gap: 9px !important; color: var(--zm-ui-text-strong) !important; font-size: 18px !important; font-weight: 750 !important; line-height: 1.3 !important; } body.zm-storefront-r1 .zm-classic-nav__mega-icon { width: 24px !important; flex-basis: 24px !important; font-size: 17px !important; } body.zm-storefront-r1 .zm-classic-nav__mega-list { padding-left: 33px !important; } body.zm-storefront-r1 .zm-classic-nav__mega-list a { padding: 5px 0 !important; color: #475467 !important; font-size: 15px !important; line-height: 1.45 !important; } body.zm-storefront-r1 .zm-classic-nav__mega-all { margin: 9px 0 0 33px !important; color: var(--zm-ui-primary) !important; font-size: 14px !important; font-weight: 700 !important; } body.zm-storefront-r1 .zm-classic-nav__desktop-footer a { font-size: 14px !important; } /* ========================================================================== */ /* 5. BREADCRUMBS */ /* ========================================================================== */ body.zm-storefront-r1 :where(.zm-ui-breadcrumbs-wrap, .zoohub-breadcrumb-trail) { margin: 18px 0 14px !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } body.zm-storefront-r1 :where(.zm-ui-breadcrumbs, .zoohub-breadcrumb) { margin: 0 !important; padding: 0 !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px !important; list-style: none !important; background: transparent !important; } body.zm-storefront-r1 :where(.zm-ui-breadcrumbs__link, .zoohub-breadcrumb-link, .zoohub-breadcrumb-current) { color: var(--zm-ui-muted) !important; font-size: 13px !important; font-weight: 500 !important; text-decoration: none !important; } body.zm-storefront-r1 :where(.zm-ui-breadcrumbs__sep) { color: #b8bec7 !important; font-size: 10px !important; } body.zm-storefront-r1 :where(.zoohub-breadcrumb-paw, .zoohub-breadcrumb-bone) { display: none !important; } /* ========================================================================== */ /* 6. HOME PAGE */ /* ========================================================================== */ body.zm-storefront-r1 #common-home { width: min(calc(100% - (var(--zm-ui-gutter) * 2)), var(--zm-ui-site-max)) !important; max-width: var(--zm-ui-site-max) !important; margin: 0 auto !important; padding: 22px 0 0 !important; background: #fff !important; } body.zm-storefront-r1 #common-home > .row { margin-inline: 0 !important; } body.zm-storefront-r1 #common-home > .row > #content { padding-inline: 0 !important; } body.zm-storefront-r1 .zoomag-home-hero-banner { position: relative !important; margin: 0 0 24px !important; padding: clamp(28px, 4vw, 54px) !important; overflow: hidden !important; border: 1px solid var(--zm-ui-border) !important; border-radius: var(--zm-ui-radius-lg) !important; background: #f5f8f5 !important; box-shadow: none !important; min-height: 0 !important; animation: none !important; } body.zm-storefront-r1 .zoomag-home-banner-content { display: block !important; width: 100% !important; max-width: 940px !important; margin: 0 !important; } body.zm-storefront-r1 .zoomag-home-banner-text { max-width: 940px !important; } body.zm-storefront-r1 .zoomag-home-banner-visual { display: none !important; } body.zm-storefront-r1 .zoomag-home-banner-title { max-width: 900px !important; margin: 0 0 14px !important; color: var(--zm-ui-text-strong) !important; font-size: clamp(32px, 3.4vw, 52px) !important; line-height: 1.08 !important; } body.zm-storefront-r1 .zoomag-home-brand-highlight { color: var(--zm-ui-primary) !important; background: none !important; -webkit-text-fill-color: currentColor !important; } body.zm-storefront-r1 .zoomag-home-banner-subtitle { max-width: 780px !important; margin: 0 0 22px !important; color: #475467 !important; font-size: clamp(17px, 1.4vw, 20px) !important; line-height: 1.5 !important; } body.zm-storefront-r1 .zoomag-home-banner-features { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; } body.zm-storefront-r1 .zoomag-home-feature-badge { padding: 8px 11px !important; border: 1px solid #dbe5dd !important; border-radius: 8px !important; background: #fff !important; color: #344054 !important; box-shadow: none !important; font-size: 14px !important; font-weight: 600 !important; } body.zm-storefront-r1 .zoomag-home-contact-grid { margin: 0 0 28px !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px !important; } body.zm-storefront-r1 .zoomag-home-contact-block { min-height: 0 !important; padding: 20px !important; border: 1px solid var(--zm-ui-border) !important; border-radius: 12px !important; background: #fff !important; box-shadow: none !important; transform: none !important; } body.zm-storefront-r1 .zoomag-home-contact-icon-wrapper { display: none !important; } body.zm-storefront-r1 .zoomag-home-contact-title { margin-bottom: 8px !important; font-size: 16px !important; } body.zm-storefront-r1 .zoomag-home-contact-title .zoomag-home-contact-icon { display: none !important; } body.zm-storefront-r1 .zoomag-home-contact-value { color: var(--zm-ui-text-strong) !important; font-size: 17px !important; font-weight: 700 !important; } body.zm-storefront-r1 .zoomag-home-contact-subtitle { margin-top: 5px !important; color: var(--zm-ui-muted) !important; font-size: 14px !important; } body.zm-storefront-r1 :where(.zm-home-slot-r19, .zm-home-specials-r19) { margin-block: 26px !important; } body.zm-storefront-r1 .zm-home-specials-r19__banner { padding: 22px !important; border: 1px solid var(--zm-ui-border) !important; border-radius: 14px !important; background: var(--zm-ui-surface-soft) !important; box-shadow: none !important; } body.zm-storefront-r1 .zm-home-specials-r19__decor { display: none !important; } body.zm-storefront-r1 .zm-home-specials-r19__eyebrow { color: var(--zm-ui-accent) !important; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .04em !important; } body.zm-storefront-r1 .zm-home-specials-r19__banner h2 { margin-bottom: 7px !important; } body.zm-storefront-r1 .zm-home-specials-r19__card { border: 1px solid var(--zm-ui-border) !important; border-radius: 12px !important; background: #fff !important; box-shadow: none !important; transform: none !important; } body.zm-storefront-r1 .zm-home-specials-r19__card:hover { border-color: #cfd5dc !important; box-shadow: var(--zm-ui-shadow-sm) !important; transform: none !important; } body.zm-storefront-r1 .zm-home-specials-r19__image-wrap { background: #fff !important; } body.zm-storefront-r1 .zm-home-specials-r19__image-wrap img { object-fit: contain !important; } body.zm-storefront-r1 .zm-home-specials-r19__card h3 { font-size: 15px !important; line-height: 1.4 !important; } body.zm-storefront-r1 .zm-home-specials-r19__price-new { color: var(--zm-ui-text-strong) !important; font-size: 19px !important; } body.zm-storefront-r1 .zm-home-specials-r19__discount { background: var(--zm-ui-danger) !important; border-radius: 6px !important; } /* ========================================================================== */ /* 7. CATEGORY / LISTING / FILTER */ /* ========================================================================== */ body.zm-storefront-r1 .zoomag-category-page, body.zm-storefront-r1 .zoohub-container { width: min(calc(100% - (var(--zm-ui-gutter) * 2)), var(--zm-ui-site-max)) !important; max-width: var(--zm-ui-site-max) !important; margin-inline: auto !important; padding-inline: 0 !important; } body.zm-storefront-r1 .zoomag-category-page > .row { --bs-gutter-x: 24px !important; --bs-gutter-y: 18px !important; } body.zm-storefront-r1 .zoomag-category-header { min-height: 0 !important; margin: 0 0 20px !important; padding: 0 0 18px !important; border: 0 !important; border-bottom: 1px solid var(--zm-ui-border) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } body.zm-storefront-r1 .zoomag-category-title-wrapper { min-height: 0 !important; display: flex !important; align-items: center !important; gap: 14px !important; } body.zm-storefront-r1 .zoomag-category-title { margin: 0 !important; color: var(--zm-ui-text-strong) !important; font-size: clamp(30px, 2.4vw, 40px) !important; line-height: 1.15 !important; transform: none !important; } body.zm-storefront-r1 .zoomag-category-icon { order: -1 !important; width: 58px !important; height: 58px !important; flex: 0 0 58px !important; border: 1px solid var(--zm-ui-border) !important; border-radius: 10px !important; background: #fff !important; overflow: hidden !important; box-shadow: none !important; } body.zm-storefront-r1 .zoomag-category-thumb { width: 100% !important; height: 100% !important; object-fit: contain !important; } body.zm-storefront-r1 .zoomag-category-stats { display: inline-flex !important; min-height: 36px !important; padding: 7px 10px !important; border: 1px solid var(--zm-ui-border) !important; border-radius: 8px !important; background: var(--zm-ui-surface-soft) !important; color: var(--zm-ui-muted) !important; box-shadow: none !important; animation: none !important; } body.zm-storefront-r1 .zoomag-stats-icon, body.zm-storefront-r1 .zoomag-stats-subtitle { display: none !important; } body.zm-storefront-r1 .zoomag-products-count { color: var(--zm-ui-muted) !important; font-size: 14px !important; font-weight: 600 !important; } body.zm-storefront-r1 .zoomag-category-accordion { margin: 0 0 24px !important; border: 1px solid var(--zm-ui-border) !important; border-radius: 12px !important; background: #fff !important; box-shadow: none !important; overflow: hidden !important; } body.zm-storefront-r1 .zoomag-accordion-item { border: 0 !important; background: #fff !important; } body.zm-storefront-r1 .zoomag-accordion-header { width: 100% !important; min-height: 52px !important; padding: 13px 16px !important; border: 0 !important; border-radius: 0 !important; background: #fff !important; color: var(--zm-ui-text) !important; box-shadow: none !important; } body.zm-storefront-r1 .zoomag-accordion-header:hover { background: var(--zm-ui-surface-soft) !important; transform: none !important; } body.zm-storefront-r1 .zoomag-accordion-icon-wrapper { display: none !important; } body.zm-storefront-r1 .zoomag-accordion-title { font-size: 16px !important; font-weight: 700 !important; } body.zm-storefront-r1 .zoomag-accordion-content { border-top: 1px solid var(--zm-ui-border) !important; background: #fff !important; } body.zm-storefront-r1 .zoomag-category-description-block { max-width: var(--zm-ui-reading) !important; padding: 18px !important; color: #475467 !important; font-size: 16px !important; line-height: 1.7 !important; } body.zm-storefront-r1 .zoomag-subcategories-section { margin: 0 0 28px !important; } body.zm-storefront-r1 .zoomag-section-header { margin-bottom: 14px !important; } body.zm-storefront-r1 .zoomag-section-decoration, body.zm-storefront-r1 .zoomag-section-icon { display: none !important; } body.zm-storefront-r1 .zoomag-subcategories-title { margin: 0 !important; font-size: 22px !important; } body.zm-storefront-r1 .zoomag-subcategories-grid { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 12px !important; } body.zm-storefront-r1 .zoomag-subcategory-card { min-height: 86px !important; border: 1px solid var(--zm-ui-border) !important; border-radius: 10px !important; background: #fff !important; color: var(--zm-ui-text) !important; box-shadow: none !important; transform: none !important; overflow: hidden !important; } body.zm-storefront-r1 .zoomag-subcategory-card:hover { border-color: #b9c1ca !important; background: var(--zm-ui-surface-soft) !important; box-shadow: none !important; transform: none !important; } body.zm-storefront-r1 .zoomag-subcategory-inner { min-height: 84px !important; padding: 10px !important; display: flex !important; align-items: center !important; gap: 10px !important; } body.zm-storefront-r1 .zoomag-subcategory-image, body.zm-storefront-r1 .zoomag-subcategory-icon { width: 62px !important; height: 62px !important; flex: 0 0 62px !important; margin: 0 !important; border: 0 !important; border-radius: 8px !important; background: #fff !important; } body.zm-storefront-r1 .zoomag-subcategory-img { width: 100% !important; height: 100% !important; object-fit: contain !important; } body.zm-storefront-r1 .zoomag-subcategory-overlay { display: none !important; } body.zm-storefront-r1 .zoomag-subcategory-info { min-width: 0 !important; flex: 1 !important; } body.zm-storefront-r1 .zoomag-subcategory-name { color: var(--zm-ui-text) !important; font-size: 14px !important; font-weight: 650 !important; line-height: 1.3 !important; } body.zm-storefront-r1 .zm-subcategory-caption { display: none !important; } body.zm-storefront-r1 .zoomag-subcategory-meta { margin-left: auto !important; } body.zm-storefront-r1 .zoomag-subcategory-arrow { color: var(--zm-ui-muted) !important; } body.zm-storefront-r1 .zm-category-brands { margin: 0 0 28px !important; padding: 20px !important; border: 1px solid var(--zm-ui-border) !important; border-radius: 12px !important; background: #fff !important; box-shadow: none !important; } body.zm-storefront-r1 .zm-category-brands__eyebrow { color: var(--zm-ui-muted) !important; font-size: 12px !important; } body.zm-storefront-r1 .zm-category-brands__title { font-size: 22px !important; } body.zm-storefront-r1 .zm-category-brand { border: 1px solid var(--zm-ui-border) !important; border-radius: 8px !important; background: #fff !important; box-shadow: none !important; } body.zm-storefront-r1 :where(.zoomag-controls-panel, .zoomag-filter-controls, .zoomag-products-toolbar) { margin: 0 0 18px !important; padding: 12px !important; border: 1px solid var(--zm-ui-border) !important; border-radius: 10px !important; background: var(--zm-ui-surface-soft) !important; box-shadow: none !important; } body.zm-storefront-r1 .zoomag-select { min-height: 44px !important; padding: 0 34px 0 11px !important; font-size: 15px !important; } body.zm-storefront-r1 .zoomag-view-btn, body.zm-storefront-r1 .zoomag-compare-btn { min-width: 42px !important; min-height: 42px !important; padding: 0 11px !important; border: 1px solid var(--zm-ui-border-strong) !important; border-radius: 8px !important; background: #fff !important; color: #475467 !important; box-shadow: none !important; transform: none !important; } body.zm-storefront-r1 .zoomag-view-btn.active { border-color: var(--zm-ui-primary) !important; color: var(--zm-ui-primary) !important; background: var(--zm-ui-primary-soft) !important; } /* Filter module: standard readable sidebar. */ body.zm-storefront-r1 :where(.zoomag-filter-sidebar, .zoomag-filter-sidebar-container, .main-filter, .filter-panel, .catalog-filter) { color: var(--zm-ui-text) !important; font-family: var(--zm-ui-font) !important; } body.zm-storefront-r1 :where(.zoomag-filter-sidebar, .main-filter, .catalog-filter) { border: 1px solid var(--zm-ui-border) !important; border-radius: 12px !important; background: #fff !important; box-shadow: none !important; } body.zm-storefront-r1 :where(.filter-group, .zoomag-filter-group) { border-bottom: 1px solid var(--zm-ui-border) !important; } body.zm-storefront-r1 :where(.filter-title, .zoomag-filter-title, .filter-group-title) { color: var(--zm-ui-text-strong) !important; font-size: 16px !important; font-weight: 700 !important; } body.zm-storefront-r1 :where(.filter-option, .zoomag-filter-option, .form-check-label) { color: #475467 !important; font-size: 15px !important; line-height: 1.45 !important; } body.zm-storefront-r1 .zoomag-products-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 18px !important; } body.zm-storefront-r1 .zoomag-product-item { margin: 0 !important; padding: 0 !important; min-width: 0 !important; transform: none !important; } /* ========================================================================== */ /* 8. PRODUCT CARD */ /* ========================================================================== */ body.zm-storefront-r1 .petz-product-card { all: revert; box-sizing: border-box !important; position: relative !important; width: 100% !important; height: 100% !important; min-height: 470px !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; border: 1px solid var(--zm-ui-border) !important; border-radius: 12px !important; background: #fff !important; box-shadow: none !important; color: var(--zm-ui-text) !important; font-family: var(--zm-ui-font) !important; transform: none !important; transition: border-color .15s ease, box-shadow .15s ease !important; } body.zm-storefront-r1 .petz-product-card:hover { border-color: #c8cfd8 !important; box-shadow: var(--zm-ui-shadow-sm) !important; transform: none !important; } body.zm-storefront-r1 .petz-badge { position: absolute !important; width: auto !important; max-width: calc(100% - 24px) !important; top: 12px !important; z-index: 5 !important; min-height: 25px !important; padding: 4px 7px !important; border: 0 !important; border-radius: 6px !important; box-shadow: none !important; backdrop-filter: none !important; font-size: 11px !important; font-weight: 750 !important; letter-spacing: 0 !important; transform: none !important; animation: none !important; } body.zm-storefront-r1 .petz-sale-badge { left: 12px !important; background: var(--zm-ui-danger) !important; color: #fff !important; } body.zm-storefront-r1 .petz-new-badge { right: 12px !important; background: #2563eb !important; color: #fff !important; } body.zm-storefront-r1 .petz-image-section { position: relative !important; height: auto !important; aspect-ratio: 1 / 1 !important; padding: 12px 12px 0 !important; flex: 0 0 auto !important; } body.zm-storefront-r1 .petz-image-container { width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; border: 0 !important; border-radius: 9px !important; background: #fff !important; } body.zm-storefront-r1 .petz-product-image { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; padding: 4px !important; object-fit: contain !important; object-position: center !important; transform: none !important; transition: none !important; } body.zm-storefront-r1 .petz-content-section { padding: 14px !important; display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; gap: 10px !important; } body.zm-storefront-r1 .petz-header { gap: 7px !important; } body.zm-storefront-r1 .petz-category { width: fit-content !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--zm-ui-muted) !important; font-size: 13px !important; font-weight: 500 !important; } body.zm-storefront-r1 .petz-category i { display: none !important; } body.zm-storefront-r1 .petz-product-name { min-height: 44px !important; margin: 0 !important; align-items: flex-start !important; } body.zm-storefront-r1 .petz-product-name a { color: var(--zm-ui-text-strong) !important; font-size: 16px !important; font-weight: 650 !important; line-height: 1.4 !important; -webkit-line-clamp: 2 !important; } body.zm-storefront-r1 .petz-product-name a:hover { color: var(--zm-ui-primary) !important; } body.zm-storefront-r1 .petz-features { min-height: 0 !important; max-height: 52px !important; margin: 0 !important; gap: 3px !important; overflow: hidden !important; } body.zm-storefront-r1 .petz-feature { gap: 6px !important; color: var(--zm-ui-muted) !important; font-size: 13px !important; line-height: 1.4 !important; } body.zm-storefront-r1 .petz-feature-icon { display: none !important; } body.zm-storefront-r1 .petz-pricing-section { margin-top: auto !important; gap: 4px !important; } body.zm-storefront-r1 .petz-price-main, body.zm-storefront-r1 .petz-special-price { color: var(--zm-ui-text-strong) !important; font-size: 22px !important; font-weight: 750 !important; line-height: 1.2 !important; } body.zm-storefront-r1 .petz-special-price { color: var(--zm-ui-danger) !important; } body.zm-storefront-r1 .petz-old-price { color: var(--zm-ui-muted-2) !important; font-size: 14px !important; } body.zm-storefront-r1 .petz-savings-badge { padding: 0 !important; background: transparent !important; color: var(--zm-ui-danger) !important; font-size: 12px !important; } body.zm-storefront-r1 .petz-savings-badge i { display: none !important; } body.zm-storefront-r1 .petz-stars { color: #f59e0b !important; } body.zm-storefront-r1 .petz-reviews { color: var(--zm-ui-muted) !important; font-size: 13px !important; } body.zm-storefront-r1 .petz-actions-section { margin-top: 2px !important; } body.zm-storefront-r1 .petz-quantity-control { display: none !important; } body.zm-storefront-r1 .petz-action-buttons { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 8px !important; } body.zm-storefront-r1 .petz-btn-primary { min-height: 44px !important; padding: 0 14px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1px solid var(--zm-ui-primary) !important; border-radius: 8px !important; background: var(--zm-ui-primary) !important; color: #fff !important; box-shadow: none !important; transform: none !important; } body.zm-storefront-r1 .petz-btn-primary:hover { background: var(--zm-ui-primary-hover) !important; border-color: var(--zm-ui-primary-hover) !important; } body.zm-storefront-r1 .petz-btn-content { gap: 0 !important; } body.zm-storefront-r1 .petz-btn-icon { display: none !important; } body.zm-storefront-r1 .petz-btn-text { font-size: 15px !important; font-weight: 700 !important; } body.zm-storefront-r1 .petz-secondary-actions { display: flex !important; gap: 6px !important; } body.zm-storefront-r1 .petz-btn-secondary { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; padding: 0 !important; display: grid !important; place-items: center !important; border: 1px solid var(--zm-ui-border-strong) !important; border-radius: 8px !important; background: #fff !important; color: #475467 !important; box-shadow: none !important; transform: none !important; } /* ========================================================================== */ /* 9. PRODUCT PAGE — repaired in r3 */ /* ========================================================================== */ /* r3 deliberately does not restyle the product card globally. Product pages already have their own tuned assets loaded from product.twig: Products.css, zm-product-r301/r303/r304, variants and description styles. The previous global rules here overrode those assets and hid/misplaced taste/weight switches on live product pages. */ /* ========================================================================== */ /* 10. CART / CHECKOUT / ACCOUNT / INFO */ /* ========================================================================== */ body.zm-storefront-r1 :where( #checkout-checkout, #checkout-cart, #account-account, #account-login, #account-register, #information-information, #information-contact, #product-manufacturer, #product-search, #product-special, #common-sitemap ) { width: min(calc(100% - (var(--zm-ui-gutter) * 2)), var(--zm-ui-site-max)) !important; max-width: var(--zm-ui-site-max) !important; margin-inline: auto !important; padding: 22px 0 36px !important; } body.zm-storefront-r1 :where( .zoomag-checkout-container, .checkout-container, .checkout-section, .account-section, .login-container, .register-container, .zm-information-page, .zm-info-page, .manufacturer-list, .search-page ) { border-color: var(--zm-ui-border) !important; border-radius: 12px !important; background: #fff !important; box-shadow: none !important; } body.zm-storefront-r1 :where(.accordion-item) { border-color: var(--zm-ui-border) !important; } body.zm-storefront-r1 .accordion-button { min-height: 50px !important; color: var(--zm-ui-text) !important; background: #fff !important; box-shadow: none !important; font-size: 15px !important; font-weight: 650 !important; } body.zm-storefront-r1 .accordion-button:not(.collapsed) { color: var(--zm-ui-primary) !important; background: var(--zm-ui-primary-soft) !important; } body.zm-storefront-r1 .pagination { gap: 4px !important; } body.zm-storefront-r1 .pagination .page-link { min-width: 40px !important; height: 40px !important; display: grid !important; place-items: center !important; border: 1px solid var(--zm-ui-border) !important; border-radius: 7px !important; background: #fff !important; color: #475467 !important; box-shadow: none !important; font-size: 14px !important; } body.zm-storefront-r1 .pagination .active .page-link { border-color: var(--zm-ui-primary) !important; background: var(--zm-ui-primary) !important; color: #fff !important; } body.zm-storefront-r1 .alert { border-radius: 9px !important; box-shadow: none !important; } /* ========================================================================== */ /* 11. FOOTER */ /* ========================================================================== */ body.zm-storefront-r1 .main-site-footer { position: relative !important; margin-top: 52px !important; padding: 42px 0 20px !important; border-top: 1px solid var(--zm-ui-border) !important; background: #f7f8fa !important; color: #475467 !important; box-shadow: none !important; overflow: hidden !important; } body.zm-storefront-r1 .main-site-footer .row { --bs-gutter-x: 34px !important; --bs-gutter-y: 28px !important; } body.zm-storefront-r1 .main-site-footer h5 { margin: 0 0 14px !important; color: var(--zm-ui-text-strong) !important; font-size: 16px !important; } body.zm-storefront-r1 :where(.footer-contacts-section, .footer-info-section, .footer-services-section) { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } body.zm-storefront-r1 .contact-item { margin: 0 0 16px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } body.zm-storefront-r1 .store-content { display: flex !important; gap: 10px !important; } body.zm-storefront-r1 .store-marker { width: 18px !important; flex: 0 0 18px !important; font-size: 14px !important; } body.zm-storefront-r1 .store-info strong { color: var(--zm-ui-text) !important; font-size: 14px !important; } body.zm-storefront-r1 :where(.metro-station, .working-hours, .phone-number) { color: var(--zm-ui-muted) !important; font-size: 13px !important; line-height: 1.5 !important; } body.zm-storefront-r1 .footer-navigation { margin: 0 !important; padding: 0 !important; list-style: none !important; } body.zm-storefront-r1 .footer-navigation li + li { margin-top: 7px !important; } body.zm-storefront-r1 .footer-navigation .nav-link { padding: 0 !important; color: #475467 !important; font-size: 13px !important; font-weight: 500 !important; } body.zm-storefront-r1 .footer-navigation .nav-link:hover { color: var(--zm-ui-primary) !important; } body.zm-storefront-r1 .footer-bottom-section { margin-top: 28px !important; padding-top: 20px !important; border-top: 1px solid var(--zm-ui-border) !important; } body.zm-storefront-r1 .social-media-section { gap: 8px !important; } body.zm-storefront-r1 .social-icon { width: 36px !important; height: 36px !important; display: grid !important; place-items: center !important; border: 1px solid var(--zm-ui-border) !important; border-radius: 8px !important; background: #fff !important; color: var(--zm-ui-text) !important; box-shadow: none !important; transform: none !important; } body.zm-storefront-r1 .copyright-section { color: var(--zm-ui-muted) !important; font-size: 12px !important; } body.zm-storefront-r1 .made-with-love { color: var(--zm-ui-muted) !important; } /* AI helper: keep function, neutralise floating novelty styling. */ body.zm-storefront-r1 .zm-ai-action { box-shadow: var(--zm-ui-shadow-sm) !important; transform: none !important; } body.zm-storefront-r1 .zm-ai-panel, body.zm-storefront-r1 .zm-ai-feedback { border: 1px solid var(--zm-ui-border) !important; border-radius: 12px !important; background: #fff !important; box-shadow: var(--zm-ui-shadow-md) !important; } /* ========================================================================== */ /* 12. RESPONSIVE */ /* ========================================================================== */ @media (max-width: 1399.98px) { :root { --zm-ui-gutter: 22px; } body.zm-storefront-r1 .zoomag_header_layout { grid-template-columns: minmax(190px, 250px) minmax(300px, 1fr) minmax(170px, 210px) !important; gap: 18px !important; } body.zm-storefront-r1 .zoomag_logo_with_coins { width: 64px !important; height: 64px !important; flex-basis: 64px !important; } body.zm-storefront-r1 .zoomag_logo_title { font-size: 22px !important; } body.zm-storefront-r1 .zoomag_logo_subtitle { font-size: 11px !important; } body.zm-storefront-r1 .zm-classic-nav__catalog-button { min-width: 205px !important; } body.zm-storefront-r1 .zm-classic-nav__quick-link { padding-inline: 10px !important; font-size: 13.5px !important; } body.zm-storefront-r1 .zm-classic-nav__mega-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 20px 30px !important; } body.zm-storefront-r1 .zoomag-subcategories-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } body.zm-storefront-r1 .zoomag-products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 15px !important; } } @media (max-width: 1199.98px) { body.zm-storefront-r1 .zoomag_header_layout { grid-template-columns: minmax(180px, 230px) minmax(280px, 1fr) minmax(150px, 190px) !important; gap: 14px !important; } body.zm-storefront-r1 .zoomag_logo_subtitle { display: none !important; } body.zm-storefront-r1 .cloud-cart-price { display: none !important; } body.zm-storefront-r1 .zoomag-products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } body.zm-storefront-r1 .zoomag-subcategories-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } body.zm-storefront-r1 .zoohub-product-jungle { gap: 26px !important; grid-template-columns: minmax(0, 1fr) minmax(340px, .9fr) !important; } } @media (max-width: 991.98px) { :root { --zm-ui-gutter: 16px; } body.zm-storefront-r1 .zoomag_top_panel { display: none !important; } body.zm-storefront-r1 .zoomag_main_header_block { min-height: 0 !important; padding: 8px 0 10px !important; } body.zm-storefront-r1 .zoomag_header_layout { min-height: 0 !important; display: grid !important; grid-template-columns: 1fr !important; grid-template-areas: "mobile" "search" !important; gap: 8px !important; } body.zm-storefront-r1 .zoomag-mobile-commandbar { grid-area: mobile !important; min-height: 48px !important; width: 100% !important; display: grid !important; grid-template-columns: 44px minmax(0, 1fr) auto !important; align-items: center !important; gap: 10px !important; } body.zm-storefront-r1 .zoomag_logo_section, body.zm-storefront-r1 .zoomag_cart_section { display: none !important; } body.zm-storefront-r1 .zoomag_search_section { grid-area: search !important; width: 100% !important; display: block !important; } body.zm-storefront-r1 .zoomag-mobile-brand { min-width: 0 !important; display: flex !important; align-items: center !important; gap: 7px !important; color: var(--zm-ui-text-strong) !important; text-decoration: none !important; } body.zm-storefront-r1 .zoomag-mobile-brand__mark { font-size: 18px !important; } body.zm-storefront-r1 .zoomag-mobile-brand__name { color: var(--zm-ui-text-strong) !important; font-size: 18px !important; font-weight: 750 !important; } body.zm-storefront-r1 .zoomag-mobile-actions { display: flex !important; align-items: center !important; gap: 4px !important; } body.zm-storefront-r1 .zoomag-mobile-action { width: 40px !important; height: 40px !important; display: grid !important; place-items: center !important; border: 1px solid var(--zm-ui-border) !important; border-radius: 8px !important; background: #fff !important; color: #475467 !important; box-shadow: none !important; } body.zm-storefront-r1 .magic-search-input-wrapper { min-height: 46px !important; height: 46px !important; } body.zm-storefront-r1 .magic-search-input { min-height: 44px !important; height: 44px !important; padding-right: 50px !important; font-size: 16px !important; } body.zm-storefront-r1 .magic-search-btn { width: 40px !important; min-width: 40px !important; height: 38px !important; min-height: 38px !important; padding: 0 !important; } body.zm-storefront-r1 .magic-search-btn span { font-size: 0 !important; } body.zm-storefront-r1 .magic-search-btn span::after { content: "⌕"; font-size: 19px !important; } body.zm-storefront-r1 .zoomag-magic-search .magic-results-dropdown { position: absolute !important; width: 100% !important; max-width: 100% !important; } body.zm-storefront-r1 .zoomag-home-contact-grid { grid-template-columns: 1fr !important; } body.zm-storefront-r1 .zoomag-subcategories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } body.zm-storefront-r1 .zoomag-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; } body.zm-storefront-r1 .zoohub-product-jungle { grid-template-columns: 1fr !important; gap: 24px !important; } body.zm-storefront-r1 .zoohub-info-sanctuary { max-width: none !important; } body.zm-storefront-r1 .zoohub-gallery-thumbnails { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } body.zm-storefront-r1 .main-site-footer { margin-top: 38px !important; padding-top: 32px !important; } } @media (max-width: 767.98px) { body.zm-storefront-r1 h1 { font-size: 29px !important; } body.zm-storefront-r1 h2 { font-size: 24px !important; } body.zm-storefront-r1 .zoomag-home-hero-banner { padding: 24px 20px !important; } body.zm-storefront-r1 .zoomag-home-banner-title { font-size: 34px !important; } body.zm-storefront-r1 .zoomag-home-banner-subtitle { font-size: 16px !important; } body.zm-storefront-r1 .zoomag-home-feature-badge { width: 100% !important; } body.zm-storefront-r1 .zoomag-category-header .row { row-gap: 12px !important; } body.zm-storefront-r1 .zoomag-category-stats { float: none !important; } body.zm-storefront-r1 .zoohub-conversion-trust { grid-template-columns: 1fr !important; } body.zm-storefront-r1 .zoohub-facts-grid { grid-template-columns: 1fr !important; } } @media (max-width: 575.98px) { :root { --zm-ui-gutter: 12px; } body.zm-storefront-r1 .container-fluid { padding-inline: 12px !important; } body.zm-storefront-r1 .zoomag-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px !important; } body.zm-storefront-r1 .petz-product-card { min-height: 410px !important; } body.zm-storefront-r1 .petz-image-section { padding: 8px 8px 0 !important; } body.zm-storefront-r1 .petz-content-section { padding: 10px !important; gap: 7px !important; } body.zm-storefront-r1 .petz-category { display: none !important; } body.zm-storefront-r1 .petz-product-name { min-height: 40px !important; } body.zm-storefront-r1 .petz-product-name a { font-size: 14px !important; line-height: 1.4 !important; } body.zm-storefront-r1 .petz-features { display: none !important; } body.zm-storefront-r1 .petz-price-main, body.zm-storefront-r1 .petz-special-price { font-size: 18px !important; } body.zm-storefront-r1 .petz-action-buttons { grid-template-columns: 1fr 40px !important; gap: 6px !important; } body.zm-storefront-r1 .petz-secondary-actions .petz-compare-btn { display: none !important; } body.zm-storefront-r1 .petz-btn-primary { min-height: 40px !important; } body.zm-storefront-r1 .petz-btn-secondary { width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; } body.zm-storefront-r1 .zoomag-subcategories-grid { grid-template-columns: 1fr !important; } body.zm-storefront-r1 .zoomag-subcategory-card { min-height: 74px !important; } body.zm-storefront-r1 .zoomag-subcategory-inner { min-height: 72px !important; } body.zm-storefront-r1 .zoomag-subcategory-image, body.zm-storefront-r1 .zoomag-subcategory-icon { width: 52px !important; height: 52px !important; flex-basis: 52px !important; } body.zm-storefront-r1 .zoohub-gallery-thumbnails { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 6px !important; } body.zm-storefront-r1 .zoohub-gallery-image { padding: 8px !important; } body.zm-storefront-r1 .cloud-cart-dropdown { min-width: 0 !important; width: calc(100vw - 20px) !important; } } @media (max-width: 380px) { body.zm-storefront-r1 .zoomag-products-grid { grid-template-columns: 1fr !important; } body.zm-storefront-r1 .petz-product-card { min-height: 0 !important; } } @media (prefers-reduced-motion: reduce) { body.zm-storefront-r1 *, body.zm-storefront-r1 *::before, body.zm-storefront-r1 *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ========================================================================== */ /* 13. ADAPTIVE STOREFRONT r3 — live screenshot fixes, 2026-08-10 */ /* ========================================================================== */ /* Wider site frame. r1 was too narrow on 2K/4K screens and made the shop look like a small widget in the middle of the monitor. */ body.zm-storefront-r2, body.zm-storefront-r3 { --zm-ui-site-max: 1760px; --zm-ui-gutter: clamp(18px, 2.1vw, 52px); } @media (min-width: 1800px) { body.zm-storefront-r2 { --zm-ui-site-max: 1880px; } } @media (min-width: 2200px) { body.zm-storefront-r2 { --zm-ui-site-max: 2160px; } } @media (min-width: 2800px) { body.zm-storefront-r2 { --zm-ui-site-max: 2440px; } } @media (min-width: 3400px) { body.zm-storefront-r2 { --zm-ui-site-max: 2760px; } } body.zm-storefront-r2 :where(.container, .zm-container), body.zm-storefront-r2 .zm-classic-nav__inner, body.zm-storefront-r2 .zm-classic-nav__desktop-panel-inner, body.zm-storefront-r2 #common-home, body.zm-storefront-r2 #product-category, body.zm-storefront-r2 #product-product, body.zm-storefront-r2 #checkout-cart, body.zm-storefront-r2 #checkout-checkout, body.zm-storefront-r2 #account-account, body.zm-storefront-r2 #information-information { width: min(calc(100% - (var(--zm-ui-gutter) * 2)), var(--zm-ui-site-max)) !important; max-width: var(--zm-ui-site-max) !important; margin-left: auto !important; margin-right: auto !important; } body.zm-storefront-r2 :where(.container-fluid) { width: 100% !important; max-width: none !important; padding-left: var(--zm-ui-gutter) !important; padding-right: var(--zm-ui-gutter) !important; } /* Header: use the available width, keep search readable, and avoid tiny controls on large screens. */ body.zm-storefront-r2 .zoomag_top_panel { min-height: 42px !important; } body.zm-storefront-r2 .zoomag_top_panel .container { min-height: 42px !important; } body.zm-storefront-r2 .zoomag_header_nav_button { font-size: 15px !important; } body.zm-storefront-r2 .zoomag_main_header_block { min-height: 98px !important; padding: 14px 0 !important; } body.zm-storefront-r2 .zoomag_header_layout { min-height: 70px !important; grid-template-columns: minmax(260px, 360px) minmax(520px, 1fr) minmax(210px, 280px) !important; gap: clamp(22px, 2vw, 42px) !important; } body.zm-storefront-r2 .zoomag_logo_with_coins { width: 76px !important; height: 76px !important; flex-basis: 76px !important; } body.zm-storefront-r2 .zoomag_logo_title { font-size: 28px !important; } body.zm-storefront-r2 .zoomag_logo_subtitle { max-width: 220px !important; font-size: 14px !important; } body.zm-storefront-r2 .magic-search-input-wrapper { min-height: 56px !important; height: 56px !important; border-radius: 12px !important; } body.zm-storefront-r2 .magic-search-input { min-height: 54px !important; height: 54px !important; padding-left: 52px !important; padding-right: 132px !important; font-size: 17px !important; } body.zm-storefront-r2 .magic-loupe { left: 18px !important; font-size: 18px !important; } body.zm-storefront-r2 .magic-search-btn { min-width: 112px !important; min-height: 48px !important; height: 48px !important; border-radius: 9px !important; font-size: 15px !important; } body.zm-storefront-r2 .magic-search-btn span::after { font-size: 15px !important; } body.zm-storefront-r2 .cloud-cart-btn { min-height: 56px !important; border-radius: 12px !important; font-size: 15px !important; } body.zm-storefront-r2 .cloud-cart-icon { font-size: 21px !important; } body.zm-storefront-r2 .cloud-cart-price { font-size: 15px !important; } /* Navigation: bigger desktop tap targets and calmer proportions. */ body.zm-storefront-r2 .zm-classic-nav__inner { min-height: 64px !important; gap: 7px !important; } body.zm-storefront-r2 .zm-classic-nav__catalog-button { min-width: 258px !important; min-height: 64px !important; padding-left: 21px !important; padding-right: 21px !important; font-size: 16px !important; } body.zm-storefront-r2 .zm-classic-nav__quick-link { min-height: 64px !important; padding-left: 15px !important; padding-right: 15px !important; font-size: 16px !important; } body.zm-storefront-r2 .zm-classic-nav__service a { min-height: 64px !important; font-size: 15px !important; } body.zm-storefront-r2 .zm-classic-nav__desktop-head strong { font-size: 27px !important; } body.zm-storefront-r2 .zm-classic-nav__desktop-head span { font-size: 16px !important; } body.zm-storefront-r2 .zm-classic-nav__mega-title { font-size: 20px !important; } body.zm-storefront-r2 .zm-classic-nav__mega-list a { font-size: 16px !important; padding-block: 6px !important; } body.zm-storefront-r2 .zm-classic-nav__mega-all { font-size: 15px !important; } /* Home page: make every live module use the same storefront width. */ body.zm-storefront-r2 #common-home { padding-top: 28px !important; padding-bottom: 44px !important; } body.zm-storefront-r2 #common-home > .row, body.zm-storefront-r2 #product-category > .row, body.zm-storefront-r2 #product-product > .row { margin-left: 0 !important; margin-right: 0 !important; } body.zm-storefront-r2 #common-home > .row > #content, body.zm-storefront-r2 #product-category #content, body.zm-storefront-r2 #product-product #content { padding-left: 0 !important; padding-right: 0 !important; } body.zm-storefront-r2 .zm-home-slot-r19, body.zm-storefront-r2 .zm-home-specials-r19, body.zm-storefront-r2 .zoomag-home-contact-grid, body.zm-storefront-r2 .zoomag-home-hero-banner { width: 100% !important; max-width: none !important; } /* Live banner block from content_top. The old r31 file pinned it to 1180px; this is the main reason the 4K screenshot looked broken. */ body.zm-storefront-r2 #common-home .zm-home-slot-r19--banners { margin-top: 22px !important; margin-bottom: 30px !important; } body.zm-storefront-r2 #common-home .zm-home-slot-r19--banners .zoomag-banner-shell.zoomag-main-hero-slider { width: min(100%, 1880px) !important; max-width: min(100%, 1880px) !important; margin-left: auto !important; margin-right: auto !important; } /* Sales block readability: no white-on-pale text, no tiny cards on wide monitors. */ body.zm-storefront-r2 .zm-home-specials-r19__banner { min-height: 172px !important; padding: 28px clamp(28px, 2.6vw, 56px) !important; border: 1px solid var(--zm-ui-border) !important; border-radius: 16px !important; background: linear-gradient(180deg, #f8fafc 0%, #f3f5f7 100%) !important; color: var(--zm-ui-text) !important; box-shadow: none !important; } body.zm-storefront-r2 .zm-home-specials-r19__eyebrow { color: var(--zm-ui-accent) !important; font-size: 14px !important; } body.zm-storefront-r2 .zm-home-specials-r19__copy h2, body.zm-storefront-r2 .zm-home-specials-r19__banner h2 { color: var(--zm-ui-text-strong) !important; font-size: clamp(26px, 1.65vw, 38px) !important; } body.zm-storefront-r2 .zm-home-specials-r19__copy > p:not(.zm-home-specials-r19__eyebrow), body.zm-storefront-r2 .zm-home-specials-r19__banner p { color: #475467 !important; font-size: 16px !important; } body.zm-storefront-r2 .zm-home-specials-r27__quick, body.zm-storefront-r2 .zm-home-specials-r27 .zm-home-specials-r19__all, body.zm-storefront-r2 .zm-home-specials-r19__all { min-height: 46px !important; border: 1px solid var(--zm-ui-border) !important; background: #fff !important; color: var(--zm-ui-primary) !important; box-shadow: var(--zm-ui-shadow-xs) !important; font-size: 15px !important; } body.zm-storefront-r2 .zm-home-specials-r27__meta a, body.zm-storefront-r2 .zm-home-specials-r27__meta > span, body.zm-storefront-r2 .zm-home-specials-r19__meta span { border-color: var(--zm-ui-border) !important; background: #fff !important; color: #475467 !important; font-size: 14px !important; } body.zm-storefront-r2 .zm-home-specials-r19__meta strong { color: var(--zm-ui-accent) !important; } body.zm-storefront-r2 .zm-home-specials-r27__meta b { color: var(--zm-ui-primary) !important; background: var(--zm-ui-primary-soft) !important; } body.zm-storefront-r2 .zm-home-specials-r19__rail-wrap { padding: 18px 54px 10px !important; border-color: var(--zm-ui-border) !important; border-radius: 16px !important; box-shadow: none !important; } body.zm-storefront-r2 .zm-home-specials-r19__rail { grid-auto-columns: minmax(236px, calc((100% - 90px) / 7)) !important; gap: 15px !important; } body.zm-storefront-r2 .zm-home-specials-r19__image-wrap { min-height: 190px !important; } body.zm-storefront-r2 .zm-home-specials-r19__image-wrap img { height: 176px !important; } body.zm-storefront-r2 .zm-home-specials-r19__card-body h3 { font-size: 16px !important; line-height: 1.35 !important; } body.zm-storefront-r2 .zm-home-specials-r19__stock { font-size: 14px !important; } body.zm-storefront-r2 .zm-home-specials-r19__price-new { font-size: 20px !important; } /* Category/product grids: consistent density by viewport, not one cramped fixed grid. */ @media (min-width: 1700px) { body.zm-storefront-r2 .zoomag-products-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } body.zm-storefront-r2 .zoomag-subcategories-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } } @media (min-width: 2200px) { body.zm-storefront-r2 .zoomag-products-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 20px !important; } body.zm-storefront-r2 .zoomag-subcategories-grid { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; } body.zm-storefront-r2 .zm-home-specials-r19__rail { grid-auto-columns: minmax(242px, calc((100% - 105px) / 8)) !important; } } @media (min-width: 3000px) { body.zm-storefront-r2 .zoomag-products-grid { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; } body.zm-storefront-r2 .zoomag-subcategories-grid { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; } body.zm-storefront-r2 .zm-home-specials-r19__rail { grid-auto-columns: minmax(248px, calc((100% - 120px) / 9)) !important; } } body.zm-storefront-r2 .petz-product-card { min-height: 500px !important; } body.zm-storefront-r2 .petz-product-name a { font-size: 17px !important; } body.zm-storefront-r2 .petz-price-main, body.zm-storefront-r2 .petz-special-price { font-size: 23px !important; } body.zm-storefront-r2 .petz-btn-primary { font-size: 15px !important; } /* Laptop breakpoints: this was the weak zone around 13-inch MacBooks. */ @media (max-width: 1399.98px) and (min-width: 992px) { body.zm-storefront-r2 { --zm-ui-gutter: 22px; --zm-ui-site-max: 1280px; } body.zm-storefront-r2 .zoomag_main_header_block { min-height: 88px !important; padding-block: 10px !important; } body.zm-storefront-r2 .zoomag_header_layout { grid-template-columns: minmax(190px, 240px) minmax(360px, 1fr) minmax(160px, 205px) !important; gap: 14px !important; } body.zm-storefront-r2 .zoomag_logo_with_coins { width: 60px !important; height: 60px !important; flex-basis: 60px !important; } body.zm-storefront-r2 .zoomag_logo_title { font-size: 22px !important; } body.zm-storefront-r2 .zoomag_logo_subtitle { display: none !important; } body.zm-storefront-r2 .magic-search-input-wrapper { min-height: 50px !important; height: 50px !important; } body.zm-storefront-r2 .magic-search-input { min-height: 48px !important; height: 48px !important; font-size: 16px !important; } body.zm-storefront-r2 .magic-search-btn { min-height: 42px !important; height: 42px !important; min-width: 92px !important; } body.zm-storefront-r2 .cloud-cart-btn { min-height: 50px !important; } body.zm-storefront-r2 .zm-classic-nav__catalog-button { min-width: 220px !important; font-size: 15px !important; } body.zm-storefront-r2 .zm-classic-nav__quick-link { padding-inline: 10px !important; font-size: 14px !important; } body.zm-storefront-r2 .zm-classic-nav__service a { font-size: 13px !important; padding-inline: 8px !important; } body.zm-storefront-r2 .zm-home-specials-r19__rail { grid-auto-columns: calc((100% - 45px) / 4) !important; } } @media (max-width: 1199.98px) and (min-width: 992px) { body.zm-storefront-r2 { --zm-ui-site-max: 1100px; --zm-ui-gutter: 18px; } body.zm-storefront-r2 .zoomag_header_layout { grid-template-columns: minmax(160px, 205px) minmax(320px, 1fr) minmax(130px, 165px) !important; } body.zm-storefront-r2 .zoomag_logo_with_coins { width: 54px !important; height: 54px !important; flex-basis: 54px !important; } body.zm-storefront-r2 .zoomag_logo_title { font-size: 20px !important; } body.zm-storefront-r2 .cloud-cart-price { display: none !important; } body.zm-storefront-r2 .zm-classic-nav__service { display: none !important; } } /* Tablet/mobile: don't keep desktop spacing, don't create horizontal scroll. */ @media (max-width: 991.98px) { body.zm-storefront-r2 { --zm-ui-site-max: 100%; --zm-ui-gutter: 16px; } body.zm-storefront-r2 .zoomag_main_header_block { padding: 8px 0 10px !important; } body.zm-storefront-r2 .zoomag_header_layout { gap: 10px !important; } body.zm-storefront-r2 .zoomag-mobile-commandbar { min-height: 52px !important; } body.zm-storefront-r2 .magic-search-input-wrapper { min-height: 48px !important; height: 48px !important; } body.zm-storefront-r2 .magic-search-input { min-height: 46px !important; height: 46px !important; padding-left: 44px !important; padding-right: 50px !important; } body.zm-storefront-r2 .magic-search-btn { min-width: 40px !important; min-height: 40px !important; height: 40px !important; } body.zm-storefront-r2 #common-home { padding-top: 14px !important; } body.zm-storefront-r2 #common-home .zm-home-slot-r19--banners { margin-top: 12px !important; margin-bottom: 20px !important; } body.zm-storefront-r2 .zm-home-specials-r19__banner { grid-template-columns: 1fr !important; min-height: 0 !important; padding: 20px !important; } body.zm-storefront-r2 .zm-home-specials-r19__rail-wrap { padding: 14px 0 6px !important; } body.zm-storefront-r2 .zm-home-specials-r19__rail { grid-auto-columns: minmax(225px, 72vw) !important; padding-inline: 14px !important; } body.zm-storefront-r2 .zm-home-specials-r19__nav { display: none !important; } } @media (max-width: 767.98px) { body.zm-storefront-r2 { --zm-ui-gutter: 14px; } body.zm-storefront-r2 .zoomag-mobile-brand__name { font-size: 18px !important; } body.zm-storefront-r2 .zoomag-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } body.zm-storefront-r2 .petz-product-card { min-height: 410px !important; } body.zm-storefront-r2 .petz-product-name a { font-size: 14px !important; } body.zm-storefront-r2 .petz-price-main, body.zm-storefront-r2 .petz-special-price { font-size: 18px !important; } } @media (max-width: 575.98px) { body.zm-storefront-r2 { --zm-ui-gutter: 12px; } body.zm-storefront-r2 .zoomag-mobile-commandbar { grid-template-columns: 42px minmax(0, 1fr) auto !important; gap: 8px !important; } body.zm-storefront-r2 .zoomag-mobile-action { width: 38px !important; height: 38px !important; } body.zm-storefront-r2 .zoomag-mobile-actions { gap: 3px !important; } body.zm-storefront-r2 .zm-home-specials-r19__banner { padding: 16px !important; border-radius: 12px !important; } body.zm-storefront-r2 .zm-home-specials-r19__copy h2, body.zm-storefront-r2 .zm-home-specials-r19__banner h2 { font-size: 22px !important; } body.zm-storefront-r2 .zm-home-specials-r19__rail { grid-auto-columns: minmax(210px, 78vw) !important; } } @media (max-width: 380px) { body.zm-storefront-r2 .zoomag-products-grid { grid-template-columns: 1fr !important; } }