/* * Kelco V4 Evergreen - legacy-style.css * * Loaded AFTER style.css. * * This file contains compatibility fallbacks for older standards-based * browsers. It intentionally does NOT attempt to support Internet Explorer 11. * * JavaScript in evergreen-header.js adds capability classes to , such as: * * no-css-math * no-clamp * no-aspect-ratio * no-logical-properties * no-inset * no-overflow-wrap-anywhere * no-fit-content * no-max-content * no-place-items * no-flex-gap * no-focus-visible * no-focus-within * * Modern browsers do not receive these classes, so these rules remain inert. */ /* ========================================================================== 01. CSS min() / max() fallbacks ========================================================================== */ .no-css-math .container { width: 92%; max-width: 1320px; margin-left: auto; margin-right: auto; } .no-css-math .product-list-page .container, .no-css-math .cart-page .container, .no-css-math .checkout-address-page .container, .no-css-math .checkout-payment-page .container, .no-css-math .order-confirmation-page .container, .no-css-math .account-login-page .container, .no-css-math .account-info-page .container, .no-css-math .order-history-page .container, .no-css-math .order-inquiry-page .container, .no-css-math .change-password-page .container, .no-css-math .events-calendar-page .container, .no-css-math .how-to-videos-page .container, .no-css-math .product-manuals-page .container, .no-css-math .catalog-download-page .container, .no-css-math .contact-page .container, .no-css-math .showitem-page .container { width: calc(100% - 3rem); max-width: 1320px; margin-left: auto; margin-right: auto; } .no-css-math .header-main { width: 92%; max-width: 1320px; margin-left: auto; margin-right: auto; } .no-css-math .hero-container { width: 92%; max-width: 1320px; margin-left: auto; margin-right: auto; } .no-css-math .header-topbar { padding-left: 4vw; padding-right: 4vw; } .no-css-math .nav-dropdown { width: 360px; max-width: 90vw; } .no-css-math .header-search-panel__inner { width: calc(100% - 2rem); max-width: 1200px; } .no-css-math .hero-actions { width: 100%; max-width: 310px; } .no-css-math .information-section > .container { width: 96%; max-width: 1320px; } .no-css-math .error-card { width: 100%; max-width: 760px; } @media (max-width: 900px) { .no-css-math .cart-page .container { width: calc(100% - 2rem); } } @media (max-width: 820px) { .no-css-math .catalog-download-cover img { width: 72vw; max-width: 300px; } } @media (max-width: 768px) { .no-css-math .container { width: calc(100% - 2rem); max-width: 720px; } } @media (max-width: 700px) { .no-css-math .showitem-page .container { width: calc(100% - 2rem); } } @media (max-width: 680px) { .no-css-math .cart-page .container, .no-css-math .checkout-address-page .container, .no-css-math .checkout-payment-page .container, .no-css-math .order-confirmation-page .container, .no-css-math .account-login-page .container, .no-css-math .account-info-page .container, .no-css-math .order-history-page .container, .no-css-math .order-inquiry-page .container, .no-css-math .change-password-page .container, .no-css-math .events-calendar-page .container, .no-css-math .how-to-videos-page .container, .no-css-math .product-manuals-page .container, .no-css-math .contact-page .container { width: calc(100% - 2rem); } } @media (max-width: 470px) { .no-css-math .cart-page .container { width: calc(100% - 1.25rem); } } @media (max-width: 420px) { .no-css-math .showitem-page .container, .no-css-math .events-calendar-page .container { width: calc(100% - 1.25rem); } .no-css-math .footer-main { width: calc(100% - 2rem); max-width: 420px; } } /* ========================================================================== 02. clamp() fallbacks ========================================================================== */ .no-clamp .hero-title { font-size: 4rem; } .no-clamp .product-group-hero__title { font-size: 4rem; } .no-clamp .product-list-hero h1, .no-clamp .showitem-hero h1 { font-size: 3rem; } .no-clamp .product-list-hero h1, .no-clamp .checkout-address-hero h1, .no-clamp .checkout-payment-hero h1, .no-clamp .order-confirmation-hero h1, .no-clamp .account-login-hero h1, .no-clamp .account-info-hero h1, .no-clamp .order-history-hero h1, .no-clamp .order-inquiry-hero h1, .no-clamp .change-password-hero h1, .no-clamp .events-calendar-hero h1, .no-clamp .how-to-videos-hero h1, .no-clamp .product-manuals-hero h1, .no-clamp .catalog-download-hero h1, .no-clamp .contact-hero h1 { font-size: 3rem; } .no-clamp .showitem-info h2 { font-size: 1.9rem; } .no-clamp .events-calendar-intro h2 { font-size: 2rem; } .no-clamp .manual-directory-header h2 { font-size: 2.25rem; } .no-clamp .error-page { padding: 3rem 1rem; } .no-clamp .error-card { padding: 2rem; } .no-clamp .error-card h1 { font-size: 2.5rem; } @media (max-width: 900px) { .no-clamp .product-group-hero__title { font-size: 3rem; } } @media (max-width: 768px) { .no-clamp .hero-title { font-size: 3.25rem; } } @media (max-width: 700px) { .no-clamp .showitem-hero h1 { font-size: 2.25rem; } } @media (max-width: 420px) { .no-clamp .showitem-hero h1 { font-size: 2rem; } } /* ========================================================================== 03. Logical-property fallbacks ========================================================================== */ .no-logical-properties .container, .no-logical-properties .header-main, .no-logical-properties .header-search-panel__inner { margin-left: auto; margin-right: auto; } .no-logical-properties .header-search-panel__inner { padding-top: 1rem; padding-bottom: 1rem; } .no-logical-properties .browser-compatibility-warning__inner { margin-left: auto; margin-right: auto; } @media (max-width: 900px) { .no-logical-properties .cart-line { padding-left: 1rem; padding-right: 1rem; } } @media (max-width: 420px) { .no-logical-properties .events-month__header, .no-logical-properties .event-card { padding-left: 0.85rem; padding-right: 0.85rem; } } /* ========================================================================== 04. inset shorthand fallbacks ========================================================================== */ .no-inset .product-list-hero::after, .no-inset .checkout-address-hero::after, .no-inset .checkout-payment-hero::after, .no-inset .order-confirmation-hero::after, .no-inset .account-login-hero::after, .no-inset .account-info-hero::after, .no-inset .order-history-hero::after, .no-inset .order-inquiry-hero::after, .no-inset .change-password-hero::after, .no-inset .events-calendar-hero::after, .no-inset .how-to-videos-hero::after, .no-inset .product-manuals-hero::after, .no-inset .contact-hero::after, .no-inset .showitem-hero::after, .no-inset .catalog-download-hero::after, .no-inset .product-group-hero__image, .no-inset .product-group-hero__overlay, .no-inset .hero-background, .no-inset .hero-overlay, .no-inset .cart-heading::after { top: 0; right: 0; bottom: 0; left: 0; } /* ========================================================================== 05. aspect-ratio fallback ========================================================================== */ /* * The normal desktop/tablet video height is already explicit in style.css. * aspect-ratio is only required by the small-screen rule where height becomes * auto. Restore a calculated height for older browsers. */ @media (max-width: 760px) { .no-aspect-ratio .how-to-video-card__embed { height: calc((100vw - 2rem) * 0.8020833333); max-height: 385px; } } /* ========================================================================== 06. Intrinsic sizing and text wrapping ========================================================================== */ .no-fit-content .event-card__attendance, .no-fit-content .event-card__status { display: inline-block; width: auto; } .no-max-content .cart-quick-add__fields { width: auto; } .no-overflow-wrap-anywhere .reviews-slide .testimonial-text { overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; } /* ========================================================================== 07. place-items fallback ========================================================================== */ .no-place-items .header-search-close, .no-place-items .cart-quick-add__icon, .no-place-items .events-info-card__icon, .no-place-items .how-to-videos-help__icon, .no-place-items .error-card__status { align-items: center; justify-items: center; } .no-place-items .error-page { align-items: start; justify-items: center; } /* ========================================================================== 08. :focus-visible and :focus-within fallbacks ========================================================================== */ .no-focus-visible .nav-dropdown-toggle:focus { color: var(--color-primary); outline: 3px solid rgba(29, 110, 92, 0.25); outline-offset: 4px; border-radius: 3px; } .no-focus-visible .nav-dropdown a:focus { color: var(--color-primary-dark); background: rgba(29, 110, 92, 0.08); } @media (max-width: 900px) { .no-focus-visible .mobile-menu-toggle:focus, .no-focus-visible .mobile-nav-close:focus, .no-focus-visible nav.mobile-navigation .mobile-nav-item > a:focus, .no-focus-visible nav.mobile-navigation .mobile-nav-utility a:focus { outline: 3px solid rgba(29, 110, 92, 0.35); outline-offset: 2px; } .no-focus-visible nav.mobile-navigation .mobile-nav-logo-link:focus { outline: 2px solid rgba(29, 110, 92, 0.25); outline-offset: 4px; } } .no-focus-within .nav-item-resources.legacy-focus-within .nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition-delay: 0s; } .no-focus-within .nav-item-resources.legacy-focus-within .nav-dropdown-icon { transform: rotate(180deg); } /* ========================================================================== 09. Flexbox gap fallbacks ========================================================================== */ /* * Grid gap is part of our baseline because standard CSS Grid is required. * These rules only compensate for browsers that support Grid gap but not * Flexbox gap (notably older Safari). */ /* Horizontal, non-wrapping groups. */ .no-flex-gap .topbar-contact > * + *, .no-flex-gap .topbar-links > * + * { margin-left: 1.25rem; } .no-flex-gap .nav-menu > * + * { margin-left: 2rem; } .no-flex-gap .nav-dropdown-toggle > * + * { margin-left: 0.35rem; } .no-flex-gap .header-actions > * + * { margin-left: 1rem; } .no-flex-gap main .breadcrumb > * + * { margin-left: 0.6rem; } .no-flex-gap .product-group-jump-nav__inner > * + * { margin-left: 0.35rem; } .no-flex-gap .product-results__toolbar label > * + * { margin-left: 0.55rem; } .no-flex-gap .showitem-larger-image > * + * { margin-left: 0.35rem; } .no-flex-gap .cart-breadcrumb > * + * { margin-left: 0.55rem; } .no-flex-gap .events-calendar-legend > * + * { margin-left: 0.55rem; } .no-flex-gap .event-card__location > * + * { margin-left: 0.45rem; } /* Vertical flex groups. */ .no-flex-gap .benefits-list > * + * { margin-top: 0.85rem; } .no-flex-gap .product-list > * + * { margin-top: 1rem; } .no-flex-gap .footer-menu > * + *, .no-flex-gap .footer-contact-details > * + * { margin-top: 0.65rem; } /* Two-item / action rows. */ .no-flex-gap .hero-actions > * + * { margin-left: 1rem; } .no-flex-gap .featured-products .section-header > * + * { margin-left: 1rem; } .no-flex-gap .view-all-link > * + *, .no-flex-gap .catalog-button > * + * { margin-left: 0.6rem; } .no-flex-gap .benefit-item > * + * { margin-left: 0.75rem; } .no-flex-gap .catalog-benefits li > * + * { margin-left: 0.55rem; } .no-flex-gap .cart-quick-add__copy > * + * { margin-left: 0.85rem; } .no-flex-gap .cart-order__top > * + *, .no-flex-gap .cart-order__bottom > * + *, .no-flex-gap .checkout-submit-bar > * + *, .no-flex-gap .payment-submit-bar > * + *, .no-flex-gap .events-calendar-intro > * + *, .no-flex-gap .events-month__header > * + * { margin-left: 1rem; } .no-flex-gap .checkout-check > * + * { margin-left: 0.8rem; } .no-flex-gap .payment-security > * + * { margin-left: 0.75rem; } .no-flex-gap .contact-info-list > div > * + * { margin-left: 0.75rem; } /* Wrapping action groups: use child margins and compensate on the container. */ .no-flex-gap .how-to-video-card__actions, .no-flex-gap .how-to-videos-help__actions, .no-flex-gap .manual-help__actions, .no-flex-gap .legal-links { margin-right: -0.85rem; margin-bottom: -0.85rem; } .no-flex-gap .how-to-video-card__actions > *, .no-flex-gap .how-to-videos-help__actions > *, .no-flex-gap .manual-help__actions > *, .no-flex-gap .legal-links > * { margin-right: 0.85rem; margin-bottom: 0.85rem; } /* Responsive corrections where the flex direction changes. */ @media (max-width: 992px) { .no-flex-gap .featured-products .section-header > * + * { margin-left: 0; margin-top: 1rem; } } @media (max-width: 768px) { .no-flex-gap .hero-actions > * + * { margin-left: 0; margin-top: 0.9rem; } .no-flex-gap .trust-item > * + * { margin-top: 0.65rem; } .no-flex-gap .credibility-content > * + * { margin-top: 0.8rem; } } @media (max-width: 680px) { .no-flex-gap .events-calendar-intro > * + * { margin-left: 0; margin-top: 0.85rem; } .no-flex-gap .checkout-submit-bar > * + *, .no-flex-gap .payment-submit-bar > * + * { margin-left: 0; margin-top: 1rem; } } @media (max-width: 420px) { .no-flex-gap .header-actions > * + * { margin-left: 0.4rem; } .no-flex-gap .footer-bottom-inner > * + * { margin-top: 0.65rem; } } /* ========================================================================== 10. CSS Grid fallback ========================================================================== */ /* * Some early/legacy browser builds either do not expose CSS Grid or do not * provide a sufficiently reliable implementation for the Evergreen layouts. * These rules replace the Grid structures used by the shared layout and the * homepage with Flexbox. * * Modern browsers never receive .no-css-grid. */ /* Header search */ .no-css-grid .header-search-form { display: flex; align-items: center; } .no-css-grid .header-search-form .header-search-input { flex: 1 1 auto; } .no-css-grid .header-search-form .header-search-submit, .no-css-grid .header-search-form .header-search-close { flex: 0 0 auto; margin-left: 0.625rem; } .no-css-grid .header-search-close { display: flex; align-items: center; justify-content: center; } /* Homepage trust bar */ .no-css-grid .trust-grid { display: flex; flex-wrap: wrap; margin-left: -1rem; margin-right: -1rem; } .no-css-grid .trust-item { box-sizing: border-box; flex: 0 0 25%; width: 25%; padding-left: 1rem; padding-right: 1rem; } /* Homepage categories */ .no-css-grid .category-grid { display: flex; flex-wrap: wrap; justify-content: space-between; margin-left: auto; margin-right: auto; } .no-css-grid .category-card { box-sizing: border-box; flex: 0 0 calc(50% - 1rem); width: calc(50% - 1rem); margin-left: 0; margin-right: 0; } /* Homepage featured products */ @media (min-width: 1201px) { .no-css-grid .product-grid { display: flex; flex-wrap: wrap; margin-left: -0.5rem; margin-right: -0.5rem; } .no-css-grid .product-card { box-sizing: border-box; flex: 0 0 calc(20% - 1rem); width: calc(20% - 1rem); margin-left: 0.5rem; margin-right: 0.5rem; } } @media (min-width: 993px) and (max-width: 1200px) { .no-css-grid .product-grid { display: flex; flex-wrap: wrap; margin-left: -0.5rem; margin-right: -0.5rem; } .no-css-grid .product-card { box-sizing: border-box; flex: 0 0 calc(25% - 1rem); width: calc(25% - 1rem); margin-left: 0.5rem; margin-right: 0.5rem; } } @media (min-width: 769px) and (max-width: 992px) { .no-css-grid .product-grid { display: flex; flex-wrap: wrap; margin-left: -0.5rem; margin-right: -0.5rem; } .no-css-grid .product-card { box-sizing: border-box; flex: 0 0 calc(33.333333% - 1rem); width: calc(33.333333% - 1rem); margin-left: 0.5rem; margin-right: 0.5rem; } } /* Homepage information area */ .no-css-grid .information-grid { display: flex; flex-wrap: wrap; } .no-css-grid .why-kelco-panel, .no-css-grid .testimonial-panel, .no-css-grid .catalog-panel { box-sizing: border-box; flex: 0 0 33.333333%; width: 33.333333%; } .no-css-grid .catalog-panel-inner { display: flex; align-items: center; } .no-css-grid .catalog-content { flex: 1 1 auto; /* * Grid's intrinsic sizing keeps this column from collapsing to a * one-word-wide strip. The Flexbox fallback needs an explicit floor. */ min-width: 135px; } .no-css-grid .catalog-image-wrap { /* Match the visible 210px catalog cover more closely than the 250px Grid track, while still allowing the panel to overflow as designed. */ flex: 0 0 210px; width: 210px; } /* Match the modern 1101-1250px information-panel proportions. */ @media (min-width: 1101px) and (max-width: 1250px) { .no-css-grid .why-kelco-panel { flex: 0 0 28.333333%; width: 28.333333%; } .no-css-grid .testimonial-panel { flex: 0 0 31.666667%; width: 31.666667%; } .no-css-grid .catalog-panel { flex: 0 0 40%; width: 40%; } } /* Footer */ .no-css-grid .footer-main { display: flex; flex-wrap: wrap; align-items: flex-start; } .no-css-grid .footer-brand, .no-css-grid .footer-column { box-sizing: border-box; } @media (min-width: 1101px) { .no-css-grid .footer-brand { flex: 0 0 24%; width: 24%; padding-right: 2rem; } .no-css-grid .footer-column { flex: 0 0 19%; width: 19%; padding-right: 1.5rem; } } @media (min-width: 769px) and (max-width: 1100px) { .no-css-grid .footer-brand { flex: 0 0 100%; width: 100%; margin-bottom: 2.5rem; } .no-css-grid .footer-column { flex: 0 0 33.333333%; width: 33.333333%; padding-right: 2rem; margin-bottom: 2.5rem; } } /* Responsive Grid fallbacks */ @media (max-width: 1100px) { .no-css-grid .why-kelco-panel, .no-css-grid .testimonial-panel { flex: 0 0 50%; width: 50%; } .no-css-grid .catalog-panel { flex: 0 0 100%; width: 100%; } .no-css-grid .catalog-image-wrap { flex-basis: 190px; width: 190px; } } @media (max-width: 768px) { .no-css-grid .category-grid { margin-left: 0; margin-right: 0; } .no-css-grid .category-card { flex: 0 0 100%; width: 100%; margin-left: 0; margin-right: 0; } .no-css-grid .product-grid { display: flex; flex-wrap: nowrap; margin-left: 0; margin-right: 0; } .no-css-grid .product-card { width: auto; margin-left: 0; margin-right: 0; } .no-css-grid .why-kelco-panel, .no-css-grid .testimonial-panel, .no-css-grid .catalog-panel { flex: 0 0 100%; width: 100%; } .no-css-grid .catalog-panel-inner { flex-direction: column; align-items: stretch; } .no-css-grid .catalog-image-wrap { flex: 0 0 auto; width: auto; } .no-css-grid .footer-main { display: flex; flex-direction: column; flex-wrap: nowrap; } .no-css-grid .footer-brand, .no-css-grid .footer-column { width: 100%; flex: 0 0 auto; padding-right: 0; } .no-css-grid .header-search-form { flex-wrap: wrap; } .no-css-grid .header-search-form .header-search-input { flex: 1 1 calc(100% - 3.5rem); } .no-css-grid .header-search-form .header-search-submit { flex: 0 0 100%; width: 100%; margin-top: 0.625rem; margin-left: 0; } } /* Flex-gap corrections for structures converted from Grid */ .no-css-grid.no-flex-gap .trust-item > * + * { margin-left: 1.25rem; } .no-css-grid.no-flex-gap .catalog-panel-inner > * + * { margin-left: 1.25rem; } @media (max-width: 768px) { .no-css-grid.no-flex-gap .trust-item > * + * { margin-left: 0; margin-top: 0.65rem; } .no-css-grid.no-flex-gap .catalog-panel-inner > * + * { margin-left: 0; margin-top: 1.5rem; } } /* ========================================================================== 11. BrowseProducts / product-group fallbacks ========================================================================== */ /* * Firefox 52 can exhibit two problems on BrowseProducts: * 1. the flex-based photographic hero can collapse despite min-height; * 2. the product-group directory Grid falls back to ordinary block flow. * * Give the legacy hero an explicit height and replace the directory Grid * with responsive Flexbox. */ /* Product-group photographic hero --------------------------------------- */ .kelco-legacy .product-group-hero { height: 330px; min-height: 330px; } .kelco-legacy .product-group-hero__container { box-sizing: border-box; width: 92%; max-width: 1320px; margin-left: auto; margin-right: auto; } /* * Firefox 52 does not support scrollbar-width. On legacy desktop/tablet * browsers, wrap the jump links rather than showing a large native * horizontal scrollbar. */ @media (min-width: 769px) { .kelco-legacy .product-group-jump-nav__inner { flex-wrap: wrap; justify-content: center; overflow-x: visible; padding-top: 0.45rem; padding-bottom: 0.45rem; } .kelco-legacy.no-flex-gap .product-group-jump-nav__inner > * { margin: 0.175rem; } .kelco-legacy.no-flex-gap .product-group-jump-nav__inner > * + * { margin-left: 0.175rem; } } /* Product-group directory Grid -> Flexbox ------------------------------- */ .no-css-grid .product-group-grid { display: flex; flex-wrap: wrap; margin: -0.7rem; } .no-css-grid .product-group-card { box-sizing: border-box; flex: 0 0 calc(25% - 1.4rem); width: calc(25% - 1.4rem); margin: 0.7rem; min-height: 0; } /* On wide desktops, large groups occupy the same two-column span as Grid. */ .no-css-grid .product-group-card--large { flex-basis: calc(50% - 1.4rem); width: calc(50% - 1.4rem); } /* Product-group link lists ---------------------------------------------- */ .no-css-grid .product-group-card ul { display: flex; flex-direction: column; } .no-css-grid .product-group-card ul > li + li { margin-top: 0.55rem; } .no-css-grid .product-group-card--large .product-group-card__links { flex-direction: row; flex-wrap: wrap; margin-left: -0.75rem; margin-right: -0.75rem; } .no-css-grid .product-group-card--large .product-group-card__links > li { box-sizing: border-box; width: calc(50% - 1.5rem); margin-left: 0.75rem; margin-right: 0.75rem; } .no-css-grid .product-group-card--large .product-group-card__links > li + li { margin-top: 0; } /* Match the responsive column counts from style.css --------------------- */ @media (max-width: 1200px) { .no-css-grid .product-group-card, .no-css-grid .product-group-card--large { flex-basis: calc(33.333333% - 1.4rem); width: calc(33.333333% - 1.4rem); } } @media (max-width: 900px) { .kelco-legacy .product-group-hero { height: 420px; min-height: 420px; } .no-css-grid .product-group-card, .no-css-grid .product-group-card--large { flex-basis: calc(50% - 1.4rem); width: calc(50% - 1.4rem); } .no-css-grid .product-group-card--large .product-group-card__links { display: flex; flex-direction: column; flex-wrap: nowrap; margin-left: 0; margin-right: 0; } .no-css-grid .product-group-card--large .product-group-card__links > li { width: 100%; margin-left: 0; margin-right: 0; } .no-css-grid .product-group-card--large .product-group-card__links > li + li { margin-top: 0.55rem; } } @media (max-width: 640px) { .kelco-legacy .product-group-hero { height: 520px; min-height: 520px; } .no-css-grid .product-group-grid { margin-left: 0; margin-right: 0; } .no-css-grid .product-group-card, .no-css-grid .product-group-card--large { flex: 0 0 100%; width: 100%; margin-left: 0; margin-right: 0; } .no-css-grid .product-group-card + .product-group-card { margin-top: 1.4rem; } } /* ========================================================================== 12. Legacy header cart icon ========================================================================== */ /* * Layout.tml uses the Unicode shopping-cart emoji as the visible cart icon. * Older Linux/Fedora installations may not have an emoji font containing * that glyph. The cart link and item-count badge still exist, but the icon * appears blank or as a missing-character box. * * For legacy browsers, hide the text glyph and draw a small cart using CSS. * The drawing inherits currentColor, so the existing hover color still works. */ .kelco-legacy .cart-icon { position: relative; display: inline-block; box-sizing: border-box; width: 24px; height: 21px; overflow: visible; color: inherit; font-size: 0; line-height: 0; vertical-align: middle; /* * Cart handle. Using a background rather than another DOM element keeps * this compatible with the existing Layout.tml markup. */ background: linear-gradient(currentColor, currentColor) 1px 3px / 7px 2px no-repeat; } /* Cart basket */ .kelco-legacy .cart-icon::before { content: ""; position: absolute; left: 5px; top: 5px; box-sizing: border-box; width: 15px; height: 9px; border: 2px solid currentColor; border-top-width: 2px; border-radius: 1px 1px 3px 3px; transform: skewX(-7deg); } /* Two wheels */ .kelco-legacy .cart-icon::after { content: ""; position: absolute; left: 7px; top: 17px; width: 3px; height: 3px; border-radius: 50%; background: currentColor; box-shadow: 10px 0 0 currentColor; } /* * Keep enough room for the existing red count badge. style.css positions the * badge relative to .cart-button; these values do not alter that behavior. */ .kelco-legacy .cart-button { min-width: 28px; min-height: 28px; } /* ========================================================================== 13. View Cart / shopping-cart Grid fallbacks ========================================================================== */ /* * The Evergreen cart uses CSS Grid for: * - quick-add panel and controls * - cart table headings and item rows * - item detail definition lists * - help / order-summary columns * - state estimator controls * * When no-css-grid is present, recreate those layouts with Flexbox. */ /* Quick add --------------------------------------------------------------- */ .no-css-grid .cart-quick-add { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .no-css-grid .cart-quick-add__copy { box-sizing: border-box; flex: 1 1 310px; min-width: 0; } .no-css-grid .cart-quick-add__fields { display: flex; flex: 0 0 auto; align-items: flex-end; width: auto; max-width: 100%; margin-left: 2.5rem; } .no-css-grid .cart-quick-add__fields .cart-field { box-sizing: border-box; flex: 0 0 auto; } .no-css-grid .cart-quick-add__fields .cart-field--item { width: 200px; } .no-css-grid .cart-quick-add__fields .cart-field--qty { width: 95px; margin-left: 1.25rem; } .no-css-grid .cart-quick-add__fields .cart-button-primary { flex: 0 0 124px; width: 124px; min-width: 124px; margin-left: 1.25rem; } .no-css-grid .cart-quick-add__message, .no-css-grid .cart-quick-add__errors { box-sizing: border-box; flex: 0 0 100%; width: 100%; } .no-css-grid .cart-quick-add__message:not(:empty), .no-css-grid .cart-quick-add__errors:not(:empty) { margin-top: 0.8rem; } /* inline-grid is unavailable with no-css-grid */ .no-css-grid .cart-quick-add__icon { display: inline-flex; align-items: center; justify-content: center; } /* Cart table heading ------------------------------------------------------ */ .no-css-grid .cart-table__head { display: flex; align-items: center; } .no-css-grid .cart-table__head > div { box-sizing: border-box; min-width: 0; } .no-css-grid .cart-table__head > div:nth-child(1) { flex: 0 0 120px; width: 120px; } .no-css-grid .cart-table__head > div:nth-child(2) { flex: 0 0 230px; width: 230px; } .no-css-grid .cart-table__head > div:nth-child(3) { flex: 1 1 0; } .no-css-grid .cart-table__head > div:nth-child(4) { flex: 0 0 145px; width: 145px; } /* Cart item rows ---------------------------------------------------------- */ .no-css-grid .cart-line { display: flex; flex-wrap: wrap; align-items: center; } .no-css-grid .cart-line__errors { box-sizing: border-box; flex: 0 0 100%; width: 100%; } .no-css-grid .cart-line__quantity, .no-css-grid .cart-line__product, .no-css-grid .cart-line__details, .no-css-grid .cart-line__price { box-sizing: border-box; min-width: 0; } .no-css-grid .cart-line__quantity { flex: 0 0 120px; width: 120px; } .no-css-grid .cart-line__product { flex: 0 0 230px; width: 230px; } .no-css-grid .cart-line__details { flex: 1 1 0; } .no-css-grid .cart-line__price { flex: 0 0 145px; width: 145px; } /* Cart item description details ------------------------------------------ */ .no-css-grid .cart-line__details dl { display: block; } .no-css-grid .cart-line__details dl > div { display: flex; align-items: flex-start; } .no-css-grid .cart-line__details dl > div + div { margin-top: 0.48rem; } .no-css-grid .cart-line__details dt { box-sizing: border-box; flex: 0 0 92px; width: 92px; padding-right: 0.75rem; } .no-css-grid .cart-line__details dd { flex: 1 1 auto; min-width: 0; } .no-css-grid .cart-pds-code { display: inline-flex; align-items: center; justify-content: center; } /* Help / order summary ---------------------------------------------------- */ .no-css-grid .cart-checkout-grid { display: flex; align-items: flex-start; } .no-css-grid .cart-help, .no-css-grid .cart-summary { box-sizing: border-box; min-width: 0; } .no-css-grid .cart-help { flex: 1 1 0; } .no-css-grid .cart-summary { flex: 0 0 430px; width: 430px; max-width: 430px; margin-left: 1.5rem; } /* State estimator --------------------------------------------------------- */ .no-css-grid .cart-state-estimator__controls { display: flex; align-items: flex-end; } .no-css-grid .cart-state-estimator__field { box-sizing: border-box; flex: 0 0 78px; width: 78px; } .no-css-grid .cart-state-estimator__controls .cart-state-estimator__button { box-sizing: border-box; flex: 1 1 auto; margin-left: 0.65rem; } /* Responsive cart fallbacks ---------------------------------------------- */ @media (max-width: 940px) { .no-css-grid .cart-quick-add { display: block; } .no-css-grid .cart-quick-add__fields { width: 100%; margin-top: 1.1rem; margin-left: 0; } .no-css-grid .cart-quick-add__fields .cart-field--item { flex: 1 1 auto; width: auto; } .no-css-grid .cart-quick-add__fields .cart-field--qty { flex: 0 0 96px; width: 96px; margin-left: 1rem; } .no-css-grid .cart-quick-add__fields .cart-button-primary { flex: 0 0 170px; width: 170px; min-width: 170px; margin-left: 1rem; } } @media (max-width: 900px) { .no-css-grid .cart-table__head { display: none; } .no-css-grid .cart-line__quantity { flex-basis: 96px; width: 96px; } .no-css-grid .cart-line__product { flex-basis: 170px; width: 170px; } .no-css-grid .cart-line__price { flex-basis: 100px; width: 100px; } .no-css-grid .cart-checkout-grid { display: block; } .no-css-grid .cart-summary { width: auto; max-width: none; margin-top: 1.5rem; margin-left: 0; } } @media (max-width: 680px) { .no-css-grid .cart-quick-add__fields { flex-wrap: wrap; } .no-css-grid .cart-quick-add__fields .cart-field--item { flex: 1 1 calc(100% - 110px); width: auto; } .no-css-grid .cart-quick-add__fields .cart-field--qty { flex: 0 0 94px; width: 94px; margin-left: 0.75rem; } .no-css-grid .cart-quick-add__fields .cart-button-primary { flex: 0 0 100%; width: 100%; margin-top: 0.75rem; margin-left: 0; } /* * Approximate the approved three-column mobile cart row with Flexbox: * quantity + image + description, then price on its own second line. */ .no-css-grid .cart-line { align-items: flex-start; } .no-css-grid .cart-line__quantity { flex: 0 0 86px; width: 86px; } .no-css-grid .cart-line__product { flex: 0 0 118px; width: 118px; } .no-css-grid .cart-line__details { flex: 1 1 calc(100% - 204px); } .no-css-grid .cart-line__price { flex: 0 0 calc(100% - 102px); width: calc(100% - 102px); margin-top: 0.9rem; margin-left: 102px; } .no-css-grid .cart-line__details dl > div { display: block; } .no-css-grid .cart-line__details dt { width: auto; padding-right: 0; } .no-css-grid .cart-line__details dd { margin-top: 0.1rem; } } @media (max-width: 470px) { .no-css-grid .cart-line__quantity { flex: 0 0 78px; width: 78px; } .no-css-grid .cart-line__product { flex: 0 0 105px; width: 105px; } .no-css-grid .cart-line__details { flex-basis: calc(100% - 183px); } .no-css-grid .cart-line__price { flex-basis: calc(100% - 94px); width: calc(100% - 94px); margin-left: 94px; } } /* ========================================================================== 14. SearchResults / ItemListForm Grid fallbacks ========================================================================== */ /* * ItemListForm is shared by SearchResults and ShowItem. Keep this fallback * scoped to .product-list-page so ShowItem can be handled independently. * * Modern SearchResults product row: * 170px image | flexible content | 142px purchase controls */ /* Desktop product row ----------------------------------------------------- */ .no-css-grid .product-list-page .product-row { display: flex; align-items: center; } .no-css-grid .product-list-page .product-row__image-link { box-sizing: border-box; flex: 0 0 170px; width: 170px; height: 144px; align-self: center; } .no-css-grid .product-list-page .product-row__image-link img, .no-css-grid .product-list-page .product-row__image { width: 100%; height: 100%; object-fit: cover; } .no-css-grid .product-list-page .product-row__content { box-sizing: border-box; flex: 1 1 auto; min-width: 0; margin-left: 1.35rem; } .no-css-grid .product-list-page .product-row__purchase { box-sizing: border-box; display: flex; flex: 0 0 142px; width: 142px; min-width: 0; flex-wrap: wrap; align-content: center; align-items: center; margin-left: 1.35rem; } .no-css-grid .product-list-page .product-row__purchase > label { box-sizing: border-box; flex: 0 0 42px; width: 42px; } .no-css-grid .product-list-page .product-row__purchase > input.form-control, .no-css-grid .product-list-page .product-row__purchase > input[type="number"] { box-sizing: border-box; flex: 1 1 0; width: auto; min-width: 0; margin-left: 0.45rem; } .no-css-grid .product-list-page .product-row__purchase > button, .no-css-grid .product-list-page .product-row__purchase > input[type="submit"], .no-css-grid .product-list-page .product-row__purchase > .product-row__backorder, .no-css-grid .product-list-page .product-row__purchase > .product-row__sold-out { box-sizing: border-box; flex: 0 0 100%; width: 100%; max-width: 100%; margin-top: 0.45rem; } .no-css-grid .product-list-page .product-row__purchase-message { box-sizing: border-box; flex: 0 0 100%; width: 100%; margin-top: 0.45rem; } /* Facts / small inline flex-gap fallbacks -------------------------------- */ .no-flex-gap .product-list-page .product-row__facts > div { margin-right: 1.5rem; margin-bottom: 0.7rem; } .no-flex-gap .product-list-page .stock-status::before { margin-right: 0.38rem; } /* Match the modern <= 1050px dimensions --------------------------------- */ @media (max-width: 1050px) { .no-css-grid .product-list-page .product-row__image-link { flex-basis: 145px; width: 145px; height: 123px; } .no-css-grid .product-list-page .product-row__purchase { flex-basis: 132px; width: 132px; } } /* Mobile: image + content first row, purchase controls second row -------- */ @media (max-width: 760px) { .no-css-grid .product-list-page .product-row { flex-wrap: wrap; align-items: flex-start; } .no-css-grid .product-list-page .product-row__image-link { flex: 0 0 105px; width: 105px; height: 89px; align-self: flex-start; } .no-css-grid .product-list-page .product-row__content { flex: 1 1 calc(100% - 121px); margin-left: 1rem; } .no-css-grid .product-list-page .product-row__purchase { flex: 0 0 100%; width: 100%; margin-top: 1rem; margin-left: 0; padding: 1rem 0 0; border-top: 1px solid #e5e9e7; border-left: 0; align-items: center; } .no-css-grid .product-list-page .product-row__purchase > label { flex: 0 0 38px; width: 38px; } .no-css-grid .product-list-page .product-row__purchase > input.form-control, .no-css-grid .product-list-page .product-row__purchase > input[type="number"] { flex: 0 0 76px; width: 76px; margin-left: 0.45rem; } .no-css-grid .product-list-page .product-row__purchase > button, .no-css-grid .product-list-page .product-row__purchase > input[type="submit"], .no-css-grid .product-list-page .product-row__purchase > .product-row__backorder, .no-css-grid .product-list-page .product-row__purchase > .product-row__sold-out { flex: 1 1 0; width: auto; max-width: none; margin-top: 0; margin-left: 0.45rem; } .no-css-grid .product-list-page .product-row__purchase-message { flex: 0 0 100%; width: 100%; margin-top: 0.6rem; } .no-flex-gap .product-list-page .product-row__facts > div { margin-right: 1rem; margin-bottom: 0.6rem; } } /* Small mobile ------------------------------------------------------------ */ @media (max-width: 470px) { .no-css-grid .product-list-page .product-row__image-link { flex-basis: 86px; width: 86px; height: 73px; } .no-css-grid .product-list-page .product-row__content { flex-basis: calc(100% - 102px); } .no-css-grid .product-list-page .product-row__purchase > label { flex-basis: 32px; width: 32px; } .no-css-grid .product-list-page .product-row__purchase > input.form-control, .no-css-grid .product-list-page .product-row__purchase > input[type="number"] { flex-basis: 64px; width: 64px; } } /* ========================================================================== 15. ShowItem Grid fallbacks ========================================================================== */ /* * ShowItem uses several nested Grid layouts: * * outer page: * product details | ordering help * description | ordering note * * product details: * media | product information * * product information: * 3-column facts * quantity / purchase controls * * ExtendedInfo also uses a two-column Grid. * * Recreate those structures with Flexbox when no-css-grid is present. */ /* Outer ShowItem layout --------------------------------------------------- */ .no-css-grid .showitem-layout { display: flex; flex-wrap: wrap; align-items: flex-start; } .no-css-grid .showitem-layout > .showitem-product, .no-css-grid .showitem-layout > .showitem-description-stack { box-sizing: border-box; flex: 1 1 calc(100% - 324px); width: calc(100% - 324px); min-width: 0; } .no-css-grid .showitem-layout > .showitem-help, .no-css-grid .showitem-layout > .showitem-ordering-note { box-sizing: border-box; flex: 0 0 300px; width: 300px; min-width: 0; margin-left: 1.5rem; } .no-css-grid .showitem-layout > .showitem-description-stack, .no-css-grid .showitem-layout > .showitem-ordering-note { margin-top: 1.5rem; } /* Product media + information -------------------------------------------- */ .no-css-grid .showitem-product { display: flex; align-items: stretch; } .no-css-grid .showitem-media { box-sizing: border-box; flex: 0 0 46%; width: 46%; } .no-css-grid .showitem-info { box-sizing: border-box; flex: 1 1 54%; width: 54%; min-width: 0; } /* Product facts ----------------------------------------------------------- */ .no-css-grid .showitem-info .product-row__facts, .no-css-grid .showitem-facts { display: flex; align-items: stretch; } .no-css-grid .showitem-info .product-row__facts > div, .no-css-grid .showitem-facts > div { box-sizing: border-box; flex: 0 0 33.333333%; width: 33.333333%; } .no-css-grid .showitem-info .product-row__facts > div + div, .no-css-grid .showitem-facts > div + div { border-left: 1px solid #dfe5e1; } /* Purchase controls ------------------------------------------------------- */ /* * DOM order is label, input, purchase control. The modern Grid places the * label above the quantity field while the button occupies the right side. * Use a positioned label and a Flexbox row to reproduce that geometry. */ .no-css-grid .showitem-info .product-row__purchase, .no-css-grid .showitem-purchase { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; box-sizing: border-box; padding-top: 2.25rem; } .no-css-grid .showitem-info .product-row__purchase > label { position: absolute; top: 0.65rem; left: 0.75rem; width: 70px; } .no-css-grid .showitem-info .product-row__purchase input.form-control { box-sizing: border-box; flex: 0 0 70px; width: 70px; } .no-css-grid .showitem-info .product-row__purchase > button, .no-css-grid .showitem-info .product-row__purchase > input[type="submit"] { box-sizing: border-box; flex: 1 1 0; width: auto; max-width: none; margin-left: 0.85rem; } .no-css-grid .showitem-info .product-row__backorder { box-sizing: border-box; flex: 1 1 0; width: auto; max-width: none; margin-left: 0.85rem; } .no-css-grid .showitem-info .product-row__backorder input[type="submit"], .no-css-grid .showitem-info .product-row__backorder button { width: 100%; max-width: none; } .no-css-grid .showitem-info .product-row__purchase-message, .no-css-grid .showitem-info .product-row__showitem-backorder-note, .no-css-grid .showitem-purchase-note { box-sizing: border-box; flex: 0 0 100%; width: 100%; margin-top: 0.55rem; } /* Description + ExtendedInfo --------------------------------------------- */ .no-css-grid .showitem-description-stack { display: block; } .no-css-grid .showitem-description-stack > * + * { margin-top: 1.5rem; } .no-css-grid .extended-info__row { display: flex; flex-wrap: wrap; align-items: center; margin-left: -1rem; margin-right: -1rem; } .no-css-grid .extended-info__cell { box-sizing: border-box; flex: 0 0 50%; width: 50%; padding-left: 1rem; padding-right: 1rem; } .no-css-grid .extended-info__cell--span { flex-basis: 100%; width: 100%; } /* Small inline gap replacements ------------------------------------------ */ .no-flex-gap .showitem-larger-image > * + * { margin-left: 0.35rem; } /* <= 1000px: match the modern single-column outer ShowItem layout -------- */ @media (max-width: 1000px) { .no-css-grid .showitem-layout { display: flex; flex-direction: column; flex-wrap: nowrap; } .no-css-grid .showitem-layout > .showitem-product, .no-css-grid .showitem-layout > .showitem-description-stack, .no-css-grid .showitem-layout > .showitem-help, .no-css-grid .showitem-layout > .showitem-ordering-note { flex: 0 0 auto; width: 100%; max-width: none; margin-left: 0; } .no-css-grid .showitem-layout > .showitem-product { order: 1; } .no-css-grid .showitem-layout > .showitem-description-stack { order: 2; margin-top: 1.5rem; } .no-css-grid .showitem-layout > .showitem-help { order: 3; margin-top: 1.5rem; } .no-css-grid .showitem-layout > .showitem-ordering-note { order: 4; margin-top: 1.5rem; } /* * Modern CSS uses a small Grid for the help card at this breakpoint. * A normal block layout is a safer and still compact legacy fallback. */ .no-css-grid .showitem-help-card { display: block; } .no-css-grid .showitem-help-card a { display: inline-block; margin-top: 0.8rem; margin-right: 1.25rem; } } /* <= 700px: stack media above product information ------------------------ */ @media (max-width: 700px) { .no-css-grid .showitem-product { display: flex; flex-direction: column; } .no-css-grid .showitem-media, .no-css-grid .showitem-info { flex: 0 0 auto; width: 100%; } .no-css-grid .showitem-media { border-right: 0; border-bottom: 1px solid var(--color-border); } .no-css-grid .showitem-info .product-row__facts, .no-css-grid .showitem-facts { display: block; } .no-css-grid .showitem-info .product-row__facts > div, .no-css-grid .showitem-facts > div { width: 100%; } .no-css-grid .showitem-info .product-row__facts > div + div, .no-css-grid .showitem-facts > div + div { border-top: 1px solid #dfe5e1; border-left: 0; } .no-css-grid .showitem-info .product-row__purchase > label { width: 88px; } .no-css-grid .showitem-info .product-row__purchase input.form-control { flex-basis: 88px; width: 88px; } .no-css-grid .extended-info__row { display: block; margin-left: 0; margin-right: 0; } .no-css-grid .extended-info__cell, .no-css-grid .extended-info__cell--span { width: 100%; padding-left: 0; padding-right: 0; } .no-css-grid .extended-info__cell + .extended-info__cell { margin-top: 1.2rem; } } /* <= 420px: stack quantity and purchase action vertically ---------------- */ @media (max-width: 420px) { .no-css-grid .showitem-info .product-row__purchase, .no-css-grid .showitem-purchase { display: block; padding-top: 0.75rem; } .no-css-grid .showitem-info .product-row__purchase > label { position: static; width: auto; margin-bottom: 0.35rem; } .no-css-grid .showitem-info .product-row__purchase input.form-control { width: 100%; } .no-css-grid .showitem-info .product-row__purchase > button, .no-css-grid .showitem-info .product-row__purchase > input[type="submit"], .no-css-grid .showitem-info .product-row__backorder { width: 100%; margin-top: 0.7rem; margin-left: 0; } } /* ========================================================================== 16. Checkout Address / CheckoutBillShipto Grid fallbacks ========================================================================== */ /* * CheckoutBillShipto uses Grid at several levels: * * page layout: * checkout form | 330px order-summary/help aside * * address fields: * flexible city | 100px state | 150px zip * * saved shipping-address cards: * Grid is used mainly as a vertical stack * * SignIn / SignUp: * Grid is used for vertical form spacing * * Recreate those structures without changing the Tapestry templates. */ /* Shared checkout circles ------------------------------------------------- */ .no-css-grid .checkout-steps span, .no-css-grid .checkout-panel__number { display: flex; align-items: center; justify-content: center; } /* Desktop checkout form + aside ------------------------------------------ */ .no-css-grid .checkout-address-layout { display: flex; align-items: flex-start; } .no-css-grid .checkout-address-form { display: block; box-sizing: border-box; flex: 1 1 auto; min-width: 0; } .no-css-grid .checkout-order-aside { position: sticky; top: calc(var(--topbar-height) + var(--header-height) + 1.25rem); display: block; box-sizing: border-box; flex: 0 0 330px; width: 330px; min-width: 0; margin-left: 1.6rem; } .no-css-grid .checkout-order-aside > * + * { margin-top: 1rem; } /* Restore the vertical gap normally supplied by checkout-address-form Grid. */ .no-css-grid .checkout-address-form > * + * { margin-top: 1.25rem; } /* Billing / shipping address field layout -------------------------------- */ .no-css-grid .checkout-fields-grid { display: flex; flex-wrap: wrap; margin: -0.5rem -0.575rem; } .no-css-grid .checkout-fields-grid > .checkout-field, .no-css-grid .checkout-fields-grid > .checkout-check { box-sizing: border-box; margin: 0.5rem 0.575rem; } .no-css-grid .checkout-fields-grid > .checkout-field--full, .no-css-grid .checkout-fields-grid > .checkout-check.checkout-field--full { flex: 0 0 calc(100% - 1.15rem); width: calc(100% - 1.15rem); } .no-css-grid .checkout-fields-grid > .checkout-field--city { flex: 1 1 240px; width: auto; } .no-css-grid .checkout-fields-grid > .checkout-field--state { flex: 0 0 100px; width: 100px; } .no-css-grid .checkout-fields-grid > .checkout-field--zip { flex: 0 0 150px; width: 150px; } /* Checkbox content is a Grid-based vertical stack in modern browsers. */ .no-css-grid .checkout-check span { display: block; min-width: 0; } .no-css-grid .checkout-check strong, .no-css-grid .checkout-check small { display: block; } .no-css-grid .checkout-check small { margin-top: 0.18rem; } /* Saved shipping-address selector ---------------------------------------- */ .no-css-grid .checkout-address-options { display: block; } .no-css-grid .checkout-address-option { display: block; } .no-css-grid .checkout-address-option + .checkout-address-option { margin-top: 0.8rem; } /* * Critical Firefox 52 fallback: * without Grid support this span would otherwise revert to display:inline, * collapsing the card geometry and causing successive addresses to overlap. */ .no-css-grid .checkout-address-option__card { position: relative; display: block; box-sizing: border-box; width: 100%; min-height: 66px; } .no-css-grid .checkout-address-option__card > strong, .no-css-grid .checkout-address-option__card > span { display: block; } .no-css-grid .checkout-address-option__card > span { margin-top: 0.2rem; } .no-css-grid .checkout-address-option__card > em { display: block; } /* Reusable SignIn / SignUp component ------------------------------------- */ .no-css-grid .kelco-signin-component__form { display: block; } .no-css-grid .kelco-signin-component__form > * + * { margin-top: 1rem; } /* The checkout summary dl also uses Grid only for vertical spacing. */ .no-css-grid .checkout-summary-card dl { display: block; } .no-css-grid .checkout-summary-card dl > div + div { margin-top: 0.7rem; } /* <= 1000px: modern layout intentionally moves aside above the form ------- */ @media (max-width: 1000px) { .no-css-grid .checkout-address-layout { display: flex; flex-direction: column; align-items: stretch; } .no-css-grid .checkout-address-form { order: 2; width: 100%; margin-top: 1.25rem; } .no-css-grid .checkout-order-aside { position: static; order: 1; display: flex; width: 100%; flex: 0 0 auto; margin-left: 0; } .no-css-grid .checkout-order-aside > * { box-sizing: border-box; flex: 1 1 50%; width: 50%; min-width: 0; } .no-css-grid .checkout-order-aside > * + * { margin-top: 0; margin-left: 1rem; } } /* <= 680px: match existing compact field widths and one-column aside ------ */ @media (max-width: 680px) { .no-css-grid .checkout-fields-grid { margin: -0.425rem; } .no-css-grid .checkout-fields-grid > .checkout-field, .no-css-grid .checkout-fields-grid > .checkout-check { margin: 0.425rem; } .no-css-grid .checkout-fields-grid > .checkout-field--full, .no-css-grid .checkout-fields-grid > .checkout-check.checkout-field--full { flex-basis: calc(100% - 0.85rem); width: calc(100% - 0.85rem); } .no-css-grid .checkout-fields-grid > .checkout-field--city { flex: 1 1 180px; } .no-css-grid .checkout-fields-grid > .checkout-field--state { flex-basis: 78px; width: 78px; } .no-css-grid .checkout-fields-grid > .checkout-field--zip { flex-basis: 120px; width: 120px; } .no-css-grid .checkout-order-aside { display: block; } .no-css-grid .checkout-order-aside > * { width: 100%; } .no-css-grid .checkout-order-aside > * + * { margin-top: 1rem; margin-left: 0; } /* * style.css moves the address-card action below the address at this * breakpoint; ensure it is a normal block in the legacy path as well. */ .no-css-grid .checkout-address-option__card > em { position: static; margin-top: 0.2rem; transform: none; } } /* <= 430px: City full row, State + Zip beneath --------------------------- */ @media (max-width: 430px) { .no-css-grid .checkout-fields-grid > .checkout-field--city { flex: 0 0 calc(100% - 0.85rem); width: calc(100% - 0.85rem); } .no-css-grid .checkout-fields-grid > .checkout-field--state { flex: 0 0 72px; width: 72px; } .no-css-grid .checkout-fields-grid > .checkout-field--zip { flex: 1 1 120px; width: auto; } } /* ========================================================================== 17. Account / Change Password / Order History Grid fallbacks ========================================================================== */ /* * Account Information: * customer account card | 320-430px account actions * * Change Password / Order History: * 280px account sidebar | flexible main content * * The action cards and account sidebar also use Grid internally. Recreate * these layouts with Flexbox/block flow when no-css-grid is present. */ /* Shared account sidebar -------------------------------------------------- */ .no-css-grid .account-sidebar { display: block; } .no-css-grid .account-sidebar > * + * { margin-top: 1rem; } /* Account Information page ----------------------------------------------- */ .no-css-grid .account-info-layout { display: flex; align-items: flex-start; } .no-css-grid .account-info-layout > .account-sidebar__customer { box-sizing: border-box; flex: 1 1 auto; min-width: 0; } .no-css-grid .account-info-layout > .account-actions { box-sizing: border-box; flex: 0 0 390px; width: 390px; min-width: 320px; max-width: 430px; margin-left: 1.6rem; } .no-css-grid .account-actions { display: block; } .no-css-grid .account-actions > .account-action-card + .account-action-card { margin-top: 1rem; } /* Account action card: icon | content | arrow ---------------------------- */ .no-css-grid .account-action-card { display: flex; align-items: center; } .no-css-grid .account-action-card__icon { display: flex; flex: 0 0 46px; width: 46px; height: 46px; align-items: center; justify-content: center; } .no-css-grid .account-action-card__content { display: block; flex: 1 1 auto; min-width: 0; margin-left: 1rem; } .no-css-grid .account-action-card__content strong, .no-css-grid .account-action-card__content small { display: block; } .no-css-grid .account-action-card__content small { margin-top: 0.18rem; } .no-css-grid .account-action-card__arrow { flex: 0 0 auto; margin-left: 1rem; } /* Change Password --------------------------------------------------------- */ .no-css-grid .change-password-layout { display: flex; align-items: flex-start; } .no-css-grid .change-password-layout > .account-sidebar { box-sizing: border-box; flex: 0 0 280px; width: 280px; } .no-css-grid .change-password-layout > .change-password-main { box-sizing: border-box; flex: 1 1 auto; min-width: 0; margin-left: 1.6rem; } /* Older Firefox has Flexbox but not flex gap. */ .no-flex-gap .change-password-form__body > * + * { margin-top: 1.15rem; } .no-flex-gap .change-password-actions > * + * { margin-left: 1rem; } /* Order History ----------------------------------------------------------- */ .no-css-grid .order-history-layout { display: flex; align-items: flex-start; } .no-css-grid .order-history-layout > .account-sidebar { box-sizing: border-box; flex: 0 0 280px; width: 280px; } .no-css-grid .order-history-layout > .order-history-main { box-sizing: border-box; flex: 1 1 auto; min-width: 0; margin-left: 1.6rem; } .no-flex-gap .order-status::before { margin-right: 0.4rem; } /* <= 950px: Change Password and Order History become single-column ------- */ @media (max-width: 950px) { .no-css-grid .change-password-layout, .no-css-grid .order-history-layout { display: flex; flex-direction: column; align-items: stretch; } .no-css-grid .change-password-layout > .account-sidebar, .no-css-grid .order-history-layout > .account-sidebar { display: flex; width: 100%; flex: 0 0 auto; } .no-css-grid .change-password-layout > .account-sidebar > *, .no-css-grid .order-history-layout > .account-sidebar > * { box-sizing: border-box; flex: 1 1 50%; width: 50%; min-width: 0; } .no-css-grid .change-password-layout > .account-sidebar > * + *, .no-css-grid .order-history-layout > .account-sidebar > * + * { margin-top: 0; margin-left: 1rem; } .no-css-grid .change-password-layout > .change-password-main, .no-css-grid .order-history-layout > .order-history-main { width: 100%; margin-top: 1.6rem; margin-left: 0; } } /* <= 900px: Account Information stacks; actions become three columns ------ */ @media (max-width: 900px) { .no-css-grid .account-info-layout { display: block; } .no-css-grid .account-info-layout > .account-actions { display: flex; width: 100%; max-width: none; min-width: 0; margin-top: 1.6rem; margin-left: 0; } .no-css-grid .account-actions > .account-action-card { box-sizing: border-box; flex: 1 1 33.333333%; width: 33.333333%; align-items: flex-start; } .no-css-grid .account-actions > .account-action-card + .account-action-card { margin-top: 0; margin-left: 1rem; } .no-css-grid .account-action-card__arrow { display: none; } } /* <= 680px: one-column account cards and sidebar -------------------------- */ @media (max-width: 680px) { .no-css-grid .account-info-layout > .account-actions { display: block; } .no-css-grid .account-actions > .account-action-card { width: 100%; } .no-css-grid .account-actions > .account-action-card + .account-action-card { margin-top: 1rem; margin-left: 0; } .no-css-grid .account-action-card { align-items: center; } .no-css-grid .account-action-card__arrow { display: inline; } .no-css-grid .change-password-layout > .account-sidebar, .no-css-grid .order-history-layout > .account-sidebar { display: block; } .no-css-grid .change-password-layout > .account-sidebar > *, .no-css-grid .order-history-layout > .account-sidebar > * { width: 100%; } .no-css-grid .change-password-layout > .account-sidebar > * + *, .no-css-grid .order-history-layout > .account-sidebar > * + * { margin-top: 1rem; margin-left: 0; } .no-flex-gap .change-password-actions > * + * { margin-top: 1rem; margin-left: 0; } /* * Modern mobile Order History converts each table row to a 2-column * Grid. Recreate the compact card layout with Flexbox. */ .no-css-grid .order-history-table tr { display: flex; flex-wrap: wrap; } .no-css-grid .order-history-table td { display: flex; box-sizing: border-box; flex: 0 0 50%; width: 50%; align-items: center; } .no-css-grid .order-history-table td::before { box-sizing: border-box; flex: 0 0 72px; width: 72px; } .no-css-grid .order-history-table .order-action { flex: 0 0 100%; width: 100%; margin-top: 0.65rem; } } /* <= 430px: one field per row in mobile Order History -------------------- */ @media (max-width: 430px) { .no-css-grid .order-history-table td { flex-basis: 100%; width: 100%; } } /* ========================================================================== 18. Shared legacy header/footer refinements ========================================================================== */ /* * Firefox 52 ignores width:min(...), so the footer Flexbox layout from the * earlier no-css-grid fallback can still run full-bleed. Restore the same * centered inner width used by modern style.css. */ .no-css-math .footer-main, .no-css-math .footer-bottom-inner { box-sizing: border-box; width: 92%; max-width: 1320px; margin-left: auto; margin-right: auto; } /* * Resources is a button while the neighboring desktop nav entries are links. * Firefox 52 places the inline-flex button slightly high when combined with * the Resources hover-bridge padding/negative margin. Nudge only the visible * legacy button; leave the dropdown anchor point unchanged. */ .kelco-legacy .nav-dropdown-toggle { position: relative; top: 0.45rem; } /* ========================================================================== 19. OrderInquiry / Order Status Grid fallbacks ========================================================================== */ /* * Modern OrderInquiry uses Grid for: * - flexible order details + 330px totals/help aside * - vertical spacing in the main column and aside * - two billing/shipping address cards * - six-column item headings and rows * - PackageTracking label/value rows * * Recreate those structures with Flexbox/block layout when no-css-grid is * present. */ /* Outer OrderInquiry layout ---------------------------------------------- */ .no-css-grid .order-inquiry-layout { display: flex; align-items: flex-start; } .no-css-grid .order-inquiry-main { display: block; box-sizing: border-box; flex: 1 1 auto; min-width: 0; } .no-css-grid .order-inquiry-main > * + * { margin-top: 1.25rem; } .no-css-grid .order-inquiry-aside { position: sticky; top: calc(var(--topbar-height) + var(--header-height) + 1.25rem); display: block; box-sizing: border-box; flex: 0 0 330px; width: 330px; min-width: 0; margin-left: 1.6rem; } .no-css-grid .order-inquiry-aside > * + * { margin-top: 1rem; } /* Small Grid-only icons --------------------------------------------------- */ .no-css-grid .order-tracking__icon, .no-css-grid .order-pds-code { display: inline-flex; align-items: center; justify-content: center; } .no-css-grid .order-help-card__icon, .no-css-grid .package-tracking__message-icon { display: flex; align-items: center; justify-content: center; } /* Billing + shipping addresses ------------------------------------------- */ .no-css-grid .order-addresses { display: flex; align-items: stretch; } .no-css-grid .order-address-card { box-sizing: border-box; flex: 1 1 50%; width: 50%; min-width: 0; } .no-css-grid .order-address-card + .order-address-card { margin-left: 1.25rem; } /* Order item table: desktop ---------------------------------------------- */ .no-css-grid .order-items-table__head, .no-css-grid .order-item { display: flex; align-items: center; } .no-css-grid .order-items-table__head > div, .no-css-grid .order-item > div { box-sizing: border-box; min-width: 0; } .no-css-grid .order-items-table__head > div:nth-child(1), .no-css-grid .order-item__quantity { flex: 0 0 58px; width: 58px; } .no-css-grid .order-items-table__head > div:nth-child(2), .no-css-grid .order-item__number { flex: 0 0 105px; width: 105px; margin-left: 0.8rem; } .no-css-grid .order-items-table__head > div:nth-child(3), .no-css-grid .order-item__description { flex: 1 1 auto; min-width: 0; margin-left: 0.8rem; } .no-css-grid .order-items-table__head > div:nth-child(4), .no-css-grid .order-item__pds { flex: 0 0 62px; width: 62px; margin-left: 0.8rem; } .no-css-grid .order-items-table__head > div:nth-child(5), .no-css-grid .order-item__price { flex: 0 0 105px; width: 105px; margin-left: 0.8rem; text-align: right; } .no-css-grid .order-items-table__head > div:nth-child(6), .no-css-grid .order-item__your-price { flex: 0 0 105px; width: 105px; margin-left: 0.8rem; text-align: right; } /* Package tracking label/value rows -------------------------------------- */ .no-css-grid .package-tracking__row { display: flex; min-width: 0; } .no-css-grid .package-tracking__row dt { box-sizing: border-box; flex: 0 0 120px; width: 120px; } .no-css-grid .package-tracking__row dd { box-sizing: border-box; flex: 1 1 auto; min-width: 0; } /* Missing flex-gap spacing ------------------------------------------------ */ .no-flex-gap .order-inquiry-toolbar > * + * { margin-left: 1rem; } .no-flex-gap .order-inquiry-back > * + * { margin-left: 0.45rem; } .no-flex-gap .order-status-card__header > * + * { margin-left: 1rem; } .no-flex-gap .order-tracking summary > * + * { margin-left: 0.7rem; } .no-flex-gap .order-totals-card dl > div > * + * { margin-left: 1rem; } .no-flex-gap .package-tracking__message > * + * { margin-left: 0.75rem; } .no-flex-gap .package-tracking__status > * + * { margin-left: 0.45rem; } /* <= 1050px: modern layout moves the aside above the main column ---------- */ @media (max-width: 1050px) { .no-css-grid .order-inquiry-layout { display: flex; flex-direction: column; align-items: stretch; } .no-css-grid .order-inquiry-main { order: 2; width: 100%; margin-top: 1.6rem; } .no-css-grid .order-inquiry-aside { position: static; order: 1; display: flex; width: 100%; flex: 0 0 auto; margin-left: 0; } .no-css-grid .order-inquiry-aside > * { box-sizing: border-box; flex: 1 1 50%; width: 50%; min-width: 0; } .no-css-grid .order-inquiry-aside > * + * { margin-top: 0; margin-left: 1rem; } /* Reduced column widths mirror the modern <=1050 rule. */ .no-css-grid .order-items-table__head > div:nth-child(1), .no-css-grid .order-item__quantity { flex-basis: 50px; width: 50px; } .no-css-grid .order-items-table__head > div:nth-child(2), .no-css-grid .order-item__number { flex-basis: 90px; width: 90px; margin-left: 0.65rem; } .no-css-grid .order-items-table__head > div:nth-child(3), .no-css-grid .order-item__description { margin-left: 0.65rem; } .no-css-grid .order-items-table__head > div:nth-child(4), .no-css-grid .order-item__pds { flex-basis: 54px; width: 54px; margin-left: 0.65rem; } .no-css-grid .order-items-table__head > div:nth-child(5), .no-css-grid .order-item__price, .no-css-grid .order-items-table__head > div:nth-child(6), .no-css-grid .order-item__your-price { flex-basis: 92px; width: 92px; margin-left: 0.65rem; } } /* <= 760px: mobile order-item card layout -------------------------------- */ @media (max-width: 760px) { .no-css-grid .order-inquiry-aside { display: block; } .no-css-grid .order-inquiry-aside > * { width: 100%; } .no-css-grid .order-inquiry-aside > * + * { margin-top: 1rem; margin-left: 0; } .no-css-grid .order-addresses { display: block; } .no-css-grid .order-address-card { width: 100%; } .no-css-grid .order-address-card + .order-address-card { margin-top: 1.25rem; margin-left: 0; } .no-css-grid .order-items-table__head { display: none; } .no-css-grid .order-item { display: flex; flex-wrap: wrap; align-items: flex-start; } .no-css-grid .order-item__quantity { flex: 0 0 72px; width: 72px; order: 1; margin-left: 0; } .no-css-grid .order-item__number { flex: 1 1 calc(100% - 193px); width: auto; order: 2; margin-left: 1rem; } .no-css-grid .order-item__pds { flex: 0 0 105px; width: 105px; order: 3; margin-left: 1rem; text-align: right; } .no-css-grid .order-item__description { flex: 0 0 100%; width: 100%; order: 4; margin-top: 0.75rem; margin-left: 0; } .no-css-grid .order-item__price { flex: 1 1 calc(100% - 121px); width: auto; order: 5; margin-top: 0.75rem; margin-left: 0; padding-top: 0.75rem; border-top: 1px dashed #d9dfdc; text-align: left; } .no-css-grid .order-item__your-price { flex: 0 0 105px; width: 105px; order: 6; margin-top: 0.75rem; margin-left: 1rem; padding-top: 0.75rem; border-top: 1px dashed #d9dfdc; text-align: right; } } /* <= 480px: narrow mobile adjustments ------------------------------------ */ @media (max-width: 480px) { .no-css-grid .order-item__quantity { flex-basis: 60px; width: 60px; } .no-css-grid .order-item__number { flex-basis: calc(100% - 157px); } .no-css-grid .order-item__pds { flex-basis: 65px; width: 65px; } .no-css-grid .order-item__price { flex-basis: calc(100% - 81px); } .no-css-grid .order-item__your-price { flex-basis: 65px; width: 65px; } .no-flex-gap .order-inquiry-toolbar > * + * { margin-top: 0.75rem; margin-left: 0; } } /* ========================================================================== 20. Firefox 52 / legacy OrderInquiry print restoration ========================================================================== */ /* * legacy-style.css is loaded after style.css. During printing, the normal * legacy screen fallbacks therefore have greater cascade priority than some * of style.css's OrderInquiry @media print rules. * * Restore the intended print geometry here, at the very end of the legacy * stylesheet. These rules apply only while printing and only to the legacy * path. */ @media print { /* ------------------------------------------------------------------ Restore normal document order: print header -> main order details -> totals ------------------------------------------------------------------ */ .no-css-grid .order-inquiry-layout { display: block !important; width: 100% !important; } .no-css-grid .order-inquiry-main { display: block !important; width: 100% !important; margin: 0 !important; } .no-css-grid .order-inquiry-main > * + * { margin-top: 12pt !important; } .no-css-grid .order-inquiry-aside { position: static !important; display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; flex: none !important; } .no-css-grid .order-inquiry-aside > * { width: auto !important; max-width: none !important; margin-left: 0 !important; } .no-css-grid .order-inquiry-aside > * + * { margin-top: 0 !important; margin-left: 0 !important; } /* ------------------------------------------------------------------ Print header ------------------------------------------------------------------ */ .kelco-legacy .order-print-header { display: flex !important; width: 100% !important; margin: 0 0 16pt !important; padding: 0 0 12pt !important; align-items: flex-end !important; justify-content: space-between !important; border-bottom: 2px solid #1d6e5c !important; } .kelco-legacy .order-print-header__brand { display: block !important; } .kelco-legacy .order-print-header__logo { display: block !important; width: 150pt !important; max-width: 2.1in !important; height: auto !important; } .kelco-legacy .order-print-header__details { flex: 0 0 auto !important; text-align: right !important; } /* ------------------------------------------------------------------ Order status / Tracking row ------------------------------------------------------------------ */ .kelco-legacy .order-status-card__header { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; } /* * Old Gecko has some quirky print behavior around

. * Force the summary to remain visible as a normal print row. */ .kelco-legacy .order-tracking { display: block !important; } .kelco-legacy .order-tracking summary { display: block !important; padding: 8pt 12pt !important; color: #000000 !important; } .kelco-legacy .order-tracking summary a { display: inline !important; color: #000000 !important; text-decoration: none !important; } .kelco-legacy .order-tracking summary::after, .kelco-legacy .order-tracking__icon { display: none !important; } /* ------------------------------------------------------------------ Billing / shipping address cards Grid -> print-safe Flexbox ------------------------------------------------------------------ */ .no-css-grid .order-addresses { display: flex !important; width: 100% !important; margin: 0 0 12pt !important; align-items: stretch !important; } .no-css-grid .order-address-card { box-sizing: border-box !important; flex: 1 1 50% !important; width: 50% !important; margin: 0 !important; padding: 10pt 12pt !important; page-break-inside: avoid !important; } .no-css-grid .order-address-card + .order-address-card { margin-left: 10pt !important; } /* ------------------------------------------------------------------ Item table Override the V11 screen Flexbox fallback with the same print table model used by modern browsers. ------------------------------------------------------------------ */ .kelco-legacy .order-items-table { display: table !important; width: 100% !important; border-collapse: collapse !important; table-layout: fixed !important; } .no-css-grid .order-items-table__head { display: table-row-group !important; width: auto !important; padding: 0 !important; background: #eeeeee !important; } .no-css-grid .order-items-table__head > div { display: table-cell !important; box-sizing: border-box !important; margin: 0 !important; padding: 6pt !important; border-bottom: 1px solid #777777 !important; text-align: left !important; vertical-align: bottom !important; } .no-css-grid .order-items-table__head > div:nth-child(1) { width: 7% !important; } .no-css-grid .order-items-table__head > div:nth-child(2) { width: 14% !important; } .no-css-grid .order-items-table__head > div:nth-child(3) { width: 39% !important; } .no-css-grid .order-items-table__head > div:nth-child(4) { width: 7% !important; } .no-css-grid .order-items-table__head > div:nth-child(5), .no-css-grid .order-items-table__head > div:nth-child(6) { width: 16.5% !important; text-align: right !important; } .no-css-grid .order-item { display: table-row !important; width: auto !important; color: #000000 !important; page-break-inside: avoid !important; } .no-css-grid .order-item > div { display: table-cell !important; box-sizing: border-box !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 7pt 6pt !important; border-top: 1px solid #bbbbbb !important; vertical-align: top !important; text-align: left !important; } .no-css-grid .order-items-table__head + .order-item > div { border-top: 0 !important; } .no-css-grid .order-item__price, .no-css-grid .order-item__your-price { text-align: right !important; } .no-css-grid .order-item__mobile-label { display: none !important; } .no-css-grid .order-pds-code { display: inline !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; background: transparent !important; color: #000000 !important; } /* ------------------------------------------------------------------ Order totals ------------------------------------------------------------------ */ .no-css-grid .order-totals-card { box-sizing: border-box !important; width: 270pt !important; max-width: 270pt !important; margin: 0 0 0 auto !important; padding: 10pt 12pt 8pt !important; border: 0 !important; border-top: 2px solid #000000 !important; page-break-inside: avoid !important; } .no-css-grid .order-totals-card dl > div { display: flex !important; align-items: baseline !important; justify-content: space-between !important; margin: 0 !important; padding: 4pt 0 !important; } .no-css-grid .order-totals-card dt { flex: 1 1 auto !important; } .no-css-grid .order-totals-card dd { flex: 0 0 auto !important; min-width: 72pt !important; margin-left: 18pt !important; text-align: right !important; white-space: nowrap !important; } /* ------------------------------------------------------------------ Do not let legacy responsive rules alter print layout ------------------------------------------------------------------ */ .no-css-grid .order-inquiry-aside, .no-css-grid .order-inquiry-main, .no-css-grid .order-addresses, .no-css-grid .order-item { order: initial !important; } } /* ========================================================================== 21. Legacy header early-mobile breakpoint ========================================================================== */ /* * Modern browsers keep the desktop header through 769px and switch to the * mobile header at 768px. * * Firefox 52's older text/layout engine needs more horizontal room: between * roughly 769px and 1100px the topbar and primary navigation become cramped. * * For legacy browsers only, switch to the existing mobile-header pattern at * 1100px. Modern browsers retain the normal 768px breakpoint. */ @media (min-width: 769px) and (max-width: 975px) { .kelco-legacy body.mobile-menu-open { overflow: hidden; } .kelco-legacy .site-header { position: sticky; top: 0; z-index: 1000; background: var(--color-white); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); } .kelco-legacy .header-topbar { height: 42px; padding: 0 0.9rem; display: flex; justify-content: center; font-size: 0.88rem; font-weight: 600; text-align: center; letter-spacing: 0.02em; } .kelco-legacy .topbar-contact, .kelco-legacy .topbar-links { display: none; } .kelco-legacy .topbar-message { display: block; margin: 0; } .kelco-legacy .header-main { position: relative; box-sizing: border-box; width: 100%; min-height: 86px; margin: 0; padding: 0.75rem 1rem; display: flex; align-items: center; justify-content: space-between; } .kelco-legacy .logo-container { position: absolute; left: 50%; z-index: 10; transform: translateX(-50%); } .kelco-legacy .site-logo { width: auto; height: 64px; } .kelco-legacy .main-navigation { display: none; } .kelco-legacy .mobile-menu-toggle { position: relative; z-index: 20; box-sizing: border-box; width: 44px; height: 44px; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 0; background: transparent; cursor: pointer; } .kelco-legacy .mobile-menu-line { display: block; width: 28px; height: 3px; border-radius: 999px; background: #111111; } /* * Firefox 52 has no Flexbox gap. Explicit margins keep the hamburger * from collapsing into one thick black bar. */ .kelco-legacy .mobile-menu-line + .mobile-menu-line { margin-top: 6px; } .kelco-legacy .header-actions { display: flex; align-items: center; } .kelco-legacy .header-actions > * + * { margin-left: 0.85rem; } .kelco-legacy .search-button, .kelco-legacy .cart-button { box-sizing: border-box; width: 38px; height: 38px; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--color-heading); cursor: pointer; } .kelco-legacy span.cart-count { top: -8px; right: -8px; } /* Mobile slide-out navigation -------------------------------------- */ .kelco-legacy nav.mobile-navigation { position: fixed; z-index: 2002; top: 0; bottom: 0; left: 0; box-sizing: border-box; width: 88vw; max-width: 360px; height: 100vh; padding: 0; display: flex; flex-direction: column; overflow-y: auto; background: var(--color-white); box-shadow: 0 0 40px rgba(0, 0, 0, 0.2); transform: translateX(-105%); visibility: hidden; transition: transform 220ms ease, visibility 0s linear 220ms; } .kelco-legacy nav.mobile-navigation.is-open { transform: translateX(0); visibility: visible; transition-delay: 0s; } .kelco-legacy .mobile-nav-header { box-sizing: border-box; min-height: 88px; padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--color-border); background: var(--color-white); } .kelco-legacy .mobile-nav-logo-link { display: inline-flex; align-items: center; text-decoration: none; } .kelco-legacy .mobile-nav-logo { display: block; width: auto; max-width: 190px; height: 58px; } .kelco-legacy .mobile-nav-close { box-sizing: border-box; width: 44px; height: 44px; padding: 0; flex: 0 0 44px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: var(--color-primary-dark); font: inherit; font-size: 2rem; line-height: 1; cursor: pointer; } .kelco-legacy .mobile-nav-menu { display: block; margin: 0; padding: 0; list-style: none; background: var(--color-white); } .kelco-legacy .mobile-nav-item { margin: 0; border-bottom: 1px solid var(--color-border); background: var(--color-white); } .kelco-legacy nav.mobile-navigation .mobile-nav-item > a { box-sizing: border-box; min-height: 56px; padding: 0.9rem 1.35rem; display: flex; align-items: center; justify-content: flex-start; color: var(--color-heading); background: var(--color-white); font-size: 1rem; font-weight: 700; line-height: 1.3; text-align: left; text-decoration: none; text-transform: none; letter-spacing: 0; } .kelco-legacy .mobile-nav-section-label { margin: 0; padding: 1.15rem 1.35rem 0.5rem; background: var(--color-white); color: var(--color-primary-dark); font-size: 0.9rem; font-weight: 800; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; } .kelco-legacy nav.mobile-navigation .mobile-nav-item--resource > a { min-height: 46px; padding: 0.65rem 1.35rem 0.65rem 2rem; color: #4c5752; background: var(--color-white); font-size: 1rem; font-weight: 600; } .kelco-legacy .mobile-nav-utility { display: block; margin: 0; padding: 0; border-top: 0; background: var(--color-white); } .kelco-legacy nav.mobile-navigation .mobile-nav-utility a { box-sizing: border-box; min-height: 56px; padding: 0.9rem 1.35rem; display: flex; align-items: center; justify-content: flex-start; border-bottom: 1px solid var(--color-border); background: var(--color-white); color: var(--color-heading); font-size: 1rem; font-weight: 700; line-height: 1.3; text-align: left; text-decoration: none; } .kelco-legacy .mobile-nav-overlay { position: fixed; z-index: 2001; top: 0; right: 0; bottom: 0; left: 0; display: block; background: rgba(8, 25, 21, 0.56); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 220ms ease, visibility 0s linear 220ms; } .kelco-legacy .mobile-nav-overlay.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; } } /* * The standard <=768px mobile rules in style.css also use Flexbox gap for * the hamburger. Supply the same spacing there for Firefox 52. */ @media (max-width: 768px) { .kelco-legacy .mobile-menu-line + .mobile-menu-line { margin-top: 6px; } } /* ========================================================================== 22. Legacy Resources dropdown explicit open state ========================================================================== */ /* * Firefox 52 is given an explicit click-toggle state by mobile-menu.js. * Keep the normal modern hover/focus rules in style.css untouched. */ .kelco-legacy .nav-item-resources.legacy-dropdown-open .nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition-delay: 0s; } .kelco-legacy .nav-item-resources.legacy-dropdown-open .nav-dropdown-icon { transform: rotate(180deg); } /* ========================================================================== 23. Legacy header breakpoint refinement V16 ========================================================================== */ /* * Firefox 52 needs the mobile-style header through 1100px. The first desktop * range above that gets a little extra horizontal room and tighter spacing so * the long navigation labels remain single-line and their hover underline * stays in the same place as Contact. */ /* Center the logo vertically in every legacy mobile-header width. */ @media (max-width: 975px) { .kelco-legacy .logo-container { top: 50%; left: 50%; transform: translate(-50%, -50%); } } /* * Desktop buffer zone immediately above the legacy breakpoint. * Firefox 52 does not support flex gap, so override the margin fallback too. */ @media (min-width: 1101px) and (max-width: 1240px) { .kelco-legacy .header-main { width: 96%; max-width: 1320px; margin-left: auto; margin-right: auto; } .kelco-legacy .site-logo { height: 68px; } .kelco-legacy .nav-item > a, .kelco-legacy .nav-dropdown-toggle { white-space: nowrap; } .kelco-legacy.no-flex-gap .nav-menu > * + * { margin-left: 1.15rem; } .kelco-legacy.no-flex-gap .header-actions > * + * { margin-left: 0.7rem; } } /* ========================================================================== 24. Events Calendar Grid fallbacks ========================================================================== */ /* * Modern Events Calendar uses Grid for: * - main event list + 315px information aside * - month-list vertical spacing * - event date card + event details * - information-aside vertical spacing * * Recreate those structures with Flexbox/block flow when no-css-grid is * present. */ /* Desktop calendar: main list + 315px aside ------------------------------ */ .no-css-grid .events-calendar-layout { display: flex; align-items: flex-start; } .no-css-grid .events-calendar-main { box-sizing: border-box; flex: 1 1 auto; min-width: 0; } .no-css-grid .events-calendar-aside { position: sticky; top: calc(var(--topbar-height) + var(--header-height) + 1.25rem); display: block; box-sizing: border-box; flex: 0 0 315px; width: 315px; min-width: 0; margin-left: 1.6rem; } .no-css-grid .events-calendar-aside > * + * { margin-top: 1rem; } /* Month-list spacing ------------------------------------------------------ */ .no-css-grid .events-month-list { display: block; } .no-css-grid .events-month-list > .events-month + .events-month { margin-top: 1.35rem; } .no-css-grid .events-month__items { display: block; } /* Event rows: 96px date card + flexible details ------------------------- */ .no-css-grid .event-card { display: flex; align-items: center; } .no-css-grid .event-card__date { display: block; box-sizing: border-box; flex: 0 0 96px; width: 96px; min-width: 96px; } .no-css-grid .event-card__details { box-sizing: border-box; flex: 1 1 auto; min-width: 0; margin-left: 1.25rem; } /* Information-card icon -------------------------------------------------- */ .no-css-grid .events-info-card__icon { display: flex; align-items: center; justify-content: center; } /* Missing flex-gap replacements ----------------------------------------- */ .no-flex-gap .events-calendar-intro > * + * { margin-left: 1.5rem; } .no-flex-gap .events-calendar-legend > * + * { margin-left: 0.55rem; } .no-flex-gap .events-month__header > * + * { margin-left: 1rem; } .no-flex-gap .event-card__location > * + * { margin-left: 0.45rem; } /* <= 980px: modern layout places two info cards above event list -------- */ @media (max-width: 980px) { .no-css-grid .events-calendar-layout { display: flex; flex-direction: column; align-items: stretch; } .no-css-grid .events-calendar-main { order: 2; width: 100%; margin-top: 1.6rem; } .no-css-grid .events-calendar-aside { position: static; order: 1; display: flex; width: 100%; flex: 0 0 auto; margin-left: 0; } .no-css-grid .events-calendar-aside > * { box-sizing: border-box; flex: 1 1 50%; width: 50%; min-width: 0; } .no-css-grid .events-calendar-aside > * + * { margin-top: 0; margin-left: 1rem; } } /* <= 680px: one-column aside; compact event-row dimensions -------------- */ @media (max-width: 680px) { .no-css-grid .events-calendar-aside { display: block; } .no-css-grid .events-calendar-aside > * { width: 100%; } .no-css-grid .events-calendar-aside > * + * { margin-top: 1rem; margin-left: 0; } .no-css-grid .events-calendar-intro { display: flex; flex-direction: column; align-items: flex-start; } .no-flex-gap .events-calendar-intro > * + * { margin-top: 0.85rem; margin-left: 0; } .no-css-grid .event-card { min-height: 112px; align-items: center; } .no-css-grid .event-card__date { flex-basis: 78px; width: 78px; min-width: 78px; min-height: 78px; } .no-css-grid .event-card__details { margin-left: 0.9rem; } } /* <= 420px: explicit physical padding fallback for padding-inline -------- */ @media (max-width: 420px) { .no-logical-properties .events-month__header, .no-logical-properties .event-card { padding-left: 0.85rem; padding-right: 0.85rem; } } /* ========================================================================== 25. How-to Videos Grid fallbacks ========================================================================== */ /* * Modern video cards use Grid for: * video embed | descriptive content * * The help panel also uses Grid: * icon | help copy | action links * * Recreate those structures with Flexbox/block flow for no-css-grid. */ /* Video list spacing ------------------------------------------------------ */ .no-css-grid .how-to-video-grid { display: block; } .no-css-grid .how-to-video-grid > .how-to-video-card + .how-to-video-card { margin-top: 1.5rem; } /* Desktop video card: 44% embed + flexible body -------------------------- */ .no-css-grid .how-to-video-card { display: flex; align-items: stretch; } .no-css-grid .how-to-video-card__embed { box-sizing: border-box; flex: 0 0 44%; width: 44%; min-width: 360px; height: 385px; } .no-css-grid .how-to-video-card__body { box-sizing: border-box; flex: 1 1 56%; width: 56%; min-width: 0; } /* * The database supplies the actual object/embed markup via OutputRaw. * Keep old plugin/object dimensions from escaping the Flexbox media column. */ .no-css-grid .how-to-video-card__embed object, .no-css-grid .how-to-video-card__embed embed { display: block; width: 100% !important; max-width: 100% !important; height: 100% !important; margin: 0 !important; } /* Action-button Flexbox gap fallback ------------------------------------- */ .no-flex-gap .how-to-video-card__actions { margin-right: -0.8rem; margin-bottom: -0.8rem; } .no-flex-gap .how-to-video-card__actions > * { margin-right: 0.8rem; margin-bottom: 0.8rem; } /* Help panel: icon | copy | actions -------------------------------------- */ .no-css-grid .how-to-videos-help { display: flex; align-items: center; } .no-css-grid .how-to-videos-help__icon { display: flex; flex: 0 0 48px; width: 48px; height: 48px; align-items: center; justify-content: center; } .no-css-grid .how-to-videos-help > div:nth-child(2) { flex: 1 1 auto; min-width: 0; margin-left: 1.25rem; } .no-css-grid .how-to-videos-help__actions { flex: 0 0 auto; margin-left: 1.25rem; } .no-flex-gap .how-to-videos-help__actions { margin-right: -0.85rem; margin-bottom: -0.85rem; } .no-flex-gap .how-to-videos-help__actions > * { margin-right: 0.85rem; margin-bottom: 0.85rem; } /* <= 980px: mirror the modern 42% media column --------------------------- */ @media (max-width: 980px) { .no-css-grid .how-to-video-card__embed { flex-basis: 42%; width: 42%; min-width: 300px; height: 304px; } .no-css-grid .how-to-video-card__body { flex-basis: 58%; width: 58%; } /* * Modern Grid moves the action links below the copy at this width. * Flex-wrap produces the same visual structure. */ .no-css-grid .how-to-videos-help { flex-wrap: wrap; align-items: center; } .no-css-grid .how-to-videos-help__actions { flex: 0 0 calc(100% - 73px); width: calc(100% - 73px); margin-top: 1rem; margin-left: 73px; justify-content: flex-start; } } /* <= 760px: intentionally stack video above description ----------------- */ @media (max-width: 760px) { .no-css-grid .how-to-video-card { display: block; } .no-css-grid .how-to-video-card__embed { width: 100%; min-width: 0; height: calc((100vw - 2rem) * 0.8020833333); max-height: 385px; } .no-css-grid .how-to-video-card__body { width: 100%; } } /* <= 680px: help panel becomes one column -------------------------------- */ @media (max-width: 680px) { .no-css-grid .how-to-videos-help { display: block; } .no-css-grid .how-to-videos-help > div:nth-child(2) { margin-top: 1rem; margin-left: 0; } .no-css-grid .how-to-videos-help__actions { width: auto; margin-top: 1rem; margin-left: 0; } } /* ========================================================================== 26. Product Manuals Grid fallbacks ========================================================================== */ /* * Product Manuals uses Grid for: * - two-column manual directory * - manual copy + View Manual button * - help copy + actions * * Recreate these structures with Flexbox/block flow when no-css-grid is * present. */ /* Manual directory: two columns ------------------------------------------ */ .no-css-grid .manual-card-grid { display: flex; flex-wrap: wrap; margin: -0.45rem; } .no-css-grid .manual-card-grid > .manual-card { box-sizing: border-box; flex: 0 0 calc(50% - 0.9rem); width: calc(50% - 0.9rem); margin: 0.45rem; } /* Individual manual card: copy + action --------------------------------- */ .no-css-grid .manual-card { display: flex; align-items: center; } .no-css-grid .manual-card__copy { box-sizing: border-box; flex: 1 1 auto; min-width: 0; } .no-css-grid .manual-card__link { box-sizing: border-box; flex: 0 0 auto; margin-left: 1rem; } /* Missing flex-gap replacement in group heading ------------------------- */ .no-flex-gap .manual-group__header > * + * { margin-left: 1rem; } /* Manual help panel: copy + actions ------------------------------------- */ .no-css-grid .manual-help { display: flex; align-items: center; } .no-css-grid .manual-help > div:first-child { box-sizing: border-box; flex: 1 1 auto; min-width: 0; } .no-css-grid .manual-help__actions { box-sizing: border-box; flex: 0 0 auto; margin-left: 1.25rem; } .no-flex-gap .manual-help__actions > * + * { margin-left: 0.65rem; } /* <= 900px: modern stylesheet intentionally uses one manual per row ----- */ @media (max-width: 900px) { .no-css-grid .manual-card-grid { display: block; margin: 0; } .no-css-grid .manual-card-grid > .manual-card { width: 100%; margin: 0; } .no-css-grid .manual-card-grid > .manual-card + .manual-card { margin-top: 0.9rem; } /* * Modern help layout moves actions beneath the copy at this width. */ .no-css-grid .manual-help { flex-wrap: wrap; align-items: center; } .no-css-grid .manual-help__actions { flex: 0 0 100%; width: 100%; margin-top: 1rem; margin-left: 0; } } /* <= 680px: manual card itself becomes one column ----------------------- */ @media (max-width: 680px) { .no-css-grid .manual-card { display: block; } .no-css-grid .manual-card__link { width: 100%; margin-top: 0.9rem; margin-left: 0; } .no-css-grid .manual-help { display: block; text-align: center; } .no-css-grid .manual-help__actions { display: flex; flex-direction: column; width: 100%; margin-top: 1rem; } .no-flex-gap .manual-help__actions > * + * { margin-top: 0.65rem; margin-left: 0; } } /* ========================================================================== 27. Catalog Download Grid / min() fallbacks ========================================================================== */ /* * Modern catalog layout: * 250-360px catalog cover | flexible download panel * * Firefox 52 loses both the Grid and the cover's width:min(100%, 330px) * declaration, so the cover becomes oversized and the panel drops below it. */ /* Main catalog content ---------------------------------------------------- */ .no-css-grid .catalog-download-layout { display: flex; align-items: center; } .no-css-grid .catalog-download-cover { box-sizing: border-box; flex: 0 0 360px; width: 360px; min-width: 250px; } .no-css-grid .catalog-download-panel { box-sizing: border-box; flex: 1 1 auto; min-width: 0; margin-left: 3rem; } /* Old Firefox ignores width:min(...). Explicitly restore the image cap. */ .kelco-legacy .catalog-download-cover img { display: block; width: 330px; max-width: 100%; height: auto; margin-left: auto; margin-right: auto; } /* Checklist --------------------------------------------------------------- */ .no-css-grid .catalog-download-details { display: block; } .no-css-grid .catalog-download-details > li + li { margin-top: 0.7rem; } .no-css-grid .catalog-download-details li::before { display: flex; align-items: center; justify-content: center; } /* Missing Flexbox gap replacements --------------------------------------- */ .no-flex-gap .catalog-download-actions > * + * { margin-left: 0.8rem; } .no-flex-gap .catalog-download-button::before { margin-right: 0.65rem; } .no-flex-gap .catalog-download-help__links > * + * { margin-left: 1rem; } /* Help panel -------------------------------------------------------------- */ .no-css-grid .catalog-download-help__inner { display: flex; align-items: center; } .no-css-grid .catalog-download-help__inner > div:first-child { box-sizing: border-box; flex: 1 1 auto; min-width: 0; } .no-css-grid .catalog-download-help__links { box-sizing: border-box; flex: 0 0 auto; margin-left: 1.5rem; } /* <= 820px: match the modern one-column catalog layout ------------------- */ @media (max-width: 820px) { .no-css-grid .catalog-download-layout { display: block; } .no-css-grid .catalog-download-cover { width: 100%; min-width: 0; } .no-css-grid .catalog-download-panel { width: 100%; margin-top: 2rem; margin-left: 0; } .kelco-legacy .catalog-download-cover img { width: 300px; max-width: 72vw; } .no-css-grid .catalog-download-help__inner { display: block; } .no-css-grid .catalog-download-help__links { margin-top: 1.25rem; margin-left: 0; white-space: normal; } } /* <= 600px: actions intentionally stack ---------------------------------- */ @media (max-width: 600px) { .no-flex-gap .catalog-download-actions > * + * { margin-top: 0.8rem; margin-left: 0; } .no-css-grid .catalog-download-help__links { display: flex; flex-direction: column; } .no-flex-gap .catalog-download-help__links > * + * { margin-top: 0.65rem; margin-left: 0; } } /* ========================================================================== 28. Minor legacy spacing refinements V21 ========================================================================== */ /* * Catalog Download: * style.css uses padding: clamp(...) on .catalog-download-panel. Firefox 52 * ignores the entire declaration, leaving the card content against its * borders. Supply the desktop fallback explicitly. */ .no-clamp .catalog-download-panel { padding: 2.5rem; } /* * Homepage catalog benefits: * the modern vertical list uses flex gap: 0.45rem. Earlier legacy rules * restored the horizontal gap between the checkmark and text, but not the * vertical gap between successive list items. */ .no-flex-gap .catalog-benefits > li + li { margin-top: 0.45rem; } /* Preserve the existing compact mobile Catalog Download padding. */ @media (max-width: 600px) { .no-clamp .catalog-download-panel { padding: 1.3rem; } } /* ========================================================================== 29. Homepage catalog checkmark/text spacing V22 ========================================================================== */ /* * .catalog-benefits li uses Flexbox gap in modern browsers: * * gap: 0.55rem; * * The checkmark is a ::before pseudo-element and the label is a text node, * so a child-selector fallback cannot create the missing horizontal space. * Put the spacing directly on the pseudo-element instead. */ .no-flex-gap .catalog-benefits li::before { margin-right: 0.55rem; } /* ========================================================================== 30. Homepage Why Choose Kelco checkmark/text spacing V23 ========================================================================== */ /* * .benefit-item uses Flexbox gap in modern browsers: * * gap: 0.75rem; * * As with the catalog list, the checkmark is a ::before pseudo-element and * the label is plain text, so Firefox 52 needs spacing directly on the * pseudo-element. */ .no-flex-gap .benefit-item::before { margin-right: 0.75rem; } /* ========================================================================== 31. Homepage trust-bar four-column shrink fix V24 ========================================================================== */ /* * Modern style.css intentionally keeps all four trust items in one row even * in the mobile treatment. * * The no-css-grid fallback uses Flexbox. Firefox 52's default min-width:auto * lets a flex item's intrinsic text width prevent it from shrinking enough, * which can push the fourth trust item onto a second line. * * Force each item to remain exactly one quarter of the row and allow its text * content to shrink/wrap inside that quarter. */ .no-css-grid .trust-grid { display: flex; flex-wrap: nowrap; } .no-css-grid .trust-item { box-sizing: border-box; flex: 0 0 25%; width: 25%; max-width: 25%; min-width: 0; } .no-css-grid .trust-content { min-width: 0; width: 100%; } /* * At the mobile styling breakpoint, the modern design centers each trust item * vertically within its quarter-column. Keep that exact behavior in the * legacy Flexbox path. */ @media (max-width: 768px) { .no-css-grid .trust-grid { flex-wrap: nowrap; margin-left: 0; margin-right: 0; } .no-css-grid .trust-item { flex: 0 0 25%; width: 25%; max-width: 25%; min-width: 0; padding-left: 0.45rem; padding-right: 0.45rem; } } /* ========================================================================== 32. Homepage review carousel dot spacing V25 ========================================================================== */ /* * Modern style.css uses: * * .testimonial-dots, * .reviews-dots { * display: flex; * gap: 0.55rem; * } * * Firefox 52 supports Flexbox but not Flexbox gap, so the 9px carousel dots * touch each other. Add the missing spacing between actual dot elements. */ .no-flex-gap .testimonial-dots > * + *, .no-flex-gap .reviews-dots > * + * { margin-left: 0.55rem; } /* ========================================================================== 33. Homepage Featured Products equal-height cards V26 ========================================================================== */ /* * Modern CSS Grid makes every product card in a row the same height. * Firefox 52's no-css-grid Flexbox replacement can leave cards at their * content height, especially with the modern height:100% rule still applied. * * Make the legacy Flexbox row stretch its cards and let each card's internal * flex column push the View Details button to the bottom. */ .no-css-grid .product-grid { align-items: stretch; } .no-css-grid .product-grid .product-card { height: auto; align-self: stretch; display: flex; flex-direction: column; } .no-css-grid .product-grid .product-content { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; } .no-css-grid .product-grid .product-meta-spacer { flex: 1 1 auto; min-height: 0; } /* * Below 768px the modern design becomes a horizontal scroller, where equal * card heights are not necessary. Preserve the existing mobile card sizing. */ @media (max-width: 768px) { .no-css-grid .product-grid { align-items: flex-start; } .no-css-grid .product-grid .product-card { align-self: flex-start; } } /* ========================================================================== 34. Homepage category-card link alignment V27 ========================================================================== */ /* * The two homepage category cards are equal-height in modern Grid, but their * content is normal block flow. In Firefox 52, the longer Tree Retailing and * Farming heading can wrap to an extra line and push its Shop link lower. * * Turn the legacy card/content into a vertical Flexbox and push the category * link to the bottom so both links share the same baseline. */ .no-css-grid .category-grid { align-items: stretch; } .no-css-grid .category-card { display: flex; flex-direction: column; height: auto; align-self: stretch; } .no-css-grid .category-content { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; } .no-css-grid .category-link { margin-top: auto; align-self: flex-start; } /* * Modern category/view-all links use Flexbox gap between the text and arrow. * Firefox 52 needs an explicit pseudo-element margin. */ .no-flex-gap .category-link::after { margin-left: 0.6rem; } .no-flex-gap .category-link:hover::after { margin-left: 0.9rem; } .no-flex-gap .view-all-link::after { margin-left: 0.5rem; } /* * Mobile cards are one per row; keeping the flex-column treatment is harmless * and preserves consistent placement if category copy lengths differ. */ /* ========================================================================== 35. Contact / Email page Grid fallbacks V28 ========================================================================== */ /* * Modern Contact page: * flexible contact form | 340px contact-information aside * * The form fields, aside stack, contact information list, and several circular * icons also use Grid. Recreate these structures with Flexbox/block flow. */ /* Main form + contact aside ---------------------------------------------- */ .no-css-grid .contact-layout { display: flex; align-items: flex-start; } .no-css-grid .contact-layout > .contact-form-card { box-sizing: border-box; flex: 1 1 auto; min-width: 0; } .no-css-grid .contact-layout > .contact-aside { position: sticky; top: calc(var(--topbar-height) + var(--header-height) + 1.25rem); display: block; box-sizing: border-box; flex: 0 0 340px; width: 340px; min-width: 0; margin-left: 1.6rem; } .no-css-grid .contact-aside > * + * { margin-top: 1rem; } /* Contact form fields ----------------------------------------------------- */ .no-css-grid .contact-fields { display: flex; flex-wrap: wrap; margin: -0.5rem -0.575rem; } .no-css-grid .contact-fields > .contact-field { box-sizing: border-box; flex: 0 0 calc(50% - 1.15rem); width: calc(50% - 1.15rem); min-width: 0; margin: 0.5rem 0.575rem; } .no-css-grid .contact-fields > .contact-field--full { flex-basis: calc(100% - 1.15rem); width: calc(100% - 1.15rem); } /* Contact information list ---------------------------------------------- */ .no-css-grid .contact-info-list { display: block; } .no-css-grid .contact-info-list > div + div { margin-top: 1rem; } /* Grid-only circular icon centering -> Flexbox --------------------------- */ .no-css-grid .contact-form-card__icon, .no-css-grid .contact-info-list__icon, .no-css-grid .contact-notice > span { display: flex; align-items: center; justify-content: center; line-height: 1; } /* * Give old Linux font fallback a predictable text-symbol stack. This is * particularly useful for the envelope, house, telephone and map-pin glyphs. */ .kelco-legacy .contact-form-card__icon, .kelco-legacy .contact-info-list__icon { font-family: "DejaVu Sans", "Liberation Sans", Arial, sans-serif; font-size: 0.95rem; } /* Missing Flexbox-gap replacements -------------------------------------- */ .no-flex-gap .contact-form-card__header > * + * { margin-left: 1rem; } .no-flex-gap .contact-notice > * + * { margin-left: 0.75rem; } .no-flex-gap .contact-info-list > div > * + * { margin-left: 0.75rem; } .no-flex-gap .contact-submit-button > * + * { margin-left: 0.65rem; } /* <= 900px: modern layout puts form first, aside beneath ---------------- */ @media (max-width: 900px) { .no-css-grid .contact-layout { display: flex; flex-direction: column; align-items: stretch; } .no-css-grid .contact-layout > .contact-form-card { order: 1; width: 100%; } .no-css-grid .contact-layout > .contact-aside { position: static; order: 2; display: flex; width: 100%; flex: 0 0 auto; margin-top: 1.6rem; margin-left: 0; } .no-css-grid .contact-aside > * { box-sizing: border-box; flex: 1 1 50%; width: 50%; min-width: 0; } .no-css-grid .contact-aside > * + * { margin-top: 0; margin-left: 1rem; } } /* <= 680px: fields and aside become one column --------------------------- */ @media (max-width: 680px) { .no-css-grid .contact-fields { display: block; margin: 0; } .no-css-grid .contact-fields > .contact-field, .no-css-grid .contact-fields > .contact-field--full { width: 100%; margin: 0; } .no-css-grid .contact-fields > .contact-field + .contact-field { margin-top: 1rem; } .no-css-grid .contact-aside { display: block; } .no-css-grid .contact-aside > * { width: 100%; } .no-css-grid .contact-aside > * + * { margin-top: 1rem; margin-left: 0; } } /* ========================================================================== 36. Checkout Payment Grid fallbacks V29 ========================================================================== */ /* * Modern Checkout Payment uses Grid for: * - payment form + 330px checkout aside * - Billing + Shipping address cards * - Credit Card Number + Month + Year * - vertical spacing inside payment form / aside * - panel-number and checkout-step circle centering * * Recreate those structures with Flexbox/block flow for no-css-grid. */ /* Main payment form + aside ---------------------------------------------- */ .no-css-grid .checkout-payment-layout { display: flex; align-items: flex-start; } .no-css-grid .checkout-payment-form { display: block; box-sizing: border-box; flex: 1 1 auto; min-width: 0; } .no-css-grid .checkout-payment-form > * + * { margin-top: 1.25rem; } .no-css-grid .payment-aside { position: sticky; top: calc(var(--topbar-height) + var(--header-height) + 1.25rem); display: block; box-sizing: border-box; flex: 0 0 330px; width: 330px; min-width: 0; margin-left: 1.6rem; } .no-css-grid .payment-aside > * + * { margin-top: 1.25rem; } /* Panel header number ---------------------------------------------------- */ .no-css-grid .payment-panel__number, .no-css-grid .checkout-steps span { display: flex; align-items: center; justify-content: center; } /* Billing + Shipping address cards -------------------------------------- */ .no-css-grid .payment-addresses { display: flex; align-items: stretch; } .no-css-grid .payment-address-card { box-sizing: border-box; flex: 1 1 50%; width: 50%; min-width: 0; } .no-css-grid .payment-address-card + .payment-address-card { margin-left: 1.25rem; } /* Address-label vertical spacing normally supplied by Grid gap ----------- */ .no-css-grid .kelco-address-label { display: block; } .no-css-grid .kelco-address-label > * + * { margin-top: 0.18rem; } /* Credit-card fields ----------------------------------------------------- */ .no-css-grid .payment-fields { display: flex; align-items: flex-start; } .no-css-grid .payment-field { display: block; box-sizing: border-box; min-width: 0; } .no-css-grid .payment-field > label { display: block; margin-bottom: 0.4rem; } .no-css-grid .payment-field > small { display: block; margin-top: 0.4rem; } .no-css-grid .payment-field--card { flex: 1 1 auto; width: auto; min-width: 0; } .no-css-grid .payment-field--month { flex: 0 0 70px; width: 70px; margin-left: 1rem; } .no-css-grid .payment-field--year { flex: 0 0 90px; width: 90px; margin-left: 1rem; } /* Missing Flexbox-gap spacing ------------------------------------------- */ .no-flex-gap .payment-panel__header > * + * { margin-left: 1rem; } .no-flex-gap .checkout-steps li > span { margin-right: 0.55rem; } .no-flex-gap .payment-security > * + * { margin-left: 0.75rem; } .no-flex-gap .payment-submit-bar > * + * { margin-left: 1rem; } /* <= 900px: modern layout moves aside above payment form ---------------- */ @media (max-width: 900px) { .no-css-grid .checkout-payment-layout { display: flex; flex-direction: column; align-items: stretch; } .no-css-grid .checkout-payment-form { order: 2; width: 100%; margin-top: 1.25rem; } .no-css-grid .payment-aside { position: static; order: 1; display: flex; width: 100%; flex: 0 0 auto; margin-left: 0; } .no-css-grid .payment-aside > * { box-sizing: border-box; flex: 1 1 50%; width: 50%; min-width: 0; } .no-css-grid .payment-aside > * + * { margin-top: 0; margin-left: 1rem; } } /* <= 640px: match modern phone field/address behavior -------------------- */ @media (max-width: 640px) { .no-css-grid .payment-addresses { display: block; } .no-css-grid .payment-address-card { width: 100%; } .no-css-grid .payment-address-card + .payment-address-card { margin-top: 1.25rem; margin-left: 0; } /* * Modern mobile layout puts Card Number on the first row and Month/Year * together beneath it. */ .no-css-grid .payment-fields { display: flex; flex-wrap: wrap; align-items: flex-start; } .no-css-grid .payment-field--card { flex: 0 0 100%; width: 100%; } .no-css-grid .payment-field--month { flex: 0 0 70px; width: 70px; margin-top: 0.75rem; margin-left: 0; } .no-css-grid .payment-field--year { flex: 0 0 90px; width: 90px; margin-top: 0.75rem; margin-left: 1rem; } .no-css-grid .payment-aside { display: block; } .no-css-grid .payment-aside > * { width: 100%; } .no-css-grid .payment-aside > * + * { margin-top: 1rem; margin-left: 0; } .no-flex-gap .payment-submit-bar > * + * { margin-top: 0.8rem; margin-left: 0; } .no-flex-gap .payment-panel__header > * + * { margin-left: 0.75rem; } } /* ========================================================================== 37. Order Confirmation Grid / gap fallbacks V30 ========================================================================== */ /* * Modern Order Confirmation: * flexible success card | 330px Questions/help card * * The success icon also uses Grid centering, the action buttons use Flexbox * gap, and the success heading uses clamp(). */ /* Desktop confirmation card + help card --------------------------------- */ .no-css-grid .order-confirmation-layout { display: flex; align-items: flex-start; } .no-css-grid .order-confirmation-card { box-sizing: border-box; flex: 1 1 auto; min-width: 0; } .no-css-grid .order-confirmation-help { box-sizing: border-box; flex: 0 0 330px; width: 330px; min-width: 0; margin-left: 1.6rem; } /* Center the confirmation check icon without CSS Grid ------------------- */ .no-css-grid .order-confirmation-card__icon { display: flex; align-items: center; justify-content: center; } /* clamp() fallback for the main success heading ------------------------- */ .no-clamp .order-confirmation-card h2 { font-size: 2.5rem; } /* Flexbox-gap fallback for View My Account / Continue Shopping ---------- */ .no-flex-gap .order-confirmation-card__actions > * + * { margin-left: 0.85rem; } /* <= 900px: modern layout stacks the two cards -------------------------- */ @media (max-width: 900px) { .no-css-grid .order-confirmation-layout { display: block; } .no-css-grid .order-confirmation-help { width: 100%; margin-top: 1.6rem; margin-left: 0; } /* * Modern CSS uses a two-column Grid inside the help card at this width: * copy/address on the left and contact links on the right. * * Floats provide a print-safe, old-Gecko-compatible equivalent without * requiring markup changes around the three contact links. */ .no-css-grid .order-confirmation-help::after { content: ""; display: table; clear: both; } .no-css-grid .order-confirmation-help > a { float: right; clear: right; box-sizing: border-box; width: 180px; margin-left: 2rem; } .no-css-grid .order-confirmation-help > a:first-of-type { margin-top: 0; } } /* <= 680px: modern phone layout returns help card to one column --------- */ @media (max-width: 680px) { .no-css-grid .order-confirmation-help > a { float: none; clear: none; width: auto; margin-left: 0; } .no-css-grid .order-confirmation-help > a:first-of-type { margin-top: 0.55rem; } /* * Modern phone CSS changes the actions from Flexbox to a one-column Grid. * Use ordinary block flow for the legacy equivalent. */ .no-css-grid .order-confirmation-card__actions { display: block; } .no-css-grid .order-confirmation-card__actions > * { box-sizing: border-box; width: 100%; } .no-flex-gap .order-confirmation-card__actions > * + * { margin-top: 0.85rem; margin-left: 0; } .no-clamp .order-confirmation-card h2 { font-size: 2rem; } } /* ========================================================================== 38. Safari 10 legacy alignment cleanup V31 ========================================================================== */ /* * The earlier Resources alignment correction was intended specifically for * Firefox 52. It was attached to .kelco-legacy, which also includes Safari 10, * so Safari inherited the Firefox-only downward nudge. * * Reset all legacy browsers first, then re-apply the nudge only in Gecko. */ .kelco-legacy .nav-dropdown-toggle { top: 0; } @supports (-moz-appearance: button) { .kelco-legacy .nav-dropdown-toggle { top: 0.45rem; } } /* * Homepage Request Our Catalog panel * ---------------------------------- * The no-css-grid replacement uses Flexbox with align-items:center so the * cover image stays vertically centered. In Safari 10 that also centers the * text block, making "Request Our Catalog" sit noticeably below the headings * in the neighboring Why Kelco / Reviews panels. * * Keep the image centered but top-align the copy inside the panel's padded * content box. */ .no-css-grid .catalog-panel-inner { align-items: center; } .no-css-grid .catalog-content { align-self: flex-start; } .no-css-grid .catalog-image-wrap { align-self: center; } /* * At the one-column mobile layout, normal document order is clearer and the * explicit cross-axis alignment is unnecessary. */ @media (max-width: 768px) { .no-css-grid .catalog-content, .no-css-grid .catalog-image-wrap { align-self: auto; } }