/* =====================================================================
 * porto-5-header-footer-navigatie.css  (5 van 6)
 *
 * Onderdeel van de laatste CSS-laag, opgesplitst uit porto-custom.css.
 * De bestanden worden in nummervolgorde ingeladen door
 * Magento_Theme::html/porto-custom-css.phtml.
 *
 * LET OP: de nummers zijn de laadvolgorde, niet zomaar een indeling.
 * Een echte thematische hergroepering is uitgeprobeerd en verworpen: op
 * zes plekken zouden regels dan van winnaar wisselen (o.a. SEARCH vs
 * HEADERS en Cust service vs Aanpassingen top header). Verplaats dus
 * niets tussen deze bestanden zonder de cascade opnieuw na te rekenen.
 *
 * Inhoud:
 *   HEADERS, NAVI, FOOTER, Read More, Cust service, NAVIGATIE, FIX 20-06-25,
 *   FIX Search, Aanpassingen top header.
 * ===================================================================== */

/* HEADERS */

@media (max-width: 767px) {
.page-header.type23 .main-panel-top {
display:none;
}
}
.section-items.nav-sections-items.mage-tabs-disabled {
    background: #fff;
}

@media (min-width: 769px) {
.section-items.nav-sections-items.mage-tabs-disabled {
    background: #0099d8 !important;
}
}


#usp-slider i {
    color: #03a84e;
}

@media (min-width: 769px) {
.page-header .amsearch-input-wrapper {
    min-width: 283px;
    max-width: 600px;
}
.amsearch-input-wrapper .amsearch-input {
    border: 1px solid #ccc;
    padding: 5px 10px;
    background: #f5f7fa;
    border-radius: 20px !important;
    transition: .3s;
    width: 100%;
}
.page-header .amsearch-wrapper-block {
    float: left;
width:100%
}

.amsearch-form-block {
    display:block !important;
}
}

.pdp-usp h2 {
margin-bottom:15px;
}

/* NAVI */

@media (min-width: 992px) {
.page-header .navigation li.level0, .page-header.type23 .navigation .level0 > .level-top {
    color: #FFFFFF !important;
padding-right:10px;
}
}

.navpro-dropdown-inner {
  color: #23374a;
}

@media (min-width: 992px) {
.page-header.type23 .navigation .level0:hover > .navpro-departments{
    background: #468ca9 !important;
}
} /* end @media (min-width: 992px) */

/* FOOTER */

/* Read More */

