/*
 Theme Name:   Hello Elementor Child
 Theme URI:    https://home.marindex.nl
 Description:  Child theme voor Hello Elementor
 Author:       Pepijn van Rijen / Satdesign
 Author URI:   https://www.satdesign.nl
 Template:     hello-elementor
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  hello-elementor-child
*/

.headercontainer{
    top: 0px;
    position: fixed;
    z-index: 99;
}
.admin-bar .headercontainer{
    top: 30px;
}

.oranjespan span{
    color: var(--e-global-color-secondary);
}
.groenspan span{
    color: var(--e-global-color-accent);
}
.blauwspan span{
    color: var(--e-global-color-9837783);
}

.clickarea{
    cursor: pointer;
}

@media(max-width: 767px){
    .woordafbreking{
        hyphens: auto;
    }
}

.headerzoek{
    background: url('https://home.marindex.nl/wp-content/uploads/2026/01/icon_search-1.svg') no-repeat right 0px center;
    background-size: 18px;
    max-width: 250px;
    border: none !important;
    border-radius: 0px !important;
    padding: 3px !important;
}

.headerzoek::placeholder {
    color: #797979;
}

/* Zoekresultaten dropdown */
.headerzoek-results {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    min-width: 320px;
    max-height: 480px;
    overflow-y: auto;
    background: #fff;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 99999;
}

.headerzoek-results.active {
    display: block;
}

.headerzoek-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s;
}

.headerzoek-item:hover {
    background: #f5f5f5;
    color: #333;
}

