.srmm,
.srmm * {
    box-sizing: border-box;
}

.srmm {
    --srmm-accent: #17a8e3;
    --srmm-columns: 4;
    --srmm-panel-width: 1380px;
    --srmm-top: 72px;
    --srmm-panel-left: 12px;
    --srmm-rail-width: 300px;
    --srmm-radius: 10px;
    --srmm-text: #111;
    --srmm-muted: #111;
    --srmm-line: #e4e8ed;
    --srmm-soft: #f4f7fa;
    display: inline-flex;
    position: relative;
    z-index: 9998;
    font-family: inherit;
    color: var(--srmm-text);
}

.srmm__trigger {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    padding: 0 12px;
    margin: 0;
    border: 0;
    border-radius: 7px;
    background: transparent !important;
    color: #fff !important;
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .16s ease, color .16s ease, background .16s ease;
}

.srmm__trigger:hover,
.srmm__trigger:focus-visible,
.srmm.is-open .srmm__trigger {
    border-color: transparent !important;
    background: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
    outline: 0;
}

.srmm__trigger-menu-icon {
    display: block;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin: 0 14px 0 0 !important;
    color: inherit !important;
    align-self: center;
}

/* Expliciete afstand tussen het SVG-menu-icoon en het label. */
.srmm__trigger-menu-icon + .srmm__trigger-label {
    margin-left: 0 !important;
}

/* Houd de knoptekst zichtbaar, ook wanneer het actieve thema globale button:hover-regels gebruikt. */
.srmm__trigger-label {
    color: inherit !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 1.1em;
}

.srmm__trigger-chevron {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-left: 8px;
    transition: transform .18s ease;
}

.srmm.is-open .srmm__trigger-chevron {
    transform: rotate(180deg);
}

.srmm__backdrop {
    position: fixed;
    z-index: 9996;
    inset: var(--srmm-top) 0 0;
    background: rgba(0, 0, 0, 0.15);
    opacity: 0;
    transition: opacity .16s ease;
}

.srmm.is-open .srmm__backdrop {
    opacity: 1;
}

.srmm__panel {
    position: fixed;
    z-index: 9997;
    top: var(--srmm-top);
    left: var(--srmm-panel-left);
    width: min(var(--srmm-rail-width), calc(100vw - 24px));
    max-height: calc(100vh - var(--srmm-top) - 14px);
    transform: none;
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    overflow: hidden;

    border-radius: 0 0 var(--srmm-radius) var(--srmm-radius);
    background: #fff;
    box-shadow: none !important;
    will-change: clip-path, opacity;
    transition:
        opacity .10s ease-out,
        clip-path .18s cubic-bezier(.22, 1, .36, 1),
        width .18s ease;
}

.srmm.is-open .srmm__panel {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: none;
}

.srmm.has-active-view .srmm__panel {
    width: min(var(--srmm-panel-width), calc(100vw - 24px));
}

.srmm__shell {
    display: grid;
    grid-template-columns: minmax(220px, 286px) 1fr;
    max-height: inherit;
    min-height: 440px;
    min-height: min(440px, calc(100dvh - var(--srmm-top) - 14px));
}

.srmm:not(.has-active-view) .srmm__shell {
    display: block;
    min-height: 0;
}

.srmm:not(.has-active-view) .srmm__rail {
    max-height: calc(100vh - var(--srmm-top) - 14px);
    border-right: 0;
}

.srmm:not(.has-active-view) .srmm__content {
    display: none;
}

.srmm__rail {
    padding: 12px 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    border-right: 1px solid var(--srmm-line);
    background: #fff;
}

.srmm__rail-item {
    position: relative;
    width: 100%;
    min-height: 50px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 16px;
    margin: 0;
    border: 0;
    border-left: 3px solid transparent;
    background: transparent;
    color: var(--srmm-text);
    font: inherit;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
    transition: background .14s ease, color .14s ease, border-color .14s ease;
}

.srmm__rail-item:visited {
    color: var(--srmm-text);
}

.srmm__rail-item:hover,
.srmm__rail-item:focus-visible,
.srmm__rail-item.is-active {
    background: rgba(23, 168, 227, 0.08) !important;
    color: var(--srmm-accent) !important;
    border-left-color: transparent !important;
    outline: 0;
}

.srmm__rail-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
}

.srmm__rail-icon:empty {
    display: none;
}

.srmm__rail-item:has(.srmm__rail-icon:empty) {
    grid-template-columns: minmax(0, 1fr);
}

.srmm__cat-image {
    width: 32px !important;
    height: 32px !important;
    object-fit: contain;
    border-radius: 5px;
}

.srmm__fallback-icon {
    width: 21px;
    height: 21px;
}

.srmm__rail-name {
    min-width: 0;
    color: inherit !important;
}


.srmm__content {
    min-width: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    background: #fff;
}

.srmm__view {
    padding: 20px 28px 28px;
}

.srmm__grid {
    display: grid;
    grid-template-columns: repeat(var(--srmm-columns), minmax(0, 1fr));
    align-items: start;
    gap: 30px 34px;
    padding-top: 14px;
}

.srmm__group {
    min-width: 0;
    align-self: start;
}

@media (min-width: 901px) {
    .srmm__grid {
        /* Behoud de visuele top-uitlijning van v1.1.12, zonder ruimte voor een sluitknop. */
        padding-top: 10px;
        padding-right: 0;
    }

    .srmm[data-srmm-ready="1"] .srmm__grid {
        grid-auto-flow: row dense;
        grid-auto-rows: 1px;
        row-gap: 0;
    }

    .srmm[data-srmm-ready="1"] .srmm__group {
        padding-bottom: 30px;
    }
}

.srmm__group-title {
    margin: 0 0 10px;
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--srmm-accent);
}


.srmm__group-title a {
    color: inherit;
    text-decoration: none;
}

.srmm__group-title a:hover,
.srmm__group-title a:focus-visible {
    color: var(--srmm-accent);
    text-decoration: underline;
    outline: 0;
}

