/**
* IVA Dealer - skin voor het Classic-thema.
*
* Deze regels horen eigenlijk thuis in het kindthema
* (themes/iva-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 IVA-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 --iva-accent in de
* op de kleur uit de module-instellingen. IVA-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(--iva-accent, #e2001a) !important;
}
.header-nav {
border-bottom: 0 !important;
padding-block: .25rem;
}
/* Een merk betekent: geen taal- en valutakiezer en geen bovenbalk vol links. */
.header-nav .right-nav,
.header-nav #_desktop_contact_link,
.header-nav #_desktop_language_selector,
.header-nav #_desktop_currency_selector {
display: none !important;
}
#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. */
#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(--iva-accent, #e2001a) !important;
outline: none;
}
/* ----------------------------------------------------------------------
* 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 .iva-topbar {
background: #0f0f0f !important;
color: rgba(255, 255, 255, .82) !important;
font-size: .8rem;
}
.iva-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;
}
.iva-topbar__items {
display: flex;
flex-wrap: wrap;
gap: .25rem 1.25rem;
margin: 0;
padding: 0;
list-style: none;
}
.iva-topbar__right {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .25rem 1rem;
}
#header .iva-topbar__phone,
#header .iva-topbar__wa {
color: #fff !important;
font-weight: 700;
text-decoration: none;
}
#header .iva-topbar__wa {
padding: .1rem .5rem;
border-radius: 999px;
background: #25d366;
color: #06331a !important;
}
#header .iva-topbar__phone:hover,
#header .iva-topbar__phone:focus {
color: var(--iva-accent, #e2001a) !important;
}
/* De acties naast het logo krijgen de rest van de rij. Classic zet het
zoekveld in een kolom van tien; die deelt hier de ruimte. */
#header .header-top .row {
align-items: center;
}
#header .iva-actions {
flex: 1 1 auto;
color: #1a1a1a;
}
@media (max-width: 991px) {
#header .iva-actions {
justify-content: center;
width: 100%;
}
}
#header .iva-actions__wa,
#header .iva-actions__wa:hover {
color: #06331a !important;
}
/* 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) {
.iva-topbar__items {
display: none;
}
.iva-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,
.iva-nav__link,
.iva-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(--iva-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(--iva-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 IVA-dealerpagina. Dit is een noodverband met CSS: de
* nette oplossing is de module loskoppelen onder Design > Positions met de
* shopcontext op IVA 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(--iva-accent, #e2001a) !important;
outline-offset: 2px;
}