/* Backup generated: 2026-01-05 10:39:36 */

/* ============================================== */
/* 1. DEFINITIE VAN KLEUR & STIJL VARIABELEN (ROOT) */
/* ============================================== */
:root {
    /* Hoofdkleur en varianten */
    --hoofdkleur-blauw: #066dab;
    --hoofdkleur-blauw-donker: #044e7c; /* Voor hover/actieve staten */

    /* Achtergrond/Neutrale Kleuren */
    --kader-achtergrond: #f8f8f8; /* NIEUWE VARIABELE */
    
    /* Typografie (Blijft 'Roboto' en wordt geladen via header.tpl) */
    --hoofd-font: Roboto, Arial, sans-serif;
    
    /* Standaard UI Componenten */
    --radius-groot: 14px;
    --schaduw-licht: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* ============================================== */
/* 2. GLOBALE BODY & TYPOGRAFIE INSTELLINGEN (SEO/UX) */
/* ============================================== */
body {
    /* Typografie en Rendering (Houdt je leesbaarheid op topniveau) */
    font-family: var(--hoofd-font);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; 
    
    /* Moderne tekst-inpakking (Goed voor koppen) */
    text-wrap: balance;
    
    /* Prestatieverbeteringen (Voorkomt onnodige horizontale scroll) */
    overflow-x: hidden; 
    
    /* Optioneel: Vloeiend scrollen bij ankerlinks */
    scroll-behavior: smooth; 

}

/* ==========================================================================
   Responsive viewport handling – 2025 safe for PrestaShop 1.6
   ========================================================================== */

@media (max-width: 767px) {
  html,
  body {
    min-height: 100vh;   /* fallback */
    min-height: 100dvh;  /* moderne browsers */
    height: auto;        /* KRITISCH: laat content scrollen */
  }
}



/* ============================================== */
/* 3. CONSISTENTIE & TOEGANKELIJKHEID */
/* ============================================== */

/* Standaard transities voor alle interactieve elementen */
a, button, input[type="submit"], [role="button"], .button {
    transition: all 0.2s ease-in-out; 
}

/* Essentieel voor toegankelijkheid (WCAG): Duidelijke focus-ring */
:focus {
    outline: 2px solid var(--hoofdkleur-blauw);
    outline-offset: 2px;
}

/* Consistentie in border-radius (GEOPTIMALISEERD) */

img,
.img-responsive,
p.payment_module a,
#languages-block-top ul,
.table-bordered,
.footer-container #footer h3,
#header .cart_block .cart-buttons,
.bx-wrapper,
.sf-menu ul li:hover, 
.sf-menu ul li.sfHover, 
.sf-menu ul li a:focus, 
.sf-menu ul li a:hover, 
.sf-menu ul li a:active,
.sf-menu, .sf-menu *,
 ul.product_list.grid > li.hovered .product-container .product-image-container .content_price, ul.product_list.grid > li.hovered .product-container .product-image-container .quick-view, ul.product_list.grid > li.hovered .product-container .functional-buttons, ul.product_list.grid > li.hovered .product-container .button-container, ul.product_list.grid > li.hovered .product-container .comments_note,
.btn-default,
#address .form-group .form-control, #identity .form-group .form-control, #account-creation_form .form-group .form-control, #new_account_form .form-group .form-control, #opc_account_form .form-group .form-control, #authentication .form-group .form-control,
#my-account ul.myaccount-link-list li a,
.button.button-small, .button.button-small span:hover, .button.exclusive-medium span:hover,
.button.exclusive-medium,
.box-info-product .exclusive,
#crossselling_list .bx-wrapper img, .accessories-block .block_content .bx-wrapper img, #productscategory_list .bx-wrapper .img-responsive img, #viewed-products_block_left .bx-wrapper img,
#header .cart_block,
.footer-container #footer .bottom-footer,
.label,
.button.button-medium.exclusive,
.button.button-medium,
.attribute_label,
.pb-left-column #image-block #view_full_size .span_link,
#topbanner


 

 
{
    border-radius: var(--radius-groot) !important;

}


/* ============================================== */
/* 4. KLEUR TOEPASSINGEN (Hoofdkleur) */
/* ============================================== */

/* Groepering van elementen met de hoofdkleur (blauw) */
a, 
.sf-menu a, /* Toegevoegd */
.sf-menu a:visited, /* Toegevoegd */
.pb-left-column #image-block #view_full_size .span_link,
.products-category,
h1, .h1, 
h2, .h2, 
h3, .h3,
h4, .h4,
.page-heading,
.page-product-heading,
#usefull_link_block li a,
.button.lnk_view,
.button.exclusive-medium,
.cat-info,
.breadcrumb a,
.breadcrumb,
.sticky-cart-details,
ul.product_list.grid > li .product-container .primary-cat,
header .row #header_logo,
#product_manufacturer a, 
#product_category a,
#cms #center_column h1 {
    color: var(--hoofdkleur-blauw) ;
}