[data-readmore]:before {
    content: '';
    width: 100%;
    height: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    background: linear-gradient(rgba(0, 0, 0, 0), #fff);
}

/* Cust service */

.pagebuilder-column.cs-nav-block {
    border: 2px solid #fafafa;
    flex-direction: column;

    border-radius: 5px;
}

.pagebuilder-column.cs-nav-block:hover {
    border: 2px solid #88cce2;
    background-color: #f4fdff;
}

figure.cs-image img {
	max-height:3rem;
}

.contact-blok {
    background: #f5f7fa;
}

h2 {
        font-weight: 600;
        line-height: 1.1;
        font-size: 1.6rem;
        margin-bottom: 10px;
    }
    
h3 {
    font-weight: 600;
    line-height: 1.1;
    font-size: 1.2rem;
    }

.cs-col h2 {
        font-weight: 900;
}

.cust-service-1 {
    text-align: center;
    padding: 1.3rem 0;
}

img.cs-image{
    max-height: 3rem;
}

.cust-phoneblock {
    background: #1c69a1;
    color: white;
    font-size: 1.3rem;
    font-weight: bold;
    border-radius: 6px;
    min-height: 75px;
}


.cust-phoneblock a {
    color: white;
}

.cust-phoneblock h3 {
    font-family: 'Shadows Into Light', cursive;
    font-size: 1.8rem;
    font-weight: 800;
}

/* NAVIGATIE */

@media (min-width: 768px) {
    .page-header.type23 .sw-megamenu.navigation > ul {
        display: flex;
        height: 100%;
        overflow: unset;
        margin-bottom: 0px;
        background: none;
    }
}

/* De menubalk kreeg zijn blauwe vlak van design_<store>.css
   (.page-header .navigation:not(.side-megamenu) > ul). Dat bestand wordt door
   Porto opnieuw gegenereerd bij een cache-flush; sinds de laatste generatie
   wint de regel hierboven (`background: none`, meer specifiek) en viel het
   vlak weg -- witte menutekst op een witte header. Daarom hier expliciet
   vastgelegd in plaats van afhankelijk van gegenereerde CSS. */
@media (min-width: 992px) {
    /* Het vlak hoort over de volle schermbreedte te lopen, dus op
       .nav-sections en niet op de lijst zelf -- die is zo breed als de
       inhoud. De ruimte boven de lijst hoort niet bij de balk. */
    .page-header.type23 .nav-sections {
        padding-top: 0;
        background: #0099d8;
    }
}


@media (min-width: 768px) {
    .page-header.type23 .sw-megamenu.navigation li.level0 {
    
    display:block;
    }
}

@media (min-width: 1280px) {
    .page-header.type23 .sw-megamenu.navigation li.level0 {
        flex: auto;
        max-width: unset;
    }
}

@media (min-width: 1200px) {
    .page-header.type23 .sw-megamenu.navigation li.level0 {
        flex: auto;
        max-width: 11.1111%;
    }
}
@media (min-width: 992px) {
    .page-header.type23 .sw-megamenu.navigation li.level0 {
        flex: auto;
        max-width: 12.5%;
    }
}
@media (min-width: 768px) {
    .page-header.type23 .sw-megamenu.navigation li.level0 {
        margin: 0;
        flex: auto;
        max-width: 17%;
    }
}

@media (min-width: 992px) {
  .sw-megamenu.navigation li.level0 .submenu {
    z-index: 2;
  }
}

.page-header .header.panel {
width:100%;
}


@media (min-width: 992px) {
  .sw-megamenu.navigation li.level0.fullwidth .submenu li.level1 > a, .sw-megamenu.navigation li.level0.staticwidth .submenu li.level1 > a {
    font-size: 13px;
    font-weight: 600;
    text-transform: capitalize;
    line-height: 18px;
    color: #0e1140;
  }
}

.amsearch-products-section .product-item-details {
text-align: left !important;
}

/* FIX 20-06-25 */

@media (min-width: 992px) {
    .catalog-category-view .columns .sidebar-main {
        max-width: 300px !important;
    }
}

/* FIX Search */

@media (min-width: 992px) {
    .page-header.type23 .search-area .minisearch .actions button {
    	height: 40px;
    	border-radius: 8px !important;
    }
    .page-header.type23 .block-search input {
        height: 40px;
        border-radius: 8px !important;
        font-style: italic;
        font-size: inherit;
        padding-left: 15px;
        background: #ffffff;
        border: 2px solid #0099d8;
    }
}

.search-area .block.block-search {
    max-width: 600px;
}

.mst-searchautocomplete__item.magento_catalog_product .title a {
    color: #333333;
    font-size: 15px;
    font-weight: 600;
}

.mst-searchautocomplete__item.magento_catalog_product .description {
    font-size: 12px;
    color: #777777;
    height: 3rem;
    line-height: normal;
    overflow: hidden;
    margin-bottom: .5rem;
}

.mst-searchautocomplete__autocomplete .mst-searchautocomplete__show-all a {
    font-weight: 600;
    padding: 10px 0;
    color: #ffffff !important;
    font-size: 1rem;
    background: #0099d8;
    display: block;
}

.mst-searchautocomplete__autocomplete .mst-searchautocomplete__index-title {
    border-bottom: 1px solid #efefef;
    padding: 10px 0 9px 0px;
    margin: 0 10px;
    text-align: left;
    font-size: 1rem;
    line-height: 1rem;
    color: #000000;
    text-transform: uppercase;
    font-weight: 700;
}

/* Aanpassingen top header */ 

.page-header .switcher .options .action.toggle, .page-footer .switcher .options .action.toggle {
    display: flex;
    align-items: center;
    padding: 0 10px;
    margin-left: 10px;
    line-height: 26px;
    letter-spacing: .025em;
    background: white;
    border-radius: 7px;
    border: 1px solid #ededed;
}

.page-header .switcher strong, .page-footer .switcher strong {
    font-weight: 700;
    font-size: 12px;
    font-family: 'Open Sans';
}

.page-header .switcher strong>img, .page-footer .switcher strong>img {
    width: 20px;
}

.page-header .switcher .options ul.dropdown a>img, .page-footer .switcher .options ul.dropdown a>img {
    margin-bottom: 3px;
    margin-right: 3px;
    vertical-align: middle;
    width: 20px;
}

.page-header .switcher .options ul.dropdown a, .page-footer .switcher .options ul.dropdown a {
    display: block;
    color: #000000;
    padding: 6px 8px;
    font-size: 1em;
    line-height: 25px;
    font-weight: 500;
    border-bottom: 1px solid #ededed;
}

@media (min-width: 992px) {
    ul#ui-id-1.switcher-dropdown {
        width: auto;
        border-radius: 4px;
        min-width: 170px;
    }
}

