/* ============================================= HEADER: Logo | Nav | Search + Icons ============================================= */ /* XD spec: header-main height = 80px */ :root { --header-height: 80px; } /* Header pinning. Desktop (≥992px): native `position: sticky`. Mobile (<992px): `position: fixed`. The mobile bar's actual rendered height is exposed by JS as `--header-h` on , and CSS pads by that value so content doesn't render underneath the fixed header. */ #header { z-index: 999; overflow: visible; /* Smooth fade between top-of-page (white) and scrolled (dark on desktop, white-with-shadow on mobile) states. Affects only the properties the `.header--sticky` modifier actually changes, so static layout properties aren't transitioned. */ transition: background-color 200ms ease, box-shadow 200ms ease; } /* The icons, logo, and badges fade their color/filter so the dark-mode switch feels continuous. Deliberately NOT transitioning `.nav-link` or `.header-main` - transitioning the actual hovered surfaces was making the megamenu flicker in sticky mode (the in-flight color change appeared to invalidate the hover hit-test). */ #header .h-icon-compare, #header .h-icon-wishlist, #header .h-icon-user, #header .h-icon-cart, #header .h-icon-search, #header .header-logo img, #header .ho-total-counter { transition: filter 200ms ease, background-color 200ms ease, color 200ms ease; } @media (min-width: 992px) { #header { position: -webkit-sticky; position: sticky; /* -1px (not 0) so the header overlaps the viewport top by 1px. Avoids the sub-pixel hairline gap that appears on Retina displays (MacBook, etc.) once the sticky class kicks in and the header re-anchors. */ top: -1px; } } @media (max-width: 991.98px) { /* `!important` to defeat the unscoped `#header { position: relative }` in stylesheet.css:367. */ #header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; background: #ffffff; } body { padding-top: var(--header-h, 60px); } } /* XD spec: background #fff, border-radius 12px 12px 0 0; overflow visible for dropdowns */ .header-main { background: #ffffff; border-radius: 12px 12px 0 0; overflow: visible; } /* Desktop: faint divider so the header visually separates from the page content below. Suppressed in sticky mode - the dark bar + box-shadow already provide separation, and a 1px line on top of #111 would just look like an artefact. */ @media (min-width: 992px) { .header-main { border-bottom: 1px solid rgba(0, 0, 0, 0.08); } #header.header--sticky .header-main { border-bottom-color: transparent; } } /* Row stretches to full header height so nav-items can fill it */ #header .header-main-wrapper { height: var(--header-height); flex-wrap: nowrap; align-items: stretch; } /* Logo column: vertically centered οΏ½ XD spec: 138px max-width */ .header-logo { display: flex; align-items: center; padding-right: 24px; } .header-logo img { max-width: 138px; height: auto; display: block; } /* Nav column: stretch full height, no horizontal padding */ .header-nav { padding-left: 0; padding-right: 0; display: flex; align-items: stretch; overflow: visible; flex: 1 1 0; min-width: 0; } /* Nav container fills its column */ .header-nav .megamenu-nav-container { display: flex; align-items: stretch; height: 100%; width: 100%; overflow: visible; } /* Nav list stretches to header height */ .header-nav .megamenu-nav { height: 100%; align-items: stretch; flex-wrap: nowrap; overflow: hidden; max-width: 100%; } /* Each nav item fills header height */ .header-nav .megamenu-item, .header-nav .nav-item { display: flex; align-items: stretch; height: 100%; } /* Nav links fill header height οΏ½ XD spec: Inter 600 14px/-0.42px, #000 55% */ .header-nav .megamenu-nav .nav-link { padding: 0 15px; display: flex; align-items: center; height: 100%; white-space: nowrap; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; font-weight: 600; line-height: 17px; letter-spacing: -0.42px; color: rgba(0, 0, 0, 0.85); } /* Nav link hover: full opacity + underline per XD spec */ .header-nav .megamenu-nav .nav-link:hover, .header-nav .megamenu-nav .megamenu-item.open .nav-link { color: rgba(0, 0, 0, 1); } /* Shift the underline indicator to match new horizontal padding */ .header-nav .megamenu-nav .nav-link::after { left: 15px; right: 15px; } /* ============================================================ SMALL-LAPTOP TYPOGRAPHY (≤1366px, e.g. 14" MacBook viewports) ============================================================ Desktop sizes (14px nav, 14px column links, 12px column titles) start to crowd the bar at ~1280–1366px CSS widths. Shrink the typography one notch and tighten nav-link padding so 5+ items + a 380px search + 4 icons + the logo still fit comfortably. The mega menu picks up the same scaled-down typography so the header and its open panels feel like one coherent system. Bounded `min-width: 992px` keeps mobile (offcanvas menu) unaffected. ============================================================ */ /* Desktop search-trigger icon: hidden by default. Only revealed on ≤1366px viewports (see media block below). Tap target sized to match the surrounding icon cluster, NOT the 44px mobile rule which would look comically oversized on a desktop bar. */ .header-utilities .header-search-trigger-icon .m-search-trigger { min-width: 0; min-height: 0; width: auto; height: auto; background: transparent; border: 0; padding: 0; cursor: pointer; color: inherit; display: inline-flex; align-items: center; justify-content: center; } /* Match the visual size of the surrounding icons (compare 22×19, wishlist 21×19, user 18×18, cart 20×20) so the trigger sits on the same baseline as the rest of the cluster instead of looking like a tiny outlier. */ .header-utilities .header-search-trigger-icon .h-icon-search { width: 20px; height: 20px; } .header-utilities .header-search-trigger-icon { display: none; } @media (min-width: 992px) and (max-width: 1366px) { /* Top-level nav links */ .header-nav .megamenu-nav .nav-link { padding: 0 11px; font-size: 13px; line-height: 16px; letter-spacing: -0.36px; } .header-nav .megamenu-nav .nav-link::after { left: 11px; right: 11px; } /* Mega menu - column titles + links + "view all" CTA */ .megamenu-column-title { font-size: 11px; letter-spacing: 0.8px; } .megamenu-column-list a { font-size: 13px; } .megamenu-column-all { font-size: 10.5px; letter-spacing: 1.2px; } /* Sidebar group links inside the panel */ .megamenu-sidebar-group a { font-size: 11px; } /* Replace the inline search pill with an icon trigger that opens the same full-screen overlay as mobile. Frees ~380px of header width - critical at 1280–1366px where the nav was crowded. */ .header-utilities .header-search-wrap { display: none; } .header-utilities .header-search-trigger-icon { display: inline-flex; } } /* ============================================= HEADER RIGHT: Search + Icons ============================================= */ /* Single gap-based spacing for the search + icons cluster. Previously mixed `gap: 4px` on the parent with `margin-right: 8px` on each icon, which made the inter-icon distance depend on TWO rules and felt inconsistent. Now: one rule, one number. */ .header-utilities { gap: 16px; padding-left: 16px; } /* Compact search wrapper - can shrink if the viewport narrows so it never pushes the nav into overflow. */ .header-search-wrap { display: flex; align-items: center; flex: 0 1 auto; } /* Clear any legacy margin from the deeper Bootstrap rule (.header-main-block-icon { margin-right: calc(--bs-gutter-x*2) }) so the parent `gap` is the only source of horizontal rhythm. */ .header-utilities .header-main-block-icon { margin-right: 0; } /* ============================================= HEADER SEARCH οΏ½ pill shape with camera + mic ============================================= */ .header-search-wrap .header-search-btn { display: flex; align-items: center; gap: 8px; /* No internal padding: the placeholder text should sit right next to the magnifying-glass icon. The icon-to-text spacing is owned by the parent `.header-search-inline { gap: 0.5rem }` rule, and the right edge of the pill is owned by `.header-search-inline { padding: 0 0.875rem }`. */ padding: 0; height: 100%; cursor: pointer; text-decoration: none; color: inherit; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .header-search-wrap .header-search-btn .header-search-icon-main { font-size: 14px; color: #999; flex-shrink: 0; } .header-search-wrap .header-search-btn .header-search-text { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 13px; font-weight: 400; line-height: 1; color: #b0b0b0; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: none; top: 0; margin: 0; /* Optical adjustment: Inter's x-height makes the caret-line look 1px high in a flex-centered row. Nudge down a hair so the glyph baseline sits centered inside the 40px pill. */ transform: translateY(1px); } .header-search-wrap .header-search-btn .header-search-media-icons { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; padding-left: 6px; border-left: 1px solid #ebebeb; } /* camera οΏ½ green */ .h-icon-search-camera { width: 16px; height: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20' fill='none' stroke='%233dbb72' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 17a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h3l2-3h8l2 3h3a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3C/svg%3E"); } /* microphone οΏ½ gray */ .h-icon-search-mic { width: 13px; height: 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='12' rx='3'/%3E%3Cpath d='M5 10v2a7 7 0 0 0 14 0v-2'/%3E%3Cline x1='12' y1='19' x2='12' y2='23'/%3E%3Cline x1='8' y1='23' x2='16' y2='23'/%3E%3C/svg%3E"); } /* ============================================= HEADER ICONS οΏ½ badge repositioned top-right ============================================= */ /* Counter badge: top-right superscript, XD spec blur background */ .header-main-block-icon .ho-total-counter { position: absolute; bottom: auto; left: auto; top: -4px; right: -6px; width: auto; height: 16px; min-width: 16px; font-style: normal; font-weight: 400; font-size: 11px; line-height: 16px; font-family: 'Inter', sans-serif; letter-spacing: -0.33px; color: #000000; padding: 0 4px; border-radius: 8px; background: rgba(0, 0, 0, 0.08); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border: none; text-align: center; font-weight: 500; } /* ============================================= HEADER CUSTOM SVG ICONS (background-image data URIs) ============================================= */ .h-icon { display: inline-block; background-repeat: no-repeat; background-position: center; background-size: contain; vertical-align: middle; flex-shrink: 0; } /* comparison.svg οΏ½ filled shape; stroke changed to none for white bg */ .h-icon-compare { width: 22px; height: 19px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24.562' height='20.99' viewBox='0 0 24.562 20.99'%3E%3Cpath d='M18.462,22.99a1.176,1.176,0,0,1-.831-2.007L21.5,17.11H6.7a1.176,1.176,0,1,1,0-2.352H24.341a1.176,1.176,0,0,1,.831,2.007l-5.879,5.879a1.176,1.176,0,0,1-.831.345Zm3.528-12.934a1.176,1.176,0,0,0-1.176-1.176H6.014L9.886,5.007A1.176,1.176,0,1,0,8.224,3.344L2.344,9.224a1.176,1.176,0,0,0,.831,2.007H20.814a1.176,1.176,0,0,0,1.176-1.176Z' transform='translate(-1.477 -2.5)' fill='%23111' stroke='none'/%3E%3C/svg%3E"); } /* wishlist.svg */ .h-icon-wishlist { width: 21px; height: 19px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20.963' height='19.004' viewBox='0 0 20.963 19.004'%3E%3Cpath d='M36.208,24.579a5.383,5.383,0,0,0-7.613,0l-.642.642-.642-.642A5.383,5.383,0,0,0,19.7,32.192l.642.642,7.621,7.6,7.613-7.613.642-.642a5.383,5.383,0,0,0-.009-7.6Z' transform='translate(-17.472 -22.352)' fill='none' stroke='%23111' stroke-width='1.3'/%3E%3C/svg%3E"); } /* Login-register-user.svg */ .h-icon-user { width: 18px; height: 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='18.451' height='18.451' viewBox='0 0 18.451 18.451'%3E%3Cdefs%3E%3CclipPath id='cu'%3E%3Cpath d='M0-682.665H18.451v18.451H0Z' transform='translate(0 682.665)'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23cu)'%3E%3Cg transform='translate(4.613 0.721)'%3E%3Cpath d='M0-166.053a4.613,4.613,0,0,1,4.613-4.613,4.613,4.613,0,0,1,4.613,4.613,4.613,4.613,0,0,1-4.613,4.613A4.613,4.613,0,0,1,0-166.053Z' transform='translate(0 170.666)' fill='none' stroke='%23111' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.3'/%3E%3C/g%3E%3Cg transform='translate(0.721 9.946)'%3E%3Cpath d='M-495.693-37.621a7.952,7.952,0,0,1,2.021,1.263,3.6,3.6,0,0,1,1.218,2.7v1.333a1.442,1.442,0,0,1-1.441,1.441h-14.127a1.441,1.441,0,0,1-1.441-1.441v-1.333a3.6,3.6,0,0,1,1.218-2.7,10.932,10.932,0,0,1,7.286-2.308' transform='translate(509.463 38.667)' fill='none' stroke='%23111' stroke-linecap='round' stroke-width='1.3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* cart.svg */ .h-icon-cart { width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='19.469' height='19.469' viewBox='0 0 19.469 19.469'%3E%3Cdefs%3E%3CclipPath id='cc'%3E%3Cpath d='M0-682.665H19.469V-663.2H0Z' transform='translate(0 682.665)'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform='translate(0 0)' clip-path='url(%23cc)'%3E%3Cg transform='translate(5.324 0.761)'%3E%3Cpath d='M-300.511-259.061v-3.194a4.411,4.411,0,0,0-4.411-4.411,4.411,4.411,0,0,0-4.411,4.411v3.194' transform='translate(309.333 266.666)' fill='none' stroke='%23111' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.3'/%3E%3C/g%3E%3Cg transform='translate(14.146 17.188)'%3E%3Cpath d='M0,0H3.042' fill='none' stroke='%23111' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.3'/%3E%3C/g%3E%3Cg transform='translate(15.667 15.667)'%3E%3Cpath d='M0,0V3.042' fill='none' stroke='%23111' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.3'/%3E%3C/g%3E%3Cg transform='translate(2.282 5.324)'%3E%3Cpath d='M-507.759-248.7V-256h-14.906v13.385h8.822' transform='translate(522.665 255.999)' fill='none' stroke='%23111' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .h-icon-search { width: 14px; height: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); } /* Remove font-size rule that was sizing the old tags */ .header-main-block-icon > a, .header-main-block-icon > button { font-size: 0; display: inline-flex; align-items: center; gap: 0; } /* ============================================= STICKY HEADER - desktop scrolled-state treatment ============================================= On mobile the header is `position: fixed` with a white bar; the dark-bar / inverted-icon treatment below is desktop-only because the mobile bar's white background would leave the inverted icons invisible (white-on-white). Mobile gets a subtle shadow instead, added below this block. */ @keyframes header-slide-down { from { transform: translateY(-100%); opacity: 0.7; } to { transform: translateY(0); opacity: 1; } } @media (min-width: 992px) { /* Smooth the sticky transition. Without these, the dark-bar / light-bar flip and the logo/icon filter inversions snap instantly, which reads as a flicker on scroll-up. */ #header, #header .header-main { transition: background-color 180ms ease-out, box-shadow 180ms ease-out; } #header .header-logo img, #header .h-icon-compare, #header .h-icon-wishlist, #header .h-icon-user:not(.account-panel-icon), #header .h-icon-cart, #header .h-icon-search { transition: filter 180ms ease-out; } #header .megamenu-nav .nav-link { transition: color 180ms ease-out; } #header.header--sticky { background: #111111; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25); /* No `will-change: transform` here - it would create a containing block for `position: fixed` descendants, breaking the megamenu panel (which is `position: fixed; top: var(--header-height)` and needs to be fixed to viewport, not to the header). The previous animation that justified `will-change` is unused. */ } /* When sticky: remove border-radius, tighten height */ #header.header--sticky .header-main { background: transparent; border-radius: 0; height: var(--header-height); } /* Nav links: white 55% opacity on sticky dark bg */ #header.header--sticky .megamenu-nav .nav-link { color: rgba(255, 255, 255, 0.85); text-decoration: none; } #header.header--sticky .megamenu-nav .nav-link:hover, #header.header--sticky .megamenu-nav .megamenu-item.open .nav-link { color: rgba(255, 255, 255, 1); text-decoration: underline; } #header.header--sticky .megamenu-nav .megamenu-item:last-child .nav-link:hover, #header.header--sticky .megamenu-nav .megamenu-item:last-child.open .nav-link { text-decoration: none; } /* Icons: invert to white */ #header.header--sticky .h-icon-compare, #header.header--sticky .h-icon-wishlist, #header.header--sticky .h-icon-user:not(.account-panel-icon), #header.header--sticky .h-icon-cart, #header.header--sticky .h-icon-search { filter: invert(1); } /* Logo: invert if it's a dark logo on light bg */ #header.header--sticky .header-logo img { filter: brightness(0) invert(1); } /* Counter badges stay visible */ #header.header--sticky .ho-total-counter { background: #ffffff; color: #111111; } /* Search input adapts */ #header.header--sticky .header-search-inline { background: #fff; } #header.header--sticky .header-search-btn .header-search-text { color: #000; } #header.header--sticky .header-search-inline .h-icon-search { color: #000; filter: none; } #header.header--sticky .header-search-input-wrap input { background: transparent; color: #111; } #header.header--sticky .header-search-input-wrap input::placeholder { color: #999; } } /* Mobile scrolled state - just a subtle shadow under the white bar. */ @media (max-width: 991.98px) { #header.header--sticky { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } } /* Pre-header bars collapse when sticky to free vertical real estate. - .top-header: desktop full bar (phone + lang) - .m_header-top: mobile slim announcement strip Previously used `display: none !important` which is an INSTANT height collapse and produced visible flicker each time the sticky class toggled. Now animated via max-height + opacity so the bar slides up smoothly in lockstep with the background-color transition on #header (also 200–240ms). */ .top-header, .m_header-top { max-height: 120px; opacity: 1; transition: max-height 240ms ease, opacity 200ms ease; } /* `overflow: hidden` only when collapsed/sticky - otherwise it clips the phone-card and language dropdown that hang below the 35px bar. */ #header.header--sticky .top-header, #header.header--sticky .m_header-top { overflow: hidden; max-height: 0; opacity: 0; pointer-events: none; } /* Megamenu panel: fixed to viewport so it ignores container padding. Top is intentionally 1px less than header height so the panel overlaps the header by 1px - without this, sub-pixel rendering can leave a hairline gap at the boundary that breaks the mouse hover hand-off (item → panel) and causes flicker. */ #header.header--sticky .megamenu-panel { position: fixed; top: calc(var(--header-height) - 1px); left: 0; right: 0; width: 100%; transform: translateX(0) translateY(0) scale(1); transform-origin: top center; } #header.header--sticky .megamenu-item.open .megamenu-panel { transform: translateX(0) translateY(0) scale(1); } /* Blur overlay below header when megamenu opens (sticky + non-sticky) */ #sticky-megamenu-overlay { position: fixed; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 97; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 200ms ease 50ms, visibility 0s linear 200ms; } #sticky-megamenu-overlay.is-visible { opacity: 1; visibility: visible; transition: opacity 200ms ease 50ms, visibility 0s linear 0s; } /* Note: previously had `html { overflow-y: scroll }` here to keep the scrollbar gutter visible and prevent layout shift between scrolling and non-scrolling pages. Removed because making `` an explicit scroll container breaks `position: sticky` for descendants on iOS Safari (the sticky element gets stranded outside the html scroll viewport). Use `scrollbar-gutter: stable` on supporting browsers instead. */ html { scrollbar-gutter: stable; } /* ============================================= SCROLL TO TOP ============================================= */ #scroll-to-top { position: fixed; bottom: 32px; right: 32px; width: 39px; height: 39px; background: rgba(0, 0, 0, 0.4); border: none; border-radius: 100px; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; z-index: 999; backdrop-filter: blur(31px); -webkit-backdrop-filter: blur(31px); } #scroll-to-top.visible { opacity: 1; visibility: visible; } #scroll-to-top i { font: normal normal 100 21px/25px "Font Awesome 6 Pro"; letter-spacing: -0.63px; color: #FFFFFF; width: 21px; height: 13px; display: flex; align-items: center; justify-content: center; } /* ============================================= ACCOUNT PANEL DROPDOWN ============================================= */ .account-panel-wrap { position: relative; } .account-panel-trigger { background: none; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; color: inherit; } .account-panel { position: absolute; top: calc(100% + 16px); right: -16px; width: 380px; background: #FFFFFF; border-radius: 7px; box-shadow: 0 8px 32px rgba(0,0,0,0.14); padding: 28px 16px 24px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 180ms ease, transform 180ms cubic-bezier(.2, 0, .2, 1), visibility 0s linear 180ms; z-index: 999; will-change: opacity, transform; } .account-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 200ms ease, transform 200ms cubic-bezier(.2, 0, .2, 1), visibility 0s linear 0s; } .account-panel-section { display: flex; flex-direction: column; align-items: center; gap: 6px; } .account-panel-icon { font-size: 28px; margin-bottom: 4px; color: #111111; } .account-panel-title { text-align: center; font-style: normal; font-weight: 700; font-size: 15px; line-height: 18px; font-family: 'Inter', sans-serif; letter-spacing: -0.45px; color: #111111; margin: 0; } .account-panel-sub { text-align: center; font-style: normal; font-weight: 400; font-size: 13px; line-height: 16px; font-family: 'Inter', sans-serif; letter-spacing: -0.39px; color: #70787D; margin: 0 0 8px; } .account-panel-divider { width: 100%; height: 1px; background: #E8E8E8; margin: 20px 0; } .account-panel-btn { display: block; width: 348px; height: 50px; line-height: 50px; text-align: center; border-radius: 9px; font-style: normal; font-weight: 700; font-size: 14px; line-height: 50px; font-family: 'Inter', sans-serif; letter-spacing: -0.3px; transition: background 200ms ease; white-space: nowrap; } .account-panel-btn--login { background: #E2E2E2; border: 1px solid #707070; color: #111111; } .account-panel-btn--login:hover { background: #000000; color: #ffffff; } .account-panel-btn--register { background: #1C1C1C; border: none; color: #ffffff; } .account-panel-btn--register:hover { background: #000000; color: #ffffff; } /* ============================================= REDUCED MOTION ============================================= */ @media (prefers-reduced-motion: reduce) { #header.header--sticky, .account-panel { animation: none !important; transition: none !important; } #header.header--sticky { transform: none !important; } } /* ============================================= LOGIN / REGISTER PAGE β€” XD spec ============================================= */ /* Account header οΏ½ black bar with logo centered */ .account_header { width: 100%; height: 60px; background: #000000; border-radius: 0 0 15px 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .account_header .account-container { width: 100%; height: 100%; align-items: center; } .account_header #logo { padding: 0; display: flex; align-items: center; justify-content: center; } .account_header #logo img { filter: brightness(0) invert(1); max-height: 36px; width: auto; } /* Account footer */ .account_footer { width: 100%; height: 66px; background: #FFFFFF; border-top: 1px solid #707070; flex-shrink: 0; margin-top: 3rem; } .account-footer-inner { height: 100%; max-width: 100%; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .account-footer-copy { font-style: normal; font-weight: 400; font-size: 12px; line-height: 15px; font-family: 'Inter', sans-serif; letter-spacing: 1.8px; color: #000000; text-transform: uppercase; white-space: nowrap; } .account-footer-links { display: flex; align-items: center; gap: 12px; } .account-footer-link { font-style: normal; font-weight: 400; font-size: 12px; line-height: 15px; font-family: 'Inter', sans-serif; letter-spacing: 1.8px; color: #696969; text-decoration: none; text-transform: uppercase; white-space: nowrap; } .account-footer-link:hover { color: #000000; } .account-footer-sep { display: inline-block; width: 1px; height: 12px; background: #B9B9B9; border-radius: 5px; opacity: 1; flex-shrink: 0; } .account-footer-dev { font-style: normal; font-weight: 400; font-size: 12px; line-height: 15px; font-family: 'Inter', sans-serif; letter-spacing: 1.8px; color: #696969; white-space: nowrap; } .account-footer-dev a { font-weight: 500; color: #000000; text-decoration: none; } .account-footer-dev a:hover { text-decoration: underline; } /* Page background & no scroll */ body.account_body { background: #FFFFFF !important; } body.account_body .wrapper { min-height: 100vh; display: flex; flex-direction: column; } body.account_body main { flex: 1; display: flex; justify-content: center; align-items: flex-start; padding: 0; } body.account_body .account-wrap { max-width: 812px; width: 100%; margin: 0; padding: 0; } /* Remove Bootstrap card padding/margin */ body.account_body .card-account { border: none; background: transparent; margin: 0; padding: 0; } body.account_body .card-body { padding: 0; } /* Panel box οΏ½ flush to header, no gap */ #account-login, #account-register, #account-forgotten { background: #FBFBFB; border: 1px solid #E2E2E2; border-radius: 0 0 9px 9px; width: 100%; max-width: 812px; } /* Tabs */ #account-login .tab-links > div, #account-register .tab-links > div { padding: 22px 0; border-bottom: 2px solid #E2E2E2 !important; } #account-login .tab-links > div.active, #account-register .tab-links > div.active { border-bottom: 2px solid #000000 !important; } #account-login .tab-links h3, #account-register .tab-links h3 { font-style: normal; font-weight: 700; font-size: 18px; line-height: 23px; font-family: 'Inter', sans-serif; letter-spacing: -0.54px; color: #000000; opacity: 0.41; margin: 0; } #account-login .tab-links > div.active h3, #account-register .tab-links > div.active h3 { opacity: 1; } /* No underline on tab links */ #account-login .tab-links h3 a, #account-register .tab-links h3 a { color: inherit; text-decoration: none !important; } /* Form */ #account-login form, #account-register form { max-width: 400px; margin: 0 auto; padding: 40px 0 48px; } /* Labels */ #account-login .form-label, #account-register .form-label, #account-forgotten .form-label { font-style: normal; font-weight: 700; font-size: 15px; line-height: 18px; font-family: 'Inter', sans-serif; letter-spacing: -0.45px; color: #000000; margin-bottom: 8px; display: block; text-align: center; } #account-register .form-label, #account-forgotten .form-label { text-align: left; } /* Inputs */ #account-login .form-control, #account-register .form-control, #account-forgotten .form-control { background: #FFFFFF; border: 1px solid #CCCCCC; border-radius: 9px; height: 50px; font-style: normal; font-weight: 400; font-size: 14px; line-height: 17px; font-family: 'Inter', sans-serif; color: #000000; box-shadow: none; padding: 0 16px; } #account-login .form-control:focus, #account-register .form-control:focus, #account-forgotten .form-control:focus { border-color: #000000; box-shadow: none; outline: none; } /* Submit button */ #account-login .btn-primary, #account-register .btn-primary, #account-forgotten .btn-primary { background: #000000; border: none; border-radius: 9px; height: 50px; font-style: normal; font-weight: 700; font-size: 15px; line-height: 18px; font-family: 'Inter', sans-serif; color: #ffffff; width: 100%; transition: background 200ms ease; } #account-login .btn-primary:hover, #account-register .btn-primary:hover, #account-forgotten .btn-primary:hover { background: #222222; color: #ffffff; } /* Forgotten password link */ #account-login .text-center a { font-style: normal; font-weight: 600; font-size: 14px; line-height: 17px; font-family: 'Inter', sans-serif; letter-spacing: 0; color: #808080; text-decoration: underline; } #account-login .text-center a:hover { color: #000000; } /* -- Newsletter toggle -- */ .newsletter-toggle-wrap { display: inline-flex; align-items: center; gap: 10px; } .newsletter-toggle-label { font-style: normal; font-weight: 400; font-size: 14px; line-height: 17px; font-family: 'Inter', sans-serif; color: #000000; } .newsletter-toggle { position: relative; display: inline-block; width: 44px; height: 24px; cursor: pointer; flex-shrink: 0; } .newsletter-toggle-input { opacity: 0; width: 0; height: 0; position: absolute; } .newsletter-toggle-slider { position: absolute; inset: 0; background: #F8F8F8; border-radius: 24px; border: 1px solid #E0E0E0; } .newsletter-toggle-slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 2px; background: #1C1C1C; border-radius: 50%; transition: transform 200ms ease; box-shadow: 0 1px 4px rgba(0,0,0,0.2); } .newsletter-toggle-input:checked ~ .newsletter-toggle-slider::before { transform: translateX(20px); } .newsletter-toggle-label { font-weight: 400; transition: font-weight 150ms ease; } .newsletter-toggle-label.is-active { font-weight: 700; } /* -- Forgotten password page -- */ #account-forgotten form { max-width: 400px; margin: 0 auto; padding: 40px 0 48px; } .forgotten-title { font-style: normal; font-weight: 700; font-size: 22px; line-height: 28px; font-family: 'Inter', sans-serif; letter-spacing: -0.66px; color: #000000; text-align: center; margin: 0 0 12px; } .forgotten-sub { font-style: normal; font-weight: 400; font-size: 13px; line-height: 18px; font-family: 'Inter', sans-serif; color: #70787D; text-align: center; margin: 0 0 4px; } .forgotten-sub + .forgotten-sub { margin-bottom: 24px; } .forgotten-back { text-align: center; margin-top: 8px; } .forgotten-back a { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-weight: 400; font-size: 13px; line-height: 16px; font-family: 'Inter', sans-serif; color: #70787D; text-decoration: none; transition: color 200ms ease; } .forgotten-back a:hover { color: #000000; } .forgotten-back a i { font-size: 16px; } /* Banner video */ .banner-video-wrapper { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; } .banner-video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .banner-video-wrapper::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .header-html-module--inner { background-color: #F5F5F5; border-radius: 0 0 5px 5px; } /* ============================================= BOXNOW PROMO STRIP - header html module ============================================= */ .header-html-module .promo-box-now, .promo-box-now { width: 100%; min-height: 44px; padding: 8px 16px; box-sizing: border-box; } .promo-box-now a, .promo-box-now a:hover, .promo-box-now a:focus, .promo-box-now a:visited, .promo-box-now a *, .promo-box-now a:hover * { text-decoration: none !important; } .promo-box-now a { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 28px; color: #181E28; transition: opacity 0.15s ease; } .promo-box-now a:hover { opacity: 0.75; } /* Inner wrapper inside the anchor - keep flex inline so logo + text sit on one row */ .promo-box-now a > div { display: inline-flex; align-items: center; justify-content: center; gap: 12px; background: transparent !important; border: 0 !important; padding: 0 !important; width: auto !important; max-width: 100%; flex-wrap: nowrap; } .promo-box-now img { flex-shrink: 0; height: 22px; width: auto; display: block; } .promo-box-now span { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; line-height: 1.35; letter-spacing: -0.2px; color: inherit; /* Truncate to one line on narrow viewports so the strip stays a single row; full text shows when there's room. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* Tablet and below - slightly tighter, allow wrap to 2 lines */ @media (max-width: 767.98px) { .header-html-module .promo-box-now, .promo-box-now { padding: 8px 12px; } .promo-box-now a { gap: 8px; } .promo-box-now a > div { gap: 8px; } .promo-box-now img { height: 18px; } .promo-box-now span { font-size: 12px; white-space: normal; text-align: left; /* Clamp to 2 lines on phones in case the text wraps */ display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } } /* Very narrow phones - drop letter-spacing, tighten gap further */ @media (max-width: 380px) { .promo-box-now img { height: 16px; } .promo-box-now span { font-size: 11px; letter-spacing: 0; } } .category-hero { position: relative; background-color: #000000; border-radius: 0 0 25px 25px; height: 141px; margin-bottom: var(--space-double); } .category-hero > .container-xxl { height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 20px; } .category-hero__body { flex-direction: column; align-items: flex-start; } .category-hero__aside { display: none; } .category-hero--has-banner { position: relative; height: 600px !important; border-radius: 0 0 25px 25px; overflow: hidden; } .category-hero-video { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .category-hero-video video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .category-hero-video iframe { position: absolute; top: 50%; left: 50%; width: 177.78vh; /* 16:9 ratio */ height: 56.25vw; /* 16:9 ratio */ min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); pointer-events: none; } .category-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.1) 100%); z-index: 0; } .category-hero--has-banner > .container-xxl { justify-content: space-between; padding-top: 20px; padding-bottom: 32px; } .category-breadcrumb { background: transparent !important; margin: 0; } .header-html-module--home { background: transparent !important; } .header-html-module--home > *, .header-html-module--home div { background: transparent !important; } .header-html-module { min-height: 40px; display: flex; align-items: center; justify-content: center; border-top: 0; } .category-breadcrumb .breadcrumb-item { display: flex; align-items: center; } .category-breadcrumb .breadcrumb-home-icon i { color: #FFFFFF; opacity: 0.6; font-size: 11px; line-height: 20px; } .category-breadcrumb .breadcrumb-item a { text-decoration: underline; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 11px; line-height: 20px; letter-spacing: -0.33px; color: #FFFFFF; text-transform: none; opacity: 1; } .category-breadcrumb .breadcrumb-item + .breadcrumb-item { /* Defeats Bootstrap's default `.breadcrumb-item + .breadcrumb-item { padding-left: 0.5rem }`. All horizontal spacing now comes from the chevron's `margin: 0 Xpx` per-breakpoint rules below. */ padding-left: 0; } .category-breadcrumb .breadcrumb-item + .breadcrumb-item::before { font-family: 'Font Awesome 6 Pro'; font-weight: 300; content: "\f105"; color: #FFFFFF; opacity: 0.6; font-size: 11px; line-height: 1; vertical-align: middle; /* All horizontal spacing controlled here. Margins are symmetric so the chevron sits centered between siblings. */ padding: 0; margin: 0 10px; float: none; display: inline-flex; align-items: center; } .category-breadcrumb .breadcrumb-home-icon { display: inline-flex; align-items: center; text-decoration: none !important; } #product-category #product-container, #product-wishlist #product-container, #product-compare #product-container { gap: 20px; } /* Product grid responsive: the templates emit `.tw-grid-cols-3` / `tw-grid-cols-4` / `tw-grid-cols-5` (Tailwind). Below tablet override to max 2 per row; on small phones drop to 1. */ @media (max-width: 991.98px) { #product-container.product-container.tw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; } } @media (max-width: 480px) { #product-container.product-container.tw-grid { grid-template-columns: 1fr !important; gap: 12px !important; } } #product-wishlist .product-block-image, #product-compare .product-block-image { position: relative; } #product-wishlist .product-wishlist-remove, #product-compare .product-wishlist-remove { position: absolute; top: 8px; right: 8px; z-index: 2; width: 21px; height: 29px; font: normal normal normal 28px/35px 'Font Awesome 6 Pro'; letter-spacing: -0.84px; color: #E43333; opacity: 1; line-height: 29px; text-align: left; text-decoration: none; } .wishlist-hero .top-row-wrapper, .compare-hero .top-row-wrapper, .information-hero .top-row-wrapper { display: flex; align-items: center; justify-content: center; } .wishlist-hero .main-content-container, .compare-hero .main-content-container, .information-hero .main-content-container { display: flex; align-items: center; justify-content: center; width: 100%; } /* Secondary heroes (wishlist / compare / information / contact) - the element always carries the base .category-hero class too, so the generic .category-hero .main-content-title (55px) wins by source order unless we bump specificity by chaining both classes. */ .category-hero.wishlist-hero .main-content-title, .category-hero.compare-hero .main-content-title, .category-hero.information-hero .main-content-title, .category-hero.contact-hero .main-content-title { font-weight: bold; font-size: 28px; line-height: 1.2; font-family: 'Inter', sans-serif; letter-spacing: -0.5px; color: #FFFFFF; opacity: 1; text-align: left; margin: 0; } @media (max-width: 991.98px) { .category-hero.wishlist-hero .main-content-title, .category-hero.compare-hero .main-content-title, .category-hero.information-hero .main-content-title, .category-hero.contact-hero .main-content-title { font-size: 24px; letter-spacing: -0.4px; } } @media (max-width: 767.98px) { .category-hero.wishlist-hero .main-content-title, .category-hero.compare-hero .main-content-title, .category-hero.information-hero .main-content-title, .category-hero.contact-hero .main-content-title { font-size: 22px; } } @media (max-width: 480px) { .category-hero.wishlist-hero .main-content-title, .category-hero.compare-hero .main-content-title, .category-hero.information-hero .main-content-title, .category-hero.contact-hero .main-content-title { font-size: 20px; letter-spacing: -0.3px; } } #product-category .product-layout .product-block .product-top, #product-wishlist .product-layout .product-block .product-top, #product-compare .product-layout .product-block .product-top { width: 100%; } #product-category .product-layout .product-block .product-thumbnail, #product-wishlist .product-layout .product-block .product-thumbnail, #product-compare .product-layout .product-block .product-thumbnail { aspect-ratio: 1 / 1; overflow: hidden; background: #F5F5F5; } .rv-card__image { background: #F5F5F5; } .product-thumbnail { background: #F5F5F5; } #product-category .product-layout .product-block .product-thumbnail img, #product-wishlist .product-layout .product-block .product-thumbnail img, #product-compare .product-layout .product-block .product-thumbnail img { width: 100%; height: 100%; object-fit: cover; } #product-category .product-block .product-block-manufacturer, #product-wishlist .product-block .product-block-manufacturer, #product-compare .product-block .product-block-manufacturer { font-style: normal; font-weight: 600; font-size: 11px; line-height: 16px; font-family: 'Inter', sans-serif; letter-spacing: 1.1px; color: #5D5D5D; text-transform: uppercase; margin-bottom: 0.25rem; } #product-category .product-block .product-block-title .product-name, #product-category .product-block .product-block-title .product-name a, #product-wishlist .product-block .product-block-title .product-name, #product-wishlist .product-block .product-block-title .product-name a, #product-compare .product-block .product-block-title .product-name, #product-compare .product-block .product-block-title .product-name a { font-style: normal; font-weight: 600; font-size: 15px; line-height: 20px; font-family: 'Inter', sans-serif; letter-spacing: 0; color: #000000; margin: 0; } #product-category .product-block .product-block-header, #product-wishlist .product-block .product-block-header, #product-compare .product-block .product-block-header { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 0.5rem; width: 100%; } #product-category .product-block .product-block-header__text, #product-wishlist .product-block .product-block-header__text, #product-compare .product-block .product-block-header__text { flex: 1; min-width: 0; } #product-category .product-block .product-block-icons, #product-wishlist .product-block .product-block-icons, #product-compare .product-block .product-block-icons { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; padding-top: 2px; } #product-category .product-block .product-wishlist, #product-category .product-block .product-block-icons .product-icon, #product-wishlist .product-block .product-wishlist, #product-wishlist .product-block .product-block-icons .product-icon, #product-compare .product-block .product-wishlist, #product-compare .product-block .product-block-icons .product-icon { position: static !important; top: auto !important; right: auto !important; opacity: 1 !important; display: inline-flex; align-items: center; justify-content: center; border: none !important; border-radius: 0 !important; background: transparent !important; padding: 2px; width: auto; height: auto; } #product-category .product-block .product-block-icons .product-wishlist .h-icon-wishlist, #product-category .product-block .product-block-icons .product-compare .h-icon-compare, #product-wishlist .product-block .product-block-icons .product-wishlist .h-icon-wishlist, #product-wishlist .product-block .product-block-icons .product-compare .h-icon-compare, #product-compare .product-block .product-block-icons .product-wishlist .h-icon-wishlist, #product-compare .product-block .product-block-icons .product-compare .h-icon-compare, .product-block .product-block-icons .product-wishlist .h-icon-wishlist, .product-block .product-block-icons .product-compare .h-icon-compare { width: 21px; height: 18px; } .product-block .product-block-icons { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; } #product-category .product-block .product-block-icons .product-icon:hover, #product-wishlist .product-block .product-block-icons .product-icon:hover, #product-compare .product-block .product-block-icons .product-icon:hover { opacity: 0.6 !important; } #product-category .product-block .product-block-price-row, #product-wishlist .product-block .product-block-price-row, #product-compare .product-block .product-block-price-row { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; margin-top: auto; padding-top: 0.75rem; width: 100%; } #product-category .product-block .product-block-price, #product-wishlist .product-block .product-block-price, #product-compare .product-block .product-block-price { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0.35rem; margin-top: 0 !important; padding: 0; } #product-category .product-block .product-block-price .amount_before, #product-wishlist .product-block .product-block-price .amount_before, #product-compare .product-block .product-block-price .amount_before { color: #9B9B9B; letter-spacing: -0.42px; font-size: 0.875rem; font-weight: 400; text-decoration: line-through; margin: 0; padding: 0; } #product-category .product-block .product-block-price .amount, #product-wishlist .product-block .product-block-price .amount, #product-compare .product-block .product-block-price .amount { color: #000000; letter-spacing: -0.42px; font-size: 1rem; font-weight: 700; margin: 0; padding: 0; line-height: 1.2; } #product-category .product-block .product-block-actions .product-cart, #product-wishlist .product-block .product-block-actions .product-cart, #product-compare .product-block .product-block-actions .product-cart { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: auto; padding: 9px 1rem; background: #0C0C0C; color: #FFFFFF; border: none; border-radius: 9px; opacity: 1 !important; font-weight: 600; overflow: hidden; transition: background 200ms ease; } #product-category .product-block .product-block-actions .product-cart:hover, #product-wishlist .product-block .product-block-actions .product-cart:hover, #product-compare .product-block .product-block-actions .product-cart:hover { background: #232323; color: #FFFFFF; } #product-category .product-block .product-block-actions .product-cart .h-icon-cart, #product-wishlist .product-block .product-block-actions .product-cart .h-icon-cart, #product-compare .product-block .product-block-actions .product-cart .h-icon-cart { filter: invert(1); font-size: 16px; line-height: 1; position: absolute; left: 1rem; transition: left 300ms ease, transform 300ms ease; } #product-category .product-block .product-block-actions .product-cart:hover .h-icon-cart, #product-wishlist .product-block .product-block-actions .product-cart:hover .h-icon-cart, #product-compare .product-block .product-block-actions .product-cart:hover .h-icon-cart { left: 50%; transform: translateX(-50%); } #product-category .product-block .product-block-actions .product-cart .product-cart-text, #product-wishlist .product-block .product-block-actions .product-cart .product-cart-text, #product-compare .product-block .product-block-actions .product-cart .product-cart-text { letter-spacing: 0; color: #FFFFFF; text-align: center; white-space: nowrap; overflow: hidden; transition: opacity 300ms ease, max-width 300ms ease; max-width: 200px; opacity: 1; } #product-category .product-block .product-block-actions .product-cart:hover .product-cart-text, #product-wishlist .product-block .product-block-actions .product-cart:hover .product-cart-text, #product-compare .product-block .product-block-actions .product-cart:hover .product-cart-text { opacity: 0; max-width: 0; } /* Compare specs table */ .compare-specs { margin-top: 32px; width: 100%; } .compare-spec-section { margin-bottom: 32px; } .compare-spec-header { display: grid; grid-template-columns: 180px repeat(4, 1fr); margin-bottom: 8px; } .compare-spec-header-label { grid-column: 1 / -1; font-style: normal; font-weight: 700; font-size: 14px; line-height: 19px; font-family: 'Inter', sans-serif; letter-spacing: -0.42px; color: #000000; opacity: 1; padding: 8px 12px 8px 0; } .compare-spec-row { display: grid; grid-template-columns: 180px repeat(4, 1fr); gap: 6px; margin-bottom: 4px; align-items: stretch; } .compare-spec-value--odd { background: #FAFAFA; border-radius: 9px; } .compare-spec-value--even { background: #FFFFFF; border-radius: 9px; } .compare-spec-label { padding: 10px 12px; font-style: normal; font-weight: normal; font-size: 14px; line-height: 19px; font-family: 'Inter', sans-serif; letter-spacing: -0.42px; color: #000000; opacity: 1; display: flex; align-items: center; } .compare-spec-value { padding: 10px 12px; font-style: normal; font-weight: bold; font-size: 14px; line-height: 19px; font-family: 'Inter', sans-serif; letter-spacing: -0.42px; color: #000000; opacity: 1; display: flex; align-items: center; } .compare-spec-check { color: #000000; font-size: 14px; } /* Information page content */ #information-information { padding-top: 40px; padding-bottom: 60px; } .information-content { font-family: 'Inter', sans-serif; font-size: 14px; line-height: 22px; color: #000000; } .information-content h1, .information-content h2, .information-content h3, .information-content h4 { font-family: 'Inter', sans-serif; font-weight: 700; color: #000000; margin-top: 32px; margin-bottom: 12px; } .information-content h1 { font-size: 22px; } .information-content h2 { font-size: 18px; } .information-content h3 { font-size: 16px; } .information-content p { margin-bottom: 12px; font-size: 14px; line-height: 22px; color: #333333; } .information-content ul, .information-content ol { padding-left: 20px; margin-bottom: 12px; } .information-content li { font-size: 14px; line-height: 22px; color: #333333; margin-bottom: 4px; } .information-content a { color: #000000; text-decoration: underline; } .gprice_range { display: block !important; } /* ============================================ FILTER GROUPS οΏ½ match XD design ============================================ */ /* Group container spacing */ .ho-filters-wrapper.filter-style-vertical-list .filter-group-container { margin-bottom: 0; border-bottom: 1px solid rgba(0,0,0,0.08); padding: 20px 0; } /* Title container: flex row, title left, chevron right */ .ho-filters-wrapper.filter-style-vertical-list .filter-group-container .filter-group-title-container { display: flex; align-items: center; justify-content: space-between; position: relative; padding-bottom: 0; margin-bottom: 0; cursor: pointer; } /* Remove the short underline */ .ho-filters-wrapper.filter-style-vertical-list .filter-group-container .filter-group-title-container:after { display: none; } /* Add chevron-down via FA pseudo */ .ho-filters-wrapper.filter-style-vertical-list .filter-group-container .filter-group-title-container::before { font-family: 'Font Awesome 6 Pro'; font-weight: 300; content: "\f078"; font-size: 12px; color: #000; order: 2; transition: transform 200ms ease; flex-shrink: 0; } .ho-filters-wrapper.filter-style-vertical-list .filter-group-container.opened .filter-group-title-container::before { transform: rotate(180deg); } /* Title text */ .ho-filters-wrapper.filter-style-vertical-list .filter-group-container .filter-group-title-container .filter-group-title { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: bold; line-height: 25px; letter-spacing: -0.28px; color: #000000; text-align: left; order: 1; } /* Filters container: hidden when not opened */ .ho-filters-wrapper.filter-style-vertical-list .filter-group-container .filter-group-filters-container { display: none; padding-top: 12px; max-height: 290px; overflow-y: auto; padding-right: 4px; } .ho-filters-wrapper.filter-style-vertical-list .filter-group-container.opened .filter-group-filters-container { display: block; } /* Scrollbar */ .ho-filters-wrapper.filter-style-vertical-list .filter-group-filters-container::-webkit-scrollbar { width: 4px; } .ho-filters-wrapper.filter-style-vertical-list .filter-group-filters-container::-webkit-scrollbar-track { background: #E3E3E3; border-radius: 2px; } .ho-filters-wrapper.filter-style-vertical-list .filter-group-filters-container::-webkit-scrollbar-thumb { background: #000000; border-radius: 2px; } /* Form check items */ .ho-filters-wrapper .form-check { display: flex; align-items: center; gap: 10px; padding: 4px 0; margin: 0; } /* Hide native checkbox */ .ho-filters-wrapper .form-check-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } /* Label becomes the clickable row */ .ho-filters-wrapper .form-check-label { display: flex; align-items: center; gap: 8px; cursor: pointer; width: 100%; position: relative; } /* Custom checkbox box via ::before */ .ho-filters-wrapper .form-check-label::before { content: ''; display: inline-flex; flex-shrink: 0; width: 16px; height: 16px; border-radius: 25px; background-color: #DEDEDE; border: 1px solid transparent; transition: background-color 0.15s, border-color 0.15s; } /* Hover state */ .ho-filters-wrapper .form-check-label:hover::before { border-color: #9F9F9F; } /* Checked state οΏ½ box */ .ho-filters-wrapper .form-check-label.is-checked::before { background-color: #000000; border-color: #000000; } /* Checked state οΏ½ tick via ::after */ .ho-filters-wrapper .form-check-label.is-checked::after { content: ''; position: absolute; left: 4px; top: 50%; width: 8px; height: 5px; border-left: 2px solid #DEDEDE; border-bottom: 2px solid #DEDEDE; transform: translateY(-65%) rotate(-45deg); } .ho-filters-wrapper .form-check-title { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: normal; line-height: 25px; letter-spacing: -0.28px; color: #000000; text-align: left; flex: 1; } .ho-filters-wrapper .form-check-count { display: none; } .ho-filters-wrapper .form-check-label.is-checked .form-check-title { font-weight: bold; } .ho-filters-wrapper .form-check.disabled .form-check-title, .ho-filters-wrapper .form-check-label.disabled .form-check-title { color: #CECECE; } /* Price range inputs */ .ho-filters-wrapper .price-range-group { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; } .ho-filters-wrapper .price-range-group .form-control { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 400; color: #000; background: #fff; border: 1px solid #CECECE; border-radius: 6px; height: 36px; padding: 0 10px; text-align: center; min-height: unset; margin-bottom: 0; } /* ionRangeSlider round skin overrides */ .irs--round { height: 44px; } .irs--round .irs-line { top: 17px; height: 4px; background: #EBEBEB; border-radius: 2px; } .irs--round .irs-bar { top: 17px; height: 4px !important; background: #5C5C5C !important; border-radius: 2px; } .irs--round .irs-handle { top: 9px; width: 22px; height: 22px; background: #000000 !important; border: 2px solid #FFFFFF !important; border-radius: 50% !important; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.16) !important; cursor: grab; } .irs--round .irs-handle:active, .irs--round .irs-handle.state_hover { background: #000000 !important; cursor: grabbing; } .irs--round .irs-handle i:first-child { display: none; } .irs--round .irs-shadow { display: none; } .irs--round .irs-min, .irs--round .irs-max, .irs--round .irs-from, .irs--round .irs-to, .irs--round .irs-single { display: none; } .ho-filters-wrapper .price-range-group.input-group > :not(:first-child) { margin-left: 0 !important; border-top-left-radius: 100px !important; border-bottom-left-radius: 100px !important; } /* Price inputs row */ .ho-filters-wrapper .price-range-group { display: flex; align-items: center; gap: 0; margin-top: 8px; margin-bottom: 0; width: 100%; } .ho-filters-wrapper .price-range-group .form-control { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 400; color: #000; background: #F6F6F6 !important; border: none !important; border-radius: 100px !important; height: 34px; padding: 0 12px; text-align: center; min-height: unset; margin-bottom: 0; flex: 1; min-width: 0; box-shadow: none !important; } .ho-filters-wrapper .price-range-group .divider { flex: 1; height: 1px; background: none; border-top: 1px solid #707070; } .filter-block-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .filter-block-title { display: flex; align-items: center; gap: 8px; } .filter-clear-all { display: none; align-items: center; gap: 4px; } .filter-clear-all { display: none; align-items: center; gap: 4px; font-family: 'Inter', sans-serif !important; font-weight: 500 !important; font-size: 12px !important; line-height: 25px; letter-spacing: -0.24px; color: #4A4C4F !important; cursor: pointer; white-space: nowrap; text-decoration: none !important; } .filter-clear-all:not(:empty) { display: inline-flex; } .filter-clear-all i { font-size: 16px; line-height: 1; color: #4A4C4F !important; font-weight: 300; flex-shrink: 0; } /* Per-group clear οΏ½ hidden, use only global clear-all */ .ho-filters-wrapper .filter-group-title-container { display: flex; align-items: center; } .ho-filters-wrapper .filter-group-clear { display: none !important; } .filter-block-title__text { font-family: 'Inter', sans-serif; font-weight: bold; font-size: 18px; line-height: 25px; letter-spacing: -0.36px; color: #000000; text-align: left; } .active-filters-bar { display: none; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .active-filters-bar.has-pills { display: flex; } .active-filter-pill { display: inline-flex; align-items: center; gap: 6px; background: #F5F5F5; border: 1px solid #CECECE; border-radius: 100px; padding: 0 10px; height: 28px; cursor: pointer; transition: background 150ms ease; } .active-filter-pill:hover { background: #ebebeb; } .active-filter-pill__text { font-family: 'Inter', sans-serif; font-weight: bold; font-size: 13px; line-height: 25px; letter-spacing: -0.25px; color: #000000; white-space: nowrap; } .active-filter-pill__remove { font-size: 14px; line-height: 1; letter-spacing: -0.28px; color: #000000; font-weight: 300; flex-shrink: 0; } .category-sort-bar { display: flex; justify-content: flex-end; margin-bottom: 16px; } .category-sort-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none; padding: 0; font-family: 'Inter', sans-serif; font-weight: normal; font-size: 13px; line-height: 25px; letter-spacing: 0; color: #000000; text-decoration: none; box-shadow: none !important; } .category-sort-btn::after { display: none; } .category-sort-btn span { font-family: 'Inter', sans-serif; font-weight: normal; font-size: 13px; line-height: 25px; letter-spacing: 0; color: #000000; text-align: center; text-decoration: underline; } .category-sort-btn:hover, .category-sort-btn:focus, .category-sort-btn:active, .category-sort-btn.show { background: transparent !important; color: #000000 !important; text-decoration: none !important; box-shadow: none !important; } .category-pagination-wrap { display: flex; align-items: center; justify-content: space-between; margin-top: 40px; margin-bottom: 40px; width: 100%; } /* Manufacturer promo card */ .manufacturer-promo-card { display: flex; flex-direction: column; height: 100%; } .manufacturer-promo-card__image { width: 100%; max-height: 320px; background-size: cover; background-position: center; aspect-ratio: 1 / 1; border-radius: 8px 8px 0 0; flex-shrink: 0; } .manufacturer-promo-card__body { background: #000000; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; flex: 1; border-radius: 0 0 8px 8px; } .manufacturer-promo-card__text { color: #ffffff; font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.5; } .manufacturer-promo-card__text p { margin: 0 0 6px 0; } .manufacturer-promo-card__text strong, .manufacturer-promo-card__text b { font-size: 15px; font-weight: 700; display: block; margin-bottom: 6px; } .manufacturer-promo-card__btn { display: inline-block; color: #ffffff; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 400; text-decoration: underline; text-underline-offset: 3px; align-self: flex-start; } .manufacturer-promo-card__btn:hover { color: #ffffff; text-decoration: underline; } .category-hero__content { display: flex; flex-direction: column; gap: 0; } .category-hero__count { font-family: 'Inter', sans-serif; font-weight: normal; font-size: 16px; line-height: 20px; letter-spacing: -0.48px; color: #FFFFFF; text-align: left; margin-bottom: 2px; } .category-hero__title { font-family: 'Inter', sans-serif; font-weight: bold; font-size: 25px; line-height: 30px; letter-spacing: -0.75px; color: #FFFFFF; text-align: left; margin: 0; } /* ── Manufacturer campaign button ── */ .manufacturer-campaign-btn { position: absolute; bottom: 2rem; right: 2rem; z-index: 2; display: inline-flex; align-items: center; justify-content: center; text-align: center; padding: .65rem 1.5rem; background: rgba(255,255,255,0.15); border: 1px solid #DEDEDE; border-radius: 9px; backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); color: #FFFFFF; font-family: 'Inter', sans-serif; font-size: .875rem; font-weight: 600; letter-spacing: .05em; text-decoration: none; transition: background .2s, color .2s; } .manufacturer-campaign-btn:hover { background: #FFFFFF; color: #000000; } /* ── Manufacturer info hero (manufacturer_info.twig uses old class names) ── */ .category-hero .category-product-count { text-align: left; font-family: 'Inter', sans-serif; font-weight: normal; font-size: 16px; line-height: 31px; letter-spacing: -0.48px; color: #FFFFFF; opacity: 1; } .category-hero .main-content-title { text-align: left; font-family: 'Inter', sans-serif; font-weight: bold; font-size: 55px; line-height: 55px; letter-spacing: -1.65px; color: #FFFFFF; opacity: 1; margin: 0; } .category-hero__subtitle, .category-hero__description { font-weight: 300; line-height: 1.71; } .category-hero__description { display: none; } .category-hero__description, .category-hero__toggle { margin-bottom: var(--space); } .category-hero__subtitle p, .category-hero__description p { margin-bottom: 0; } .category-hero__toggle { color: var(--color-dark); font-weight: bold; display: flex; align-items: flex-end; cursor: pointer; margin-top: var(--space-half); } .category-hero__toggle:hover { color: var(--link-color-hover); } .category-hero__toggle i { margin-left: var(--space-half); } /* Product listing color thumbnails */ .product-block-color-thumbs { display: none; gap: 4px; margin-top: 6px; flex-wrap: wrap; } .product-block:hover .product-block-color-thumbs { display: flex; } .pov-color-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 3px; border: 1px solid #e0e0e0; cursor: pointer; transition: border-color 0.15s; } .pov-color-thumb:hover, .pov-color-thumb.active { border-color: #333; } /* Recently viewed section */ .rv-section { background: #F6F6F6; height: 250px; padding: 56px 0; margin-top: 60px; margin-bottom: -40px; border-radius: 25px 25px 0px 0px; } .rv-wrapper { display: flex; align-items: center; gap: 40px; } .rv-header { flex-shrink: 0; } .rv-title { font-family: 'Inter', sans-serif; font-size: 20px; font-weight: bold; line-height: 30px; letter-spacing: 0px; color: #252525; text-align: left; margin: 0; } .rv-list { display: flex; gap: 16px; margin-left: auto; overflow-x: auto; scrollbar-width: none; } .rv-list::-webkit-scrollbar { display: none; } /* RV Card */ .rv-card { display: flex; align-items: center; background: #FFFFFF; border: 1px solid #E1E1E1; border-radius: 5px; padding: 12px; gap: 12px; width: 443px; height: 120px; flex-shrink: 0; box-sizing: border-box; } .rv-card__image { flex-shrink: 0; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; } .rv-card__image img { width: 100%; height: 100%; object-fit: contain; } .rv-card__body { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; } .rv-card__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .rv-card__brand { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: bold; letter-spacing: 0.5px; text-transform: uppercase; color: #000; } .rv-card__actions { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; } .rv-card__icons { display: flex; flex-direction: column; gap: 4px; align-items: center; } .rv-card__icons .product-wishlist .h-icon { width: 14px; height: 12px; font-size: 11px; } .rv-card__icons .product-compare .h-icon { width: 16px; height: 14px; font-size: 12px; } .rv-card__icon { display: flex; align-items: center; justify-content: center; width: 14px; height: 12px; background: none; border: none; color: #000000; font-size: 11px; line-height: 1; opacity: 1; transition: opacity 0.15s; } .rv-card__icon:hover { opacity: 1; } .rv-card__icon--compare { width: 16px; height: 14px; background: none; border: none; color: #A1A1A1; } .rv-card__icon--compare:hover { background: none; color: #888888; } .rv-card__icon .h-icon, .rv-card__icon i { font-size: 14px; width: auto; height: auto; } .rv-card__name { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; line-height: 20px; letter-spacing: 0px; color: #252525; text-align: left; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .rv-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; } .rv-card__price-current { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: bold; line-height: 20px; letter-spacing: 0px; color: #252525; text-align: left; } .rv-card__price-old { font-size: 12px; color: #9B9B9B; margin-right: 4px; } .rv-card__cart { width: 35px; height: 35px; background: #0C0C0C; border-radius: 2px; padding: 2px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #ffffff; transition: background 0.15s; } .rv-card__cart:hover { background: #333; color: #fff; } .rv-card__cart .h-icon { width: 17px; height: 17px; font-size: 13px; display: flex; align-items: center; justify-content: center; color: #ffffff; filter: invert(1); } @media (max-width: 767px) { .rv-wrapper { flex-direction: column; gap: 16px; } .rv-header { width: 100%; } .rv-card { min-width: 180px; } } #product-product { margin-top: 0 !important; } /* Product gallery ribbons */ .product-gallery__main { position: relative; background: #F5F5F5; border-radius: 7px; overflow: visible; display: flex; align-items: center; justify-content: center; } .product-gallery__ribbons { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; flex-direction: column; gap: 6px; } .product-ribbon { display: inline-block; padding: 2px 10px; border-radius: 5px; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; line-height: 29px; letter-spacing: -0.45px; text-align: left; } .product-ribbon--new { background: #FFFFFF; border: 1px solid #CBCBCB; color: #000000; } .product-ribbon--bestseller { background: #003296; border: none; color: #FFFFFF; } /* Product gallery */ .product-gallery { display: flex; gap: 24px; align-items: flex-start; } .product-gallery__thumbs { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; } .product-gallery__nav { background: none; border: none; cursor: pointer; color: #000000; padding: 4px; transition: opacity 0.15s; } .product-gallery__nav i { width: 19px; height: 22px; font-size: 18px; display: flex; align-items: center; justify-content: center; color: #000000; } .product-gallery__nav:hover { opacity: 0.7; } .product-gallery__thumbs-list { display: flex; flex-direction: column; gap: 8px; max-height: 600px; overflow-y: auto; scrollbar-width: none; } .product-gallery__thumbs-list::-webkit-scrollbar { display: none; } .product-gallery__thumb { width: 105px; height: 105px; background: #F5F5F5; border: 1px solid #C0C0C0; border-radius: 7px; overflow: hidden; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s; } .product-gallery__thumb.active { border-color: #000; } .product-gallery__thumb:not(.active) { opacity: 0.46; transition: opacity 0.2s ease; } .product-gallery__thumb:not(.active):hover { opacity: 1; } .product-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; } .product-gallery__main-img { width: 100%; height: 100%; object-fit: contain; border-radius: 7px; opacity: 1; } .product-gallery__main-link { cursor: default; pointer-events: none; } .product-gallery__top-actions { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 8px; z-index: 10; } .product-gallery__action-btn { width: 40px; height: 41px; background: #FFFFFF 0% 0% no-repeat padding-box; opacity: 0.62; backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity 0.2s ease; } .product-gallery__action-btn:hover { opacity: 1; } .product-gallery__action-btn svg { width: auto; height: auto; flex-shrink: 0; } /* Product title */ #product-product h1 { font-family: 'Inter', sans-serif; font-size: 28px; font-weight: bold; line-height: 28px; letter-spacing: -0.84px; color: #000000; opacity: 1; margin-top: 4px; margin-bottom: 24px; } /* Shared offset β€” aligns with main gallery image (thumbs 100px + gap 24px) */ .product-description-section, .product-video-section, .product-presentation-section, .product-features-section, .product-specs-section { margin-left: 124px; } /* Product description section */ .product-description-section { margin-top: 60px; } .product-description-section__inner { margin-left: 0; } .product-description-section__title { font-family: 'Inter', sans-serif; font-size: 20px; font-weight: bold; letter-spacing: -0.5px; color: #000; margin-bottom: 16px; } .product-description-section__text p { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: normal; line-height: 1.7; letter-spacing: -0.3px; color: #333; margin-bottom: 12px; } /* Product video section */ .product-video-section { margin-top: 60px; } .product-video-section iframe { width: 1067px; height: 653px; max-width: 100%; border-radius: 7px; border: none; display: block; } /* Product presentation section */ .product-presentation-section { margin-top: 60px; } .product-presentation-section__title { font-family: 'Inter', sans-serif; font-size: 20px; font-weight: bold; letter-spacing: -0.5px; color: #000; margin-bottom: 20px; } .product-presentation-grid { display: grid; grid-template-columns: 510px 510px; gap: 20px; } .product-presentation-item img { width: 510px; height: 450px; max-width: 100%; border-radius: 10px; object-fit: cover; display: block; } .product-presentation-item p { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: normal; line-height: 1.6; letter-spacing: -0.48px; color: #000000; margin-top: 14px; } /* Product features section */ .product-features-section { margin-top: 60px; } .product-features-section__title { font-family: 'Inter', sans-serif; font-size: 20px; font-weight: bold; letter-spacing: -0.5px; color: #000; margin-bottom: 20px; } .product-features-grid { display: grid; grid-template-columns: repeat(3, 347px); gap: 16px; } .product-feature-card { background: #F5F5F5; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; align-items: center; } .product-feature-card img { width: 347px; height: 290px; object-fit: cover; display: block; } .product-feature-card span { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: -0.3px; color: #000; text-decoration: underline; padding: 12px 16px; text-align: center; } /* Product specs accordion */ .product-specs-section { margin-top: 60px; } .product-specs-section__title { font-family: 'Inter', sans-serif; font-size: 20px; font-weight: bold; letter-spacing: -0.5px; color: #000; margin-bottom: 20px; } .product-specs-group { margin-bottom: 0; } .product-specs-group__header { width: 100%; display: flex; align-items: center; justify-content: space-between; background: #0C0C0C; color: #fff; border: none; border-radius: 6px; padding: 16px 20px; font-family: 'Inter', sans-serif; font-size: 16px; font-weight: bold; letter-spacing: -0.4px; cursor: pointer; margin-bottom: 0; margin-top: 16px; } .product-specs-group__header i { transition: transform 0.25s ease; font-size: 14px; } .product-specs-group.open .product-specs-group__header i { transform: rotate(180deg); } .product-specs-group__body { display: none; border: 1px solid #E8E8E8; border-top: none; border-radius: 0 0 6px 6px; } .product-specs-table { display: flex; flex-direction: column; } .product-specs-row { display: grid; grid-template-columns: 220px 1fr; gap: 16px; padding: 14px 20px; background: #F9F9F9; border-bottom: 1px solid #EFEFEF; } .product-specs-row:last-child { border-bottom: none; } .product-specs-row:nth-child(even) { background: #fff; } .product-specs-label { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: normal; color: #555; letter-spacing: -0.3px; } .product-specs-value { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: normal; color: #000; letter-spacing: -0.3px; line-height: 1.6; } /* Pre-footer links */ .pre-footer { height: 180px; background: #F6F6F6 0% 0% no-repeat padding-box; border-radius: 25px 25px 0px 0px; opacity: 1; display: flex; align-items: center; margin-bottom: -50px; position: relative; z-index: -1; } .pre-footer__grid { display: flex; align-items: center; justify-content: space-around; width: 100%; } .pre-footer__item { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: 'Inter', sans-serif; font-size: 20px; font-weight: bold; line-height: 29px; letter-spacing: -0.6px; color: #000000; opacity: 0.5; transition: opacity 0.2s ease; } .pre-footer__item:hover { opacity: 1; color: #000; } .pre-footer__item i { font-size: 22px; } /* Product app banner */ .product-app-banner { height: 405px; display: flex; align-items: center; margin-top: 60px; } .product-app-banner__inner { width: 100%; display: flex; align-items: center; justify-content: center; gap: 60px; padding: 0 20px; } .product-app-banner__left { display: flex; align-items: center; gap: 20px; } .product-app-banner__icon { width: 80px; height: 80px; object-fit: contain; border-radius: 18px; } .product-app-banner__title { font-family: 'Inter', sans-serif; font-size: 20px; font-weight: bold; line-height: 29px; letter-spacing: -0.6px; color: #000000; } .product-app-banner__desc { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: normal; line-height: 29px; letter-spacing: -0.6px; color: #000000; } .product-app-banner__right { display: flex; align-items: center; gap: 16px; } .product-app-banner__badge img { height: 52px; width: auto; display: block; } /* Product related section */ .product-related-section-wrap { width: 100%; margin-top: 120px; border-radius: 10px; overflow: hidden; background: url('https://elmi.happyoffline.eu/image/catalog/car-image-docks.jpg') center center / cover no-repeat; } .product-related-section { margin: 0; padding: 60px 0 60px 0; display: flex; align-items: flex-start; } .product-related-section__left { width: 320px; flex-shrink: 0; } .product-related-section__right { flex: 1; min-width: 0; padding-right: 40px; } .product-related-tabs { display: flex; gap: 8px; margin-bottom: 24px; } .product-related-tab { height: 44px; padding: 0 24px; border-radius: 5px; border: 1px solid #707070; background: transparent; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: -0.3px; color: #fff; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; opacity: 1; } .product-related-tab.active { background: #FFFFFF; color: #000; border-color: #FFFFFF; } .product-related-pane { display: none; } .product-related-pane.active { display: block; } .product-related-swiper { position: relative; } /* Product related bottom bar */ .product-related-bottom-bar { margin-top: 20px; } .product-related-bottom { display: flex; align-items: center; gap: 16px; } .product-related-bottom.brand-picks-bottom--hidden { display: none; } .product-related-bottom .swiper-scrollbar { flex: 1; height: 3px; background: rgba(255,255,255,0.3); border-radius: 3px; position: relative; cursor: pointer; } .product-related-bottom .swiper-scrollbar .swiper-scrollbar-drag { background: #fff; border-radius: 3px; height: 100%; } .product-related-bottom .brand-picks-nav { display: flex; gap: 8px; flex-shrink: 0; } .product-related-bottom .brand-picks-nav__btn { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.4); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s; } .product-related-bottom .brand-picks-nav__btn:hover { background: rgba(255,255,255,0.35); } .product-related-bottom .brand-picks-nav__btn svg path { stroke: #fff; } /* ============================================================ PRODUCT PAGE - RESPONSIVE (tablet & mobile) ============================================================ The desktop layout uses a 124px left offset on the content sections (matching gallery thumbs+gap), fixed grid track widths (347px / 510px), and a fixed-aspect 1067×653 video frame - none of which fit below 992px. Below: progressive collapse to tablet (≤991px) then mobile (≤575px). Breakpoints follow the Bootstrap scale already used elsewhere in this theme. ============================================================ */ /* TABLET (≤991.98px) - gallery moves above purchase column via Bootstrap's stacking, so the 124px alignment offset is meaningless. Grids collapse to 2-up. Related section stacks vertically. */ @media (max-width: 991.98px) { /* Reorder so the purchase column (brand / price / add-to-cart / info blocks) sits between the gallery and the description on mobile/tablet. The twig structure is: ← gallery + description + video + features + … ← purchase column We can't put the purchase between gallery and description with `order` alone because they're not flex siblings. Flatten the first column with `display: contents` so all its children (the gallery and every section) become direct flex items of `.row`, joining the purchase column. Then `order` slots everything in the desired sequence. `display: contents` is well-supported (Chrome 65+, Safari 11.1+, Firefox 37+, Edge 79+). Older browsers fall back to the original DOM order, which is acceptable graceful degradation. */ #product-product #content > .row:has(.product-gallery) > div:first-child { display: contents; } #product-product #content > .row:has(.product-gallery) > div:last-child { order: 2; /* Override Bootstrap's `col-sm-4 { width: 33.33% }` at sm/md viewports - otherwise the purchase column would sit at 33% width on a 600–991px viewport while the other (now-direct) flex children take 100%. */ flex: 0 0 100%; max-width: 100%; width: 100%; } #product-product #content > .row:has(.product-gallery) .product-gallery { order: 1; width: 100%; } #product-product #content > .row:has(.product-gallery) .product-description-section { order: 3; width: 100%; } #product-product #content > .row:has(.product-gallery) .product-video-section { order: 4; width: 100%; } #product-product #content > .row:has(.product-gallery) .product-features-section { order: 5; width: 100%; } #product-product #content > .row:has(.product-gallery) .product-presentation-section { order: 6; width: 100%; } #product-product #content > .row:has(.product-gallery) .product-specs-section { order: 7; width: 100%; } /* Hidden legacy tabs flow last so they don't break ordering if a future change makes them visible. */ #product-product #content > .row:has(.product-gallery) > .nav-tabs, #product-product #content > .row:has(.product-gallery) > .tab-content { order: 8; } /* ── Spacing reset ────────────────────────────────────────── With `display: contents` on the col-sm-8 wrapper, its children lose the Bootstrap gutter padding that normally kept them inset from the row's negative-margin edges. The result: every section sits flush to the viewport. Restore inset padding on each flex child and replace the original desktop `margin-top: 60px` per-section spacing with a unified `row-gap` on the row, so sections don't double up vertical space on top of the gap. ────────────────────────────────────────────────────────── */ #product-product #content > .row:has(.product-gallery) { row-gap: 32px; } #product-product #content > .row:has(.product-gallery) .product-gallery, #product-product #content > .row:has(.product-gallery) .product-description-section, #product-product #content > .row:has(.product-gallery) .product-video-section, #product-product #content > .row:has(.product-gallery) .product-features-section, #product-product #content > .row:has(.product-gallery) .product-presentation-section, #product-product #content > .row:has(.product-gallery) .product-specs-section { padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5); padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5); margin-top: 0; /* row-gap above handles vertical spacing */ } /* Gallery: thumbs move BELOW the main image as a horizontal strip. The DOM order is thumbs-first / main-second, so we flip with `column-reverse` to render main on top without changing the template. The vertical up/down nav buttons become noise once we scroll horizontally, so they're hidden. */ .product-gallery { flex-direction: column-reverse; gap: 12px; align-items: stretch; } .product-gallery__thumbs { flex-direction: row; width: 100%; gap: 0; } .product-gallery__nav { display: none; } .product-gallery__thumbs-list { flex-direction: row; gap: 8px; max-height: none; overflow-x: auto; overflow-y: hidden; width: 100%; padding-bottom: 2px; /* room for the active-thumb border */ scroll-snap-type: x proximity; } .product-gallery__thumb { width: 72px; height: 72px; scroll-snap-align: start; } .product-description-section, .product-video-section, .product-presentation-section, .product-features-section, .product-specs-section { margin-left: 0; margin-top: 40px; } /* Video: fluid aspect-ratio replaces the fixed 1067×653. */ .product-video-section iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; } /* Presentation: 2 fluid columns → keeps the side-by-side feel. */ .product-presentation-grid { grid-template-columns: 1fr 1fr; gap: 16px; } .product-presentation-item img { width: 100%; height: auto; aspect-ratio: 510 / 450; } /* Features: 3-up → 2-up so cards have breathing room. */ .product-features-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } .product-feature-card img { width: 100%; height: auto; aspect-ratio: 347 / 290; } /* Specs accordion: tighten header padding, shrink label column. */ .product-specs-group__header { padding: 14px 16px; font-size: 15px; } .product-specs-row { grid-template-columns: 180px 1fr; gap: 12px; padding: 12px 16px; } /* Related section: stack the decorative left card above the tabs+swiper so neither gets squeezed. Drop the right padding that was reserving room for the original side-by-side layout. */ .product-related-section { flex-direction: column; padding: 40px 20px; gap: 24px; } .product-related-section__left { /* The desktop left card is currently an empty placeholder div; hide it on small screens rather than leave dead space. If real content gets added there later, swap this to `width: 100%`. */ display: none; } .product-related-section__right { width: 100%; padding-right: 0; } .product-related-section-wrap { margin-top: 60px; } /* App banner: stack stacking on smaller widths starts here so store badges don't get pushed off-screen on portrait tablets. */ .product-app-banner { height: auto; padding: 32px 16px; } .product-app-banner__inner { flex-direction: column; gap: 24px; text-align: center; } .product-app-banner__left { flex-direction: column; text-align: center; gap: 12px; } .product-app-banner__right { flex-wrap: wrap; justify-content: center; } /* Pre-footer: wrap, tighten typography to fit narrower widths. */ .pre-footer { height: auto; padding: 24px 16px; margin-bottom: -24px; z-index: -1; } .pre-footer__grid { flex-wrap: wrap; gap: 16px 24px; justify-content: center; } .pre-footer__item { font-size: 16px; line-height: 1.4; } .pre-footer__item i { font-size: 18px; } } /* MOBILE (≤575.98px) - single-column grids, smaller titles, looser spec rows that stack label-over-value (the 180px label column from the tablet rules above gets cramped under ~400px width). */ @media (max-width: 575.98px) { .product-description-section, .product-video-section, .product-presentation-section, .product-features-section, .product-specs-section { margin-top: 32px; } /* Section titles: tighten to feel proportional in a narrow column. */ .product-description-section__title, .product-video-section__title, .product-presentation-section__title, .product-features-section__title, .product-specs-section__title { font-size: 17px; margin-bottom: 14px; } .product-description-section__text p { font-size: 13.5px; } /* Presentation + features: single column. */ .product-presentation-grid, .product-features-grid { grid-template-columns: 1fr; gap: 12px; } .product-presentation-item p { font-size: 14px; } /* Specs accordion: stack label over value with the label as a small uppercase caption - much more legible at this width than a cramped 2-column grid. */ .product-specs-group__header { padding: 12px 14px; font-size: 14px; } .product-specs-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 14px; } .product-specs-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: #777; } .product-specs-value { font-size: 13.5px; } /* Related tabs: allow horizontal wrap, shrink heights. */ .product-related-section { padding: 32px 16px; } .product-related-tabs { flex-wrap: wrap; gap: 6px; margin-bottom: 18px; } .product-related-tab { height: 38px; padding: 0 16px; font-size: 13px; } .product-related-bottom .brand-picks-nav__btn { width: 32px; height: 32px; } /* App banner: tighter padding + smaller typography. */ .product-app-banner { padding: 28px 14px; margin-top: 40px; } .product-app-banner__icon { width: 64px; height: 64px; } .product-app-banner__title { font-size: 18px; line-height: 24px; } .product-app-banner__desc { font-size: 14px; line-height: 22px; } .product-app-banner__badge img { height: 44px; } /* Pre-footer: flex-wrap so items reflow into multiple rows as width tightens. `space-between` doesn't make sense once items wrap (last row has trailing empty space); use `flex-start` with explicit gap. */ .pre-footer { padding: 20px 14px; } .pre-footer__grid { flex-wrap: wrap; justify-content: center; gap: 12px 20px; } .pre-footer__item { font-size: 14px; } .pre-footer__item i { font-size: 16px; } /* Product help links: same - let the three help shortcuts wrap to a second row when the viewport can't fit all three on one line, rather than stacking everything in a column. */ .product-help-links { flex-wrap: wrap; justify-content: center; gap: 10px 18px; padding-inline: 0; } } /* Product color variants */ .product-color-variants { margin-bottom: 12px; } .product-color-variants__label { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: bold; line-height: 18px; letter-spacing: -0.42px; color: #000000; opacity: 1; margin-bottom: 8px; } .product-color-variants__list { display: flex; gap: 8px; flex-wrap: wrap; } .product-color-thumb { display: block; width: 60px; height: 76px; background: #F5F5F5 0% 0% no-repeat padding-box; border-radius: 3px; overflow: hidden; border: 1px solid transparent; transition: border-color 0.2s ease; } .product-color-thumb.active { border: 1px solid #000000; } .product-color-thumb:hover { border-color: #000; } .product-color-thumb img { width: 100%; height: 100%; object-fit: cover; } /* Product size guide */ .product-size-guide { margin-bottom: 8px; } .product-size-guide a { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: bold; line-height: 18px; letter-spacing: -0.42px; color: #000000; text-decoration: underline; } .product-size-guide a:hover { opacity: 0.7; } .product-price-row { border-top: 1px solid rgba(0,0,0,0.1); padding-top: 12px; } /* Product price row */ .product-price-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; margin-top: 4px; } .product-price-amount { font-family: 'Inter', sans-serif; font-size: 42px; font-weight: bold; line-height: 26px; letter-spacing: -1.26px; color: #000000; } .product-price-old { font-size: 22px; font-weight: normal; color: #999; text-decoration: line-through; margin-right: 8px; } .product-price-amount sup { font-size: 0.45em; vertical-align: top; font-weight: bold; letter-spacing: -0.5px; line-height: 1.8; } .product-stock-status { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: bold; line-height: 20px; letter-spacing: -0.45px; } .product-stock-status--success { color: #00B27D; } .product-stock-status--danger { color: #E53935; } .product-stock-status--dark { color: #252525; } /* Product cart row */ .product-cart-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .product-qty-stepper { display: flex; align-items: center; flex-direction: row; height: 55px; background: rgba(72,72,72,0.06); border-radius: 4px; flex-shrink: 0; padding: 0 8px; gap: 6px; } .product-qty-btn { background: none; border: none; font-size: 18px; font-weight: 400; color: #000; cursor: pointer; line-height: 1; padding: 0; width: 20px; text-align: center; flex-shrink: 0; } .product-qty-input { width: 28px; text-align: center; border: none; background: none; font-size: 14px; font-weight: bold; color: #000; padding: 0; line-height: 1; } .product-cart-row .btn.product-cart { flex: 1; height: 55px; position: relative; display: flex; align-items: center; justify-content: center; background: #0C0C0C; color: #fff; border-radius: 9px; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: -0.3px; border: none; overflow: hidden; transition: background 200ms ease; } .product-cart-row .btn.product-cart:hover { background: #232323; color: #fff; } .product-cart-row .btn.product-cart .h-icon-cart { filter: invert(1); font-size: 16px; line-height: 1; position: absolute; left: 1.5rem; transition: left 300ms ease, transform 300ms ease; } .product-cart-row .btn.product-cart:hover .h-icon-cart, .product-cart-row .btn.product-cart:hover .product-notify-icon { left: 50%; transform: translate(-50%, -50%); } .product-cart-row .btn.product-cart span:not(.h-icon-cart):not(.product-notify-icon) { letter-spacing: 0; color: #fff; white-space: nowrap; overflow: hidden; transition: opacity 300ms ease, max-width 300ms ease; max-width: 200px; opacity: 1; } .product-cart-row .btn.product-cart:hover span:not(.h-icon-cart):not(.product-notify-icon) { opacity: 0; max-width: 0; } /* Product help links */ .product-help-links { display: flex; justify-content: center; margin-top: 14px; padding-inline: 12px; } .product-help-links a { display: flex; align-items: center; gap: 6px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: normal; line-height: 19px; letter-spacing: -0.42px; color: #5C5C5C; text-decoration: none; } .product-help-links a span { text-decoration: underline; } .product-help-links a i { font-size: 14px; letter-spacing: -0.3px; color: #000000; text-decoration: none; flex-shrink: 0; } .product-help-links a:hover { color: #000; } /* Product resellers link */ .product-resellers-link { text-align: center; margin: 10px 0; } .product-resellers-link a { text-decoration: underline; font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: -0.48px; color: #7A7A7A; opacity: 1; } .product-resellers-link a:hover { color: #000; } /* Product info blocks */ .product-info-blocks { margin-top: 8px; border: 1px solid #D9D9D9; border-radius: 15px; padding: 0 20px; max-width: 560px; } .product-info-block { display: flex; align-items: center; gap: 14px; padding: 18px 0; } .product-info-block__divider { height: 1px; background: #D9D9D9; opacity: 0.5; } .product-info-block__icon { flex-shrink: 0; width: 26px; display: flex; align-items: center; justify-content: center; color: #252525; } .product-info-block__content { flex: 1; } .product-info-block__title { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: bold; line-height: 17px; letter-spacing: -0.28px; color: #252525; } .product-info-block__desc { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: normal; line-height: 17px; letter-spacing: -0.28px; color: #252525; margin-top: 3px; } .product-info-block__arrow { flex-shrink: 0; font-size: 15px; line-height: 17px; letter-spacing: -0.3px; color: #252525; text-decoration: none; } .product-info-block__arrow:hover { color: #000; } /* Product brand */ .product-brand { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; margin-bottom: 4px; } .product-brand__logo { max-width: 120px; height: auto; object-fit: contain; } .product-brand__view { text-decoration: underline; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: -0.39px; color: #000000; opacity: 0.6; } .product-brand__arrow { font-size: 13px; line-height: 1; letter-spacing: -0.39px; color: #000000; opacity: 0.6; display: flex; align-items: center; } .product-brand:hover .product-brand__view, .product-brand:hover .product-brand__arrow { opacity: 1; } .product-gallery__zoom-pill { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); width: 116px; height: 30px; background: #FFFFFF 0% 0% no-repeat padding-box; border-radius: 100px; opacity: 1; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; color: #A1A1A1; text-decoration: none; transition: color 0.2s ease, opacity 0.3s ease, transform 0.3s ease; } .product-gallery__zoom-pill span { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: bold; letter-spacing: -0.26px; color: #A1A1A1; transition: color 0.2s ease; } .product-gallery__zoom-pill svg { flex-shrink: 0; color: #A1A1A1; transition: color 0.2s ease; } .product-gallery__zoom-pill:hover span, .product-gallery__zoom-pill:hover svg { color: #000000; } /* Product page breadcrumb bar */ .product-breadcrumb-bar { background: #ffffff; } .product-breadcrumb-bar .breadcrumb-home-icon i { color: #000000; opacity: 0.6; } .product-breadcrumb-bar .category-breadcrumb .breadcrumb-item a { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; line-height: 20px; letter-spacing: -0.33px; color: #000000; text-align: left; text-decoration: underline; } .product-breadcrumb-bar .breadcrumb-item + .breadcrumb-item::before { content: none; } .product-breadcrumb-bar .breadcrumb-item + .breadcrumb-item::after { display: none; } .product-breadcrumb-bar .category-breadcrumb .breadcrumb-item:not(:first-child)::before { content: "\f105"; font-family: 'Font Awesome 6 Pro'; font-weight: 300; color: #000000; opacity: 1; padding: 0 6px; } /* Sticky filter sidebar */ #column-left { align-self: flex-start; position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; } /* FancyBox lightbox: white background, left thumbnails */ .fancybox-bg { background: #fff; } .fancybox-is-open .fancybox-bg { opacity: 1; } .fancybox-container { border-radius: 4px; } /* Hide slide counter (1/4) */ .fancybox-infobar { display: none !important; } /* Close button */ .fancybox-button--close { width: 55px; height: 70px; background: transparent; color: #000000; opacity: 1; } .fancybox-button--close:hover { background: transparent; } .fancybox-button--close svg path { fill: #000000; stroke: #000000; } /* Navigation: only right arrow, always visible */ .fancybox-navigation .fancybox-button--arrow_left { display: none; } .fancybox-show-nav .fancybox-navigation .fancybox-button--arrow_right { opacity: 1; width: 70px; height: 70px; background: transparent; color: #000000; top: auto; bottom: 20px; right: 0; padding: 0; display: flex; align-items: center; justify-content: center; } .fancybox-navigation .fancybox-button--arrow_right:hover { background: rgba(0,0,0,0.05); } .fancybox-navigation .fancybox-button--arrow_right div { display: none; } .fancybox-navigation .fancybox-button--arrow_right::after { content: '\f178'; font-family: 'Font Awesome 6 Pro'; font-weight: 300; font-size: 28px; color: #000000; } /* Thumbnails: vertical strip, bottom-left */ .fancybox-thumbs { left: 0; right: auto; top: auto; bottom: 0; background: #fff; padding: 8px 6px; overflow-x: hidden; overflow-y: auto; } .fancybox-show-thumbs .fancybox-inner { right: 0; left: 0; bottom: 0; } /* Thumb items */ .fancybox-thumbs__list { display: flex; flex-direction: column; width: 100%; } .fancybox-thumbs__list a { display: block; float: none; width: 103px; height: 103px; max-width: 100%; max-height: none; margin: 0 0 6px 0; border: 1px solid #C0C0C0; border-radius: 7px; background-color: #fff; } .fancybox-thumbs__list a::before { border: none; } .fancybox-thumbs__list a.fancybox-thumbs-active { border: 1px solid #C0C0C0; } /* Mobile FancyBox: thumbnails as a horizontal strip pinned to the bottom of the viewport. The default is a vertical sidebar (left:0, width:119px), which eats most of a portrait phone's width. Override to span full width, fixed height, with the thumbs flowing horizontally and scrolling on overflow. */ @media all and (max-width: 767.98px) { .fancybox-thumbs { left: 0; right: 0; top: auto; bottom: 0; width: 100%; height: 92px; padding: 8px 10px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .fancybox-thumbs::-webkit-scrollbar { display: none; } .fancybox-thumbs__list { flex-direction: row; width: max-content; gap: 6px; } .fancybox-thumbs__list a { width: 72px; height: 72px; margin: 0; flex-shrink: 0; } /* Make the main image area reserve room for the bottom strip instead of the original 119px left sidebar. */ .fancybox-show-thumbs .fancybox-inner { left: 0; right: 0; bottom: 92px; } } /* Filter Carousel */ .filter-carousel-wrap { overflow: hidden; margin-bottom: 1.5rem; } .filter-carousel { display: flex; justify-content: space-between; gap: 1rem; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 0.25rem; } .filter-carousel::-webkit-scrollbar { display: none; } .filter-carousel__item { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; flex-shrink: 0; cursor: pointer; } .filter-carousel__item__img { width: 213px; height: 172px; border-radius: 7px; border: 1px solid #DEDEDE2E; overflow: hidden; flex-shrink: 0; } .filter-carousel__item__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s ease; } .filter-carousel__item:hover .filter-carousel__item__img img { transform: scale(1.2); } .filter-carousel__item span { display: block; text-align: left; margin-right: auto; font-size: 14px; font-weight: 600; line-height: 25px; letter-spacing: -0.41px; color: #000000; white-space: nowrap; } .filter-carousel__item:hover span { text-decoration: underline; } /* ============================================= ALERTS β€” redesigned to match site aesthetic ============================================= */ .alert { font-family: "Inter", sans-serif; font-size: 13px; line-height: 1.4; border-radius: 10px; border: none; border-left: 4px solid; padding: 10px 14px !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12); } .alert-fixed { min-width: 280px; max-width: min(480px, calc(100vw - 2rem)); bottom: 1.5rem; top: auto; left: 50%; transform: translateX(-50%); border-radius: 10px; z-index: 99999; } .alert-fixed > i { flex-shrink: 0; font-size: 15px !important; } .alert-fixed .ps-3 { padding-left: 10px !important; } .alert-success { background-color: #0d0d0d; border-left-color: #48BB51; color: #ffffff; } .alert-danger { background-color: #0d0d0d; border-left-color: #e53e3e; color: #ffffff; } .alert-warning { background-color: #0d0d0d; border-left-color: #f6ad55; color: #ffffff; } .alert-info { background-color: #0d0d0d; border-left-color: #63b3ed; color: #ffffff; } .alert-success a, .alert-danger a, .alert-warning a, .alert-info a { color: #ffffff; text-decoration: underline; text-underline-offset: 2px; } .alert-success a:hover, .alert-danger a:hover, .alert-warning a:hover, .alert-info a:hover { opacity: 0.8; } .alert-success > i, .alert-danger > i, .alert-warning > i, .alert-info > i { flex-shrink: 0; font-size: 18px; top: 0; } .alert-success > i { color: #48BB51; } .alert-danger > i { color: #e53e3e; } .alert-warning > i { color: #f6ad55; } .alert-info > i { color: #63b3ed; } .alert .btn-close { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e"); opacity: 0.6; transition: opacity 0.2s; } .alert .btn-close:hover { opacity: 1; } @media (max-width: 500px) { .alert-fixed { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; top: auto; transform: none; min-width: unset; max-width: unset; width: auto; border-radius: 10px; } } html { /* `overflow-x: hidden` would create a scroll container at the root - which kills `position: sticky` for every descendant. `overflow-x: clip` does the same horizontal-overflow protection without making a scroll container, so the sticky header stays sticky on every viewport. Falls back to `hidden` on the few browsers that don't support clip yet (≈3% in 2026). */ overflow-x: clip; } @supports not (overflow-x: clip) { html { overflow-x: hidden; } } /* ============================================= PRODUCT BLOCK ICONS β€” wishlist & compare ============================================= */ /* Bigger icons across all wrappers */ .product-block-icons .product-wishlist .h-icon-wishlist, .product-block-icons .product-compare .h-icon-compare { width: 20px !important; height: 20px !important; } /* Wishlist β€” filled black heart when wished */ .product-block.wished .product-block-icons .product-wishlist .h-icon-wishlist, .products-latest-wrapper .product-block.wished .product-block-icons .product-wishlist .h-icon-wishlist, .products-featured-wrapper .product-block.wished .product-block-icons .product-wishlist .h-icon-wishlist, .products-brand-picks-wrapper .product-block.wished .product-block-icons .product-wishlist .h-icon-wishlist { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20.963' height='19.004' viewBox='0 0 20.963 19.004'%3E%3Cpath d='M36.208,24.579a5.383,5.383,0,0,0-7.613,0l-.642.642-.642-.642A5.383,5.383,0,0,0,19.7,32.192l.642.642,7.621,7.6,7.613-7.613.642-.642a5.383,5.383,0,0,0-.009-7.6Z' transform='translate(-17.472 -22.352)' fill='%23000' stroke='none'/%3E%3C/svg%3E") !important; opacity: 1 !important; } /* Compare β€” solid black when compared */ .product-block.compared .product-block-icons .product-compare .h-icon-compare, .products-latest-wrapper .product-block.compared .product-block-icons .product-compare .h-icon-compare, .products-featured-wrapper .product-block.compared .product-block-icons .product-compare .h-icon-compare, .products-brand-picks-wrapper .product-block.compared .product-block-icons .product-compare .h-icon-compare { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24.562' height='20.99' viewBox='0 0 24.562 20.99'%3E%3Cpath d='M18.462,22.99a1.176,1.176,0,0,1-.831-2.007L21.5,17.11H6.7a1.176,1.176,0,1,1,0-2.352H24.341a1.176,1.176,0,0,1,.831,2.007l-5.879,5.879a1.176,1.176,0,0,1-.831.345Zm3.528-12.934a1.176,1.176,0,0,0-1.176-1.176H6.014L9.886,5.007A1.176,1.176,0,1,0,8.224,3.344L2.344,9.224a1.176,1.176,0,0,0,.831,2.007H20.814a1.176,1.176,0,0,0,1.176-1.176Z' transform='translate(-1.477 -2.5)' fill='%23000' stroke='none'/%3E%3C/svg%3E") !important; opacity: 1 !important; } /* Default icon color β€” slightly lighter */ .product-block-icons .product-icon .h-icon-wishlist, .product-block-icons .product-icon .h-icon-compare { opacity: 0.4; transition: opacity 0.2s, filter 0.2s; } /* Hover */ .product-block-icons .product-icon:hover .h-icon-wishlist, .product-block-icons .product-icon:hover .h-icon-compare { opacity: 1; filter: brightness(0) saturate(100%); } /* ============================================= CONTACT PAGE ============================================= */ /* Hero - taller to fit the info bar */ .contact-hero { height: 345px !important; background: #000000 0% 0% no-repeat padding-box !important; border-radius: 0px 0px 25px 25px !important; opacity: 1; } .contact-hero .container-xxl { height: 100%; display: flex; flex-direction: column; } .contact-hero .category-breadcrumb { justify-content: flex-start; align-self: flex-start; } /* 4-column info bar inside the dark hero */ .contact-info-bar { display: flex; justify-content: center; gap: 12px; margin-top: 20px; padding: 0 24px; text-align: center; width: 100%; position: relative; top: -26%; } .contact-info-item { display: flex; flex-direction: column; align-items: center; gap: 5px; color: #ffffff; flex: 0 1 300px; } .contact-info-icon { line-height: 1; display: flex; align-items: center; justify-content: center; height: 32px; } .contact-info-icon img { display: block; } .contact-info-label { text-align: center; font: normal normal 600 16px/24px Inter, sans-serif; letter-spacing: -0.48px; color: #ffffff; opacity: 1; } .contact-info-value { text-align: center; font: normal normal normal 15px/24px Inter, sans-serif; letter-spacing: -0.45px; color: #ffffff; opacity: 1; } .contact-info-value a { color: #ffffff; text-decoration: none; } .contact-info-value a:hover { opacity: 0.75; } /* Body: map left, form right */ .contact-body { display: grid; grid-template-columns: 691px 1fr; gap: 48px; padding: 48px 0; align-items: start; } .contact-map { width: 691px; height: 477px; border-radius: 15px; overflow: hidden; mix-blend-mode: luminosity; opacity: 1; } .contact-map iframe { width: 100%; height: 100%; border: 0; display: block; border-radius: 15px; filter: grayscale(100%); } /* Form */ .contact-form-wrapper { display: flex; flex-direction: column; gap: 20px; } .contact-form-title { text-align: left; font: normal normal 600 18px/32px Inter, sans-serif; letter-spacing: 0px; color: #000000; opacity: 1; margin: 0 0 4px; } .contact-form { display: flex; flex-direction: column; gap: 14px; } .contact-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .contact-form-field input.form-control, .contact-form-field textarea.form-control { background: #F8F8F8 0% 0% no-repeat padding-box; border: 1px solid rgba(172, 172, 172, 0.49); border-radius: 9px; opacity: 1; padding: 12px 16px; width: 100%; outline: none; font-family: Inter, sans-serif; transition: border-color 0.2s; } .contact-form-field input.form-control::placeholder, .contact-form-field textarea.form-control::placeholder { text-align: left; font: normal normal normal 14px/17px Inter, sans-serif; letter-spacing: 0px; color: #8A8A8A; opacity: 1; } .contact-form-field input.form-control:focus, .contact-form-field textarea.form-control:focus { border-color: #000000; } .contact-form-field textarea.form-control { resize: vertical; min-height: 160px; } .btn-contact-submit { border: 1px solid #000000; background: #FFFFFF 0% 0% no-repeat padding-box; border-radius: 9px; opacity: 1; color: #000000; padding: 10px 32px; font-family: Inter, sans-serif; font-weight: 700; font-size: 14px; cursor: pointer; transition: background 0.2s, color 0.2s, backdrop-filter 0.2s; } .btn-contact-submit:hover { background: #000000 0% 0% no-repeat padding-box; border: 1px solid #000000; border-radius: 9px; color: #ffffff; backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); } /* Responsive */ @media (max-width: 991px) { .contact-info-bar { grid-template-columns: repeat(2, 1fr); } .contact-body { grid-template-columns: 1fr; } .contact-map { width: 100%; height: 300px; } } @media (max-width: 575px) { .contact-info-bar { grid-template-columns: 1fr; } .contact-form-row { grid-template-columns: 1fr; } } /* ── Campaign Manufacturer ── */ .campaign-manufacturer { width: 100%; } /* Shared inner container */ .cm-section__inner { margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; } .cm-section__inner--wide { max-width: 80rem; } /* ── Fixed content section ── */ .cm-fixed { width: 100%; background: #000000; border-radius: 0 0 25px 25px; color: #fff; padding: 80px 0 0; overflow: visible; } .cm-fixed__title { text-align: center; font-family: 'Inter', sans-serif; font-weight: bold; font-size: 42px; line-height: 52px; letter-spacing: -1.26px; color: #FFFFFF; opacity: 1; margin-bottom: 1.5rem; } .cm-fixed__text p { margin: 0; } .cm-fixed__text { max-width: 48rem; margin: 0 auto 3rem; text-align: center; font-family: 'Inter', sans-serif; font-weight: normal; font-size: 20px; line-height: 36px; letter-spacing: -0.6px; color: #FFFFFF; opacity: 1; } .cm-fixed__grid { display: flex; flex-direction: row; gap: 1.5rem; margin-top: 48px; margin-bottom: -180px; position: relative; z-index: 2; } .cm-fixed__tile { flex: 1 1 0; min-width: 0; aspect-ratio: 1 / 1; border: 1px solid #707070; border-radius: 15px; overflow: hidden; } .cm-fixed__tile img, .cm-fixed__tile video, .cm-fixed__tile iframe { width: 100%; height: 100%; object-fit: cover; display: block; } /* ── Highlights ── */ .cm-highlights { width: 100%; background: #fff; padding: 6rem 0; } /* Compensate for the hanging tiles of cm-fixed */ .cm-fixed + .cm-highlights, .cm-fixed + .cm-slideshow, .cm-fixed + .cm-banner2, .cm-fixed + .cm-content { padding-top: calc(6rem + 180px); } .cm-highlights__title { text-align: center; font-family: 'Inter', sans-serif; font-weight: bold; font-size: 42px; line-height: 52px; letter-spacing: -1.26px; color: #000000; opacity: 1; margin-bottom: 3rem; } .cm-highlights__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; } .cm-highlight__card { background: #fff; border: 1px solid #707070; border-radius: 15px; padding: 3rem 2rem; text-align: center; } .cm-highlight__image { display: flex; align-items: center; justify-content: center; width: 90px; height: 90px; margin-left: auto; margin-right: auto; margin-bottom: 1.5rem; } .cm-highlight__image img { width: 90px; height: 90px; object-fit: contain; padding: 12px; } .cm-highlight__name { text-align: center; font-family: 'Inter', sans-serif; font-weight: bold; font-size: 25px; line-height: 29px; letter-spacing: -0.75px; color: #000000; opacity: 1; margin-bottom: .75rem; } .cm-highlight__text { font-size: .875rem; color: #4b5563; line-height: 1.625; margin: 0; } /* ── Slideshow ── */ .cm-slideshow { width: 100%; background: #000000; border-radius: 15px; opacity: 1; overflow: hidden; } .cm-slideshow .slideshow4-header__text { display: none; } .cm-slideshow__title { font-family: 'Inter', sans-serif; font-weight: bold; font-size: 33px; line-height: 29px; letter-spacing: -0.99px; color: #FFFFFF; padding: 2rem 2rem 0; margin: 0; } /* ── Banner2 ── */ .cm-banner2 { width: 100%; margin-top: 4rem; margin-bottom: 4rem; padding-left: 1.5rem; padding-right: 1.5rem; } .cm-banner2__item { display: block; position: relative; width: 100%; overflow: hidden; border-radius: 15px; } .cm-banner2__item img, .cm-banner2__item video, .cm-banner2__item iframe { width: 100%; height: auto; object-fit: cover; display: block; } .cm-banner2__item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0) 100%); pointer-events: none; } .cm-banner2__overlay { position: absolute; bottom: 0; left: 0; padding: 2.5rem 3rem; max-width: 600px; z-index: 1; } .cm-banner2__title { text-align: left; font-family: 'Inter', sans-serif; font-weight: bold; font-size: 42px; line-height: 52px; letter-spacing: -1.26px; color: #FFFFFF; opacity: 1; margin-bottom: .75rem; } .cm-banner2__text { text-align: left; font-family: 'Inter', sans-serif; font-weight: normal; font-size: 18px; line-height: 36px; letter-spacing: -0.54px; color: #FFFFFF; opacity: 1; } .cm-banner2__text p { margin: 0; } /* ── Content sections ── */ .cm-content { width: 100%; background: #fff; } .cm-content__row { padding: 6rem 1.5rem; } .cm-content__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: center; } .cm-content__row:nth-child(even) .cm-content__text { order: 2; } .cm-content__row:nth-child(even) .cm-content__media { order: 1; } .cm-content__text { max-width: 594px; display: flex; flex-direction: column; justify-content: center; } /* Text on left → align to start */ .cm-content__row:nth-child(odd) .cm-content__text { margin-right: auto; } /* Text on right (even rows, order swapped) → align to end */ .cm-content__row:nth-child(even) .cm-content__text { margin-left: auto; } .cm-content__title { text-align: left; font-family: 'Inter', sans-serif; font-weight: bold; font-size: 42px; line-height: 52px; letter-spacing: -1.26px; color: #000000; opacity: 1; margin-bottom: 1.5rem; } .cm-content__body { text-align: left; font-family: 'Inter', sans-serif; font-weight: normal; font-size: 18px; line-height: 36px; letter-spacing: -0.54px; color: #5C5C5C; opacity: 1; } .cm-content__media-link { display: block; overflow: hidden; border-radius: 10px; } .cm-content__media-link img, .cm-content__media-link video, .cm-content__media-link iframe { width: 100%; height: auto; object-fit: cover; display: block; } /* ── Specs ── */ .cm-specs { width: 100%; background: #fff; padding: 6rem 0; } .cm-specs__title { text-align: center; font-family: 'Inter', sans-serif; font-weight: bold; font-size: 42px; line-height: 52px; letter-spacing: -1.26px; color: #000000; opacity: 1; margin-bottom: 4rem; max-width: 48rem; margin-left: auto; margin-right: auto; } .cm-specs__grid { display: grid; gap: 3rem 4rem; } .cm-spec__col { text-align: center; } .cm-spec__title { text-align: center; font-family: 'Inter', sans-serif; font-weight: bold; font-size: 25px; line-height: 36px; letter-spacing: -0.75px; color: #000000; opacity: 1; margin-bottom: 1rem; } .cm-spec__text { text-align: center; font-family: 'Inter', sans-serif; font-weight: normal; font-size: 18px; line-height: 36px; letter-spacing: -0.54px; color: #5C5C5C; opacity: 1; max-width: 380px; margin-left: auto; margin-right: auto; } /* ── Promo ── */ .cm-promo { width: 100%; padding: 1.5rem; } .cm-section__inner.cm-promo__inner { background: #000000; border-radius: 15px; padding: 2rem 2rem 0; height: 370px; overflow: visible; display: flex; flex-direction: column; } .cm-promo__inner .cm-promo__list { margin-top: auto; } .cm-promo__title { text-align: center; font-family: 'Inter', sans-serif; font-weight: bold; font-size: 42px; line-height: 105px; letter-spacing: -1.26px; color: #FFFFFF; opacity: 1; margin-bottom: 1rem; } .cm-promo__list { display: flex; flex-direction: column; gap: 1.5rem; } .cm-promo__item { display: block; overflow: hidden; border-radius: 15px; border: 1px solid #707070; margin: 0 auto; } .cm-promo__item img, .cm-promo__item video, .cm-promo__item iframe { display: block; width: auto; max-width: 100%; height: auto; } /* ── Best Sellers ── */ .cm-bestsellers { width: 100%; background: #fff; padding: 6rem 0; } .cm-promo + .cm-bestsellers { padding-top: calc(2rem + 480px); } .cm-bestsellers__title { font-family: 'Inter', sans-serif; font-weight: bold; font-size: 42px; line-height: 105px; letter-spacing: -1.26px; color: #000000; opacity: 1; text-align: center; margin-bottom: 1rem; } .cm-bestsellers__grid { display: grid; gap: 1.5rem; } .cm-bestseller__card { display: block; position: relative; overflow: hidden; border-radius: 10px; } .cm-bestseller__card img, .cm-bestseller__card video, .cm-bestseller__card iframe { width: 100%; height: 100%; object-fit: cover; display: block; } /* Campaign responsive */ @media (max-width: 1023px) { .cm-content__grid { grid-template-columns: 1fr; } .cm-content__row:nth-child(even) .cm-content__text, .cm-content__row:nth-child(even) .cm-content__media { order: unset; } .cm-highlights__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .cm-fixed, .cm-promo { padding: 3rem 0; } .cm-highlights, .cm-specs, .cm-bestsellers, .cm-content__row { padding: 4rem 0; } .cm-fixed__grid, .cm-bestsellers__grid { grid-template-columns: 1fr !important; } .cm-highlights__grid { grid-template-columns: 1fr; } .cm-specs__grid { grid-template-columns: 1fr !important; } .cm-fixed__title, .cm-highlights__title, .cm-specs__title, .cm-promo__title, .cm-bestsellers__title { font-size: 1.25rem; } .cm-content__title { font-size: 1.25rem; } } .cm-hero { position: relative; width: 100%; height: 776px; background: #000; color: #fff; overflow: hidden; } .cm-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .6; } .cm-hero__bg iframe, .cm-hero__bg video { width: 100%; height: 100%; object-fit: cover; } .cm-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.15) 100%); z-index: 1; } .cm-hero__inner { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 1.5rem; height: 100%; } .cm-hero__title { font-size: 1.875rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 1.5rem; } .cm-hero__subtitle { max-width: 48rem; text-align: center; font-family: 'Inter', sans-serif; font-weight: bold; font-size: 60px; line-height: 73px; letter-spacing: -1.8px; color: #FFFFFF; opacity: 1; margin-bottom: 2.5rem; } .cm-hero__cta { display: inline-block; padding: .75rem 2.5rem; background: rgba(255,255,255,0.15); border: 1px solid #DEDEDE; border-radius: 9px; backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); color: #FFFFFF; font-size: .875rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; text-decoration: none; transition: color .2s; } .cm-hero__scroll { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-top: 1.5rem; background: rgba(255,255,255,0.15); border: 1px solid #DEDEDE; border-radius: 50%; backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); color: #FFFFFF; font-size: 1.25rem; text-decoration: none; transition: background .2s, color .2s; } .cm-hero__scroll:hover { background: #FFFFFF; color: #000000; } .cm-hero__cta:hover { background: #FFFFFF; border: 1px solid #DEDEDE; border-radius: 9px; opacity: 1; backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); color: #000000; } @media (min-width: 768px) { .cm-hero__title { font-size: 2.25rem; } .cm-hero__subtitle { font-size: 1.875rem; } } @media (min-width: 1024px) { .cm-hero__title { font-size: 3rem; } .cm-hero__subtitle { font-size: 2.25rem; } } /* ── Header search responsive ── */ /* 1024–1199px: icon-only search, tighter nav */ @media (min-width: 1024px) and (max-width: 1199px) { .header-search-inline { width: 40px; padding: 0 10px; } .header-search-btn .header-search-text, .header-search-btn .header-search-media-icons { display: none; } .header-nav .megamenu-nav .nav-link { padding: 0 9px; font-size: 13px; } .header-nav .megamenu-nav .nav-link::after { left: 9px; right: 9px; } .header-utilities { padding-left: 8px; } } /* 1200–1349px: compact search, hide media icons, tighter nav */ @media (min-width: 1200px) and (max-width: 1349px) { .header-search-inline { width: 160px; } .header-search-btn .header-search-media-icons { display: none; } .header-nav .megamenu-nav .nav-link { padding: 0 10px; font-size: 13px; } .header-nav .megamenu-nav .nav-link::after { left: 10px; right: 10px; } } /* 1350–1499px: slightly reduced search, hide media icons */ @media (min-width: 1350px) and (max-width: 1499px) { .header-search-inline { width: 220px; } .header-search-btn .header-search-media-icons { display: none; } .header-nav .megamenu-nav .nav-link { padding: 0 12px; font-size: 13.5px; } .header-nav .megamenu-nav .nav-link::after { left: 12px; right: 12px; } } /* 1500–1599px: slightly reduced search */ @media (min-width: 1500px) and (max-width: 1599px) { .header-search-inline { width: 280px; } .header-search-btn .header-search-media-icons { display: none; } } .product-layout .product-block .product-block-caption { padding-left: 8px; padding-right: 8px; padding-top: 8px; } /* ============================================================ HEADER - responsive enhancements (preserve existing visuals) ---------------------------------------------------------------- This block adds responsive behaviour, touch-friendly tap targets, and a CSS-driven scroll lock to replace the previous JS that intercepted wheel/touchmove globally. Visual identity (colours, fonts, sizing on desktop) is untouched - these rules either apply only on mobile (<992px) or are non-visual (overflow lock). ============================================================ */ /* ── Megamenu scroll lock ──────────────────────────────────── When a megamenu panel is open we want the page underneath to stop scrolling. The previous implementation listened for `wheel` / `touchmove` globally and called preventDefault, which is intrusive (breaks momentum, fights other listeners, blocks pinch-zoom on touch). A plain CSS overflow:hidden on body is the standard, non-intrusive approach. */ body.megamenu-open, body.mmenu-open { overflow: hidden; } /* No `padding-right` compensation here - `html { scrollbar-gutter: stable }` above already reserves the scrollbar space permanently, so toggling `overflow: hidden` on doesn't remove any scrollbar and no compensation is needed. Adding `padding-right` here previously was shifting content left ~15px on hover, making menu items appear to "jump" / shrink. */ /* ── Mobile main header (< lg) ───────────────────────────── */ .m_header-main { background: #FFFFFF; padding: 8px 0; } .m_header-main .header-main-wrapper { align-items: center; flex-wrap: nowrap; gap: 8px; } /* Burger button - ≥44px tap target, three bars styled. */ .btn-m_trigger { width: 44px; height: 44px; padding: 0; background: transparent; border: 0; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; } .btn-m_trigger span { display: block; width: 22px; height: 2px; background: #181E28; border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; } .btn-m_trigger:hover span, .btn-m_trigger:focus-visible span { background: #000000; } .btn-m_trigger:focus-visible { outline: 2px solid rgba(24, 30, 40, 0.2); outline-offset: 2px; border-radius: 4px; } /* Three bars morph into an X when the offcanvas is open. Class is toggled from JS in header.twig (`show.bs.offcanvas` / `hidden.bs.offcanvas`). */ .btn-m_trigger.is-active span { transform-origin: center; } .btn-m_trigger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .btn-m_trigger.is-active span:nth-child(2) { opacity: 0; transform: scaleX(0); } .btn-m_trigger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile logo - centred, fluid */ .m_header-logo { display: flex; justify-content: center; align-items: center; } .m_header-logo #logo-m img, .m_header-logo img { max-height: 36px; width: auto; } /* Mobile icons cluster - right-aligned with ≥44px tap targets. */ .m_header-icons { display: flex; align-items: center; gap: 4px; } .m_header-icons > a, .m_header-icons > button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: #181E28; text-decoration: none; position: relative; } /* The icon glyphs are now .h-icon SVG sprites (same as desktop). Each .h-icon-* class declares its own width/height; the row's 44 × 44 hit target centers them via flex. The old font-size rule below targeted FA tags that no longer exist on the mobile bar; kept only as a safety net for any non-converted callers. */ .m_header-icons > a i, .m_header-icons > button i { font-size: 18px; line-height: 1; } .m_header-icons > a:hover, .m_header-icons > a:focus-visible { color: #000000; } /* Cart badge on the mobile cart icon */ .m_header-icons .m_cart-total { position: absolute; top: 4px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; background: #181E28; color: #FFFFFF; border-radius: 8px; font-size: 10px; line-height: 16px; font-weight: 700; text-align: center; pointer-events: none; } .m_header-icons .m_cart-total[data-has-total="0"], .m_header-icons .m_cart-total[data-has-total=""] { display: none; } /* ── Mobile pre-header announcement strip ───────────────── */ .m_header-top { background: #181E28; color: #FFFFFF; padding: 6px 0; font-size: 12px; line-height: 1.4; } .m_header-top a { color: #FFFFFF; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .m_header-top a:hover { text-decoration: underline; } /* ── Offcanvas (burger) polish ───────────────────────────── */ /* ============================================================ MOBILE BURGER MENU - drill-down slider (overrides earlier rules) ---------------------------------------------------------------- The earlier accordion CSS for #mmenu .megamenu-* still applies to the hidden data source (.mmenu-source) and effectively does nothing visible - JS clones the data into purpose-built rows inside .mmenu-slider, which has its own minimal layout below. ============================================================ */ /* ── Offcanvas frame - full viewport on mobile ─────────────── */ #mmenu.offcanvas.mmenu-offcanvas { max-width: 100vw; width: 100vw; height: 100vh; background: #FFFFFF; } @media (min-width: 576px) { #mmenu.offcanvas.mmenu-offcanvas { max-width: 420px; width: 92vw; } } /* ── Header bar - dark, with back + title + close ──────────── */ #mmenu .mmenu-header { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 56px; /* room for the absolute back/close buttons */ min-height: 56px; background: #181E28; border-bottom: 0; color: #FFFFFF; } #mmenu .mmenu-title { font-family: Inter, sans-serif; font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -0.48px; color: #FFFFFF; margin: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; } #mmenu .mmenu-back, #mmenu .mmenu-close { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; padding: 0; background: transparent; border: 0; color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 6px; transition: background 0.15s ease; } #mmenu .mmenu-back i, #mmenu .mmenu-close i { font-size: 18px; line-height: 1; } #mmenu .mmenu-back { left: 6px; } #mmenu .mmenu-close { right: 6px; } #mmenu .mmenu-back:hover, #mmenu .mmenu-close:hover, #mmenu .mmenu-back:focus-visible, #mmenu .mmenu-close:focus-visible { background: rgba(255, 255, 255, 0.08); color: #FFFFFF; } #mmenu .mmenu-back[hidden] { display: none; } /* ── Body holds the slider and the hidden data source ─────── */ #mmenu .mmenu-body { padding: 0; background: #FFFFFF; overflow: hidden; position: relative; } /* Hidden source - kept in DOM only as a data graph for JS to walk. */ #mmenu .mmenu-source { display: none !important; } /* ── Slider - viewport that contains stacked levels ────────── */ #mmenu .mmenu-slider { position: relative; width: 100%; height: 100%; overflow: hidden; } #mmenu .mmenu-level { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #FFFFFF; transform: translateX(100%); /* off-screen right by default */ transition: transform 0.32s cubic-bezier(.4, 0, .2, 1); will-change: transform; } #mmenu .mmenu-level.is-root { transform: translateX(0); /* root visible by default */ } #mmenu .mmenu-level.is-active { transform: translateX(0); z-index: 2; } /* Panel "underneath" the active one parallax-slides slightly left */ #mmenu .mmenu-level.is-behind { transform: translateX(-20%); z-index: 1; pointer-events: none; } /* Panel we just popped - slide back off to the right */ #mmenu .mmenu-level.is-leaving { transform: translateX(100%); z-index: 0; pointer-events: none; } /* ── List + rows ─────────────────────────────────────────── */ #mmenu .mmenu-list { list-style: none; margin: 0; /* No top padding - the "Προβολή όλων" row should sit flush against the dark header bar; the bottom keeps breathing room. */ padding: 0 0 24px; } #mmenu .mmenu-row { position: relative; margin: 0; } #mmenu .mmenu-row__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 16px 20px; min-height: 56px; background: transparent; border: 0; text-decoration: none; cursor: pointer; color: #181E28; font-family: Inter, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: -0.45px; text-align: left; } #mmenu .mmenu-row__link:hover, #mmenu .mmenu-row__link:focus-visible { background: #F5F5F5; color: #000000; } #mmenu .mmenu-row__label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; } #mmenu .mmenu-row__chevron, #mmenu .mmenu-row__arrow { flex-shrink: 0; color: #8A8A8A; font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } #mmenu .mmenu-row__link:hover .mmenu-row__chevron, #mmenu .mmenu-row__link:hover .mmenu-row__arrow { color: #181E28; } /* ── Underline accent for rows that have a deeper level ───── */ #mmenu .mmenu-row--has-children::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 2px; background: #181E28; border-radius: 2px; opacity: 0.08; pointer-events: none; } #mmenu .mmenu-row--has-children:hover::after, #mmenu .mmenu-row--has-children:focus-within::after { opacity: 0.25; } /* Plain (leaf) rows get a softer divider so the list still reads as a list without competing with the accented "has-children" line. */ #mmenu .mmenu-row + .mmenu-row:not(.mmenu-row--has-children)::before { content: ""; position: absolute; left: 20px; right: 20px; top: 0; height: 1px; background: #ECECEC; pointer-events: none; } /* ── "View all" row at the top of every drilled level ─────── */ #mmenu .mmenu-row--view-all .mmenu-row__link { background: #F8F8F8; color: #181E28; font-weight: 700; border-bottom: 1px solid #ECECEC; } #mmenu .mmenu-row--view-all .mmenu-row__link:hover { background: #F0F0F0; } #mmenu .mmenu-row--view-all strong { font-weight: 700; text-transform: none; } #mmenu .mmenu-row--view-all .mmenu-row__arrow { color: #181E28; } /* ── Hide the old accordion CSS scoped to the hidden source ─ Earlier rules styled #mmenu .megamenu-* directly. Now they live under .mmenu-source which is `display:none` so visually nothing shows - but we make sure desktop hover overlays inside the source also stay hidden in case CSS specificity wins. */ #mmenu .megamenu-overlay { display: none !important; } /* ── Account panel positioning on tablet-ish widths ─────── */ @media (min-width: 992px) and (max-width: 1199px) { .account-panel { right: 0; } } /* ── Hide desktop hover effects on touch/coarse devices ── On mobile/tablet that flips to the burger layout, the desktop .header-main is `d-none`, so its descendants don't render - nothing to do here. The matchMedia('(hover: hover)') check in the JS keeps the hover handlers from binding on touch. */ /* Mobile sticky positioning - handled by the `#header { position: fixed }` block at the top of this file (inside the `@media (max-width: 991.98px)` rule). Body padding-top is set from JS in header.twig so it adapts to the actual rendered header height (mobile pre-header strip is optional). */ /* ── Search inside mobile icons row ───────────────────── The search partial expects a container; if it renders an inline element, keep it 44×44 tappable. */ .m_header-icons .header-search-wrap, .m_header-icons #search { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } /* Mobile-only search trigger - proxies to the desktop search toggle. Sits beside the cart/wishlist/account icons on mobile, 44px tap target. */ .m-search-trigger { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; background: transparent; border: 0; color: #181E28; cursor: pointer; } .m-search-trigger i { font-size: 20px; line-height: 1; } .m-search-trigger:hover, .m-search-trigger:focus-visible { color: #000000; } .m-search-trigger:focus-visible { outline: 2px solid rgba(24, 30, 40, 0.2); outline-offset: 2px; border-radius: 4px; } /* ============================================================ MOBILE BURGER MENU - accordion drill-down ---------------------------------------------------------------- The same megamenu HTML the desktop renders ends up here inside the offcanvas. Desktop styling lays out a sidebar + multi-column columns + a banner side-by-side - wrong for a narrow offcanvas. These rules restyle the SAME markup into a vertical accordion: top-level rows full-width, tap to expand their panel, sub-items indented, banner / sidebar hidden. All scoped to #mmenu so the desktop hover megamenu is untouched. ============================================================ */ /* Reset desktop hover overlay inside the burger - never wanted. */ #mmenu .megamenu-overlay { display: none !important; } /* ── Top-level nav container ───────────────────────────── */ #mmenu .megamenu-nav-container { width: 100%; padding: 0; background: transparent; } #mmenu .megamenu-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } #mmenu .megamenu-item, #mmenu .nav-item { display: block; position: static; /* override the desktop position:relative dropdown anchor */ width: 100%; border-bottom: 1px solid #EBEBEB; } #mmenu .megamenu-item:last-child, #mmenu .nav-item:last-child { border-bottom: 0; } /* ── Top-level link row ────────────────────────────────── */ #mmenu .nav-link { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 20px; min-height: 52px; font-family: Inter, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.3; letter-spacing: -0.45px; color: #181E28; text-decoration: none; background: transparent; cursor: pointer; } #mmenu .nav-link:hover, #mmenu .nav-link:focus-visible { background: #F7F7F7; color: #000000; } /* Caret rotation when the item is open */ #mmenu .megamenu-caret { flex-shrink: 0; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.2s ease; color: #8A8A8A; } #mmenu .megamenu-caret svg { width: 12px; height: 7px; } #mmenu .megamenu-item.is-open > .nav-link .megamenu-caret { transform: rotate(180deg); color: #181E28; } /* External-link (CASIO Education) - keep its arrow icon */ #mmenu .megamenu-external .nav-link { color: #181E28; } #mmenu .megamenu-external .nav-link svg { flex-shrink: 0; color: #8A8A8A; } /* ── Panel: collapsed by default, expanded on .is-open ── */ #mmenu .megamenu-panel { /* Override desktop fixed/absolute positioning */ position: static !important; width: 100% !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; opacity: 1 !important; visibility: visible !important; /* Collapsed state */ max-height: 0; overflow: hidden; background: #FBFBFB; border: 0; box-shadow: none; transition: max-height 0.35s ease; } #mmenu .megamenu-item.is-open > .megamenu-panel { /* Generous max so any depth fits - measured by inner content */ max-height: 2000px; } #mmenu .megamenu-panel-inner { display: block; padding: 4px 0 12px; } /* ── Hide the desktop-only decorations on mobile ──────── */ #mmenu .megamenu-sidebar, #mmenu .megamenu-banner { display: none; } /* ── Columns: stack vertically ────────────────────────── */ #mmenu .megamenu-columns { display: flex; flex-direction: column; gap: 4px; width: 100%; } #mmenu .megamenu-column { width: 100%; padding: 0; border: 0; } #mmenu .megamenu-column-title { display: block; padding: 12px 28px 6px; font-family: Inter, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.4; letter-spacing: -0.39px; color: #181E28; text-decoration: none; text-transform: uppercase; } #mmenu .megamenu-column-title:hover { color: #000000; } #mmenu .megamenu-column-list { list-style: none; margin: 0; padding: 0; } #mmenu .megamenu-column-list li { margin: 0; } #mmenu .megamenu-column-list a { display: block; padding: 10px 28px 10px 36px; font-family: Inter, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; letter-spacing: -0.42px; color: #4A4F58; text-decoration: none; min-height: 44px; display: flex; align-items: center; } #mmenu .megamenu-column-list a:hover, #mmenu .megamenu-column-list a:focus-visible { background: #F1F1F1; color: #000000; } /* "ΠΡΟΒΟΛΗ ΟΛΩΝ" CTA - small underlined link at the end of each column */ #mmenu .megamenu-column-all { display: inline-block; margin: 6px 28px 12px; font-family: Inter, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.4px; color: #181E28; text-decoration: none; text-transform: uppercase; border-bottom: 1px solid #181E28; padding-bottom: 2px; } #mmenu .megamenu-column-all:hover { color: #000000; border-bottom-color: #000000; } /* ── Smooth scrolling for tall menus ─────────────────── */ #mmenu .offcanvas-body { overflow-y: auto; -webkit-overflow-scrolling: touch; } /* ── Visual divider between column titles ────────────── */ #mmenu .megamenu-column + .megamenu-column .megamenu-column-title { border-top: 1px solid #ECECEC; margin-top: 4px; padding-top: 14px; } /* ============================================================ MOBILE SEARCH - bigger icon + standalone full-viewport overlay ============================================================ */ /* Bump the search glyph slightly on mobile so it visually balances the 20×20 cart / 21×19 wishlist / 18×18 user icons. The default .h-icon-search is 14×14 which reads small in a 44 × 44 tap target. */ .m_header-icons .h-icon-search, .m-search-trigger .h-icon-search { width: 22px; height: 22px; } /* The mobile search trigger button itself - keep the 44 hit target from .m_header-icons > button. Adjust spacing if anything. */ .m-search-trigger { color: #181E28; } /* ── The overlay itself ──────────────────────────────────── */ .m-search-overlay { position: fixed; inset: 0; z-index: 1080; /* above the offcanvas backdrop (1045) */ background: #FFFFFF; display: flex; flex-direction: column; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity 0.22s ease, transform 0.22s cubic-bezier(.4,0,.2,1); } .m-search-overlay.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; } .m-search-overlay[hidden] { display: none; /* fully removed from layout when closed */ } /* Lock scroll while the overlay is open */ body.m-search-open { overflow: hidden; } /* ── Top bar (back + input + clear) ────────────────────── */ .m-search-overlay__bar { display: flex; align-items: center; gap: 4px; padding: 10px 8px; border-bottom: 1px solid #ECECEC; background: #FFFFFF; } .m-search-overlay__back, .m-search-overlay__clear { width: 44px; height: 44px; flex-shrink: 0; background: transparent; border: 0; color: #181E28; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 6px; transition: background 0.15s ease; } .m-search-overlay__back i, .m-search-overlay__clear i { font-size: 20px; line-height: 1; } .m-search-overlay__back:hover, .m-search-overlay__back:focus-visible, .m-search-overlay__clear:hover, .m-search-overlay__clear:focus-visible { background: #F5F5F5; } .m-search-overlay__back:focus-visible, .m-search-overlay__clear:focus-visible { outline: 2px solid rgba(24, 30, 40, 0.2); outline-offset: 1px; } .m-search-overlay__clear[hidden] { display: none; } /* The search input itself - flush, no chrome */ .m-search-overlay__input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 12px; background: transparent; border: 0; border-radius: 0; font-family: Inter, sans-serif; font-size: 16px; /* ≥16px prevents iOS auto-zoom on focus */ font-weight: 500; letter-spacing: -0.48px; color: #181E28; outline: none; } .m-search-overlay__input::placeholder { color: #8A8A8A; font-weight: 400; } /* Hide native search clear (Chrome / Edge) so our custom × handles it */ .m-search-overlay__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } /* ── Results body ─────────────────────────────────────── */ .m-search-overlay__body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #FFFFFF; } .m-search-overlay .live-search { padding: 8px 0 32px; } .m-search-overlay .live-search.loading-results { opacity: 0.5; pointer-events: none; } /* (Removed) - the fallback `.live-search h4 / ul / a / img` rules used to style raw livesearch markup before JS post-processing was added. The `color: #181E28` on `.live-search a` was actively making the `.ms-show-all` button text invisible (dark text on dark background) because of specificity. Everything inside the mobile overlay is now rendered as purpose-built `.ms-*` markup, so those rules are dead. */ /* ── Accessibility helper ────────────────────────────── */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================ MOBILE SEARCH OVERLAY - results rendered by JS post-processing ---------------------------------------------------------------- The previous attempt tried to restyle the desktop livesearch layout in place - too many competing rules and the cards looked broken. Now the JS post-processes the AJAX response into simple .ms-* rows (one tap-target per row, image + brand + name + price). These CSS rules style ONLY the minimal mobile markup, isolated from the desktop product-card cascade. ============================================================ */ /* Override the bare-img cap that earlier rules set inside .live-search */ .m-search-overlay .live-search .ms-result__thumb img { max-width: 100%; max-height: 100%; margin: 0; border-radius: 4px; } /* ── Section wrappers ────────────────────────────────────── */ .m-search-overlay .ms-section { padding: 4px 0 12px; border-bottom: 1px solid #F2F2F2; } .m-search-overlay .ms-section:last-child { border-bottom: 0; } .m-search-overlay .ms-section__title { margin: 0; padding: 16px 20px 8px; font-family: Inter, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: #8A8A8A; } .m-search-overlay .ms-section--products .ms-result + .ms-result { border-top: 1px solid #F2F2F2; } /* ── Product result row ─────────────────────────────────── */ .m-search-overlay .ms-result { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 16px; text-decoration: none; color: #181E28; background: transparent; min-height: 80px; transition: background 0.15s ease; } .m-search-overlay .ms-result:hover, .m-search-overlay .ms-result:focus-visible { background: #F8F8F8; } .m-search-overlay .ms-result__thumb { flex-shrink: 0; width: 64px; height: 64px; background: #FBFBFB; border-radius: 6px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; } .m-search-overlay .ms-result__thumb img { width: 100%; height: 100%; object-fit: contain; } .m-search-overlay .ms-result__thumb--empty { background: #F0F0F0; } .m-search-overlay .ms-result__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .m-search-overlay .ms-result__brand { font-family: Inter, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; color: #8A8A8A; } .m-search-overlay .ms-result__name { font-family: Inter, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: -0.42px; color: #181E28; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } .m-search-overlay .ms-result__price { font-family: Inter, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: -0.42px; color: #000000; margin-top: 2px; } .m-search-overlay .ms-result__chevron { flex-shrink: 0; color: #C0C0C0; font-size: 12px; } .m-search-overlay .ms-result:hover .ms-result__chevron, .m-search-overlay .ms-result:focus-visible .ms-result__chevron { color: #181E28; } /* ── "Show all" CTA ─────────────────────────────────────── */ .m-search-overlay .ms-show-all { display: flex; align-items: center; justify-content: center; margin: 14px 16px 20px; padding: 14px 16px; background: #181E28; border-radius: 7px; color: #FFFFFF; font-family: Inter, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; text-decoration: none; transition: background 0.15s ease; } .m-search-overlay .ms-show-all:hover, .m-search-overlay .ms-show-all:focus-visible { background: #000000; } /* ── Chip list (popular / brands / categories) ─────────── */ .m-search-overlay .ms-chiplist { list-style: none; margin: 0; padding: 4px 16px 8px; display: flex; flex-wrap: wrap; gap: 8px; } .m-search-overlay .ms-chiplist li { margin: 0; } .m-search-overlay .ms-chiplist a { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; background: #F5F5F5; border-radius: 18px; color: #181E28; font-family: Inter, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: -0.39px; text-decoration: none; transition: background 0.15s ease, color 0.15s ease; } .m-search-overlay .ms-chiplist a:hover, .m-search-overlay .ms-chiplist a:focus-visible { background: #181E28; color: #FFFFFF; } /* ── Empty / "no results" state ─────────────────────────── */ .m-search-overlay .ms-empty { text-align: center; padding: 60px 20px; color: #8A8A8A; } .m-search-overlay .ms-empty__icon { font-size: 32px; color: #C0C0C0; margin-bottom: 14px; display: block; } .m-search-overlay .ms-empty__text { font-family: Inter, sans-serif; font-size: 14px; font-weight: 500; color: #181E28; } /* ============================================================ MOBILE OFFCANVAS - bottom utility footer (wishlist / compare / language) ============================================================ */ /* Offcanvas becomes a flex column so header / body / footer stack cleanly with the body absorbing remaining height. */ #mmenu.offcanvas.mmenu-offcanvas { display: flex; flex-direction: column; } #mmenu .mmenu-header { flex: 0 0 auto; } #mmenu .mmenu-body { flex: 1 1 auto; min-height: 0; } /* min-height:0 lets it shrink so the slider's overflow scrolling works */ #mmenu .mmenu-footer { flex: 0 0 auto; } /* ── Utility bar container ────────────────────────────── Previously the offcanvas footer; now sits between header and menu. Border lives at the bottom so the divider separates the utilities from the menu list below. */ #mmenu .mmenu-footer { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #F8F8F8; border-bottom: 1px solid #ECECEC; } /* ── Wishlist + Compare icon-buttons ──────────────────── */ #mmenu .mmenu-footer__icon { position: relative; flex-shrink: 0; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: #181E28; background: #FFFFFF; border: 1px solid #E5E5E5; border-radius: 8px; text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease; } #mmenu .mmenu-footer__icon:hover, #mmenu .mmenu-footer__icon:focus-visible { border-color: #181E28; background: #FFFFFF; } #mmenu .mmenu-footer__icon:focus-visible { outline: 2px solid rgba(24, 30, 40, 0.2); outline-offset: 2px; } /* Small dark badge for wishlist/compare counts, top-right corner */ #mmenu .mmenu-footer__badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; background: #181E28; color: #FFFFFF; border-radius: 9px; font-family: Inter, sans-serif; font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; pointer-events: none; } /* ── Language pills - one button per active language ─── */ #mmenu .mmenu-footer__lang { margin: 0 0 0 auto; /* push to the right */ display: inline-flex; align-items: center; gap: 4px; padding: 0; background: transparent; border: 0; } #mmenu .mmenu-footer__lang-btn { min-width: 40px; height: 32px; padding: 0 10px; background: #FFFFFF; border: 1px solid #E5E5E5; border-radius: 16px; color: #181E28; font-family: Inter, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } #mmenu .mmenu-footer__lang-btn:hover, #mmenu .mmenu-footer__lang-btn:focus-visible { border-color: #181E28; } #mmenu .mmenu-footer__lang-btn.is-active { background: #181E28; border-color: #181E28; color: #FFFFFF; } /* ============================================================ OFFCANVAS FOOTER - auto-hide count badges at zero ============================================================ */ #mmenu .mmenu-footer__badge[data-has-total="0"], #mmenu .mmenu-footer__badge[data-has-total=""], #mmenu .mmenu-footer__badge:empty { display: none; } /* ============================================================ FOOTER - RESPONSIVE ============================================================ The footer in stylesheet.css is desktop-only (fixed 420px logo column + four 140px nav columns + 5-item benefits grid in one flex row). All breakpoints below adapt that layout downward. ============================================================ */ /* Square the rounded top corners on mobile - the 25px radius looks awkward when the footer hits the edge of a phone screen. */ @media (max-width: 767.98px) { footer.footer-new { border-radius: 12px 12px 0 0; } } /* ── Benefits bar ─────────────────────────────────────────── */ /* Tablet: 3 + 2 grid (3 on top row, 2 centered on bottom). */ @media (max-width: 991.98px) { .footer-benefits { padding-top: 2rem; } .footer-benefits__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem 1rem; padding-bottom: 1.5rem; } .footer-benefits__item { grid-template-rows: 45px auto; } /* Center the trailing 2 items on the bottom row of the 3-col grid */ .footer-benefits__item:nth-child(4) { grid-column: 1 / span 2; justify-self: end; } .footer-benefits__item:nth-child(5) { grid-column: 3 / span 1; justify-self: start; } } /* Phone: 2-column grid, smaller text, tighter icons. */ @media (max-width: 575.98px) { .footer-benefits { padding-top: 1.5rem; } .footer-benefits__grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem 0.75rem; padding-bottom: 1.25rem; } /* Reset the tablet placement rules so all items flow normally */ .footer-benefits__item:nth-child(4), .footer-benefits__item:nth-child(5) { grid-column: auto; justify-self: stretch; } /* Last item alone - center it on its own row */ .footer-benefits__item:nth-child(5) { grid-column: 1 / -1; justify-self: center; max-width: 220px; } .footer-benefits__item { grid-template-rows: 40px auto; } .footer-benefits__text { font-size: 12px; line-height: 1.4; } /* Icons sized down to fit */ .footer-benefits__item:nth-child(1) .footer-benefits__icon { width: 32px; height: 40px; } .footer-benefits__item:nth-child(2) .footer-benefits__icon { width: 40px; height: 28px; } .footer-benefits__item:nth-child(3) .footer-benefits__icon { width: 58px; height: 13px; } .footer-benefits__item:nth-child(4) .footer-benefits__icon { width: 33px; height: 26px; } .footer-benefits__item:nth-child(5) .footer-benefits__icon { width: 48px; height: 27px; } } /* ── Main footer (logo+info + nav columns) ────────────────── */ /* Tablet: 2-column layout - left full-width on top, nav 2x2 below */ @media (max-width: 1199.98px) { .footer-main { padding: 2.5rem 0; } .footer-main__inner { gap: 2.5rem; } .footer-main__left { flex: 0 0 320px; } .footer-main__right { gap: 2rem; } .footer-nav__col { min-width: 130px; } } @media (max-width: 991.98px) { .footer-main__inner { flex-direction: column; gap: 2.5rem; } .footer-main__left, .footer-main__right { flex: 1 1 auto; width: 100%; } .footer-main__right { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; justify-content: stretch; } .footer-nav__col { min-width: 0; } /* Store info compacts: smaller gap and the 175px first column shrinks */ .footer-store__contacts, .footer-store__hours { grid-template-columns: minmax(0, auto) 1fr; column-gap: 1rem; } } /* Phone: nav columns stack to 1, store info stacks too */ @media (max-width: 575.98px) { .footer-main { padding: 2rem 0; } .footer-main__logo { margin-bottom: 1.5rem; } .footer-main__logo img { width: 180px; height: auto; } .footer-store__contacts, .footer-store__hours { grid-template-columns: 1fr; row-gap: 1rem; } .footer-store__contact-row { white-space: normal; } .footer-store__hours-text { line-height: 1.6; } .footer-main__right { grid-template-columns: 1fr; gap: 1.75rem; } .footer-nav__divider, .footer-store__divider { width: 40px; } } /* ── Social bar ───────────────────────────────────────────── */ @media (max-width: 991.98px) { .footer-social__inner { gap: 1.5rem; } .footer-social__casio-edu { margin-left: 0 !important; /* drop the auto-push to right */ flex-basis: 100%; order: 99; /* sits at the bottom of the wrap */ } .footer-social__casio-edu svg { width: 100%; max-width: 240px; height: auto; } } @media (max-width: 575.98px) { .footer-social { padding: 1rem 0; } .footer-social__inner { gap: 1.25rem; } .footer-social__group { flex-basis: 100%; } .footer-social__group-links { flex-wrap: wrap; gap: 0.5rem 1rem; } .footer-social__link { font-size: 13px; line-height: 24px; } } /* ── Payment bar (wide cards SVG + language) ──────────────── */ /* The cards row is rendered as a single inline SVG ~687×25px wide. On tablet+ we just allow horizontal scroll inside the container; on phone the lang switcher stacks above the scroller. */ @media (max-width: 1199.98px) { .footer-payment__cards { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; /* Hide scrollbar - payment icons don't need a visible scrollbar */ scrollbar-width: none; } .footer-payment__cards::-webkit-scrollbar { display: none; } .footer-payment__cards svg { flex-shrink: 0; } } @media (max-width: 767.98px) { .footer-payment__inner { flex-direction: column; align-items: flex-start; gap: 0.75rem; } .footer-payment__cards { width: 100%; } } /* ── Copyright bar ────────────────────────────────────────── */ @media (max-width: 991.98px) { .footer-copyright__inner { gap: 0.75rem 1.25rem; justify-content: center; text-align: center; } .footer-copyright__links { flex-wrap: wrap; justify-content: center; } } @media (max-width: 575.98px) { .footer-copyright { padding: 1.25rem 0; } .footer-copyright__inner { flex-direction: column; gap: 0.5rem; font-size: 11px; letter-spacing: 1.3px; } .footer-copyright__links a, .footer-copyright__dev { font-size: 11px; letter-spacing: 1.3px; } } /* ============================================================ ACCOUNT FOOTER - RESPONSIVE ============================================================ The .account_footer (login / register / forgotten pages) has a fixed 66px height + 40px side padding + three nowrap blocks. On phones the three blocks won't fit on one row, so let them wrap and reflow vertically. */ @media (max-width: 767.98px) { .account_footer { height: auto; padding: 16px 0; } .account-footer-inner { padding: 0 20px; flex-wrap: wrap; justify-content: center; gap: 8px 16px; text-align: center; } .account-footer-links { flex-wrap: wrap; justify-content: center; gap: 6px 12px; } .account-footer-copy, .account-footer-dev, .account-footer-link { white-space: normal; } } @media (max-width: 480px) { .account-footer-inner { flex-direction: column; gap: 12px; } .account-footer-copy, .account-footer-link, .account-footer-dev { font-size: 11px; letter-spacing: 1.3px; } /* Separators between links don't add much on phones */ .account-footer-sep { display: none; } } /* ============================================================ NEWSLETTER MODULE - RESPONSIVE ============================================================ Desktop has 3 columns (branding | interests | form) inside `.newsletter-inner > .d-flex`. Below 992px we stack to one column. Interests becomes a 2-col grid on phones so the form doesn't run too tall. ============================================================ */ /* Tablet: tighten paddings, slightly smaller heading */ @media (max-width: 1199.98px) { .newsletter-wrapper .newsletter-inner { min-height: 0; padding: 24px; } .newsletter_col { padding: 0 20px; } .newsletter_left .newsletter-heading { font-size: 28px; line-height: 1.15; } } /* Below tablet: stack columns vertically. */ @media (max-width: 991.98px) { /* Override the inline-utility `.d-flex` (display:flex from Bootstrap) only inside this module - keep the parent flex container, just flip the direction. The selector is scoped to .newsletter-inner so we don't touch any other `.d-flex` on the page. */ .newsletter-wrapper .newsletter-inner > .d-flex { flex-direction: column; gap: 1.5rem; } .newsletter_col { flex: 1 1 auto; width: 100%; padding: 0; align-items: stretch; } .newsletter_left { align-items: center; text-align: center; } /* Headings/intros center on mobile */ .newsletter_left .newsletter-heading, .newsletter_left .newsletter-intro { text-align: center; } /* Interests heading + form heading underlines: visible on full width */ .newsletter_interests_heading::after, .newsletter_email_heading::after { width: 40px; } /* Interests: lay out as a 2-column grid so the column doesn't become a long single-file list. */ .newsletter_interests_list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 6px; } .newsletter_interest_item { margin-bottom: 0; } } /* Tablet width sweet spot: container should not push beyond readable line lengths */ @media (max-width: 991.98px) and (min-width: 576px) { .newsletter-wrapper .newsletter-inner > .d-flex { max-width: 560px; margin-left: auto; margin-right: auto; } } /* Phone */ @media (max-width: 767.98px) { .newsletter-wrapper .newsletter-inner { border-radius: 14px; padding: 20px 16px; } .newsletter_left .newsletter_icon_logo img { height: 80px; } .newsletter_left .newsletter_icon_envelope img { width: 110px; } .newsletter_left .newsletter-heading { font-size: 22px; line-height: 1.2; letter-spacing: -0.5px; margin: 10px 0 8px; } .newsletter_left .newsletter-intro { font-size: 13px; line-height: 1.5; } .newsletter_interests_heading, .newsletter_email_heading { font-size: 17px; line-height: 1.4; } .newsletter_interest_item .form-check-label { font-size: 14px; line-height: 1.4; } .newsletter_consents .form-check-label { font-size: 12px; line-height: 1.5; } /* Email pill: stay full-width, with comfortable touch height */ .newsletter_email_wrap .input-group { padding: 4px; } .newsletter_email_wrap .input-group input[type="text"] { font-size: 14px; line-height: 24px; } .newsletter_email_icon { font-size: 17px; line-height: 32px; } .newsletter_button { text-align: center; } .newsletter-submit-btn { width: 100%; padding: 10px 24px; font-size: 13px; letter-spacing: 0.15em; text-align: center; } } /* Small phone */ @media (max-width: 480px) { .newsletter-wrapper .newsletter-inner { padding: 18px 14px; } .newsletter_interests_list { grid-template-columns: 1fr; /* single column when really tight */ } .newsletter_left .newsletter_icon_logo img { height: 64px; } .newsletter_left .newsletter_icon_envelope img { width: 90px; } .newsletter_left .newsletter-heading { font-size: 20px; } } /* ============================================================ CASIO x ELMI STORY - RESPONSIVE ============================================================ Desktop: image left (55%) + content right in a flex row. Tablet: still side-by-side but tighter gap + smaller image. Mobile: stack image on top, content below. ============================================================ */ /* Tablet sweet spot */ @media (max-width: 1199.98px) { .casio-elmi-story { gap: 2rem; margin: 0 0 4rem; } .casio-elmi-story__images { flex: 0 0 50%; } .casio-elmi-story__images img { height: 260px; } .casio-elmi-story__title { font-size: 28px; line-height: 1.2; } } /* Below tablet: stack image on top, content below */ @media (max-width: 991.98px) { .casio-elmi-story { flex-direction: column; align-items: stretch; gap: 1.5rem; margin: 0 0 3rem; } .casio-elmi-story__images { flex: 0 0 auto; } .casio-elmi-story__images img { height: 280px; } .casio-elmi-story__content { flex: 0 0 auto; gap: 0.75rem; } } /* Phone */ @media (max-width: 767.98px) { .casio-elmi-story { margin: 0 0 2.5rem; gap: 1.25rem; } .casio-elmi-story__images { border-radius: 8px; } .casio-elmi-story__images img { height: 220px; } .casio-elmi-story__title { font-size: 22px; line-height: 1.25; letter-spacing: -0.5px; } .casio-elmi-story__text { font-size: 13px; line-height: 1.7; } } /* Small phone */ @media (max-width: 480px) { .casio-elmi-story__images img { height: 180px; } .casio-elmi-story__title { font-size: 20px; } .casio-elmi-story__text { font-size: 13px; line-height: 1.65; } .casio-elmi-story__link { font-size: 11px; letter-spacing: 0.5px; } } /* ============================================================ LATEST BLOGS MODULE (.lb-wrap) - RESPONSIVE ============================================================ Desktop: 320px left column + 3 fixed 437px cards. Total ~1700px so it only fits at very wide viewports. The existing rule in stylesheet.css:9518 fell back to horizontal scroll at ≤1199px, which is poor mobile UX. Replace it with a proper stacking pattern. ============================================================ */ /* Override the stylesheet.css horizontal-scroll fallback */ @media (max-width: 1199.98px) { .lb-wrap { /* Left column above the cards row */ grid-template-columns: 1fr; gap: 24px; padding: 28px; overflow: hidden; /* defeat the previous overflow-x: auto */ } .lb-left { height: auto; padding: 4px 4px 0; gap: 12px; } .lb-left__title { font-size: 34px; line-height: 1.15; } .lb-left__link { margin-top: 0; } /* Cards: 3-column grid that fills the available width. Drop the fixed 437px card width - fluid columns instead. */ .lb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; gap: 16px; align-items: stretch; } .lb-grid .blc-card, .lb-grid .blc-card__inner, .lb-grid .blc-card__img, .lb-grid .blc-card__img--home { width: 100%; } /* Cap card heights so the row stays compact and consistent */ .lb-grid .blc-card, .lb-card--short, .lb-card--short .blc-card__inner, .lb-card--short .blc-card__img, .lb-card--short .blc-card__img--home, .lb-card--tall, .lb-card--tall .blc-card__inner, .lb-card--tall .blc-card__img, .lb-card--tall .blc-card__img--home { height: 360px; } } /* Below tablet: 2-col layout - first two cards on top row, third spans full width below */ @media (max-width: 991.98px) { .lb-wrap { padding: 24px; border-radius: 12px; } .lb-left__title { font-size: 28px; } .lb-left__text { font-size: 14px; line-height: 1.55; } .lb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .lb-grid .blc-card, .lb-card--short, .lb-card--short .blc-card__inner, .lb-card--short .blc-card__img, .lb-card--short .blc-card__img--home, .lb-card--tall, .lb-card--tall .blc-card__inner, .lb-card--tall .blc-card__img, .lb-card--tall .blc-card__img--home { height: 320px; } /* Third card spans the full row */ .lb-grid .blc-card:nth-child(3) { grid-column: 1 / -1; height: 280px; } .lb-grid .blc-card:nth-child(3) .blc-card__inner, .lb-grid .blc-card:nth-child(3) .blc-card__img, .lb-grid .blc-card:nth-child(3) .blc-card__img--home { height: 280px; } } /* Phone: cards stack to 1 column */ @media (max-width: 575.98px) { .lb-wrap { padding: 20px 16px; } .lb-left { padding: 0; } .lb-left__title { font-size: 24px; letter-spacing: -0.6px; } .lb-left__label { font-size: 11px; letter-spacing: 1.2px; line-height: 1.4; } .lb-left__text { font-size: 13px; } .lb-left__link { font-size: 11px; letter-spacing: 0.5px; } .lb-grid { grid-template-columns: 1fr; gap: 12px; } .lb-grid .blc-card, .lb-card--short, .lb-card--short .blc-card__inner, .lb-card--short .blc-card__img, .lb-card--short .blc-card__img--home, .lb-card--tall, .lb-card--tall .blc-card__inner, .lb-card--tall .blc-card__img, .lb-card--tall .blc-card__img--home, .lb-grid .blc-card:nth-child(3), .lb-grid .blc-card:nth-child(3) .blc-card__inner, .lb-grid .blc-card:nth-child(3) .blc-card__img, .lb-grid .blc-card:nth-child(3) .blc-card__img--home { height: 280px; } } /* ============================================================ LIMITED EDITION MODULE - RESPONSIVE ============================================================ Desktop: 75% slider + 25% product carousel, side by side (overrides Bootstrap's col-sm-8 / col-sm-3). Tablet/phone: stack vertically - slider on top, carousel below. ============================================================ */ /* Tablet/below: tighten side padding (was 50px each side) */ @media (max-width: 1199.98px) { .modules-row-wrapper.limited-edition > .container-xxl { padding-left: 24px; padding-right: 24px; } .modules-row-wrapper.limited-edition .modules-row .row { min-height: 0; } } /* Below tablet: stack columns. The desktop 75/25 flex-basis was set with a higher-specificity selector (modules-row-wrapper.limited-edition .col-sm-3.limited-carousel) so we need to match or override it. */ @media (max-width: 991.98px) { .modules-row-wrapper.limited-edition .modules-row .row { flex-direction: column; align-items: stretch; gap: 16px; overflow: visible; } .modules-row-wrapper.limited-edition .limited-slideshow, .modules-row-wrapper.limited-edition .col-sm-3.limited-carousel { flex: 0 0 100%; max-width: 100%; width: 100%; } /* Slider keeps its aspect-ratio so the image isn't squished - drop the max-height cap on narrow viewports. */ .limited-slider { max-height: none; aspect-ratio: 16 / 9; border-radius: 10px; } /* The carousel side has a nested .container-xxl that adds its own padding - neutralize it so the product cards fill the column. */ .modules-row-wrapper.limited-edition .col-sm-3.limited-carousel > .container-xxl { padding: 0; max-width: 100%; } } /* Phone polish */ @media (max-width: 767.98px) { .modules-row-wrapper.limited-edition > .container-xxl { padding-left: 16px; padding-right: 16px; } /* Bump the slider nav buttons toward touch-friendly 44px */ .limited-slider__btn { width: 40px; height: 40px; } .limited-slider__nav { bottom: 0.75rem; right: 0.75rem; gap: 0.4rem; } } /* Small phone */ @media (max-width: 480px) { .limited-slider { aspect-ratio: 4 / 3; /* taller frame so the subject reads better */ } } /* ============================================================ HERO SECTION - RESPONSIVE ============================================================ Desktop: 66.6% left + 33.3% right (right has 2 stacked slides). Below tablet: stack vertically - left, then right. Phone: all three slides full width, one after another. Notes: - The existing rules in stylesheet.css set `flex: 0 0 66.67%` on panels which becomes a HEIGHT-% in column flex direction; that's why we set explicit `width` AND `height` here rather than rely on shorthand `flex`. - Swiper is initialized once on page load - if its container has 0 height at that moment, slides never paint. We give every swiper container an explicit `height`, not just `min-height`. ============================================================ */ /* Tablet polish (still side-by-side) */ @media (max-width: 1199.98px) and (min-width: 992px) { .hero-section .left-panel .swiper { min-height: 440px; } .hero-section .swiper .swiper-slide .slideshow-slide-caption-wrapper { padding: 24px 24px 44px; } } /* Below tablet: STACK panels vertically */ @media (max-width: 991.98px) { .hero-section .row { flex-direction: column !important; flex-wrap: nowrap !important; gap: 8px; margin: 0; } /* Panels: full width, auto height. Important to override the `flex: 0 0 66.6667%` from stylesheet.css which in column direction would become a height percentage. */ .hero-section .left-panel, .hero-section .right-panel { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; padding-left: 0; padding-right: 0; } /* Left hero swiper: explicit height so Swiper can size slides. */ .hero-section .left-panel .swiper { height: 360px !important; min-height: 360px !important; width: 100%; } /* Right panel: two slides side-by-side at tablet width. */ .hero-section .right-panel { flex-direction: row !important; gap: 8px; } .hero-section .right-panel > .swiper { flex: 1 1 0 !important; height: 240px !important; min-height: 240px !important; width: auto; } } /* Phone */ @media (max-width: 767.98px) { .modules-row-wrapper.hero-section > .container-xxl { padding-left: 12px; padding-right: 12px; } .hero-section .left-panel .swiper { height: 320px !important; min-height: 320px !important; } /* Right panel stacks vertically on phone - side-by-side gets too cramped for captions. */ .hero-section .right-panel { flex-direction: column !important; } .hero-section .right-panel > .swiper { height: 220px !important; min-height: 220px !important; width: 100%; flex: 0 0 auto !important; } .hero-section .swiper .swiper-slide .slideshow-slide-caption-wrapper { padding: 16px 16px 32px; } /* Force-show the right-panel SHOP NOW button on touch (it's hover-revealed at desktop, which never fires on mobile). */ .hero-section .right-panel .slideshow-slide-button-container { display: flex !important; } .hero-section .right-panel .slideshow-slide-button { font-size: 11px; padding: 6px 14px; } } /* Small phone */ @media (max-width: 480px) { .hero-section .left-panel .swiper { height: 280px !important; min-height: 280px !important; } .hero-section .right-panel > .swiper { height: 200px !important; min-height: 200px !important; } .hero-section .swiper .swiper-slide .slideshow-slide-caption-wrapper { padding: 12px 14px 26px; } .hero-section .left-panel .slideshow-slide-button, .hero-section .right-panel .slideshow-slide-button { font-size: 11px; padding: 6px 14px; letter-spacing: 1.5px; } } /* If the page was loaded at desktop width and the user then resizes into mobile (or DevTools toggles device mode), Swiper does not auto-recompute slide widths. The script tags use `new Swiper(...)` without `observer: true`. This rule forces Swiper-set inline widths to be ignored so the slides fill the container at any viewport. */ @media (max-width: 991.98px) { .hero-section .swiper .swiper-slide { width: 100% !important; } } /* ============================================================ ELMI FEATURES STRIP - RESPONSIVE ============================================================ Desktop: 3 items in a row inside a black pill. Existing rules in stylesheet.css already stack them at ≤991px and reduce padding at ≤767px. These additions polish the in-between widths and the very small phone. ============================================================ */ /* Tablet: the 3 items have `min-width: 280px` each (840px combined plus gaps + padding ~960px). At 992-1199px the row gets cramped - relax min-width so they shrink instead of wrapping awkwardly. */ @media (max-width: 1199.98px) and (min-width: 992px) { .elmi-features-wrapper .elmi-features { padding: 24px 28px; gap: 16px; } .elmi-features-wrapper .feature-item { min-width: 0; /* allow shrink without breaking layout */ gap: 14px; } .elmi-features-wrapper .feature-text { font-size: 13px; line-height: 1.5; } } /* When items stack (≤991px) align icon to the start so multi-line text doesn't visually wobble the icon to vertical center. */ @media (max-width: 991.98px) { .elmi-features-wrapper .feature-item { align-items: flex-start; min-width: 0; } .elmi-features-wrapper .feature-icon { margin-top: 2px; /* visually align with the first text line */ } } /* Small phone */ @media (max-width: 575.98px) { .elmi-features-wrapper { padding: 0 12px; } .elmi-features-wrapper .elmi-features { padding: 18px 16px; gap: 14px; border-radius: 12px; } .elmi-features-wrapper .feature-item { gap: 12px; } .elmi-features-wrapper .feature-icon { width: 34px; height: 34px; } .elmi-features-wrapper .feature-text { font-size: 12.5px; line-height: 1.5; letter-spacing: -0.3px; } /* Drop the hardcoded line-break
on phones - let the text flow naturally to fit narrower columns. */ .elmi-features-wrapper .feature-text br { display: none; } } /* ============================================================ BRAND PICKS MODULE - RESPONSIVE ============================================================ Desktop: dark hero card with title+tabs row at top, product carousel, then scrollbar + arrow nav at bottom. Slide counts are handled by Swiper's own breakpoints (2/2/3/4). These rules adjust container padding, heading sizes, and the tabs row. ============================================================ */ /* Tablet polish */ @media (max-width: 991.98px) { .brand-picks-container { padding: 1.5rem 0; } .brand-picks-container .products-bs-title-wrap--brand-picks, .brand-picks-container .products-bs-carousel-wrap, .brand-picks-container .brand-picks-bottom-bar { padding: 0 1.25rem; } .brand-picks-container .products-bs-heading, .products-bs-title-wrap--brand-picks .products-bs-heading { font-size: 26px; line-height: 1.15; } .products-bs-title-wrap--brand-picks { margin-bottom: 1.75rem; } .brand-picks-bottom-bar { margin-top: 1.5rem; } } /* Phone */ @media (max-width: 767.98px) { .brand-picks-container .products-bs-title-wrap--brand-picks, .brand-picks-container .products-bs-carousel-wrap, .brand-picks-container .brand-picks-bottom-bar { padding: 0 1rem; } .products-bs-title-wrap--brand-picks { align-items: flex-start; gap: 0.75rem; margin-bottom: 1.25rem; } /* Tabs row uses its own line on phone for breathing room */ .brand-picks-tabs { width: 100%; gap: 0.4rem; flex-wrap: wrap; } .brand-picks-tab { flex: 0 0 auto; padding: 7px 12px; font-size: 12px; min-height: 32px; } .brand-picks-bottom .swiper-scrollbar { height: 2px; } } /* Small phone */ @media (max-width: 575.98px) { .brand-picks-full-bg { border-radius: 12px; } .brand-picks-container { padding: 1.25rem 0; } .brand-picks-container .products-bs-title-wrap--brand-picks, .brand-picks-container .products-bs-carousel-wrap, .brand-picks-container .brand-picks-bottom-bar { padding: 0 0.875rem; } .brand-picks-container .products-bs-eyebrow, .products-bs-title-wrap--brand-picks .products-bs-eyebrow { font-size: 11px; line-height: 1.4; letter-spacing: 1.2px; } .brand-picks-container .products-bs-heading, .products-bs-title-wrap--brand-picks .products-bs-heading { font-size: 22px; letter-spacing: -0.6px; } .brand-picks-nav__btn { width: 36px; height: 36px; } } /* ============================================================ G-SHOCK SERIES SLIDESHOW (slideshow4) - RESPONSIVE ============================================================ Desktop: dark card, header (eyebrow + heading + nav arrows), horizontal product carousel, scrollbar below. Swiper handles slide counts via its breakpoints (1.3/2.2/3.2). These rules adjust paddings, heading sizes, scrollbar spacing. ============================================================ */ /* Tablet polish */ @media (max-width: 991.98px) { .slideshow4-wrap { padding: 1.5rem 0; border-radius: 14px; } .slideshow4-header { padding: 0 1.25rem 1.5rem; gap: 1rem; } .slideshow4-heading { font-size: 26px; line-height: 1.15; } #slideshow4, .slideshow4-swiper { padding: 0 1.25rem; } .slideshow4-scrollbar-wrap { padding: 1.5rem 1.25rem 0; } } /* Phone */ @media (max-width: 767.98px) { .slideshow4-wrap { padding: 1.25rem 0; border-radius: 12px; } .slideshow4-header { padding: 0 1rem 1.25rem; align-items: center; gap: 0.75rem; } .slideshow4-heading { font-size: 22px; } .slideshow4-eyebrow { font-size: 11px; line-height: 1.4; letter-spacing: 1.2px; } #slideshow4, .slideshow4-swiper { padding: 0 1rem; } .slideshow4-scrollbar-wrap { padding: 1.25rem 1rem 0; } /* Caption text inside each slide tightens */ #slideshow4 .slideshow4-subtitle, .slideshow4-swiper .slideshow4-subtitle { font-size: 15px; line-height: 1.3; } #slideshow4 .slideshow4-title, .slideshow4-swiper .slideshow4-title { font-size: 18px; line-height: 1.25; } #slideshow4 .slideshow4-link, .slideshow4-swiper .slideshow4-link { font-size: 11px; letter-spacing: 1.4px; } } /* Small phone */ @media (max-width: 480px) { .slideshow4-header { padding: 0 0.875rem 1rem; } .slideshow4-heading { font-size: 20px; letter-spacing: -0.5px; } .slideshow4-nav__btn { width: 40px; height: 40px; } #slideshow4, .slideshow4-swiper { padding: 0 0.875rem; } .slideshow4-scrollbar-wrap { padding: 1rem 0.875rem 0; } #slideshow4 .slideshow4-caption, .slideshow4-swiper .slideshow4-caption { padding: 8px 2px 0; gap: 2px; } } /* ============================================================ PRODUCT CARD ACTION BUTTONS - ICON-ONLY ON MOBILE ============================================================ On phones we hide the text label inside the Add-to-Cart and Notify buttons. The button keeps its original shape (full- width rounded rectangle), just with the icon centered. ============================================================ */ @media (max-width: 767.98px) { /* Hide the text labels via `visually-hidden` pattern - gone visually but still announced by screen readers. */ .product-block-actions .product-cart-text, .products-latest-wrapper .product-block .product-block-actions .product-cart-text, .products-featured-wrapper .product-block .product-block-actions .product-cart-text, .products-brand-picks-wrapper .product-block .product-block-actions .product-cart-text { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; } /* Center the icon inside the otherwise-unchanged button. The desktop styles use transform / negative margins to slide the icon during hover animation - neutralize those so the icon sits dead center when the text is hidden. */ .product-block-actions .product-cart, .product-block-actions .product-notify-btn, .products-latest-wrapper .product-block .product-block-actions .product-cart, .products-latest-wrapper .product-block .product-block-actions .product-notify-btn, .products-featured-wrapper .product-block .product-block-actions .product-cart, .products-featured-wrapper .product-block .product-block-actions .product-notify-btn, .products-brand-picks-wrapper .product-block .product-block-actions .product-cart, .products-brand-picks-wrapper .product-block .product-block-actions .product-notify-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0 !important; } .product-block-actions .product-cart .h-icon-cart, .product-block-actions .product-notify-btn .product-notify-icon, .products-latest-wrapper .product-block .product-block-actions .product-cart .h-icon-cart, .products-featured-wrapper .product-block .product-block-actions .product-cart .h-icon-cart, .products-brand-picks-wrapper .product-block .product-block-actions .product-cart .h-icon-cart { margin: 0 !important; transform: none !important; left: auto !important; right: auto !important; position: relative !important; } } /* ============================================================ PRODUCT CARDS INSIDE CAROUSELS - RESPONSIVE ============================================================ Applies to product cards rendered inside Swiper carousels: .products-brand-picks-wrapper .products-featured-wrapper .products-latest-wrapper Swiper handles slides-per-view via its own `breakpoints` config. These rules tune the card's internal typography, badges, icons, and image proportions so the card stays readable at narrow slide widths on mobile. ============================================================ */ @media (max-width: 991.98px) { /* Card padding/gap tightens */ .products-brand-picks-wrapper .product-block, .products-featured-wrapper .product-block, .products-latest-wrapper .product-block { gap: 8px; } /* Title font slightly smaller */ .products-brand-picks-wrapper .product-name, .products-featured-wrapper .product-name, .products-latest-wrapper .product-name, .products-brand-picks-wrapper .product-block-title, .products-featured-wrapper .product-block-title, .products-latest-wrapper .product-block-title { font-size: 14px; line-height: 1.3; } .products-brand-picks-wrapper .product-block-manufacturer, .products-featured-wrapper .product-block-manufacturer, .products-latest-wrapper .product-block-manufacturer { font-size: 11px; line-height: 1.4; } /* Price: tighter line-height + smaller compare-at */ .products-brand-picks-wrapper .product-block-price .amount, .products-featured-wrapper .product-block-price .amount, .products-latest-wrapper .product-block-price .amount { font-size: 15px; } .products-brand-picks-wrapper .product-block-price .amount_before, .products-featured-wrapper .product-block-price .amount_before, .products-latest-wrapper .product-block-price .amount_before { font-size: 12px; } } /* Phone - most aggressive tightening so cards stay legible at 1.x slides-per-view (the very narrow viewport widths). */ @media (max-width: 767.98px) { /* Constrain product image to a sensible aspect; SVG/PNG mocks are often square so this just enforces it cleanly. */ .products-brand-picks-wrapper .product-thumbnail, .products-featured-wrapper .product-thumbnail, .products-latest-wrapper .product-thumbnail { aspect-ratio: 1 / 1; overflow: hidden; } .products-brand-picks-wrapper .product-thumbnail img, .products-featured-wrapper .product-thumbnail img, .products-latest-wrapper .product-thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Caption padding/gap tightens */ .products-brand-picks-wrapper .product-block-caption, .products-featured-wrapper .product-block-caption, .products-latest-wrapper .product-block-caption { padding: 10px 10px 12px; gap: 6px; } .products-brand-picks-wrapper .product-block-header, .products-featured-wrapper .product-block-header, .products-latest-wrapper .product-block-header { gap: 6px; } /* Title clamps to 2 lines so taller names don't push the price */ .products-brand-picks-wrapper .product-name, .products-featured-wrapper .product-name, .products-latest-wrapper .product-name { font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; } .products-brand-picks-wrapper .product-block-manufacturer, .products-featured-wrapper .product-block-manufacturer, .products-latest-wrapper .product-block-manufacturer { font-size: 10.5px; letter-spacing: 0.2px; } /* Wishlist/compare icons stay touch-friendly but compact */ .products-brand-picks-wrapper .product-block-icons, .products-featured-wrapper .product-block-icons, .products-latest-wrapper .product-block-icons { gap: 6px; } .products-brand-picks-wrapper .product-block-icons .product-icon, .products-featured-wrapper .product-block-icons .product-icon, .products-latest-wrapper .product-block-icons .product-icon { width: 32px; height: 32px; } .products-brand-picks-wrapper .product-block-icons .h-icon, .products-featured-wrapper .product-block-icons .h-icon, .products-latest-wrapper .product-block-icons .h-icon { width: 16px !important; height: 16px !important; background-size: contain !important; } /* Price */ .products-brand-picks-wrapper .product-block-price .amount, .products-featured-wrapper .product-block-price .amount, .products-latest-wrapper .product-block-price .amount { font-size: 14px; line-height: 1.2; } .products-brand-picks-wrapper .product-block-price .amount_before, .products-featured-wrapper .product-block-price .amount_before, .products-latest-wrapper .product-block-price .amount_before { font-size: 11px; } /* Labels/badges (NEW, -17% OFF, LIMITED, COMING SOON) - shrink their boxes properly so they keep their stacking math intact (the desktop CSS uses `top: calc(... + 18px + 4px)` offsets between labels - those need updating too). */ .product-layout .product-block .product-top .product-block-image .product-label.product-label-new { width: 36px !important; height: 15px !important; } .product-layout .product-block .product-top .product-block-image .product-label.product-label-sale { width: 58px !important; height: 15px !important; } .product-layout .product-block .product-top .product-block-image .product-label.product-label-limited { width: 95px !important; height: 15px !important; } .product-layout .product-block .product-top .product-block-image .product-label.product-label-coming-soon { height: 17px !important; padding: 0 5px !important; gap: 3px !important; } .product-label-coming-soon svg { width: 12px !important; height: 12px !important; } .product-label-coming-soon span { font-size: 10.5px !important; line-height: 17px !important; letter-spacing: -0.2px !important; } /* Update stacking offsets: 18→15 for SVG labels, gap 4→3 */ .product-layout .product-block .product-top .product-block-image .product-label.product-label-new ~ .product-label-coming-soon { top: calc(var(--space-half) + 15px + 3px) !important; } .product-layout .product-block .product-top .product-block-image .product-label-new ~ .product-label-sale, .product-layout .product-block .product-top .product-block-image .product-label-new ~ .product-label-limited, .product-layout .product-block .product-top .product-block-image .product-label-sale ~ .product-label-limited { top: calc(var(--space-half) + 15px + 3px) !important; } .product-layout .product-block .product-top .product-block-image .product-label-new ~ .product-label-sale ~ .product-label-limited { top: calc(var(--space-half) + (15px + 3px) * 2) !important; } } /* Small phone - labels shrink slightly more */ @media (max-width: 480px) { .product-layout .product-block .product-top .product-block-image .product-label.product-label-new { width: 32px !important; height: 14px !important; } .product-layout .product-block .product-top .product-block-image .product-label.product-label-sale { width: 50px !important; height: 14px !important; } .product-layout .product-block .product-top .product-block-image .product-label.product-label-limited { width: 80px !important; height: 14px !important; } .product-layout .product-block .product-top .product-block-image .product-label.product-label-coming-soon { height: 16px !important; padding: 0 4px !important; } .product-label-coming-soon svg { width: 10px !important; height: 10px !important; } .product-label-coming-soon span { font-size: 9.5px !important; line-height: 16px !important; } .product-layout .product-block .product-top .product-block-image .product-label.product-label-new ~ .product-label-coming-soon, .product-layout .product-block .product-top .product-block-image .product-label-new ~ .product-label-sale, .product-layout .product-block .product-top .product-block-image .product-label-new ~ .product-label-limited, .product-layout .product-block .product-top .product-block-image .product-label-sale ~ .product-label-limited { top: calc(var(--space-half) + 14px + 3px) !important; } .product-layout .product-block .product-top .product-block-image .product-label-new ~ .product-label-sale ~ .product-label-limited { top: calc(var(--space-half) + (14px + 3px) * 2) !important; } } /* ============================================================ HOME 3 BANNERS + BEST SELLERS - RESPONSIVE ============================================================ The wrapper holds three image-banners (col-sm-4 each) above a featured-products carousel that has a black backdrop positioned via a `::before` pseudo-element. Below tablet the banners stack vertically. The black backdrop needs its own height/positioning adjustment so it doesn't leave a thick black bar above the now-stacked carousel. ============================================================ */ /* Tablet */ @media (max-width: 991.98px) { .modules-row-wrapper.home-page-3-banners { margin: 0 auto; } .modules-row-wrapper.home-page-3-banners .row { --bs-gutter-x: 0.5rem; row-gap: 0.5rem; } .modules-row-wrapper.home-page-3-banners .banner-caption { padding: 1rem; } .modules-row-wrapper.home-page-3-banners .banner-subtitle { bottom: 1rem; } /* Disable the hover blur/arrow reveal on touch - no hover state */ .modules-row-wrapper.home-page-3-banners .banner-item:hover .banner-image img { filter: none; } .modules-row-wrapper.home-page-3-banners .banner-subtitle::after { display: none; } } /* Below tablet: the 3 banners stack to a 1-column grid */ @media (max-width: 767.98px) { .modules-row-wrapper.home-page-3-banners { margin: 0 auto; } .modules-row-wrapper.home-page-3-banners .row { flex-direction: column; row-gap: 0.75rem; } .modules-row-wrapper.home-page-3-banners .first-banner, .modules-row-wrapper.home-page-3-banners .second-banner, .modules-row-wrapper.home-page-3-banners .third-banner { flex: 0 0 100%; max-width: 100%; width: 100%; } /* Each banner image keeps its aspect ratio (the source PNG is wide), but on mobile we cap height so the column doesn't become a giant scroll. */ .modules-row-wrapper.home-page-3-banners .banner-item .banner-image img { width: 100%; height: auto; max-height: 280px; object-fit: cover; } .modules-row-wrapper.home-page-3-banners .banner-title { font-size: 1.5rem; letter-spacing: 0.03em; } .modules-row-wrapper.home-page-3-banners .banner-subtitle { font-size: 0.8rem; bottom: 0.75rem; } .modules-row-wrapper.home-page-3-banners .banner-caption { padding: 0.75rem; } /* Black backdrop behind .best-sellers: the desktop rule places it `top: -100px; height: 250px` (a banner-tall stripe behind the carousel header). With the title hidden and the carousel on mobile, that stripe ends up offset oddly. Shrink and re- position it to a subtle background under the carousel only. */ .modules-row-wrapper.home-page-3-banners .best-sellers::before { top: -40px; height: 180px; border-radius: 8px; } .modules-row-wrapper.home-page-3-banners .best-sellers { margin-top: 1.5rem; } } /* Small phone */ @media (max-width: 480px) { .modules-row-wrapper.home-page-3-banners { margin: 0 auto; } .modules-row-wrapper.home-page-3-banners .banner-item .banner-image img { max-height: 220px; } .modules-row-wrapper.home-page-3-banners .banner-title { font-size: 1.25rem; } .modules-row-wrapper.home-page-3-banners .banner-caption { padding: 0.5rem; } .modules-row-wrapper.home-page-3-banners .best-sellers::before { top: -24px; height: 140px; } } /* ============================================================ LIVESEARCH SIDEBAR - categories list in 2 columns ============================================================ The "Ανά Κατηγορία" list is too tall to fit the fixed-height search panel as a single column, causing inner scroll. Use a CSS multi-column layout so the items flow into 2 balanced columns inside the available height. ============================================================ */ .livesearch-sidebar-cats { /* CSS multi-column auto-balances the list across columns. */ column-count: 2; column-gap: 24px; /* Allow each li to fully occupy its space; prevent the icon+text from being split across columns. */ } .livesearch-sidebar-cats .search-results-cat__child { /* break-inside keeps each row intact when columns balance */ break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; } /* On phone the panel is wide enough; revert to single column so each row gets full width and isn't cramped. */ @media (max-width: 575.98px) { .livesearch-sidebar-cats { column-count: 1; } } /* ============================================================ CATEGORY HERO - RESPONSIVE ============================================================ Desktop: 141px-tall dark hero with breadcrumb on top and count + title pinned to the bottom. On mobile, long breadcrumb chains can wrap and the fixed height crops them - switch to auto height with min-height, allow breadcrumb to wrap, and scale typography down. ============================================================ */ /* Tablet polish */ @media (max-width: 991.98px) { .category-hero { height: auto; min-height: 120px; margin-bottom: 1.5rem; padding: 1rem 0 0; } .category-hero > .container-xxl { gap: 1rem; padding-bottom: 16px; } .category-hero__title { font-size: 22px; line-height: 1.2; } .category-hero__count { font-size: 14px; line-height: 1.3; } /* Breadcrumb wraps cleanly */ .category-breadcrumb { flex-wrap: wrap; row-gap: 4px; } } /* Phone */ @media (max-width: 767.98px) { .category-hero { border-radius: 0 0 18px 18px; min-height: 110px; padding: 0.75rem 0 0; } .category-hero > .container-xxl { padding-bottom: 14px; } .category-hero__title { font-size: 20px; letter-spacing: -0.5px; } .category-hero__count { font-size: 13px; margin-bottom: 1px; } /* Breadcrumb font slightly smaller on phone */ .category-breadcrumb .breadcrumb-item a, .category-breadcrumb .breadcrumb-home-icon i, .category-breadcrumb .breadcrumb-item + .breadcrumb-item::before { font-size: 10.5px; } } /* Small phone */ @media (max-width: 480px) { .category-hero { border-radius: 0 0 14px 14px; } .category-hero__title { font-size: 18px; line-height: 1.2; letter-spacing: -0.4px; } .category-hero__count { font-size: 12px; } .category-breadcrumb .breadcrumb-item + .breadcrumb-item::before { padding: 0; } } /* Breadcrumb items: no item-level padding. Visual spacing between segments comes entirely from the chevron `::before` margin (above) and scales per breakpoint via the rules below. */ .category-breadcrumb .breadcrumb-item { padding: 0; } .category-breadcrumb { gap: 0; align-items: center; } /* Per-breakpoint chevron margin = the visual gap on either side of each `›`. Larger on desktop, tighter on phones. */ @media (max-width: 1199.98px) { .category-breadcrumb .breadcrumb-item + .breadcrumb-item::before { margin: 0 9px; } } @media (max-width: 991.98px) { .category-breadcrumb .breadcrumb-item + .breadcrumb-item::before { margin: 0 8px; } } @media (max-width: 767.98px) { .category-breadcrumb .breadcrumb-item + .breadcrumb-item::before { margin: 0 6px; } } @media (max-width: 480px) { .category-breadcrumb .breadcrumb-item + .breadcrumb-item::before { margin: 0 5px; } } /* Category hero with banner / video - adjust the bigger 600px variant so the video doesn't dominate small viewports. */ @media (max-width: 767.98px) { .category-hero--has-banner { height: 360px !important; border-radius: 0 0 18px 18px; } .category-hero--has-banner > .container-xxl { padding-top: 14px; padding-bottom: 20px; } .manufacturer-campaign-btn { bottom: 1rem; right: 1rem; padding: 0.5rem 1rem; font-size: 0.75rem; } } @media (max-width: 480px) { .category-hero--has-banner { height: 280px !important; } } /* Small phone */ @media (max-width: 480px) { .products-brand-picks-wrapper .product-block-caption, .products-featured-wrapper .product-block-caption, .products-latest-wrapper .product-block-caption { padding: 8px 8px 10px; } .products-brand-picks-wrapper .product-name, .products-featured-wrapper .product-name, .products-latest-wrapper .product-name { font-size: 12.5px; } .products-brand-picks-wrapper .product-block-price .amount, .products-featured-wrapper .product-block-price .amount, .products-latest-wrapper .product-block-price .amount { font-size: 13px; } .products-brand-picks-wrapper .product-block-icons .product-icon, .products-featured-wrapper .product-block-icons .product-icon, .products-latest-wrapper .product-block-icons .product-icon { width: 28px; height: 28px; } } /* ============================================================ MOBILE FILTERS - OFFCANVAS PANEL ============================================================ `.ho-filters-wrapper-mobile` only renders on mobile (PHP/Twig side decides). JS in common.js:438 toggles the `.show` class on click of `.ho-filter-trigger-button` and removes it on `.filters-responsive-close`. This CSS turns the filter panel into a slide-in offcanvas from the left, with backdrop and body scroll lock - matching the burger menu pattern. ============================================================ */ /* Trigger button (always visible on mobile, sits inline above the product grid). Style it as a clean pill so it reads as a tappable control rather than a header. */ .ho-filters-wrapper-mobile { margin: 0 0 1rem; } .ho-filters-wrapper-mobile .ho-filter-trigger-container { padding: 0; } .ho-filters-wrapper-mobile .ho-filter-trigger-button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; background: #181E28; color: #FFFFFF; border-radius: 10px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.2px; cursor: pointer; user-select: none; transition: background 200ms ease; } .ho-filters-wrapper-mobile .ho-filter-trigger-button:hover, .ho-filters-wrapper-mobile .ho-filter-trigger-button:focus-visible { background: #000000; } .ho-filters-wrapper-mobile .ho-filter-trigger-button i { font-size: 16px; line-height: 1; } /* The actual panel - full-height slide-in from the left. Hidden off-screen by default; .show class slides it in. */ .ho-filters-wrapper-mobile .filters-wrapper { position: fixed; top: 0; left: 0; bottom: 0; width: 88%; max-width: 380px; background: #FFFFFF; box-shadow: 2px 0 24px rgba(0, 0, 0, 0.18); z-index: 2060; overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateX(-100%); transition: transform 280ms cubic-bezier(.4, 0, .2, 1); padding: 0; display: flex; flex-direction: column; } .ho-filters-wrapper-mobile.show .filters-wrapper { transform: translateX(0); } /* Backdrop - invisible by default, fades in when panel opens. Tap to close. The close logic is on the existing .filters- responsive-close element; we add an overlay sibling that covers the rest of the screen and proxies close on tap. */ .ho-filters-wrapper-mobile .filters-responsive-close.close-wrapper { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 2055; opacity: 0; visibility: hidden; transition: opacity 220ms ease, visibility 0s linear 220ms; cursor: pointer; } .ho-filters-wrapper-mobile.show .filters-responsive-close.close-wrapper { opacity: 1; visibility: visible; transition: opacity 220ms ease, visibility 0s linear 0s; } /* Show the responsive top bar (back/title/close) and reveal the selected-filters area inside the panel - both are display:none in the desktop stylesheet. */ .ho-filters-wrapper-mobile .filters-responsive-top { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: #FFFFFF; border-bottom: 1px solid #ECECEC; position: sticky; top: 0; z-index: 2; } .ho-filters-wrapper-mobile .filters-responsive-title { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700; color: #181E28; letter-spacing: -0.3px; } .ho-filters-wrapper-mobile .filters-wrapper .filters-responsive-close { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 50%; cursor: pointer; color: #181E28; } .ho-filters-wrapper-mobile .filters-wrapper .filters-responsive-close:hover { background: rgba(0, 0, 0, 0.06); } .ho-filters-wrapper-mobile .filters-wrapper .filters-responsive-close i { font-size: 18px; line-height: 1; } /* Inner filter content padding */ .ho-filters-wrapper-mobile .filters-block-wrapper { padding: 14px 18px 100px; /* extra bottom space for sticky footer */ } /* Sticky footer with "View N Products" button - pinned to the panel bottom so users always have a primary action visible. */ .ho-filters-wrapper-mobile .filters-responsive-bottom { display: block !important; position: sticky; bottom: 0; left: 0; right: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: #FFFFFF; border-top: 1px solid #ECECEC; box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05); z-index: 2; margin-top: auto; } .ho-filters-wrapper-mobile .filters-responsive-results { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 48px; padding: 12px 18px; background: #181E28; color: #FFFFFF; border: 0; border-radius: 10px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; cursor: pointer; transition: background 200ms ease; } .ho-filters-wrapper-mobile .filters-responsive-results:hover, .ho-filters-wrapper-mobile .filters-responsive-results:focus-visible { background: #000000; color: #FFFFFF; } .ho-filters-wrapper-mobile .filters-responsive-results .filter-view-results { font-weight: 800; } /* Selected filters chips visible at top inside panel */ .ho-filters-wrapper-mobile .selected-filters-wrapper { display: flex !important; flex-wrap: wrap; gap: 6px; margin: 12px 0; } .ho-filters-wrapper-mobile .filter-clear-all { display: inline-flex !important; align-items: center; gap: 6px; margin: 4px 0; font-size: 13px; color: #B11717; } /* Body scroll lock while panel is open (matches the burger offcanvas pattern). */ body.filters-expanded { overflow: hidden; touch-action: none; } /* When a filter is toggled, the filter twig adds `.loading` to the wrapper which by default fades it to `opacity: 0.5` (defined in stylesheet.css). In the mobile offcanvas, that fade reveals the page content behind the panel for a flash. Keep the panel fully opaque while open - visual loading feedback comes from the `.lds-ring` spinner injected into `#ajax-wrapper` instead. */ .ho-filters-wrapper-mobile.show .filters-wrapper.loading, .ho-filters-wrapper-desktop.show .filters-wrapper.loading { opacity: 1 !important; } /* Desktop: keep the mobile wrapper hidden - it's only emitted via the `mobile` flag, but defensive in case it renders elsewhere. Also hide the JS-injected trigger button (only useful on mobile viewports). */ @media (min-width: 992px) { .ho-filters-wrapper-mobile { display: none; } .ho-mobile-filter-trigger { display: none; } } /* ============================================================ DESKTOP FILTER VARIANT ON MOBILE VIEWPORT ============================================================ The server renders `.ho-filters-wrapper-desktop` based on PHP's user-agent sniff, which is unreliable for responsive testing (a small viewport with a desktop UA still gets the desktop variant). The rules below mirror the offcanvas treatment from `.ho-filters-wrapper-mobile` so the panel behaves identically regardless of which variant the template emitted. The `.filter-block-title` (visible only in the desktop variant) becomes the clickable trigger. ============================================================ */ @media (max-width: 991.98px) { /* Container itself: no special chrome, but the .filter-block- title inside becomes the trigger pill. */ .ho-filters-wrapper-desktop { margin: 0 0 1rem; } /* Hide the inner filters-wrapper off-screen until .show */ .ho-filters-wrapper-desktop .filters-wrapper { position: fixed; top: 0; left: 0; bottom: 0; width: 88%; max-width: 380px; background: #FFFFFF; box-shadow: 2px 0 24px rgba(0, 0, 0, 0.18); z-index: 2060; overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateX(-100%); transition: transform 280ms cubic-bezier(.4, 0, .2, 1); padding: 0; display: flex; flex-direction: column; } .ho-filters-wrapper-desktop.show .filters-wrapper { transform: translateX(0); } /* Injected trigger button (rendered by JS as a sibling of the wrapper). Clones the existing .filter-block-title contents so the icon + label match the desktop header. */ .ho-mobile-filter-trigger { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 18px; margin: 0 0 1rem; background: #181E28; color: #FFFFFF; border: 0; border-radius: 10px; cursor: pointer; user-select: none; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.2px; transition: background 200ms ease; } .ho-mobile-filter-trigger:hover, .ho-mobile-filter-trigger:focus-visible { background: #000000; } .ho-mobile-filter-trigger svg { fill: #FFFFFF !important; } .ho-mobile-filter-trigger .filter-block-title__text { color: #FFFFFF; } .ho-mobile-filter-trigger .filter-clear-all { display: none !important; /* clear-all doesn't belong in the closed trigger */ } /* Universal backdrop using a body pseudo-element so it works for both wrapper variants - the .close-wrapper element only exists in the mobile-variant markup. */ body.filters-expanded::before { content: ''; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 2055; cursor: pointer; } /* Show the panel internals on .show - these are display:none in stylesheet.css by default. */ .ho-filters-wrapper-desktop .filters-responsive-top { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: #FFFFFF; border-bottom: 1px solid #ECECEC; position: sticky; top: 0; z-index: 2; } .ho-filters-wrapper-desktop .filters-responsive-title { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700; color: #181E28; letter-spacing: -0.3px; } .ho-filters-wrapper-desktop .filters-wrapper .filters-responsive-close { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 50%; cursor: pointer; color: #181E28; } .ho-filters-wrapper-desktop .filters-wrapper .filters-responsive-close:hover { background: rgba(0, 0, 0, 0.06); } .ho-filters-wrapper-desktop .filters-wrapper .filters-responsive-close i { font-size: 18px; line-height: 1; } /* Padding for filter body + sticky bottom CTA */ .ho-filters-wrapper-desktop .filters-block-wrapper { padding: 14px 18px 100px; } .ho-filters-wrapper-desktop .filters-responsive-bottom { display: block !important; position: sticky; bottom: 0; left: 0; right: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: #FFFFFF; border-top: 1px solid #ECECEC; box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05); z-index: 2; margin-top: auto; } .ho-filters-wrapper-desktop .filters-responsive-results { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 48px; padding: 12px 18px; background: #181E28; color: #FFFFFF; border: 0; border-radius: 10px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; cursor: pointer; } .ho-filters-wrapper-desktop .selected-filters-wrapper-desktop { display: none !important; } /* Hide the desktop-style title header inside the panel - the JS-injected `.ho-mobile-filter-trigger` button already clones this content as the on-page trigger, and `.filters-responsive- top` shows the title again inside the open panel. Leaving `.filter-block-header` visible duplicates the "Φίλτρα" label. */ .ho-filters-wrapper-desktop .filter-block-header { display: none !important; } /* The `.filter-clear-all` element is relocated by JS from the hidden `.filter-block-header` into `.filters-responsive-top`. Style it as a compact pill that sits between the title and the close X. Server only emits the inner content (label + icon) when there's something to clear, so we hide the empty pill state to avoid a floating empty box. */ .ho-filters-wrapper-desktop .filters-responsive-top .filter-clear-all { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 6px 10px; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: #B11717; background: rgba(177, 23, 23, 0.08); border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background 180ms ease; } .ho-filters-wrapper-desktop .filters-responsive-top .filter-clear-all:hover { background: rgba(177, 23, 23, 0.15); } .ho-filters-wrapper-desktop .filters-responsive-top .filter-clear-all:empty { display: none; } .ho-filters-wrapper-desktop .filters-responsive-top .filter-clear-all i { font-size: 13px; line-height: 1; } } /* ============================================================ MANUFACTURER INFO / CATEGORY HERO - Responsive (tablet & mobile) ============================================================ Desktop fixed dimensions (hero 141px or 600px with banner, 55px title, 213×172 filter-carousel thumbs, absolute-positioned campaign button, top-row-wrapper as flex-row) all need scaling for narrower viewports. The product grid itself is already handled by the `#product-container.tw-grid` rules at the top of this file. ============================================================ */ /* TABLET + MOBILE (≤991.98px) */ @media (max-width: 991.98px) { /* Hero: shrink the fixed heights - the desktop banner is 600px which dominates the viewport on a phone, and the no-banner 141px wastes the smaller mobile width with a flat-feeling bar. */ .category-hero { height: auto; min-height: 120px; padding: 16px 0; } .category-hero--has-banner { height: 320px !important; min-height: 0; } .category-hero > .container-xxl, .category-hero--has-banner > .container-xxl { padding-top: 16px; padding-bottom: 20px; } .category-hero .main-content-title { font-size: 32px; line-height: 36px; letter-spacing: -0.9px; } .category-hero .category-product-count { font-size: 14px; line-height: 20px; } /* Top row: stack the title block and the right-side content_top modules vertically instead of side by side. */ .top-row-wrapper { flex-direction: column; align-items: stretch; gap: 16px; } .top-row-wrapper .col-md-8 { width: 100%; } /* Campaign button: smaller padding + repositioned so it doesn't collide with the title block on a short hero. */ .manufacturer-campaign-btn { bottom: 1rem; right: 1rem; padding: .5rem 1rem; font-size: .8rem; } /* Filter carousel: tighter thumbs so more brands fit per scroll view. `space-between` produces awkward gaps once items wrap or become smaller - switch to a packed `flex-start` flow. */ .filter-carousel { justify-content: flex-start; gap: .75rem; } .filter-carousel__item__img { width: 140px; height: 110px; } .filter-carousel__item span { font-size: 13px; } /* Sort bar: keep right-aligned but reduce bottom margin. */ .category-sort-bar { margin-bottom: 12px; } /* Promo card spans 2 columns of the (now 2-up) product grid so it doesn't get scaled down to half-card size on tablet. */ #product-container.product-container.tw-grid .manufacturer-promo-card { grid-column: span 2; } } /* MOBILE (≤575.98px) - tighter still. */ @media (max-width: 575.98px) { .category-hero { min-height: 96px; } .category-hero--has-banner { height: 240px !important; } .category-hero .main-content-title { font-size: 26px; line-height: 30px; letter-spacing: -0.78px; } .category-hero .category-product-count { font-size: 13px; } /* Campaign button: full-width inline below content (still inside the hero container) rather than absolute corner anchor. */ .manufacturer-campaign-btn { position: static; display: inline-flex; margin-top: 12px; padding: .55rem 1rem; font-size: .8rem; } .filter-carousel__item__img { width: 110px; height: 88px; } .filter-carousel__item span { font-size: 12px; line-height: 18px; } .filter-carousel-wrap { margin-bottom: 1rem; } /* Promo card spans 1 column (matches single-col grid). */ #product-container.product-container.tw-grid .manufacturer-promo-card { grid-column: span 1; } } /* ============================================================ RECENTLY VIEWED (.rv-section) - Responsive ============================================================ Desktop: fixed 250px section height, title and horizontal list side-by-side, 443×120 cards. Below 992px the side-by-side layout doesn't fit, and 443px cards are wider than a phone viewport - needs stacking + shrunk cards. ============================================================ */ /* TABLET + MOBILE (≤991.98px) */ @media (max-width: 991.98px) { .rv-section { /* Fixed `height: 250px` + the `-40px` bottom overlap (which tucks the section into the footer at desktop) leave too little usable space once the layout stacks. Switch to `auto` height with explicit padding, and tighten the overlap so content doesn't disappear under the footer. */ height: auto; padding: 32px 0; margin-top: 40px; margin-bottom: -16px; } .rv-wrapper { flex-direction: column; align-items: stretch; gap: 16px; } .rv-title { font-size: 18px; line-height: 24px; } .rv-list { margin-left: 0; gap: 12px; } /* Cards shrink so 1.5 cards peek into view → users see there's more to scroll horizontally. */ .rv-card { width: 320px; height: 110px; padding: 10px; gap: 10px; } .rv-card__image { width: 80px; height: 80px; } } /* MOBILE (≤575.98px) - even tighter card. */ @media (max-width: 575.98px) { .rv-section { padding: 24px 0; margin-top: 32px; margin-bottom: -12px; } .rv-title { font-size: 17px; } .rv-card { width: 280px; height: 104px; } .rv-card__image { width: 72px; height: 72px; } .rv-card__name { font-size: 12px; line-height: 17px; } .rv-card__price-current { font-size: 13px; line-height: 18px; } .rv-card__cart { width: 32px; height: 32px; } } /* ============================================================ HOME PAGE - UNIFIED SECTION SPACING ============================================================ Single-axis margin model: every home section owns its TOP gap via the --home-section-gap token. No section sets margin-bottom, so gaps never compound and the vertical rhythm is uniform. Scope: body.common_home - other pages are untouched. Scale: Desktop 96px → Tablet 64px → Phone 48px → ≤480 32px ============================================================ */ body.common_home { --home-section-gap: 6rem; } @media (max-width: 991.98px) { body.common_home { --home-section-gap: 4rem; } } @media (max-width: 767.98px) { body.common_home { --home-section-gap: 3rem; } } @media (max-width: 480px) { body.common_home { --home-section-gap: 2rem; } } body.common_home .modules-row-wrapper, body.common_home .products-brand-picks-wrapper, body.common_home .products-featured-wrapper, body.common_home .products-latest-wrapper, body.common_home .newsletter-wrapper { margin-bottom: 0; } /* Hero is always the first section; no gap above it (sits flush under the site header). */ body.common_home .modules-row-wrapper.hero-section { margin-top: 0; } /* The product carousels (brand-picks / featured / latest) have a sibling .swiper-scrollbar with `margin-top: 2.5rem` from stylesheet.css that adds 40px below the carousel. With the new top-gap model this is now redundant - tighten it to a small visual separator only. */ body.common_home .products-latest-wrapper ~ .swiper-scrollbar, body.common_home .products-featured-wrapper ~ .swiper-scrollbar, body.common_home .products-brand-picks-wrapper ~ .swiper-scrollbar { margin-top: 0.75rem; } /* ============================================================ WISHLIST / COMPARE / INFORMATION HERO - RESPONSIVE ============================================================ Desktop title is 25px (set at .wishlist-hero/.compare-hero /.information-hero .main-content-title). The generic `.category-hero .main-content-title` mobile rules push it back UP to 32px / 26px on tablet/phone - bigger than desktop. These overrides re-scale down at each breakpoint. ============================================================ */ @media (max-width: 991.98px) { .wishlist-hero .main-content-title, .compare-hero .main-content-title, .information-hero .main-content-title { font-size: 22px; line-height: 28px; letter-spacing: -0.66px; } } @media (max-width: 767.98px) { .wishlist-hero .main-content-title, .compare-hero .main-content-title, .information-hero .main-content-title { font-size: 20px; line-height: 26px; letter-spacing: -0.5px; } } @media (max-width: 480px) { .wishlist-hero .main-content-title, .compare-hero .main-content-title, .information-hero .main-content-title { font-size: 18px; line-height: 24px; letter-spacing: -0.4px; } } /* ============================================================ COMPARE SPECS TABLE - RESPONSIVE ============================================================ Desktop grid is `180px repeat(4, 1fr)`: a fixed-width label column + four equal product columns. On mobile this overflows the viewport, and on tablet the 180px label eats most of the horizontal space. Shrink the label column and allow horizontal scroll so users can swipe between product columns. ============================================================ */ @media (max-width: 991.98px) { .compare-specs { margin-top: 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .compare-spec-section { min-width: 600px; margin-bottom: 24px; } .compare-spec-header, .compare-spec-row { grid-template-columns: 140px repeat(4, minmax(120px, 1fr)); } .compare-spec-label, .compare-spec-value, .compare-spec-header-label { font-size: 13px; line-height: 18px; letter-spacing: -0.3px; } } @media (max-width: 575.98px) { .compare-spec-section { min-width: 520px; } .compare-spec-header, .compare-spec-row { grid-template-columns: 110px repeat(4, minmax(100px, 1fr)); } .compare-spec-label, .compare-spec-value { padding: 8px 10px; font-size: 12px; line-height: 16px; } .compare-spec-header-label { font-size: 13px; padding: 6px 10px 6px 0; } } /* Product detail: ERP-fed dynamic blocks (Tier 1) -------------------------------------------------------------------- */ /* "Αναλυτικά χαρακτηριστικά" accordion body - structured intro datasheet rendered as a 3-column responsive grid of cards. The first 12 cards (4 rows × 3 cols) are visible; the rest are revealed by the toggle. */ .product-specs-fullspecs { padding: 6px 4px; display: flex; flex-direction: column; align-items: center; } .product-specs-fullspecs-list { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } @media (max-width: 1024px) { .product-specs-fullspecs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .product-specs-fullspecs-list { grid-template-columns: 1fr; } } .product-specs-fullspecs:not(.product-specs-fullspecs--expanded) .product-specs-fullspecs-item:nth-child(n+13) { display: none; } .product-specs-fullspecs-item { margin: 0; padding: 10px 12px; background: #FAFAFA; border-radius: 4px; } .product-specs-fullspecs__toggle { margin: 14px 0 4px; padding: 8px 22px; background: transparent; border: 1px solid #2A2A2A; border-radius: 999px; color: #2A2A2A; font-size: 13px; font-weight: 500; cursor: pointer; transition: background 150ms ease-out, color 150ms ease-out; } .product-specs-fullspecs__toggle:hover { background: #2A2A2A; color: #FFFFFF; } .product-specs-fullspecs-item__main { font-size: 13.5px; line-height: 1.55; color: #1A1A1A; word-wrap: break-word; } .product-specs-fullspecs-item__main strong { font-weight: 600; color: #2A2A2A; margin-right: 2px; } .product-specs-fullspecs-item__sub { margin-top: 8px; padding-left: 12px; border-left: 2px solid #E5E5E5; font-size: 12.5px; line-height: 1.6; color: #555; } .product-specs-fullspecs-item__sub > div { margin-bottom: 3px; } .product-specs-fullspecs-item__sub > div:last-child { margin-bottom: 0; } .product-specs-fullspecs-item__sub strong { color: #333; } .product-info-chip { margin: 18px 0; padding: 14px 16px; background: #FAFAFA; border: 1px solid #E5E5E5; border-radius: 6px; } .product-info-chip__row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 13px; color: #555; } .product-info-chip__row + .product-info-chip__row { border-top: 1px dashed #E5E5E5; } .product-info-chip__row strong { color: #1A1A1A; font-weight: 600; } /* Color variant swatch - colour-dot fallback when sibling has no image */ .product-color-thumb__dot { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--swatch-hex, #888); } .product-color-thumb { position: relative; } /* ============================================================ Authorized Dealers page (/metapwlhtes) - list / map tabs ============================================================ */ #information-dealers { padding: 24px 16px 64px; } /* Black breadcrumb-style banner with rounded bottom */ .dealers-banner { background: #000000; border-radius: 0 0 25px 25px; color: #FFFFFF; padding: 22px 0 36px; position: relative; margin-bottom: 28px; } /* dealers-banner inherits the category-breadcrumb white-on-dark treatment */ .dealers-banner__title { margin: 14px 0 0; text-align: center; font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -0.4px; color: #FFFFFF; } /* Toolbar: tabs (left) + filters (right) */ .dealers-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; } .dealers-toolbar__tabs { display: inline-flex; gap: 14px; } .dealers-tab { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; background: #FFFFFF; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.10); border-radius: 9px; border: 0; cursor: pointer; font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 16px; line-height: 19px; letter-spacing: -0.48px; color: #9F9F9F; transition: color 150ms ease, box-shadow 150ms ease; } .dealers-tab svg { fill: #9F9F9F; transition: fill 150ms ease, color 150ms ease; } .dealers-tab svg path, .dealers-tab svg g path { transition: fill 150ms ease; } .dealers-tab.is-active { color: #000000; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.16); } .dealers-tab.is-active svg, .dealers-tab.is-active svg path, .dealers-tab.is-active svg g path { fill: #000000; } .dealers-tab:not(.is-active):hover { color: #2A2A2A; } .dealers-tab:not(.is-active):hover svg, .dealers-tab:not(.is-active):hover svg path, .dealers-tab:not(.is-active):hover svg g path { fill: #2A2A2A; } .dealers-toolbar__filters { display: inline-flex; align-items: center; gap: 12px; } .dealers-search { position: relative; display: inline-flex; align-items: center; } .dealers-search i { position: absolute; left: 14px; color: #9F9F9F; pointer-events: none; } .dealers-search input { width: 280px; height: 44px; padding: 0 14px 0 40px; background: #FFFFFF; border: 1px solid #E1E1E1; border-radius: 9px; font-size: 14px; color: #2A2A2A; transition: border-color 150ms ease; } .dealers-search input:focus { outline: none; border-color: #000000; } .dealers-premium-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; height: 44px; background: #FFFFFF; border: 1px solid #E1E1E1; border-radius: 9px; cursor: pointer; font-size: 13.5px; color: #2A2A2A; user-select: none; } .dealers-premium-toggle input { accent-color: #B79466; } .dealers-categories { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .dealers-category-chip { appearance: none; background: #FFFFFF; border: 1px solid #D9D9D9; color: #2A2A2A; font: inherit; font-size: 13px; line-height: 1; padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: background 150ms ease, border-color 150ms ease, color 150ms ease; } .dealers-category-chip:hover { border-color: #B79466; color: #2A2A2A; } .dealers-category-chip.is-active { background: #2A2A2A; border-color: #2A2A2A; color: #FFFFFF; } .dealers-category-chip.is-active:hover { background: #1A1A1A; } /* Views */ .dealers-view { display: none; } .dealers-view.is-active { display: block; } /* List view - 4-col grid */ .dealers-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } @media (max-width: 1200px) { .dealers-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .dealers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .dealers-grid { grid-template-columns: 1fr; } } /* Card */ .dealer-card { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid #E1E1E1; border-radius: 15px; overflow: hidden; transition: box-shadow 150ms ease, transform 150ms ease; } .dealer-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); transform: translateY(-2px); } .dealer-card__media { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #F7F7F7; } .dealer-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .dealer-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; align-items: center; text-align: center; } .dealer-card__name { margin: 0 0 6px; font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 16px; line-height: 19px; letter-spacing: -0.32px; color: #000000; } .dealer-card__address { margin: 0 0 14px; font-family: 'Inter', system-ui, sans-serif; font-weight: 400; font-size: 13px; line-height: 20px; letter-spacing: -0.26px; color: #4A4C4F; } .dealer-card__badge { display: inline-block; margin: -4px 0 12px; padding: 2px 10px; background: #B79466; color: #FFFFFF; font-size: 10.5px; font-weight: 600; border-radius: 999px; letter-spacing: 0.4px; text-transform: uppercase; } .dealer-card__rows { width: 100%; display: flex; flex-direction: column; gap: 0; border-top: 1px solid #F0F0F0; } .dealer-card__row { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 8px; border-bottom: 1px solid #F0F0F0; color: #4A4C4F; text-decoration: none; font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 12px; line-height: 25px; letter-spacing: -0.24px; transition: color 150ms ease, background 150ms ease; } .dealer-card__row:last-child { border-bottom: 0; } .dealer-card__row:hover { color: #000000; background: #FAFAFA; } .dealer-card__row svg { color: #4A4C4F; flex-shrink: 0; } /* Premium accent */ .dealer-card--premium { border-color: #E8D6B2; } /* Map view: split layout with floating sidebar on the left */ .dealers-map-layout { position: relative; width: 100%; height: 70vh; min-height: 600px; } .dealers-map-sidebar { position: absolute; top: 16px; left: 16px; bottom: 16px; z-index: 500; width: 320px; background: #FFFFFF; border: 1px solid #EBEBEB; border-radius: 10px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.10); display: flex; flex-direction: column; overflow: hidden; } .dealers-map-sidebar__count { padding: 14px 16px; text-align: center; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px; line-height: 17px; letter-spacing: -0.28px; color: #4A4C4F; opacity: 0.5; border-bottom: 1px solid #F2F2F2; } .dealers-map-sidebar__scroll-wrap { position: relative; flex: 1; min-height: 0; } .dealers-map-sidebar__list { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow-y: auto; padding: 12px 18px 12px 12px; display: flex; flex-direction: column; gap: 10px; /* Hide native scrollbar - replaced by the JS-driven overlay below. Native sizing ignores min-height in most browsers, hence the custom thumb. */ scrollbar-width: none; -ms-overflow-style: none; } .dealers-map-sidebar__list::-webkit-scrollbar { width: 0; height: 0; display: none; } /* Custom overlay scrollbar (built in JS) */ .dealers-map-sidebar__scroll { position: absolute; top: 8px; right: 6px; bottom: 8px; width: 5px; border-radius: 3px; background: transparent; pointer-events: none; z-index: 2; } .dealers-map-sidebar__scroll-thumb { position: absolute; left: 0; width: 100%; background: #000000; border-radius: 3px; opacity: 1; pointer-events: auto; cursor: grab; transition: opacity 150ms ease; } .dealers-map-sidebar__scroll-thumb:active { cursor: grabbing; } .dealer-mini { position: relative; padding: 12px 14px 14px; background: #FFFFFF; border: 1px solid #EBEBEB; border-radius: 5px; cursor: pointer; transition: border-color 150ms ease, box-shadow 150ms ease; } .dealer-mini:hover { border-color: #B79466; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .dealer-mini__body { padding-right: 80px; } .dealer-mini__name { margin: 0 0 4px; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13px; line-height: 16px; letter-spacing: -0.26px; color: #5C5C5C; text-align: left; } .dealer-mini__address { margin: 0; font-family: 'Inter', sans-serif; font-weight: 400; font-size: 12px; line-height: 15px; letter-spacing: -0.24px; color: #4A4C4F; text-align: left; } .dealer-mini__directions { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: #FFFFFF; border: 1px solid #E1E1E1; border-radius: 16px; text-decoration: none; font-family: 'Inter', sans-serif; font-weight: 400; font-size: 12px; line-height: 25px; letter-spacing: -0.24px; color: #4A4C4F; transition: background 150ms ease, border-color 150ms ease; } .dealer-mini__directions:hover { background: #F4F4F4; border-color: #307fce; color: #2A2A2A; } /* Map canvas */ .dealers-map { width: 100%; height: 100%; min-height: 600px; border-radius: 15px; overflow: hidden; border: 1px solid #E1E1E1; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06); background: #f4f4f4; } .dealer-marker { background: transparent; border: 0; } /* Stack sidebar above map on narrow viewports */ @media (max-width: 768px) { .dealers-map-layout { height: auto; min-height: 0; } .dealers-map-sidebar { position: relative; width: 100%; top: auto; left: auto; bottom: auto; height: 360px; margin-bottom: 14px; } .dealers-map { height: 60vh; min-height: 420px; } } /* Map popup styling */ .dealer-popup { font-size: 13px; line-height: 1.5; min-width: 200px; } .dealer-popup strong { display: block; margin-bottom: 4px; font-size: 14px; color: #000000; } .dealer-popup__badge { display: inline-block; margin: 2px 0 6px; padding: 1px 8px; background: #B79466; color: #fff; font-size: 10px; border-radius: 999px; } .dealer-popup__directions { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 4px 10px; background: #FFFFFF; border: 1px solid #E1E1E1; border-radius: 16px; text-decoration: none; font-family: 'Inter', sans-serif; font-weight: 400; font-size: 12px; line-height: 25px; letter-spacing: -0.24px; color: #4A4C4F; transition: background 150ms ease, border-color 150ms ease; } .dealer-popup__directions:hover { background: #F4F4F4; border-color: #307fce; color: #2A2A2A; } .dealers-empty { text-align: center; padding: 60px 16px; color: #9F9F9F; font-style: italic; } @media (max-width: 768px) { .dealers-toolbar { flex-direction: column; align-items: stretch; } .dealers-toolbar__tabs { justify-content: center; } .dealers-toolbar__filters { flex-direction: column; align-items: stretch; } .dealers-search input { width: 100%; } .dealers-categories { justify-content: flex-start; } } /* ============================================================ Unified breadcrumbs - match the .category-breadcrumb visual treatment across every page that uses the bare
. The legacy templates emit just
…
at the very top of the page (no wrapping container) with each
being a plain text. The rules below give that markup the same typography, chevron separator and home-icon affordance the product category page uses - adapted to dark text on the page's white background. Scoped with :not(.category-breadcrumb) so the original white-on-black rules under .category-hero / .dealers-banner / .product-breadcrumb-bar still win there. ============================================================ */ nav[aria-label="breadcrumb"] > .breadcrumb:not(.category-breadcrumb) { background: transparent; margin: 16px 0 18px; padding: 0 14px; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 11px; line-height: 20px; letter-spacing: -0.33px; } .breadcrumb:not(.category-breadcrumb) .breadcrumb-item { display: flex; align-items: center; } .breadcrumb:not(.category-breadcrumb) .breadcrumb-item a { text-decoration: underline; color: #4A4C4F; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 11px; line-height: 20px; letter-spacing: -0.33px; text-transform: none; } .breadcrumb:not(.category-breadcrumb) .breadcrumb-item a:hover { color: #000000; } .breadcrumb:not(.category-breadcrumb) .breadcrumb-item.active, .breadcrumb:not(.category-breadcrumb) .breadcrumb-item[aria-current="page"] { color: #4A4C4F; } /* Home icon prefixed to the first item - only when the template didn't already inline one (e.g.