.headerzoek-item-img {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.headerzoek-item-img img {
    max-width: 48px;
    max-height: 48px;
    object-fit: contain;
    border-radius: 4px;
}

.headerzoek-noimg {
    display: block;
    width: 48px;
    height: 48px;
    background: #eee;
    border-radius: 4px;
}

.headerzoek-item-title {
    font-size: 14px;
    line-height: 1.3;
}

.headerzoek-loading,
.headerzoek-empty {
    padding: 16px;
    text-align: center;
    color: #888;
    font-size: 14px;
}

.headerzoek-all {
    display: block;
    padding: 12px 14px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--e-global-color-primary, #0066cc);
    text-decoration: none;
    border-top: 1px solid #eee;
    transition: background 0.15s;
}

.headerzoek-all:hover {
    background: #f5f5f5;
}

.categorieoverzicht img{
    aspect-ratio: 176/175;
    object-fit: cover;
}

header .menubtn a{
    font-weight: bold !important;
    background-color: var(--e-global-color-9837783) !important;
    color: #FFF !important;
    margin-left: 15px !important;
}
header .menubtn a:hover{
    background-color: var(--e-global-color-secondary) !important;
}

.headercontainer.scrolled{
    background-color: #FFF;
}

/** Footer **/
footer.footer {
    margin-top: 2rem;
    border-bottom:2rem solid transparent
    color: #000;
    margin-bottom: 30px;
}
footer a{
    color: #000;
}
footer a:hover{
    text-decoration: underline;
}
footer h2{
    text-transform: uppercase;
}
footer .button{
    background-color: var(--e-global-color-secondary);
    color: #FFF !important;
    font-weight: bold;
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 5px;
    margin-bottom: 15px;
    display: inline-block;
}
footer .button:hover{
    background-color: var(--e-global-color-accent);
}

body.homepage footer.footer {
    xxmargin-top:10px
}

footer.footer .information {
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: #f1f1f1;
    font-size:16px
}

footer.footer .information .flex-box {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items:flex-start
}

footer.footer .information .flex-box .box-info, footer.footer .information .flex-box .box-social, footer.footer .information .flex-box .box-freecontent, footer.footer .information .flex-box .box-contact {
    -webkit-box-flex: 0 1 100%;
    -moz-box-flex: 0 1 100%;
    -webkit-flex: 0 1 100%;
    -ms-flex: 0 1 100%;
    flex: 0 1 100%;
    padding: .5rem 2vw;
    white-space:nowrap
}

@media only screen and (min-width: 576px) {
    footer.footer .information .flex-box .box-info, footer.footer .information .flex-box .box-social, footer.footer .information .flex-box .box-freecontent, footer.footer .information .flex-box .box-contact {
        -webkit-box-flex: 0 1 50%;
        -moz-box-flex: 0 1 50%;
        -webkit-flex: 0 1 50%;
        -ms-flex: 0 1 50%;
        flex:0 1 50%
    }
}

@media only screen and (min-width: 992px) {
    footer.footer .information .flex-box .box-info, footer.footer .information .flex-box .box-social, footer.footer .information .flex-box .box-freecontent, footer.footer .information .flex-box .box-contact {
        -webkit-box-flex: 0 1 15%;
        -moz-box-flex: 0 1 15%;
        -webkit-flex: 0 1 15%;
        -ms-flex: 0 1 15%;
        flex:0 1 15%
    }
}

footer.footer .information h2 {
    color: #000;
    font-size: 1rem;
    font-weight:bold
}

footer.footer .information a {
    color:#333
}

footer.footer .copyright {
    padding: 11px 1rem;
    height: auto;
    min-height: 35px;
    line-height: 13px;
    background-color: #666;
    text-align: center;
    font-size:12px
}

footer.footer .copyright, footer.footer .copyright a {
    color:#fff
}

footer.footer .copyright p {
    margin: 0
}
.slanted.green::before, .slanted.green::after {
    background-color:#8ac97c
}
.slanted {
    position:relative
}

.slanted::before {
    z-index: -1;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 9px;
    width: 100%;
    height: 50%;
    -webkit-transform: skew(-45deg, 0);
    -moz-transform: skew(-45deg, 0);
    -ms-transform: skew(-45deg, 0);
    -o-transform: skew(-45deg, 0);
    transform:skew(-45deg, 0)
}

.slanted::after {
    z-index: -1;
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height:50%
}

.slanted, .slanted a {
    color:#fff
}

.slant {
    position: relative;
    overflow-x:hidden
}

.slant.topleft::before, .slant.bottomleft::before {
    content: '';
    display: block;
    position: absolute;
    left: -13px;
    width: 25px;
    height: 25px;
    background:#fff
}

.slant.topright::after, .slant.bottomright::after {
    content: '';
    display: block;
    position: absolute;
    right: -13px;
    width: 25px;
    height: 25px;
    background:#fff
}

.slant.topleft::before, .slant.topright::after {
    top:0
}

.slant.bottomright::after, .slant.bottomleft::before {
    bottom:0
}

.slant.topright::after, .slant.bottomleft::before {
    -webkit-transform: skew(45deg, 0);
    -moz-transform: skew(45deg, 0);
    -ms-transform: skew(45deg, 0);
    -o-transform: skew(45deg, 0);
    transform:skew(45deg, 0)
}

.slant.topleft::before, .slant.bottomright::after {
    -webkit-transform: skew(-45deg, 0);
    -moz-transform: skew(-45deg, 0);
    -ms-transform: skew(-45deg, 0);
    -o-transform: skew(-45deg, 0);
    transform:skew(-45deg, 0)
}

/** Assortiment Menu **/
.assortimentmenu {
    position: relative;
}

.assortimentmenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
}

.assortimentmenu > ul > li {
    position: relative;
}

.assortimentmenu > ul > li > a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #000;
    font-weight: bold;
    font-size: 1.15rem;
}

.assortimentmenu > ul > li > a:hover,
.assortimentmenu > ul > li.active > a {
    color: var(--e-global-color-secondary);
}

.assortimentmenu > ul > li:first-child > a::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 6px;
    vertical-align: middle;
    background-color: #fff;
    border: 1.5px solid var(--e-global-color-secondary);
    border-radius: 50%;
    position: relative;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E87B00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 8px;
}

/* Dropdown submenu */
.assortimentmenu > ul > li > ul {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 260px;
    white-space: nowrap;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    flex-direction: column;
    gap: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 100;
}

.assortimentmenu > ul > li:hover > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.assortimentmenu > ul > li > ul > li {
    border-bottom: 1px solid #f0f0f0;
}

.assortimentmenu > ul > li > ul > li:last-child {
    border-bottom: none;
}

