/**
* 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;
}
#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;
}
#header .logo {
max-height: 64px;
width: auto;
}
/* ----------------------------------------------------------------------
* 3. Typografie en knoppen
* -------------------------------------------------------------------- */
body {
color: #1a1a1a;
background: #fff;
}
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;
}