/* NIKOLA START: mobile PARTS / SERVICES side-by-side preview * Rollback: remove this entire NIKOLA START/END block to restore the existing layout. */ @media screen and (max-width: 900px), screen and (max-height: 520px) and (orientation: landscape) { #otherHome ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; } #otherHome ul li, #otherHome ul li:nth-child(n) { float: none; width: auto; height: 160px; min-height: 160px; margin: 0; } #otherHome ul li .image { height: 100%; } #otherHome ul li .content { width: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); } #otherHome ul li .content h3 { margin: 0; font-size: clamp(20px, 6vw, 32px); line-height: 1.1; white-space: nowrap; } #otherHome { padding-bottom: 24px; } } @media screen and (max-height: 520px) and (orientation: landscape) { #otherHome ul li, #otherHome ul li:nth-child(n) { height: 140px; min-height: 140px; } #otherHome ul li .content h3 { font-size: clamp(18px, 4vw, 28px); } #otherHome { padding-bottom: 20px; } } /* NIKOLA END: mobile PARTS / SERVICES side-by-side preview */ /* NIKOLA START: New Arrivals landscape-only 2-column * Rollback: remove this entire NIKOLA START/END block from Additional CSS. * Portrait and desktop unchanged. */ @media screen and (max-height: 520px) and (orientation: landscape) { #carsHome { padding-top: 24px !important; } #carsHome h2 { height: 40px !important; } #carsHome h2::before { font-size: 34px !important; line-height: 40px !important; } #carsHome > a.button { margin-top: 0 !important; } #carsHome ul.slick-initialized, #carsHome ul.slick-initialized .slick-list, #carsHome ul.slick-initialized .slick-track { height: 250px !important; } #carsHome ul.slick-initialized li.slick-slide { width: calc(50vw - 64px) !important; height: 230px !important; margin-top: 10px !important; margin-bottom: 10px !important; margin-right: 10px !important; } #carsHome li.slick-slide .image { height: 230px !important; } } /* NIKOLA END: New Arrivals landscape-only 2-column */ /* === NIKOLA START: /cars/ grid flow � remove float-induced gaps === Rollback: delete this whole block (START → END). Theme floated li cards leave white holes when titles wrap to unequal heights. CSS Grid removes float/clear gaps. Desktop/iPad 4 cols; phones 2; landscape phones 4. */ body.category-cars #cars > ul, #cars > ul { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 20px !important; align-items: stretch !important; grid-auto-flow: row !important; } body.category-cars #cars > ul > li, #cars > ul > li { float: none !important; clear: none !important; width: auto !important; max-width: none !important; height: auto !important; min-height: 0 !important; margin: 0 !important; box-sizing: border-box !important; position: relative !important; } body.category-cars #cars > ul > li .content, #cars > ul > li .content { height: auto !important; min-height: 0 !important; } @media screen and (max-width: 900px) { body.category-cars #cars > ul, #cars > ul { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } } @media only screen and (orientation: landscape) and (max-height: 520px) and (min-width: 600px) { body.category-cars #cars > ul, #cars > ul { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px !important; } } /* === NIKOLA END: /cars/ grid flow � remove float-induced gaps === */ /* === NIKOLA START: mobile Get Inspired Instagram collage === Rollback: delete this whole block (START → END). Mobile: 2-column collage (Nikola preferred over 3); space under title before Instagram button; tighten gap above Get Inspired after sold cars. Desktop unchanged. */ @media screen and (max-width: 800px), screen and (max-height: 520px) and (orientation: landscape) { /* Less empty space above GET INSPIRED. Real DOM: div.wrapper > section#reviews (padding-bottom 100px, dark cars photo) directly precedes section#instagram (padding-top 50px) - both trimmed on mobile. */ #reviews, section#reviews, .home #reviews { padding-bottom: 40px !important; margin-bottom: 0 !important; } #carsHome, #otherHome, section#carsHome, section#otherHome { margin-bottom: 0 !important; } #instagram, section#instagram, #instagram.wp-block-group, .home #instagram { margin-top: 0 !important; padding-top: 16px !important; } /* Space between GET INSPIRED heading and Instagram button */ /* Real DOM: section#instagram.containerBig > h2 + a.button (float:right) */ #instagram h2, section#instagram h2, #instagram .wp-block-heading { margin-top: 0 !important; margin-bottom: 20px !important; } #instagram > a.button, #instagram a.button, #instagram .button, #instagram .wp-block-button, #instagram a.wp-block-button__link { margin-top: 0 !important; margin-bottom: 20px !important; } #instagram #sb_instagram #sbi_images { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: 160px !important; align-content: start !important; gap: 8px !important; padding: 0 !important; height: auto !important; } #instagram #sb_instagram #sbi_images .sbi_item, #instagram #sb_instagram #sbi_images .sbi_item:nth-child(n) { position: static !important; left: auto !important; top: auto !important; float: none !important; clear: none !important; display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 160px !important; min-height: 160px !important; margin: 0 !important; padding: 0 !important; aspect-ratio: auto !important; box-sizing: border-box !important; } #instagram #sb_instagram #sbi_images .sbi_item .sbi_photo_wrap, #instagram #sb_instagram #sbi_images .sbi_item .sbi_photo { width: 100% !important; height: 100% !important; } #instagram #sb_instagram #sbi_images .sbi_item .sbi_photo { background-size: cover !important; background-position: center !important; } #instagram #sb_instagram #sbi_images .sbi_item .sbi_photo img { width: 100% !important; height: 100% !important; object-fit: cover !important; } } /* === NIKOLA END: mobile Get Inspired Instagram collage === */ /* === NIKOLA START: cars iPad/tablet 4 columns === Rollback: delete this whole block (START → END). Force 4-column car grid on tablet/iPad (700–1600px). */ @media screen and (min-width: 700px) and (max-width: 1600px) { body.category-cars #cars > ul, #cars > ul { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px !important; align-items: start !important; } body.category-cars #cars > ul > li, #cars > ul > li { float: none !important; clear: none !important; width: auto !important; max-width: none !important; margin: 0 !important; box-sizing: border-box !important; } } /* === NIKOLA END: cars iPad/tablet 4 columns === */ /* === NIKOLA START: cars iPad/tablet � search beside Sort/Filter === Rollback: delete this whole block (START → END). One-row toolbar (search | Sort by price | Filter) from 700px up through large iPads (~1366). Was max-width 1200 � iPad Pro landscape often wider, so the rule never fired. Phone portrait (<700) unchanged. */ @media screen and (min-width: 700px) and (max-width: 1600px) { #formFilter .wrap { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; flex-wrap: nowrap !important; } #formFilter .wrap .left-search { flex: 1 1 auto !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; float: none !important; } #formFilter .wrap .left-search fieldset, #formFilter .wrap .left-search input[name="searchTerm"] { width: 100% !important; max-width: none !important; box-sizing: border-box !important; } #formFilter .filters-container { display: flex !important; flex: 0 0 auto !important; flex-direction: row !important; flex-wrap: nowrap !important; width: auto !important; max-width: none !important; margin-top: 0 !important; margin-left: 0 !important; gap: 8px !important; float: none !important; } #formFilter .filters-container .filter-item { flex: 0 0 auto !important; float: none !important; } #formFilter .filters-container .filter-item .flexi { display: flex !important; gap: 8px !important; align-items: center !important; } } /* === NIKOLA END: cars iPad/tablet � search beside Sort/Filter === */ /* === NIKOLA START: cars landscape header � no sticky / no reveal-on-scroll-up === Rollback: delete this whole block (START → END). Problem: header.navigation is position:fixed; theme JS writes inline top:-95px when scrolling down and inline top:0 when scrolling back up (reveal-on-scroll-up), so the white bar drops back down mid-grid and eats vertical space in landscape Fix: in phone/tablet landscape on the cars listing only, take the header out of the fixed layer (position:absolute at the document top, !important beats the inline top the JS writes). It now scrolls away with the page and is only visible at the very top. The theme's .underheader spacer keeps the top offset, so nothing shifts. Portrait + desktop unchanged. */ @media only screen and (orientation: landscape) and (max-height: 520px) and (min-width: 600px) { body.category-cars header.navigation, body.category-cars header.navigation.scrolled, body.category-cars header.navigation.sticky, body.category-cars header.navigation.is-sticky, body.category-cars header.navigation.fixed, body.category-cars header.navigation.show, body.category-cars header.navigation.hide, body.category-cars header.navigation.nav-up, body.category-cars header.navigation.nav-down { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: auto !important; transform: none !important; -webkit-transform: none !important; transition: none !important; will-change: auto !important; opacity: 1 !important; visibility: visible !important; } } /* === NIKOLA END: cars landscape header � no sticky / no reveal-on-scroll-up === */ /* === NIKOLA START: cars landscape toolbar row + FAB hide + portrait text match === Rollback: delete this whole block (START -> END). Landscape only (phones on their side): search beside filters; hide gold .messageIcon; ALL card + overlay text forced to the exact computed sizes measured on portrait mobile (390px wide): .tag 9.6px | h3 14px | p 12px | p b 14px hoverInfo label 8px/9.6px | value 10px/12px | "Mileage" ::after 8px/9.6px Portrait unchanged (stacked search, FAB visible). */ @media (orientation: landscape) and (max-height: 520px) and (min-width: 600px) { /* Search + filters one clean row */ #formFilter .wrap { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; } #formFilter .wrap .left-search { flex: 1 1 auto !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; } #formFilter .wrap .left-search fieldset, #formFilter .wrap .left-search input[name="searchTerm"] { width: 100% !important; max-width: none !important; box-sizing: border-box !important; } #formFilter .filters-container { flex: 0 0 auto !important; width: auto !important; margin-top: 0 !important; gap: 8px !important; } #formFilter .filters-container .filter-item { flex: 0 0 auto !important; } #formFilter .filters-container .filter-item .flexi { gap: 8px !important; } /* Card tag / model name / price = exact portrait mobile sizes */ #cars ul li .image .tag { font-size: 9.6px !important; padding: 0 3px !important; } #cars ul li .content h3 { font-size: 14px !important; line-height: normal !important; } #cars ul li .content p { font-size: 12px !important; line-height: 15.6px !important; } #cars ul li .content p b { font-size: 14px !important; line-height: 18.2px !important; } /* Registration / Mileage overlay = exact portrait mobile sizes */ #cars ul li .image .hoverInfo { padding: 24px 0 6px !important; } #cars ul li .image .hoverInfo .item { padding: 4px 6px !important; } #cars ul li .image .hoverInfo .item p { font-size: 10px !important; line-height: 12px !important; } #cars ul li .image .hoverInfo .item p:first-child { font-size: 8px !important; line-height: 9.6px !important; margin-bottom: 2px !important; } /* keep the misspelled "Milage" label hidden, exactly like portrait */ #cars ul li .image .hoverInfo .item:nth-child(2) p:first-child { font-size: 0 !important; line-height: 9.6px !important; margin-bottom: 2px !important; } #cars ul li .image .hoverInfo .item:nth-child(2) p:first-child::after { font-size: 8px !important; line-height: 9.6px !important; } /* Hide gold chat FAB - landscape only */ .messageIcon { display: none !important; } } /* === NIKOLA END: cars landscape toolbar row + FAB hide + portrait text match === */ /* === NIKOLA START: cars landscape 4-column grid + wider search === Rollback: delete this whole block (START → END). Phone/tablet landscape only: 4 equal columns ≈portrait card size; search full width. Portrait + desktop unchanged. */ @media only screen and (orientation: landscape) and (max-height: 520px) and (min-width: 600px) { body.category-cars #cars > ul, #cars > ul { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px !important; align-items: start !important; } body.category-cars #cars > ul > li, #cars > ul > li { width: auto !important; margin: 0 !important; box-sizing: border-box !important; } body.category-cars #cars > ul > li .image, #cars > ul > li .image { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; } body.category-cars #cars > ul > li .content, #cars > ul > li .content { height: auto !important; min-height: 42px !important; } body.category-cars #formFilter .left-search, body.category-cars #formFilter .left-search fieldset, body.category-cars #formFilter .left-search input[name="searchTerm"], #formFilter .left-search, #formFilter .left-search fieldset, #formFilter .left-search input[name="searchTerm"] { width: 100% !important; max-width: none !important; box-sizing: border-box !important; } } /* === NIKOLA END: cars landscape 4-column grid + wider search === */ /* === NIKOLA START: cars mobile title + search/filter toolbar cleanup === Rollback: delete this whole block (START → END). MOBILE ONLY � portrait + landscape (max-width: 900px OR short landscape). A) /cars/ H1 "CARS": 50px/60px → 30px/1.2 (same as Services + Parts page titles), moved higher: .filter margin-top 30px → 10px, h1 margin-bottom 20px → 14px. B) Search + filters cleaner: search full width (theme max-width 300px removed), all controls 40px high, white fields with one light border, filters gap 16px → 8px, block margin-top 20px → 12px, labels 16px/700 → 13px/600 aligned with the selects; search + both selects share the same right edge. Desktop unchanged. */ @media screen and (max-width: 900px), screen and (max-height: 520px) and (orientation: landscape) { /* ---------- A) title smaller + higher ---------- */ .filter { margin-top: 10px !important; } #formFilter h1 { font-size: 30px !important; line-height: 1.2 !important; margin: 0 0 14px 0 !important; } /* ---------- B) search bar ---------- */ #formFilter .wrap .left-search { width: 100% !important; } #formFilter .left-search fieldset { display: block !important; position: relative !important; width: 100% !important; } #formFilter .left-search input { box-sizing: border-box !important; width: 100% !important; max-width: none !important; height: 40px !important; padding: 0 12px 0 40px !important; font-size: 14px !important; line-height: 40px !important; background: #fff !important; border: 1px solid rgba(0, 0, 0, 0.12) !important; border-radius: 4px !important; box-shadow: none !important; } #formFilter .left-search a.sendbutton { width: 40px !important; height: 40px !important; } /* ---------- B) filter rows (Sort by price / Filter Model) ---------- */ #formFilter .filters-container { margin-top: 12px !important; gap: 8px !important; } #formFilter .filters-container .filter-item .flexi { gap: 12px !important; align-items: center !important; } #formFilter .filters-container .filter-label { flex: 0 0 auto !important; margin: 0 !important; font-size: 13px !important; font-weight: 600 !important; line-height: 40px !important; white-space: nowrap !important; } #formFilter .filters-container fieldset { flex: 1 1 auto !important; width: auto !important; max-width: 200px !important; } #formFilter .filters-container select { box-sizing: border-box !important; width: 100% !important; height: 40px !important; padding: 0 32px 0 12px !important; font-size: 14px !important; line-height: 38px !important; background-color: #fff !important; border: 1px solid rgba(0, 0, 0, 0.12) !important; border-radius: 4px !important; box-shadow: none !important; } } /* === NIKOLA END: cars mobile title + search/filter toolbar cleanup === */ /* === NIKOLA RESTORE PACK 2026-09-21 17:50 === Clean merge: cars CSS restored + brace fix + approved logo/header/title. Rollback pieces by NIKOLA START/END markers. ================================================ */ /* === NIKOLA START: mobile hero title Independent / Tesla Dealer (two lines, 38px) === Rollback: delete this whole block (START → END). Two lines + larger size like before; covers wider phones + landscape (not only max-width 700px). */ @media (max-width: 900px), ((max-height: 520px) and (orientation: landscape)) { #headerVideo .content h1 { font-size: 0 !important; line-height: 0 !important; } #headerVideo .content h1::before { content: "Independent\A Tesla Dealer"; white-space: pre !important; display: block !important; text-align: center !important; font-size: 38px !important; font-weight: 500 !important; line-height: 1.15 !important; letter-spacing: normal !important; color: #fff !important; } } /* === NIKOLA END: mobile hero title Independent / Tesla Dealer === */ /* === NIKOLA START: mobile original logo sitewide (aligned lower with cart/menu) === Rollback: delete this whole block (START → END). Also remove or leave superseded older Arial-text logo rules; this block wins with !important. */ /* Shared: hide Arial/text fallback, show SVG logo, align with cart/menu */ @media (max-width: 900px), ((max-height: 520px) and (orientation: landscape)) { header.navigation nav .logo::before, header.navigation nav .logo::after, header.navigation .logo::before, header.navigation .logo::after { content: none !important; display: none !important; } header.navigation nav .logo svg, header.navigation .logo svg { display: block !important; opacity: 1 !important; visibility: visible !important; width: 150px !important; height: auto !important; } header.navigation nav .logo, header.navigation .logo { display: flex !important; align-items: center !important; width: 160px !important; height: auto !important; margin: 0 !important; /* a bit lower than previous live 10px */ padding: 14px 0 0 0 !important; background-image: none !important; } } /* Home: white logo over transparent header */ @media (max-width: 900px), ((max-height: 520px) and (orientation: landscape)) { body.home header.navigation { background: transparent !important; box-shadow: none !important; } body.home header.navigation .logo svg, body.home header.navigation .logo svg path, body.home header.navigation .logo svg polygon { fill: #fff !important; } } /* Non-home (Cars, Services, Parts, …): dark logo on light header */ @media (max-width: 900px), ((max-height: 520px) and (orientation: landscape)) { body:not(.home) header.navigation .logo svg, body:not(.home) header.navigation .logo svg path, body:not(.home) header.navigation .logo svg polygon { fill: #111 !important; } } /* Landscape: taller header → more padding */ @media (max-height: 520px) and (orientation: landscape) { header.navigation nav .logo, header.navigation .logo { padding-top: 26px !important; } } /* === NIKOLA END: mobile original logo sitewide === */ /* === NIKOLA START: mobile logo smaller + lower === Rollback: delete this whole block (START → END). Nudges sitewide original logo: slightly smaller and a bit lower vs cart/menu. */ @media (max-width: 900px), ((max-height: 520px) and (orientation: landscape)) { header.navigation nav .logo svg, header.navigation .logo svg { width: 128px !important; height: auto !important; } header.navigation nav .logo, header.navigation .logo { width: 140px !important; padding-top: 18px !important; } } @media (max-height: 520px) and (orientation: landscape) { header.navigation nav .logo, header.navigation .logo { padding-top: 30px !important; } } /* === NIKOLA END: mobile logo smaller + lower === */ /* === NIKOLA START: mobile transparent header icons + no white home bar === Rollback: delete this whole block (START → END). Home: header bar transparent (no white strip over video); white logo + white cart + white hamburger. Other pages: keep light header; dark logo/icons; cart + #trigger backgrounds transparent (no black boxes / no cart stripe). */ @media (max-width: 900px), ((max-height: 520px) and (orientation: landscape)) { /* HOMEPAGE � kill white bar */ body.home header.navigation, body.home header.navigation nav, body.home header.navigation .menuwrapper, body.home header.navigation .menuwrapper .wrapper { background: transparent !important; background-color: transparent !important; box-shadow: none !important; border: none !important; } /* Hamburger */ #trigger { background: transparent !important; background-color: transparent !important; box-shadow: none !important; border: none !important; outline: none !important; } #trigger span { background: #111 !important; } body.home #trigger span { background: #fff !important; } /* Cart button */ header.navigation nav .menuwrapper .wrapper .cart-contents, header.navigation .cart-contents, header.navigation a.cart-contents { background: transparent !important; background-color: transparent !important; box-shadow: none !important; border: none !important; border-left: 0 !important; border-right: 0 !important; outline: none !important; } /* divider stripe by cart */ header.navigation nav .menuwrapper .wrapper .cart-contents::after, header.navigation .menuwrapper .cart::after, header.navigation .menuwrapper .cart::before { content: none !important; display: none !important; border: none !important; width: 0 !important; box-shadow: none !important; } /* home: white cart glyph */ body.home header.navigation nav .menuwrapper .wrapper .cart-contents::before { filter: invert(1) !important; } /* home: force white logo (in case theme paints dark on white bar) */ body.home header.navigation .logo svg, body.home header.navigation .logo svg path, body.home header.navigation .logo svg polygon, body.home header.navigation nav .logo svg, body.home header.navigation nav .logo svg path, body.home header.navigation nav .logo svg polygon { fill: #fff !important; } } /* === NIKOLA END: mobile transparent header icons + no white home bar === */ /* ============================================================ * * Nikola Brussels cars listing (2026-09-20) * * REVERT: delete this entire block + Publish. * * A) Always show registration/mileage (.hoverInfo) * * REF under price: not enabled here because no Custom JS/footer plugin * * is installed. Do not use overflow:visible hacks. * * ============================================================ */ #cars ul li .image .hoverInfo { bottom: 0 !important; display: flex !important; } /* Mobile: smaller registration/mileage overlay text */ @media screen and (max-width: 800px) { #cars ul li .image .hoverInfo { padding-top: 24px !important; padding-bottom: 6px !important; } #cars ul li .image .hoverInfo .item { padding: 4px 6px !important; } #cars ul li .image .hoverInfo .item p { font-size: 11px !important; line-height: 1.2 !important; } #cars ul li .image .hoverInfo .item p:first-child { font-size: 9px !important; margin-bottom: 2px !important; letter-spacing: 0.02em; } } @media screen and (max-width: 500px) { #cars ul li .image .hoverInfo .item p { font-size: 10px !important; } #cars ul li .image .hoverInfo .item p:first-child { font-size: 8px !important; } } /* Fix Milage Mileage without breaking alignment/color */ #cars ul li .image .hoverInfo .item:nth-child(2) p:first-child { font-size: 0 !important; line-height: 1.3 !important; margin-bottom: 5px !important; opacity: 0.6 !important; color: #fff !important; } #cars ul li .image .hoverInfo .item:nth-child(2) p:first-child::after { content: "Mileage"; /* 0.9em theme label size; px keeps it visible while parent is font-size:0 */ font-size: 14.4px !important; line-height: 1.3 !important; text-transform: uppercase !important; opacity: 1 !important; color: inherit !important; display: inline !important; vertical-align: baseline !important; } /* Match theme label/value color, opacity, and no-wrap behavior */ #cars ul li .image .hoverInfo .item p { color: #fff !important; white-space: nowrap !important; } #cars ul li .image .hoverInfo .item p:first-child { opacity: 0.6 !important; } #cars ul li .image .hoverInfo .item p:not(:first-child) { opacity: 1 !important; } /* Keep listing REF searchable in DOM, but hide it visually. */ #cars ul li .image > h4 { opacity: 0 !important; pointer-events: none !important; } #cars ul li .image .hoverInfo .item:nth-child(3) { opacity: 0 !important; pointer-events: none !important; } /* Match registration label size, line-height, and spacing on mobile. */ @media screen and (max-width: 800px) { #cars ul li .image .hoverInfo .item:nth-child(2) p:first-child { line-height: 1.2 !important; margin-bottom: 2px !important; } #cars ul li .image .hoverInfo .item:nth-child(2) p:first-child::after { font-size: 9px !important; line-height: 1.2 !important; } } @media screen and (max-width: 500px) { #cars ul li .image .hoverInfo .item:nth-child(2) p:first-child { line-height: 1.2 !important; margin-bottom: 2px !important; } #cars ul li .image .hoverInfo .item:nth-child(2) p:first-child::after { font-size: 8px !important; line-height: 1.2 !important; } } /* Desktop single-car: hide vertical spec dividers, keep layout */ /* Cars overview: no vertical line between Registration / Mileage */ #cars ul li .image .hoverInfo .item { border-right: none !important; } @media screen and (min-width: 701px) { #primary .product .summary .infoProduct ul li { border-right: none !important; } #headerCars .items .item { border-right: none !important; } #infoCar ul li { border-right: none !important; } } /* Single car detail (#headerCars): no vertical dividers between specs */ #headerCars .items .item { border-right: none !important; } #headerCars .items .item:nth-child(2n), #headerCars .items .item:last-child { border-right: none !important; } /* ============================================================ * Homepage mobile hero buttons layout like mockup (2026-09-21) * Discover full-width; Watch video + Plan your visit side by side (outline). * REVERT: delete this block + Publish. Desktop unchanged (max-width 700px). * ============================================================ */ @media screen and (max-width: 700px) { #headerVideo .content .wp-block-buttons { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; width: 100% !important; max-width: 290px !important; margin-left: auto !important; margin-right: auto !important; gap: 12px !important; row-gap: 12px !important; } #headerVideo .content .wp-block-buttons .wp-block-button { margin: 0 !important; } #headerVideo .content .wp-block-buttons .wp-block-button:first-child { flex: 1 1 100% !important; width: 100% !important; } #headerVideo .content .wp-block-buttons .wp-block-button:nth-child(2), #headerVideo .content .wp-block-buttons .wp-block-button:nth-child(3) { flex: 1 1 calc(50% - 6px) !important; max-width: calc(50% - 6px) !important; } #headerVideo .content .wp-block-buttons .wp-block-button:nth-child(2) .wp-block-button__link, #headerVideo .content .wp-block-buttons .wp-block-button:nth-child(3) .wp-block-button__link { display: block !important; background-color: transparent !important; background-image: none !important; background-repeat: no-repeat !important; background-size: 20px !important; background-position: 90% center !important; color: #fff !important; border: 1px solid #fff !important; width: 100% !important; box-sizing: border-box !important; padding-left: 10px !important; padding-right: 14px !important; font-size: 14px !important; white-space: nowrap !important; } #headerVideo .content .wp-block-buttons .wp-block-button:first-child .wp-block-button__link { display: block !important; width: 100% !important; box-sizing: border-box !important; } } /* Title lift + Plan your visit padding (2026-09-21) - REVERT: delete this block */ @media screen and (max-width: 700px) { #headerVideo .content h1 { position: relative !important; top: -32px !important; } #headerVideo .content h1 + p { position: relative !important; top: -32px !important; } #headerVideo .content .wp-block-buttons .wp-block-button:nth-child(2) .wp-block-button__link, #headerVideo .content .wp-block-buttons .wp-block-button:nth-child(3) .wp-block-button__link { padding-left: 16px !important; padding-right: 72px !important; text-align: center !important; box-sizing: border-box !important; background-image: none !important; text-indent: -12px !important; } } /* ============================================================ Homepage hero spacing � title closer to subtitle, more air before buttons Mobile + desktop (2026-09-21). REVERT: delete this block + Publish. ============================================================ */ @media screen and (max-width: 700px) { #headerVideo .content h1 { margin-bottom: 6px !important; } #headerVideo .content h1 + p { margin-top: 0 !important; margin-bottom: 28px !important; } } @media screen and (min-width: 701px) { #headerVideo .content h1 { margin-bottom: 10px !important; } #headerVideo .content h1 + p { margin-top: 0 !important; margin-bottom: 36px !important; } } /* (removed superseded Mobile sitewide transparent header Arial-logo block � conflicted with original SVG logo) */ /* ============================================================ Homepage #carsHome title � NEWEST ARRIVALS only (no USED TESLAS) Mobile + desktop (2026-09-21). REVERT: delete this block + Publish. ============================================================ */ #carsHome h2 { font-size: 0 !important; letter-spacing: 0 !important; } #carsHome h2::before { content: "NEWEST ARRIVALS"; font-family: inherit; font-size: 50px; font-weight: 700; color: inherit; letter-spacing: inherit; text-transform: uppercase; line-height: 1.2; } @media screen and (max-width: 600px) { #carsHome h2::before { font-size: 30px; } } /* Option lists: gold check only on parent items, not nested children */ #interior .wrapperInfo ul ul li:before, #exterior .wrapperInfo ul ul li:before { content: none !important; display: none !important; width: 0 !important; margin-left: 0 !important; } /* Mobile button balance: keep Watch video centered; Plan your visit keeps the strong right gap. */ @media screen and (max-width: 700px) { #headerVideo .content .wp-block-buttons .wp-block-button:nth-child(2) .wp-block-button__link { padding-left: 16px !important; padding-right: 16px !important; text-align: center !important; box-sizing: border-box !important; background-image: none !important; text-indent: 0 !important; } #headerVideo .content .wp-block-buttons .wp-block-button:nth-child(3) .wp-block-button__link { padding-left: 16px !important; padding-right: 72px !important; text-align: center !important; box-sizing: border-box !important; background-image: none !important; text-indent: -12px !important; } } /* === NIKOLA START: cars landscape compact label specificity fix === */ @media (orientation: landscape) and (max-height: 520px) and (min-width: 600px) { #cars ul li .image .hoverInfo .item:nth-child(2) p:first-child::after { font-size: 8px !important; line-height: 9.6px !important; } } /* === NIKOLA END: cars landscape compact label specificity fix === */ /* NIKOLA START: /cars/ Ctrl+F REF find highlight (smaller, top-right) * Nikola request 2026-09-22 � smaller mark, top-right of photo. * REPLACES prior centered Ctrl+F find block if present. * REF invisible at rest (color:transparent); Ctrl+F paints match. * Must sit AFTER older opacity:0 hide rules AND replace/override centered Ctrl+F block. * Rollback: delete this whole NIKOLA START/END block. */ #cars ul li .image > h4 { position: absolute !important; top: 10px !important; right: 10px !important; left: auto !important; bottom: auto !important; width: auto !important; max-width: 45% !important; height: auto !important; margin: 0 !important; padding: 2px 4px !important; transform: none !important; display: block !important; opacity: 1 !important; color: transparent !important; font-size: 1 4px !important; font-weight: 400 !important; line-height: 1.2 !important; letter-spacing: 0.5px !important; text-align: right !important; pointer-events: none !important; z-index: 5 !important; } /* NIKOLA END: /cars/ Ctrl+F REF find highlight (smaller, top-right) */ /* NIKOLA START: New Arrivals mobile � hide Slick arrows + white right swipe hint * Nikola 2026-09-22: decorative white › on the right, vertically centered on photo; * larger/whiter; pointer-events:none so swipe works; Slick arrows hidden. * Desktop unchanged. Rollback: delete this whole NIKOLA START/END block. */ @media screen and (max-width: 900px), screen and (max-height: 520px) and (orientation: landscape) { #carsHome .slick-prev, #carsHome .slick-next, #carsHome .slick-arrow { display: none !important; opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; } #carsHome { position: relative; } /* Center on the carousel photo area (below title/button) */ #carsHome ul.slick-initialized { position: relative; } #carsHome ul.slick-initialized::after { content: "›"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 6; pointer-events: none; font-size: 64px; line-height: 1; font-weight: 300; color: #ffffff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 0 14px rgba(0, 0, 0, 0.3); animation: nikolaCarsHomeChevronPulse 2.4s ease-in-out infinite; } } @keyframes nikolaCarsHomeChevronPulse { 0%, 100% { opacity: 0.75; transform: translateY(-50%) translateX(0); } 50% { opacity: 1; transform: translateY(-50%) translateX(5px); } } @media (prefers-reduced-motion: reduce) { #carsHome ul.slick-initialized::after { animation: none !important; opacity: 0.95 !important; } } /* NIKOLA END: New Arrivals mobile � hide Slick arrows + white right swipe hint */ /* NIKOLA START: Who Are We mobile � hide Slick arrows + white right swipe hint */ /* Nikola 2026-09-22: same white › as New Arrivals; hide black Slick boxes; swipe OK. * Desktop unchanged. Rollback: delete this whole NIKOLA START/END block. */ @media screen and (max-width: 900px), screen and (max-height: 520px) and (orientation: landscape) { /* Hide the black Slick arrow boxes without disabling swipe/drag on the track. */ #aboutHome .slick-prev, #aboutHome .slick-next, #aboutHome .slick-arrow { display: none !important; opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; } /* Mirror the #carsHome pattern: anchor the decoration to the photo carousel. */ #aboutHome .left > ul.slick-initialized { position: relative; } #aboutHome .left > ul.slick-initialized::after { content: "›"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 6; pointer-events: none; font-size: 64px; line-height: 1; font-weight: 300; color: #ffffff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 0 14px rgba(0, 0, 0, 0.3); animation: nikolaAboutHomeChevronPulse 2.4s ease-in-out infinite; } } @keyframes nikolaAboutHomeChevronPulse { 0%, 100% { opacity: 0.75; transform: translateY(-50%) translateX(0); } 50% { opacity: 1; transform: translateY(-50%) translateX(5px); } } @media (prefers-reduced-motion: reduce) { #aboutHome .left > ul.slick-initialized::after { animation: none !important; opacity: 0.95 !important; } } /* NIKOLA END: Who Are We mobile � hide Slick arrows + white right swipe hint */ /* NIKOLA START: New Arrivals Discover more � remove button arrow and tighten frame * Nikola 2026-09-22: hide arrow-black.png bg on #carsHome .buttonWhite; tighter padding. * Restored after accidental drop during later Additional CSS edits. * Rollback: delete this whole NIKOLA START/END block. */ @media screen and (max-width: 900px), screen and (max-height: 520px) and (orientation: landscape) { #carsHome ul li .buttonWhite, #carsHome ul li .buttonWhite:hover, #carsHome ul li .buttonWhite:focus, #carsHome ul li a.buttonWhite { background-image: none !important; background-size: 0 !important; padding: 10px 15px !important; } } /* NIKOLA END: New Arrivals Discover more � remove button arrow and tighten frame */ /* NIKOLA START: homepage header only at document top (not sticky while scrolling) * Nikola 2026-09-22: header must NOT stay in view while scrolling � only visible * at the absolute top of the homepage. Use position:absolute so it scrolls away. * Keep transparency / white logo+icons (other NIKOLA blocks). Homepage only. * Rollback: delete this whole NIKOLA START/END block. */ @media screen and (max-width: 900px), screen and (max-height: 520px) and (orientation: landscape) { body.home header.navigation, body.home header.navigation.scrolled, body.home header.navigation.sticky, body.home header.navigation.is-sticky, body.home header.navigation.fixed, body.home header.navigation.show, body.home header.navigation.hide, body.home header.navigation.nav-up, body.home header.navigation.nav-down { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: auto !important; width: 100% !important; transform: none !important; -webkit-transform: none !important; margin-top: 0 !important; /* Do not force opacity/visibility � let it leave the viewport when scrolling */ z-index: 10000 !important; } } /* NIKOLA END: homepage header only at document top (not sticky while scrolling) */ /* NIKOLA START: mobile menu logo smaller (keep rest of menu as theme default) * Nikola 2026-09-22: after rejecting full one-pager, keep only smaller BigMenu logo. * Rollback: delete this whole NIKOLA START/END block. */ @media screen and (max-width: 900px), screen and (max-height: 520px) and (orientation: landscape) { .BigMenu .logo svg, .BigMenu .logo img { max-height: 36px !important; width: auto !important; height: auto !important; } .BigMenu .logo { margin-bottom: 22px; } } /* NIKOLA END: mobile menu logo smaller */ /* NIKOLA START: New Arrivals mobile arrow fallback */ @media screen and (max-width: 900px), screen and (max-height: 520px) and (orientation: landscape) { #carsHome ul { position: relative; } #carsHome ul::after { content: "›"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 20; pointer-events: none; font-size: 64px; line-height: 1; font-weight: 300; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.45), 0 0 14px rgba(0,0,0,.3); } } /* NIKOLA END: New Arrivals mobile arrow fallback */ /* NIKOLA START: New Arrivals image arrow visibility fallback */ @media screen and (max-width: 900px), screen and (max-height: 520px) and (orientation: landscape) { #carsHome ul li:first-child .image { position: relative; } #carsHome ul li:first-child .image::after { content: "›"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 50; pointer-events: none; font-size: 64px; line-height: 1; font-weight: 300; color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,.45), 0 0 14px rgba(0,0,0,.3); } } /* NIKOLA END: New Arrivals image arrow visibility fallback */ /* NIKOLA START: New Arrivals image arrow visibility fallback */ @media screen and (max-width: 900px), screen and (max-height: 520px) and (orientation: landscape) { #carsHome ul li:first-child .image { position: relative; } #carsHome ul li:first-child .image::after { content: "›"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 50; pointer-events: none; font-size: 64px; line-height: 1; font-weight: 300; color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,.45), 0 0 14px rgba(0,0,0,.3); } } /* NIKOLA END: New Arrivals image arrow visibility fallback */ /* Ensure the mobile New Arrivals chevron is right-centered */ @media screen and (max-width: 900px), screen and (max-height: 520px) and (orientation: landscape) { #carsHome ul li:first-child .image::after { position: absolute !important; left: auto !important; right: 12px !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; } } /* NIKOLA START: New Arrivals image arrow visibility fallback */ @media screen and (max-width: 900px), screen and (max-height: 520px) and (orientation: landscape) { #carsHome ul li:first-child .image { position: relative; } #carsHome ul li:first-child .image::after { content: "›"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 50; pointer-events: none; font-size: 64px; line-height: 1; font-weight: 300; color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,.45), 0 0 14px rgba(0,0,0,.3); } } /* NIKOLA END: New Arrivals image arrow visibility fallback */ /* Ensure the mobile New Arrivals chevron is right-centered */ @media screen and (max-width: 900px), screen and (max-height: 520px) and (orientation: landscape) { #carsHome ul li:first-child .image::after { position: absolute !important; left: auto !important; right: 12px !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; } } /* NIKOLA FIX: ASCII-safe mobile New Arrivals chevron */ @media screen and (max-width: 900px), screen and (max-height: 520px) and (orientation: landscape) { #carsHome ul.slick-initialized::after { content: "\203A" !important; left: auto !important; right: 12px !important; top: 50% !important; display: block !important; } #carsHome ul li:first-child .image::after { display: none !important; } } /* NIKOLA START: New Arrivals image arrow visibility fallback */ @media screen and (max-width: 900px), screen and (max-height: 520px) and (orientation: landscape) { #carsHome ul li:first-child .image { position: relative; } #carsHome ul li:first-child .image::after { content: "›"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 50; pointer-events: none; font-size: 64px; line-height: 1; font-weight: 300; color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,.45), 0 0 14px rgba(0,0,0,.3); } } /* NIKOLA END: New Arrivals image arrow visibility fallback */ /* Ensure the mobile New Arrivals chevron is right-centered */ @media screen and (max-width: 900px), screen and (max-height: 520px) and (orientation: landscape) { #carsHome ul li:first-child .image::after { position: absolute !important; left: auto !important; right: 12px !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; } } /* NIKOLA FIX: ASCII-safe mobile New Arrivals chevron */ @media screen and (max-width: 900px), screen and (max-height: 520px) and (orientation: landscape) { #carsHome ul.slick-initialized::after { content: "\203A" !important; left: auto !important; right: 12px !important; top: 50% !important; display: block !important; } #carsHome ul li:first-child .image::after { display: none !important; } } /* NIKOLA FIX: render escaped chevron above New Arrivals image */ @media screen and (max-width: 900px), screen and (max-height: 520px) and (orientation: landscape) { #carsHome ul.slick-initialized::after { display: none !important; } #carsHome ul li:first-child .image::after { content: "\203A" !important; display: block !important; position: absolute !important; left: auto !important; right: 12px !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; z-index: 100 !important; pointer-events: none !important; font-size: 64px !important; line-height: 1 !important; font-weight: 300 !important; color: #fff !important; text-shadow: 0 1px 3px rgba(0,0,0,.45), 0 0 14px rgba(0,0,0,.3) !important; } } /* NIKOLA START: New Arrivals image arrow visibility fallback */ @media screen and (max-width: 900px), screen and (max-height: 520px) and (orientation: landscape) { #carsHome ul li:first-child .image { position: relative; } #carsHome ul li:first-child .image::after { content: "›"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 50; pointer-events: none; font-size: 64px; line-height: 1; font-weight: 300; color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,.45), 0 0 14px rgba(0,0,0,.3); } } /* NIKOLA END: New Arrivals image arrow visibility fallback */ /* Ensure the mobile New Arrivals chevron is right-centered */ @media screen and (max-width: 900px), screen and (max-height: 520px) and (orientation: landscape) { #carsHome ul li:first-child .image::after { position: absolute !important; left: auto !important; right: 12px !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; } } /* NIKOLA FIX: ASCII-safe mobile New Arrivals chevron */ @media screen and (max-width: 900px), screen and (max-height: 520px) and (orientation: landscape) { #carsHome ul.slick-initialized::after { content: "\203A" !important; left: auto !important; right: 12px !important; top: 50% !important; display: block !important; } #carsHome ul li:first-child .image::after { display: none !important; } } /* NIKOLA FIX: render escaped chevron above New Arrivals image */ @media screen and (max-width: 900px), screen and (max-height: 520px) and (orientation: landscape) { #carsHome ul.slick-initialized::after { display: none !important; } #carsHome ul li:first-child .image::after { content: "\203A" !important; display: block !important; position: absolute !important; left: auto !important; right: 12px !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; z-index: 100 !important; pointer-events: none !important; font-size: 64px !important; line-height: 1 !important; font-weight: 300 !important; color: #fff !important; text-shadow: 0 1px 3px rgba(0,0,0,.45), 0 0 14px rgba(0,0,0,.3) !important; } } /* Final mobile chevron horizontal placement */ @media screen and (max-width: 900px), screen and (max-height: 520px) and (orientation: landscape) { #carsHome ul li:first-child .image::after { left: calc(100% - 76px) !important; right: auto !important; } } /* NIKOLA START: New Arrivals image arrow visibility fallback */ @media screen and (max-width: 900px), screen and (max-height: 520px) and (orientation: landscape) { #carsHome ul li:first-child .image { position: relative; } #carsHome ul li:first-child .image::after { content: "›"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 50; pointer-events: none; font-size: 64px; line-height: 1; font-weight: 300; color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,.45), 0 0 14px rgba(0,0,0,.3); } } /* NIKOLA END: New Arrivals image arrow visibility fallback */ /* Ensure the mobile New Arrivals chevron is right-centered */ @media screen and (max-width: 900px), screen and (max-height: 520px) and (orientation: landscape) { #carsHome ul li:first-child .image::after { position: absolute !important; left: auto !important; right: 12px !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; } } /* NIKOLA FIX: ASCII-safe mobile New Arrivals chevron */ @media screen and (max-width: 900px), screen and (max-height: 520px) and (orientation: landscape) { #carsHome ul.slick-initialized::after { content: "\203A" !important; left: auto !important; right: 12px !important; top: 50% !important; display: block !important; } #carsHome ul li:first-child .image::after { display: none !important; } } /* NIKOLA FIX: render escaped chevron above New Arrivals image */ @media screen and (max-width: 900px), screen and (max-height: 520px) and (orientation: landscape) { #carsHome ul.slick-initialized::after { display: none !important; } #carsHome ul li:first-child .image::after { content: "\203A" !important; display: block !important; position: absolute !important; left: auto !important; right: 12px !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; z-index: 100 !important; pointer-events: none !important; font-size: 64px !important; line-height: 1 !important; font-weight: 300 !important; color: #fff !important; text-shadow: 0 1px 3px rgba(0,0,0,.45), 0 0 14px rgba(0,0,0,.3) !important; } } /* Final mobile chevron horizontal placement */ @media screen and (max-width: 900px), screen and (max-height: 520px) and (orientation: landscape) { #carsHome ul li:first-child .image::after { left: calc(100% - 76px) !important; right: auto !important; } } /* NIKOLA START: New Arrivals + Who Are We white › mid-right fix * Nikola 2026-09-22: mid-right on photo; soft left→right nudge + opacity pulse. * Use \203A (not raw ›). Do NOT put !important on transform â€â€� that kills translateX in the animation. * Rollback: delete this whole NIKOLA START/END block. */ @media screen and (max-width: 900px), screen and (max-height: 520px) and (orientation: landscape) { #carsHome .slick-prev, #carsHome .slick-next, #carsHome .slick-arrow, #aboutHome .slick-prev, #aboutHome .slick-next, #aboutHome .slick-arrow { display: none !important; opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; } #carsHome ul.slick-initialized, #aboutHome .left > ul.slick-initialized { position: relative !important; } #carsHome ul.slick-initialized::after, #aboutHome .left > ul.slick-initialized::after { content: "\203A" !important; position: absolute !important; right: 12px !important; left: auto !important; top: 50% !important; bottom: auto !important; /* no !important on transform â€â€� keyframes must be able to add translateX */ transform: translateY(-50%); -webkit-transform: translateY(-50%); z-index: 6 !important; pointer-events: none !important; display: block !important; font-size: 64px !important; line-height: 1 !important; font-weight: 300 !important; color: #ffffff !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 0 14px rgba(0, 0, 0, 0.3) !important; } #carsHome ul.slick-initialized::after { animation: nikolaCarsHomeChevronPulse 2.4s ease-in-out infinite; } #aboutHome .left > ul.slick-initialized::after { animation: nikolaAboutHomeChevronPulse 2.4s ease-in-out infinite; } } @keyframes nikolaCarsHomeChevronPulse { 0%, 100% { opacity: 0.75; transform: translateY(-50%) translateX(0); } 50% { opacity: 1; transform: translateY(-50%) translateX(6px); } } @keyframes nikolaAboutHomeChevronPulse { 0%, 100% { opacity: 0.75; transform: translateY(-50%) translateX(0); } 50% { opacity: 1; transform: translateY(-50%) translateX(6px); } } @media (prefers-reduced-motion: reduce) { #carsHome ul.slick-initialized::after, #aboutHome .left > ul.slick-initialized::after { animation: none !important; opacity: 0.95 !important; } } /* NIKOLA END: New Arrivals + Who Are We white › mid-right fix */ /* NIKOLA: superseded original REF 392859 block removed; active block is below. */ /* NIKOLA START: New Arrivals REF 392859 band + single mobile chevron * * Nikola 2026-09-22: crop REF 392859 only so right wall/band is gone; * * one white › mid-right, vertically centered on the PHOTO (.slick-list), not the taller ul; * * hard-hide Slick arrows. Use \203A. No transform:!important (keeps translateX pulse). * * Rollback: delete this whole NIKOLA START/END block. * */ @media screen and (max-width: 900px), screen and (max-height: 520px) and (orientation: landscape) { /* REF 392859 only (card link contains ref-392859). Push crop left hard enough to drop the wall. */ #carsHome li:has(a[href*="ref-392859"]) .image { background-position: 15% center !important; background-size: 125% !important; overflow: hidden !important; } #carsHome .slick-prev, #carsHome .slick-next, #carsHome .slick-arrow, #carsHome .slick-prev::before, #carsHome .slick-next::before { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; font-size: 0 !important; pointer-events: none !important; } /* Kill every duplicate › so only .slick-list::after remains */ #carsHome .image::after, #carsHome ul.slick-initialized::after, #carsHome ul::after, #carsHome ul.slick-initialized li:first-child .image::after { content: none !important; display: none !important; animation: none !important; } #carsHome ul.slick-initialized .slick-list { position: relative !important; } /* Center on the photo viewport itself */ #carsHome ul.slick-initialized .slick-list::after { content: "\203A" !important; position: absolute !important; right: 12px !important; left: auto !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%); -webkit-transform: translateY(-50%); display: block !important; visibility: visible !important; pointer-events: none !important; z-index: 100 !important; color: #ffffff !important; font-size: 64px !important; line-height: 1 !important; font-weight: 300 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 0 14px rgba(0, 0, 0, 0.3) !important; animation: nikolaCarsHomeChevronPulse 2.4s ease-in-out infinite; } } @keyframes nikolaCarsHomeChevronPulse { 0%, 100% { opacity: 0.75; transform: translateY(-50%) translateX(0); } 50% { opacity: 1; transform: translateY(-50%) translateX(6px); } } @media (prefers-reduced-motion: reduce) { #carsHome ul.slick-initialized .slick-list::after { animation: none !important; opacity: 0.95 !important; } } /* NIKOLA END: New Arrivals REF 392859 band + single mobile chevron */ /* NIKOLA START: REF 392859 crop selector correction */ @media screen and (max-width: 900px) { #carsHome .slick-slide .image[style*="IMG_3745-scaled.jpg"] { background-position: 8%% center !important; } } /* NIKOLA END: REF 392859 crop selector correction */ /* NIKOLA: superseded duplicate REF 392859 block removed; active block is above. */ /* NIKOLA START: REF 392859 crop selector correction */ @media screen and (max-width: 900px) { #carsHome .slick-slide .image[style*="IMG_3745-scaled.jpg"] { background-position: 8% center !important; } } /* NIKOLA END: REF 392859 crop selector correction */ /* NIKOLA: visible REF 392859 mobile crop overlay */ @media screen and (max-width: 900px) { #carsHome li:has(a[href*="ref-392859"]) .image { position: relative !important; overflow: hidden !important; } #carsHome li:has(a[href*="ref-392859"]) .image::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; background-image: url("https://nikola-brussels.be/wp-content/uploads/2025/07/IMG_3745-scaled.jpg") !important; background-position: 15% center !important; background-size: 125% !important; background-repeat: no-repeat !important; pointer-events: none !important; } #carsHome li:has(a[href*="ref-392859"]) .image > * { position: relative !important; z-index: 1 !important; } } /* NIKOLA START: REF 392859 URL-anchored mobile crop */ @media screen and (max-width: 900px) { #carsHome li:has(a[href*="ref-392859"]) .image { background-position: 25% center !important; } } /* NIKOLA END: REF 392859 URL-anchored mobile crop */ /* NIKOLA START: Cars Specifications 3-column (desktop + mobile) * Replaces the previous 4-column desktop-only block (min-width 801px). * All viewports: 3 equal columns for #specsCar items. * Rollback: remove this whole NIKOLA START/END block from Additional CSS. */ body.single-cars #specsCar .content { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 24px 32px !important; } body.single-cars #specsCar .content > .item { float: none !important; width: auto !important; max-width: none !important; margin: 0 !important; } @media screen and (max-width: 480px) { body.single-cars #specsCar .content { gap: 16px 12px !important; } } /* NIKOLA END: Cars Specifications 3-column (desktop + mobile) */ /* NIKOLA live enforcement for #specsCar */ #specsCar .content { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 24px 32px !important; } #specsCar .content > .item { float: none !important; width: auto !important; max-width: none !important; margin: 0 !important; } #specsCar .content > .item:nth-child(1), #specsCar .content > .item:nth-child(3) { display: none !important; } @media screen and (max-width: 480px) { #specsCar .content { gap: 16px 12px !important; } } /* NIKOLA START: Cars Specifications centered to page width * Centers each #specsCar item (gold line + label + value) under the * centered SPECIFICATIONS heading. Use with existing 3-col grid + hide. * Rollback: remove this whole NIKOLA START/END block from Additional CSS. */ body.single-cars #specsCar .content { margin-left: auto !important; margin-right: auto !important; justify-items: center !important; } body.single-cars #specsCar .content > .item { text-align: center !important; width: 100% !important; max-width: 220px !important; margin-left: auto !important; margin-right: auto !important; } body.single-cars #specsCar .content > .item:before { margin-left: auto !important; margin-right: auto !important; } /* NIKOLA END: Cars Specifications centered to page width */ /* NIKOLA START: Cars header CTA — square Print left + dual white CTAs (desktop only) * Layout: Print square left of stacked Order + Plan your visit. * Styles: Print = transparent/outline like former Plan your visit; * Plan your visit = solid white like Order. * Rollback: remove this whole NIKOLA START/END block from Additional CSS. */ @media screen and (min-width: 801px) { body.single-cars #headerCars .items .item:last-child .inner { display: grid !important; grid-template-columns: auto minmax(180px, 220px) !important; grid-template-rows: auto auto !important; column-gap: 10px !important; row-gap: 10px !important; align-items: stretch !important; justify-content: center !important; width: max-content !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; } body.single-cars #headerCars .items .item:last-child .inner > a.buttonWhite { grid-column: 2 !important; grid-row: 1 !important; display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; box-sizing: border-box !important; } /* Plan your visit → solid white like Order */ body.single-cars #headerCars .items .item:last-child .inner > a.buttonWhite-invers { grid-column: 2 !important; grid-row: 2 !important; display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; box-sizing: border-box !important; background-color: #fff !important; border: 1px solid #fff !important; color: #000 !important; background-image: url(https://nikola-brussels.be/wp-content/themes/webit/images/arrow-black.png) !important; background-repeat: no-repeat !important; background-size: 20px !important; background-position: 90% center !important; } body.single-cars #headerCars .items .item:last-child .inner > a.buttonWhite-invers:hover { background-color: #d4b037 !important; border-color: #d4b037 !important; color: #fff !important; background-image: url(https://nikola-brussels.be/wp-content/themes/webit/images/arrow-white.png) !important; } /* Print square left — transparent / outline like former Plan your visit */ body.single-cars #headerCars .items .item:last-child .inner > a[onclick*="print"] { grid-column: 1 !important; grid-row: 1 / span 2 !important; align-self: stretch !important; width: auto !important; height: auto !important; aspect-ratio: 1 / 1 !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 10px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 8px !important; box-sizing: border-box !important; position: static !important; right: auto !important; top: auto !important; z-index: 1 !important; border: 1px solid #fff !important; border-radius: 4px !important; background-color: transparent !important; background-image: none !important; color: #fff !important; letter-spacing: 1px !important; font-size: 11px !important; text-indent: 0 !important; line-height: 1.2 !important; } body.single-cars #headerCars .items .item:last-child .inner > a[onclick*="print"]::before { content: "" !important; display: block !important; width: 22px !important; height: 22px !important; background-image: url(https://nikola-brussels.be/wp-content/themes/webit/images/print-white.png) !important; background-repeat: no-repeat !important; background-size: contain !important; background-position: center !important; } body.single-cars #headerCars .items .item:last-child .inner > a[onclick*="print"]:hover { background-color: #d4b037 !important; border-color: #d4b037 !important; color: #fff !important; background-image: none !important; } body.single-cars #headerCars .items .item:last-child .inner > a[onclick*="print"]:hover::before { background-image: url(https://nikola-brussels.be/wp-content/themes/webit/images/print-white.png) !important; } } /* NIKOLA END: Cars header CTA — square Print left + dual white CTAs (desktop only) */ /* NIKOLA START: Cars header white separators + raise bar + smaller chat (desktop only) * - White vertical lines between the four spec columns, 100px tall (= Print square) * - Raise #headerCars .items so Plan your visit clears the gold chat widget * - Slightly smaller fixed .messageIcon chat button on Cars ads * Rollback: remove this whole NIKOLA START/END block from Additional CSS. */ @media screen and (min-width: 801px) { /* Raise specs + CTA together above the fixed .messageIcon chat */ body.single-cars #headerCars .items { bottom: 65px !important; } /* White separators between the four spec columns only (not after price / CTA) */ body.single-cars #headerCars .items > .item:nth-child(-n+3) { position: relative !important; } body.single-cars #headerCars .items > .item:nth-child(-n+3)::after { content: "" !important; position: absolute !important; right: 0 !important; top: 50% !important; transform: translateY(-50%) !important; width: 1px !important; height: 100px !important; background: #fff !important; pointer-events: none !important; } /* Gold chat widget: a bit smaller so it covers less of the CTA */ body.single-cars .messageIcon { width: 56px !important; height: 56px !important; } body.single-cars .messageIcon a, body.single-cars .messageIcon img { width: 56px !important; height: 56px !important; max-width: 56px !important; max-height: 56px !important; display: block !important; } } /* NIKOLA END: Cars header white separators + raise bar + smaller chat (desktop only) *//* NIKOLA START: Sitewide desktop — smaller gold chat + centered bubble * Gold .messageIcon ~48px; white chat.png ~20px centered. * Desktop only (min-width 801px). All pages, not only Cars ads. * Overrides earlier single-cars 56px img rules via equal specificity + later order. * Rollback: remove this whole NIKOLA START/END block from Additional CSS. */ @media screen and (min-width: 801px) { .messageIcon, body.single-cars .messageIcon { width: 48px !important; height: 48px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; box-sizing: border-box !important; } .messageIcon > a, body.single-cars .messageIcon > a, .messageIcon a, body.single-cars .messageIcon a { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } .messageIcon img, body.single-cars .messageIcon img { width: 20px !important; height: 20px !important; max-width: 20px !important; max-height: 20px !important; object-fit: contain !important; margin: 0 !important; padding: 0 !important; } } /* NIKOLA END: Sitewide desktop — smaller gold chat + centered bubble */ /* NIKOLA START: Cars header bar — restore original height (desktop only) * Undoes bottom:65px raise from separators block; bar + fade sit as originally. * Keeps separators, CTA, chat, specs and all other live changes. * Rollback: remove this whole NIKOLA START/END block from Additional CSS. */ @media screen and (min-width: 801px) { body.single-cars #headerCars .items { bottom: 0 !important; } } /* NIKOLA END: Cars header bar — restore original height (desktop only) */ /* NIKOLA START: Footer logo smaller on mobile (sitewide) * Theme footer .logo is 225px; shrink slightly for phones + short landscape. * Targets footer only — header logo unchanged. Desktop unchanged. * Rollback: remove this whole NIKOLA START/END block from Additional CSS. */ @media screen and (max-width: 900px), screen and (max-height: 520px) and (orientation: landscape) { footer .logo, footer .containerBig > .logo { width: 170px !important; max-width: 170px !important; } footer .logo svg, footer .containerBig > .logo svg { width: 100% !important; height: auto !important; max-width: 100% !important; } } /* NIKOLA END: Footer logo smaller on mobile (sitewide) */ /* NIKOLA START: Cars #discover collage 2 columns * Mobile-only true-phone collage (max-width: 767px). * Equal 8px visual row/column gutters: aspect-ratio on the link (in-flow), * not on the li, so grid tracks match item height and row-gap stays visible. * Desktop/tablet above 767px keep the theme masonry layout. * Rollback: remove this whole NIKOLA START/END block from Additional CSS. */ @media screen and (max-width: 767px) { /* Height/flow fix: theme JS leaves a fixed inline height on the collage. */ html body.single-cars #discover { height: auto !important; min-height: 0 !important; overflow: visible !important; } html body.single-cars #discover ul { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } html body.single-cars #discover ul { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: none !important; grid-auto-rows: auto !important; align-items: start !important; align-content: start !important; justify-items: stretch !important; gap: 8px !important; row-gap: 8px !important; column-gap: 8px !important; list-style: none !important; margin: 0 !important; padding: 0 !important; width: 100% !important; box-sizing: border-box !important; min-height: unset !important; } /* Kill theme masonry float / nth-child sizes / padding-bottom hacks. */ html body.single-cars #discover ul > li:nth-child(n) { float: none !important; clear: none !important; width: 100% !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; border: 0 !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none !important; position: static !important; aspect-ratio: auto !important; overflow: hidden !important; display: block !important; align-self: start !important; box-sizing: border-box !important; background: none !important; } html body.single-cars #discover ul > li.hidden { display: none !important; } /* In-flow 4:3 box so the grid row height equals the photo box. */ html body.single-cars #discover ul > li > a { position: relative !important; inset: auto !important; display: block !important; width: 100% !important; height: auto !important; aspect-ratio: 4 / 3 !important; overflow: hidden !important; z-index: 1 !important; box-sizing: border-box !important; } html body.single-cars #discover ul > li > a > img, html body.single-cars #discover ul > li img { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } } /* NIKOLA END: Cars #discover collage 2 columns *//* NIKOLA START: Cars header mobile — small dashes between specs * Mobile only (max-width: 800px): two short vertical dashes between * the left and right spec columns in #headerCars .items (row1 + row2). * Dark grey so they stay visible on the white mobile specs panel. * Does not touch desktop separators (min-width 801px), CTA, chat, collage, or #specsCar. * Rollback: remove this whole NIKOLA START/END block from Additional CSS. */ @media screen and (max-width: 800px) { /* Left-column cells only (1 = top-left, 3 = bottom-left) */ body.single-cars #headerCars .items > .item:nth-child(1), body.single-cars #headerCars .items > .item:nth-child(3) { position: relative !important; } body.single-cars #headerCars .items > .item:nth-child(1)::after, body.single-cars #headerCars .items > .item:nth-child(3)::after { content: "" !important; position: absolute !important; right: 0 !important; top: 50% !important; transform: translateY(-50%) !important; width: 1px !important; height: 28px !important; background: #222 !important; opacity: 0.35 !important; pointer-events: none !important; z-index: 2 !important; } /* Never draw a dash after price or on the CTA column */ body.single-cars #headerCars .items > .item:nth-child(2)::after, body.single-cars #headerCars .items > .item:nth-child(4)::after, body.single-cars #headerCars .items > .item:nth-child(n+5)::after { content: none !important; display: none !important; } } /* NIKOLA END: Cars header mobile — small dashes between specs */ /* NIKOLA START: Newest Arrivals Coming Soon text black */ #carsHome .layer.soon, #carsHome .layer.soon::before, #carsHome .layer.soon::after { color: #000 !important; } /* NIKOLA END: Newest Arrivals Coming Soon text black */ /* NIKOLA START: /cars/ archive Coming Soon mobile smaller */ @media screen and (max-width: 800px) { .archive.category-cars #cars .layer.soon { font-size: 15px !important; /* current 20px -> 75% */ } } /* NIKOLA END */ /* NIKOLA START: Home mobile header logo contrast (2026-09-24) * White SVG on transparent home header over light sky/building = low contrast. * Transparent logo + subtle letter-only drop-shadow. Size unchanged; logo lowered to line up with cart + menu. * Footer logo untouched. Rollback: remove this whole NIKOLA START/END block. */ @media screen and (max-width: 900px), screen and (max-height: 520px) and (orientation: landscape) { body.home header.navigation .logo, body.home header.navigation nav .logo { background: transparent !important; border-radius: 0 !important; padding: 16 10px 4px !important; box-sizing: border-box !important; box-shadow: none !important; backdrop-filter: none !important; } body.home header.navigation .logo svg, body.home header.navigation nav .logo svg, body.home header.navigation .logo svg path, body.home header.navigation nav .logo svg path { fill: #fff !important; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)) !important; } } /* NIKOLA END: Home mobile header logo contrast (2026-09-24) */ /* NIKOLA START: hide Parts/Services (WooCommerce) product image hoverInfo overlays */ body.woocommerce #primary .products li .wc-img-wrapper .hoverInfo, body.woocommerce-page #primary .products li .wc-img-wrapper .hoverInfo { display: none !important; } /* NIKOLA END */ /* NIKOLA START: WooCommerce Parts/Services/Shop mobile 2-column product grid * Match Cars mobile: 2 columns + square images + smaller title / price / tags. * Scope: body.woocommerce / body.woocommerce-page #primary .products only. * Does NOT match #cars / Cars CPT. * Breakpoint: max-width 900px (same as Cars Additional CSS 2-col grid) * + short landscape phones (max-height 520px). * Desktop (≥901px portrait) unchanged. * Keep .hoverInfo hidden (separate live NIKOLA block). * Rollback: delete this entire NIKOLA START/END block from Additional CSS. * * 2026-09-24 center preview: CSS Grid + equal outer gutters; temporary-tab tested. * Grid neutralizes the archive shell width constraint that left a wide right gutter. */ @media screen and (max-width: 900px), screen and (max-height: 520px) and (orientation: landscape) { /* Max horizontal use: kill theme side padding on Woo archive shells */ body.woocommerce #primary, body.woocommerce-page #primary, body.woocommerce #content, body.woocommerce-page #content, body.woocommerce #main, body.woocommerce-page #main, body.woocommerce .site-content, body.woocommerce-page .site-content { padding-left: 4px !important; padding-right: 4px !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } body.woocommerce #primary .products, body.woocommerce-page #primary .products { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } body.woocommerce #primary .products > li.product, body.woocommerce-page #primary .products > li.product { float: none !important; width: auto !important; max-width: none !important; flex: unset !important; margin: 0 !important; box-sizing: border-box !important; } /* Square image area like Cars */ body.woocommerce #primary .products > li.product .wc-img-wrapper, body.woocommerce-page #primary .products > li.product .wc-img-wrapper { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; margin-bottom: 6px !important; overflow: hidden !important; } body.woocommerce #primary .products > li.product .wc-img-wrapper img, body.woocommerce #primary .products > li.product .wc-img-wrapper a img, body.woocommerce-page #primary .products > li.product .wc-img-wrapper img, body.woocommerce-page #primary .products > li.product .wc-img-wrapper a img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } body.woocommerce #primary .products > li.product h2, body.woocommerce #primary .products > li.product .woocommerce-loop-product__title, body.woocommerce-page #primary .products > li.product h2, body.woocommerce-page #primary .products > li.product .woocommerce-loop-product__title { font-size: 14px !important; line-height: 1.25 !important; letter-spacing: 0 !important; } body.woocommerce #primary .products > li.product .price, body.woocommerce-page #primary .products > li.product .price { font-size: 12px !important; line-height: 1.3 !important; } body.woocommerce #primary .products > li.product .amount, body.woocommerce-page #primary .products > li.product .amount { font-size: 14px !important; } body.woocommerce #primary .products > li.product .amountVat, body.woocommerce-page #primary .products > li.product .amountVat { font-size: 12px !important; } body.woocommerce #primary .products > li.product .onsale, body.woocommerce-page #primary .products > li.product .onsale { font-size: 9.6px !important; line-height: 1.2 !important; padding: 1px 6px !important; right: 5px !important; top: 5px !important; } body.woocommerce #primary .products > li.product .product-tags, body.woocommerce-page #primary .products > li.product .product-tags { font-size: 9.6px !important; } body.woocommerce #primary .products > li.product .product-tags a, body.woocommerce-page #primary .products > li.product .product-tags a { font-size: 9.6px !important; padding: 0 3px !important; line-height: 1.2 !important; } body.woocommerce #primary .products > li.product .wc-img-wrapper .tag, body.woocommerce #primary .products > li.product .image .tag, body.woocommerce-page #primary .products > li.product .wc-img-wrapper .tag, body.woocommerce-page #primary .products > li.product .image .tag { font-size: 9.6px !important; padding: 0 3px !important; left: 5px !important; top: 5px !important; } } /* NIKOLA END: WooCommerce Parts/Services/Shop mobile 2-column product grid */ /* NIKOLA START: Parts/Services hide product search */ /* The Woo Products Search wrapper includes the input, icon, and spacing. */ body.tax-product_cat.term-parts .dgwt-wcas-search-wrapp, body.tax-product_cat.term-services .dgwt-wcas-search-wrapp { display: none !important; } /* NIKOLA END: Parts/Services hide product search */ /* NIKOLA START: Hide Cars/Parts/Services nav dropdowns */ @media (min-width: 801px){ li:has(> a:is([href*="/cars/"],[href*="/nl/wagens/"])) > ul.sub-menu, li:has(> a:is([href*="/product-category/parts/"],[href*="/nl/productcategorie/onderdelen/"])) > ul.sub-menu, li:has(> a:is([href*="/product-category/services/"],[href*="/nl/productcategorie/diensten/"])) > ul.sub-menu{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;} } /* NIKOLA END: Hide Cars/Parts/Services nav dropdowns */ /* NIKOLA START: Home Parts/Services hide subtitle */ #otherHome ul li .content p{display:none!important;} /* NIKOLA END: Home Parts/Services hide subtitle */ /* NIKOLA START: Header slim */ /* seam fix: the home redesign rule "html.nkhp body.home .wrapper{background:#fff}" also hit the header wrapper */ html body header.navigation nav .menuwrapper .wrapper{background:transparent!important;background-color:transparent!important} @media (min-width:901px) and (min-height:521px), (min-width:901px) and (orientation:portrait){ html body header.navigation{height:72px!important;padding:0 0 0 40px!important;box-sizing:border-box!important;background:rgba(255,255,255,.96)!important;-webkit-backdrop-filter:saturate(160%) blur(10px);backdrop-filter:saturate(160%) blur(10px);box-shadow:0 1px 0 rgba(0,0,0,.07),0 8px 24px rgba(0,0,0,.04)!important;transition:top .3s ease,background-color .25s ease,box-shadow .25s ease!important} html body header.navigation nav{display:flex!important;align-items:center!important;height:72px!important} html body header.navigation nav > .clearing{display:none!important} html body header.navigation nav .logo{float:none!important;flex:0 0 auto!important;display:flex!important;align-items:center!important;width:150px!important;height:72px!important;margin:0!important;padding:0!important} html body header.navigation nav .logo svg{display:block!important;width:150px!important;height:auto!important;max-width:none!important} html body header.navigation nav .menuwrapper{float:none!important;flex:1 1 auto!important;display:flex!important;justify-content:flex-end!important;width:auto!important;height:72px!important;margin:0 0 0 24px!important} html body header.navigation nav .menuwrapper .wrapper{float:none!important;display:flex!important;align-items:center!important;height:72px!important} html body header.navigation nav .menuwrapper .wrapper .menuWrap{float:none!important;height:72px!important} html body header.navigation #menu-main-menu{display:flex!important;align-items:center!important;height:72px!important;margin:0!important;padding:0 8px 0 0!important} html body header.navigation #menu-main-menu > li{display:block!important;position:relative!important;height:72px!important} html body header.navigation #menu-main-menu > li > a{position:relative!important;display:flex!important;align-items:center!important;height:72px!important;padding:0 16px!important;color:#111!important;font-size:15px!important;font-weight:400!important;letter-spacing:.04em!important;line-height:1!important;text-transform:uppercase!important;transition:color .25s ease} html body header.navigation #menu-main-menu > li > a::after{content:"";position:absolute;left:16px;right:16px;bottom:23px;height:2px;background:#c9a53b;transform:scaleX(0);transform-origin:left center;transition:transform .25s ease} html body header.navigation #menu-main-menu > li > a:hover::after,html body header.navigation #menu-main-menu > li > a:focus-visible::after,html body header.navigation #menu-main-menu > li.current-menu-item > a::after,html body header.navigation #menu-main-menu > li.current-menu-ancestor > a::after,html body header.navigation #menu-main-menu > li.current-menu-parent > a::after,html body header.navigation #menu-main-menu > li.current-category-ancestor > a::after,html body header.navigation #menu-main-menu > li.current-page-ancestor > a::after,html body header.navigation #menu-main-menu > li.current_page_item > a::after,html body header.navigation #menu-main-menu > li.current-post-ancestor > a::after{transform:scaleX(1)} html body header.navigation nav .menuwrapper .wrapper a.cart-contents{float:none!important;position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;flex:0 0 auto!important;width:72px!important;height:72px!important;margin:0!important;padding:0!important;border-left:1px solid rgba(0,0,0,.08)!important;box-sizing:border-box!important} html body header.navigation nav .menuwrapper .wrapper a.cart-contents::before{width:22px!important;height:22px!important} html body header.navigation nav .menuwrapper .wrapper .cart-contents-count{top:calc(50% - 2px)!important;right:calc(50% - 15px)!important;width:18px!important;height:18px!important;padding:0!important;font-size:11px!important;line-height:18px!important} html body header.navigation nav .menuwrapper .wrapper #trigger{float:none!important;flex:0 0 auto!important;width:72px!important;height:72px!important;background:#000!important;transition:background-color .25s ease!important} html body header.navigation nav .menuwrapper .wrapper #trigger .wrap{width:28px!important;height:20px!important} html body header.navigation nav .menuwrapper .wrapper #trigger span{width:28px!important;height:2px!important;margin-top:0!important} html body header.navigation nav .menuwrapper .wrapper #trigger span:nth-child(1){top:0!important} html body header.navigation nav .menuwrapper .wrapper #trigger span:nth-child(2),html body header.navigation nav .menuwrapper .wrapper #trigger span:nth-child(3){top:9px!important} html body header.navigation nav .menuwrapper .wrapper #trigger span:nth-child(4){top:18px!important;width:20px!important} html body header.navigation nav .menuwrapper .wrapper #trigger:hover span:nth-child(4){width:28px!important} /* theme JS sets .underheader to the header height measured BEFORE this CSS existed (95px) and never re-measures */ html body .underheader{height:72px!important} } @media (max-width:900px), (max-height:520px) and (orientation:landscape){ /* mobile: homepage untouched (transparent, as today); every other page a uniform 60px bar */ html body:not(.home) header.navigation{height:60px!important;padding:0 0 0 16px!important;box-sizing:border-box!important;background:rgba(255,255,255,.96)!important;-webkit-backdrop-filter:saturate(160%) blur(10px);backdrop-filter:saturate(160%) blur(10px);box-shadow:0 1px 0 rgba(0,0,0,.07),0 6px 18px rgba(0,0,0,.04)!important} html body:not(.home) header.navigation nav{display:flex!important;align-items:center!important;height:60px!important} html body:not(.home) header.navigation nav > .clearing{display:none!important} html body:not(.home) header.navigation nav .logo{float:none!important;flex:0 0 auto!important;display:flex!important;align-items:center!important;width:auto!important;height:60px!important;margin:0!important;padding:0!important} html body:not(.home) header.navigation nav .logo svg{width:112px!important;height:auto!important} html body:not(.home) header.navigation nav .menuwrapper{float:none!important;display:flex!important;justify-content:flex-end!important;width:auto!important;height:60px!important;margin:0 0 0 auto!important} html body:not(.home) header.navigation nav .menuwrapper .wrapper{float:none!important;display:flex!important;align-items:center!important;height:60px!important} html body:not(.home) header.navigation nav .menuwrapper .wrapper a.cart-contents{float:none!important;position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;width:44px!important;height:60px!important;margin:0!important;padding:0!important;border:0!important;box-sizing:border-box!important} html body:not(.home) header.navigation nav .menuwrapper .wrapper a.cart-contents::before{width:23px!important;height:23px!important} html body:not(.home) header.navigation nav .menuwrapper .wrapper .cart-contents-count{top:calc(50% - 2px)!important;right:calc(50% - 15px)!important;width:17px!important;height:17px!important;padding:0!important;font-size:10.5px!important;line-height:17px!important} html body:not(.home) header.navigation nav .menuwrapper .wrapper #trigger{float:none!important;width:52px!important;height:60px!important} html body:not(.home) header.navigation nav .menuwrapper .wrapper #trigger .wrap{width:26px!important;height:18px!important} html body:not(.home) header.navigation nav .menuwrapper .wrapper #trigger span{width:26px!important;height:2px!important;margin-top:0!important} html body:not(.home) header.navigation nav .menuwrapper .wrapper #trigger span:nth-child(1){top:0!important} html body:not(.home) header.navigation nav .menuwrapper .wrapper #trigger span:nth-child(2),html body:not(.home) header.navigation nav .menuwrapper .wrapper #trigger span:nth-child(3){top:8px!important} html body:not(.home) header.navigation nav .menuwrapper .wrapper #trigger span:nth-child(4){top:16px!important;width:18px!important} html body:not(.home) .underheader{height:60px!important} } @media (min-width:901px) and (min-height:521px), (min-width:901px) and (orientation:portrait){ /* Variant B: homepage desktop at the top of the page = transparent bar over the hero video (html.nkhd-top is set by the script) */ html body.home header.navigation::before{content:"";position:absolute;top:0;right:0;bottom:-28px;left:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,0) 100%);opacity:0;pointer-events:none;transition:opacity .25s ease} html.nkhd-top body.home header.navigation{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important} html.nkhd-top body.home header.navigation::before{opacity:1} html.nkhd-top body.home header.navigation nav .logo svg,html.nkhd-top body.home header.navigation nav .logo svg path,html.nkhd-top body.home header.navigation nav .logo svg polygon{fill:#fff!important} html.nkhd-top body.home header.navigation #menu-main-menu > li > a{color:#fff!important} html.nkhd-top body.home header.navigation nav .menuwrapper .wrapper a.cart-contents{border-left-color:rgba(255,255,255,.22)!important} html.nkhd-top body.home header.navigation nav .menuwrapper .wrapper a.cart-contents::before{filter:invert(1)!important} html.nkhd-top body.home header.navigation nav .menuwrapper .wrapper #trigger{background:transparent!important} html.nkhd-top body.home header.navigation nav .menuwrapper .wrapper #trigger:hover{background:rgba(255,255,255,.12)!important} /* logo fill + cart icon switch instantly on purpose: Chrome left a stale paint when fill/filter were transitioned */ } /* NIKOLA END: Header slim */ /* ===== NIKOLA CART/CHECKOUT START (2026-10-08) ===== */ /* ========================================================================== NIKOLA START: Cart + Checkout refresh (preview v1, 2026-10-07) Scope: ONLY body.woocommerce-cart and body.woocommerce-checkout. Covers classic shortcode markup ([woocommerce_cart] / [woocommerce_checkout]) AND the Cart/Checkout blocks (.wc-block-cart / .wc-block-checkout). Specificity: every selector starts with body.:not(#nk) so it outranks the webit theme's #cart … / #payment rules without !important. !important is only used where the theme itself uses it (outline:none!important on *), so keyboard focus rings come back. ========================================================================== */ /* ---------- 1. Tokens ---------- */ :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) { --nk-ink:#151515; --nk-muted:#707070; --nk-line:#e8e8e8; --nk-line-strong:#d9d9d9; --nk-gold:#d4b037; --nk-gold-deep:#c9a53b; --nk-gold-ink:#8a6f1c; --nk-tint:#fbf6e7; --nk-soft:#f7f7f5; --nk-paper:#fff; --nk-ok:#1f7a45; --nk-err:#b42318; --nk-r-card:12px; --nk-r-field:8px; --nk-r-btn:6px; --nk-shadow:0 7px 22px rgba(0,0,0,.04); --nk-shadow-lift:0 18px 46px rgba(0,0,0,.08); --nk-ring:0 0 0 3px rgba(201,165,59,.28); --nk-font:Poppins,Arial,Helvetica,sans-serif; --nk-sticky-top:96px; /* below the fixed site header */ overflow-x:hidden; } /* ---------- 2. Page shell + title ---------- */ body.woocommerce-cart:not(#nk) #cart, body.woocommerce-checkout:not(#nk) #cart { max-width:1200px; width:auto; padding:0 24px 96px; margin:0 auto; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce, :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wp-block-woocommerce-cart, :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wp-block-woocommerce-checkout { max-width:1200px; margin:0 auto 96px; padding:0 24px; box-sizing:border-box; color:var(--nk-ink); font-family:var(--nk-font); font-size:15px; line-height:1.55; font-weight:400; } body.woocommerce-cart:not(#nk) #cart div.woocommerce, body.woocommerce-checkout:not(#nk) #cart div.woocommerce { padding:0; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce *, :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wp-block-woocommerce-cart *, :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wp-block-woocommerce-checkout * { font-weight:inherit; box-sizing:border-box; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce :is(strong,b,th), :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) :is(.wc-block-cart,.wc-block-checkout) :is(strong,b) { font-weight:600; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce p { line-height:1.6; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) h1:not(header *):not(.nk-skip-title) { max-width:1200px; margin:48px auto 32px; padding:0 24px; box-sizing:border-box; font:600 44px/1.08 var(--nk-font); letter-spacing:-.04em; text-transform:none; color:var(--nk-ink); } body.woocommerce-cart:not(#nk) #cart h1, body.woocommerce-checkout:not(#nk) #cart h1 { padding:0; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) h1:not(header *):not(.nk-skip-title)::after { content:""; display:block; width:42px; height:3px; margin-top:18px; background:var(--nk-gold-deep); } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) :is(div.woocommerce,.wc-block-cart,.wc-block-checkout) a:not(.button):not(.wc-block-components-button) { color:var(--nk-ink); text-decoration:underline; text-decoration-color:rgba(21,21,21,.25); text-underline-offset:3px; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) :is(div.woocommerce,.wc-block-cart,.wc-block-checkout) a:not(.button):not(.wc-block-components-button):hover { color:var(--nk-gold-ink); text-decoration-color:currentColor; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .screen-reader-text { position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; } /* ---------- 3. Focus (theme sets outline:none!important on *) ---------- */ :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible { outline:3px solid var(--nk-gold-deep)!important; outline-offset:2px; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) :is(input.input-text,select,textarea,.select2-selection,.wc-block-components-text-input input,.wc-block-components-quantity-selector input):focus, :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-quantity-selector:focus-within { border-color:var(--nk-gold-deep)!important; box-shadow:var(--nk-ring); outline:none!important; } /* ---------- 4. Buttons ---------- */ :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce :is(.button,button.button,a.button,input.button), :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-button:not(.is-link) { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:12px 20px; margin:0; border:1px solid var(--nk-ink); border-radius:var(--nk-r-btn); background:var(--nk-paper); background-image:none; color:var(--nk-ink); font:500 15px/1.2 var(--nk-font); letter-spacing:.02em; text-transform:none; text-decoration:none; cursor:pointer; transition:background-color .2s,border-color .2s,color .2s,box-shadow .2s; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce :is(.button,button.button,a.button,input.button):hover, :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-button:not(.is-link):hover { background:var(--nk-ink); background-image:none; color:#fff; border-color:var(--nk-ink); } /* primary: Proceed to checkout / Place order / blocks submit */ :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce :is(.checkout-button,#place_order,.button.alt), :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-button:is(.wc-block-cart__submit-button,.wc-block-components-checkout-place-order-button) { width:100%; min-height:56px; padding:16px 24px; background:var(--nk-ink); border-color:var(--nk-ink); color:#fff; font-size:16px; font-weight:600; letter-spacing:.02em; box-shadow:0 10px 24px rgba(0,0,0,.12); } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce :is(.checkout-button,#place_order,.button.alt)::after, :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) :is(.wc-block-cart__submit-button,.wc-block-components-checkout-place-order-button)::after { content:"\2192"; font-size:22px; line-height:1; transition:transform .2s; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce :is(.checkout-button,#place_order,.button.alt):hover, :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-button:is(.wc-block-cart__submit-button,.wc-block-components-checkout-place-order-button):hover { background:var(--nk-gold); border-color:var(--nk-gold); color:var(--nk-ink); } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce :is(.checkout-button,#place_order,.button.alt):hover::after { transform:translateX(4px); } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce :is(.button,button)[disabled], :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce :is(.button,button):disabled { opacity:.38; cursor:not-allowed; background:var(--nk-paper); color:var(--nk-ink); } /* ---------- 5. Form fields (shared, classic) ---------- */ :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce :is(input.input-text,input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password],select,textarea) { width:100%; min-height:52px; padding:13px 14px; margin:0; border:1px solid var(--nk-line-strong); border-radius:var(--nk-r-field); background:var(--nk-paper); color:var(--nk-ink); font:400 16px/1.4 var(--nk-font); /* 16px = no iOS zoom */ -webkit-appearance:none; appearance:none; transition:border-color .15s,box-shadow .15s; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce textarea { min-height:104px; resize:vertical; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce select { padding-right:42px; background:var(--nk-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23151515' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce ::placeholder { color:#9a9a9a; opacity:1; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce :is(input[type=radio],input[type=checkbox]) { -webkit-appearance:auto; appearance:auto; width:20px; height:20px; min-height:0; margin:0; padding:0; accent-color:var(--nk-ink); flex:0 0 auto; cursor:pointer; vertical-align:middle; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce .form-row { margin:0; padding:0; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce .form-row label { display:block; margin:0 0 6px; font-size:14px; font-weight:500; line-height:1.4; color:var(--nk-ink); } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce .form-row :is(abbr.required,.required) { color:var(--nk-gold-ink); text-decoration:none; border:0; font-weight:600; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce .form-row .optional { color:var(--nk-muted); font-weight:400; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce .form-row .woocommerce-input-wrapper { display:block; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce .form-row.woocommerce-invalid :is(input.input-text,select,.select2-selection) { border-color:var(--nk-err); box-shadow:0 0 0 3px rgba(180,35,24,.12); } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce .form-row.woocommerce-validated input.input-text { border-color:var(--nk-line-strong); } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce .form-row label.checkbox, :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce label.woocommerce-form__label-for-checkbox { position:relative; display:block; min-height:22px; margin:0; padding-left:32px; font-size:14px; font-weight:400; line-height:1.5; cursor:pointer; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce label.woocommerce-form__label-for-checkbox > input { position:absolute; left:0; top:1px; } /* selectWoo / select2 (country field) */ :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce .select2-hidden-accessible { border:0!important; clip:rect(0 0 0 0)!important; height:1px!important; overflow:hidden!important; padding:0!important; position:absolute!important; width:1px!important; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce .select2-container { width:100%!important; display:block; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce .select2-container .select2-selection--single { display:flex; align-items:center; height:52px; padding:0 42px 0 14px; border:1px solid var(--nk-line-strong); border-radius:var(--nk-r-field); background:var(--nk-paper); cursor:pointer; position:relative; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce .select2-selection__rendered { font-size:16px; color:var(--nk-ink); padding:0!important; line-height:1.4!important; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce .select2-selection__arrow { position:absolute; right:16px; top:50%; width:12px; height:8px; transform:translateY(-50%); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23151515' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce .select2-selection__arrow b { display:none; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .select2-dropdown { border-color:var(--nk-line-strong); border-radius:var(--nk-r-field); font-family:var(--nk-font); overflow:hidden; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .select2-results__option { padding:10px 14px; font-size:15px; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .select2-results__option--highlighted { background:var(--nk-tint)!important; color:var(--nk-ink)!important; } /* ---------- 6. Notices ---------- */ :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce :is(.woocommerce-message,.woocommerce-info,.woocommerce-error), :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-notice-banner { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; list-style:none; margin:0 0 24px; padding:16px 18px; text-align:left; background:var(--nk-paper); color:var(--nk-ink); border:1px solid var(--nk-line); border-left:4px solid var(--nk-gold-deep); border-radius:var(--nk-r-field); box-shadow:var(--nk-shadow); font-size:15px; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce .woocommerce-error, :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-notice-banner.is-error { border-left-color:var(--nk-err); background:#fff8f7; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce .woocommerce-error li { margin:0; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce :is(.woocommerce-message,.woocommerce-info) .button { order:2; margin-left:auto; width:auto; display:inline-flex; min-height:40px; padding:8px 14px; font-size:14px; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce .woocommerce-notices-wrapper:empty { display:none; } /* ========================================================================== CART (classic) ========================================================================== */ body.woocommerce-cart:not(#nk) div.woocommerce { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,380px); gap:32px 40px; align-items:start; } body.woocommerce-cart:not(#nk) div.woocommerce > * { grid-column:1 / -1; min-width:0; } body.woocommerce-cart:not(#nk) div.woocommerce > .woocommerce-cart-form { grid-column:1; } body.woocommerce-cart:not(#nk) div.woocommerce > .cart-collaterals { display:contents; } body.woocommerce-cart:not(#nk) .cart-collaterals > .cart_totals { grid-column:2; grid-row:span 2; float:none; width:auto!important; margin:0; position:sticky; top:var(--nk-sticky-top); } body.woocommerce-cart:not(#nk) .cart-collaterals > .cross-sells { grid-column:1; width:auto; float:none; } /* table → tidy card list (CSS grid per row; same markup) */ body.woocommerce-cart:not(#nk) table.shop_table.cart { display:block; width:100%; margin:0; border:1px solid var(--nk-line); border-radius:var(--nk-r-card); background:var(--nk-paper); box-shadow:var(--nk-shadow); border-collapse:separate; border-spacing:0; } body.woocommerce-cart:not(#nk) table.shop_table.cart :is(thead,tbody) { display:block; } body.woocommerce-cart:not(#nk) table.shop_table.cart tr { display:grid; align-items:center; gap:4px 20px; padding:20px 24px; border-top:1px solid var(--nk-line); grid-template-columns:88px minmax(0,1fr) 140px 112px 40px; grid-template-areas:"thumb name qty sub remove" "thumb price qty sub remove"; } body.woocommerce-cart:not(#nk) table.shop_table.cart thead tr { padding:14px 24px; border-top:0; grid-template-areas:"name name qty sub remove"; } body.woocommerce-cart:not(#nk) table.shop_table.cart :is(th,td) { display:block; padding:0; border:0; text-align:left!important; line-height:1.45; min-width:0; background:none; } body.woocommerce-cart:not(#nk) table.shop_table.cart :is(th,td)::before { content:none; } body.woocommerce-cart:not(#nk) table.shop_table.cart thead th { font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--nk-muted); } body.woocommerce-cart:not(#nk) table.shop_table.cart thead :is(.product-thumbnail,.product-price) { display:none; } body.woocommerce-cart:not(#nk) table.shop_table.cart .product-remove { grid-area:remove; justify-self:end; } body.woocommerce-cart:not(#nk) table.shop_table.cart .product-thumbnail { grid-area:thumb; min-width:0; } body.woocommerce-cart:not(#nk) table.shop_table.cart .product-name { grid-area:name; align-self:end; font-size:15px; font-weight:500; } body.woocommerce-cart:not(#nk) table.shop_table.cart .product-price { grid-area:price; align-self:start; font-size:13px; color:var(--nk-muted); } body.woocommerce-cart:not(#nk) table.shop_table.cart .product-quantity { grid-area:qty; min-width:0; } body.woocommerce-cart:not(#nk) table.shop_table.cart .product-subtotal { grid-area:sub; text-align:right!important; font-weight:600; font-size:15px; } body.woocommerce-cart:not(#nk) table.shop_table.cart thead .product-subtotal { font-weight:500; font-size:12px; } body.woocommerce-cart:not(#nk) table.shop_table.cart .product-thumbnail img { display:block; width:88px!important; height:88px; object-fit:cover; border-radius:10px; border:1px solid var(--nk-line); background:var(--nk-soft); box-shadow:none; } body.woocommerce-cart:not(#nk) table.shop_table.cart .product-name a { text-decoration:none!important; color:var(--nk-ink)!important; } body.woocommerce-cart:not(#nk) table.shop_table.cart .product-name a:hover { color:var(--nk-gold-ink)!important; } body.woocommerce-cart:not(#nk) table.shop_table.cart .product-name :is(.variation,dl) { margin:4px 0 0; font-size:13px; font-weight:400; color:var(--nk-muted); } body.woocommerce-cart:not(#nk) table.shop_table.cart .product-name dl.variation :is(dt,dd,p) { display:inline; margin:0; padding:0; float:none; font-weight:400; } body.woocommerce-cart:not(#nk) table.shop_table.cart .product-name dl.variation dd::after { content:""; display:block; } body.woocommerce-cart:not(#nk) table.shop_table.cart .product-name .backorder_notification { margin:4px 0 0; font-size:12px; color:var(--nk-gold-ink); } body.woocommerce-cart:not(#nk) table.shop_table.cart .product-price :is(.amount,.amountVat) { display:block; } body.woocommerce-cart:not(#nk) table.shop_table.cart .product-price .amountVat { font-size:12px; color:#8d8d8d; } body.woocommerce-cart:not(#nk) table.shop_table.cart .product-price small { font-size:inherit; } body.woocommerce-cart:not(#nk) table.shop_table.cart a.remove { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; font-size:24px; line-height:1; font-weight:400; color:var(--nk-muted)!important; text-decoration:none; border:1px solid transparent; transition:all .2s; } body.woocommerce-cart:not(#nk) table.shop_table.cart a.remove:hover { color:var(--nk-err)!important; background:#fff1f0; border-color:#f6d0cc; } /* actions row: coupon + update */ body.woocommerce-cart:not(#nk) table.shop_table.cart tr:has(> td.actions) { display:block; padding:18px 24px; background:var(--nk-soft); border-radius:0 0 var(--nk-r-card) var(--nk-r-card); } body.woocommerce-cart:not(#nk) table.shop_table.cart td.actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; text-align:left; } body.woocommerce-cart:not(#nk) table.shop_table.cart td.actions .coupon { display:flex; gap:8px; float:none; flex:1 1 320px; max-width:440px; } body.woocommerce-cart:not(#nk) table.shop_table.cart td.actions .coupon label { display:none; } body.woocommerce-cart:not(#nk) table.shop_table.cart td.actions .coupon .input-text { width:auto; min-width:0; flex:1 1 auto; min-height:48px; margin:0; font-size:15px; } body.woocommerce-cart:not(#nk) table.shop_table.cart td.actions .coupon .button { background:var(--nk-paper); border-color:var(--nk-line-strong); white-space:nowrap; } body.woocommerce-cart:not(#nk) table.shop_table.cart td.actions .coupon .button:hover { border-color:var(--nk-ink); background:var(--nk-ink); color:#fff; } body.woocommerce-cart:not(#nk) table.shop_table.cart td.actions > .button { margin-left:auto; display:inline-flex; width:auto; } /* collapsed coupon (needs nikola-cart-enhance.js; without JS the field simply stays visible) */ body.woocommerce-cart:not(#nk) .nk-coupon-toggle { appearance:none; background:none; border:0; padding:6px 0; font:500 14px/1.4 var(--nk-font); color:var(--nk-ink); text-decoration:underline; text-underline-offset:3px; cursor:pointer; min-height:44px; } body.woocommerce-cart:not(#nk) .nk-coupon-toggle:hover { color:var(--nk-gold-ink); } body.woocommerce-cart:not(#nk) table.shop_table.cart td.actions.nk-coupon-closed .coupon { display:none; } /* quantity: plain number field (no JS) … */ body.woocommerce-cart:not(#nk) table.shop_table.cart .quantity { display:inline-flex; align-items:stretch; width:auto; max-width:140px; border:1px solid var(--nk-line-strong); border-radius:var(--nk-r-field); background:var(--nk-paper); overflow:hidden; } body.woocommerce-cart:not(#nk) table.shop_table.cart .quantity:focus-within { border-color:var(--nk-gold-deep); box-shadow:var(--nk-ring); } body.woocommerce-cart:not(#nk) table.shop_table.cart .quantity .qty { width:64px; min-height:44px; padding:0 4px; border:0!important; border-radius:0; box-shadow:none!important; text-align:center; font:500 16px/1 var(--nk-font); -moz-appearance:textfield; background:transparent; } /* … turned into − / + stepper by nikola-cart-enhance.js */ body.woocommerce-cart:not(#nk) .quantity.nk-stepper .qty::-webkit-inner-spin-button, body.woocommerce-cart:not(#nk) .quantity.nk-stepper .qty::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; } body.woocommerce-cart:not(#nk) .quantity.nk-stepper .qty { width:44px; } body.woocommerce-cart:not(#nk) .quantity .nk-qty-btn { width:44px; min-height:44px; border:0; background:transparent; color:var(--nk-ink); cursor:pointer; font:400 20px/1 var(--nk-font); display:flex; align-items:center; justify-content:center; padding:0; } body.woocommerce-cart:not(#nk) .quantity .nk-qty-btn:hover { background:var(--nk-soft); } body.woocommerce-cart:not(#nk) .quantity .nk-qty-btn:disabled { color:#c4c4c4; cursor:not-allowed; background:transparent; } /* totals card */ body.woocommerce-cart:not(#nk) .cart_totals { padding:28px; border:1px solid var(--nk-line); border-radius:var(--nk-r-card); background:var(--nk-paper); box-shadow:var(--nk-shadow-lift); } body.woocommerce-cart:not(#nk) .cart_totals > h2 { margin:0 0 16px; font:600 22px/1.2 var(--nk-font); letter-spacing:-.02em; text-transform:none; } body.woocommerce-cart:not(#nk) .cart_totals table.shop_table { display:block; width:100%; margin:0 0 20px; border:0; box-shadow:none; border-radius:0; } body.woocommerce-cart:not(#nk) .cart_totals table.shop_table tbody { display:block; } body.woocommerce-cart:not(#nk) .cart_totals table.shop_table tr { display:flex; justify-content:space-between; align-items:baseline; gap:12px; border-top:1px solid var(--nk-line); } body.woocommerce-cart:not(#nk) .cart_totals table.shop_table tr:first-child { border-top:0; } body.woocommerce-cart:not(#nk) .cart_totals table.shop_table tr > * { display:block; border-top:0!important; } body.woocommerce-cart:not(#nk) .cart_totals table.shop_table tr.shipping { flex-wrap:wrap; } body.woocommerce-cart:not(#nk) .cart_totals table.shop_table tr.shipping > * { flex:1 1 100%; width:100%; } body.woocommerce-cart:not(#nk) .cart_totals table.shop_table tr.shipping > th { padding-bottom:0; } body.woocommerce-cart:not(#nk) .cart_totals table.shop_table :is(th,td) { padding:12px 0; border:0; border-top:1px solid var(--nk-line); vertical-align:top; line-height:1.5; background:none; font-size:15px; } body.woocommerce-cart:not(#nk) .cart_totals table.shop_table :is(th,td)::before { content:none; } body.woocommerce-cart:not(#nk) .cart_totals table.shop_table tr:first-child :is(th,td) { border-top:0; } body.woocommerce-cart:not(#nk) .cart_totals table.shop_table th { font-weight:400; color:var(--nk-muted); text-align:left; } body.woocommerce-cart:not(#nk) .cart_totals table.shop_table td { text-align:right!important; } body.woocommerce-cart:not(#nk) .cart_totals .order-total { background:none; } body.woocommerce-cart:not(#nk) .cart_totals table.shop_table tr.order-total { border-top:1px solid var(--nk-ink); } body.woocommerce-cart:not(#nk) .cart_totals .order-total :is(th,td) { padding-top:16px; color:var(--nk-ink); font-weight:600; } body.woocommerce-cart:not(#nk) .cart_totals .order-total td strong { font-size:22px; letter-spacing:-.02em; } body.woocommerce-cart:not(#nk) .cart_totals .includes_tax { display:block; font-size:12px; font-weight:400; color:var(--nk-muted); } body.woocommerce-cart:not(#nk) .cart_totals .wc-proceed-to-checkout { padding:0; margin:0; } body.woocommerce-cart:not(#nk) .cart_totals .wc-proceed-to-checkout::after { content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%238a6f1c' stroke-width='2.2'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") "\00A0 Secure checkout \00B7 Prices incl. 21% VAT"; display:block; margin-top:14px; text-align:center; font-size:12px; line-height:1.5; color:var(--nk-muted); } /* shipping options (cart + checkout) */ :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce ul.woocommerce-shipping-methods { list-style:none; margin:0; padding:0; display:grid; gap:8px; text-align:left; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce ul.woocommerce-shipping-methods li { display:flex; align-items:center; gap:10px; margin:0; padding:10px 12px; border:1px solid var(--nk-line); border-radius:var(--nk-r-field); font-size:14px; line-height:1.4; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce ul.woocommerce-shipping-methods li:has(input:checked) { border-color:var(--nk-ink); background:var(--nk-tint); } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce ul.woocommerce-shipping-methods li label { margin:0; font-weight:500; cursor:pointer; flex:1; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce .woocommerce-shipping-destination { margin:10px 0 0; font-size:12px; color:var(--nk-muted); text-align:left; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce .shipping-calculator-button { font-size:13px; } body.woocommerce-cart:not(#nk) .cart_totals tr.shipping td { text-align:left!important; } /* empty cart */ body.woocommerce-cart:not(#nk) div.woocommerce .cart-empty { justify-content:center; padding:40px 24px; font-size:17px; } body.woocommerce-cart:not(#nk) div.woocommerce .return-to-shop { text-align:center; } body.woocommerce-cart:not(#nk) div.woocommerce .return-to-shop .button { background:var(--nk-ink); color:#fff; } /* cross-sells */ body.woocommerce-cart:not(#nk) .cross-sells > h2 { font:600 22px/1.2 var(--nk-font); letter-spacing:-.02em; text-transform:none; margin:8px 0 16px; } body.woocommerce-cart:not(#nk) .cross-sells ul.products { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:20px; margin:0; padding:0; list-style:none; } body.woocommerce-cart:not(#nk) .cross-sells ul.products li { width:auto!important; float:none!important; margin:0!important; padding:14px; border:1px solid var(--nk-line); border-radius:var(--nk-r-card); background:var(--nk-paper); } body.woocommerce-cart:not(#nk) .cross-sells ul.products li img { width:100%; height:auto!important; aspect-ratio:1; object-fit:cover; border-radius:8px; } /* ========================================================================== CHECKOUT (classic) ========================================================================== */ body.woocommerce-checkout:not(#nk) div.woocommerce > :is(.woocommerce-form-coupon-toggle,.checkout_coupon,.woocommerce-notices-wrapper,.woocommerce-form-login-toggle,.woocommerce-form-login) { max-width:calc(100% - 420px); } body.woocommerce-checkout:not(#nk) div.woocommerce .woocommerce-form-coupon-toggle .woocommerce-info { border-left-color:var(--nk-line-strong); box-shadow:none; background:var(--nk-soft); font-size:14px; } body.woocommerce-checkout:not(#nk) div.woocommerce form.checkout_coupon { margin:-12px 0 24px; padding:18px; border:1px solid var(--nk-line); border-radius:var(--nk-r-card); display:grid; grid-template-columns:1fr auto; gap:10px; } body.woocommerce-checkout:not(#nk) div.woocommerce form.checkout_coupon[style*="none"] { display:none; } body.woocommerce-checkout:not(#nk) div.woocommerce form.checkout_coupon > p:first-child { grid-column:1 / -1; margin:0; font-size:14px; color:var(--nk-muted); } body.woocommerce-checkout:not(#nk) div.woocommerce form.checkout_coupon .clear { display:none; } body.woocommerce-checkout:not(#nk) form.checkout.woocommerce-checkout { display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,400px); column-gap:40px; align-items:start; } body.woocommerce-checkout:not(#nk) form.checkout > * { grid-column:1 / -1; } body.woocommerce-checkout:not(#nk) form.checkout > #customer_details { grid-column:1; grid-row:2 / span 2; display:grid; gap:24px; width:auto; } body.woocommerce-checkout:not(#nk) form.checkout > #order_review_heading { grid-column:2; grid-row:2; position:sticky; top:var(--nk-sticky-top); z-index:2; margin:0; height:72px; padding:24px 28px 0; border:1px solid var(--nk-line); border-bottom:0; border-radius:var(--nk-r-card) var(--nk-r-card) 0 0; background:var(--nk-paper); font:600 22px/1.2 var(--nk-font); letter-spacing:-.02em; text-transform:none; } body.woocommerce-checkout:not(#nk) form.checkout > #order_review { grid-column:2; grid-row:3; position:sticky; top:calc(var(--nk-sticky-top) + 72px); padding:4px 28px 28px; border:1px solid var(--nk-line); border-top:0; border-radius:0 0 var(--nk-r-card) var(--nk-r-card); background:var(--nk-paper); box-shadow:0 22px 34px -18px rgba(0,0,0,.14); } body.woocommerce-checkout:not(#nk) form.checkout > .woocommerce-NoticeGroup { grid-row:1; } body.woocommerce-checkout:not(#nk) #customer_details :is(.col-1,.col-2) { float:none; width:auto; max-width:none; padding:0; margin:0; } body.woocommerce-checkout:not(#nk) #customer_details .col-2 { display:grid; gap:24px; } body.woocommerce-checkout:not(#nk) #customer_details .col-2:not(:has(*)) { display:none; } /* section cards */ body.woocommerce-checkout:not(#nk) :is(.woocommerce-billing-fields,.woocommerce-shipping-fields,.woocommerce-additional-fields,.woocommerce-account-fields) { padding:28px; border:1px solid var(--nk-line); border-radius:var(--nk-r-card); background:var(--nk-paper); box-shadow:var(--nk-shadow); } body.woocommerce-checkout:not(#nk) .woocommerce-shipping-fields:not(:has(input)) , body.woocommerce-checkout:not(#nk) .woocommerce-account-fields:empty { display:none; } body.woocommerce-checkout:not(#nk) :is(.woocommerce-billing-fields,.woocommerce-additional-fields) > h3, body.woocommerce-checkout:not(#nk) .woocommerce-shipping-fields > h3:not(#ship-to-different-address) { margin:0 0 20px; font:600 20px/1.25 var(--nk-font); letter-spacing:-.02em; text-transform:none; display:flex; align-items:center; gap:12px; } body.woocommerce-checkout:not(#nk) form.checkout { counter-reset:nkstep; } body.woocommerce-checkout:not(#nk) .woocommerce-billing-fields > h3::before, body.woocommerce-checkout:not(#nk) .woocommerce-additional-fields > h3::before { counter-increment:nkstep; content:counter(nkstep); flex:0 0 28px; height:28px; border-radius:50%; background:var(--nk-ink); color:#fff; font-size:13px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; letter-spacing:0; } body.woocommerce-checkout:not(#nk) #ship-to-different-address { margin:0; font-size:15px; } body.woocommerce-checkout:not(#nk) #ship-to-different-address label { font-weight:500; font-size:15px; } body.woocommerce-checkout:not(#nk) .woocommerce-shipping-fields .shipping_address { margin-top:20px; } /* field grid */ body.woocommerce-checkout:not(#nk) :is(.woocommerce-billing-fields__field-wrapper,.woocommerce-shipping-fields__field-wrapper,.woocommerce-additional-fields__field-wrapper,.woocommerce-account-fields .create-account) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 16px; } body.woocommerce-checkout:not(#nk) :is(.woocommerce-billing-fields__field-wrapper,.woocommerce-shipping-fields__field-wrapper,.woocommerce-additional-fields__field-wrapper) > .form-row { grid-column:1 / -1; width:auto; float:none; } body.woocommerce-checkout:not(#nk) :is(.woocommerce-billing-fields__field-wrapper,.woocommerce-shipping-fields__field-wrapper) > :is(.form-row-first,.form-row-last) { grid-column:auto; } /* Belgian address: postcode + city side by side */ body.woocommerce-checkout:not(#nk) :is(#billing_postcode_field,#shipping_postcode_field) { grid-column:1 / 2!important; } body.woocommerce-checkout:not(#nk) :is(#billing_city_field,#shipping_city_field) { grid-column:2 / 3!important; } body.woocommerce-checkout:not(#nk) :is(#billing_postcode_field,#shipping_postcode_field) { order:1; } body.woocommerce-checkout:not(#nk) :is(.woocommerce-billing-fields__field-wrapper,.woocommerce-shipping-fields__field-wrapper) > .form-row { order:0; } body.woocommerce-checkout:not(#nk) :is(#billing_city_field,#shipping_city_field) { order:2; } body.woocommerce-checkout:not(#nk) :is(#billing_state_field,#shipping_state_field,#billing_phone_field,#billing_email_field) { order:3; } body.woocommerce-checkout:not(#nk) :is(#billing_address_2_field,#shipping_address_2_field) { margin-top:-10px; } body.woocommerce-checkout:not(#nk) :is(#billing_address_2_field,#shipping_address_2_field) label.screen-reader-text + .woocommerce-input-wrapper { display:block; } body.woocommerce-checkout:not(#nk) #billing_country_field .woocommerce-input-wrapper strong { display:block; padding:13px 0; font-weight:500; } /* order review table */ body.woocommerce-checkout:not(#nk) #order_review table.shop_table { display:block; width:100%; margin:0 0 20px; border:0; border-radius:0; box-shadow:none; } body.woocommerce-checkout:not(#nk) #order_review table.shop_table :is(thead,tbody,tfoot) { display:block; } body.woocommerce-checkout:not(#nk) #order_review table.shop_table tr { display:flex; justify-content:space-between; align-items:baseline; gap:12px; border-top:1px solid var(--nk-line); } body.woocommerce-checkout:not(#nk) #order_review table.shop_table thead tr { border-top:0; } body.woocommerce-checkout:not(#nk) #order_review table.shop_table tr > * { display:block; border-top:0!important; } body.woocommerce-checkout:not(#nk) #order_review table.shop_table tr > :first-child { flex:1 1 auto; min-width:0; } body.woocommerce-checkout:not(#nk) #order_review table.shop_table tr.shipping { flex-wrap:wrap; } body.woocommerce-checkout:not(#nk) #order_review table.shop_table tr.shipping > * { flex:1 1 100%; width:100%; padding-left:0!important; white-space:normal!important; } body.woocommerce-checkout:not(#nk) #order_review table.shop_table tr.shipping > th { padding-bottom:0; padding-top:12px!important; } body.woocommerce-checkout:not(#nk) #order_review table.shop_table tr.order-total { border-top:1px solid var(--nk-ink); } body.woocommerce-checkout:not(#nk) #order_review table.shop_table :is(th,td) { padding:12px 0; border:0; border-top:1px solid var(--nk-line); vertical-align:top; font-size:14px; line-height:1.5; text-align:left; background:none; } body.woocommerce-checkout:not(#nk) #order_review table.shop_table thead th { padding-top:4px; font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--nk-muted); border-top:0; } body.woocommerce-checkout:not(#nk) #order_review table.shop_table :is(.product-total,td:last-child,th.product-total) { text-align:right; white-space:nowrap; padding-left:12px; } body.woocommerce-checkout:not(#nk) #order_review table.shop_table tbody .product-name { font-weight:500; } body.woocommerce-checkout:not(#nk) #order_review table.shop_table .product-quantity { font-weight:500; color:var(--nk-muted); } body.woocommerce-checkout:not(#nk) #order_review table.shop_table tfoot th { font-weight:400; color:var(--nk-muted); } body.woocommerce-checkout:not(#nk) #order_review table.shop_table tr.shipping td { text-align:left; } body.woocommerce-checkout:not(#nk) #order_review table.shop_table .order-total :is(th,td) { padding-top:16px; color:var(--nk-ink); font-weight:600; } body.woocommerce-checkout:not(#nk) #order_review table.shop_table .order-total td strong { font-size:22px; letter-spacing:-.02em; } body.woocommerce-checkout:not(#nk) #order_review .includes_tax { display:block; font-size:12px; font-weight:400; color:var(--nk-muted); white-space:normal; } /* payment */ body.woocommerce-checkout:not(#nk) #payment { margin:0; padding:0; background:none; border-radius:0; } body.woocommerce-checkout:not(#nk) #payment ul.payment_methods { list-style:none; margin:0 0 20px; padding:0; border:0; display:grid; gap:10px; } body.woocommerce-checkout:not(#nk) #payment ul.payment_methods > li { position:relative; margin:0; padding:0; border:1px solid var(--nk-line); border-radius:var(--nk-r-field); background:var(--nk-paper); transition:border-color .15s,background .15s; } body.woocommerce-checkout:not(#nk) #payment ul.payment_methods > li:has(> input:checked) { border-color:var(--nk-ink); background:var(--nk-tint); } body.woocommerce-checkout:not(#nk) #payment ul.payment_methods > li > input[type=radio] { position:absolute; left:16px; top:20px; margin:0; display:block; appearance:auto; width:20px; height:20px; } body.woocommerce-checkout:not(#nk) #payment ul.payment_methods > li > label { display:flex; align-items:center; gap:10px; min-height:58px; margin:0; padding:12px 14px 12px 48px; font-size:15px; font-weight:500; cursor:pointer; } body.woocommerce-checkout:not(#nk) #payment ul.payment_methods > li > label img { height:26px; width:auto; max-width:110px; margin:0 0 0 auto; float:none; box-shadow:none; } body.woocommerce-checkout:not(#nk) #payment ul.payment_methods > li > label img + img { margin-left:4px; } body.woocommerce-checkout:not(#nk) #payment .payment_box { margin:0 14px 14px 48px; padding:0; background:none; font-size:13px; color:var(--nk-muted); } body.woocommerce-checkout:not(#nk) #payment .payment_box::before { content:none; } body.woocommerce-checkout:not(#nk) #payment .payment_box p { margin:0; line-height:1.5; } body.woocommerce-checkout:not(#nk) #payment .payment_box fieldset { border:0; padding:8px 0 0; margin:0; } body.woocommerce-checkout:not(#nk) #payment .place-order { margin:0; padding:0; } body.woocommerce-checkout:not(#nk) #payment .woocommerce-privacy-policy-text p { margin:0 0 12px; font-size:12px; line-height:1.55; color:var(--nk-muted); } body.woocommerce-checkout:not(#nk) #payment .woocommerce-terms-and-conditions-wrapper { margin:0 0 18px; } body.woocommerce-checkout:not(#nk) #payment .woocommerce-terms-and-conditions-wrapper .form-row { margin:0; padding:12px 14px; border-radius:var(--nk-r-field); background:var(--nk-soft); } body.woocommerce-checkout:not(#nk) #payment .place-order::after { content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%238a6f1c' stroke-width='2.2'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") "\00A0 Secure payment \00B7 encrypted connection"; display:block; margin-top:14px; text-align:center; font-size:12px; line-height:1.5; color:var(--nk-muted); } body.woocommerce-checkout:not(#nk) #payment .blockUI.blockOverlay, body.woocommerce-checkout:not(#nk) #order_review .blockUI.blockOverlay { background:rgba(255,255,255,.7)!important; border-radius:var(--nk-r-card); } /* order received (thank-you) page — same body class */ body.woocommerce-checkout:not(#nk) ul.woocommerce-order-overview { list-style:none; margin:0 0 28px; padding:20px 24px; display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; border:1px solid var(--nk-line); border-radius:var(--nk-r-card); background:var(--nk-soft); } body.woocommerce-checkout:not(#nk) ul.woocommerce-order-overview li { margin:0; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--nk-muted); border:0; padding:0; } body.woocommerce-checkout:not(#nk) ul.woocommerce-order-overview li strong { display:block; margin-top:4px; font-size:15px; text-transform:none; letter-spacing:0; color:var(--nk-ink); } body.woocommerce-checkout:not(#nk) .woocommerce-order { grid-column:1 / -1; } body.woocommerce-checkout:not(#nk) .woocommerce-order .woocommerce-thankyou-order-received { font-size:18px; font-weight:500; } /* ========================================================================== BLOCKS (Cart / Checkout blocks) — light-touch token layer ========================================================================== */ :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) :is(.wc-block-cart,.wc-block-checkout) { font-family:var(--nk-font); color:var(--nk-ink); font-weight:400; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) :is(.wc-block-cart,.wc-block-checkout).wc-block-components-sidebar-layout { display:flex; flex-wrap:wrap; gap:0 40px; margin:0; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-sidebar-layout .wc-block-components-main { flex:1 1 0; min-width:0; padding:0; width:auto; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-sidebar-layout .wc-block-components-sidebar { flex:0 0 380px; width:380px; position:sticky; top:var(--nk-sticky-top); align-self:flex-start; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) :is(.wc-block-cart__sidebar,.wc-block-checkout__sidebar) { padding:24px 28px; border:1px solid var(--nk-line); border-radius:var(--nk-r-card); background:var(--nk-paper); box-shadow:var(--nk-shadow-lift); } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-cart-items { width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--nk-line); border-radius:var(--nk-r-card); background:var(--nk-paper); box-shadow:var(--nk-shadow); } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-cart-items :is(th,td) { padding:20px 24px; border-top:1px solid var(--nk-line); text-align:left; vertical-align:top; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-cart-items thead th { padding:14px 24px; border-top:0; font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--nk-muted); } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-cart-items .wc-block-cart-item__image { width:112px; padding-right:0; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-cart-items .wc-block-cart-item__image img { width:88px; height:88px; object-fit:cover; border-radius:10px; border:1px solid var(--nk-line); background:var(--nk-soft); } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-cart-items .wc-block-cart-item__total { text-align:right; font-weight:600; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-product-name { font-size:15px; font-weight:500; color:var(--nk-ink)!important; text-decoration:none!important; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-cart-item__prices, :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-product-metadata { font-size:13px; color:var(--nk-muted); margin-top:2px; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-cart-item__quantity { display:flex; align-items:center; gap:14px; margin-top:12px; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-quantity-selector { display:inline-flex; width:auto; min-width:0; border:1px solid var(--nk-line-strong)!important; border-radius:var(--nk-r-field); overflow:hidden; background:var(--nk-paper); } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-quantity-selector::after { display:none; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input { width:44px; min-height:44px; border:0!important; box-shadow:none!important; text-align:center; font:500 16px/1 var(--nk-font); background:transparent; -moz-appearance:textfield; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-quantity-selector__button { width:44px; min-height:44px; border:0; background:transparent; color:var(--nk-ink); font:400 20px/1 var(--nk-font); cursor:pointer; opacity:1; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-quantity-selector__button:hover { background:var(--nk-soft); } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-quantity-selector__button--minus { order:-1; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-cart-item__remove-link { font-size:13px!important; color:var(--nk-muted)!important; text-decoration:underline!important; background:none; border:0; cursor:pointer; min-height:44px; padding:0; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-cart-item__remove-link:hover { color:var(--nk-err)!important; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-totals-item { display:flex; flex-wrap:wrap; justify-content:space-between; padding:12px 0; font-size:15px; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-totals-item__label { color:var(--nk-muted); } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-totals-footer-item { border-top:1px solid var(--nk-ink); margin-top:4px; padding-top:16px; font-weight:600; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { color:var(--nk-ink); } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-totals-footer-item-tax-value, :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size:22px; letter-spacing:-.02em; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-totals-item__description, :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-totals-footer-item-tax { flex-basis:100%; font-size:12px; color:var(--nk-muted); font-weight:400; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-totals-wrapper { border-top:1px solid var(--nk-line); padding:4px 0; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-totals-wrapper:first-child { border-top:0; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-panel__button { width:100%; display:flex; justify-content:space-between; align-items:center; min-height:48px; padding:0; border:0; background:none; font:500 14px/1.4 var(--nk-font); color:var(--nk-ink); cursor:pointer; text-align:left; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-cart__submit-container { margin-top:16px; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-button { border-radius:var(--nk-r-btn)!important; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) :is(.wc-block-cart__submit-button,.wc-block-components-checkout-place-order-button) { border-radius:var(--nk-r-btn)!important; } /* checkout block steps + fields */ :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-checkout-step { padding:28px!important; margin:0 0 24px!important; border:1px solid var(--nk-line); border-radius:var(--nk-r-card); background:var(--nk-paper); box-shadow:var(--nk-shadow); } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-checkout-step::after { display:none; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-checkout-step__title { margin:0 0 6px; font:600 20px/1.25 var(--nk-font)!important; letter-spacing:-.02em; color:var(--nk-ink); } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-checkout-step__description { margin:0 0 16px; font-size:14px; color:var(--nk-muted); } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-address-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 16px; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-address-form > * { grid-column:1 / -1; margin:0!important; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-address-form > :is(.wc-block-components-address-form__first_name,.wc-block-components-address-form__last_name,.wc-block-components-address-form__postcode,.wc-block-components-address-form__city) { grid-column:auto; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-text-input, :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-blocks-components-select { position:relative; margin:0; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-text-input input, :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-blocks-components-select select, :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-textarea { width:100%; height:56px; padding:22px 14px 6px; border:1px solid var(--nk-line-strong)!important; border-radius:var(--nk-r-field)!important; font:400 16px/1.3 var(--nk-font); color:var(--nk-ink); background:var(--nk-paper); -webkit-appearance:none; appearance:none; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-text-input label, :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-blocks-components-select label { position:absolute; left:15px; top:7px; font-size:12px; font-weight:500; color:var(--nk-muted); pointer-events:none; line-height:1.2; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-radio-control { display:grid; gap:10px; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-radio-control-accordion-option, :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-radio-control__option { border:1px solid var(--nk-line)!important; border-radius:var(--nk-r-field); background:var(--nk-paper); box-shadow:none!important; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-radio-control-accordion-option:has(input:checked), :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-radio-control__option-checked { border-color:var(--nk-ink)!important; background:var(--nk-tint); } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option { border:0!important; background:none; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-radio-control__option { display:flex; align-items:center; gap:12px; min-height:58px; padding:12px 14px; font-weight:500; cursor:pointer; position:relative; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-radio-control__input { width:20px; height:20px; margin:0; accent-color:var(--nk-ink); appearance:auto; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-radio-control-accordion-content { padding:0 14px 14px 46px; font-size:13px; color:var(--nk-muted); } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-checkbox label { display:flex; gap:12px; align-items:flex-start; font-size:14px; cursor:pointer; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-checkbox input { width:20px; height:20px; margin:0; accent-color:var(--nk-ink); appearance:auto; flex:0 0 auto; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-checkout__actions_row { display:flex; flex-direction:column-reverse; gap:14px; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-checkout-return-to-cart-button { align-self:center; font-size:14px; color:var(--nk-muted)!important; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-order-summary-item { display:flex; gap:14px; padding:12px 0; border-top:1px solid var(--nk-line); font-size:14px; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-order-summary-item:first-child { border-top:0; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-order-summary-item__image { position:relative; flex:0 0 56px; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-order-summary-item__image img { width:56px; height:56px; object-fit:cover; border-radius:8px; border:1px solid var(--nk-line); } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-order-summary-item__quantity { position:absolute; top:-8px; right:-8px; min-width:22px; height:22px; border-radius:11px; background:var(--nk-ink); color:#fff; font-size:11px; font-weight:600; display:flex; align-items:center; justify-content:center; padding:0 6px; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-order-summary-item__description { flex:1; min-width:0; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-order-summary-item__total-price { font-weight:600; white-space:nowrap; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-checkout-order-summary__title { margin:0 0 8px; font:600 22px/1.2 var(--nk-font); letter-spacing:-.02em; } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width:1020px) { body.woocommerce-checkout:not(#nk) form.checkout.woocommerce-checkout { grid-template-columns:minmax(0,1fr) 340px; column-gap:28px; } body.woocommerce-checkout:not(#nk) div.woocommerce > :is(.woocommerce-form-coupon-toggle,.checkout_coupon,.woocommerce-notices-wrapper) { max-width:calc(100% - 368px); } } @media (max-width:900px) { :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) { --nk-sticky-top:76px; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) h1:not(header *):not(.nk-skip-title) { font-size:34px; margin:28px auto 22px; padding:0 16px; } body.woocommerce-cart:not(#nk) #cart h1, body.woocommerce-checkout:not(#nk) #cart h1 { padding:0; } body.woocommerce-cart:not(#nk) #cart, body.woocommerce-checkout:not(#nk) #cart { padding:0 16px 64px; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce, :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wp-block-woocommerce-cart, :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wp-block-woocommerce-checkout { padding:0 16px; margin-bottom:64px; } body.woocommerce-cart:not(#nk) div.woocommerce { grid-template-columns:minmax(0,1fr); gap:24px; } body.woocommerce-cart:not(#nk) div.woocommerce > *, body.woocommerce-cart:not(#nk) .cart-collaterals > :is(.cart_totals,.cross-sells) { grid-column:1 / -1; grid-row:auto; position:static; } body.woocommerce-checkout:not(#nk) form.checkout.woocommerce-checkout { grid-template-columns:minmax(0,1fr); } body.woocommerce-checkout:not(#nk) form.checkout > :is(#customer_details,#order_review_heading,#order_review) { grid-column:1 / -1; grid-row:auto; position:static; } body.woocommerce-checkout:not(#nk) form.checkout > #order_review_heading { margin-top:24px; height:auto; padding:22px 20px 0; } body.woocommerce-checkout:not(#nk) form.checkout > #order_review { padding:4px 20px 22px; } body.woocommerce-checkout:not(#nk) div.woocommerce > :is(.woocommerce-form-coupon-toggle,.checkout_coupon,.woocommerce-notices-wrapper,.woocommerce-form-login-toggle,.woocommerce-form-login) { max-width:none; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-sidebar-layout .wc-block-components-sidebar { flex-basis:100%; width:100%; position:static; margin-top:24px; } } @media (max-width:640px) { :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) div.woocommerce { font-size:15px; } body.woocommerce-cart:not(#nk) table.shop_table.cart thead { display:none; } body.woocommerce-cart:not(#nk) table.shop_table.cart tr { grid-template-columns:72px minmax(0,1fr) auto; gap:6px 14px; padding:16px; grid-template-areas:"thumb name remove" "thumb price price" "qty qty sub"; } body.woocommerce-cart:not(#nk) table.shop_table.cart .product-thumbnail img { width:72px!important; height:72px; } body.woocommerce-cart:not(#nk) table.shop_table.cart .product-name { align-self:start; padding-top:2px; } body.woocommerce-cart:not(#nk) table.shop_table.cart .product-remove { align-self:start; margin:-8px -8px 0 0; } body.woocommerce-cart:not(#nk) table.shop_table.cart .product-quantity { margin-top:8px; } body.woocommerce-cart:not(#nk) table.shop_table.cart .product-subtotal { align-self:center; margin-top:8px; font-size:16px; } body.woocommerce-cart:not(#nk) table.shop_table.cart tr:has(> td.actions) { padding:16px; } body.woocommerce-cart:not(#nk) table.shop_table.cart td.actions { flex-direction:column; align-items:stretch; } body.woocommerce-cart:not(#nk) table.shop_table.cart td.actions .coupon { max-width:none; flex:1 1 auto; } body.woocommerce-cart:not(#nk) table.shop_table.cart td.actions > .button { margin-left:0; width:100%; } body.woocommerce-cart:not(#nk) .cart_totals { padding:22px 20px; } body.woocommerce-checkout:not(#nk) :is(.woocommerce-billing-fields,.woocommerce-shipping-fields,.woocommerce-additional-fields) { padding:22px 18px; } body.woocommerce-checkout:not(#nk) :is(.woocommerce-billing-fields__field-wrapper,.woocommerce-shipping-fields__field-wrapper) { gap:16px 12px; } body.woocommerce-checkout:not(#nk) :is(.woocommerce-billing-fields__field-wrapper,.woocommerce-shipping-fields__field-wrapper) > :is(.form-row-first,.form-row-last) { grid-column:1 / -1; } body.woocommerce-checkout:not(#nk) :is(#billing_postcode_field,#shipping_postcode_field) { grid-column:1 / 2!important; } body.woocommerce-checkout:not(#nk) :is(#billing_city_field,#shipping_city_field) { grid-column:2 / 3!important; } body.woocommerce-checkout:not(#nk) div.woocommerce form.checkout_coupon { grid-template-columns:1fr; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-cart-items thead { display:none; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-cart-items :is(th,td) { padding:16px; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-cart-items .wc-block-cart-item__image { width:88px; padding-right:0; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-cart-items .wc-block-cart-item__image img { width:72px; height:72px; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-cart-items .wc-block-cart-item__total { display:none; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-address-form > :is(.wc-block-components-address-form__first_name,.wc-block-components-address-form__last_name) { grid-column:1 / -1; } :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) .wc-block-components-checkout-step { padding:22px 18px!important; } } @media (prefers-reduced-motion:reduce) { :is(body.woocommerce-cart,body.woocommerce-checkout):not(#nk) * { transition:none!important; } } /* NIKOLA END: Cart + Checkout refresh */ /* ===== NIKOLA CART/CHECKOUT END ===== */ /* ===== NIKOLA CARDS CONTRAST START (2026-10-08) ===== */ /* NIKOLA START: Listing cards contrast — RECOMMENDED (A: soft page tone + defined white cards) — preview 2026-10-07 Scope: ONLY the overview pages - Cars archive /cars/ → html.nkcr body.category-cars (classes set by the live "Cars redesign" block) - Parts / Services (+ their sub-categories) → html.nkps body.tax-product_cat (set by the live "Parts & Services redesign" block) Single car / single product pages, home, cart etc. are NOT touched. !important is needed because the redesign blocks themselves use !important; the extra :not(#nkcc) gives more weight. Rollback: remove this START/END block. */ html.nkcr body.category-cars:not(#nkcc), html.nkps body.tax-product_cat:not(#nkcc) { --nkcc-page:#f3f3f0; /* soft warm grey behind the grid (a shade darker than the site's #f7f7f5) */ --nkcc-edge:#e0e0db; /* card border */ --nkcc-edge-hover:#cdcdc6; --nkcc-shadow:0 1px 2px rgba(17,17,17,.05), 0 6px 18px rgba(17,17,17,.06); --nkcc-shadow-hover:0 2px 4px rgba(17,17,17,.05), 0 18px 40px rgba(17,17,17,.12); } /* 1. page tone: ONE continuous area from right under the header through title, search, filter row and grid. The tone sits on the content wrapper itself (no full-bleed shadow/clipping tricks → no new stacking contexts, so the mobile Filters sheet + backdrop, sticky bars and the floating Filters button behave exactly as before). The section under the listing that is transparent today (#sellHome, "Questions? Contact us") gets white back; #instagram keeps its own #f7f7f5 band; the footer is outside the wrapper. */ html.nkcr body.category-cars:not(#nkcc) > .wrapper, html.nkps body.tax-product_cat:not(#nkcc) > .wrapper { background-color:var(--nkcc-page)!important; } html.nkcr body.category-cars:not(#nkcc) > .wrapper > #sellHome, html.nkps body.tax-product_cat:not(#nkcc) > .wrapper > #sellHome { background-color:#fff; } /* 2. cards: white, 1px edge, soft two-layer shadow */ html.nkcr body.category-cars:not(#nkcc) #cars > ul > li, html.nkps body.tax-product_cat:not(#nkcc) #main ul.products > li.nkps-card { background:#fff!important; border:1px solid var(--nkcc-edge)!important; box-shadow:var(--nkcc-shadow)!important; transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease!important; } /* 3. hover lift (pointer devices only, so taps on phones don't leave cards "lifted") */ @media (hover:hover) { html.nkcr body.category-cars:not(#nkcc) #cars > ul > li.nkcr-link:hover, html.nkps body.tax-product_cat:not(#nkcc) #main ul.products > li.nkps-card:hover { border-color:var(--nkcc-edge-hover)!important; box-shadow:var(--nkcc-shadow-hover)!important; transform:translateY(-3px); } } /* 4. keyboard focus on the full-card link (theme sets outline:none!important on *) */ html.nkcr body.category-cars:not(#nkcc) #cars > ul > li:has(> a.fullLink:focus-visible), html.nkps body.tax-product_cat:not(#nkcc) #main ul.products > li.nkps-card:has(> a.nkps-full:focus-visible) { outline:3px solid #c9a53b!important; outline-offset:3px; } @media (prefers-reduced-motion:reduce) { html.nkcr body.category-cars:not(#nkcc) #cars > ul > li, html.nkps body.tax-product_cat:not(#nkcc) #main ul.products > li.nkps-card { transition:none!important; transform:none!important; } } /* NIKOLA END: Listing cards contrast — RECOMMENDED */ /* ===== NIKOLA CARDS CONTRAST END ===== */ /* ===== NIKOLA CART CROSS-SELLS 2-COL START (2026-10-08) ===== */ /* "You may be interested in…" under the cart: compact cards like the Parts/Services overview. Scope: ONLY body.woocommerce-cart .cross-sells (cart rows, totals, coupon, checkout untouched). Mobile (max 640px): 2 cards side by side. Wider: tidy grid (3 per row next to the totals card). Note: the live loop markup nests the tag link inside the product link, so the browser splits it: li > a(empty) + .wc-img-wrapper > (a > img + .hoverInfo) + .product-tags > (a(empty) + a[rel=tag]), then h2 + .priceNotVariable + a.button. Every rule below also works if that markup is ever fixed. Rollback: delete this whole block. */ body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells ul.products{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))!important;gap:16px!important;align-items:stretch!important;width:auto!important;max-width:none!important;margin:0!important;padding:0!important;float:none!important;list-style:none!important} body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells ul.products::before,body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells ul.products::after{content:none!important;display:none!important} body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells ul.products > li.product{position:relative!important;display:flex!important;flex-direction:column!important;min-width:0!important;width:auto!important;max-width:none!important;height:auto!important;float:none!important;clear:none!important;margin:0!important;padding:0!important;background:#fff!important;border:1px solid #e8e8e8!important;border-radius:12px!important;overflow:hidden!important;box-shadow:0 8px 24px rgba(0,0,0,.04)!important;text-align:left!important;font-family:Poppins,Arial,sans-serif;transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease} /* empty link fragments created by the browser from the nested links */ body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product > a.woocommerce-LoopProduct-link:empty,body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product .product-tags > a.woocommerce-LoopProduct-link:empty{display:none!important} body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product > a.woocommerce-LoopProduct-link:not(:empty){display:flex;flex-direction:column;flex:1 1 auto;color:inherit;text-decoration:none!important} /* photo: 4:3 like the Parts cards, edge to edge on top of the card */ body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product .wc-img-wrapper{position:static!important;display:block!important;width:100%!important;height:auto!important;aspect-ratio:4 / 3!important;margin:0!important;padding:0!important;border:0!important;background:#f1f1f1;overflow:hidden!important} body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product .wc-img-wrapper > a{display:block;width:100%;height:100%} body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product .wc-img-wrapper img{position:static!important;display:block!important;width:100%!important;height:100%!important;max-width:none!important;margin:0!important;border-radius:0!important;aspect-ratio:auto!important;object-fit:cover!important;transform:none!important;transition:transform .35s ease} body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product .hoverInfo{display:none!important} /* whole card opens the product (the photo link is stretched over the card; the button stays on top) */ body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product .wc-img-wrapper > a.woocommerce-LoopProduct-link::after{content:"";position:absolute;inset:0;z-index:1} /* "Highly recommended" (product tag) = small pill on the photo, like the Parts pills. It is a label here (a tap opens the product, not the tag archive): the pill is far below a 44px tap target. */ body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product .product-tags{position:absolute!important;top:10px;left:10px;right:10px;z-index:2;display:flex;flex-wrap:wrap;gap:4px;margin:0!important;padding:0!important;font-size:0;line-height:0;pointer-events:none} body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product .product-tags a[rel~="tag"]{display:inline-block;max-width:100%;overflow:hidden;height:22px;padding:0 9px!important;border-radius:999px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.14);color:#151515!important;font:600 9.5px/22px Poppins,Arial,sans-serif!important;letter-spacing:.08em;text-transform:uppercase;text-decoration:none!important;white-space:nowrap;text-overflow:ellipsis;pointer-events:none} body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product .product-tags a[rel~="tag"]:nth-child(n+4){display:none} /* title */ body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product h2.woocommerce-loop-product__title{display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;float:none!important;width:auto!important;height:auto!important;margin:0!important;padding:14px 16px 0!important;color:#151515!important;font:600 15px/1.3 Poppins,Arial,sans-serif!important;letter-spacing:-.01em!important;text-transform:none!important;text-align:left!important} /* price: incl. VAT on one line, excl. VAT on its own smaller muted line */ body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product .priceNotVariable{display:block!important;margin:0!important;padding:8px 16px 0!important;text-align:left!important} body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product .priceNotVariable > span{display:block!important;float:none!important;position:static!important;margin:0!important;padding:0!important} body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product .priceNotVariable .amount{display:flex!important;flex-wrap:wrap;align-items:baseline;column-gap:.3em;color:#151515!important;font:600 16px/1.3 Poppins,Arial,sans-serif!important;letter-spacing:-.01em} body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product .priceNotVariable .amount small{color:#151515!important;font-size:11px!important;font-weight:600!important;letter-spacing:0;white-space:nowrap} body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product .priceNotVariable .amountVat{margin-top:2px!important;color:#707070!important;font:400 12px/1.35 Poppins,Arial,sans-serif!important} body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product .priceNotVariable .amountVat small{color:inherit!important;font-size:inherit!important;font-weight:inherit!important} body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product .priceNotVariable br{display:none!important} body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product .priceNotVariable del{position:static!important;top:auto!important;display:block;flex:0 0 100%;margin:0 0 1px;color:#9a9a9a!important;font-size:12px!important;font-weight:400!important;line-height:1.3} body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product .priceNotVariable .amountVat del{display:none!important} body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product .onRequest{margin:0!important;padding:8px 16px 0!important;color:#151515;font:600 14px/1.3 Poppins,Arial,sans-serif;line-height:1.3!important} body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product .onsale{position:absolute;top:10px;right:10px;z-index:2;margin:0;padding:0 8px;height:22px;border-radius:999px;background:#d4b037;color:#151515;font:600 9.5px/22px Poppins,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase} /* compact button pinned to the bottom of the card */ body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product a.button{position:relative;z-index:2;display:flex!important;align-items:center;justify-content:center;width:auto!important;min-height:40px!important;margin:auto 16px 16px!important;padding:8px 12px!important;border:1px solid #151515!important;border-radius:6px!important;background:#fff!important;background-image:none!important;color:#151515!important;font:500 13px/1.2 Poppins,Arial,sans-serif!important;letter-spacing:.01em!important;text-transform:none!important;text-decoration:none!important;text-align:center!important;white-space:nowrap;box-shadow:none!important} body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product .priceNotVariable + a.button,body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product .onRequest + a.button,body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product > a.woocommerce-LoopProduct-link:not(:empty) + a.button{margin-top:auto!important} body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product a.button::before,body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product a.button::after{content:none!important;display:none!important} body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product a.button:hover{background:#151515!important;color:#fff!important} body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product a.button.loading{opacity:.6} body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product a.added_to_cart{position:relative;z-index:2;display:block;margin:-8px 16px 12px;color:#151515;font:500 12px/1.3 Poppins,Arial,sans-serif;text-align:center;text-decoration:underline;text-underline-offset:3px} /* spacing between the price block and the button */ body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product .priceNotVariable,body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product .onRequest{margin-bottom:14px!important} /* keyboard focus (the theme removes all outlines) */ body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product a:focus-visible{outline:2px solid #c9a53b!important;outline-offset:2px} body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product .wc-img-wrapper > a:focus-visible{outline:0!important} body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product:focus-within:has(.wc-img-wrapper > a:focus-visible){box-shadow:0 0 0 3px rgba(201,165,59,.55)!important} @media (hover:hover) and (min-width:641px){ body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells ul.products > li.product:hover{border-color:#d9d9d9!important;box-shadow:0 16px 36px rgba(0,0,0,.09)!important;transform:translateY(-3px)} body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product:hover .wc-img-wrapper img{transform:scale(1.04)!important} } @media (prefers-reduced-motion:reduce){ body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells ul.products > li.product,body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product .wc-img-wrapper img{transition:none!important;transform:none!important} } /* phones: 2 side by side, like Cars/Parts on mobile */ @media (max-width:640px){ body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells > h2{font-size:20px!important;margin:4px 0 14px!important} body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells ul.products{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px 10px!important} body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells ul.products > li.product{border-radius:10px!important;box-shadow:0 4px 14px rgba(0,0,0,.04)!important} body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product .product-tags{top:8px;left:8px;right:8px} body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product .product-tags a[rel~="tag"]{height:20px;padding:0 7px!important;font-size:8.5px!important;line-height:20px!important;letter-spacing:.07em} body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product .product-tags a[rel~="tag"]:nth-child(n+3){display:none} body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product h2.woocommerce-loop-product__title{padding:10px 11px 0!important;font-size:13.5px!important;line-height:1.28!important;-webkit-line-clamp:3} body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product .priceNotVariable,body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product .onRequest{padding:6px 11px 0!important;margin-bottom:12px!important} body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product .priceNotVariable .amount{font-size:14px!important} body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product .priceNotVariable .amount small{font-size:10px!important} body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product .priceNotVariable .amountVat,body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product .priceNotVariable del{font-size:11px!important} body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product a.button{min-height:36px!important;margin:auto 11px 11px!important;padding:6px 8px!important;font-size:12.5px!important} body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product .priceNotVariable + a.button,body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product .onRequest + a.button{margin-top:auto!important} body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product a.added_to_cart{margin:-6px 11px 10px;font-size:11.5px} } @media (max-width:340px){ body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product .priceNotVariable .amount{font-size:13px!important} body.woocommerce-cart:not(#nk):not(#nkxs) .cross-sells li.product a.button{font-size:12px!important;padding:6px 4px!important} } /* ===== NIKOLA CART CROSS-SELLS 2-COL END ===== */ /* ===== NIKOLA MOBILE MENU A START (2026-10-08) ===== */ /* New style for the full-screen hamburger menu (.BigMenu) on phones and tablets (max-width 1100px). Variant A: refined dark overlay (keeps today's black menu, cleaner hierarchy). CSS only, same markup + same theme JS (body.open + .BigMenu.active). The closed state (right:-100%, opacity 0) is untouched. Desktop (1101px and wider), the site header, slim header, cart icon and homepage transparent header are not touched: every selector starts with .BigMenu and sits inside the media query below. Groups come from the existing WordPress menus: "Big menu left" (Cars/Parts/Services) and "Big menu right", where the theme's CSS class "cart" already marks the start of the 2nd group (Sell My Tesla) and the 3rd group (Cart). The two small labels ("Shop", "Company") are CSS text (English, like the site). Use A OR B, not both. Rollback: delete this whole block. */ @media (max-width:1100px){ html body:not(#nkm) .BigMenu{--nkm-bg:#0a0a0a;--nkm-ink:#ffffff;--nkm-dim:rgba(255,255,255,.86);--nkm-line:rgba(255,255,255,.12);--nkm-label:#d4b037;--nkm-cur:#d4b037;display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto 1fr auto;grid-template-areas:"logo close" "menu menu" "space space" "social social";column-gap:16px;padding:calc(6px + env(safe-area-inset-top,0px)) calc(20px + env(safe-area-inset-right,0px)) calc(22px + env(safe-area-inset-bottom,0px)) calc(20px + env(safe-area-inset-left,0px))!important;overflow-x:hidden!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:var(--nkm-bg)!important;color:var(--nkm-ink)!important;font-family:Poppins,Arial,sans-serif} html body:not(#nkm) .BigMenu > .clearing{display:none!important} /* top bar: logo + close button */ html body:not(#nkm) .BigMenu > .logo{grid-area:logo;align-self:center;float:none!important;display:flex!important;align-items:center;width:auto!important;height:60px;margin:0!important;padding:0!important} html body:not(#nkm) .BigMenu > .logo svg,html body:not(#nkm) .BigMenu > .logo img{display:block!important;width:auto!important;height:30px!important;max-height:30px!important;max-width:none!important} html body:not(#nkm) .BigMenu #trigger2{grid-area:close;align-self:center;float:none!important;display:flex!important;width:44px!important;height:44px!important;margin:0 -4px 0 0!important;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:rgba(255,255,255,.08)!important;box-shadow:none;transform:none!important;transition:background-color .2s ease,border-color .2s ease!important} html body:not(#nkm) .BigMenu #trigger2 .wrap{width:18px!important;height:18px!important} html body:not(#nkm) .BigMenu #trigger2 span{left:0!important;right:auto!important;top:8px!important;width:18px!important;height:2px!important;margin:0!important;border-radius:2px;background:var(--nkm-ink)!important} html body:not(#nkm) .BigMenu #trigger2 span:nth-child(1),html body:not(#nkm) .BigMenu #trigger2 span:nth-child(4){opacity:0!important} /* menu column (centred on tablets) */ html body:not(#nkm) .BigMenu > .menuwrapper{grid-area:menu;display:block!important;justify-self:center;width:100%!important;max-width:560px;height:auto!important;margin:14px 0 0!important;padding:0!important} html body:not(#nkm) .BigMenu .menuwrapper .left,html body:not(#nkm) .BigMenu .menuwrapper .right{float:none!important;display:block!important;width:auto!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important} html body:not(#nkm) .BigMenu .menuwrapper .left::before,html body:not(#nkm) .BigMenu .menuwrapper .right::before{display:block;margin:0 0 8px;color:var(--nkm-label);font:600 11px/1.2 Poppins,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase} html body:not(#nkm) .BigMenu .menuwrapper .left::before{content:"Shop"} html body:not(#nkm) .BigMenu .menuwrapper .right::before{content:"Company";margin-top:30px} html body:not(#nkm) .BigMenu .menuwrapper ul{margin:0!important;padding:0!important;list-style:none!important} html body:not(#nkm) .BigMenu .menuwrapper li{display:block;margin:0!important;padding:0!important} html body:not(#nkm) .BigMenu .menuwrapper a{-webkit-tap-highlight-color:transparent;text-decoration:none!important} /* 1. Cars / Parts / Services = big tappable rows with an arrow */ html body:not(#nkm) .BigMenu .menuwrapper .left ul{border-top:1px solid var(--nkm-line)!important} html body:not(#nkm) .BigMenu .menuwrapper .left ul > li{border-bottom:1px solid var(--nkm-line)} html body:not(#nkm) .BigMenu .menuwrapper .left ul > li > a{display:flex!important;align-items:center;justify-content:space-between;gap:16px;min-height:66px;padding:0 2px;color:var(--nkm-ink)!important;font:600 26px/1.1 Poppins,Arial,sans-serif!important;letter-spacing:.01em;text-transform:uppercase} html body:not(#nkm) .BigMenu .menuwrapper .left ul > li > a::after{content:"";flex:0 0 auto;box-sizing:border-box;width:36px;height:36px;border:1px solid rgba(255,255,255,.24);border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/16px no-repeat} html body:not(#nkm) .BigMenu .menuwrapper .left ul > li:is(.current-menu-item,.current_page_item,.current-menu-parent,.current-page-ancestor,.current-category-ancestor,.current-post-ancestor) > a{color:#d4b037!important} html body:not(#nkm) .BigMenu .menuwrapper .left ul > li:is(.current-menu-item,.current_page_item,.current-menu-parent,.current-page-ancestor,.current-category-ancestor,.current-post-ancestor) > a::after{border-color:#d4b037;background:#d4b037 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/16px no-repeat} /* 2. About / Warranty / Tips & News / Careers = quiet two-column list */ html body:not(#nkm) .BigMenu .menuwrapper .right ul{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:12px} html body:not(#nkm) .BigMenu .menuwrapper .right ul > li{grid-column:span 3;min-width:0;border-bottom:1px solid var(--nkm-line)} html body:not(#nkm) .BigMenu .menuwrapper .right ul > li > a{display:flex!important;align-items:center;min-height:48px;padding:0 2px;color:var(--nkm-dim)!important;font:400 16px/1.25 Poppins,Arial,sans-serif!important;letter-spacing:0} /* 3. Sell My Tesla + Plan your visit = two tiles (first li.cart and the item after it) */ html body:not(#nkm) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li),html body:not(#nkm) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li) + li:not(.cart){grid-column:span 3;margin:22px 0 0!important;border:0} html body:not(#nkm) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li){grid-column:1 / span 3} html body:not(#nkm) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li) > a,html body:not(#nkm) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li) + li:not(.cart) > a{display:flex!important;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:14px;height:100%;min-height:86px;padding:14px 14px 13px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(255,255,255,.06);box-shadow:none;color:var(--nkm-ink)!important;font:500 15px/1.2 Poppins,Arial,sans-serif!important} html body:not(#nkm) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li) > a{border-color:#d4b037;background:#d4b037;color:#111111!important} html body:not(#nkm) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li) > a::before,html body:not(#nkm) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li) + li:not(.cart) > a::before{content:"";display:block;width:22px;height:22px;background-position:center;background-size:22px;background-repeat:no-repeat} html body:not(#nkm) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li) > a::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E")} html body:not(#nkm) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li) + li:not(.cart) > a::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.1-7-11.5A7 7 0 0 1 19 9.5C19 14.9 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E")} /* 4. Cart / Contact / Login = three compact actions (second li.cart and everything after it) */ html body:not(#nkm) .BigMenu .menuwrapper .right ul > li.cart ~ li.cart,html body:not(#nkm) .BigMenu .menuwrapper .right ul > li.cart ~ li.cart ~ li{grid-column:span 2;margin:12px 0 0!important;border:0} html body:not(#nkm) .BigMenu .menuwrapper .right ul > li.cart ~ li.cart > a,html body:not(#nkm) .BigMenu .menuwrapper .right ul > li.cart ~ li.cart ~ li > a{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:100%;min-height:66px;padding:10px 6px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:transparent;color:var(--nkm-ink)!important;font:500 13px/1.2 Poppins,Arial,sans-serif!important;text-align:center} html body:not(#nkm) .BigMenu .menuwrapper .right ul > li.cart ~ li.cart > a::before,html body:not(#nkm) .BigMenu .menuwrapper .right ul > li.cart ~ li.cart ~ li > a::before{content:"";display:block;width:20px;height:20px;background-position:center;background-size:20px;background-repeat:no-repeat} html body:not(#nkm) .BigMenu .menuwrapper .right ul > li.cart ~ li > a:is([href*="/cart"],[href*="/nl/winkelmandje"])::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.2 10.2a1.5 1.5 0 0 0 1.5 1.2h8.6a1.5 1.5 0 0 0 1.5-1.1L21 8H6.2'/%3E%3Ccircle cx='9.5' cy='19.5' r='1.3'/%3E%3Ccircle cx='17' cy='19.5' r='1.3'/%3E%3C/svg%3E")} html body:not(#nkm) .BigMenu .menuwrapper .right ul > li.cart ~ li > a[href*="/contact"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 0 1-11.6 7.1L4 20l1.1-4.2A8 8 0 1 1 20 12z'/%3E%3C/svg%3E")} html body:not(#nkm) .BigMenu .menuwrapper .right ul > li.cart ~ li > a[href*="/team"]::before,html body:not(#nkm) .BigMenu .menuwrapper .right ul > li.cart ~ li > a[href*="login"]::before,html body:not(#nkm) .BigMenu .menuwrapper .right ul > li.cart ~ li > a[href*="account"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E")} /* current page */ html body:not(#nkm) .BigMenu .menuwrapper .right ul > li:is(.current-menu-item,.current_page_item,.current-menu-parent,.current-page-ancestor,.current-category-ancestor,.current-post-ancestor) > a{color:var(--nkm-cur)!important;font-weight:500!important} html body:not(#nkm) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li):is(.current-menu-item,.current_page_item) > a{color:#111111!important;text-decoration:underline!important;text-underline-offset:4px} html body:not(#nkm) .BigMenu .menuwrapper .right ul > li.cart ~ li:is(.current-menu-item,.current_page_item) > a{border-color:#d4b037} /* social row at the bottom */ html body:not(#nkm) .BigMenu > .social{grid-area:social;align-self:end;justify-self:center;display:flex!important;align-items:center;gap:10px;width:100%!important;max-width:560px;margin:28px 0 0!important;padding:18px 0 0!important;border-top:1px solid var(--nkm-line)!important} html body:not(#nkm) .BigMenu > .social > a{display:inline-flex!important;align-items:center;justify-content:center;width:44px;height:44px;margin:0!important;padding:0!important;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:transparent;color:var(--nkm-ink)!important;font-size:18px!important;line-height:1!important} html body:not(#nkm) .BigMenu > .social > .right{float:none!important;margin-left:auto} /* touch + keyboard feedback (the theme removes every outline) */ html body:not(#nkm) .BigMenu a:focus-visible{outline:2px solid #c9a53b!important;outline-offset:2px} html body:not(#nkm) .BigMenu .menuwrapper a:active,html body:not(#nkm) .BigMenu > .social > a:active{opacity:.72} } @media (hover:hover) and (max-width:1100px){ html body:not(#nkm) .BigMenu .menuwrapper .right ul > li:not(.cart):not(.cart ~ li) > a:hover,html body:not(#nkm) .BigMenu > .social > a:hover{color:var(--nkm-cur)!important} html body:not(#nkm) .BigMenu .menuwrapper .left ul > li > a:hover{color:#d4b037!important} html body:not(#nkm) .BigMenu #trigger2:hover{background:rgba(255,255,255,.16)!important} } /* tablets: a bit more air */ @media (min-width:601px) and (max-width:1100px) and (min-height:521px){ html body:not(#nkm) .BigMenu{padding-top:calc(14px + env(safe-area-inset-top,0px))!important;padding-left:calc(32px + env(safe-area-inset-left,0px))!important;padding-right:calc(32px + env(safe-area-inset-right,0px))!important} html body:not(#nkm) .BigMenu > .logo svg,html body:not(#nkm) .BigMenu > .logo img{height:34px!important;max-height:34px!important} html body:not(#nkm) .BigMenu > .menuwrapper{margin-top:40px!important} html body:not(#nkm) .BigMenu .menuwrapper .left ul > li > a{min-height:76px!important;font-size:30px!important} } /* phones in landscape: compact */ @media (max-height:520px) and (orientation:landscape){ html body:not(#nkm) .BigMenu > .logo{height:52px} html body:not(#nkm) .BigMenu > .menuwrapper{margin-top:6px!important} html body:not(#nkm) .BigMenu .menuwrapper .left ul > li > a{min-height:52px!important;font-size:20px!important} html body:not(#nkm) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li) > a,html body:not(#nkm) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li) + li:not(.cart) > a{min-height:60px;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px} } /* ===== NIKOLA MOBILE MENU A END ===== */ /* ===== NIKOLA DESKTOP MENU A START (2026-10-08) ===== */ /* Variant A (refined dark) for the full-screen hamburger menu (.BigMenu) on DESKTOP (1101px and wider), matching the mobile Menu A block that is already live. CSS only: same markup, same theme JS (body.open + .BigMenu.active). Two columns, max 1100px wide and centred: left = SHOP (Cars / Parts / Services as big rows with arrow circles), right = COMPANY (About / Warranty / Tips & News / Careers in 2 columns, Sell My Tesla gold tile + Plan your visit tile, Cart / Contact / Login icon buttons). Round close button, round social buttons. Scrolls when the window is short. Everything sits inside @media (min-width:1101px) and every selector starts with .BigMenu: the desktop header bar (closed state) and everything at 1100px and below are not touched. Rollback: delete this whole block. */ @media (min-width:1101px){ html body:not(#nkm):not(#nkd) .BigMenu{--nkd-ink:#fff;--nkd-dim:rgba(255,255,255,.86);--nkd-line:rgba(255,255,255,.12);--nkd-gold:#d4b037;display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto;grid-template-areas:"logo close" "menu menu" "social social";column-gap:24px;min-height:0!important;padding:0 48px 28px!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain;background:#0a0a0a!important;color:#fff!important;font-family:Poppins,Arial,sans-serif} html body:not(#nkm):not(#nkd) .BigMenu > .clearing{display:none!important} /* top bar: logo + round close button */ html body:not(#nkm):not(#nkd) .BigMenu > .logo{grid-area:logo;align-self:center;float:none!important;display:flex!important;align-items:center;width:auto!important;height:96px;margin:0!important;padding:0!important} html body:not(#nkm):not(#nkd) .BigMenu > .logo svg,html body:not(#nkm):not(#nkd) .BigMenu > .logo img{display:block!important;width:auto!important;height:46px!important;max-height:46px!important;max-width:none!important} html body:not(#nkm):not(#nkd) .BigMenu #trigger2{grid-area:close;align-self:center;float:none!important;display:flex!important;width:52px!important;height:52px!important;margin:0!important;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:rgba(255,255,255,.08)!important;transform:none!important;transition:background-color .2s ease,border-color .2s ease!important} html body:not(#nkm):not(#nkd) .BigMenu #trigger2 .wrap{width:20px!important;height:20px!important} html body:not(#nkm):not(#nkd) .BigMenu #trigger2 span{left:0!important;right:auto!important;top:9px!important;width:20px!important;height:2px!important;margin:0!important;border-radius:2px;background:#fff!important} html body:not(#nkm):not(#nkd) .BigMenu #trigger2 span:nth-child(1),html body:not(#nkm):not(#nkd) .BigMenu #trigger2 span:nth-child(4){opacity:0!important} /* the two columns */ html body:not(#nkm):not(#nkd) .BigMenu > .menuwrapper{grid-area:menu;align-self:center;justify-self:center;display:grid!important;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);column-gap:clamp(48px,6vw,96px);align-items:start;width:100%!important;max-width:1100px;height:auto!important;margin:24px 0!important;padding:0!important} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .left,html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right{float:none!important;display:block!important;width:auto!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .left::before,html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right::before{display:block;margin:0 0 12px;color:var(--nkd-gold);font:600 12px/1.2 Poppins,Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .left::before{content:"Shop"} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right::before{content:"Company"} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper ul{margin:0!important;padding:0!important;list-style:none!important} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper li{display:block;margin:0!important;padding:0!important} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper a{text-decoration:none!important;transition:color .2s ease,background-color .2s ease,border-color .2s ease} /* SHOP: Cars / Parts / Services */ html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .left ul{border-top:1px solid var(--nkd-line)!important} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .left ul > li{border-bottom:1px solid var(--nkd-line)} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .left ul > li > a{display:flex!important;align-items:center;justify-content:space-between;gap:24px;min-height:clamp(84px,12vh,112px)!important;padding:0 4px;color:#fff!important;font:600 clamp(40px,3.4vw,54px)/1.05 Poppins,Arial,sans-serif!important;letter-spacing:.01em;text-transform:uppercase} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .left ul > li > a::after{content:"";flex:0 0 auto;box-sizing:border-box;width:52px;height:52px;border:1px solid rgba(255,255,255,.24);border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/20px no-repeat;transition:background-color .2s ease,border-color .2s ease,transform .2s ease} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .left ul > li:is(.current-menu-item,.current_page_item,.current-menu-parent,.current-page-ancestor,.current-category-ancestor,.current-post-ancestor) > a{color:var(--nkd-gold)!important} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .left ul > li:is(.current-menu-item,.current_page_item,.current-menu-parent,.current-page-ancestor,.current-category-ancestor,.current-post-ancestor) > a::after{border-color:var(--nkd-gold);background:var(--nkd-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/20px no-repeat} /* COMPANY: About / Warranty / Tips & News / Careers in two columns */ html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:16px} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li{grid-column:span 3;min-width:0;border-bottom:1px solid var(--nkd-line)} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li > a{display:flex!important;align-items:center;min-height:54px;padding:0 2px;color:var(--nkd-dim)!important;font:400 18px/1.25 Poppins,Arial,sans-serif!important;letter-spacing:0} /* Sell My Tesla (gold) + Plan your visit tiles */ html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li),html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li) + li:not(.cart){grid-column:span 3;margin:24px 0 0!important;border:0} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li){grid-column:1 / span 3} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li) > a,html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li) + li:not(.cart) > a{display:flex!important;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:18px;height:100%;min-height:104px;padding:18px 18px 16px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.06);color:#fff!important;font:500 17px/1.2 Poppins,Arial,sans-serif!important} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li) > a{border-color:var(--nkd-gold);background:var(--nkd-gold);color:#111!important} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li) > a::before,html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li) + li:not(.cart) > a::before{content:"";display:block;width:24px;height:24px;background-position:center;background-size:24px;background-repeat:no-repeat} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li) > a::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E")} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li) + li:not(.cart) > a::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.1-7-11.5A7 7 0 0 1 19 9.5C19 14.9 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E")} /* Cart / Contact / Login icon buttons */ html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li.cart ~ li.cart,html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li.cart ~ li.cart ~ li{grid-column:span 2;margin:14px 0 0!important;border:0} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li.cart ~ li.cart > a,html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li.cart ~ li.cart ~ li > a{display:flex!important;flex-direction:row;align-items:center;justify-content:center;gap:10px;height:100%;min-height:60px;padding:10px 12px;border:1px solid rgba(255,255,255,.16);border-radius:14px;background:transparent;color:#fff!important;font:500 15px/1.2 Poppins,Arial,sans-serif!important;text-align:center} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li.cart ~ li.cart > a::before,html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li.cart ~ li.cart ~ li > a::before{content:"";flex:0 0 auto;display:block;width:20px;height:20px;background-position:center;background-size:20px;background-repeat:no-repeat} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li.cart ~ li > a:is([href*="/cart"],[href*="/nl/winkelmandje"])::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.2 10.2a1.5 1.5 0 0 0 1.5 1.2h8.6a1.5 1.5 0 0 0 1.5-1.1L21 8H6.2'/%3E%3Ccircle cx='9.5' cy='19.5' r='1.3'/%3E%3Ccircle cx='17' cy='19.5' r='1.3'/%3E%3C/svg%3E")} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li.cart ~ li > a[href*="/contact"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 0 1-11.6 7.1L4 20l1.1-4.2A8 8 0 1 1 20 12z'/%3E%3C/svg%3E")} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li.cart ~ li > a[href*="/team"]::before,html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li.cart ~ li > a[href*="login"]::before,html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li.cart ~ li > a[href*="account"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E")} /* current page */ html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li:is(.current-menu-item,.current_page_item,.current-menu-parent,.current-page-ancestor,.current-category-ancestor,.current-post-ancestor) > a{color:var(--nkd-gold)!important;font-weight:500!important} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li):is(.current-menu-item,.current_page_item) > a{color:#111!important;text-decoration:underline!important;text-underline-offset:4px} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li.cart ~ li:is(.current-menu-item,.current_page_item) > a{border-color:var(--nkd-gold)} /* social row */ html body:not(#nkm):not(#nkd) .BigMenu > .social{grid-area:social;justify-self:center;display:flex!important;align-items:center;gap:12px;width:100%!important;max-width:1100px;margin:0!important;padding:20px 0 0!important;border-top:1px solid var(--nkd-line)!important} html body:not(#nkm):not(#nkd) .BigMenu > .social > a{display:inline-flex!important;align-items:center;justify-content:center;width:46px;height:46px;margin:0!important;padding:0!important;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:transparent;color:#fff!important;font-size:18px!important;line-height:1!important;transition:color .2s ease,border-color .2s ease} html body:not(#nkm):not(#nkd) .BigMenu > .social > .right{float:none!important;margin-left:auto} /* keyboard focus (the theme removes every outline) */ html body:not(#nkm):not(#nkd) .BigMenu a:focus-visible,html body:not(#nkm):not(#nkd) .BigMenu #trigger2:focus-visible{outline:2px solid #c9a53b!important;outline-offset:3px} } @media (min-width:1101px) and (hover:hover){ html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .left ul > li > a:hover{color:var(--nkd-gold)!important} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .left ul > li > a:hover::after{border-color:var(--nkd-gold);transform:translateX(4px)} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li:not(.cart):not(.cart ~ li) > a:hover,html body:not(#nkm):not(#nkd) .BigMenu > .social > a:hover{color:var(--nkd-gold)!important} html body:not(#nkm):not(#nkd) .BigMenu > .social > a:hover{border-color:var(--nkd-gold)} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li) > a:hover{background:#e0bf4f;border-color:#e0bf4f} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li) + li:not(.cart) > a:hover,html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li.cart ~ li.cart > a:hover,html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li.cart ~ li.cart ~ li > a:hover{border-color:var(--nkd-gold);background:rgba(255,255,255,.1)} html body:not(#nkm):not(#nkd) .BigMenu #trigger2:hover{background:rgba(255,255,255,.16)!important} } /* large screens (1600px+): a bit larger overall */ @media (min-width:1600px) and (min-height:761px){ html body:not(#nkm):not(#nkd) .BigMenu{padding-left:64px!important;padding-right:64px!important} html body:not(#nkm):not(#nkd) .BigMenu > .menuwrapper,html body:not(#nkm):not(#nkd) .BigMenu > .social{max-width:1240px} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .left ul > li > a{font-size:62px!important;min-height:clamp(96px,12vh,128px)!important} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .left ul > li > a::after{width:58px;height:58px;background-size:22px} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li > a{min-height:60px;font-size:20px!important} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li) > a,html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li) + li:not(.cart) > a{min-height:120px;font-size:19px!important;padding:20px 20px 18px} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li.cart ~ li.cart > a,html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li.cart ~ li.cart ~ li > a{min-height:66px;font-size:16px!important} } /* short desktop windows (e.g. 1280x720 or less): tighter rows, the overlay scrolls if still needed */ @media (min-width:1101px) and (max-height:760px){ html body:not(#nkm):not(#nkd) .BigMenu > .logo{height:80px} html body:not(#nkm):not(#nkd) .BigMenu > .menuwrapper{margin:8px 0 16px!important} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .left ul > li > a{min-height:76px!important;font-size:clamp(36px,3vw,44px)!important} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li > a{min-height:46px} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li),html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li) + li:not(.cart){margin-top:18px!important} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li) > a,html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li) + li:not(.cart) > a{min-height:84px;gap:12px;padding:14px 16px 13px} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li.cart ~ li.cart,html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li.cart ~ li.cart ~ li{margin-top:12px!important} html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li.cart ~ li.cart > a,html body:not(#nkm):not(#nkd) .BigMenu .menuwrapper .right ul > li.cart ~ li.cart ~ li > a{min-height:52px} html body:not(#nkm):not(#nkd) .BigMenu > .social{padding-top:14px!important} } /* ===== NIKOLA DESKTOP MENU A END ===== */ /* ===== NIKOLA CHECKOUT FIX START (2026-10-08) ===== */ /* "Your order" card on the classic checkout (desktop, >900px). Cause: #customer_details spans grid rows 2-3 while the heading sits alone in row 2 and the order review in row 3. The tall billing form spreads its extra height over BOTH auto rows, so row 2 grows far beyond the 72px heading: the heading looks like its own box and an empty white gap opens above the PRODUCT/SUBTOTAL table. Fix: row 3 becomes the flexible row (it absorbs the extra height), so row 2 is exactly the heading and the table follows straight under it as one card. position:sticky is dropped: it never worked on the live site anyway (the theme's .wrapper has overflow-x:hidden, which disables sticky), and in the joined layout a sticky heading would come loose from the card at the end of the form. Mobile (<=900px) is not touched. */ @media (min-width: 901px) { body.woocommerce-checkout:not(#nk):not(#nkck) form.checkout.woocommerce-checkout { grid-template-rows: auto auto 1fr; } body.woocommerce-checkout:not(#nk):not(#nkck) form.checkout > #order_review_heading, body.woocommerce-checkout:not(#nk):not(#nkck) form.checkout > #order_review { position: relative; top: auto; align-self: start; } } /* ===== NIKOLA CHECKOUT FIX END ===== */ /* ===== NIKOLA CARS MOBILE VIEW TOGGLE START (2026-10-08) ===== /cars/ on phones (max 600px): switch "2 per row" (default, unchanged) / "1 per row" (full-width card). The two buttons are added by the mu-plugin nikola-cars-view-toggle.php (+ .js). The choice sits in localStorage ("nkCarsView") and is set as html.nkcv-1 before the page paints. Without the mu-plugin this block does nothing. 601px and wider (tablet, desktop): toggle hidden, nothing changes. Rollback: delete this whole block (START -> END). */ .nkcv{display:none} @media (max-width:600px){ html.nkcr body.category-cars #formFilter:not(#nkcv){position:relative!important} html.nkcr body.category-cars #formFilter h1:not(#nkcv){padding-right:104px!important} html.nkcr body.category-cars #formFilter .nkcv{position:absolute;top:-2px;right:0;z-index:5;display:inline-flex;align-items:center;gap:2px;height:40px;margin:0;padding:3px;box-sizing:border-box;border:1px solid #2a2a2a;border-radius:999px;background:#111;box-shadow:0 2px 8px rgba(0,0,0,.12)} html.nkcr body.category-cars #formFilter .nkcv-b{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:32px;margin:0;padding:0;border:0;border-radius:999px;background:transparent;color:rgba(255,255,255,.62);cursor:pointer;line-height:1;box-shadow:none;transition:background .15s,color .15s;-webkit-tap-highlight-color:transparent} html.nkcr body.category-cars #formFilter .nkcv-b svg{display:block;width:17px!important;height:17px!important;fill:currentColor!important;stroke:none!important} html.nkcr body.category-cars #formFilter .nkcv-b[aria-pressed="true"]{background:#c9a53b;color:#111} html.nkcr body.category-cars #formFilter .nkcv-b:focus{outline:none} html.nkcr body.category-cars #formFilter .nkcv-b:focus-visible{outline:2px solid #c9a53b!important;outline-offset:2px} html.nkcr body.category-cars #formFilter .nkcv-b[aria-pressed="true"]:focus-visible{outline-color:#fff!important} /* 1 per row: full-width card, desktop-like text sizes, photo keeps 4:3 */ html.nkcr.nkcv-1 body.category-cars #cars > ul:not(#nkcv){grid-template-columns:minmax(0,1fr)!important;gap:16px!important} html.nkcr.nkcv-1 body.category-cars #cars > ul > li:not(#nkcv){border-radius:12px!important} html.nkcr.nkcv-1 body.category-cars #cars > ul > li .nkcr-badges{top:12px;left:12px;right:12px;gap:6px} html.nkcr.nkcv-1 body.category-cars #cars > ul > li .nkcr-badges .layer.layer:not(#nkcv),html.nkcr.nkcv-1 body.category-cars #cars > ul > li i.nkcr-chip.nkcr-chip:not(#nkcv){height:24px!important;padding:0 10px!important;font-size:10px!important;letter-spacing:.1em!important} html.nkcr.nkcv-1 body.category-cars #cars > ul > li .nkcr-chip:nth-child(n+3){display:inline-flex} html.nkcr.nkcv-1 body.category-cars #cars > ul > li .content:not(#nkcv){padding:15px 16px 16px!important} html.nkcr.nkcv-1 body.category-cars #cars > ul > li .content h3:not(#nkcv){font-size:17px!important;line-height:1.3!important} html.nkcr.nkcv-1 body.category-cars #cars > ul > li .content h3 .nkcr-ver:not(#nkcv){font-size:13px!important;margin-top:2px;white-space:nowrap} html.nkcr.nkcv-1 body.category-cars #cars > ul > li .nkcr-specs:not(#nkcv){flex-direction:row!important;flex-wrap:wrap!important;align-items:center!important;gap:6px 18px!important;margin-top:10px!important;font-size:13px!important} html.nkcr.nkcv-1 body.category-cars #cars > ul > li .nkcr-specs span:not(#nkcv){gap:6px!important} html.nkcr.nkcv-1 body.category-cars #cars > ul > li .nkcr-specs svg:not(#nkcv){width:14px!important;height:14px!important} html.nkcr.nkcv-1 body.category-cars #cars > ul > li .content p:not(#nkcv){padding:12px 46px 0 0!important;font-size:12px!important} html.nkcr.nkcv-1 body.category-cars #cars > ul > li .content p::before{margin-right:-46px} html.nkcr.nkcv-1 body.category-cars #cars > ul > li .content p b:not(#nkcv){font-size:19px!important} html.nkcr.nkcv-1 body.category-cars #cars > ul > li .content p b .nkcr-vat:not(#nkcv){font-size:12px!important} html.nkcr.nkcv-1 body.category-cars #cars > ul > li .content p em:not(#nkcv){font-size:12px!important;margin-top:2px!important} html.nkcr.nkcv-1 body.category-cars #cars > ul > li.sold .content p b:not(#nkcv),html.nkcr.nkcv-1 body.category-cars #cars > ul > li.options .content p b:not(#nkcv){font-size:15px!important} html.nkcr.nkcv-1 body.category-cars #cars > ul > li .nkcr-go{display:flex;right:16px;bottom:16px} } @media (max-width:600px) and (prefers-reduced-motion:reduce){ html.nkcr body.category-cars #formFilter .nkcv-b{transition:none} } /* ===== NIKOLA CARS MOBILE VIEW TOGGLE END ===== */ /* ===== NIKOLA CARS TOGGLE SUBTLE START (2026-10-08) ===== Override for block "NIKOLA CARS MOBILE VIEW TOGGLE" (block 5): no gold, no black pill. The pill takes the page background (#f3f3f0 shows through), thin muted border, inactive icon muted grey, active button only a slightly darker tint with a stronger icon. Keyboard focus stays visible (grey ring). Phones only (max 600px). Rollback: delete this whole block (START -> END); block 5 then shows the gold version again. */ @media (max-width:600px){ html.nkcr body.category-cars #formFilter .nkcv{background:transparent;border-color:#dcdcd6;box-shadow:none} html.nkcr body.category-cars #formFilter .nkcv-b{color:#8a8a85} html.nkcr body.category-cars #formFilter .nkcv-b[aria-pressed="true"]{background:#e6e6e1;color:#333} html.nkcr body.category-cars #formFilter .nkcv-b:focus-visible{outline:2px solid #8a8a85!important;outline-offset:0!important} html.nkcr body.category-cars #formFilter .nkcv-b[aria-pressed="true"]:focus-visible{outline-color:#8a8a85!important} } /* ===== NIKOLA CARS TOGGLE SUBTLE END ===== */ /* ===== NIKOLA SHOP VIEW TOGGLE START (2026-10-08) ===== Parts + Services listings on phones (max 600px): switch "2 per row" (default, unchanged) / "1 per row" (full-width card). Same subtle look as the /cars/ toggle (blocks 5+6). The buttons are added by the mu-plugin nikola-shop-view-toggle.php (+ .js) on top of the "Parts & Services redesign" block (html.nkps, li.nkps-card). Choice in localStorage "nkShopView" -> html.nksv-1. Without the mu-plugin this block does nothing. 601px and wider (tablet, desktop): toggle hidden, nothing changes. Rollback: delete this whole block (START -> END). */ .nksv{display:none} @media (max-width:600px){ html.nkps body.tax-product_cat .woocommerce-products-header:not(#nksv){position:relative!important} html.nkps body.tax-product_cat .woocommerce-products-header__title:not(#nksv){padding-right:104px!important} html.nkps body.tax-product_cat .woocommerce-products-header .nksv{position:absolute;top:-2px;right:0;z-index:5;display:inline-flex;align-items:center;gap:2px;height:40px;margin:0;padding:3px;box-sizing:border-box;border:1px solid #dcdcd6;border-radius:999px;background:transparent;box-shadow:none} html.nkps body.tax-product_cat .woocommerce-products-header .nksv-b{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:32px;min-width:0;margin:0;padding:0;border:0;border-radius:999px;background:transparent;color:#8a8a85;cursor:pointer;font-size:0;line-height:1;text-indent:0;box-shadow:none;transition:background .15s,color .15s;-webkit-tap-highlight-color:transparent} html.nkps body.tax-product_cat .woocommerce-products-header .nksv-b svg{display:block;width:17px!important;height:17px!important;fill:currentColor!important;stroke:none!important} html.nkps body.tax-product_cat .woocommerce-products-header .nksv-b[aria-pressed="true"]{background:#e6e6e1;color:#333} html.nkps body.tax-product_cat .woocommerce-products-header .nksv-b:focus{outline:none} html.nkps body.tax-product_cat .woocommerce-products-header .nksv-b:focus-visible{outline:2px solid #8a8a85!important;outline-offset:0!important} /* 1 per row: full-width card, desktop-like text sizes, photo keeps 4:3 */ html.nkps.nksv-1 body.tax-product_cat #main ul.products:not(#nksv){grid-template-columns:minmax(0,1fr)!important;gap:16px!important} html.nkps.nksv-1 body.tax-product_cat #main ul.products > li.nkps-card:not(#nksv){border-radius:12px!important} html.nkps.nksv-1 body.tax-product_cat #main ul.products > li.nkps-card .nkps-pills{top:12px;left:12px;right:12px;gap:6px} html.nkps.nksv-1 body.tax-product_cat #main ul.products > li.nkps-card .nkps-pill{height:24px;padding:0 10px;font-size:10px;letter-spacing:.12em} html.nkps.nksv-1 body.tax-product_cat #main ul.products > li.nkps-card .nkps-pill:nth-child(n+3){display:inline-flex} html.nkps.nksv-1 body.tax-product_cat #main ul.products > li.nkps-card .nkps-body{padding:15px 16px 16px} html.nkps.nksv-1 body.tax-product_cat #main ul.products > li.nkps-card .nkps-body h2.woocommerce-loop-product__title:not(#nksv){font-size:17px!important;line-height:1.3!important;-webkit-line-clamp:3} html.nkps.nksv-1 body.tax-product_cat #main ul.products > li.nkps-card .nkps-specs{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:10px;font-size:13px} html.nkps.nksv-1 body.tax-product_cat #main ul.products > li.nkps-card .nkps-specs span{gap:6px;align-items:center} html.nkps.nksv-1 body.tax-product_cat #main ul.products > li.nkps-card .nkps-specs svg{width:14px;height:14px;margin-top:0} html.nkps.nksv-1 body.tax-product_cat #main ul.products > li.nkps-card .nkps-price{padding:12px 46px 0 0} html.nkps.nksv-1 body.tax-product_cat #main ul.products > li.nkps-card .nkps-price::before{margin:0 -46px 11px 0} html.nkps.nksv-1 body.tax-product_cat #main ul.products > li.nkps-card .priceNotVariable .amount:not(#nksv){font-size:19px!important} html.nkps.nksv-1 body.tax-product_cat #main ul.products > li.nkps-card .priceNotVariable .amount small:not(#nksv){font-size:12px!important} html.nkps.nksv-1 body.tax-product_cat #main ul.products > li.nkps-card .priceNotVariable .amountVat:not(#nksv),html.nkps.nksv-1 body.tax-product_cat #main ul.products > li.nkps-card .priceNotVariable del:not(#nksv){font-size:12px!important} html.nkps.nksv-1 body.tax-product_cat #main ul.products > li.nkps-card .nkps-go{display:flex;right:16px;bottom:16px} } @media (max-width:600px) and (prefers-reduced-motion:reduce){ html.nkps body.tax-product_cat .woocommerce-products-header .nksv-b{transition:none} } /* ===== NIKOLA SHOP VIEW TOGGLE END ===== */ /* ===== NIKOLA HEADER MENU BREAKPOINT START (2026-10-10) ===== */ /* The theme (style.css) hides the desktop menu (.menuWrap) at every width <= 1400px; only the hamburger stayed. Laptops (1280/1366) therefore had no menu. This block keeps the menu visible from 1024px up to 1400px. Same conditions as "Header slim" (min-height 521px or portrait), so short landscape windows keep the mobile header. >= 1401px and < 1024px: nothing changes. The hamburger (#trigger -> BigMenu) stays everywhere, exactly as today at 1440. */ @media (min-width:1024px) and (max-width:1400px) and (min-height:521px), (min-width:1024px) and (max-width:1400px) and (orientation:portrait){ html body header.navigation nav .menuwrapper .wrapper .menuWrap{display:block!important} } /* 1024-1179px: slightly tighter (14px text, 12px side padding, underline follows) so logo, menu and icons stay calm on one line */ @media (min-width:1024px) and (max-width:1179.98px) and (min-height:521px), (min-width:1024px) and (max-width:1179.98px) and (orientation:portrait){ html body header.navigation #menu-main-menu > li > a{padding:0 12px!important;font-size:14px!important;letter-spacing:.035em!important;white-space:nowrap!important} html body header.navigation #menu-main-menu > li > a::after{left:12px;right:12px} } /* ===== NIKOLA HEADER MENU BREAKPOINT END ===== */ /* NB MENU QUIET LUXE v1 START */ /* Nikola Brussels main menu "Quiet luxe" (2026-10-13). Restyles the hamburger overlay (.BigMenu) on all widths; sits AFTER the mobile + desktop Menu A blocks. Remove this whole block to roll back. */ /* One calm black overlay. No filled gold: gold only for the two labels, the current page and a 1px outline on Sell My Tesla. Shop = medium-weight rows with a thin arrow; Company = simple list; CTAs = two slim outline buttons; Cart/Contact/Login = one quiet text row. */ html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu{background:#0b0b0b!important} html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .left::before,html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .right::before{color:#c8a64a;font:500 10.5px/1.2 Poppins,Arial,sans-serif;letter-spacing:.24em} html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .left ul > li > a::after{border:0!important;border-radius:0!important} html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .left ul > li:is(.current-menu-item,.current_page_item,.current-menu-parent,.current-page-ancestor,.current-category-ancestor,.current-post-ancestor) > a::after{background-color:transparent!important} html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .right ul > li > a::before{flex:0 0 auto} html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu > .social > a{width:40px;height:40px;border-color:rgba(255,255,255,.12)!important;color:rgba(255,255,255,.7)!important;font-size:15px!important} html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu #trigger2{border-color:rgba(255,255,255,.14)!important;background:transparent!important} html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .left ul{border-top:1px solid rgba(255,255,255,.09)!important} html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .left ul > li{border-bottom:1px solid rgba(255,255,255,.09)!important} html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .left ul > li > a{min-height:64px!important;font:500 22px/1.1 Poppins,Arial,sans-serif!important;letter-spacing:.08em!important} html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .left ul > li > a::after{width:22px!important;height:22px!important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/20px no-repeat!important;transition:transform .2s ease} html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .left ul > li:is(.current-menu-item,.current_page_item,.current-menu-parent,.current-page-ancestor,.current-category-ancestor,.current-post-ancestor) > a{color:#c8a64a!important} html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .left ul > li:is(.current-menu-item,.current_page_item,.current-menu-parent,.current-page-ancestor,.current-category-ancestor,.current-post-ancestor) > a::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8a64a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")!important} html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .right::before{margin-top:34px!important} html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .right ul{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;column-gap:12px!important;row-gap:0!important} html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .right ul > li:not(.cart):not(.cart ~ li){grid-column:span 3!important;border-bottom:1px solid rgba(255,255,255,.09)!important;margin:0!important} html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .right ul > li:not(.cart):not(.cart ~ li) > a{display:flex!important;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;height:auto;min-height:0;padding:0;border:0;border-radius:0;background:transparent!important;box-shadow:none;text-align:left;text-decoration:none!important;min-height:48px!important;color:rgba(255,255,255,.78)!important;font:400 15px/1.25 Poppins,Arial,sans-serif!important} html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li),html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li) + li{grid-column:span 3!important;margin:28px 0 0!important;border:0!important} html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li) > a,html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li) + li > a{display:flex!important;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;height:auto;min-height:0;padding:0;border:0;border-radius:0;background:transparent!important;box-shadow:none;text-align:left;text-decoration:none!important;justify-content:center!important;min-height:50px!important;padding:0 12px!important;border:1px solid rgba(255,255,255,.22)!important;border-radius:999px!important;color:#fff!important;font:500 13.5px/1.2 Poppins,Arial,sans-serif!important;letter-spacing:.04em} html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li) > a{border-color:#c8a64a!important;color:#c8a64a!important} html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li) > a::before,html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li) + li > a::before{width:16px!important;height:16px!important;background-size:16px!important} html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li) > a::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8a64a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E")!important} html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .right ul > li.cart ~ li.cart,html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .right ul > li.cart ~ li.cart ~ li{grid-column:span 2!important;margin:22px 0 0!important;border:0!important} html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .right ul > li.cart ~ li.cart > a,html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .right ul > li.cart ~ li.cart ~ li > a{display:flex!important;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;height:auto;min-height:0;padding:0;border:0;border-radius:0;background:transparent!important;box-shadow:none;text-align:left;text-decoration:none!important;justify-content:center!important;gap:8px!important;min-height:44px!important;color:rgba(255,255,255,.62)!important;font:400 13px/1.2 Poppins,Arial,sans-serif!important} html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .right ul > li.cart ~ li.cart > a::before,html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .right ul > li.cart ~ li.cart ~ li > a::before{width:16px!important;height:16px!important;background-size:16px!important;opacity:.75} html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu > .social{border-top:1px solid rgba(255,255,255,.07)!important;justify-content:center} @media (min-width:1101px){ html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper{column-gap:120px!important} html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .left ul > li > a{min-height:92px!important;font-size:40px!important;font-weight:500!important;letter-spacing:.06em!important} html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .left ul > li > a::after{width:28px!important;height:28px!important;background-size:26px!important} html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .right ul > li:not(.cart):not(.cart ~ li) > a{min-height:54px!important;font-size:16px!important} html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .right::before{margin-top:0!important} html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li) > a,html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li) + li > a{min-height:54px!important} } @media (hover:hover){ html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .left ul > li > a:hover{color:#fff!important;opacity:1} html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .left ul > li > a:hover::after{transform:translateX(6px)} html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .right ul > li:not(.cart):not(.cart ~ li) > a:hover,html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .right ul > li.cart ~ li.cart > a:hover,html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .right ul > li.cart ~ li.cart ~ li > a:hover{color:#fff!important} html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li) > a:hover{background:rgba(200,166,74,.1)!important} html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li) + li > a:hover{border-color:rgba(255,255,255,.5)!important} } /* current page in the Cart / Contact / Login row, and a visible keyboard focus ring on every link */ html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .right ul > li.cart ~ li.cart:is(.current-menu-item,.current_page_item) > a,html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .right ul > li.cart ~ li.cart ~ li:is(.current-menu-item,.current_page_item) > a{color:#c8a64a!important;border:0!important} html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu .menuwrapper .right ul > li.cart:not(.cart ~ li) + li:is(.current-menu-item,.current_page_item) > a{border-color:#c8a64a!important} html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu a:focus-visible,html body:not(#nkm):not(#nkd):not(#nkr) .BigMenu #trigger2:focus-visible{outline:2px solid #c8a64a!important;outline-offset:3px!important} /* NB MENU QUIET LUXE v1 END */ /* NB TIPS-NEWS QUIET LUXE v1 START */ /* Tips & News (category 40) Quiet luxe. Desktop >=1024: featured + 3-col grid. Tablet 768-1023: featured + 2-col. Mobile <=767: list + filter chips. Remove block to roll back. */ body.category-tips-news #blog.nbtn{max-width:1240px;margin:0 auto;padding:56px 32px 72px;box-sizing:border-box;color:#0b0b0b;font-family:Poppins,Arial,sans-serif} body.category-tips-news #blog .nbtn-eyebrow{margin:0 0 10px;color:#c8a64a;font:500 11px/1.2 Poppins,Arial,sans-serif;letter-spacing:.24em;text-transform:uppercase} body.category-tips-news #blog.nbtn h1{margin:0 0 12px;font:500 40px/1.15 Poppins,Arial,sans-serif;letter-spacing:-.01em;color:#0b0b0b;text-align:left} body.category-tips-news #blog .nbtn-intro{margin:0 0 40px;max-width:620px;color:#5f5f5f;font-size:16px;line-height:1.6} body.category-tips-news #blog .nbtn-chips{display:none} body.category-tips-news #blog.nbtn ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 28px;margin:0;padding:0;list-style:none} body.category-tips-news #blog.nbtn ul > li{position:relative;display:flex;flex-direction:column;float:none;width:auto;margin:0;padding:0;background:#fff;border:0;min-width:0} body.category-tips-news #blog.nbtn ul > li .fullLink{position:absolute;inset:0;z-index:2} body.category-tips-news #blog.nbtn ul > li .imageUrl{float:none;width:100%;height:auto;aspect-ratio:16/10;background-color:#f2f0eb;background-size:cover;background-position:center;margin:0} body.category-tips-news #blog.nbtn ul > li .content{float:none;width:auto;flex:1;display:flex;flex-direction:column;padding:18px 0 0;margin:0;text-align:left} body.category-tips-news #blog .nbtn-label{display:block;margin:0 0 8px;color:#c8a64a;font:500 10.5px/1.2 Poppins,Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase} body.category-tips-news #blog.nbtn ul > li h2{margin:0 0 10px;font:500 19px/1.35 Poppins,Arial,sans-serif;color:#0b0b0b;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere} body.category-tips-news #blog.nbtn ul > li p{margin:0 0 16px;color:#5f5f5f;font-size:14.5px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} body.category-tips-news #blog.nbtn ul > li .button{margin-top:auto;align-self:flex-start;padding:0 0 3px;background:none!important;border:0;border-bottom:1px solid #c8a64a;border-radius:0;color:#0b0b0b!important;font:500 12px/1.4 Poppins,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;box-shadow:none;width:auto;min-width:0;height:auto} body.category-tips-news #blog.nbtn ul > li .clearing{display:none} body.category-tips-news #blog.nbtn ul > li.is-featured{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:40px;align-items:center;padding-bottom:40px;border-bottom:1px solid #e7e3da} body.category-tips-news #blog.nbtn ul > li.is-featured .content{padding:0} body.category-tips-news #blog.nbtn ul > li.is-featured h2{font-size:30px;line-height:1.25;-webkit-line-clamp:4} body.category-tips-news #blog.nbtn ul > li.is-featured p{font-size:16px;-webkit-line-clamp:5} body.category-tips-news #blog.nbtn ul > li.is-featured .button{margin-top:8px} body.category-tips-news #blog.nbtn ul > li:hover h2{text-decoration:underline;text-decoration-color:#c8a64a;text-underline-offset:4px} @media (min-width:768px) and (max-width:1023px){ body.category-tips-news #blog.nbtn{padding:44px 28px 60px} body.category-tips-news #blog.nbtn ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px} body.category-tips-news #blog.nbtn ul > li.is-featured{grid-template-columns:1fr;gap:20px} body.category-tips-news #blog.nbtn ul > li.is-featured h2{font-size:26px} } @media (max-width:767px){ body.category-tips-news #blog.nbtn{padding:32px 20px 48px} body.category-tips-news #blog.nbtn h1{font-size:30px} body.category-tips-news #blog .nbtn-intro{margin-bottom:20px;font-size:15px} body.category-tips-news #blog .nbtn-chips{display:flex;gap:8px;overflow-x:auto;margin:0 -20px 16px;padding:0 20px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch} body.category-tips-news #blog .nbtn-chips::-webkit-scrollbar{display:none} body.category-tips-news #blog .nbtn-chips button{flex:0 0 auto;padding:8px 16px;border:1px solid #d9d4c8;border-radius:999px;background:#fff;color:#0b0b0b;font:500 13px/1.2 Poppins,Arial,sans-serif;cursor:pointer;white-space:nowrap} body.category-tips-news #blog .nbtn-chips button.is-active{background:#0b0b0b;border-color:#0b0b0b;color:#fff} body.category-tips-news #blog.nbtn ul{display:block} body.category-tips-news #blog.nbtn ul > li,body.category-tips-news #blog.nbtn ul > li.is-featured{display:flex;flex-direction:row;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid #ece8df;grid-template-columns:none} body.category-tips-news #blog.nbtn ul > li .imageUrl{flex:0 0 112px;width:112px;height:112px;aspect-ratio:auto} body.category-tips-news #blog.nbtn ul > li .content{padding:0;min-width:0} body.category-tips-news #blog.nbtn ul > li h2,body.category-tips-news #blog.nbtn ul > li.is-featured h2{font-size:15.5px;line-height:1.35;margin:0 0 6px;-webkit-line-clamp:3} body.category-tips-news #blog.nbtn ul > li p,body.category-tips-news #blog.nbtn ul > li .button{display:none} body.category-tips-news #blog .nbtn-label{margin-bottom:6px;font-size:10px} } /* v2 fix: neutralise webit #blog rules (li padding/float/hover-scale, .imageUrl absolute 50%x100%, .content float right 50%) */ body.category-tips-news #blog.nbtn ul > li{transform:none!important;float:none!important} body.category-tips-news #blog.nbtn ul > li .imageUrl{position:relative!important;left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;z-index:1;transform:none!important;opacity:1!important;visibility:visible!important} body.category-tips-news #blog.nbtn ul > li .content,body.category-tips-news #blog.nbtn ul > li h2,body.category-tips-news #blog.nbtn ul > li p,body.category-tips-news #blog.nbtn ul > li .button{position:relative!important;float:none!important;transform:none!important;opacity:1!important;visibility:visible!important} body.category-tips-news #blog.nbtn ul > li .content{z-index:1} body.category-tips-news #blog.nbtn ul > li .fullLink{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;z-index:3!important;background:transparent!important} @media (min-width:768px){ body.category-tips-news #blog.nbtn ul > li{position:relative!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;top:auto!important;left:auto!important} body.category-tips-news #blog.nbtn ul > li:not(.is-featured){display:flex!important;flex-direction:column!important} body.category-tips-news #blog.nbtn ul > li.is-featured{display:grid!important;padding-bottom:40px!important} body.category-tips-news #blog.nbtn ul > li .imageUrl{display:block!important;width:100%!important;height:auto!important;aspect-ratio:16/10!important;margin:0!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important} body.category-tips-news #blog.nbtn ul > li .content{display:flex!important;flex-direction:column!important;width:auto!important;height:auto!important;margin:0!important;padding:18px 0 0!important;top:auto!important;left:auto!important} body.category-tips-news #blog.nbtn ul > li.is-featured .content{padding:0!important} body.category-tips-news #blog.nbtn ul > li .content h2,body.category-tips-news #blog.nbtn ul > li .content p{margin-left:0!important;margin-right:0!important} } body.category-tips-news #blog.nbtn h1{text-transform:none!important;font-weight:500!important}body.category-tips-news #blog.nbtn ul > li .content h2{font-weight:500!important} /* NB TIPS-NEWS QUIET LUXE v1 END */ /* NB FAV-COMPARE v1 — compare page (/favourites/): car columns capped at 280px on desktop, left-aligned next to the label column. With 2–3 cars the photos no longer blow up; with 4–5 cars nothing changes visually. Mobile (<=767px) untouched. */ @media (min-width:768px){ #nkfav-page .nkfav-tbl{width:min(100%,calc(210px + var(--nkfav-n,5) * 280px))} /* shrink the white frame around the table to the table itself (browsers without :has keep a full-width frame, table still compact) */ #nkfav-page .nkfav-box:has(.nkfav-tbl[style="--nkfav-n:1"]){width:min(100%,492px)} #nkfav-page .nkfav-box:has(.nkfav-tbl[style="--nkfav-n:2"]){width:min(100%,772px)} #nkfav-page .nkfav-box:has(.nkfav-tbl[style="--nkfav-n:3"]){width:min(100%,1052px)} #nkfav-page .nkfav-box:has(.nkfav-tbl[style="--nkfav-n:4"]){width:min(100%,1332px)} #nkfav-page .nkfav-box:has(.nkfav-tbl[style="--nkfav-n:5"]){width:min(100%,1612px)} #nkfav-page .nkfav-box:has(.nkfav-tbl) .nkfav-tbl{width:100%} /* photo: same size as with 5 cars (280px column -> 244 x 183px), never taller */ #nkfav-page .nkfav-ph{max-height:183px} } /* 2026-10-21 contactkaart in kleur */ html body.page-id-17 #contact .right .image>iframe{filter:none!important} #menu-main-menu > li > a{white-space:nowrap}