/* Global website font */
body,
html {
    font-family: "Trebuchet MS", Arial, sans-serif;
}

/* ----------------------------------------------------------------- kleuren aanpassen */

/* Custom brand color */
:root {
    --brand-primary: #b86f5d;
    --brand-primary-hover: #9f5949;
}

/* Links */
a {
    color: var(--brand-primary);
}

a:hover {
    color: var(--brand-primary-hover) !important;
}

/* Primary buttons */
.btn-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
	color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
	color: #fff !important;
}

/* iotgeschakelde knop als product niet op voorraad is */
.btn-primary.disabled:hover, .btn-primary:disabled:hover{
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
	color: #fff;
}

.btn.disabled, .btn.disabled:hover{
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
	color: #fff;
}


/* winkelwagen knop */
#header .header-nav .blockcart.active a:hover, #header .header-nav .cart-preview.active a, #header .header-nav .cart-preview.active i{
	color: #fff !important;
    background-color: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
}

#_desktop_cart .blockcart a:hover {
    background-color: var(--brand-primary) !important;
    color: #ffffff !important;
}



/* Secundary buttons */
.btn-secondary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
	color: #fff;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
	color: #fff;
}

#header .header-nav .cart-preview.active{
	background: #9f5949;
}

/* show password knop */
.input-group .input-group-btn>.btn[data-action=show-password]{
    padding: .78rem 1rem;
    background: var(--brand-primary);
}

.input-group .input-group-btn > .btn[data-action="show-password"]:hover {
    background-color: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
}

/* contact form add attachment knop*/
.btn-default{
	background: var(--brand-primary) !important;
}

input[type="file"]::file-selector-button:hover {
    background-color:  var(--brand-primary-hover) !important;
}

/* ----------------------------------------------------------------- vormen aanpassen */

/* Afgeronde knoppen */
.btn,
button,
input[type="submit"] {
    border-radius: 8px !important;
}

/* Afgeronde winkelwagenknop */
.add-to-cart,
#_desktop_cart .blockcart {
    border-radius: 8px !important;
}

/* ----------------------------------------------------------------- logo aanpassen */

/* Groter logo */
#header .logo {
    height: 73px !important;
    width: auto !important;
    max-width: none !important;
}

/* Mobiel logo groter */
@media (max-width: 767px) {
    #header .top-logo img {
        max-height: none !important;
        height: 2.5rem !important;
        width: auto !important;
        max-width: none !important;
    }
}

/* ----------------------------------------------------------------- menu aanpassen */

/* Hoofdmenu horizontaal houden */
@media (min-width: 768px) {
    ul.top-menu[data-depth="1"] {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        width: 250px !important;
    }

    ul.top-menu[data-depth="1"] > li {
        display: block !important;
        width: 100% !important;
        flex: 0 0 auto !important;
    }

.top-menu .sub-menu ul[data-depth="1"]>li{float:none;} /* removes left justification */
.top-menu .sub-menu {width: auto; min-width: auto;top: auto!important;} /* removes full active area width from subcategory dropdown width */
.popover {left: unset;} /* removes the forcing of dropdown to left of page active area lets dropdowns align with top nav */
}

/* Verberg categorieën onder het eerste niveau */
.top-menu[data-depth="2"] {
    display: none !important;
}

/* ----------------------------------------------------------------- layout aanpassen */

/* Meer ruimte tussen logo en menu */
#_desktop_top_menu {
    margin-left: 200px !important;
}

/* ----------------------------------------------------------------- zoekveld naast login plaaten */

/* Header: zoekveld naast login */
@media (min-width: 992px) {
    #search_widget {
        position: absolute !important;
        right: 435px !important;
        top: 0 !important;
        transform: translateY(-65px);
        width: 250px;
        z-index: 100;
    }
}

/* ----------------------------------------------------------------- Subcategorieën centreren */

/* Subcategorieën centreren */
#subcategories .subcategories-list {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center !important;
    gap: 20px;
    padding: 0;
}

/* Tegels */
#subcategories .subcategories-list > li {
    float: none !important;
    flex: 0 0 141px;
    max-width: 141px;
    margin: 0 !important;
    text-align: center;
}


/* hoover kleur tegels aanpassen */
#subcategories .subcategory-image a:hover {
    border-color: #9f5949 !important;
}

/* hoeken tegels afronden */
#subcategories .subcategory-image a,
#subcategories .subcategory-image a:hover {
    border-radius: 12px !important;
}

#subcategories .subcategory-name:hover {
    color: #9f5949 !important;
}

/* kaders ook in terracota als over de naam van de categorie gehoverd wordt */
#subcategories ul li:hover .subcategory-image a{
	padding: 5px;
	border: 5px solid #9f5949 !important;
}

/* ----------------------------------------------------------------- Opmaak over ons pagina */
.cms-image-text {
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 30px 0;
}

.cms-image-text-image {
    flex: 0 0 320px;
}

.cms-image-text-image img {
    width: 100%;
    height: auto;
}

.cms-image-text-content {
    flex: 1;
}

@media (max-width: 767px) {
    .cms-image-text {
        flex-direction: column;
        align-items: flex-start;
    }

    .cms-image-text-image {
        flex: none;
        width: 100%;
        max-width: 320px;
        height: auto;
        margin-bottom: 0;
    }

    .cms-image-text-image img {
        display: block;
        width: 100%;
        height: auto;
    }

    .cms-image-text-content {
        margin-top: 20px;
    }
}

/* ----------------------------------------------------------------- pagina numemrs */
.pagination .page-item.active .page-link {
    background-color: #b86f5d !important;
    border-color: #b86f5d !important;
    color: #fff !important;
}

.pagination .page-link:hover {
    color: #b86f5d !important;
    border-color: #b86f5d !important;
}

.pagination .current a{
	color: #b86f5d !important;
}

/* ----------------------------------------------------------------- product flags aanpassen */
.product-flags .product-flag {
    background-color: #b86f5d !important;
    color: #fff !important;
	border-radius: 5px !important;
}

/* ----------------------------------------------------------------- Productprijs op productpagine */
.product-price {
    color: #000000 !important;
}

/* ----------------------------------------------------------------- titeltjes productdetails en omschrijving op productpagine */
.tabs .nav-tabs .nav-link.active, .tabs .nav-tabs .nav-link:hover{
	border: 0;
	border-bottom: #9f5949 3px solid;
}

.tabs .nav-tabs .nav-link.active{
	color: #b86f5d;
}

/* ----------------------------------------------------------------- image border op productpagine */
.product-images>li.thumb-container .thumb.selected, .product-images>li.thumb-container .thumb:hover{
	border: #b86f5d 3px solid;
}


/* Footer: account en shopinformatie naast elkaar */
/* Footer: vier kolommen */
@media (min-width: 768px) {
#footer .footer-container .container > .row:first-child {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 0 !important;
}

/* Bootstrap-kolommen correct laten schalen */
#footer .footer-container .container > .row:first-child > * {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    float: none !important;
    flex: none !important;
    box-sizing: border-box !important;
}

/* Betaaliconen: volledige breedte van het grid */
#footer .footer-container .container > .row:first-child > .mpi-payment-icons {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    justify-self: stretch !important;
}

/* Iconen horizontaal centreren */
#footer .footer-container .mpi-payment-icons__list {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
}




/* Trusted Shops-rij over de volledige breedte */
#footer .footer-container .container > .row:first-child
> .row:has(etrusted-widget) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}
}

/* zet over de volledige breedte */
#blockEmailSubscription_displayHome {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
}