/* Zoomag final layout r4 — 2026-08-10 Final screenshot-driven polish. This file is deliberately small and loaded both in and at the end of footer so no legacy stylesheet can win later. Product variant logic is intentionally untouched. */ body.zm-storefront-r4 { --zm-ui-site-max: 1720px; --zm-ui-gutter: clamp(18px, 1.8vw, 34px); } @media (min-width: 1800px) { body.zm-storefront-r4 { --zm-ui-site-max: 1760px; } } @media (min-width: 2200px) { body.zm-storefront-r4 { --zm-ui-site-max: 2040px; --zm-ui-gutter: clamp(28px, 2.2vw, 54px); } } @media (min-width: 3000px) { body.zm-storefront-r4 { --zm-ui-site-max: 2320px; } } body.zm-storefront-r4 :where(.container, .zm-container), body.zm-storefront-r4 .zm-classic-nav__inner, body.zm-storefront-r4 .zm-classic-nav__desktop-panel-inner, body.zm-storefront-r4 #common-home, body.zm-storefront-r4 #product-category, body.zm-storefront-r4 #checkout-cart, body.zm-storefront-r4 #checkout-checkout, body.zm-storefront-r4 #account-account, body.zm-storefront-r4 #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-inline: auto !important; } /* Header had remaining legacy max-width/scale effects on wide monitors. */ body.zm-storefront-r4 .zoomag_main_header_block > .container, body.zm-storefront-r4 .zoomag_top_panel > .container, body.zm-storefront-r4 .zoomag_header_layout { max-width: none !important; } body.zm-storefront-r4 .zoomag_header_layout { width: 100% !important; transform: none !important; zoom: 1 !important; } body.zm-storefront-r4 .zoomag_logo_section, body.zm-storefront-r4 .zoomag_search_section, body.zm-storefront-r4 .zoomag_cart_section { transform: none !important; } /* Text floor: desktop service/UI labels must not regress to 10–12px. */ @media (min-width: 992px) { body.zm-storefront-r4 .zoomag_header_nav_button { font-size: 14px !important; } body.zm-storefront-r4 .zm-classic-nav__quick-link { font-size: 15px !important; } body.zm-storefront-r4 .zm-classic-nav__service a { font-size: 14px !important; } body.zm-storefront-r4 :where(.zm-ui-breadcrumbs__link, .zoohub-breadcrumb-link, .zoohub-breadcrumb-current) { font-size: 13px !important; } } /* Homepage embedded HTML module: use the same canvas as the rest of the shop. */ body.zm-storefront-r4 #common-home .zm-about-2026 { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } body.zm-storefront-r4 #common-home .zm-about-2026__cta { border-radius: 16px !important; box-shadow: none !important; } /* Footer: normal ecommerce proportions and readable text. */ body.zm-storefront-r4 .main-site-footer { min-height: 0 !important; margin-top: 36px !important; padding: 36px 0 20px !important; background: #f7f8fa !important; } body.zm-storefront-r4 .main-site-footer > .container { 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-r4 .main-site-footer h5 { font-size: 17px !important; line-height: 1.3 !important; } body.zm-storefront-r4 .main-site-footer .store-info strong { font-size: 15px !important; } body.zm-storefront-r4 .main-site-footer :where(.metro-station, .working-hours, .phone-number) { font-size: 14px !important; } body.zm-storefront-r4 .main-site-footer .footer-navigation .nav-link { font-size: 14px !important; line-height: 1.45 !important; } body.zm-storefront-r4 .main-site-footer .copyright-section { font-size: 13px !important; } body.zm-storefront-r4 .main-site-footer .footer-bottom-section { margin-top: 24px !important; padding-top: 18px !important; } /* Content should end naturally before the footer, never reserve a viewport-high blank zone. */ body.zm-storefront-r4 #common-home, body.zm-storefront-r4 #common-home #content, body.zm-storefront-r4 #common-home .zm-home-slot-r19--content, body.zm-storefront-r4 #common-home .zm-about-2026 { min-height: 0 !important; height: auto !important; } /* Laptop: use nearly all available width but keep comfortable gutters. */ @media (max-width: 1399.98px) and (min-width: 992px) { body.zm-storefront-r4 { --zm-ui-site-max: 1320px; --zm-ui-gutter: 20px; } } @media (max-width: 1199.98px) and (min-width: 992px) { body.zm-storefront-r4 { --zm-ui-site-max: 1140px; --zm-ui-gutter: 16px; } } @media (max-width: 991.98px) { body.zm-storefront-r4 { --zm-ui-site-max: 100%; --zm-ui-gutter: 16px; } body.zm-storefront-r4 .main-site-footer { margin-top: 28px !important; padding-top: 28px !important; } } @media (max-width: 575.98px) { body.zm-storefront-r4 { --zm-ui-gutter: 12px; } body.zm-storefront-r4 .main-site-footer h5 { font-size: 16px !important; } body.zm-storefront-r4 .main-site-footer .footer-navigation .nav-link, body.zm-storefront-r4 .main-site-footer :where(.metro-station, .working-hours, .phone-number) { font-size: 14px !important; } }