/**
* Segway Dealer - skin voor het Classic-thema.
*
* Deze regels horen eigenlijk thuis in het kindthema
* (themes/segway-dealer/assets/css/custom.css), maar in deze installatie staat er
* in themes/classic/templates/_partials/head.tpl een hardgecodeerde regel:
*
*
*
* Die staat NA het stylesheets-blok van PrestaShop en overschrijft dus alles
* wat het thema netjes registreert - ook in de Segway-shop, want het kindthema
* erft het template van Classic. De hook displayHeader wordt daarna pas
* gerenderd, dus laadt de module dit bestand daar met een gewone . Dat
* is het enige punt in de dat later komt dan de QM-regel.
*
* Daarom staat er op de vechtende regels !important: ze moeten het winnen van
* een stylesheet die niet van ons is en die we niet mogen aanpassen (hij is
* van de andere drie shops).
*
* Zodra PrestaShop naar 9.1 gaat of die twee regels uit head.tpl verdwijnen,
* kan de inhoud hiervan terug naar het kindthema en mag het !important weg.
*
* De accentkleur staat hier niet hard in: de module zet --segway-accent in de
* op de kleur uit de module-instellingen. Segway-rood is de terugval.
*/
/* ----------------------------------------------------------------------
* 1. Een gecentreerde kolom
*
* Classic draait op Bootstrap 4; .container is daar 1140px breed. We trekken
* hem gelijk met de blokken van de module (1180px) zodat de header, de content
* en de footer netjes onder elkaar uitlijnen.
* -------------------------------------------------------------------- */
#header .container,
#wrapper .container,
#footer .container {
max-width: 1180px !important;
}
#wrapper {
padding-top: 1.5rem;
}
/* De homepage vult de breedte zelf al via de module. */
#index #wrapper > .container {
max-width: none !important;
padding: 0 !important;
}
#index #content-wrapper {
width: 100%;
}
/* ----------------------------------------------------------------------
* 2. Rustige, witte header
*
* De QM-stylesheet zet hier een donkere balk met goud. Dat is de huisstijl van
* qualitymotors.nl, niet van de dealerpagina. Eerst alles terug naar wit, dan
* pas onze eigen accenten - anders blijft er witte tekst op wit achter.
* -------------------------------------------------------------------- */
#header,
#header .header-nav,
#header .header-top {
background: #fff !important;
background-image: none !important;
color: #1a1a1a !important;
box-shadow: none !important;
}
/* De informatiebalk heeft een eigen donkere achtergrond; zijn telefoonlink
wint hieronder op specificiteit. Geen :not() met een afstammingsselector:
die is niet overal geldig, en een ongeldige selector gooit de hele regel
weg - dan zou de hele header zijn kleur verliezen. */
#header a,
#header .header-nav a {
color: #1a1a1a !important;
}
#header a:hover,
#header a:focus {
color: var(--segway-accent, #e2001a) !important;
}
.header-nav {
border-bottom: 0 !important;
padding-block: .25rem;
}
/* Een merk betekent: geen taal- en valutakiezer en geen bovenbalk vol links.
Let op: hier stond eerder .right-nav in zijn geheel, en daarmee verdween ook
de winkelwagen. Die is nu per onderdeel weggehaald; account en winkelwagen
verhuizen door storefront.js naar de menubalk. */
.header-nav #_desktop_contact_link,
.header-nav #_desktop_language_selector,
.header-nav #_desktop_currency_selector {
display: none !important;
}
/* De bovenbalk zelf is leeg zodra die drie weg zijn en account en winkelwagen
verhuisd zijn; hem helemaal verbergen zou de winkelwagen meenemen als dat
verhuizen niet lukt, dus hij krijgt alleen geen hoogte meer. */
.header-nav {
min-height: 0;
padding-block: 0;
}
#header .header-top {
padding-bottom: .75rem;
}
#header {
border-bottom: 1px solid rgba(0, 0, 0, .08) !important;
}
/* Een dealerpagina heeft een logo nodig dat je ziet; Classic houdt het klein. */
#header .logo,
#header .header-logo img {
max-height: 52px;
width: auto;
}
/* Zoekveld als pil, in lijn met de knoppen. storefront.js verplaatst het naar de
menubalk; deze opmaak geldt op beide plekken, zodat het er ook goed uitziet
als dat verplaatsen niet lukt. */
#search_widget form input[type="text"] {
border: 1px solid rgba(0, 0, 0, .15) !important;
border-radius: 999px !important;
padding-inline: 2.5rem 1rem !important;
background: #fff !important;
}
#search_widget form input[type="text"]:focus {
border-color: var(--segway-accent, #e2001a) !important;
outline: none;
}
/* De gedeelde Parts Hub blijft functioneel dezelfde module, maar krijgt op de
Segway-shop een eigen rustige skin. De shopgebonden rootclass wordt alleen door
Parts Hub gezet wanneer SESF_ACTIVE en SESF_PARTSHUB voor deze shop aan
staan; de hoofdshop wordt hierdoor niet geraakt. */
.qm-finder-page--shop-scoped .qm-finder-kicker,
.qm-finder-page--shop-scoped .qm-finder-results-head span {
color: var(--segway-accent, #e2001a) !important;
}
.qm-finder-page--shop-scoped .qm-vehicle-selector {
border-color: rgba(0, 0, 0, .12) !important;
}
.qm-finder-page--shop-scoped .qm-vehicle-selector__badge {
background: rgba(255, 255, 255, .1) !important;
color: #fff !important;
}
.qm-finder-page--shop-scoped .qm-rdw-form {
border-color: rgba(0, 0, 0, .1) !important;
background: #f4f6f8 !important;
}
.qm-finder-page--shop-scoped .qm-vehicle-selector__submit,
.qm-finder-page--shop-scoped .qm-finder-product__cart,
.qm-finder-page--shop-scoped .qm-exploded-part__buttons .qm-inline-cart button {
border-color: var(--segway-accent, #e2001a) !important;
background: var(--segway-accent, #e2001a) !important;
background-image: none !important;
color: var(--segway-accent-ink, #fff) !important;
}
.qm-finder-page--shop-scoped .qm-vehicle-selector__submit:hover,
.qm-finder-page--shop-scoped .qm-vehicle-selector__submit:focus,
.qm-finder-page--shop-scoped .qm-finder-product__cart:hover,
.qm-finder-page--shop-scoped .qm-finder-product__cart:focus,
.qm-finder-page--shop-scoped .qm-exploded-part__buttons .qm-inline-cart button:hover,
.qm-finder-page--shop-scoped .qm-exploded-part__buttons .qm-inline-cart button:focus {
border-color: var(--segway-accent-dark, #b30015) !important;
background: var(--segway-accent-dark, #b30015) !important;
color: var(--segway-accent-ink, #fff) !important;
}
.qm-finder-page--shop-scoped .qm-selected-vehicle,
.qm-finder-page--shop-scoped .qm-rdw-result__head {
border-inline-start-color: var(--segway-accent, #e2001a) !important;
}
.qm-finder-page--shop-scoped .qm-finder-product__proof {
background: #f1f2f4 !important;
color: #444 !important;
}
.qm-finder-page--shop-scoped .qm-finder-product__proof span {
color: #666 !important;
}
/* ----------------------------------------------------------------------
* 2b. Informatiebalk boven de header
*
* De module hangt deze in displayBanner, het eerste blok binnen
* van Classic. Zo hoeft header.tpl van het moederthema
* niet gekopieerd te worden - dat bestand zou bij elke Classic-update uit de
* pas gaan lopen, en het is gedeeld met de andere drie shops.
* -------------------------------------------------------------------- */
#header .segway-topbar {
background: #0f0f0f !important;
color: rgba(255, 255, 255, .82) !important;
font-size: .8rem;
}
.segway-topbar__inner {
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: .25rem 1rem;
width: 100%;
max-width: 1180px;
margin-inline: auto;
padding: .45rem 1rem;
}
.segway-topbar__items {
display: flex;
flex-wrap: wrap;
gap: .25rem 1.25rem;
margin: 0;
padding: 0;
list-style: none;
}
.segway-topbar__right {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .25rem 1rem;
}
/* Een regel in de bovenbalk mag een link zijn: "tekst | adres" in het
configuratiescherm. Handig voor een onderwerp dat niet in het menu past. */
#header .segway-topbar__link {
color: inherit !important;
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, .28);
}
#header .segway-topbar__link:hover,
#header .segway-topbar__link:focus {
color: #fff !important;
border-bottom-color: #fff;
}
#header .segway-topbar__phone,
#header .segway-topbar__wa {
color: #fff !important;
font-weight: 700;
text-decoration: none;
}
#header .segway-topbar__wa {
padding: .1rem .5rem;
border-radius: 999px;
background: #25d366;
color: #06331a !important;
}
#header .segway-topbar__phone:hover,
#header .segway-topbar__phone:focus {
color: var(--segway-accent, #e2001a) !important;
}
/* De kaartjes naast het logo krijgen de rest van de rij. Classic zet het
zoekveld in een kolom van tien; nadat storefront.js dat veld naar de menubalk heeft
verplaatst, is die ruimte hier vrij. */
#header .header-top .row {
align-items: center;
}
#header .segway-minis {
flex: 1 1 auto;
}
/* Zonder zoekveld hoeft die kolom van tien geen tien meer te zijn. */
#header .header-top-right {
flex: 1 1 auto;
max-width: none;
}
/* Op smalle schermen is de balk snel te vol; dan alleen het merk en de
telefoon, want daar wordt op geklikt. */
@media (max-width: 767px) {
.segway-topbar__items {
display: none;
}
.segway-topbar__inner {
justify-content: center;
}
}
/* ----------------------------------------------------------------------
* 3. Typografie en knoppen
* -------------------------------------------------------------------- */
/* Lichtgrijze ondergrond zodat de witte modelkaarten ertegen afsteken. */
body {
color: #1a1a1a;
background: #f4f6f8;
}
#wrapper,
#main {
background: transparent;
}
h1, h2, h3 {
letter-spacing: -.01em;
}
/* Classic zet knoppen standaard vierkant en in kapitalen; dat maakt een
catalogus met veel knoppen onrustig. De kleur zelf komt uit de module,
want die is instelbaar per shop. */
.btn {
border-radius: 8px !important;
text-transform: none !important;
font-weight: 600;
}
/* Grotere klikvlakken: een deel van de klanten bedient de site met minder
fijne motoriek of op een tablet. */
.btn,
.segway-nav__link,
.segway-jump__link {
min-height: 44px;
}
/* ----------------------------------------------------------------------
* 4. Categoriepagina's in dezelfde stijl als de homepage
* -------------------------------------------------------------------- */
#products .product-miniature,
.featured-products .product-miniature {
border: 1px solid rgba(0, 0, 0, .1);
border-radius: 10px;
overflow: hidden;
}
#products .product-miniature:hover {
border-color: var(--segway-accent, #e2001a);
}
/* Sorteer- en weergavebalk mag stiller: het aanbod is overzichtelijk genoeg. */
#js-product-list-top {
border: 0 !important;
background: transparent !important;
}
.block-category {
min-height: 0 !important;
padding: 1.25rem 0;
background: transparent !important;
box-shadow: none !important;
}
.category-cover img {
border-radius: 12px;
}
/* ----------------------------------------------------------------------
* 5. Rustige footer
* -------------------------------------------------------------------- */
#footer {
background: #f6f6f6 !important;
background-image: none !important;
color: #1a1a1a !important;
}
#footer a {
color: #1a1a1a !important;
}
#footer a:hover {
color: var(--segway-accent, #e2001a) !important;
}
/* ----------------------------------------------------------------------
* 6. Banners van de hoofdshop
*
* ps_banner hangt in displayHome en toont de autobanner van qualitymotors.nl.
* Die hoort niet op een Segway-dealerpagina. Dit is een noodverband met CSS: de
* nette oplossing is de module loskoppelen onder Design > Positions met de
* shopcontext op Segway Dealer, want dan wordt hij ook niet meer geladen.
* -------------------------------------------------------------------- */
#content.page-home > .banner {
display: none !important;
}
/* ----------------------------------------------------------------------
* 7. Focus zichtbaar houden
* -------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
outline: 3px solid var(--segway-accent, #e2001a) !important;
outline-offset: 2px;
}
/* ----------------------------------------------------------------------
* 9. De header hard vastzetten
*
* De hoofdstylesheet heeft voor de header een reeks regels met "html body"
* ervoor en !important erachter. Die winnen van de gewone regels hierboven,
* ook al staat dit bestand later in de . Daarom staat hieronder
* hetzelfde nog een keer, maar dan met dezelfde zwaarte.
*
* Ook belangrijk: de balken worden niet alleen met een achtergrond gekleurd
* maar ook met ::before en ::after. Die worden hier uitgezet, anders blijft
* er een zandkleurige of gouden laag over een witte balk liggen.
* -------------------------------------------------------------------- */
html body #header,
html body #header .header-nav,
html body #header .header-top {
background: #fff !important;
background-image: none !important;
color: #1a1a1a !important;
border-top: 0 !important;
border-bottom: 1px solid #e6e9ec !important;
box-shadow: none !important;
min-height: 0 !important;
height: auto !important;
}
html body #header .header-nav::before,
html body #header .header-nav::after,
html body #header .header-top::before,
html body #header .header-top::after {
display: none !important;
content: none !important;
}
/* De bovenbalk van Classic. De naam van het element verschilt per versie:
in 1.7 heet het #_desktop_contact_link, in 9.0 #contact-link. Beide staan
hier, zodat het telefoonnummer niet twee keer op de pagina staat - het
staat al in de informatiebalk van de module. Taal en valuta horen niet op
een merkpagina met één taal en één munt. */
html body #header .header-nav #contact-link,
html body #header .header-nav #_desktop_contact_link,
html body #header .header-nav .contact-link,
html body #header .header-nav .language-selector,
html body #header .header-nav .language-selector-wrapper,
html body #header .header-nav .currency-selector,
html body #header .header-nav .currency-selector-wrapper {
display: none !important;
}
/* ----------------------------------------------------------------------
* 10. De actiebalk naast het logo
*
* Op de homepage haalt de module de hoofdstylesheet uit de pagina; daar is
* de balk gewoon rood. Op de andere pagina's blijft die stylesheet staan, en
* daar staat in:
*
* #header .header-top div { background: transparent !important; }
*
* Dat maakt de rode balk wit, en de witte letters erop onzichtbaar. Hier
* krijgt de balk zijn kleur terug met hetzelfde gewicht.
* -------------------------------------------------------------------- */
html body #header .segway-promo {
background: var(--segway-accent, #e2001a) !important;
color: var(--segway-accent-ink, #fff) !important;
}
html body #header .segway-promo__text,
html body #header .segway-promo .segway-promo__text {
color: var(--segway-accent-ink, #fff) !important;
}
html body #header a.segway-promo__button {
background: var(--segway-accent-ink, #fff) !important;
color: var(--segway-accent, #e2001a) !important;
}
html body #header .segway-mini {
background: #fff !important;
color: #1a1a1a !important;
}
/* ----------------------------------------------------------------------
* 11. Zoekveld, account en winkelwagen in de menubalk
*
* storefront.js verhuist deze drie naar de menubalk. De hoofdstylesheet blijft ze
* daar opmaken alsof ze nog in de header staan:
*
* #search_widget { position: absolute; top: 50%;
* transform: translateY(-50%); z-index: 9999; }
*
* Alleen "position: static" terugzetten is niet genoeg: een transform werkt
* ook op een element dat niet gepositioneerd is. Daardoor werd de pil een
* halve hoogte omhoog geschoven en lag hij over het menu heen. Alle vier de
* zijden, de transform en de stapelvolgorde gaan hier dus mee terug.
*
* De selectors noemen .segway-nav niet: als het verhuizen door storefront.js niet lukt,
* moeten deze regels nog steeds gelden.
* -------------------------------------------------------------------- */
html body #header #search_widget,
html body #header .segway-nav__search {
position: static !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
transform: none !important;
z-index: auto !important;
flex: 0 1 200px !important;
width: auto !important;
min-width: 0 !important;
max-width: 200px !important;
height: 34px !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
html body #header #search_widget form {
height: 34px !important;
background: #fff !important;
border: 1px solid #d5dade !important;
border-radius: 999px !important;
box-shadow: none !important;
}
html body #header #search_widget input[type="text"],
html body #header #search_widget input[type="search"] {
height: 32px !important;
padding: 0 .8rem 0 2.1rem !important;
color: #1a1a1a !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
font-size: .8rem !important;
}
html body #header #search_widget button,
html body #header #search_widget .search,
html body #header #search_widget .material-icons.search {
width: 30px !important;
height: 30px !important;
background: none !important;
border: 0 !important;
border-radius: 999px !important;
box-shadow: none !important;
color: #6b7280 !important;
font-size: 17px !important;
}
/* De winkelwagen. De hoofdstylesheet maakt er een gouden pil van en zet
#_desktop_cart span op wit - op een witte balk verdwijnt het woord
"Winkelwagen" daarmee. Alleen het aantal houdt kleur. */
html body #header #_desktop_cart,
html body #header #_desktop_user_info {
position: static !important;
top: auto !important;
transform: none !important;
width: auto !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
}
html body #header #_desktop_cart .blockcart,
html body #header #_desktop_cart .blockcart a,
html body #header #_desktop_user_info a {
display: flex !important;
align-items: center !important;
gap: .35rem !important;
height: auto !important;
margin: 0 !important;
padding: .25rem .4rem !important;
background: none !important;
border: 0 !important;
border-radius: 6px !important;
box-shadow: none !important;
color: #1a1a1a !important;
font-size: .78rem !important;
font-weight: 500 !important;
white-space: nowrap !important;
}
html body #header #_desktop_cart span:not(.cart-products-count),
html body #header #_desktop_user_info span {
color: #1a1a1a !important;
font-size: .78rem !important;
font-weight: 500 !important;
}
html body #header #_desktop_cart i,
html body #header #_desktop_cart .material-icons,
html body #header #_desktop_user_info .material-icons {
color: #6b7280 !important;
font-size: 17px !important;
}
html body #header #_desktop_cart .cart-products-count {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 16px !important;
height: 16px !important;
margin: 0 !important;
padding-inline: .22rem !important;
border-radius: 999px !important;
background: var(--segway-accent, #e2001a) !important;
color: #fff !important;
font-size: .62rem !important;
font-weight: 700 !important;
line-height: 1 !important;
}
/* ----------------------------------------------------------------------
* 12. Gedeelde gouden knopregels begrenzen
*
* De Quality Motors-stylesheet gebruikt op enkele plaatsen een gouden
* background-image met !important. Alleen background-color overschrijven is
* dan onvoldoende: het verloop blijft erboven liggen. Deze late, Segway-only
* stylesheet verwijdert die afbeelding expliciet uit menu en winkelwagen.
* -------------------------------------------------------------------- */
html body #header .segway-nav button.segway-nav__toggle,
html body #header .segway-nav button.segway-nav__branch-toggle,
html body #header .segway-nav button.segway-nav__nested-toggle {
background: transparent !important;
background-image: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
color: #6b7280 !important;
transition: color .12s ease, background-color .12s ease !important;
}
html body #header .segway-nav button.segway-nav__link--parent-toggle {
background: transparent !important;
background-image: none !important;
border: 0 !important;
border-bottom: 3px solid transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
color: inherit !important;
}
html body #header .segway-nav button.segway-nav__link--parent-toggle:hover,
html body #header .segway-nav button.segway-nav__link--parent-toggle:focus-visible {
background: rgba(0, 0, 0, .02) !important;
background-image: none !important;
color: var(--segway-accent, #e2001a) !important;
}
html body #header .segway-nav button.segway-nav__all-link {
background: #f2f3f5 !important;
background-image: none !important;
border: 1px solid #d9dde1 !important;
border-radius: 6px !important;
box-shadow: none !important;
color: #30343a !important;
}
html body #header .segway-nav button.segway-nav__all-link:hover,
html body #header .segway-nav button.segway-nav__all-link:focus-visible {
background: #fff !important;
background-image: none !important;
border-color: var(--segway-accent, #e2001a) !important;
box-shadow: none !important;
color: var(--segway-accent, #e2001a) !important;
}
html body #header .segway-nav button.segway-nav__toggle:hover,
html body #header .segway-nav button.segway-nav__toggle:focus-visible,
html body #header .segway-nav button.segway-nav__branch-toggle:hover,
html body #header .segway-nav button.segway-nav__branch-toggle:focus-visible,
html body #header .segway-nav button.segway-nav__nested-toggle:hover,
html body #header .segway-nav button.segway-nav__nested-toggle:focus-visible {
background: rgba(0, 0, 0, .035) !important;
background-image: none !important;
color: var(--segway-accent, #e2001a) !important;
}
html body #header #_desktop_cart > .blockcart,
html body #header #_desktop_cart > .blockcart > .header,
html body #header #_desktop_cart > .blockcart > a.header,
html body #header #_mobile_cart > .blockcart,
html body #header #_mobile_cart > .blockcart > .header,
html body #header #_mobile_cart > .blockcart > a.header {
background: transparent !important;
background-image: none !important;
border-color: transparent !important;
box-shadow: none !important;
}
html body#cart .cart-detailed-actions .btn-primary,
html body#cart .checkout .btn-primary,
html body.page-cart .cart-detailed-actions .btn-primary,
html body.page-cart .checkout .btn-primary,
html body #blockcart-modal .cart-content-btn .btn-primary,
html body .ps-shoppingcart .btn-primary {
background: var(--segway-accent, #e2001a) !important;
background-image: none !important;
border-color: var(--segway-accent, #e2001a) !important;
box-shadow: none !important;
color: var(--segway-accent-ink, #fff) !important;
}
html body#cart .cart-detailed-actions .btn-primary:hover,
html body#cart .cart-detailed-actions .btn-primary:focus,
html body#cart .checkout .btn-primary:hover,
html body#cart .checkout .btn-primary:focus,
html body.page-cart .cart-detailed-actions .btn-primary:hover,
html body.page-cart .cart-detailed-actions .btn-primary:focus,
html body.page-cart .checkout .btn-primary:hover,
html body.page-cart .checkout .btn-primary:focus,
html body #blockcart-modal .cart-content-btn .btn-primary:hover,
html body #blockcart-modal .cart-content-btn .btn-primary:focus,
html body .ps-shoppingcart .btn-primary:hover,
html body .ps-shoppingcart .btn-primary:focus {
background: var(--segway-accent-dark, #b30015) !important;
background-image: none !important;
border-color: var(--segway-accent-dark, #b30015) !important;
}
html body #blockcart-modal .cart-content-btn .btn-secondary,
html body#cart .bootstrap-touchspin .btn-touchspin,
html body.page-cart .bootstrap-touchspin .btn-touchspin,
html body #blockcart-modal button.close {
background: #fff !important;
background-image: none !important;
border-color: #d5dade !important;
box-shadow: none !important;
color: #34383d !important;
}
html body #blockcart-modal .cart-content-btn .btn-secondary:hover,
html body #blockcart-modal .cart-content-btn .btn-secondary:focus,
html body#cart .bootstrap-touchspin .btn-touchspin:hover,
html body#cart .bootstrap-touchspin .btn-touchspin:focus,
html body.page-cart .bootstrap-touchspin .btn-touchspin:hover,
html body.page-cart .bootstrap-touchspin .btn-touchspin:focus,
html body #blockcart-modal button.close:hover,
html body #blockcart-modal button.close:focus {
background: #f4f6f8 !important;
background-image: none !important;
border-color: var(--segway-accent, #e2001a) !important;
color: var(--segway-accent, #e2001a) !important;
}
/* Modals en cookiebediening kunnen dezelfde globale goudregel erven. */
html body .modal button.close,
html body .modal button.modal-cancel.btn-secondary,
html body button.qmcc-modal__close,
html body button.qmcc__btn.btn-outline-secondary,
html body.page-product button.qmpt-accordion-header {
background-image: none !important;
border-color: #d5dade !important;
box-shadow: none !important;
}
html body .modal button.close,
html body .modal button.modal-cancel.btn-secondary,
html body button.qmcc-modal__close,
html body button.qmcc__btn.btn-outline-secondary {
background-color: #fff !important;
color: #34383d !important;
}
html body .modal button.close:hover,
html body .modal button.close:focus,
html body .modal button.modal-cancel.btn-secondary:hover,
html body .modal button.modal-cancel.btn-secondary:focus,
html body button.qmcc-modal__close:hover,
html body button.qmcc-modal__close:focus,
html body button.qmcc__btn.btn-outline-secondary:hover,
html body button.qmcc__btn.btn-outline-secondary:focus {
background-color: #f4f6f8 !important;
border-color: var(--segway-accent, #e2001a) !important;
color: var(--segway-accent, #e2001a) !important;
}
/* De wachtwoordtoner is een secundaire bediening, geen gouden CTA. */
html body button[data-action="show-password"] {
background: #f2f4f6 !important;
background-image: none !important;
border: 1px solid #d5dade !important;
border-radius: 0 6px 6px 0 !important;
box-shadow: none !important;
color: #34383d !important;
}
html body button[data-action="show-password"]:hover,
html body button[data-action="show-password"]:focus-visible {
background: #fff !important;
background-image: none !important;
border-color: var(--segway-accent, #e2001a) !important;
color: var(--segway-accent, #e2001a) !important;
outline: 0 !important;
}
/* ----------------------------------------------------------------------
* 13. Subcategorieën: alleen rustige, gelijkmatige knoppen
*
* Het hoofdthema gebruikt body#category en !important voor grote gouden
* afbeeldingskaarten. Daarom noemen deze Segway-regels bewust zowel de body-id
* als de page-class. De categorieomschrijving erboven blijft volledig staan;
* alleen de tweede kaart, zijn kopbalk en de afbeeldingen verdwijnen.
* -------------------------------------------------------------------- */
html body#category.page-category #subcategories.card.card-block {
width: 100% !important;
margin: .8rem 0 1.1rem !important;
padding: 0 !important;
overflow: visible !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
}
html body#category.page-category #subcategories > .subcategory-heading {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
white-space: nowrap !important;
border: 0 !important;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
}
html body#category.page-category #subcategories .subcategories-list {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(min(175px, 100%), 1fr)) !important;
gap: .5rem !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
html body#category.page-category #subcategories .subcategories-list > li {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
list-style: none !important;
}
html body#category.page-category #subcategories .subcategories-list > li::marker {
content: "" !important;
}
html body#category.page-category #subcategories .subcategory-image,
html body#category.page-category #subcategories .subcategory-image a,
html body#category.page-category #subcategories .subcategory-image picture,
html body#category.page-category #subcategories .subcategory-image img {
display: none !important;
}
html body#category.page-category #subcategories .subcategories-list h5 {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
html body#category.page-category #subcategories .subcategory-name {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
max-width: none !important;
min-height: 38px !important;
margin: 0 !important;
padding: .45rem .65rem !important;
border: 1px solid #d9dde1 !important;
border-radius: 8px !important;
background: #f5f6f7 !important;
background-image: none !important;
box-shadow: none !important;
color: #34383d !important;
font-size: .78rem !important;
font-weight: 700 !important;
line-height: 1.2 !important;
letter-spacing: 0 !important;
text-align: center !important;
text-decoration: none !important;
text-transform: none !important;
}
html body#category.page-category #subcategories .subcategory-name:hover,
html body#category.page-category #subcategories .subcategory-name:focus-visible {
border-color: var(--segway-accent, #e2001a) !important;
background: #fff !important;
color: var(--segway-accent, #e2001a) !important;
}
@media (max-width: 575px) {
html body#category.page-category #subcategories.card.card-block {
margin: .65rem 0 .9rem !important;
}
html body#category.page-category #subcategories .subcategories-list {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: .4rem !important;
}
html body#category.page-category #subcategories .subcategories-list > li:last-child:nth-child(odd) {
grid-column: 1 / -1 !important;
}
html body#category.page-category #subcategories .subcategory-name {
min-height: 40px !important;
padding: .4rem .45rem !important;
font-size: .72rem !important;
}
}
/* ----------------------------------------------------------------------
* 14. Actiebalk op iedere pagina over de volledige beschikbare headerkolom
* -------------------------------------------------------------------- */
html body #header .header-top .header-top-right > .segway-promo {
grid-column: 1 / -1 !important;
justify-self: stretch !important;
width: 100% !important;
max-width: none !important;
}
html body #header .header-top .header-top-right > .segway-promo > .segway-promo__inner {
width: 100% !important;
max-width: none !important;
}
/* ----------------------------------------------------------------------
* 15. Categoriepagina's zonder lege, gereserveerde zijbalk
*
* Er staat op Segway geen linkerkolom, maar custom.css reserveert op grote
* schermen toch 21,5%. Het hoofdvlak wordt hier weer volledig en vervolgens
* symmetrisch gecentreerd op dezelfde 1110px als gewone contentpagina's.
* -------------------------------------------------------------------- */
html body#category.page-category #content-wrapper {
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
}
/* ----------------------------------------------------------------------
* 16. Dezelfde volledige Segway-header op iedere pagina
*
* De hoofdshop-stylesheet blijft op sommige product- en contentpagina's
* bewust beschikbaar voor de productspecifieke modules. Daarin staat echter
* ook een vaste desktop-headerhoogte van 88px. De Segway-minikaarten en
* actiebalk worden dan in een tweede rij geplaatst en door die vaste hoogte
* afgeknipt. Onderstaande regels nemen alleen de headerindeling terug over;
* product-, winkelmand- en Parts Hub-opmaak blijven ongemoeid.
* -------------------------------------------------------------------- */
@media (min-width: 768px) {
/* Account en winkelwagen zijn door storefront.js naar de Segway-navigatie verplaatst.
De nu lege Classic-balk mag daarom geen extra witregel reserveren. */
html body #header .header-nav,
html body #header .header-nav > .container,
html body #header .header-nav > .container > .row {
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin-block: 0 !important;
padding-block: 0 !important;
border: 0 !important;
}
html body #header .header-nav {
overflow: visible !important;
}
html body #header .header-top {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
padding: 1.25rem 0 .8rem !important;
overflow: visible !important;
}
html body #header .header-top > .container {
display: block !important;
position: relative !important;
width: 100% !important;
max-width: 1180px !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 auto !important;
padding: 0 15px !important;
}
html body #header .header-top > .container > .row:not(#mobile_top_menu_wrapper) {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
align-items: center !important;
gap: 0 !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
}
html body #header .header-top #_desktop_logo {
position: static !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
width: 180px !important;
max-width: 180px !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
}
html body #header .header-top #_desktop_logo img,
html body #header .header-top #_desktop_logo .logo {
display: block !important;
width: auto !important;
max-width: 160px !important;
height: auto !important;
max-height: 48px !important;
}
html body #header .header-top .header-top-right {
position: static !important;
display: grid !important;
grid-column: 1 / -1 !important;
justify-self: stretch !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: auto auto !important;
gap: .5rem !important;
min-width: 0 !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;
float: none !important;
}
html body #header .header-top .segway-minis,
html body #header .header-top .segway-promo {
grid-column: 1 !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
html body #header .header-top > .container > .row:not(#mobile_top_menu_wrapper) {
grid-template-columns: minmax(0, 1fr) !important;
gap: 0 !important;
}
}
@media (max-width: 767px) {
html body #header .header-top {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
padding: .6rem 0 .75rem !important;
overflow: visible !important;
}
html body #header .header-top > .container,
html body #header .header-top > .container > .row:not(#mobile_top_menu_wrapper),
html body #header .header-top .header-top-right {
position: static !important;
display: block !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;
transform: none !important;
}
html body #header .header-top .header-top-right {
grid-column: auto !important;
}
html body #header .header-top > .container {
padding-inline: .75rem !important;
}
html body #header .header-top .segway-minis {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: .4rem !important;
width: 100% !important;
margin: 0 0 .5rem !important;
}
html body #header .header-top .segway-mini {
min-width: 0 !important;
min-height: 54px !important;
padding: .4rem .45rem !important;
}
html body #header .header-top .segway-mini__media,
html body #header .header-top .segway-mini__icon {
width: 34px !important;
height: 34px !important;
}
html body #header .header-top .segway-mini__title {
font-size: .76rem !important;
}
html body #header .header-top .segway-mini__text {
font-size: .68rem !important;
}
html body #header .header-top .segway-promo,
html body #header .header-top .segway-promo__inner {
width: 100% !important;
max-width: none !important;
}
html body #header .header-top .segway-promo__inner {
min-height: 48px !important;
padding: .5rem .65rem !important;
font-size: .78rem !important;
}
}
/* ----------------------------------------------------------------------
* 17. Compacte, identieke desktopheader op alle paginatypen
*
* Vier accessoirekaartjes blijven vanaf tabletbreedte op één rij. Zo kan de
* rode actiebalk direct aansluiten en krijgt een categorie- of productpagina
* exact dezelfde rustige kophoogte als de indexpagina.
* -------------------------------------------------------------------- */
@media (min-width: 768px) {
html body #header .header-top {
padding: .65rem 0 .55rem !important;
}
html body #header .header-top .header-top-right {
gap: .35rem !important;
}
html body #header .header-top .segway-minis {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: .3rem !important;
padding-block: 0 !important;
}
html body #header .header-top .segway-mini {
min-width: 0 !important;
min-height: 48px !important;
gap: .35rem !important;
padding: .3rem .4rem !important;
border-radius: 8px !important;
}
html body #header .header-top .segway-mini__media,
html body #header .header-top .segway-mini__icon {
width: 30px !important;
height: 30px !important;
border-radius: 6px !important;
}
html body #header .header-top .segway-mini__title {
overflow: hidden !important;
font-size: .72rem !important;
line-height: 1.1 !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
html body #header .header-top .segway-mini__text {
overflow: hidden !important;
font-size: .64rem !important;
line-height: 1.1 !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
html body #header .header-top .segway-promo__inner {
min-height: 42px !important;
padding: .35rem .65rem !important;
font-size: .8rem !important;
}
html body #header .header-top .segway-promo__button {
min-height: 32px !important;
padding: .25rem .75rem !important;
}
}
html body#category.page-category #main {
width: 100% !important;
max-width: 1110px !important;
margin-right: auto !important;
margin-left: auto !important;
}
/* ----------------------------------------------------------------------
* 17. Zoekresultaten: rustige Segway-zoekbalk zonder goud of overlap
*
* De zoekwidget in de content is een tweede instantie naast de headerzoeker.
* Regels van het gedeelde thema positioneren de knop absoluut en geven hem
* een gouden achtergrond. Alleen de contentvariant wordt hier teruggebracht
* naar een compacte tweekolomsbalk; de headerpil hierboven blijft intact.
* -------------------------------------------------------------------- */
html body#search #content .search-widget form,
html body.page-search #content .search-widget form,
html body#search #content .search-widgets form,
html body.page-search #content .search-widgets form,
html body#search #content #search_widget form,
html body.page-search #content #search_widget form {
position: static !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) 44px !important;
align-items: stretch !important;
width: min(100%, 560px) !important;
min-height: 44px !important;
margin: .85rem 0 0 !important;
padding: 0 !important;
overflow: hidden !important;
border: 1px solid #d5dade !important;
border-radius: 9px !important;
background: #fff !important;
background-image: none !important;
box-shadow: none !important;
}
html body#search #content .search-widget form input[name="s"],
html body.page-search #content .search-widget form input[name="s"],
html body#search #content .search-widgets form input[name="s"],
html body.page-search #content .search-widgets form input[name="s"],
html body#search #content #search_widget form input[name="s"],
html body.page-search #content #search_widget form input[name="s"] {
position: static !important;
grid-column: 1 !important;
grid-row: 1 !important;
width: 100% !important;
min-width: 0 !important;
height: 44px !important;
margin: 0 !important;
padding: 0 .9rem !important;
border: 0 !important;
border-radius: 0 !important;
background: #fff !important;
background-image: none !important;
box-shadow: none !important;
color: #202327 !important;
}
html body#search #content .search-widget form button[type="submit"],
html body.page-search #content .search-widget form button[type="submit"],
html body#search #content #search_widget form button[type="submit"],
html body.page-search #content #search_widget form button[type="submit"] {
position: static !important;
grid-column: 2 !important;
grid-row: 1 !important;
display: grid !important;
place-items: center !important;
width: 44px !important;
min-width: 44px !important;
height: 44px !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
border: 0 !important;
border-inline-start: 1px solid #d5dade !important;
border-radius: 0 !important;
background: #f2f4f6 !important;
background-image: none !important;
box-shadow: none !important;
color: #34383d !important;
}
html body#search #content .search-widget form button[type="submit"]:hover,
html body#search #content .search-widget form button[type="submit"]:focus-visible,
html body.page-search #content .search-widget form button[type="submit"]:hover,
html body.page-search #content .search-widget form button[type="submit"]:focus-visible,
html body#search #content #search_widget form button[type="submit"]:hover,
html body#search #content #search_widget form button[type="submit"]:focus-visible,
html body.page-search #content #search_widget form button[type="submit"]:hover,
html body.page-search #content #search_widget form button[type="submit"]:focus-visible {
background: #fff !important;
background-image: none !important;
color: var(--segway-accent, #e2001a) !important;
outline: 2px solid var(--segway-accent, #e2001a) !important;
outline-offset: -2px !important;
}
/* PrestaShop 9 gebruikt op de lege zoekresultatenpagina `.search-widgets`
(meervoud) en een aanklikbaar materiaalicoon in plaats van een button. */
html body#search #content .search-widgets form .material-icons.search,
html body.page-search #content .search-widgets form .material-icons.search {
position: static !important;
grid-column: 2 !important;
grid-row: 1 !important;
display: grid !important;
place-items: center !important;
width: 44px !important;
min-width: 44px !important;
height: 44px !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
border: 0 !important;
border-inline-start: 1px solid #d5dade !important;
border-radius: 0 !important;
background: #f2f4f6 !important;
background-image: none !important;
box-shadow: none !important;
color: #34383d !important;
}
html body#search #content .search-widgets form input[name="s"],
html body.page-search #content .search-widgets form input[name="s"] {
grid-column: 1 !important;
}
html body#search #content .search-widgets form .material-icons.clear,
html body.page-search #content .search-widgets form .material-icons.clear {
display: none !important;
}
html body#search #content .search-widgets form .material-icons.search:hover,
html body#search #content .search-widgets form .material-icons.search:focus-visible,
html body.page-search #content .search-widgets form .material-icons.search:hover,
html body.page-search #content .search-widgets form .material-icons.search:focus-visible {
background: #fff !important;
background-image: none !important;
color: var(--segway-accent, #e2001a) !important;
outline: 2px solid var(--segway-accent, #e2001a) !important;
outline-offset: -2px !important;
}
/* ----------------------------------------------------------------------
* 18. Productvarianten: rustige, duidelijke keuzevelden
* -------------------------------------------------------------------- */
html body#product .product-variants,
html body.page-product .product-variants {
display: grid !important;
gap: .75rem !important;
margin: 1rem 0 !important;
}
html body#product .product-variants .product-variants-item,
html body.page-product .product-variants .product-variants-item {
margin: 0 !important;
padding: .85rem .95rem !important;
border: 1px solid #e0e4e7 !important;
border-inline-start: 3px solid var(--segway-accent, #e2001a) !important;
border-radius: 9px !important;
background: #fff !important;
box-shadow: 0 2px 8px rgba(24, 29, 34, .045) !important;
}
html body#product .product-variants .product-variants-item > .control-label,
html body.page-product .product-variants .product-variants-item > .control-label {
display: block !important;
margin: 0 0 .45rem !important;
color: #25292c !important;
font-size: .82rem !important;
font-weight: 800 !important;
letter-spacing: .02em !important;
}
html body#product .product-variants select.form-control-select,
html body.page-product .product-variants select.form-control-select {
width: 100% !important;
min-height: 46px !important;
margin: 0 !important;
padding: .65rem 2.5rem .65rem .8rem !important;
border: 1px solid #bdc4ca !important;
border-radius: 7px !important;
background-color: #fff !important;
color: #202428 !important;
font-size: .9rem !important;
font-weight: 600 !important;
line-height: 1.25 !important;
box-shadow: none !important;
cursor: pointer !important;
}
html body#product .product-variants select.form-control-select:hover,
html body.page-product .product-variants select.form-control-select:hover {
border-color: #868e95 !important;
}
html body#product .product-variants select.form-control-select:focus,
html body.page-product .product-variants select.form-control-select:focus {
border-color: var(--segway-accent, #e2001a) !important;
outline: 2px solid rgba(226, 0, 26, .14) !important;
outline-offset: 1px !important;
}
/* ----------------------------------------------------------------------
* 19. Geïmporteerde kleuren altijd zichtbaar
*
* De CSV-combinaties bevatten geldige kleurnamen, maar niet altijd een
* hexadecimale swatchkleur. Het gedeelde thema verbergt de tekst in dat geval
* als `sr-only` en laat vervolgens een span zonder breedte over. De radios en
* combinaties bestaan dus wel, maar de klant ziet hooguit een smalle rode
* lijn. Deze tekstpillen zijn een veilige terugval: bestaande echte swatches
* blijven herkenbaar en elke geïmporteerde kleur blijft lees- en bedienbaar.
* -------------------------------------------------------------------- */
html body#product .product-variants .product-variants-item ul,
html body.page-product .product-variants .product-variants-item ul {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: .55rem !important;
margin: .35rem 0 .15rem !important;
padding: 0 !important;
}
html body#product .product-variants .product-variants-item li,
html body.page-product .product-variants .product-variants-item li {
display: inline-flex !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
}
html body#product .product-variants .product-variants-item li > label,
html body.page-product .product-variants .product-variants-item li > label {
display: inline-flex !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
cursor: pointer !important;
}
html body#product .product-variants .input-color + span,
html body.page-product .product-variants .input-color + span {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
gap: .45rem !important;
width: auto !important;
min-width: 86px !important;
height: auto !important;
min-height: 40px !important;
margin: 0 !important;
padding: .48rem .72rem !important;
overflow: visible !important;
border: 1px solid #cfd4d9 !important;
border-radius: 8px !important;
background: #fff !important;
background-image: none !important;
box-shadow: none !important;
color: #24272b !important;
cursor: pointer !important;
line-height: 1.2 !important;
transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease !important;
}
html body#product .product-variants .input-color + span::before,
html body.page-product .product-variants .input-color + span::before {
content: "" !important;
display: inline-block !important;
flex: 0 0 18px !important;
width: 18px !important;
height: 18px !important;
border: 1px solid rgba(0, 0, 0, .22) !important;
border-radius: 50% !important;
background: #eef0f2 !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35) !important;
}
html body#product .product-variants label[aria-label="Matzwart" i] > .input-color + span::before,
html body.page-product .product-variants label[aria-label="Matzwart" i] > .input-color + span::before {
background: #25272a !important;
}
html body#product .product-variants label[aria-label="Zwart" i] > .input-color + span::before,
html body.page-product .product-variants label[aria-label="Zwart" i] > .input-color + span::before {
background: #050505 !important;
}
html body#product .product-variants label[aria-label="Matgroen" i] > .input-color + span::before,
html body.page-product .product-variants label[aria-label="Matgroen" i] > .input-color + span::before {
background: #536a5e !important;
}
html body#product .product-variants label[aria-label="Matgrijs" i] > .input-color + span::before,
html body.page-product .product-variants label[aria-label="Matgrijs" i] > .input-color + span::before {
background: #73777a !important;
}
html body#product .product-variants label[aria-label="Kameleon" i] > .input-color + span::before,
html body.page-product .product-variants label[aria-label="Kameleon" i] > .input-color + span::before {
background: linear-gradient(135deg, #314f8b 0%, #6352a5 30%, #32887a 62%, #ad6b39 100%) !important;
}
html body#product .product-variants .input-color + span .attribute-name.sr-only,
html body.page-product .product-variants .input-color + span .attribute-name.sr-only {
position: static !important;
display: inline !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
clip: auto !important;
clip-path: none !important;
border: 0 !important;
white-space: nowrap !important;
color: inherit !important;
font-size: .88rem !important;
font-weight: 700 !important;
line-height: 1.2 !important;
}
html body#product .product-variants .input-color:hover + span,
html body.page-product .product-variants .input-color:hover + span {
border-color: #8f969d !important;
background: #fafbfc !important;
}
html body#product .product-variants .input-color:focus-visible + span,
html body.page-product .product-variants .input-color:focus-visible + span {
outline: 2px solid var(--segway-accent, #e2001a) !important;
outline-offset: 2px !important;
}
html body#product .product-variants .input-color:checked + span,
html body.page-product .product-variants .input-color:checked + span {
border-color: var(--segway-accent, #e2001a) !important;
background: #fff7f8 !important;
box-shadow: 0 0 0 2px rgba(226, 0, 26, .12) !important;
}
/*
* Checkout header
*
* PrestaShop renders a compact, structurally different header on the order
* controller. Keep the Segway promotional blocks out of that compact template
* and restore a normal logo row. The selectors are restricted to #checkout,
* so other shops and storefront pages retain their existing header layout.
*/
html body#checkout.page-order #header .header-top {
display: none !important;
}
@media (min-width: 768px) {
html body#checkout.page-order #header .header-nav,
html body#checkout.page-order #header .header-nav > .container,
html body#checkout.page-order #header .header-nav > .container > .row {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin-block: 0 !important;
padding-block: 0 !important;
overflow: visible !important;
}
html body#checkout.page-order #header .header-nav > .container > .row {
display: flex !important;
align-items: center !important;
min-height: 72px !important;
margin-inline: 0 !important;
}
html body#checkout.page-order #header .header-nav #_desktop_logo {
display: flex !important;
flex: 1 1 100% !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0.75rem 0 !important;
}
html body#checkout.page-order #header .header-nav #_desktop_logo img,
html body#checkout.page-order #header .header-nav #_desktop_logo .logo {
display: block !important;
width: auto !important;
max-width: 180px !important;
height: auto !important;
max-height: 48px !important;
}
html body#checkout.page-order #header .header-nav > .container > .row > .col-md-6:not(#_desktop_logo) {
display: none !important;
}
}
.segway-preview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.segway-preview-card{background:#fff;border:1px solid #e2e4e8;border-top:3px solid var(--segway-accent);border-radius:12px;padding:30px}.segway-preview-number{font-size:12px;letter-spacing:.1em;color:#68717c}.segway-preview-card h3{font-size:25px;margin:20px 0 16px}.segway-preview-card p{line-height:1.7;color:#56606b}.segway-preview-card a{font-weight:700;color:var(--segway-accent)}@media(max-width:767px){.segway-preview-grid{grid-template-columns:1fr}}
.segway-brand{display:flex;align-items:center;justify-content:flex-start;min-height:0;padding:.35rem 0 .55rem;color:#111!important;text-decoration:none!important}.segway-brand__logo{display:block;width:min(100%,310px);height:auto;max-height:56px;object-fit:contain;object-position:left center}@media(max-width:767px){.segway-brand{padding:.15rem 0 .5rem}.segway-brand__logo{width:min(100%,230px);max-height:42px}}
/* Vaste assortimentfilters boven alle categorieoverzichten. */
html body#category.page-category .segway-category-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(175px,100%),1fr));gap:.5rem;width:100%;margin:.8rem 0 1.1rem}
html body#category.page-category .segway-category-filters__link{display:flex;align-items:center;justify-content:center;min-height:38px;padding:.45rem .65rem;border:1px solid #d9dde1;border-radius:8px;background:#f5f6f7;color:#34383d;font-size:.78rem;font-weight:700;line-height:1.2;text-align:center;text-decoration:none}
html body#category.page-category .segway-category-filters__link:hover,html body#category.page-category .segway-category-filters__link:focus-visible{border-color:var(--segway-accent,#e2001a);background:#fff;color:var(--segway-accent,#e2001a);text-decoration:none}
html body#category.page-category .segway-category-filters__link--active{border-color:var(--segway-accent,#e2001a);background:var(--segway-accent,#e2001a);color:#fff}
html body#category.page-category #subcategories[hidden]{display:none!important}
@media(max-width:575px){html body#category.page-category .segway-category-filters{grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem;margin:.65rem 0 .9rem}html body#category.page-category .segway-category-filters__link{min-height:40px;padding:.4rem .45rem;font-size:.72rem}html body#category.page-category .segway-category-filters__link:last-child:nth-child(odd){grid-column:1/-1}}