.srmm__links {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.srmm__link-item {
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.3;
}

.srmm__link-item[data-depth="2"] { padding-left: 10px; }
.srmm__link-item[data-depth="3"] { padding-left: 20px; }
.srmm__link-item[data-depth="4"] { padding-left: 30px; }

.srmm__link-item[data-depth="2"] > a::before,
.srmm__link-item[data-depth="3"] > a::before,
.srmm__link-item[data-depth="4"] > a::before {
    content: "–";
    margin-right: 5px;
    color: var(--srmm-text);
}

.srmm__link-item a {
    color: var(--srmm-text);
    text-decoration: none;
    transition: color .12s ease;
}

.srmm__link-item a:hover,
.srmm__link-item a:focus-visible {
    color: var(--srmm-accent);
    text-decoration: underline;
    outline: 0;
}


/* Niet-klikbare aanvullingen bij categorieën zonder echte subcategorieën. */
.srmm__link-text {
    color: var(--srmm-text);
}

.srmm__more {
    display: inline-flex;
    align-items: center;
    margin: 10px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--srmm-accent);
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}

.srmm__more:hover,
.srmm__more:focus-visible {
    text-decoration: underline;
    outline: 0;
}

.srmm__empty {
    display: grid;
    gap: 10px;
    place-items: start;
    padding: 28px 0;
    color: var(--srmm-muted);
}

.srmm__empty p {
    margin: 0;
}

.srmm-admin-message {
    padding: 10px 12px;
    border: 1px solid #e2a300;
    background: #fff8db;
    color: #5a4300;
    font-size: 13px;
}

@media (max-width: 1100px) {
    .srmm__shell {
        grid-template-columns: minmax(205px, 240px) 1fr;
    }

    .srmm__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 28px;
        row-gap: 0;
    }

    .srmm__grid[data-srmm-columns="2"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .srmm__trigger {
        min-height: 42px;
        padding-inline: 12px;
    }

    .srmm__backdrop {
        inset: var(--srmm-top) 0 0;
    }

    .srmm__panel,
    .srmm.has-active-view .srmm__panel {
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        max-height: none;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        border-radius: 0;
        transform: translateY(-4px);
        transform-origin: center top;
        animation: none;
    }

    .srmm.is-open .srmm__panel {
        transform: translateY(0);
        animation: none;
    }

    .srmm__shell {
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: calc(100dvh - var(--srmm-top));
    }

    .srmm__rail {
        display: flex;
        gap: 7px;
        flex: 0 0 auto;
        padding: 10px 12px;
        border-right: 0;
        border-bottom: 1px solid var(--srmm-line);
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
    }

    .srmm__rail-item {
        width: auto;
        min-width: max-content;
        min-height: 38px;
        grid-template-columns: 24px auto;
        gap: 7px;
        padding: 7px 11px;
        border: 1px solid var(--srmm-line);
        border-radius: 999px;
        font-size: 15px;
    }

    .srmm__rail-item.is-active {
        border-color: var(--srmm-accent);
    }


    .srmm__rail-icon {
        width: 24px;
        height: 24px;
    }

    .srmm__cat-image {
        width: 24px !important;
        height: 24px !important;
    }

    .srmm__content {
        flex: 1 1 auto;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .srmm__view {
        padding: 17px 18px 34px;
    }

    .srmm__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: row;
        grid-auto-rows: auto;
        column-gap: 24px;
        row-gap: 25px;
    }
}