.panel.header .switcher {
    text-transform: uppercase;
    margin-right: 0px;
    display: inline-block;
}

.header.panel > .header.links > li > a {
    padding: 5px 15px;
    border: none;
    font-size: 12px;
    border-right: 1px solid #ededed;
}

.page-header .switcher .options .action.toggle::after, .page-footer .switcher .options .action.toggle::after {
    font-size: 16px;
    background: #919baa;
    color: white;
    -webkit-font-smoothing: inherit;
    margin: 0 0 0 5px;
    line-height: 1;
    border-radius: 50%;
    width: 15px;
    height: 15px;
}



/* ------------------------------------------------------------------
 * Menubalk: lange categorienamen laten passen
 *
 * In het Engels passen de elf categorieën precies op één regel, maar de
 * vertalingen zijn langer -- in het Nederlands samen 1585px in een balk van
 * 1320px. De items stonden op `white-space: nowrap` met een vaste maximale
 * breedte, dus liepen ze buiten de balk.
 *
 * Oplossing: de namen mogen afbreken over twee regels en de items mogen
 * krimpen naar wat ze nodig hebben. In het Engels blijft alles op één regel
 * staan; alleen waar het niet past valt een woord naar beneden.
 * ------------------------------------------------------------------ */

@media (min-width: 992px) {
    .page-header.type23 .sw-megamenu.navigation > ul {
        align-items: stretch;
        /* Zonder tussenruimte plakken lange namen aan elkaar. */
        column-gap: 6px;
        /* In het Engels past alles op één regel; zonder ondergrens werd de
           balk daar ineens 12px lager dan in de andere talen. */
        min-height: 52px;
    }

    .page-header.type23 .sw-megamenu.navigation li.level0 {
        flex: 0 1 auto;
        min-width: 0;
        max-width: none;
    }

    /* Zelfde selector als in header-footer.css, zodat deze regel wint:
       die staat in de samengevoegde bundel en dus eerder in de cascade. */
    .page-header.type23 .nav-sections .navigation:not(.side-megamenu) .level0 > .level-top {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        /* Porto zet width: 100% op deze link; met content-box telt de
           binnenruimte daar bovenop en liep de tekst over de buren heen. */
        box-sizing: border-box;
        padding: 8px 9px;
        font-size: 12.5px;
        line-height: 1.25;
        text-align: center;
        /* Alleen afbreken bij een spatie: automatisch afbreken maakte er
           "Remsys-teem" en "Overi-ge" van. */
        white-space: normal;
        /* Geen automatische afbreekstreepjes ("Remsys-teem"), maar wel een
           breuk als één woord echt breder is dan zijn vak -- anders schuift
           de tekst over de buurman heen op smallere schermen. */
        hyphens: manual;
        overflow-wrap: break-word;
    }
}

/* Tussen 992 en 1279px is de balk zelf smaller (1140 of 960px) terwijl er
   evenveel categorieën in moeten. Iets kleiner en krapper zetten geeft daar
   de ruimte die de vertaalde namen nodig hebben. */
@media (min-width: 992px) and (max-width: 1279px) {
    .page-header.type23 .sw-megamenu.navigation > ul {
        column-gap: 8px;
    }

    .page-header.type23 .nav-sections .navigation:not(.side-megamenu) .level0 > .level-top {
        padding: 8px 5px;
        font-size: 11.5px;
    }
}

/* Onder ongeveer 1100px (tablet in liggende stand) is er simpelweg te weinig
   plaats voor elf categorienamen op één rij; dan liever twee nette rijen dan
   woorden die tegen elkaar aan kruipen. */
@media (min-width: 992px) and (max-width: 1099px) {
    .page-header.type23 .sw-megamenu.navigation > ul {
        height: auto;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 2px;
        padding: 6px 0;
    }
}

/* Het uitschuifmenu vult op telefoonformaat het hele scherm; de zwevende
   WhatsApp- en cookieknop bleven er dwars overheen liggen. Magento zet
   `nav-open` op <html> zolang het menu open staat. */
html.nav-open #ldbdigital-whatsapp-widget,
html.nav-open .cookie-toggle {
    display: none !important;
}