/* * Elysian Level 23 - Responsive Cascade 3.0 (v5.41.0) * Canonical responsive guardrails loaded after the Level 22 header/search * rebuild. Historical Level 3 and Level 21 CSS are retained in the package for * audit traceability but are no longer active frontend layers. */ :root{ --ely-r-content-max:1240px; --ely-r-wide-max:1280px; --ely-r-narrow-max:920px; --ely-r-tracking-max:900px; --ely-r-cart-max:1040px; --ely-r-size-guide-max:1120px; --ely-r-checkout-max:1180px; --ely-r-gutter:24px; --ely-r-shop-gutter:28px; --ely-r-dialog-gap:24px; --ely-r-section-gap:clamp(50px,6vw,80px); --ely-r-control:44px; --ely-r-safe-top:max(0px,env(safe-area-inset-top)); --ely-r-safe-right:max(0px,env(safe-area-inset-right)); --ely-r-safe-bottom:max(0px,env(safe-area-inset-bottom)); --ely-r-safe-left:max(0px,env(safe-area-inset-left)); } /* ---------- Global intrinsic-size / overflow contract ---------- */ html{ max-width:100%; overflow-x:clip; } body.elysian-level23-responsive{ max-width:100%; overflow-x:clip; } @supports not (overflow:clip){ html, body.elysian-level23-responsive{overflow-x:hidden;} } body.elysian-level23-responsive *, body.elysian-level23-responsive *::before, body.elysian-level23-responsive *::after{box-sizing:border-box;} body.elysian-level23-responsive [hidden]{display:none!important;} body.elysian-level23-responsive :where(img,picture,video,canvas,svg){max-width:100%;} body.elysian-level23-responsive :where(img,picture,video,canvas){height:auto;} /* Allow grid/flex tracks to actually shrink instead of forcing horizontal scroll. */ body.elysian-level23-responsive :where( .header-inner-refined, .header-actions-refined, .elysian-l22-search-form, .elysian-l22-search-results, .v589-footer-grid, .v589-footer-nav, .elysian-l25-catalogue-controls, .elysian-l25-control-actions, .elysian-confirmation-grid, .elysian-confirmation-side, .elysian-l14-account-grid, .woocommerce div.product, .woocommerce div.product div.images, .woocommerce div.product div.summary, .woocommerce-checkout, .woocommerce-cart-form, .woocommerce-cart-form__cart-item, .elysian-kacher-builder, .elysian-dozen-builder, .v57-quick-add-content )>*{min-width:0;} body.elysian-level23-responsive :where( .site-main, .entry-content, .content-shell, .page-shell, .narrow-shell, .shop-content, .woocommerce, .woocommerce-page, .woocommerce-page #primary ){min-width:0;max-width:100%;} /* One width/gutter contract. Level 22 retains component-specific header rules. */ body.elysian-level23-responsive .shell:not(.header-inner-refined):not(.v512-announcement-inner):not(.elysian-l22-search-shell):not(.quick-category-track):not(.mobile-menu-inner), body.elysian-level23-responsive .ely-ds-container{ width:min(var(--ely-r-content-max),calc(100% - (var(--ely-r-gutter) * 2)))!important; max-width:var(--ely-r-content-max)!important; margin-inline:auto!important; } body.elysian-level23-responsive.elysian-level25-catalogue .shop-content{ width:100%!important; max-width:var(--ely-r-wide-max)!important; margin-inline:auto!important; padding-inline:var(--ely-r-shop-gutter)!important; } /* Canonical constrained page shells. These replace the retired legacy shell block. */ body.elysian-level23-responsive .content-shell.narrow{ width:min(var(--ely-r-narrow-max),calc(100% - (var(--ely-r-gutter) * 2)))!important; max-width:var(--ely-r-narrow-max)!important; margin-inline:auto!important; } body.elysian-level23-responsive .narrow-shell{ width:min(var(--ely-r-tracking-max),calc(100% - (var(--ely-r-gutter) * 2)))!important; max-width:var(--ely-r-tracking-max)!important; margin-inline:auto!important; } body.elysian-level23-responsive.woocommerce-cart .content-shell.narrow{ width:min(var(--ely-r-cart-max),calc(100% - (var(--ely-r-gutter) * 2)))!important; max-width:var(--ely-r-cart-max)!important; } body.elysian-level23-responsive.elysian-page-size-guide .content-shell.narrow{ width:min(var(--ely-r-size-guide-max),calc(100% - (var(--ely-r-gutter) * 2)))!important; max-width:var(--ely-r-size-guide-max)!important; } body.elysian-level23-responsive :where(.v512-checkout-shell,.checkout-page-shell){ width:min(var(--ely-r-checkout-max),calc(100% - (var(--ely-r-gutter) * 2)))!important; max-width:var(--ely-r-checkout-max)!important; margin-inline:auto!important; } /* Dynamic text must wrap; card/layout widths remain authoritative. */ body.elysian-level23-responsive :where( .woocommerce-loop-product__title, .product_title, .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice, .elysian-confirmation-item-copy, .elysian-confirmation-delivery, .elysian-tracking-card, .elysian-l14-order-card, .v589-footer, .mobile-drawer, .ely-support-menu, .elysian-live-chat-panel ){overflow-wrap:anywhere;word-break:normal;} /* Product grid density has one canonical default; smaller widths override below. */ body.elysian-level23-responsive .woocommerce ul.products{ grid-template-columns:repeat(4,minmax(0,1fr))!important; } /* Product media cannot widen a grid track. */ body.elysian-level23-responsive .woocommerce ul.products li.product, body.elysian-level23-responsive .woocommerce ul.products li.product a, body.elysian-level23-responsive .woocommerce ul.products li.product img, body.elysian-level23-responsive .woocommerce div.product div.images, body.elysian-level23-responsive .woocommerce div.product div.summary{max-width:100%;} /* Tables and deliberately horizontal controls scroll instead of crushing content. */ body.elysian-level23-responsive :where( .elysian-size-guide-table-wrap, .woocommerce-cart-form, .woocommerce-MyAccount-orders, .entry-content ){max-width:100%;} body.elysian-level23-responsive :where( .elysian-size-guide-table-wrap, .woocommerce-MyAccount-orders ){overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;} body.elysian-level23-responsive :where( .quick-category-track, .elysian-l25-chip-rail, .elysian-l25-quick-refine, .elysian-l25-active-filters, .woocommerce div.product .woocommerce-tabs ul.tabs, .elysian-l14-account-nav, .elysian-mobile-discovery-track ){scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;} body.elysian-level23-responsive :where( .quick-category-track, .elysian-l25-chip-rail, .elysian-l25-quick-refine, .elysian-l25-active-filters, .woocommerce div.product .woocommerce-tabs ul.tabs, .elysian-l14-account-nav, .elysian-mobile-discovery-track )::-webkit-scrollbar{display:none;} /* Viewport-bound surfaces respect dynamic viewport height and safe areas. */ body.elysian-level23-responsive :where( .elysian-l11-bag-drawer, .v57-quick-add-drawer, .elysian-l25-filter-panel, .elysian-live-chat-panel, .elysian-dozen-color-menu, .ely-app-install-dialog ){max-width:calc(100vw - (var(--ely-r-dialog-gap) * 2));} body.elysian-level23-responsive :where( .elysian-live-chat-panel, .elysian-dozen-color-menu ){max-height:calc(100dvh - (var(--ely-r-dialog-gap) * 2));} /* Fixed mobile controls share the same safe-area contract. */ body.elysian-level23-responsive :where( .mobile-bottom-nav-refined, .v35-product-mobile-bar, .elysian-l11-mobile-checkout, .elysian-l12-mobile-place-order ){padding-bottom:calc(9px + var(--ely-r-safe-bottom));} /* ---------- Wide screens ---------- */ @media (min-width:1440px){ :root{ --ely-r-gutter:24px; --ely-r-shop-gutter:28px; } body.elysian-level23-responsive .woocommerce ul.products{ grid-template-columns:repeat(4,minmax(0,1fr))!important; } } /* ---------- Compact desktop ---------- */ @media (max-width:1180px){ :root{ --ely-r-gutter:20px; --ely-r-shop-gutter:20px; --ely-r-dialog-gap:20px; } body.elysian-level23-responsive .woocommerce ul.products{ grid-template-columns:repeat(3,minmax(0,1fr))!important; } body.elysian-level23-responsive .v589-footer-grid{gap:clamp(32px,5vw,56px)!important;} } /* ---------- Tablet / mobile-navigation mode ---------- */ @media (max-width:980px){ :root{ --ely-r-gutter:18px; --ely-r-shop-gutter:18px; --ely-r-dialog-gap:16px; } /* Product detail stops behaving like a squeezed desktop split layout. */ body.elysian-level23-responsive.single-product .woocommerce div.product{ grid-template-columns:minmax(0,1fr)!important; gap:clamp(24px,4vw,34px)!important; } body.elysian-level23-responsive.single-product .woocommerce div.product div.summary{ position:static!important; top:auto!important; } body.elysian-level23-responsive.single-product .woocommerce div.product :where( .woocommerce-tabs, .related.products, .upsells.products ){grid-column:1!important;} body.elysian-level23-responsive .woocommerce div.product .woocommerce-tabs ul.tabs{ display:flex!important; flex-wrap:nowrap!important; overflow-x:auto!important; gap:22px!important; } body.elysian-level23-responsive .woocommerce div.product .woocommerce-tabs ul.tabs li{ flex:0 0 auto!important; margin-right:0!important; } /* Footer columns collapse before they become narrow text columns. */ body.elysian-level23-responsive .v589-footer-grid{ grid-template-columns:1fr!important; gap:36px!important; } } /* ---------- Handset ---------- */ @media (max-width:760px){ :root{ --ely-r-gutter:16px; --ely-r-shop-gutter:16px; --ely-r-dialog-gap:12px; --ely-r-section-gap:48px; } body.elysian-level23-responsive .woocommerce ul.products{ grid-template-columns:repeat(2,minmax(0,1fr))!important; column-gap:12px!important; row-gap:28px!important; } body.elysian-level23-responsive .woocommerce ul.products li.product{ width:auto!important; min-width:0!important; margin-inline:0!important; } /* Native controls use 16px text to prevent iOS focus zoom. */ body.elysian-level23-responsive :where( input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="password"], input[type="number"], textarea, select, .select2-selection__rendered, .elysian-l22-search-input ){font-size:16px!important;} body.elysian-level23-responsive :where( .quick-category-track, .elysian-l25-chip-rail, .elysian-l25-quick-refine, .elysian-l25-active-filters, .woocommerce div.product .woocommerce-tabs ul.tabs ){ justify-content:flex-start!important; overflow-x:auto!important; scroll-padding-inline:var(--ely-r-gutter); } body.elysian-level23-responsive .woocommerce div.product .woocommerce-tabs ul.tabs{ margin-inline:calc(var(--ely-r-gutter) * -1)!important; padding-inline:var(--ely-r-gutter)!important; } body.elysian-level23-responsive :where( .elysian-l11-bag-drawer, .v57-quick-add-drawer, .elysian-l25-filter-panel, .elysian-live-chat-panel, .elysian-dozen-color-menu ){max-width:calc(100vw - 24px);} body.elysian-level23-responsive :where( .elysian-live-chat-panel, .elysian-dozen-color-menu ){max-height:calc(100dvh - 24px - var(--ely-r-safe-top));} /* Horizontal action rows may scroll, but the page itself may not. */ body.elysian-level23-responsive :where( .elysian-l14-account-nav, .elysian-mobile-discovery-track, .elysian-l25-chip-rail, .elysian-l25-quick-refine, .elysian-l25-active-filters ){overflow-x:auto!important;overflow-y:hidden!important;} } /* ---------- Small phone ---------- */ @media (max-width:430px){ :root{ --ely-r-gutter:14px; --ely-r-shop-gutter:14px; --ely-r-dialog-gap:10px; } body.elysian-level23-responsive .woocommerce ul.products{ column-gap:10px!important; row-gap:24px!important; } body.elysian-level23-responsive :where( .elysian-l11-bag-drawer, .v57-quick-add-drawer, .elysian-l25-filter-panel, .elysian-live-chat-panel ){max-width:calc(100vw - 20px);} } /* ---------- Narrow phone ---------- */ @media (max-width:360px){ :root{ --ely-r-gutter:12px; --ely-r-shop-gutter:12px; --ely-r-dialog-gap:8px; } body.elysian-level23-responsive .woocommerce ul.products{column-gap:8px!important;} body.elysian-level23-responsive .woocommerce ul.products li.product :where(.button,.elysian-card-choose-size,.v511-shop-choose-size){ max-width:100%; white-space:normal!important; text-align:center; } body.elysian-level23-responsive :where(.elysian-kacher-pack-grid,.elysian-dozen-size-grid){ grid-template-columns:1fr!important; } } /* Short landscape devices: keep drawers / pickers reachable above browser UI. */ @media (max-height:520px) and (orientation:landscape){ body.elysian-level23-responsive :where( .elysian-live-chat-panel, .elysian-dozen-color-menu ){ max-height:calc(100dvh - 16px)!important; overscroll-behavior:contain; } } @media (prefers-reduced-motion:reduce){ body.elysian-level23-responsive :where( .quick-category-track, .elysian-l25-chip-rail, .elysian-l25-quick-refine, .elysian-l25-active-filters, .elysian-mobile-discovery-track ){scroll-behavior:auto!important;} } /* ---------- v5.68.2 footer geometry hotfix ---------- * Live desktop evidence showed the nested navigation tracks compressing the * Company column enough to split its heading and links. Keep semantic