/** Shopify CDN: Minification failed Line 825:386 Expected identifier but found whitespace Line 837:330 Unexpected "}" Line 860:272 Unexpected "}" **/ /* * Elvebyen Sykkel & Hage — Custom Theme CSS * Version: 8.7 — Comprehensive fix * Updated: 2026-03-01 */ /* ═══════════════════════════════════════════ 1. LAYOUT WRAPPER — Max-width + centering ═══════════════════════════════════════════ */ :root { --esh-max-width: 1400px; --esh-sidebar-width: 220px; --esh-teal: #004445; --esh-teal-hover: #005a5b; /* One page mal. All Verksted pages read these. Do not fork per page. */ --esh-ink: #183a35; --esh-deep: #0a4d3c; --esh-deep-2: #063d30; --esh-line: #dfe8e3; --esh-muted: #5d6e68; --esh-paper: #ffffff; --esh-field: #b8c9c1; --esh-page-max: 1100px; --esh-page-title: clamp(1.8rem, 4vw, 2.7rem); } .esh-layout-wrapper { display: flex; flex-direction: row; max-width: var(--esh-max-width); width: 100%; margin: 0 auto; min-height: 100vh; } /* ═══════════════════════════════════════════ 2. HEADER — Hide duplicate nav, keep tools ═══════════════════════════════════════════ */ /* Hide the horizontal nav links (duplicated by sidebar) */ .header .menu-list, .header .header__navigation-bar-row, .header mega-menu, .header .mega-menu { display: none !important; } /* Compact header height */ .header__row--top { padding-block: 6px !important; } .header-logo img, .header-logo svg { max-height: 36px !important; } /* ═══════════════════════════════════════════ 3. SIDEBAR NAVIGATION ═══════════════════════════════════════════ */ #shopify-section-collection-sidebar { width: var(--esh-sidebar-width); min-width: var(--esh-sidebar-width); flex-shrink: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; border-right: 1px solid #e5e7eb; background: #fff; z-index: 50; } .esh-main-content { flex: 1; min-width: 0; background-color: #fff; } /* Sidebar inner */ .sidebar-nav { padding: 16px 14px; } .sidebar-nav__brand { padding: 4px 0 8px; } .sidebar-nav__brand-name { font-size: 15px; font-weight: 700; color: #1a1a1a; line-height: 1.2; } .sidebar-nav__brand-sub { font-size: 11px; color: #888; } .sidebar-nav__divider { height: 1px; background: #eee; margin: 10px 0; } .sidebar-nav__section-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #999; margin: 12px 0 4px; padding-left: 2px; } .sidebar-nav__link { display: flex; align-items: center; gap: 8px; padding: 7px 10px; margin: 1px 0; border-radius: 6px; color: #333; text-decoration: none; font-size: 13px; font-weight: 450; transition: background 0.15s ease, color 0.15s ease; } .sidebar-nav__link:hover { background: #f3f4f6; color: var(--esh-teal); } .sidebar-nav__link--active { background: #e6f2f2; color: var(--esh-teal); font-weight: 600; } .sidebar-nav__link svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.6; } .sidebar-nav__link:hover svg, .sidebar-nav__link--active svg { opacity: 1; } /* Booking CTA button */ .sidebar-nav__booking { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px; margin: 4px 0 8px; border-radius: 8px; background: var(--esh-teal); color: #fff; text-decoration: none; font-size: 13px; font-weight: 600; transition: background 0.15s ease; } .sidebar-nav__booking:hover { background: var(--esh-teal-hover); } .sidebar-nav__booking svg { width: 16px !important; height: 16px !important; flex-shrink: 0; } /* ═══════════════════════════════════════════ 4. PRODUCT CARDS — Always-visible buttons ═══════════════════════════════════════════ */ /* Make quick-add visible and remove Horizon hover-reveal */ product-card quick-add-component { opacity: 1 !important; pointer-events: auto !important; position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: auto !important; z-index: 2; } /* The form inside */ product-card product-form-component { display: block !important; width: 100% !important; } /* Button — always visible, no animation */ product-card .quick-add__button { display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; width: 100% !important; height: 38px !important; background: var(--esh-teal) !important; color: #fff !important; border: none !important; border-radius: 0 !important; font-size: 13px !important; font-weight: 500 !important; cursor: pointer !important; opacity: 1 !important; position: relative !important; transition: background 0.15s ease !important; animation: none !important; } product-card .quick-add__button:hover { background: var(--esh-teal-hover) !important; } /* Fix the white pill on .add-to-cart-text */ product-card .add-to-cart-text { background: transparent !important; border-radius: 0 !important; width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; overflow: visible !important; clip-path: none !important; -webkit-clip-path: none !important; } /* Text content — always visible */ product-card .add-to-cart-text__content { display: flex !important; width: auto !important; height: auto !important; overflow: visible !important; position: static !important; clip: unset !important; clip-path: none !important; filter: none !important; opacity: 1 !important; grid-template-columns: 1fr !important; white-space: nowrap !important; } /* Inner text span — Horizon hides with opacity:0, blur, translate */ product-card .quick-add__button .add-to-cart-text__content > span span, product-card .quick-add__button .add-to-cart-text__content span span { opacity: 1 !important; filter: none !important; translate: none !important; transform: none !important; display: inline-block !important; } /* Icon inside button */ product-card .add-to-cart-icon { display: flex !important; align-items: center !important; } /* Choose: Horizon parks the label as visually-hidden-mobile and centers the icon. We force the label back, so the icon sat on "VELG". Text only. */ product-card .quick-add__button--choose .add-to-cart-icon { display: none !important; } product-card .quick-add__button--choose .add-to-cart-text__content { position: static !important; inset: auto !important; width: auto !important; height: auto !important; overflow: visible !important; clip: unset !important; clip-path: none !important; white-space: nowrap !important; } product-card .add-to-cart-icon svg { width: 16px !important; height: 16px !important; stroke: #fff !important; } /* Kill ALL transitions/animations on quick-add descendants */ product-card quick-add-component *, product-card .quick-add__button * { transition: none !important; animation: none !important; filter: none !important; } /* When both buttons exist, hide "add" and show only "choose" */ product-card quick-add-component .quick-add__button--add { display: none !important; } product-card quick-add-component .quick-add__button--choose { display: flex !important; width: 100% !important; } /* For simple products (no choose button), the add button shows via the general rule */ product-card quick-add-component:not(:has(.quick-add__button--choose)) .quick-add__button--add { display: flex !important; width: 100% !important; } /* ═══════════════════════════════════════════ 5. CATEGORY CARDS — Hover interaction ═══════════════════════════════════════════ */ [id*="category_cards"] .section--page-width > div > div > a, .collection-list-section a, .collection-list .card { transition: transform 0.2s ease, box-shadow 0.2s ease; cursor: pointer; display: block; border-radius: 8px; } [id*="category_cards"] .section--page-width > div > div > a:hover, .collection-list-section a:hover, .collection-list .card:hover { transform: translateY(-4px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); } /* ═══════════════════════════════════════════ 6. PAGE SECTIONS — Content width ═══════════════════════════════════════════ */ /* Let Horizon's built-in page-width work within our layout */ .esh-main-content .page-width-narrow { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } /* ═══════════════════════════════════════════ 7. FOOTER ═══════════════════════════════════════════ */ footer { max-width: var(--esh-max-width); margin: 0 auto; width: 100%; } /* ═══════════════════════════════════════════ 8. FORMS — Email field visibility ═══════════════════════════════════════════ */ .field__input, input[type="email"], input[type="text"], input[type="password"], textarea { color: #1a1a1a !important; background: rgba(255,255,255,0.95) !important; } .field__input::placeholder { color: #888 !important; } /* Footer newsletter — keep light text on dark bg */ footer .field__input, footer input[type="email"] { color: inherit !important; background: transparent !important; } footer .field__input::placeholder { color: inherit !important; opacity: 0.6; } /* ═══════════════════════════════════════════ 9. GOOGLE MAPS ═══════════════════════════════════════════ */ .esh-map-container { border-radius: 10px; overflow: hidden; margin: 24px auto; max-width: 100%; box-shadow: 0 2px 12px rgba(0,0,0,0.08); } .esh-map-container iframe { display: block; width: 100%; height: 350px; border: 0; } /* ═══════════════════════════════════════════ 10. VIEW TRANSITIONS ═══════════════════════════════════════════ */ @keyframes esh-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .esh-main-content { animation: esh-fade-in 0.25s ease-out; } /* ═══════════════════════════════════════════ 11. RESPONSIVE — Mobile (<750px) ═══════════════════════════════════════════ */ @media (max-width: 749px) { .esh-layout-wrapper { flex-direction: column; } #shopify-section-collection-sidebar { display: none !important; } /* Restore header nav on mobile (hamburger menu) */ .header .menu-list { display: none !important; } /* Ensure no horizontal overflow */ body { overflow-x: hidden; } .esh-main-content { width: 100%; } footer { max-width: 100%; } /* Stack product grid nicely */ product-card .quick-add__button { height: 36px !important; font-size: 12px !important; } /* Prevent overflow from wide elements */ main, .main-content, .esh-main-content, .shopify-section { max-width: 100vw; overflow-x: hidden; } /* Collection grid - 2 columns on mobile */ .collection-wrapper .grid { gap: 8px !important; } /* Verksted & page content */ .page-content, .rte { word-wrap: break-word; overflow-wrap: break-word; } /* Category cards — 2 columns on mobile instead of 4 */ [id*="category_cards"] .collection-wrapper--grid, [id*="category_cards"] .collection-list-section .collection-wrapper, [id*="category_cards"] .section--page-width > div > div, .collection-list-section .collection-wrapper--grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } /* Also fix Horizon's collection-list grid */ .collection-list-wrapper { grid-template-columns: repeat(2, 1fr) !important; } } /* ═══════════════════════════════════════════ 12. RESPONSIVE — Tablet (750-999px) ═══════════════════════════════════════════ */ @media (min-width: 750px) and (max-width: 999px) { :root { --esh-sidebar-width: 180px; } #shopify-section-collection-sidebar { width: var(--esh-sidebar-width); min-width: var(--esh-sidebar-width); } .sidebar-nav__link { font-size: 12px; padding: 6px 8px; } .sidebar-nav__booking { font-size: 12px; padding: 8px; } } /* ═══════════════════════════════════════════ 13. RESPONSIVE — Small desktop (1000-1200px) ═══════════════════════════════════════════ */ @media (min-width: 1000px) and (max-width: 1200px) { :root { --esh-sidebar-width: 200px; } } /* =================================================== v9.0 FIXES — Footer, Kart, Sidebar =================================================== */ /* --- FOOTER: Dark background --- */ footer, .footer, #shopify-section-footer { background-color: #1a1a2e !important; color: #e0e0e0 !important; border-top: 3px solid var(--esh-teal) !important; } footer h2, footer h3, footer h4, footer .footer__heading, footer .heading { color: #ffffff !important; } footer a { color: #8ecae6 !important; text-decoration: none; } footer a:hover { color: #ffffff !important; text-decoration: underline; } footer .footer__copyright, footer small { color: #999 !important; } footer input[type="email"], footer .field__input { background: #2a2a3e !important; color: #fff !important; border-color: #444 !important; } footer .field__input::placeholder { color: #888 !important; } footer .button, footer button[type="submit"] { background-color: var(--esh-teal) !important; color: #fff !important; } /* Footer social icons */ footer .social-icons__link svg, footer .icon { fill: #8ecae6 !important; color: #8ecae6 !important; } /* --- FOOTER: Google Maps embed --- */ .esh-footer-map { width: 100%; margin-top: 24px; margin-bottom: 8px; border-radius: 8px; overflow: hidden; border: 1px solid #333; } .esh-footer-map iframe { width: 100%; height: 250px; border: 0; display: block; } /* --- CONTACT PAGE: Wider map --- */ /* --- Contact page: Force map below contact info --- */ rte-formatter.text-block:has(.esh-map-container) { display: block !important; } rte-formatter.text-block:has(.esh-map-container) > div { width: 100% !important; max-width: 100% !important; } .esh-map-container { width: 100% !important; max-width: 100% !important; margin: 24px 0 !important; } .esh-map-container iframe { width: 100% !important; height: 400px !important; border-radius: 8px; } /* --- SIDEBAR: Improved sticky behavior --- */ #shopify-section-collection-sidebar { position: sticky !important; top: 130px !important; align-self: flex-start !important; max-height: calc(100vh - 40px); overflow-y: auto; } /* --- Sidebar: Prevent overlap with content --- */ .esh-main-content { min-width: 0; flex: 1; } /* ======================================= 12. PRODUCT IMAGE FIX ======================================= */ /* Product card images: show full product, no cropping */ .product-media__image, product-card img, product-card .product-media img { object-fit: contain !important; object-position: center !important; } .product-media, .product-media-container { background: #fff !important; } /* ======================================= 13. STOCK STATUS BADGES ======================================= */ .esh-stock-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; padding: 4px 10px; border-radius: 20px; margin: 8px 0; } .esh-stock-badge--in-stock { background: #e8f5e9; color: #2e7d32; } .esh-stock-badge--low-stock { background: #fff3e0; color: #e65100; } .esh-stock-badge--order-item { background: #e3f2fd; color: #1565c0; } .esh-stock-badge--out-of-stock { background: #fce4ec; color: #c62828; } .esh-stock-badge svg { width: 14px; height: 14px; flex-shrink: 0; } .esh-delivery-note { font-size: 12px; color: #666; margin-top: 4px; } /* ================================================== 15. AUDIT IMPROVEMENTS - v9.5 ================================================== */ /* View Transitions API - smoother page navigation */ ::view-transition-old(root) { animation: esh-vt-out 0.15s ease-in forwards; } ::view-transition-new(root) { animation: esh-vt-in 0.15s ease-out forwards; } @keyframes esh-vt-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-4px); } } @keyframes esh-vt-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* Footer text contrast fix - light text on dark navy background */ footer p, footer span, footer li, footer address, footer td, .footer p, .footer span, .footer li, .footer-block p, .footer-block span, .footer-block li { color: rgba(224, 224, 224, 0.85) !important; } footer h2, footer h3, footer h4, .footer h2, .footer h3, .footer h4, .footer-block__heading { color: #fff !important; } .footer-utilities__text, footer .footer-utilities__text { color: rgba(224, 224, 224, 0.6) !important; } footer a, .footer a, .footer-block a { color: rgb(142, 202, 230) !important; } footer a:hover, .footer a:hover, .footer-block a:hover { color: #fff !important; } /* ================================================== 16. PRODUCT CARD & LAYOUT FIX - v10.0 ================================================== */ /* --- A. Product cards: image above button, no overlap --- */ .card-gallery { display: flex !important; flex-direction: column !important; aspect-ratio: 1 / 1 !important; } .card-gallery > a.contents { flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; display: block !important; } .card-gallery slideshow-component, .card-gallery slideshow-container, .card-gallery slideshow-slides, .card-gallery slideshow-slide, .card-gallery .product-media-container, .card-gallery .product-media { height: 100% !important; max-height: 100% !important; } .card-gallery img { object-fit: contain !important; width: 100% !important; height: 100% !important; max-height: 100% !important; } .card-gallery > quick-add-component { position: relative !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; width: 100% !important; height: auto !important; flex-shrink: 0 !important; } .card-gallery quick-add-component product-form-component { display: block !important; height: auto !important; } .card-gallery quick-add-component form.shopify-product-form { display: flex !important; height: auto !important; width: 100% !important; align-items: stretch !important; } product-card .quick-add__button--choose { position: relative !important; top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 38px !important; } product-card .quick-add__button--add { display: flex !important; position: relative !important; top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 38px !important; } /* --- B. CTA section: contained in main content --- */ .esh-main-content > [id*="service_cta"] { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; position: static !important; z-index: auto !important; background-color: #2D6B5F !important; border-radius: 16px !important; overflow: hidden !important; } .esh-main-content > [id*="service_cta"] .section-background { background-color: #2D6B5F !important; } /* --- C. Full-width footer --- */ footer { max-width: 100% !important; width: 100% !important; } /* --- D. Prevent horizontal scroll from 100vw --- */ body { overflow-x: hidden !important; } /* --- E. Mobile: Reset CTA on mobile --- */ @media (max-width: 749px) { .esh-main-content > [id*="service_cta"] { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; border-radius: 0 !important; } } /* --- F. Sidebar transparent for footer bleed --- */ #shopify-section-collection-sidebar { background-color: transparent !important; } .collection-sidebar-section { background-color: transparent !important; } /* --- G. Sidebar: nav bg --- */ .sidebar-nav { display: flex !important; flex-direction: column !important; min-height: auto !important; background-color: white !important; } /* === H1. Store name in header next to logo === */ .header-logo { display: flex !important; align-items: center !important; gap: 10px !important; text-decoration: none !important; } .header-logo::after { content: "Elvebyen Sykkel & Hage"; font-size: 12px; font-weight: 500; letter-spacing: 0.3px; color: rgba(0, 0, 0, 0.65); white-space: nowrap; } /* === H2. Hide brand from sidebar (now in header) === */ .sidebar-nav__brand { display: none !important; } /* === H3. Sidebar sticky fix === */ #shopify-section-collection-sidebar { position: sticky !important; top: 130px !important; height: fit-content !important; align-self: flex-start !important; overflow: visible !important; } .collection-sidebar-section { height: auto !important; overflow: visible !important; } /* === H4. Footer: content aligned with main content column === */ footer .section--page-width { max-width: 1400px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 220px !important; padding-right: 0 !important; box-sizing: border-box !important; grid-template-columns: 1fr !important; } footer .footer-content { max-width: none !important; margin: 0 !important; width: 100% !important; } .esh-footer-map { padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; width: 100% !important; } ./* --- B. CTA section: contained in main content --- */ .esh-main-content > [id*="service_cta"] { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; position: static !important; z-index: auto !important; background-color: #2D6B5F !important; border-radius: 16px !important; overflow: hidden !important; } } } } } footer .footer-utility, footer [class*="footer-utility"] { max-width: 1400px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 220px !important; padding-right: 0 !important; box-sizing: border-box !important; } /* === H5. Empty collection: hide "Fant ingen produkter" === */ .main-collection-grid__empty { display: none !important; } results-list:has(.main-collection-grid__empty) { display: none !important; } } /* === I. Fix dark bleed: white bg on homepage sections === */ .esh-main-content > .shopify-section { background-color: #fff; } .esh-main-content > [id*="hero"] { background-color: transparent; } /* === J. Footer: teal color + contained width === */ footer { background-color: #004445 !important; color: #e0e0e0 !important; } footer .section-background { background-color: #004445 !important; } footer a { color: #b8d4d4 !important; } footer a:hover { color: #fff !important; } /* === K. Center collection content (Deler & reservedeler) === */ .esh-main-content .collection-hero { text-align: center; } results-layout { justify-content: center; } /* === L. Center store name / page title === */ .esh-main-content h1, .esh-main-content .collection-hero__title { text-align: center; } /* === M. Fix flex centering for page titles + collection content === */ .esh-main-content .section-wrapper .layout-panel-flex { align-items: center !important; } .esh-main-content .section-wrapper .text-block { align-items: center !important; } /* === N. Fix header: white background so hero doesn't bleed through === Scoped to .header-section only: the unscoped selector also matched the announcement-bar's own section wrapper and gave it z-index:10, which sat above the header's native z-index:8 and clipped the mobile menu-drawer's first item (2026-08-25, audit/2026-08-25/mobile-nav-fixes/). */ .shopify-section-group-header-group.header-section { background-color: #fff !important; position: relative; z-index: 10; } /* === O. Footer: constrain width to match CTA section (1180px) === */ footer { max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; border-radius: 0; } /* end */ /* Service CTA - all text white on green background */ .esh-main-content > [id*="service_cta"], .esh-main-content > [id*="service_cta"] * { color: #ffffff !important; } .esh-main-content > [id*="service_cta"] a { color: #2D6B5F !important; background-color: #ffffff !important; border-color: #ffffff !important; text-decoration: none !important; } .esh-main-content > [id*="service_cta"] a:hover { background-color: #f0f0f0 !important; } /* ===================================================== HEADER ICONS - Interactive Design (Search, Account, Cart) ===================================================== */ /* Base: All header action icons */ .header-actions__action { position: relative !important; width: 48px !important; height: 48px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; cursor: pointer !important; margin: 0 4px !important; } /* Larger SVG icons */ .header-actions__action svg { width: 24px !important; height: 24px !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; stroke-width: 1.5 !important; } /* Hover: Circular background + scale */ .header-actions__action:hover { background-color: rgba(27, 75, 67, 0.08) !important; transform: scale(1.1) !important; } .header-actions__action:hover svg { color: #1B4B43 !important; transform: scale(1.05) !important; } /* Active/Click: Press-down effect */ .header-actions__action:active { transform: scale(0.95) !important; background-color: rgba(27, 75, 67, 0.15) !important; transition-duration: 0.1s !important; } /* Tooltip labels on hover */ .header-actions__action::after { content: attr(aria-label); position: absolute !important; bottom: -32px !important; left: 50% !important; transform: translateX(-50%) translateY(4px) !important; background-color: #1a1a2e !important; color: #ffffff !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0.03em !important; padding: 5px 10px !important; border-radius: 6px !important; white-space: nowrap !important; opacity: 0 !important; visibility: hidden !important; transition: all 0.25s ease !important; pointer-events: none !important; z-index: 100 !important; } /* Tooltip arrow */ .header-actions__action::before { content: '' !important; position: absolute !important; bottom: -8px !important; left: 50% !important; transform: translateX(-50%) !important; border: 5px solid transparent !important; border-bottom-color: #1a1a2e !important; opacity: 0 !important; visibility: hidden !important; transition: all 0.25s ease !important; pointer-events: none !important; z-index: 100 !important; } /* Show tooltip on hover */ .header-actions__action:hover::after { opacity: 1 !important; visibility: visible !important; transform: translateX(-50%) translateY(0) !important; } .header-actions__action:hover::before { opacity: 1 !important; visibility: visible !important; } /* Cart icon special: badge indicator */ .header-actions__cart-icon { position: relative !important; } cart-count:not([hidden]) .header-actions__cart-count, .header-actions__cart-count { position: absolute !important; top: 4px !important; right: 4px !important; min-width: 18px !important; height: 18px !important; background-color: #e63946 !important; color: #ffffff !important; font-size: 10px !important; font-weight: 700 !important; border-radius: 9px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 4px !important; line-height: 1 !important; animation: cartBadgePop 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important; } @keyframes cartBadgePop { 0% { transform: scale(0); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } } /* Search icon: subtle pulse animation on page load */ @keyframes searchPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(27,75,67,0); } 50% { box-shadow: 0 0 0 6px rgba(27,75,67,0.08); } } /* Account icon: add ring on hover */ .account-button.header-actions__action:hover { box-shadow: 0 0 0 2px rgba(27,75,67,0.2) !important; } /* Cart icon: wiggle animation on hover */ @keyframes cartWiggle { 0%, 100% { transform: rotate(0deg) scale(1.1); } 25% { transform: rotate(-5deg) scale(1.1); } 75% { transform: rotate(5deg) scale(1.1); } } .header-actions__cart-icon:hover svg, button[aria-label="Handlekurv"]:hover svg { animation: cartWiggle 0.5s ease !important; } /* Focus-visible for accessibility */ .header-actions__action:focus-visible { outline: 2px solid #1B4B43 !important; outline-offset: 2px !important; background-color: rgba(27, 75, 67, 0.06) !important; } /* ============================================================ REDESIGN: ANNOUNCEMENT BAR - Slimmer & cleaner ============================================================ */ .announcement-bar { padding: 6px 0 !important; } .announcement-bar .announcement-bar__text, .announcement-bar p { font-size: 12px !important; letter-spacing: 0.04em !important; } /* [REMOVED: v1 dark CTA — superseded, 62 lines cleaned up] */ /* ============================================================ REDESIGN: FOOTER - Premium gradient & animated links ============================================================ */ footer { background: #004445 !important; } footer h2, footer h3, footer .footer-block__heading { font-size: 14px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #ffffff !important; padding-bottom: 12px !important; border-bottom: 2px solid rgba(255,255,255,0.15) !important; margin-bottom: 20px !important; } footer a:not(.button) { color: rgba(255,255,255,0.7) !important; transition: all 0.25s ease !important; position: relative !important; display: inline-block !important; } footer a:not(.button):hover { color: #ffffff !important; transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(27, 75, 67, 0.25) !important; } footer a:not(.button)::after { content: '' !important; position: absolute !important; bottom: 0 !important; left: 0 !important; width: 0 !important; height: 1px !important; background-color: rgba(255,255,255,0.5) !important; transition: width 0.3s ease !important; } footer a:not(.button):hover::after { width: 100% !important; } footer a[href^="tel"], footer a[href^="mailto"] { color: #d9e6df !important; font-weight: inherit !important; } footer a[href^="tel"]:hover, footer a[href^="mailto"]:hover { color: #ffffff !important; } /* Footer: hide legal-bar dots; phone/mail icons before contact links. */ .esh-legal-bar__sep { display: none !important; } footer .esh-legal-bar, .esh-legal-bar { gap: 8px 20px !important; } .footer-content a[href^="tel"], .footer-content a[href^="mailto"], footer a[href^="tel"], footer a[href^="mailto"] { display: inline-flex !important; align-items: center !important; gap: 8px !important; } .footer-content a[href^="tel"]::after, .footer-content a[href^="mailto"]::after, footer a[href^="tel"]::after, footer a[href^="mailto"]::after { display: none !important; } .footer-content a[href^="tel"]::before, .footer-content a[href^="mailto"]::before, footer a[href^="tel"]::before, footer a[href^="mailto"]::before { content: "" !important; display: block !important; width: 15px !important; height: 15px !important; flex: 0 0 15px !important; background-color: currentColor !important; } .footer-content a[href^="tel"]::before, footer a[href^="tel"]::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center / contain no-repeat !important; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center / contain no-repeat !important; } .footer-content a[href^="mailto"]::before, footer a[href^="mailto"]::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") center / contain no-repeat !important; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") center / contain no-repeat !important; } .esh-ds-footer__legal-links span[aria-hidden] { display: none !important; } .esh-ds-footer a[href^="tel"], .esh-ds-footer a[href^="mailto"] { gap: 8px !important; color: #d9e6df !important; } .esh-ds-footer a:hover { color: #ffffff !important; } .esh-ds-footer a[href^="tel"]::before, .esh-ds-footer a[href^="mailto"]::before { content: "" !important; display: block !important; width: 15px !important; height: 15px !important; flex: 0 0 15px !important; background-color: currentColor !important; } .esh-ds-footer a[href^="tel"]::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center / contain no-repeat !important; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center / contain no-repeat !important; } .esh-ds-footer a[href^="mailto"]::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") center / contain no-repeat !important; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") center / contain no-repeat !important; } footer input[type="email"] { background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.2) !important; border-radius: 50px !important; color: #ffffff !important; padding: 14px 20px !important; transition: all 0.3s ease !important; } footer input[type="email"]:focus { border-color: #7dd3c0 !important; box-shadow: 0 0 0 3px rgba(125,211,192,0.2) !important; outline: none !important; } footer input[type="email"]::placeholder { color: rgba(255,255,255,0.4) !important; } .esh-footer-map { border-radius: 12px !important; overflow: hidden !important; box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important; } footer .footer-content { padding-top: 60px !important; padding-bottom: 50px !important; } footer .footer-block { margin-bottom: 30px !important; } footer p, footer li { color: rgba(255,255,255,0.65) !important; line-height: 1.7 !important; } /* [REMOVED: v2 sidebar — superseded, 46 lines cleaned up] */ /* ============================================================ v2 REDESIGN: STORE TITLE - Bigger ============================================================ */ .header__heading-text, .header .header__heading a { font-size: 1.4rem !important; font-weight: 700 !important; letter-spacing: -0.01em !important; } .header__heading-logo { max-height: 50px !important; } /* ============================================================ v2 REDESIGN: SERVICE CTA - COMPLETELY NEW (Light/Warm) Replaces the dark gradient approach entirely. Inspired by Rapha/Trek - editorial, premium, warm. ============================================================ */ /* OVERRIDE: Remove ALL old dark backgrounds */ .esh-main-content > [id*="service_cta"], .esh-main-content > [id*="service_cta"] .section-background, .esh-main-content > [id*="service_cta"] .section-background.color-scheme-1, .esh-main-content > [id*="service_cta"] .section.color-scheme-1 { background: #f8f7f4 !important; background-image: none !important; } /* Remove decorative pseudo-elements from old design */ .esh-main-content > [id*="service_cta"]::before, .esh-main-content > [id*="service_cta"]::after { display: none !important; } /* Outer container - warm cream bg with top accent */ .esh-main-content > [id*="service_cta"] { position: relative !important; padding: 0 !important; overflow: visible !important; border-top: 3px solid #1B4B43 !important; } /* Content wrapper - generous padding */ .esh-main-content > [id*="service_cta"] .section { padding: 70px 40px 80px !important; text-align: center !important; max-width: 700px !important; margin: 0 auto !important; } /* Subtitle "PROFESJONELT VERKSTED" */ .esh-main-content > [id*="service_cta"] section > p:first-child { color: #1B4B43 !important; font-size: 0.8rem !important; font-weight: 600 !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; margin-bottom: 12px !important; opacity: 0.7 !important; } /* Main heading "Service du kan stole på" */ .esh-main-content > [id*="service_cta"] h2 { color: #1a1a1a !important; font-size: clamp(2rem, 4vw, 2.8rem) !important; font-weight: 700 !important; letter-spacing: -0.025em !important; line-height: 1.15 !important; margin-bottom: 20px !important; } /* Description text */ .esh-main-content > [id*="service_cta"] section > p:nth-child(3) { color: #555555 !important; font-size: 1.1rem !important; line-height: 1.7 !important; max-width: 500px !important; margin: 0 auto 32px !important; opacity: 1 !important; } /* CTA Button - solid dark teal, confident */ .esh-main-content > [id*="service_cta"] a { display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #1B4B43 !important; color: #ffffff !important; padding: 16px 40px !important; border-radius: 6px !important; font-size: 0.875rem !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; text-decoration: none !important; border: none !important; box-shadow: 0 2px 8px rgba(27,75,67,0.15) !important; transition: all 0.25s ease-in-out !important; min-height: 52px !important; } .esh-main-content > [id*="service_cta"] a:hover { background: #2D6B5F !important; color: #ffffff !important; transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(27,75,67,0.25) !important; } .esh-main-content > [id*="service_cta"] a:active { transform: translateY(0) scale(0.98) !important; } /* All text override to dark (override old white text rules) */ .esh-main-content > [id*="service_cta"] *:not(a) { color: inherit !important; } /* ============================================================ v2 REDESIGN: PRODUCT PAGE - Mobile-First Image on top, details below, better typography ============================================================ */ /* MOBILE: Stack vertically - image on top */ @media (max-width: 749px) { .product-information__grid { display: flex !important; flex-direction: column !important; gap: 0 !important; } .product-information__media { width: 100% !important; order: 1 !important; } .product-details { width: 100% !important; order: 2 !important; padding: 1.5rem 1rem !important; } /* Full-width images on mobile */ .media-gallery, .media-gallery--two-column { width: 100% !important; max-width: 100vw !important; } /* Single column gallery on mobile */ .media-gallery--two-column .media-gallery__grid { grid-template-columns: 1fr !important; gap: 8px !important; } /* Constrain gallery height */ .product-media-container { max-height: 65vh !important; } } /* TABLET: Still stacked with more breathing room */ @media (min-width: 750px) and (max-width: 989px) { .product-information__grid { display: flex !important; flex-direction: column !important; gap: 1.5rem !important; max-width: 720px !important; margin: 0 auto !important; } .product-information__media { order: 1 !important; } .product-details { order: 2 !important; } } /* Product title - bigger and bolder */ .product-information h1, .product-details h1 { font-size: clamp(1.5rem, 3vw + 0.5rem, 2.25rem) !important; font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: -0.01em !important; margin-bottom: 8px !important; } /* Price styling */ .product-details .price-item { font-size: clamp(1.125rem, 2vw, 1.5rem) !important; font-weight: 700 !important; } /* Availability badge */ .product-details .availability-badge, .product-details [class*="badge"] { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 6px 14px !important; border-radius: 50px !important; font-size: 0.8rem !important; font-weight: 500 !important; } /* Product description */ .product-details .rte, .product-details [data-block-type="description"] { max-width: 65ch !important; line-height: 1.7 !important; font-size: 0.95rem !important; color: #444 !important; } /* Add to cart button - prominent and full width on mobile */ .product-form__submit, button[name="add"] { font-size: 1rem !important; font-weight: 700 !important; letter-spacing: 0.03em !important; border-radius: 6px !important; min-height: 54px !important; transition: all 0.2s ease !important; } .product-form__submit:active, button[name="add"]:active { transform: scale(0.98) !important; } @media (max-width: 749px) { .product-form__submit, button[name="add"] { width: 100% !important; min-height: 56px !important; font-size: 1.1rem !important; } /* Sticky add-to-cart on mobile */ .product-form__buttons, product-form .product-form { position: sticky !important; bottom: 0 !important; z-index: 10 !important; background-color: #ffffff !important; padding: 12px 16px !important; box-shadow: 0 -2px 10px rgba(0,0,0,0.08) !important; margin: 0 -1rem !important; } } /* Buy it now button */ .shopify-payment-button .shopify-payment-button__button { border-radius: 6px !important; min-height: 52px !important; } /* Quantity selector - cleaner */ .quantity-selector, .product-form__quantity { border-radius: 6px !important; } /* ============================================================ v2 REDESIGN: IMAGE ZOOM FIX - Constrained Scaling ============================================================ */ /* Prevent images from scaling beyond native resolution */ img.product-media__image { object-fit: contain !important; width: 100% !important; height: auto !important; max-width: 100% !important; } /* Product media containers - center images with neutral bg */ .product-media-container { display: flex !important; align-items: center !important; justify-content: center !important; background-color: #f8f8f8 !important; border-radius: 8px !important; overflow: hidden !important; } /* Limit drag-zoom scale */ .product-media-container--zoomable { --drag-zoom-scale: 2 !important; } /* Zoom dialog - constrain dimensions */ .dialog-zoomed-gallery .product-media__image { max-width: 100% !important; max-height: 90vh !important; width: auto !important; height: auto !important; object-fit: contain !important; } @media (min-width: 990px) { .dialog-zoomed-gallery__dialog { max-width: 80vw !important; max-height: 90vh !important; } } /* Mobile zoom - more conservative */ @media (max-width: 749px) { .product-media-container--zoomable { --drag-zoom-scale: 1.5 !important; } .dialog-zoomed-gallery .product-media__image { max-height: 80vh !important; } } /* Gallery grid - equal sizing with rounded corners */ .media-gallery__grid .product-media-container { border-radius: 8px !important; aspect-ratio: 1 / 1 !important; } /* Thumbnail images */ .media-gallery slideshow-controls button img { border-radius: 4px !important; object-fit: contain !important; background: #f5f5f5 !important; } /* [REMOVED: v3 sidebar — superseded, 43 lines cleaned up] */ /* ============================================================ v4 FIX: SIDEBAR REORDER - Ultra-high specificity override aside.collection-sidebar-section nav.sidebar-nav > :nth-child specificity (0,3,2) beats v2 (0,3,1) ============================================================ */ aside.collection-sidebar-section nav.sidebar-nav > :nth-child(1) { order: 1 !important; } aside.collection-sidebar-section nav.sidebar-nav > :nth-child(2) { order: 2 !important; } aside.collection-sidebar-section nav.sidebar-nav > :nth-child(3) { order: 4 !important; } aside.collection-sidebar-section nav.sidebar-nav > :nth-child(4) { order: 3 !important; } aside.collection-sidebar-section nav.sidebar-nav > :nth-child(5) { order: 5 !important; } aside.collection-sidebar-section nav.sidebar-nav > :nth-child(6) { order: 6 !important; } aside.collection-sidebar-section nav.sidebar-nav > :nth-child(7) { order: 7 !important; } aside.collection-sidebar-section nav.sidebar-nav > :nth-child(8) { order: 8 !important; } aside.collection-sidebar-section nav.sidebar-nav > :nth-child(9) { order: 9 !important; } aside.collection-sidebar-section nav.sidebar-nav > :nth-child(10) { order: 10 !important; } aside.collection-sidebar-section nav.sidebar-nav > :nth-child(11) { order: 11 !important; } aside.collection-sidebar-section nav.sidebar-nav > :nth-child(12) { order: 12 !important; } aside.collection-sidebar-section nav.sidebar-nav > :nth-child(13) { order: 13 !important; } aside.collection-sidebar-section nav.sidebar-nav > :nth-child(14) { order: 14 !important; } aside.collection-sidebar-section nav.sidebar-nav > :nth-child(15) { order: 15 !important; } /* ============================================================ v5 FIX: CTA inner SECTION element has dark bg from theme ============================================================ */ .esh-main-content > [id*="service_cta"] .section section, .esh-main-content > [id*="service_cta"] section { background: transparent !important; background-color: transparent !important; border-radius: 0 !important; padding: 0 !important; } /* Ensure ALL text in CTA is dark (not white) except button */ .esh-main-content > [id*="service_cta"] section *:not(a) { color: inherit !important; } .esh-main-content > [id*="service_cta"] section h2 { color: #1a1a1a !important; } .esh-main-content > [id*="service_cta"] section > p:first-child { color: #1B4B43 !important; opacity: 0.7 !important; } .esh-main-content > [id*="service_cta"] section > p:nth-child(3) { color: #555555 !important; } /* ═══════════════════════════════════════════════════════════════ v6 FINAL POLISH — Border-radius, CTA cleanup, product page Date: 2026-03-02 ═══════════════════════════════════════════════════════════════ */ /* --- v6.1: CTA Section — Remove card-like rounded border --- */ .esh-main-content > [id*="service_cta"], [id*="service_cta"] { border-radius: 0 !important; } .esh-main-content > [id*="service_cta"] .section--page-width, .esh-main-content > [id*="service_cta"] .section { border-radius: 0 !important; } /* --- v6.2: CTA — Stronger visual separation from page bg --- */ .esh-main-content > [id*="service_cta"] { border-top: 3px solid #1B4B43 !important; border-bottom: 1px solid rgba(0,0,0,0.06) !important; margin-top: 60px !important; margin-bottom: 0 !important; } /* --- v6.3: Product page — Remove gray bars (skip link + media spacing) --- */ .product-information__grid .skip-to-content-link { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; } /* --- v6.4: Product page — Tighter image container --- */ .product-media-container.constrain-height { background-color: #ffffff !important; border-radius: 0 !important; overflow: hidden !important; } .product-media-container { border-radius: 0 !important; background-color: #ffffff !important; } /* --- v6.5: Product page — Clean gallery presentation --- */ media-gallery .media-gallery__grid { gap: 4px !important; } .product-information__media { border-radius: 0 !important; } /* --- v6.6: Product details — Better typography hierarchy --- */ .product-details .product-information__title h1 { font-size: clamp(1.6rem, 3vw, 2.2rem) !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.2 !important; color: #1a1a1a !important; } .product-details .product-information__price .price__regular .price-item { font-size: 1.4rem !important; font-weight: 600 !important; color: #1B4B43 !important; } /* --- v6.7: Product page — Add to cart button refinement --- */ .product-form__submit, .product-details button[name="add"], buy-buttons button[name="add"] { background-color: #1B4B43 !important; color: #ffffff !important; font-size: 1rem !important; font-weight: 700 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; border-radius: 6px !important; min-height: 54px !important; transition: background-color 0.2s ease !important; } .product-form__submit:hover, .product-details button[name="add"]:hover, buy-buttons button[name="add"]:hover { background-color: #2D6B5F !important; } product-card .quick-add__button, product-card button[name="add"] { text-transform: none !important; letter-spacing: 0 !important; } /* --- v6.8: Product page description — Better readability --- */ .product-details .accordion__content p, .product-details .product-information__description p { font-size: 0.95rem !important; line-height: 1.75 !important; color: #444444 !important; } /* --- v6.9: Product page — Availability badge styling --- */ .product-details .product-form__inventory .icon-checkmark ~ span, .product-details .availability .icon-checkmark ~ span { color: #1B4B43 !important; font-weight: 500 !important; } /* --- v6.10: CTA — All inner elements transparent bg --- */ [id*="service_cta"] .section-background, [id*="service_cta"] .section-background.color-scheme-1, [id*="service_cta"] .section.color-scheme-1, [id*="service_cta"] .section--page-width, [id*="service_cta"] section { background: transparent !important; background-color: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; } /* --- Sidebar: Åpningstider display (restored after cleanup) --- */ aside.collection-sidebar-section nav.sidebar-nav > :nth-child(2)::after { content: '\1F552 Man-Fre 09-17 \00B7 L\00F8r 10-15' !important; display: block !important; font-size: 11px !important; color: rgba(0,0,0,0.5) !important; margin-top: 6px !important; padding: 4px 0 !important; letter-spacing: 0.02em !important; } /* --- Fix: Sidebar divider with åpningstider needs auto height --- */ aside.collection-sidebar-section nav.sidebar-nav > .sidebar-nav__divider:nth-child(2) { height: auto !important; min-height: 1px !important; padding-bottom: 4px !important; } aside.collection-sidebar-section nav.sidebar-nav > :nth-child(2)::after { margin-top: 8px !important; padding: 6px 0 2px !important; } /* ═══════════════════════════════════════════ v8.8: UX Improvements — Product Cards & Grid Updated: 2026-03-02 ═══════════════════════════════════════════ */ /* --- Product card hover: Smooth zoom effect --- */ .resource-card:hover .resource-card__image, .product-card:hover .product-card__image { transform: scale(1.03); transition: transform 0.3s ease; } .resource-card__image, .product-card__image { transition: transform 0.3s ease; } /* --- Product card: Better shadow on hover --- */ .resource-card:hover, .product-card:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); transition: box-shadow 0.3s ease; } /* --- Product card: Larger, bolder prices --- */ .resource-card [class*="price"], .product-card [class*="price"], .collection-product-list [class*="price"] { font-size: 1.1rem !important; font-weight: 700 !important; color: #1B4B43 !important; } /* --- Product card: Compare/sale price styling --- */ .resource-card [class*="price"] s, .resource-card [class*="price"] del, .product-card [class*="price"] s, .product-card [class*="price"] del { color: #999 !important; font-weight: 400 !important; font-size: 0.9rem !important; } /* --- Product card: Clearer titles --- */ .resource-card [class*="title"] a, .product-card [class*="title"] a { font-size: 1.05rem !important; font-weight: 600 !important; line-height: 1.35 !important; color: #222 !important; } /* --- Sale badge styling --- */ .badge--sale, [class*="badge"][class*="sale"] { background-color: #dc2626 !important; color: #fff !important; font-weight: 600 !important; padding: 4px 10px !important; border-radius: 4px !important; font-size: 0.75rem !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; } /* --- Sold out badge --- */ .badge--sold-out, [class*="badge"][class*="sold"] { background-color: #6b7280 !important; color: #fff !important; } /* --- Quick add button: More prominent --- */ .quick-add__button, button[class*="quick-add"] { font-weight: 600 !important; min-height: 44px !important; transition: all 0.2s ease !important; } /* ═══════════════════════════════════════════ v8.9: Mobile Improvements ═══════════════════════════════════════════ */ @media (max-width: 749px) { /* Bigger product cards on mobile */ .resource-card [class*="title"] a, .product-card [class*="title"] a { font-size: 0.95rem !important; font-weight: 600 !important; } .resource-card [class*="price"], .product-card [class*="price"] { font-size: 1rem !important; } /* Ensure touch-friendly tap targets */ .quick-add__button, button[class*="quick-add"], .resource-card a { min-height: 44px !important; } /* Cookie consent popup: Move to bottom bar on mobile */ #shopify-pc__banner { bottom: 0 !important; top: auto !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; border-radius: 0 !important; margin: 0 !important; } } /* --- Hide sidebar åpningstider (removed per user request) --- */ aside.collection-sidebar-section nav.sidebar-nav > :nth-child(2)::after { display: none !important; content: none !important; } aside.collection-sidebar-section nav.sidebar-nav > .sidebar-nav__divider:nth-child(2) { height: 1px !important; padding-bottom: 0 !important; } /* ============================================================ v7: MOBILE RESPONSIVE FIXES ============================================================ */ /* v7.1: Hero heading — Prevent awkward line break on mobile */ @media (max-width: 749px) { .hero-banner h2, [class*="hero"] h2, main > section:first-child h2, main > div:first-child h2 { font-size: clamp(1.4rem, 7vw, 2.2rem) !important; line-height: 1.15 !important; word-break: keep-all !important; hyphens: none !important; overflow-wrap: normal !important; } } /* v7.2: Footer — Fix collapsed container on mobile */ @media (max-width: 749px) { .footer-content { height: auto !important; min-height: unset !important; overflow: visible !important; display: flex !important; flex-direction: column !important; gap: 24px !important; padding: 24px 28px !important; } .footer-content > * { width: 100% !important; min-width: 0 !important; } .esh-footer-map { height: 250px !important; min-height: 250px !important; } .esh-footer-map iframe { height: 250px !important; width: 100% !important; } } /* v7.3: Footer grid - Force full width on mobile */ @media (max-width: 749px) { footer .section--page-width, .shopify-section-group-footer-group .section--page-width { display: block !important; grid-template-columns: 1fr !important; padding-left: 0 !important; padding-right: 0 !important; } footer .footer-content, .shopify-section-group-footer-group .footer-content { width: 100% !important; max-width: 100% !important; padding: 32px 28px !important; grid-column: 1 !important; } footer .footer-content > *, .shopify-section-group-footer-group .footer-content > * { width: 100% !important; max-width: 100% !important; } footer .utilities, .shopify-section-group-footer-group .utilities { width: 100% !important; max-width: 100% !important; padding: 16px 20px !important; grid-column: 1 !important; } } /* ===== ESH page mal (live loads custom.css, not esh.css) ===== Same 1100px column on every inner page. Horizon default is 42rem (672px). */ #MainContent .section.page-width-content { --normal-content-width: var(--esh-page-max); --page-content-width: var(--esh-page-max); --page-width: calc(var(--esh-page-max) + var(--page-margin) * 2); --full-page-grid-central-column-width: min(var(--esh-page-max), calc(100% - var(--page-margin) * 2)); } #MainContent .section.page-width-content .layout-panel-flex, #MainContent .section.page-width-content .shopify-block.rte, #MainContent .section.page-width-content rte-formatter, #MainContent .section.page-width-content .esh-page-body, #MainContent .section.page-width-content .esh-hub { width: 100% !important; max-width: var(--esh-page-max) !important; margin-inline: auto !important; } html body.esh-verksted-page .esh-hub, html body.esh-contact-page .esh-contact-lead, html body.esh-form-page .esh-booking-lead, html body.esh-form-page .esh-cal, html body.esh-form-page .esh-spare-part-lead { --ink: var(--esh-ink); --deep: var(--esh-deep); --line: var(--esh-line); --muted: var(--esh-muted); width: 100% !important; max-width: var(--esh-page-max) !important; margin-inline: auto !important; color: var(--esh-ink) !important; background: var(--esh-paper) !important; box-shadow: none !important; } html body.esh-form-page .esh-booking-lead, html body.esh-form-page .esh-spare-part-lead { border: 0 !important; border-radius: 0 !important; padding: 42px 24px 36px !important; } html body.esh-form-page .esh-booking-form, html body.esh-form-page .esh-spare-part-form, html body.esh-contact-page .esh-contact-lead-form { padding: 24px !important; border: 1px solid var(--esh-line) !important; border-radius: 16px !important; background: var(--esh-paper) !important; } /* Select: one icon, right side only. Text never under the chevron. */ html body.esh-form-page select, html body.esh-contact-page select { -webkit-appearance: none !important; appearance: none !important; min-width: 0 !important; max-width: 100% !important; width: 100% !important; padding: 11px 2.75rem 11px 12px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; background-color: var(--esh-paper) !important; background-image: url("data:image/svg+xml;utf8,") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 16px 16px !important; } html body.esh-form-page label, html body.esh-contact-page label { min-width: 0; scroll-margin-top: 96px; } /* Mobile-first grids. Snippets default to 4/2 col — override here. */ html body.esh-form-page .esh-booking-form__grid, html body.esh-form-page .esh-spare-part-form__grid, html body.esh-contact-page .esh-contact-lead-form__grid { grid-template-columns: minmax(0, 1fr) !important; } html body.esh-form-page .esh-how, html body.esh-contact-page .esh-how, html body.esh-verksted-page .esh-hub__steps { grid-template-columns: minmax(0, 1fr) !important; } @media (min-width: 640px) { html body.esh-form-page .esh-how, html body.esh-contact-page .esh-how, html body.esh-verksted-page .esh-hub__steps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (min-width: 900px) { html body.esh-form-page .esh-booking-form__grid, html body.esh-form-page .esh-spare-part-form__grid, html body.esh-contact-page .esh-contact-lead-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (min-width: 1000px) { html body.esh-form-page .esh-how:not(.esh-how--3), html body.esh-verksted-page .esh-hub__steps { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } html body.esh-contact-page .esh-how--3, html body.esh-form-page .esh-how--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } html body.esh-verksted-page .esh-hub__title, html body.esh-contact-page .esh-contact-lead h1, html body.esh-form-page .esh-booking-lead h1, html body.esh-form-page .esh-cal h2, html body.esh-form-page .esh-spare-part-lead h1 { font-size: var(--esh-page-title) !important; line-height: 1.15 !important; color: var(--esh-ink) !important; } html body.esh-contact-page .esh-how li, html body.esh-form-page .esh-how li, html body.esh-verksted-page .esh-hub__steps li { background: var(--esh-paper) !important; border: 1px solid var(--esh-line) !important; } html body.esh-contact-page .esh-how__n, html body.esh-form-page .esh-how__n, html body.esh-verksted-page .esh-hub__steps b { background: var(--esh-deep) !important; color: var(--esh-paper) !important; } html body.esh-contact-page .esh-contact-lead-form__submit, html body.esh-form-page .esh-booking-form__submit, html body.esh-form-page .esh-spare-part-form__submit { background: var(--esh-deep) !important; color: var(--esh-paper) !important; } /* Header: store name is desktop-only. theme.liquid re-shows it 400–749. */ html.esh-mal body a.header-logo::after, html.esh-mal body .header-logo::after { /* desktop keeps the name; mobile media below kills it */ } @media (max-width: 749px) { html.esh-mal body a.header-logo::after, html.esh-mal body .header-logo::after, html body.page-width-narrow a.header-logo::after, html body.esh-contact-page a.header-logo::after, html body.esh-verksted-page a.header-logo::after, html body.esh-form-page a.header-logo::after, html body.esh-home a.header-logo::after { content: "" !important; display: none !important; visibility: hidden !important; font-size: 0 !important; width: 0 !important; max-width: 0 !important; height: 0 !important; } html.esh-mal body a.header-logo, html body.page-width-narrow a.header-logo { flex: 0 0 auto !important; max-width: max-content !important; gap: 0 !important; } body:not(.esh-form-page):not(.esh-contact-page) { padding-bottom: 108px !important; scroll-padding-bottom: 108px; } html { scroll-padding-top: 92px; scroll-padding-bottom: 108px; } } /* Hero overlay vs slideshow controls (custom.css loads on live). */ .esh-home .hero { min-height: max(26rem, var(--hero-min-height, 25rem)); } .esh-home .hero .hero__container { min-height: inherit; } .esh-home .hero .hero__content-wrapper { justify-content: center !important; padding-top: 1.25rem; padding-bottom: 4.75rem; box-sizing: border-box; } @media (max-width: 749px) { .esh-home .hero { min-height: 28rem; } .esh-home .hero .hero__content-wrapper { padding-bottom: 4.75rem !important; padding-right: 12px !important; align-items: flex-start !important; text-align: start !important; } .esh-home .hero .hero__content-wrapper h2, .esh-home .hero .hero__content-wrapper p, .esh-home .hero .hero__content-wrapper .text-block { text-align: start !important; max-width: 100%; } .esh-home .hero .hero__content-wrapper .button, .esh-home .hero .hero__content-wrapper .button-secondary, .esh-home .hero a.button, .esh-home .hero a.button-secondary { align-self: flex-start !important; } .esh-hero-slideshow-controls { right: 10px; bottom: 10px; } } .footer-content { content-visibility: visible; contain: none; } /* Hide cart until inventory/dropshipping is ready. Remove this block to restore. */ html body cart-icon, html body cart-drawer-component, html body .cart-drawer, html body header-actions [aria-label="Handlekurv"], html body header-actions [aria-controls="cart-drawer"] { display: none !important; } .esh-ds-footer__facts { display: grid; gap: 4px 0; } .esh-ds-footer__row { display: flex; align-items: flex-start; gap: 8px; margin: 0; } .esh-ds-footer__mini-logo { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 0; object-fit: cover; object-position: left center; filter: brightness(0) invert(1); opacity: .92; } .esh-ds-footer__row--brand { align-items: center; margin-bottom: 4px; } .esh-ds-footer__row--brand strong { color: #d9e6df; font-weight: 750; } .esh-ds-footer a.esh-ds-footer__map { align-items: flex-start; gap: 8px; min-height: 0; line-height: 1.4; padding-top: 1px; } .esh-ds-footer a.esh-ds-footer__map::before, .esh-ds-footer__row--org::before { content: "" !important; display: block !important; width: 15px !important; height: 15px !important; flex: 0 0 15px !important; margin-top: 3px; background-color: currentColor !important; } .esh-ds-footer a.esh-ds-footer__map::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat !important; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat !important; } .esh-ds-footer__row--org { align-items: center; margin-top: 6px; color: #b8cbc2; } /* Homepage: full-bleed bands like Verksted i Drammen, no inset cards. */ body.esh-home .shopify-section:has(.esh-reviews) { background-color: #e3eee8 !important; } body.esh-home .shopify-section:has(.esh-knowledge) { background-color: #ffffff !important; } body.esh-home .shopify-section:has(.esh-cats) { background-color: #f8f7f4 !important; } body.esh-home .shopify-section:has(.esh-brands) { background-color: #e3eee8 !important; } body.esh-home .esh-reviews, body.esh-home .esh-knowledge, body.esh-home .esh-brands { max-width: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; background: transparent !important; } body.esh-home .esh-reviews__inner, body.esh-home .esh-knowledge__inner { max-width: 1100px !important; margin-left: auto !important; margin-right: auto !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } body.esh-home .esh-brands { max-width: 1100px !important; margin-left: auto !important; margin-right: auto !important; } .esh-ds-footer__row--org::before { margin-top: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z'/%3E%3C/svg%3E") center / contain no-repeat !important; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z'/%3E%3C/svg%3E") center / contain no-repeat !important; } /* Shared clickable hover: same lift as homepage "Verksted i Drammen" CTA. */ @media (hover: hover) and (pointer: fine) { :is( .button, .button-secondary, button.shopify-payment-button__button--unbranded, .esh-ds-button, .esh-ds-choice, .esh-ds-sym, .esh-ds-service summary, [id*="service_cta"] a, .esh-path, .esh-cat, .esh-knowledge__topic, .esh-knowledge__link, .esh-reviews__link, .esh-brands__cta a, .esh-nav__cta, .esh-nav__row, .esh-nav__child, .esh-product-nav a, product-card, .product-card, .collection-card, .resource-card, .product-form__submit, buy-buttons button[name="add"], .esh-ds-footer a, footer a, .header-actions__action, .account-button, .esh-usp__link, .esh-contact-lead button[type="submit"], .esh-booking-lead button[type="submit"], .esh-spare-part-lead button[type="submit"], .pagination a, .pagination button ) { transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out, background-color 0.25s ease-in-out, border-color 0.25s ease-in-out, color 0.25s ease-in-out !important; } :is( .button, .button-secondary, button.shopify-payment-button__button--unbranded, .esh-ds-button, .esh-ds-choice, .esh-ds-sym, .esh-ds-service summary, [id*="service_cta"] a, .esh-path, .esh-cat, .esh-knowledge__topic, .esh-knowledge__link, .esh-reviews__link, .esh-brands__cta a, .esh-nav__cta, .esh-nav__row, .esh-nav__child, .esh-product-nav a, product-card, .product-card, .collection-card, .resource-card, .product-form__submit, buy-buttons button[name="add"], .esh-ds-footer a, footer a, .header-actions__action, .account-button, .esh-usp__link, .esh-contact-lead button[type="submit"], .esh-booking-lead button[type="submit"], .esh-spare-part-lead button[type="submit"], .pagination a, .pagination button ):hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(27, 75, 67, 0.25) !important; } :is( .button, .button-secondary, button.shopify-payment-button__button--unbranded, .esh-ds-button, .esh-ds-choice, .esh-ds-sym, .esh-ds-service summary, [id*="service_cta"] a, .esh-path, .esh-cat, .esh-knowledge__topic, .esh-knowledge__link, .esh-reviews__link, .esh-brands__cta a, .esh-nav__cta, .esh-nav__row, .esh-nav__child, .esh-product-nav a, product-card, .product-card, .collection-card, .resource-card, .product-form__submit, buy-buttons button[name="add"], .esh-ds-footer a, footer a, .header-actions__action, .account-button, .esh-usp__link, .esh-contact-lead button[type="submit"], .esh-booking-lead button[type="submit"], .esh-spare-part-lead button[type="submit"], .pagination a, .pagination button ):active { transform: translateY(0) scale(0.98) !important; } .esh-nav__row.is-current:hover, .esh-nav__child[aria-current="page"]:hover { box-shadow: inset 3px 0 0 #0a4d3c, 0 6px 20px rgba(27, 75, 67, 0.25) !important; } :is( .header-logo, .facets__summary, .esh-coll-note__card a, .esh-deler-chips a, .esh-deler-info__cta a ) { transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out, background-color 0.25s ease-in-out, border-color 0.25s ease-in-out, color 0.25s ease-in-out !important; } :is( .header-logo, .facets__summary, .esh-coll-note__card a, .esh-deler-chips a, .esh-deler-info__cta a ):hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(27, 75, 67, 0.25) !important; } .skip-to-content-link:hover, .close-button:hover, .menu-drawer__close-button:hover, .cart-drawer__close-button:hover { transform: none !important; box-shadow: none !important; } } @media (prefers-reduced-motion: reduce) { :is( .button, .button-secondary, .esh-ds-button, .esh-ds-choice, [id*="service_cta"] a, .esh-path, .esh-cat, .esh-knowledge__topic, .esh-knowledge__link, .esh-reviews__link, .esh-brands__cta a, .esh-nav__cta, .esh-nav__row, .esh-nav__child, product-card, .product-card, .esh-ds-footer a, footer a ):hover, :is( .button, .button-secondary, .esh-ds-button, [id*="service_cta"] a, .esh-path, .esh-cat, .esh-nav__cta, .esh-nav__row, .esh-nav__child, product-card, .esh-ds-footer a, footer a ):active { transform: none !important; } } /* One page title: hide the theme/Shopify heading when the body already starts with one. */ .shopify-policy__container:has(.shopify-policy__body .rte > h1:first-child) .shopify-policy__title { display: none !important; } #MainContent .shopify-section:has(rte-formatter > :is(h1, h2):first-child) .text-block:has(> h1), #MainContent .shopify-section:has(.policy-page > :is(h1, h2):first-child) .text-block:has(> h1), #MainContent .shopify-section:has(.faq-page > :is(h1, h2):first-child) .text-block:has(> h1), #MainContent .shopify-section:has(.esh-about) .text-block:has(> h1) { display: none !important; } .esh-hub__main-title { display: none !important; } .policy-page > :is(h1, h2):first-child, .faq-page > :is(h1, h2):first-child, .esh-hub__main-title, .esh-about h1, .shopify-policy__body .rte > h1:first-child { margin: 0 0 1rem; font-size: var(--esh-page-title, clamp(1.8rem, 4vw, 2.7rem)) !important; font-weight: 750; line-height: 1.15; max-width: none !important; color: var(--esh-ink, #111); } /* Inner pages: title AND the line under it sit left, same as Verksted. Page-body CSS still does margin:auto + text-align:center on hub intro. */ body:not(.esh-home) #MainContent h1, body:not(.esh-home) #MainContent .text-block:has(> h1), body:not(.esh-home) #MainContent .esh-hub__intro, body:not(.esh-home) #MainContent .esh-hub__kicker, body:not(.esh-home) #MainContent .esh-hub__lead, body:not(.esh-home) #MainContent .esh-about__lede, body:not(.esh-home) #MainContent .esh-about__eyebrow { text-align: start !important; --text-align: start; --text-align-default: start; --horizontal-alignment: flex-start; } body:not(.esh-home) #MainContent .text-block:has(> h1) { align-items: flex-start !important; } body:not(.esh-home) #MainContent[data-template^="page"] .layout-panel-flex, body:not(.esh-home) #MainContent[data-template="policy"] .layout-panel-flex { align-items: flex-start !important; } body:not(.esh-home) #MainContent .esh-hub__intro, body:not(.esh-home) #MainContent .esh-hub__lead { margin-left: 0 !important; margin-right: auto !important; max-width: none !important; } .shopify-policy__container { width: min(100%, var(--esh-page-max)) !important; max-width: var(--esh-page-max) !important; margin-inline: auto !important; padding-inline: 20px; box-sizing: border-box; } .esh-about { max-width: var(--esh-page-max) !important; } body #MainContent .esh-about__story p { max-width: none !important; } /* Home proof strip: let the background meet both edges of the content area. */ .esh-home #MainContent .shopify-section:has(.esh-usp) > .section { width: 100% !important; max-width: none !important; margin-inline: 0 !important; } /* Section heads stay smaller than the page title. */ .policy-page h2:not(:first-child), .faq-page h2:not(:first-child), .esh-page-body h2:not(.esh-hub__main-title):not(:first-child), .shopify-policy__body .rte h2 { font-size: clamp(1.2rem, 1.6vw, 1.45rem) !important; line-height: 1.3 !important; font-weight: 700 !important; } .policy-page h3, .faq-page h3, .esh-page-body h3, .shopify-policy__body .rte h3, .esh-about h3 { font-size: 1.2rem !important; line-height: 1.35 !important; font-weight: 700 !important; } /* Mobile drawer = same nav as desktop sidebar, not Horizon default. */ @media (max-width: 989px) { .menu-drawer, .menu-drawer[class*="color-"] { background: #fff !important; color: #16352f !important; width: min(22rem, 100vw) !important; max-width: 100vw !important; border-right: 1px solid #dfe8e3 !important; box-shadow: 12px 0 40px rgba(10, 77, 60, 0.14) !important; z-index: 10000 !important; --color-background: #fff; --color-foreground: #16352f; --menu-top-level-font-color: #16352f; --menu-parent-font-color: #16352f; --menu-child-font-color: #3d554e; } body:has(.menu-open) .esh-sticky-cta, html:has(details.menu-open) .esh-sticky-cta { display: none !important; } .menu-drawer__close-button { background: #eef4f1 !important; color: #0a4d3c !important; border: 0 !important; border-radius: 10px !important; width: 44px !important; height: 44px !important; min-width: 44px !important; margin: 10px 12px 6px auto !important; box-shadow: none !important; } .menu-drawer__close-button .svg-wrapper, .menu-drawer__close-button svg { color: #0a4d3c !important; width: 20px !important; height: 20px !important; } .menu-drawer__navigation > .menu-drawer__menu, .menu-drawer__featured-content, .menu-drawer .menu-drawer__localized-content, .menu-drawer .menu-drawer__utility-links { display: none !important; } .menu-drawer__navigation { padding: 0 !important; margin: 0 !important; } .menu-drawer__navigation > .esh-mnav { display: block !important; visibility: visible !important; opacity: 1 !important; height: auto !important; padding: 4px 10px 28px !important; color: #16352f !important; font-family: inherit !important; text-transform: none !important; } .esh-mnav .esh-nav { display: flex !important; flex-direction: column !important; gap: 4px !important; } .esh-mnav .esh-nav__list, .esh-mnav .esh-nav__kids { list-style: none !important; margin: 0 !important; padding: 0 !important; } .esh-mnav .esh-nav__kids { padding: 2px 0 8px 12px !important; margin: 0 0 4px 18px !important; border-left: 2px solid #d5e5df !important; } .esh-mnav .esh-nav a, .esh-mnav .esh-nav button { font-family: inherit !important; text-decoration: none !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none; } .esh-mnav .esh-nav__label { display: block !important; padding: 14px 10px 6px !important; color: #6a7a74 !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: .12em !important; text-transform: uppercase !important; } .esh-mnav .esh-nav__label:first-child { padding-top: 0 !important; } .esh-mnav .esh-nav__row, .esh-mnav .esh-nav__child, .esh-mnav .esh-nav__cta { display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; min-height: 48px !important; padding: 8px 10px !important; border: 0 !important; border-radius: 10px !important; background: transparent !important; color: #16352f !important; font-size: 14px !important; font-weight: 650 !important; text-align: left !important; cursor: pointer; } .esh-mnav .esh-nav__child { min-height: 44px !important; font-size: 13px !important; font-weight: 600 !important; color: #3d554e !important; } .esh-mnav .esh-nav__cta { background: #0a4d3c !important; color: #fff !important; font-weight: 800 !important; border-radius: 12px !important; margin-bottom: 8px !important; } .esh-mnav .esh-nav__row svg, .esh-mnav .esh-nav__cta svg, .esh-mnav .esh-nav__child svg { flex: 0 0 20px; width: 20px !important; height: 20px !important; } .esh-mnav .esh-nav__chev { margin-left: auto; width: 16px !important; height: 16px !important; flex-basis: 16px; } .esh-mnav .esh-nav__row.is-current, .esh-mnav .esh-nav__child[aria-current="page"], .esh-mnav .esh-nav a[aria-current="page"] { background: #dceee7 !important; color: #0a4d3c !important; box-shadow: inset 3px 0 0 #0a4d3c !important; font-weight: 800 !important; } .esh-mnav .esh-nav__cta:hover, .esh-mnav .esh-nav__cta:focus-visible { background: #083d30 !important; color: #fff !important; } .esh-mnav .esh-nav__row:hover, .esh-mnav .esh-nav__row:focus-visible, .esh-mnav .esh-nav__child:hover, .esh-mnav .esh-nav__child:focus-visible { background: #e7f3ee !important; color: #0a4d3c !important; } } /* 2026-09-09 audit repairs: visible topic state, readable helper text and policy title. */ #topic-all:checked ~ .esh-hub__tabs-wrap label[for="topic-all"], #topic-general:checked ~ .esh-hub__tabs-wrap label[for="topic-general"], #topic-battery:checked ~ .esh-hub__tabs-wrap label[for="topic-battery"], #topic-drive:checked ~ .esh-hub__tabs-wrap label[for="topic-drive"], #topic-oil:checked ~ .esh-hub__tabs-wrap label[for="topic-oil"], #topic-season:checked ~ .esh-hub__tabs-wrap label[for="topic-season"], #topic-warranty:checked ~ .esh-hub__tabs-wrap label[for="topic-warranty"], #topic-parts:checked ~ .esh-hub__tabs-wrap label[for="topic-parts"], #topic-safety:checked ~ .esh-hub__tabs-wrap label[for="topic-safety"] { background: #0a4d3c !important; border-color: #0a4d3c !important; color: #fff !important; } #topic-all:focus-visible ~ .esh-hub__tabs-wrap label[for="topic-all"], #topic-general:focus-visible ~ .esh-hub__tabs-wrap label[for="topic-general"], #topic-battery:focus-visible ~ .esh-hub__tabs-wrap label[for="topic-battery"], #topic-drive:focus-visible ~ .esh-hub__tabs-wrap label[for="topic-drive"], #topic-oil:focus-visible ~ .esh-hub__tabs-wrap label[for="topic-oil"], #topic-season:focus-visible ~ .esh-hub__tabs-wrap label[for="topic-season"], #topic-warranty:focus-visible ~ .esh-hub__tabs-wrap label[for="topic-warranty"], #topic-parts:focus-visible ~ .esh-hub__tabs-wrap label[for="topic-parts"], #topic-safety:focus-visible ~ .esh-hub__tabs-wrap label[for="topic-safety"] { outline: 3px solid #0a4d3c !important; outline-offset: 3px !important; } .esh-paths__kicker, .esh-reviews__kicker, .esh-reviews__date, .esh-knowledge__kicker, .esh-cats__kicker, .esh-brands__kicker, .esh-brands__note, .esh-hub__kicker, .esh-hub__card-tag { color: #36564d !important; } .shopify-policy__title h1 { font-size: var(--esh-page-title, clamp(1.8rem, 4vw, 2.7rem)) !important; line-height: 1.15 !important; overflow-wrap: normal; word-break: normal; hyphens: auto; } /* Keep the four main customer journeys immediately visible in the phone menu. */ .esh-nav__mobile-quick { display: none; } .esh-mnav .esh-nav__mobile-quick { display: grid; gap: 2px; margin: 4px 0 14px; padding: 4px 0 10px 28px; border-left: 2px solid rgba(0, 91, 79, 0.16); } .esh-mnav .esh-nav__mobile-quick .esh-nav__child { display: flex; align-items: center; min-height: 44px; } .esh-mnav .esh-nav__mobile-duplicate { display: none !important; } .esh-mnav .esh-nav__mobile-duplicate-parent { display: none !important; }