/* DEFINITIE VAN HOVER STATEN met donkere variabele */
a:hover,
.sf-menu a:hover, /* Toegevoegd */
.button.lnk_view:hover,
.breadcrumb a:hover,
ul.product_list.grid > li .product-container .primary-cat a:hover,
#product_manufacturer a:hover, 
#product_category a:hover {
    color: var(--hoofdkleur-blauw-donker); 
}

/* ============================================== */
/* 5. CATEGORIE SPECIFIEKE STIJL (Met variabelen) */
/* ============================================== */
h3.subcategory {
    border: 1px solid #dadce0;
    padding: 10px;
    margin-bottom: 15px;
    position: relative;
    border-radius: var(--radius-groot); /* Gebruik variabele */
    background-color: #fff;
    transition: all 0.3s ease-in-out;
    box-shadow: var(--schaduw-licht); /* Gebruik variabele */
}

/* ============================================== */
/* 6. KADER ACHTERGROND & BORDER (NIEUW) */
/* ============================================== */
p.payment_module a,
.sf-menu,
.breadcrumb,
.optimize-box-footer,

#sticky-cart {
    background-color: var(--kader-achtergrond);
    border: 1px solid #c0c4cc; 
color: #152027;

}

/* ============================================== */
/*7. Flex display  */
/* ============================================== */
#index .tab-content,
header .nav
{
     display: inline-flex;
    flex-direction: column;
}

/* ============================================== */
/*8. geoptimaliseerde box met witte achtergrond */
/* ============================================== */
.optimize-box, 
.optimize-box-c,
.optimize-box-p,
.breadcrumb,
.sf-menu,
#order-detail-content,
.box,
#sticky-cart.visible,
#search_block_top #search_query_top




   {
margin: 20px 0;
    padding: 14px;
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s 
ease, box-shadow 0.3s 
ease;

}

/* ============================================== */
/*9. geoptimaliseerde box zonder witte achtergrond */
/* ============================================== */
optimize-box-footer,
 .shopping_cart > a:first-child,
#search_block_top .btn.button-search
 
{

    border: 1px solid #e1e1e1;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s 
ease, box-shadow 0.3s 
ease;
}


  p, li, .rte{
    font-size: 15px;
    line-height: 1.6;
    */ color: #333; */
}

.page-heading {
font-size: 26px; /* Iets groter voor meer impact */
    
    font-weight: 700;
    text-transform: capitalize; /* Elke eerste letter hoofdletter (optioneel) */
    letter-spacing: 0.5px; /* Zorgt voor een nettere uitstraling */
    line-height: 1.3; /* Betere leesbaarheid */
    
    /* Schaduw voor scherpere uitstraling */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);

    /* Eventuele onderstreping mooier maken */
    text-transform: capitalize; /* Elke eerste letter hoofdletter (optioneel) */
    letter-spacing: 0.5px; /* Zorgt voor een nettere uitstraling */
    line-height: 1.3; /* Betere leesbaarheid */
    
    /* Schaduw voor scherpere uitstraling */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);

    padding-bottom: 5px;}


.category-thumbs-wrapper li.product-box, .accessories-thumbs-wrapper li.product-box  {
    flex: 0 0 auto;
    width: 160px;
    border: 1px solid #dadce0;
    padding: 10px;
    margin-bottom: 15px;
    position: relative;
    border-radius: var(--radius-groot);
    background-color: #fff;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}





/* ===============================
   Button get no border
   =============================== */
.button.button-medium span,
.box-info-product .exclusive:before,
.button.exclusive-medium{
border: 0px solid;
}

#page,
.header-container,
#header {
  overflow: visible;
}

/* Zorg dat de cart in de nav balk rechts zweeft */
#header_nav #shopping_cart {
    float: right;
    list-style: none;
}

#header_nav #shopping_cart a {
    padding: 8px 10px;
    display: block;
    color: #333; /* Pas aan naar de kleur van je nav tekst */
    font-weight: bold;
}

/* Verberg de dropdown op mobiel als die te groot is, of pas hem aan */
#header .cart_block {
    top: 35px;
    right: 0;
    width: 300px;
    z-index: 999;
}