@media (max-width: 600px) {
    .srmm__trigger-label {
        max-width: 168px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .srmm__grid {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 24px;
    }

    .srmm__group {
        padding-bottom: 20px;
        border-bottom: 1px solid var(--srmm-line);
    }

    .srmm__group:last-child {
        border-bottom: 0;
    }

    .srmm__group-title {
        font-size: 15px;
    }

    .srmm__link-item {
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .srmm__trigger,
    .srmm__trigger-chevron,
    .srmm__backdrop,
    .srmm__panel {
        transition: none !important;
        animation: none !important;
    }
}

/* v1.1.30 - optionele categorie-labels (Populair / Trending / eigen tekst). */
.srmm__rail-copy,
.srmm__link-wrap {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.srmm__group-title {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.srmm__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 18px;
    padding: 0 7px 2px;
    border-radius: 4px;
    background: #ff5b00 !important;
    color: #fff !important;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .01em;
    white-space: nowrap;
    text-decoration: none !important;
    vertical-align: middle;
}

.srmm__rail-item:hover .srmm__badge,
.srmm__rail-item:focus-visible .srmm__badge,
.srmm__rail-item.is-active .srmm__badge,
.srmm__group-title .srmm__badge,
.srmm__link-item .srmm__badge {
    color: #fff !important;
    background: #ff5b00 !important;
    text-decoration: none !important;
}

@media (max-width: 900px) {
    .srmm__rail-copy {
        flex-wrap: nowrap;
    }

    .srmm__badge {
        min-height: 17px;
        padding: 3px 6px 2px;
        font-size: 9px;
    }
}

/* ========================================================================
 * v1.1.42 - horizontale dropdown stabiel op dezelfde viewportpositie als de balk
 * [sr_woo_mega_menu_horizontal]
 * Volledige viewportbreedte voor balk/dropdown, gecentreerde contentcontainer.
 * ====================================================================== */
.srmmh,
.srmmh * {
    box-sizing: border-box;
}

.srmmh {
    --srmm-accent: #17a8e3;
    --srmm-text: #111;
    --srmm-muted: #111;
    --srmm-line: #e3e9ed;
    --srmm-columns: 4;
    --srmmh-container-width: 1500px;
    --srmmh-dropdown-top: 0px;
    position: relative;
    z-index: 9994;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    color: var(--srmm-text);
    font-family: inherit;
}

.srmmh__bar-shell {
    position: relative;
    z-index: 2;
    width: 100%;
    min-width: 0;
    background: #eef9fd;
    border-top: 0;
    border-bottom: 0;
}

.srmmh__bar {
    /* v1.1.56: gebruik de bewezen Flatsome/container-uitlijning uit v1.1.54,
     * maar zet de variabelen synchronously pre-paint. Geen verborgen fase en
     * geen zichtbare JS-correctie na paginalaad. */
    width: var(--srmmh-bar-width, min(var(--srmmh-container-width), calc(100vw - 32px)));
    max-width: none;
    min-height: 55px;
    max-height: 55px;
    margin: 0 0 0 var(--srmmh-bar-left, 16px);
    padding: 0;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0;
}

.srmmh__item {
    position: relative;
    min-width: 0;
    min-height: 55px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: transparent !important;
    color: var(--srmm-accent) !important;
    font: inherit;
    font-size: var(--srmmh-item-font-size, 15px);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    transition: color .14s ease, background .14s ease;
}

.srmmh__item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--srmm-accent);
    opacity: 0;
    transform: scaleX(.72);
    transform-origin: center;
    transition: opacity .14s ease, transform .16s cubic-bezier(.22, 1, .36, 1);
}

.srmmh__item:hover,
.srmmh__item:focus-visible,
.srmmh__item.is-active {
    color: #0b7fae !important;
    outline: 0;
}

.srmmh__item:hover::after,
.srmmh__item:focus-visible::after,
.srmmh__item.is-active::after {
    opacity: 1;
    transform: scaleX(1);
}

.srmmh__item.is-deal,
.srmmh__item.is-deal:hover,
.srmmh__item.is-deal:focus-visible,
.srmmh__item.is-deal.is-active {
    color: #ff5b00 !important;
}

.srmmh__item.is-deal::after {
    background: #ff5b00;
}

.srmmh__item-name {
    color: inherit !important;
}

.srmmh__item .srmm__badge {
    flex: 0 0 auto;
}

/* Zelfde transparante zwarte achtergrond-overlay voor alle mega-menu varianten.
 * De overlay begint exact onder de horizontale balk en ligt onder de witte
 * dropdown, zodat alleen de rest van de pagina subtiel donkerder wordt. */
.srmmh__backdrop {
    position: fixed;
    z-index: 0;
    inset: var(--srmmh-dropdown-top) 0 0;
    background: rgba(0, 0, 0, 0.15);
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease;
}

.srmmh.is-open .srmmh__backdrop {
    opacity: 1;
    pointer-events: auto;
}

.srmmh__dropdown {
    position: fixed;
    z-index: 1;
    top: var(--srmmh-dropdown-top);
    left: 0;
    right: 0;
    width: 100vw;
    max-height: calc(100vh - var(--srmmh-dropdown-top) - 10px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    border-bottom: 1px solid #dfe6ea;
    box-shadow: none !important;
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    pointer-events: none;
    will-change: clip-path, opacity;
    transition:
        opacity .10s ease-out,
        clip-path .18s cubic-bezier(.22, 1, .36, 1);
}

.srmmh.is-open .srmmh__dropdown {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    pointer-events: auto;
}

.srmmh__dropdown-inner {
    /* De dropdown is fixed aan de viewport, dus gebruik de absolute viewport-
     * positie die tegelijk met de balk pre-paint is berekend. */
    width: var(--srmmh-content-width, min(var(--srmmh-container-width), calc(100vw - 32px)));
    max-width: none;
    margin: 0 0 0 var(--srmmh-content-left, 16px);
    /* Totale buitenmaat blijft 1250px; content krijgt 10px visuele gutter. */
    padding: 27px 10px 34px;
}

.srmmh__view[hidden] {
    display: none !important;
}

.srmmh .srmm__grid {
    grid-template-columns: repeat(var(--srmm-columns), minmax(0, 1fr));
    align-items: start;
    gap: 0 72px;
    padding: 0;
}

.srmmh[data-srmmh-ready="1"] .srmm__grid {
    grid-auto-flow: row dense;
    grid-auto-rows: 1px;
    row-gap: 0;
}

.srmmh[data-srmmh-ready="1"] .srmm__group {
    padding-bottom: 30px;
}

.srmmh .srmm__group-title {
    margin-bottom: 9px;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
}

.srmmh .srmm__links {
    gap: 8px;
}

.srmmh .srmm__link-item {
    font-size: 14px;
    line-height: 1.35;
}

.srmmh .srmm__more {
    margin-top: 15px;
    font-size: 14px;
}

.srmmh .srmm__empty {
    padding: 2px 0 8px;
}

@media (max-width: 1200px) {
    .srmmh__bar {
        width: var(--srmmh-bar-width, calc(100vw - 24px));
        max-width: none;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }

    .srmmh__bar::-webkit-scrollbar {
        display: none;
    }

    .srmmh__item {
        flex: 0 0 auto;
        padding-inline: 12px;
        font-size: 15px;
    }

    .srmmh__dropdown-inner {
        width: var(--srmmh-content-width, calc(100vw - 24px));
        max-width: none;
        margin-left: var(--srmmh-content-left, 12px);
    }

    .srmmh .srmm__grid {
        gap: 0 42px;
    }
}

@media (max-width: 900px) {
    .srmmh {
        margin-left: calc(50% - 50vw);
    }

    .srmmh__bar-shell {
        border-top: 0;
    }

    .srmmh__bar {
        min-height: 50px;
        max-height: 50px;
        width: calc(100vw - 16px);
        margin-left: 8px;
    }

    .srmmh__item {
        min-height: 50px;
        padding-inline: 12px;
        font-size: 14px;
    }

    .srmmh__item::after {
        left: 12px;
        right: 12px;
    }

    .srmmh__dropdown {
        max-height: calc(100dvh - var(--srmmh-dropdown-top));
    }

    .srmmh__dropdown-inner {
        width: calc(100vw - 28px);
        max-width: none;
        margin: 0 auto;
        padding: 22px 0 28px;
    }

    .srmmh .srmm__grid,
    .srmmh[data-srmmh-ready="1"] .srmm__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: auto;
        grid-auto-flow: row;
        gap: 28px 26px;
    }

    .srmmh[data-srmmh-ready="1"] .srmm__group {
        padding-bottom: 0;
        grid-row-end: auto !important;
    }
}

@media (max-width: 560px) {
    .srmmh .srmm__grid,
    .srmmh[data-srmmh-ready="1"] .srmm__grid {
        grid-template-columns: 1fr;
        gap: 26px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .srmmh__item,
    .srmmh__item::after,
    .srmmh__dropdown {
        transition: none !important;
    }
}

/* ========================================================================
 * v1.1.45 - premium mobiele/tablet categorie-browser voor de horizontale
 * shortcode. Desktop blijft volledig ongewijzigd; <= 900px wordt een echte
 * verticale drill-down navigatie met thumbnails en volledige schermniveaus gebruikt.
 * ====================================================================== */
.srmmh__mobile {
    display: none !important;
}

@media (max-width: 900px) {
    .srmmh {
        width: 100%;
        margin-left: 0;
        position: relative;
        z-index: 1;
        background: #fff;
        overflow: visible;
    }

    .srmmh__bar-shell,
    .srmmh__dropdown,
    .srmmh__backdrop {
        display: none !important;
    }

    .srmmh__mobile {
        --srmmh-mobile-brandbar-height: 60px;
        display: grid !important;
        grid-template-rows: var(--srmmh-mobile-brandbar-height) minmax(0, 1fr);
        width: 100%;
        min-width: 0;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        overflow: hidden;
        isolation: isolate;
        overscroll-behavior: contain;
        background: #fff;
        color: #111;
        font-family: inherit;
        -webkit-tap-highlight-color: transparent;
    }

    /*
     * v1.1.60 - compacte mobiele merk-/sluitbalk (max 60px), opnieuw opgebouwd vanaf 1.1.57.
     * De eerste regel is bewust ruim en volledig wit, zoals bij sterke retail
     * off-canvas navigaties. Logo links, sluitactie rechts, en sticky tijdens scroll.
     */
    .srmmh__mobile-brandbar {
        position: relative;
        grid-row: 1;
        grid-column: 1;
        z-index: 20;
        width: 100%;
        height: var(--srmmh-mobile-brandbar-height);
        min-height: var(--srmmh-mobile-brandbar-height);
        padding: 8px 14px 8px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        box-sizing: border-box;
        background: #fff;
        border-bottom: 1px solid #e7edf1;
    }

    .srmmh__mobile-brand {
        min-width: 0;
        display: inline-flex;
        align-items: center;
        text-decoration: none !important;
        line-height: 0;
    }

    .srmmh__mobile-brand-logo {
        display: block;
        width: min(185px, calc(100vw - 96px));
        max-width: 100%;
        max-height: 38px;
        height: auto;
        object-fit: contain;
    }

    .srmmh__mobile-close {
        -webkit-appearance: none;
        appearance: none;
        width: 40px;
        height: 40px;
        min-width: 40px;
        margin: 0;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0 !important;
        border-radius: 50%;
        box-shadow: none !important;
        background: transparent !important;
        color: #111 !important;
        cursor: pointer;
        touch-action: manipulation;
        transition: background-color .12s ease, color .12s ease, transform .12s ease;
    }

    .srmmh__mobile-close:hover,
    .srmmh__mobile-close:focus-visible,
    .srmmh__mobile-close:active {
        background: rgba(23, 168, 227, .08) !important;
        color: #0b7fae !important;
        outline: 0;
    }

    .srmmh__mobile-close:active {
        transform: scale(.94);
    }

    .srmmh__mobile-close svg {
        width: 24px;
        height: 24px;
        display: block;
    }

    /* Fallback voor browsers zonder :has(): JS geeft de originele Flatsome
       sluitknop dezelfde bronklasse zodra de mobiele navigatie initialiseert. */
    .srmmh__native-close-source {
        display: none !important;
    }

    .srmmh__mobile-list,
    .srmmh__mobile-panels,
    .srmmh__mobile-panel,
    .srmmh__mobile-sections {
        width: 100%;
        min-width: 0;
    }

    /*
     * v1.1.61 - native mobiele viewport. De hoofdlist en het detailniveau
     * hebben ieder hun eigen scrollpositie. Daardoor verandert het verticale
     * schermanker niet meer wanneer een hoofdcategorie wordt geopend.
     */
    .srmmh__mobile-list,
    .srmmh__mobile-panels {
        grid-row: 2;
        grid-column: 1;
        min-height: 0;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        background: #fff;
        transform: translateZ(0);
        backface-visibility: hidden;
    }

    .srmmh__mobile-list {
        z-index: 1;
    }

    .srmmh__mobile-panels {
        z-index: 2;
        visibility: hidden;
        pointer-events: none;
        transform: translate3d(100%, 0, 0);
    }

    .srmmh__mobile.is-panel-open .srmmh__mobile-panels {
        visibility: visible;
        pointer-events: auto;
        transform: translate3d(0, 0, 0);
    }

    .srmmh__mobile.is-panel-open .srmmh__mobile-list {
        pointer-events: none;
    }

    .srmmh__mobile-list[hidden],
    .srmmh__mobile-panel[hidden],
    .srmmh__mobile-section-body[hidden],
    .srmmh__mobile-link[hidden] {
        display: none !important;
    }

    .srmmh__mobile-category,
    .srmmh__mobile-leaf,
    .srmmh__mobile-section-toggle,
    .srmmh__mobile-back,
    .srmmh__mobile-more {
        -webkit-appearance: none;
        appearance: none;
        box-shadow: none !important;
        text-transform: none !important;
        letter-spacing: normal !important;
        font-family: inherit !important;
        touch-action: manipulation;
    }

    .srmmh__mobile-category {
        width: 100%;
        min-height: 70px;
        margin: 0;
        padding: 9px 16px;
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr) 20px;
        align-items: center;
        gap: 12px;
        border: 0;
        border-bottom: 1px solid #e7edf1;
        border-radius: 0;
        background: #fff !important;
        color: #111 !important;
        text-align: left;
        text-decoration: none !important;
        cursor: pointer;
        transition: background-color .12s ease, color .12s ease;
    }

    .srmmh__mobile-category:hover,
    .srmmh__mobile-category:focus-visible,
    .srmmh__mobile-category:active {
        background: rgba(23, 168, 227, .07) !important;
        color: #111 !important;
        outline: 0;
    }

    .srmmh__mobile-category.is-deal .srmmh__mobile-category-name {
        color: #ff5b00 !important;
    }

    .srmmh__mobile-thumb,
    .srmmh__mobile-panel-thumb {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        overflow: hidden;
        background: rgba(23, 168, 227, .055);
        border-radius: 8px;
    }

    .srmmh__mobile-thumb {
        width: 46px;
        height: 46px;
    }

    .srmmh__mobile-thumb .srmm__cat-image {
        width: 42px !important;
        height: 42px !important;
        border-radius: 6px;
        object-fit: contain;
    }

    .srmmh__mobile-thumb .srmm__fallback-icon {
        width: 24px;
        height: 24px;
        color: #17a8e3;
    }

    .srmmh__mobile-category-copy,
    .srmmh__mobile-section-copy,
    .srmmh__mobile-leaf-copy {
        min-width: 0;
        display: grid;
        gap: 3px;
    }

    .srmmh__mobile-category-line,
    .srmmh__mobile-section-line {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 7px;
        flex-wrap: wrap;
    }

    .srmmh__mobile-category-name {
        min-width: 0;
        color: #111 !important;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.25;
    }

    .srmmh__mobile-category-meta,
    .srmmh__mobile-section-meta {
        color: #707b83;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.25;
    }

    .srmmh__mobile-row-chevron,
    .srmmh__mobile-section-chevron {
        width: 20px;
        height: 20px;
        flex: 0 0 auto;
        color: #17a8e3;
        transition: transform .18s cubic-bezier(.22, 1, .36, 1);
    }

    .srmmh__mobile-row-chevron {
        transform: rotate(-90deg);
    }

    .srmmh__mobile-panel {
        min-height: 100%;
        background: #fff;
        transform: translateZ(0);
        backface-visibility: hidden;
    }

    .srmmh__mobile.is-transitioning {
        contain: paint;
    }

    .srmmh__mobile.is-transitioning .srmmh__mobile-list,
    .srmmh__mobile.is-transitioning .srmmh__mobile-panels {
        pointer-events: none !important;
        will-change: transform;
    }

    .srmmh__mobile-panel-head {
        position: sticky;
        top: 0;
        z-index: 4;
        min-height: 62px;
        padding: 8px 16px 8px 10px;
        display: grid;
        grid-template-columns: 46px 46px minmax(0, 1fr);
        align-items: center;
        gap: 9px;
        background: rgba(255, 255, 255, .97);
        border-bottom: 1px solid #e3e9ed;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .srmmh__mobile-back {
        width: 46px;
        height: 46px;
        margin: 0;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 8px;
        background: rgba(23, 168, 227, .08) !important;
        color: #17a8e3 !important;
        cursor: pointer;
    }

    .srmmh__mobile-back:hover,
    .srmmh__mobile-back:focus-visible,
    .srmmh__mobile-back:active {
        background: rgba(23, 168, 227, .14) !important;
        color: #0b7fae !important;
        outline: 0;
    }

    .srmmh__mobile-back svg {
        width: 20px;
        height: 20px;
    }

    .srmmh__mobile-back-chevron {
        transform: rotate(90deg);
    }

    .srmmh__mobile-panel-thumb {
        width: 46px;
        height: 46px;
        border-radius: 8px;
    }

    .srmmh__mobile-panel-thumb .srmm__cat-image {
        width: 42px !important;
        height: 42px !important;
        border-radius: 6px;
        object-fit: contain;
    }

    .srmmh__mobile-panel-thumb .srmm__fallback-icon {
        width: 24px;
        height: 24px;
        color: #17a8e3;
    }

    .srmmh__mobile-panel-title {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 7px;
        flex-wrap: wrap;
        color: #111;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.2;
    }

    .srmmh__mobile-view-all,
    .srmmh__mobile-section-all {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        color: #17a8e3 !important;
        font-weight: 700;
        text-decoration: none !important;
    }


    .srmmh__mobile-section-all:hover,
    .srmmh__mobile-section-all:focus-visible,
    .srmmh__mobile-section-all:active {
        color: #0b7fae !important;
        text-decoration: none !important;
        outline: 0;
    }

    .srmmh__mobile-section,
    .srmmh__mobile-leaf {
        border-bottom: 1px solid #e7edf1;
    }

    .srmmh__mobile-section-toggle,
    .srmmh__mobile-leaf {
        width: 100%;
        min-height: 62px;
        margin: 0;
        padding: 12px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        border: 0;
        border-radius: 0;
        background: #fff !important;
        color: #111 !important;
        text-align: left;
        text-decoration: none !important;
        cursor: pointer;
        transition: background-color .12s ease;
    }


    /* Directe categorieen zonder onderliggende keuzes krijgen dezelfde
       scheidingslijn als accordion-secties. Deze regel staat bewust na
       de algemene border-reset hierboven. */
    .srmmh__mobile-leaf {
        border-bottom: 1px solid #e7edf1;
    }

    .srmmh__mobile-section-toggle:hover,
    .srmmh__mobile-section-toggle:focus-visible,
    .srmmh__mobile-section-toggle:active,
    .srmmh__mobile-leaf:hover,
    .srmmh__mobile-leaf:focus-visible,
    .srmmh__mobile-leaf:active {
        background: rgba(23, 168, 227, .055) !important;
        color: #111 !important;
        outline: 0;
    }

    .srmmh__mobile-section-toggle[aria-expanded="true"] {
        background: rgba(23, 168, 227, .055) !important;
    }

    .srmmh__mobile-section-toggle[aria-expanded="true"] .srmmh__mobile-section-chevron {
        transform: rotate(180deg);
    }

    .srmmh__mobile-section-name {
        font-size: 15px;
        font-weight: 400;
        line-height: 1.25;
    }

    .srmmh__mobile-section-body {
        padding: 0 16px 15px;
        background: #fbfdfe;
        border-top: 1px solid rgba(23, 168, 227, .08);
        transform: translateZ(0);
    }

    .srmmh__mobile-section-all {
        min-height: 45px;
        padding: 11px 0;
        border-bottom: 1px solid #e9eef1;
        font-size: 13px;
    }

    .srmmh__mobile-links {
        display: grid;
        width: 100%;
    }

    .srmmh__mobile-link {
        min-height: 46px;
        padding: 10px 0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 7px;
        flex-wrap: wrap;
        border-bottom: 1px solid #eef2f4;
        color: #111 !important;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.3;
        text-decoration: none !important;
    }

    .srmmh__mobile-link:last-child {
        border-bottom: 0;
    }

    .srmmh__mobile-link:hover,
    .srmmh__mobile-link:focus-visible,
    .srmmh__mobile-link:active {
        color: #17a8e3 !important;
        text-decoration: none !important;
        outline: 0;
    }

    .srmmh__mobile-more {
        min-height: 40px;
        margin: 4px 0 0;
        padding: 8px 0 0;
        display: inline-flex;
        align-items: center;
        border: 0;
        background: transparent !important;
        color: #17a8e3 !important;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
    }

    .srmmh__mobile-more:hover,
    .srmmh__mobile-more:focus-visible {
        color: #0b7fae !important;
        text-decoration: underline;
        outline: 0;
    }

    /* v1.1.63 - rustige Toppy-achtige hulplinks onder de hoofdcategorieen.
       Alleen zichtbaar in de mobiele/tablet-hoofdlijst; geen thumbnails,
       chevrons of extra metadata. */
    .srmmh__mobile-utility {
        width: 100%;
        margin: 0;
        padding: 18px 0 30px;
        border-top: 0;
        background: #fff;
    }

    .srmmh__mobile-utility-link {
        width: 100%;
        min-height: 52px;
        padding: 0 16px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        background: #fff !important;
        color: #41484d !important;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.3;
        text-decoration: none !important;
        transition: background-color .12s ease, color .12s ease;
    }

    .srmmh__mobile-utility-link:hover,
    .srmmh__mobile-utility-link:focus-visible,
    .srmmh__mobile-utility-link:active {
        background: rgba(23, 168, 227, .045) !important;
        color: #17a8e3 !important;
        text-decoration: none !important;
        outline: 0;
    }

    .srmmh__mobile-utility-link.is-current {
        color: #17a8e3 !important;
        font-weight: 600;
    }

    .srmmh__mobile .srmm__badge {
        flex: 0 0 auto;
        min-height: 18px;
        padding: 0 7px 2px;
        border-radius: 4px;
        font-size: 10px;
        line-height: 1;
    }

}

@media (max-width: 560px) {
    .srmmh__mobile {
        --srmmh-mobile-brandbar-height: 60px;
    }

    .srmmh__mobile-brandbar {
        padding: 8px 12px 8px 14px;
    }

    .srmmh__mobile-brand-logo {
        width: min(170px, calc(100vw - 90px));
        max-height: 36px;
    }

    .srmmh__mobile-close {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .srmmh__mobile-close svg {
        width: 24px;
        height: 24px;
    }

    .srmmh__mobile-category {
        min-height: 62px;
        padding: 0 14px;
        grid-template-columns: 42px minmax(0, 1fr) 18px;
        gap: 11px;
    }

    .srmmh__mobile-thumb {
        width: 42px;
        height: 42px;
    }

    .srmmh__mobile-thumb .srmm__cat-image {
        width: 39px !important;
        height: 39px !important;
    }

    .srmmh__mobile-panel-head {
        padding-right: 14px;
    }

    .srmmh__mobile-section-toggle,
    .srmmh__mobile-leaf {
        padding-left: 14px;
        padding-right: 14px;
    }

    .srmmh__mobile-section-body {
        padding-left: 14px;
        padding-right: 14px;
    }

    .srmmh__mobile-utility-link {
        padding-left: 14px;
        padding-right: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .srmmh__mobile-panel,
    .srmmh__mobile-section-body,
    .srmmh__mobile-row-chevron,
    .srmmh__mobile-section-chevron {
        animation: none !important;
        transition: none !important;
    }
}

/* ========================================================================
 * v1.1.57 - Klantenservice paginamenu
 * [sr_klantenservice_menu]
 * Alleen mobiel/tablet. Hergebruikt de premium verticale drill-down styles
 * van het productmenu, maar leest de WordPress-paginahierarchie uit.
 * ====================================================================== */
.srmmcs {
    display: none !important;
}

@media (max-width: 900px) {
    .srmmcs {
        display: block !important;
        width: 100%;
        margin: 0;
        position: relative;
        z-index: 1;
        background: #fff;
    }

    .srmmcs .srmmh__mobile {
        display: grid !important;
    }

    .srmmcs .srmmh__mobile-category.is-current,
    .srmmcs .srmmh__mobile-leaf.is-current,
    .srmmcs .srmmh__mobile-section.is-current > .srmmh__mobile-section-toggle {
        background: rgba(23, 168, 227, .075) !important;
    }

    .srmmcs .srmmh__mobile-category.is-current .srmmh__mobile-category-name,
    .srmmcs .srmmh__mobile-leaf.is-current .srmmh__mobile-section-name,
    .srmmcs .srmmh__mobile-section.is-current .srmmh__mobile-section-name,
    .srmmcs .srmmcs__nested-link.is-current {
        color: #17a8e3 !important;
    }

    .srmmcs .srmmcs__nested-link {
        padding-left: calc(var(--srmmcs-depth, 0) * 14px);
        position: relative;
    }

    .srmmcs .srmmcs__nested-link[style*="--srmmcs-depth:1"],
    .srmmcs .srmmcs__nested-link[style*="--srmmcs-depth:2"],
    .srmmcs .srmmcs__nested-link[style*="--srmmcs-depth:3"],
    .srmmcs .srmmcs__nested-link[style*="--srmmcs-depth:4"] {
        font-size: 13.5px;
    }

    .srmmcs .srmmcs__nested-link.is-current {
        font-weight: 700;
    }

    .srmmcs .srmmcs__page-image {
        object-fit: cover !important;
    }

    .srmmcs .srmmcs__fallback-icon {
        color: #17a8e3;
    }
}

/* Wanneer de SR mobiele navigatie in een Flatsome/Magnific off-canvas staat,
   verberg de standaard close-knop al tijdens de eerste CSS-paint. Onze eigen
   knop blijft de native Flatsome close-actie aanroepen; er is dus maar één X. */
@media (max-width: 900px) {
    .mfp-wrap:has(.srmmh__mobile-brandbar) .mfp-close,
    .mfp-container:has(.srmmh__mobile-brandbar) .mfp-close,
    .mfp-content:has(.srmmh__mobile-brandbar) .mfp-close {
        display: none !important;
    }
}

/* ========================================================================
 * v1.1.67 - echte meerlaagse mobiele drill-down.
 * Gebouwd direct op v1.1.65: product-submenu's openen niet meer als accordion,
 * maar als een volledig volgend scherm. Elk paneel bewaart zijn eigen scroll.
 * ====================================================================== */
@media (max-width: 900px) {
    .srmmh__mobile-panels {
        position: relative;
        overflow: hidden;
        visibility: hidden;
        pointer-events: none;
        transform: none !important;
        background: #fff;
    }

    .srmmh__mobile.is-panel-open .srmmh__mobile-panels,
    .srmmh__mobile.is-transitioning .srmmh__mobile-panels {
        visibility: visible;
        transform: none !important;
    }

    .srmmh__mobile.is-panel-open .srmmh__mobile-panels {
        pointer-events: auto;
    }

    .srmmh__mobile.is-transitioning .srmmh__mobile-panels {
        pointer-events: none !important;
    }

    .srmmh__mobile-panel {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        background: #fff;
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        contain: layout paint;
    }

    .srmmh__mobile-drill-list {
        min-height: 0;
        background: #fff;
    }

    .srmmh__mobile-drill-item {
        font: inherit;
    }

    .srmmh__mobile-drill-item .srmmh__mobile-section-name {
        color: #111 !important;
    }

    /* Tijdens de overgang bewegen alleen compositor-lagen; geen height/opacity
       animaties en dus geen verticale layout-sprong in iOS Safari. */
    .srmmh__mobile.is-transitioning .srmmh__mobile-panel,
    .srmmh__mobile.is-transitioning .srmmh__mobile-list {
        will-change: transform;
        pointer-events: none !important;
    }
}


/* ========================================================================
 * v1.1.101 - vrij injecteerbaar WordPress-menu via [sr_custom_menu].
 * De markup blijft bewust dicht bij wp_nav_menu zodat menu-item-ID's,
 * current-menu-item en custom link-items later eenvoudig te targetten zijn.
 * ====================================================================== */
.srmm-custom-menu {
    position: relative;
    width: 100%;
    font: inherit;
}

.srmm-custom-menu__list,
.srmm-custom-menu__list .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.srmm-custom-menu__list a {
    color: inherit;
    text-decoration: none;
}

.srmm-custom-menu--horizontal > .srmm-custom-menu__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 24px;
}

.srmm-custom-menu--horizontal .menu-item {
    position: relative;
    margin: 0;
}

.srmm-custom-menu--horizontal > .srmm-custom-menu__list > .menu-item > a {
    display: flex;
    align-items: center;
    min-height: 40px;
    white-space: nowrap;
}

.srmm-custom-menu--horizontal .sub-menu {
    position: absolute;
    z-index: 99999;
    top: 100%;
    left: 0;
    min-width: 220px;
    padding: 8px 0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 6px, 0);
    transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
}

.srmm-custom-menu--horizontal .sub-menu .sub-menu {
    top: -8px;
    left: 100%;
}

.srmm-custom-menu--horizontal .menu-item:hover > .sub-menu,
.srmm-custom-menu--horizontal .menu-item:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
}