.assortimentmenu > ul > li > ul > li > a {
    display: block;
    padding: 6px 15px;
    text-decoration: none;
    color: #333;
    font-size: 0.95rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.assortimentmenu > ul > li > ul > li > a:hover,
.assortimentmenu > ul > li > ul > li.active > a {
    background-color: var(--e-global-color-secondary);
    color: #fff;
}

/** Webshop Menu **/
.webshopmenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
}

.webshopmenu li a {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #000;
    font-weight: normal;
    font-size: 1.15rem;
    padding: 10px 0;
}

.webshopmenu li a:hover {
    color: var(--e-global-color-secondary);
}

/* Niet ingelogd: de inloglink krijgt dezelfde blauwe rechthoekige knop als
   'Klant worden' (Elementor-widget 88923e0: achtergrond --e-global-color-9837783,
   witte tekst, vet, geen ronding, oranje op hover). Zodra JS de klant als
   ingelogd herkent komt .logged-in erbij en valt hij terug op de gewone
   tekstlink met 'Account'. */
.webshopmenu li a.login-link:not(.logged-in) {
    background-color: var(--e-global-color-9837783, #34B3CE);
    color: var(--e-global-color-95e6c3b, #fff);
    /* Zelfde typografie als de knop. De familie erft die van .elementor-kit-5
       op de body, maar font-size en line-height komen uit Elementors eigen
       basisregel: .elementor-button { font-size: 15px; line-height: 1; }.
       Hier expliciet, want .webshopmenu li a zet zelf 1.15rem en erft
       line-height 1.5 van de body. */
    font-family: "Open Sans", Sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    /* De knop is 16px padding + 15px regelhoogte + 16px padding = 47px. Die
       hoogte zetten we vast in plaats van de padding na te bouwen, want het
       avatar-icoon is 20px en zou de link anders alsnog hoger maken dan de
       regel tekst. box-sizing is border-box (reset van het parent theme),
       dus 47px is inclusief padding. */
    height: 47px;
    padding: 0 14px;
    border-radius: 0;
}

.webshopmenu li a.login-link:not(.logged-in):hover,
.webshopmenu li a.login-link:not(.logged-in):focus {
    background-color: var(--e-global-color-secondary, #D97827);
    color: var(--e-global-color-95e6c3b, #fff);
}

/* Het avatar-icoon is een SVG met een zwarte lijn; op de blauwe knop wit. */
.webshopmenu li a.login-link:not(.logged-in) .icon-avatar {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E");
}

/* Op mobiel blijft het webshopmenu zoals het was: alleen het zwarte
   avatar-icoon, zonder knopvlak en zonder extra padding. Zelfde breekpunt als
   de regel verderop die de menuteksten verbergt. */
@media (max-width: 767px) {
    .webshopmenu li a.login-link:not(.logged-in) {
        background-color: transparent;
        color: #000;
        font-family: inherit;
        font-size: 1.15rem;
        font-weight: normal;
        line-height: inherit;
        height: auto;
        padding: 10px 0;
    }

    .webshopmenu li a.login-link:not(.logged-in):hover,
    .webshopmenu li a.login-link:not(.logged-in):focus {
        background-color: transparent;
        color: var(--e-global-color-secondary);
    }

    .webshopmenu li a.login-link:not(.logged-in) .icon-avatar {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E");
    }
}


.webshopmenu .icon-avatar {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.webshopmenu .icon-cart {
    display: inline-block;
    width: 20px;
    height: 20px;
    position: relative;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'%3E%3C/circle%3E%3Ccircle cx='20' cy='21' r='1'%3E%3C/circle%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.webshopmenu .cart-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: var(--e-global-color-secondary);
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/** Assortiment Categorieën Grid **/
.assortiment-categorieen-grid {
    display: grid;
    grid-template-columns: repeat(var(--kolommen, 6), 1fr);
    gap: 30px;
    padding: 20px 0;
}

@media (max-width: 1200px) {
    .assortiment-categorieen-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1024px) {
    .assortiment-categorieen-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .assortiment-categorieen-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .assortiment-categorieen-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .webshopmenu a span{
        display: none;
    }
    .webshopmenu a span.icon-avatar{
        display: inline-block;
    }
}


.assortiment-categorie-item {
    width: 100%;
}

.assortiment-categorie-item .elementor {
    width: 100%;
}

/* Fallback styling (alleen zonder Elementor template) */
.assortiment-categorie-item > a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.assortiment-categorie-image img {
    width: 100%;
    aspect-ratio: 176/175;
    object-fit: cover;
    display: block;
}

.assortiment-categorie-title {
    margin: 0;
    padding: 15px;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    color: #333;
}

/* === Mobiel: assortimentmenu als accordion in het mobiele menu (popup) ===
   Op desktop is het submenu een absolute hover-dropdown. In de popup viel dat
   buiten de scrollbare viewport. Op mobiel zetten we het submenu in de normale
   flow (dichtgeklapt) en open je het door op "Assortiment" te tikken (zie de
   toggle-JS in functions.php: marindex_assortimentmenu_mobile_accordion). */
@media (max-width: 767px) {
    .assortimentmenu > ul {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }

    .assortimentmenu > ul > li {
        width: 100%;
    }

    /* "Assortiment" wordt een toggle; chevron rechts uitlijnen en draaien */
    .assortimentmenu > ul > li:first-child > a {
        display: flex;
        align-items: center;
    }

    .assortimentmenu > ul > li:first-child > a::after {
        margin-left: auto;
        transition: transform 0.2s ease;
    }

    .assortimentmenu > ul > li:first-child.open > a::after {
        transform: rotate(180deg);
    }

    /* Submenu in normale flow i.p.v. absoluut; dichtgeklapt, opent via .open */
    .assortimentmenu > ul > li > ul {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        min-width: 0;
        width: 100%;
        white-space: normal;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .assortimentmenu > ul > li.open > ul {
        max-height: 1500px;
    }
}


/* ---------------------------------------------------------------------------
   Winkelwagen-lightbox
   Zelfde opzet als het mandje-paneel in de webshop: paneel rechts, blauwe
   prijsbalk op de tegels, groene afrekenblok onderaan.
   --------------------------------------------------------------------------- */

.mx-basket {
    position: fixed;
    inset: 0;
    z-index: 100000;
}

.mx-basket[hidden] {
    display: none;
}

body.mx-basket-open {
    overflow: hidden;
}

.mx-basket-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.mx-basket-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.2);
    animation: mx-basket-in 0.2s ease-out;
}

@keyframes mx-basket-in {
    from { transform: translateX(24px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .mx-basket-panel { animation: none; }
}

.mx-basket.is-busy .mx-basket-body,
.mx-basket.is-busy .mx-basket-foot {
    opacity: 0.5;
    pointer-events: none;
}

.mx-basket-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 12px;
}

.mx-basket-head h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--e-global-color-primary, #333);
}

.mx-basket-x {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 4px;
    color: var(--e-global-color-primary, #333);
}

.mx-basket-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 20px 20px;
}

/* Scheidingsstippen tussen de blokken, net als in de webshop */
.mx-basket-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 14px 0;
}

.mx-basket-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.mx-basket-dots span:nth-child(1) { background: var(--e-global-color-accent, #89C87C); }
.mx-basket-dots span:nth-child(2) { background: var(--e-global-color-secondary, #D97827); }
.mx-basket-dots span:nth-child(3) { background: var(--e-global-color-9837783, #34B3CE); }

/* Regels in het mandje */
.mx-basket-line-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mx-basket-qty {
    width: 58px;
    padding: 4px 6px;
    border: 1px solid var(--e-global-color-a18307d, #DCDCDC);
    border-radius: 3px;
    font-size: 15px;
    text-align: left;
}

.mx-basket-icon {
    background: none;
    border: none;
    padding: 2px 4px;
    cursor: pointer;
    font-size: 16px;
    color: var(--e-global-color-accent, #89C87C);
}

/* De reset van Hello Elementor geeft ELKE <button> op hover een paarse vulling
   (#c36 met witte tekst). Onze knoppen in de lightbox zijn iconen en tegels,
   geen standaardknoppen, dus die zetten we expliciet terug. Een enkele class
   is daarvoor niet genoeg: 'button:hover' weegt zwaarder dan '.mx-basket-icon',
   vandaar de extra .mx-basket ervoor. */
.mx-basket .mx-basket-icon:hover,
.mx-basket .mx-basket-icon:focus,
.mx-basket .mx-basket-x:hover,
.mx-basket .mx-basket-x:focus {
    background: none;
    border: none;
    color: var(--e-global-color-primary, #333);
}

.mx-basket .mx-basket-retry:hover,
.mx-basket .mx-basket-retry:focus {
    background: none;
    color: inherit;
}

.mx-basket .mx-basket-card-add:hover,
.mx-basket .mx-basket-card-add:focus {
    background: var(--e-global-color-9837783, #34B3CE);
    color: #fff;
    filter: brightness(0.93);
}

.mx-basket-artnr {
    font-size: 15px;
    color: var(--e-global-color-primary, #333);
    text-decoration: none;
}

/* Dezelfde reset kleurt links op hover donkerblauw (#336); de tekstkleur in de
   lightbox houden we gelijk en laten alleen de onderstreping het werk doen. */
.mx-basket .mx-basket-artnr:hover,
.mx-basket .mx-basket-artnr:focus,
.mx-basket .mx-basket-card-text:hover,
.mx-basket .mx-basket-card-text:focus {
    color: var(--e-global-color-primary, #333);
}

.mx-basket-artnr:hover {
    text-decoration: underline;
}

.mx-basket-line-price {
    margin-left: auto;
    font-size: 15px;
    white-space: nowrap;
}

.mx-basket-line-desc {
    margin: 6px 0 2px;
    font-size: 15px;
    line-height: 1.35;
}

.mx-basket-remove {
    color: var(--e-global-color-secondary, #D97827);
    padding-left: 0;
}

/* Geselecteerd voor u */
.mx-basket-suggest-title {
    margin: 0 0 12px;
    text-align: center;
    font-size: 20px;
    font-weight: 400;
    color: var(--e-global-color-9837783, #34B3CE);
}

.mx-basket-suggest {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.mx-basket-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--e-global-color-a18307d, #DCDCDC);
    background: #fff;
    overflow: hidden;
}

.mx-basket-card-img {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 140px;
    padding: 8px;
}

.mx-basket-card-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.mx-basket-noimg {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--e-global-color-75d03da, #F5F5F5);
}

.mx-basket-card-text {
    flex: 1 1 auto;
    display: block;
    padding: 8px 10px 10px;
    background: var(--e-global-color-75d03da, #F5F5F5);
    color: var(--e-global-color-primary, #333);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.3;
}

.mx-basket-card-artnr {
    display: block;
    font-weight: 700;
}

.mx-basket-card-name {
    display: block;
}

.mx-basket-card-add {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    cursor: pointer;
    background: var(--e-global-color-9837783, #34B3CE);
    color: #fff;
    font-size: 20px;
    text-align: right;
}

.mx-basket-card-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
}

.mx-basket-card-price small {
    font-size: 11px;
}

/* Meldingen */
.mx-basket-msg {
    padding: 30px 0;
    text-align: center;
    color: #6F6F6F;
    font-size: 15px;
}

.mx-basket-msg-error {
    color: var(--e-global-color-secondary, #D97827);
}

.mx-basket-retry {
    display: block;
    margin: 12px auto 0;
    padding: 6px 14px;
    border: 1px solid currentColor;
    background: none;
    color: inherit;
    cursor: pointer;
    border-radius: 3px;
}

/* Totalen en afrekenen */
.mx-basket-foot {
    flex: 0 0 auto;
}

.mx-basket-totals {
    padding: 14px 20px;
    background: var(--e-global-color-ac82b52, #DDEADB);
    font-size: 15px;
}

.mx-basket-totals div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
}

.mx-basket-checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    background: var(--e-global-color-accent, #89C87C);
    color: #fff;
    font-size: 19px;
    text-decoration: none;
}

.mx-basket-checkout:hover {
    color: #fff;
    filter: brightness(0.95);
}

@media (max-width: 480px) {
    .mx-basket-panel {
        max-width: none;
    }

    .mx-basket-card-img {
        height: 110px;
    }

    .mx-basket-card-add {
        font-size: 17px;
    }
}