.srmm-custom-menu--horizontal .sub-menu a {
    display: block;
    padding: 9px 14px;
    white-space: nowrap;
}

.srmm-custom-menu--vertical > .srmm-custom-menu__list,
.srmm-custom-menu--vertical .sub-menu {
    display: flex;
    flex-direction: column;
}

.srmm-custom-menu--vertical > .srmm-custom-menu__list {
    gap: 2px;
}

.srmm-custom-menu--vertical .menu-item {
    margin: 0;
}

.srmm-custom-menu--vertical a {
    display: block;
    padding: 8px 0;
}

.srmm-custom-menu--vertical .sub-menu {
    padding-left: 18px;
}

.srmm-custom-menu .current-menu-item > a,
.srmm-custom-menu .current-menu-ancestor > a {
    font-weight: 700;
}


/* ========================================================================
 * v1.1.103 - responsive account menu shortcodes.
 * Desktop keeps the native Flatsome dropdown behavior, but visually follows
 * the clean white/blue SR horizontal mega-menu. Inside the Flatsome mobile
 * overlay the same shortcode becomes a full nested slide drill-down.
 * ====================================================================== */
.srmm-account-mobile {
    display: none !important;
}

.srmm-account-dropdown {
    outline: 0 !important;
    min-width: 290px !important;
    max-width: min(360px, calc(100vw - 24px));
    padding: 7px 0 !important;
    overflow: visible !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.srmm-account-dropdown li {
    position: relative;
    margin: 0 !important;
}

.srmm-account-dropdown li > a {
    min-height: 46px;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center;
    color: #111 !important;
    background: transparent !important;
    border: 0 !important;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.25;
    text-decoration: none !important;
    transition: color .12s ease, background-color .12s ease;
}

.srmm-account-dropdown li + li > a {
    border-top: 0 !important;
}

.srmm-account-dropdown li:hover > a,
.srmm-account-dropdown li:focus-within > a,
.srmm-account-dropdown .current-menu-item > a,
.srmm-account-dropdown .current-menu-ancestor > a {
    color: #0b7fae !important;
    background: rgba(23, 168, 227, .055) !important;
}

.srmm-account-dropdown .current-menu-item > a,
.srmm-account-dropdown .current-menu-ancestor > a {
    font-weight: 700;
}

.srmm-account-dropdown .sub-menu {
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

/* v1.1.112 - accountdropdown zonder tussenlijnen; login-CTA ruimer ingesprongen. */
.srmm-account-dropdown .srmm-account-auth {
    margin: 0 !important;
    padding: 10px 16px 7px !important;
    border-top: 0 !important;
    list-style: none !important;
}

.srmm-account-dropdown .srmm-account-auth__inner {
    width: 100%;
}

.srmm-account-dropdown .srmm-account-auth__login {
    width: 100%;
    min-height: 46px;
    margin: 0 !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    background: #7ebf00 !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: center;
    text-decoration: none !important;
    text-transform: none !important;
}

.srmm-account-dropdown .srmm-account-auth__login:hover,
.srmm-account-dropdown .srmm-account-auth__login:focus-visible,
.srmm-account-dropdown .srmm-account-auth__login:active {
    background: #7ebf00 !important;
    color: #fff !important;
    opacity: .92;
    outline: 0;
}

.srmm-account-dropdown .srmm-account-auth__register {
    margin: 10px 0 0;
    color: #333;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
}

.srmm-account-dropdown .srmm-account-auth__register a {
    color: #17a8e3 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

.srmm-account-dropdown .srmm-account-auto-item--logout > a {
    font-weight: 400 !important;
}

/* v1.1.110 - desktop Account is een pure dropdown-trigger. Een klik pint
   het menu open; buiten klikken of Escape sluit het weer. */
@media (min-width: 901px) {
    .account-item.srmm-account-menu-enabled > .header-button > [data-srmm-account-dropdown-trigger],
    .account-item.srmm-account-menu-enabled > [data-srmm-account-dropdown-trigger] {
        cursor: pointer;
    }

    .account-item.srmm-account-menu-enabled:hover > .srmm-account-dropdown,
    .account-item.srmm-account-menu-enabled.is-srmm-account-open > .srmm-account-dropdown {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translate3d(0, 0, 0) !important;
    }


    /* v1.1.119 - de vaste 2px-correctie staat bewust los van `transform`.
       Flatsome animeert `transform` bij hover-out; met de onafhankelijke
       `translate` property blijft deze offset in ieder animatieframe actief. */
    .account-item.srmm-account-menu-enabled > .srmm-account-dropdown--logged-out {
        translate: 0 -2px !important;
    }
}

@media (max-width: 900px) {
    .srmm-account-dropdown {
        display: none !important;
    }

    .srmm-account-mobile {
        display: none !important;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
        background: #fff;
        color: #111;
        font-family: inherit;
        -webkit-tap-highlight-color: transparent;
    }

    /* The shortcode is mobile only when it is actually placed in a Flatsome
       overlay/content area. The copy emitted inside element-account.php stays
       hidden on mobile, so it cannot expand below the header account icon. */
    .mfp-wrap .srmm-account-mobile,
    .mfp-content .srmm-account-mobile,
    .mobile-sidebar .srmm-account-mobile,
    .sidebar-menu .srmm-account-mobile,
    .off-canvas .srmm-account-mobile {
        display: grid !important;
        text-align: left !important;
    }

    .account-item > .srmm-account-mobile {
        display: none !important;
    }

    /* v1.1.108: dezelfde mobiele shell als [sr_woo_mega_menu_horizontal].
       Daardoor zijn logo, sluitknop, 60px merkbalk en drawerhoogte identiek. */
    .srmm-account-mobile.srmmh__mobile {
        grid-template-rows: var(--srmmh-mobile-brandbar-height) minmax(0, 1fr);
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        overflow: hidden;
        background: #fff;
    }

    .srmm-account-mobile__viewport {
        position: relative;
        grid-row: 2;
        grid-column: 1;
        width: 100%;
        min-width: 0;
        min-height: 0;
        height: 100%;
        max-height: none;
        overflow: hidden;
        background: #fff;
        isolation: isolate;
    }

    .srmm-account-mobile__screen {
        position: absolute;
        inset: 0;
        width: 100%;
        min-width: 0;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        background: #fff;
        transform: translate3d(100%, 0, 0);
        backface-visibility: hidden;
    }

    .srmm-account-mobile__screen--root,
    .srmm-account-mobile__screen.is-active {
        transform: translate3d(0, 0, 0);
    }

    .srmm-account-mobile__screen[hidden] {
        display: none !important;
    }

    .srmm-account-mobile__list {
        width: 100%;
        min-width: 0;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .srmm-account-mobile__item {
        width: 100%;
        min-width: 0;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        border-bottom: 1px solid #e7edf1;
    }

    .srmm-account-mobile__row {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        min-width: 0;
        min-height: 62px;
        margin: 0 !important;
        padding: 0 14px !important;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        color: #111 !important;
        font-family: inherit !important;
        font-size: 15px !important;
        font-weight: 400 !important;
        line-height: 1.25 !important;
        letter-spacing: normal !important;
        text-align: left;
        text-decoration: none !important;
        text-transform: none !important;
        cursor: pointer;
        touch-action: manipulation;
    }

    .srmm-account-mobile__row:hover,
    .srmm-account-mobile__row:focus-visible,
    .srmm-account-mobile__row:active {
        color: #0b7fae !important;
        background: rgba(23, 168, 227, .055) !important;
        outline: 0;
    }

    .srmm-account-mobile__label {
        min-width: 0;
        flex: 1 1 auto;
        color: inherit !important;
    }

    .srmm-account-mobile__item.current-menu-item > .srmm-account-mobile__row,
    .srmm-account-mobile__item.current-menu-ancestor > .srmm-account-mobile__row {
        color: #0b7fae !important;
        font-weight: 700 !important;
    }

    .srmm-account-mobile__chevron,
    .srmm-account-mobile__back-chevron {
        width: 20px;
        height: 20px;
        display: block;
        flex: 0 0 20px;
        color: #17a8e3;
    }

    .srmm-account-mobile__chevron {
        transform: rotate(-90deg);
    }

    .srmm-account-mobile__panel-head {
        position: sticky;
        top: 0;
        z-index: 5;
        width: 100%;
        min-height: 62px;
        padding: 8px 14px 8px 10px;
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        box-sizing: border-box;
        background: rgba(255, 255, 255, .97);
        border-bottom: 1px solid #e3e9ed;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .srmm-account-mobile__back {
        -webkit-appearance: none;
        appearance: none;
        width: 46px;
        height: 46px;
        margin: 0;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0 !important;
        border-radius: 8px;
        box-shadow: none !important;
        background: rgba(23, 168, 227, .08) !important;
        color: #17a8e3 !important;
        cursor: pointer;
    }

    .srmm-account-mobile__back:hover,
    .srmm-account-mobile__back:focus-visible,
    .srmm-account-mobile__back:active {
        background: rgba(23, 168, 227, .14) !important;
        color: #0b7fae !important;
        outline: 0;
    }

    .srmm-account-mobile__back-chevron {
        transform: rotate(90deg);
    }

    .srmm-account-mobile__panel-title {
        min-width: 0;
        color: #111;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.2;
    }

    .srmm-account-mobile__list--actions {
        border-top: 0;
    }

    .srmm-account-mobile__item--logout > .srmm-account-mobile__row {
        font-weight: 400 !important;
    }

    .srmm-account-mobile__auth {
        width: 100%;
        margin: 0;
        padding: 16px 8px 12px;
        box-sizing: border-box;
        border-top: 1px solid #e7edf1;
        background: #fff;
    }

    .srmm-account-mobile__login {
        width: 100%;
        min-height: 46px;
        margin: 0 !important;
        padding: 0 16px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        border: 0 !important;
        border-radius: 4px !important;
        box-shadow: none !important;
        background: #7ebf00 !important;
        color: #fff !important;
        font-family: inherit !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        text-align: center;
        text-decoration: none !important;
        text-transform: none !important;
    }

    .srmm-account-mobile__login:hover,
    .srmm-account-mobile__login:focus-visible,
    .srmm-account-mobile__login:active {
        background: #7ebf00 !important;
        color: #fff !important;
        opacity: .92;
        outline: 0;
    }

    .srmm-account-mobile__register {
        margin: 10px 0 0;
        color: #333;
        font-family: inherit;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.35;
    }

    .srmm-account-mobile__register a {
        color: #0b7fae !important;
        text-decoration: underline !important;
        text-underline-offset: 2px;
    }

    .srmm-account-mobile.is-transitioning {
        pointer-events: none;
    }
}

/* ========================================================================
 * v1.1.109 - eigen accountdrawer vanuit element-account-mobile.php.
 * De child-theme template hardcodet de juiste account-shortcode in een eigen
 * Flatsome/Magnific mobile-sidebar. Zo blijft #main-menu voor het normale
 * hamburger/productmenu en krijgt Account zijn eigen identieke drawer.
 * ====================================================================== */
@media (max-width: 900px) {
    #sr-account-menu-overlay.srmm-account-overlay {
        padding: 0 !important;
        overflow: hidden !important;
        background: #fff !important;
        text-align: left !important;
    }

    #sr-account-menu-overlay .srmm-account-overlay__inner {
        width: 100%;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        margin: 0;
        padding: 0 !important;
        overflow: hidden !important;
        background: #fff !important;
        text-align: left !important;
    }

    #sr-account-menu-overlay .srmm-account-mobile {
        width: 100%;
        height: 100vh;
        height: 100dvh;
        margin: 0 !important;
        text-align: left !important;
    }
}