/* ─── Header icons: shift down 10px at logo-left / icons-right layout ───── */
@media (min-width: 768px) {
    .header__actions { margin-top: 10px; }
}

/* ─── Splide pagination active dot: primary color instead of black ────────── */
.splide__pagination__page.is-active { background: #75539D !important; }

/* ─── Bootstrap primary color override ─────────────────────────────────────
   Replaces $primary: #75539D that was incorrectly placed in o3-theme SCSS.
   --bs-primary in :root is set by base.tpl <style> block via sPrimaryColor —
   this handles .text-primary, .bg-primary etc. Buttons need explicit vars:    */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #75539D;
    --bs-btn-border-color: #75539D;
    --bs-btn-hover-bg: #5f4380;
    --bs-btn-hover-border-color: #5f4380;
    --bs-btn-focus-shadow-rgb: 117, 83, 157;
    --bs-btn-active-bg: #5f4380;
    --bs-btn-active-border-color: #5f4380;
    --bs-btn-disabled-bg: #75539D;
    --bs-btn-disabled-border-color: #75539D;
}

/* ─── Topbar ─────────────────────────────────────────────────────────────── */
.header__topinfo {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
    height: 30px;
}
.header__topinfo a,
.header__topinfo .dropdown-toggle {
    color: #fff !important;
}
.header__topinfo .dropdown-toggle::after {
    border-top-color: #fff !important;
}
.header__topinfo svg {
    color: #fff;
}
.header__topinfo .languages,
.header__topinfo .currencies {
    display: none !important;
}
.header__topinfo .btn {
    padding-top: 0;
    padding-bottom: 0;
    height: 30px;
    display: flex;
    align-items: center;
}
.header__topinfo .flex-grow-1 p {
    margin-bottom: 0;
}
@media (min-width: 992px) {
    .header__topinfo {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
    }
    .header__topinfo > div:last-child {
        display: flex !important;
        justify-content: flex-end;
        grid-column: 3;
    }
}

/* ─── Mobile freeshipping bar (hidden at ≥992px) ─────────────────────────── */
.em-freeshipping-topbar {
    display: none;
}
@media (max-width: 991.98px) {
    .em-freeshipping-topbar {
        display: flex;
        width: 100%;
        min-height: 30px;
        background-color: var(--bs-primary);
        color: #fff;
        align-items: center;
        justify-content: flex-end;
        padding: 0 1rem;
        font-size: 0.875rem;
    }
}

.em-topbar-phone {
    display: none;
}
@media (min-width: 576px) and (max-width: 991.98px) {
    .em-topbar-phone {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-right: auto;
        color: inherit;
        text-decoration: none;
    }
}

/* ─── Banner layout ─────────────────────────────────────────────────────── */
.header__banner {
    flex: 1 1 100%;
    order: 1;
    overflow: hidden;
    position: relative;
    margin-top: -15px;
    margin-bottom: -10px;
    margin-left:  calc(-1 * var(--content-inner-margin, 0px));
    margin-right: calc(-1 * var(--content-inner-margin, 0px));
}
.header__banner picture {
    display: block;
}
.header__banner picture img {
    display: block;
    width: 100%;
    height: auto;
}
.header__banner-homelink {
    position: absolute;
    top: 0;
    left: 0;
    width: 22%;
    height: 100%;
    display: block;
    z-index: 1;
}

/* Banner replaces standalone logo in main header */
.header__logo {
    display: none !important;
}

/* Actions (order 4) appear RIGHT of search (order 3) */
.header__banner ~ .header__actions { order: 4; }
.header__banner ~ .header__search  { order: 3; }

/* Minimal header (checkout etc.): hide banner, restore logo */
header.is-minimal .header__banner { display: none !important; }
header.is-minimal .header__logo   { display: flex !important; }

/* Below lg (992px): switch to standard header; restore mobile flex layout */
@media (max-width: 991px) {
    .header__banner { display: none !important; }
    .header__banner ~ .header__logo {
        display: flex !important;
        order: 1;
        flex: 1 1 calc(49% - 10px);
    }
    .header__banner ~ .header__actions {
        order: 2;
        flex: 1 1 calc(50% - 10px);
    }
    .header__banner ~ .header__search {
        order: 3;
        flex: 1 1 100%;
        margin: 0;
    }
}

/* ─── Banner overlay graphics ───────────────────────────────────────────── */
.header__slogan1,
.header__slogan2 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: auto;
    display: none;
    pointer-events: none;
}
.header__slogan1 {
    left: 30%;
    width: 40%;
}
.header__slogan2 {
    right: 2%;
    width: 20%;
}
@media (min-width: 992px) {
    .header__slogan1 { display: block; }
}
@media (min-width: 992px) {
    .header__slogan2 { display: block; }
}

/* ─── Manufacturer section ───────────────────────────────────────────────── */
.start__manufacturer {
    padding-bottom: 0.5rem;
}

/* Featured products section heading */
.start__featured-label {
    background-image: none;
    font-family: 'Amatic SC', cursive;
    font-weight: 700;
    font-size: 1.75rem;
    color: #75539D;
    padding: calc(0.25rem + 10px) 0 calc(0.25rem + 10px) calc(var(--content-inner-margin, 0px) + 5px);
    margin-left: calc(-2 * var(--content-inner-margin, 0px));
    margin-bottom: 0.75rem;
    line-height: 1.2;
}
@media (min-width: 576px) {
    .start__featured-label { font-size: 2.25rem; background-size: 80%; }
}
@media (min-width: 768px) {
    .start__featured-label { font-size: 2.75rem; background-size: 80%; }
}
@media (max-width: 992px) {
    .start__featured-label { margin-bottom: 4px; }
}
@media (max-width: 575.98px) {
    .start__featured-label { padding-bottom: 0; margin-bottom: 0; }
}
@media (min-width: 992px) {
    .start__featured-label { font-size: 3rem; background-image: url('../img/yellow-stripe.png'); background-repeat: no-repeat; background-size: 65%; background-position: left center; }
@media (min-width: 1720px) {
    .start__featured-label { background-size: 50%; }
}
}
.component__productslider:has(.start__featured-label) { margin-top: -40px; }
body.cl-start .component__productslider { margin-bottom: 30px; }
body.cl-start .component__productslider:has(.start__featured-label) .component__productbox-frame { border: none; border-radius: 0; }
@media (min-width: 992px) and (max-width: 1399.98px) {
    .component__productslider:has(.start__featured-label) { margin-top: -30px; }
}
@media (min-width: 1400px) {
    .component__productslider:has(.start__featured-label) { margin-top: -20px; }
}

.component__rating[style*="visibility:hidden"] { display: none; }
.tab-content { margin-bottom: 30px; }
.details { margin-bottom: 40px; }
body.cl-details > main > .container-xxl { padding-bottom: 15px; }
body.cl-details .details__picture-thumbnails { margin-left: 0; margin-right: 0; }
body.cl-details .details__picture-main img { width: auto; }
@media (pointer: coarse) {
    body.cl-details .details__picture-main .splide__arrow { display: none; }
    body.cl-details .details__picture-thumbnails .splide__arrow { display: none; }
}
#offcanvas__basket .offcanvas__basket-costs { flex-wrap: nowrap; }
#offcanvas__basket .offcanvas__basket-costs > *:first-child { width: auto; flex: 1; }
#offcanvas__basket .offcanvas__basket-costs > *:nth-child(2) { width: auto; white-space: nowrap; }
#offcanvas__basket .alert-success {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: #333;
}
.component__productbox-title { margin-bottom: 4px; }
.component__productbox-price.mt-2 { margin-top: 4px !important; }

/* Roboto v30 - self-hosted */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../font/roboto-v30-latin-300.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url('../font/roboto-v30-latin-300italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../font/roboto-v30-latin-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../font/roboto-v30-latin-italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../font/roboto-v30-latin-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url('../font/roboto-v30-latin-500italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../font/roboto-v30-latin-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('../font/roboto-v30-latin-700italic.woff2') format('woff2');
}

body {
    overflow-x: hidden;
    overscroll-behavior-x: none;
}
#offcanvas__mainnav,
#offcanvas__mainnav .offcanvas-body {
    overflow-x: hidden;
    overscroll-behavior-x: none;
}
@media (max-width: 991.98px) {
    .splide__arrow--prev { left: 0; }
    .splide__arrow--next { right: 0; }
    .details__picture-thumbnails .splide__arrow--prev { left: -20px; }
    .details__picture-thumbnails .splide__arrow--next { right: -20px; }
}
.page-item.disabled > span {
    display: block;
    padding: var(--bs-pagination-padding-y) 0.4rem;
    color: var(--bs-pagination-disabled-color);
}

/* Override Inter with Roboto as body font */
:root {
    --bs-body-font-family: 'Roboto', -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

/* Amatic SC -- category sidebar font */
@font-face {
    font-family: 'Amatic SC';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../font/amatic-sc-v24-latin-700.woff2') format('woff2');
}

/* Category sidebar container */
#emnavigation {
    position: absolute;
    left: 0;
    top: 160px;
    width: 370px;
    background-color: #fff;
    border-right: 1px solid #cbc8c7;
    border-bottom: 1px solid #cbc8c7;
    z-index: 998;
    display: none;
    visibility: hidden;
    max-height: calc(100vh - 160px);

    overflow: visible;
}
body.cl-start #emnavigation {
    display: block;
}

.emnavipoint {
    position: relative;
    border-bottom: 1px solid #e8e4e0;
    background-color: #fff;
}
.emnavipoint__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 16px 6px 20px;
    cursor: pointer;
}
.emnavipoint__link {
    font-family: 'Amatic SC', cursive;
    font-size: 1.9rem;
    font-weight: 700;
    color: #75539D;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1.2;
    flex: 1;
}
.emnavipoint__link:hover { color: #5c3f7a; text-decoration: none; }

.emnavipoint__chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 50%;
    border: 1px solid #cbc8c7;
    color: #888;
    background: #fff;
}
.emnavipoint__chevron-right { display: none; }
.emnavipoint.is-open > .emnavipoint__row .emnavipoint__chevron-down { display: none; }
.emnavipoint.is-open > .emnavipoint__row .emnavipoint__chevron-right { display: block; }
.emnavipoint.is-open > .emnavipoint__row { background-color: #f8f6f6; }

.emnavipoint__subnavi {
    display: none;
    position: absolute;
    left: 370px;
    top: 0;
    width: 300px;
    background: #fff;
    border: 1px solid #d5d4d3;
    box-shadow: 4px 4px 12px rgba(0,0,0,0.08);
    z-index: 999;
    padding-bottom: 16px;
    max-height: calc(100vh - 160px);

}
.emnavipoint.is-open > .emnavipoint__subnavi { display: block; }

.emnavipoint__subnavi-head {
    padding: 20px 20px 12px;

    margin-bottom: 8px;
}
.emnavipoint__subnavi-head a {
    font-family: 'Amatic SC', cursive;
    font-size: 1.6rem;
    font-weight: 700;
    color: #75539D;
    text-transform: uppercase;
    text-decoration: none;
}

.emnavipoint__subnavi-link {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 0.9375rem;
    color: #333;
    padding: 5px 20px;
    text-decoration: none;
    line-height: 1.4;
}
.emnavipoint__subnavi-link:hover,
.emnavipoint__subnavi-link--active {
    background-color: #f8f6f6;
    color: #75539D;
    text-decoration: none;
}

#emnavigation.em-nav-ready { visibility: visible; }




/* Mobile: hide sidebar, let burger nav handle it */
@media (max-width: 991px) {
    body.cl-start #emnavigation {
        display: none !important;
    }
}

/* Only the promoslider banner shifts right to clear the sidebar */
@media (min-width: 992px) {
    body.cl-start .start__promoslider {
        margin-left: calc(370px - var(--bs-gutter-x, 1.5rem) / 2);
    }
}



/* Nav width reduced at smaller desktop breakpoints */
@media (max-width: 1719.98px) {
    #emnavigation { width: 290px; }
    .emnavipoint__subnavi { left: 290px; }
    body.cl-start .start__promoslider { margin-left: calc(290px - var(--bs-gutter-x, 1.5rem) / 2); }
}
@media (max-width: 1399.98px) {
    #emnavigation { width: 250px; }
    .emnavipoint__subnavi { left: 250px; }
    body.cl-start .start__promoslider { margin-left: calc(250px - var(--bs-gutter-x, 1.5rem) / 2); }
}


/* Desktop burger: 992-1719px only */
.em-burger-xxl { display: none; }
@media (min-width: 992px) and (max-width: 1719.98px) {
    .em-burger-xxl                    { display: flex; }
    body.cl-start #emnavigation       { display: none !important; }
    body.cl-start .start__promoslider { margin-left: calc(-1 * var(--content-inner-margin, 0px)); }
}

@media (max-width: 991.98px) {
    body.cl-start .start__promoslider { margin-left: calc(-1 * var(--content-inner-margin, 0px)); }
}

#emnavigation { margin-top: 10px; }

@media (min-width: 1720px) {
    .start__manufacturer .grid { --bs-columns: 12; }
    .start__manufacturer-box { height: 105px; }
}



#emnavigation { border-right: none; border-bottom: none; }

body.cl-start main .container-xxl { padding-top: 10px; padding-bottom: 20px; background-color: #fff; }

.start__manufacturer .grid { gap: 0.5rem !important; }

body.xxxl-enabled .start__manufacturer { padding-top: 0.5rem; }

body.has-bg-image .start__manufacturer { padding-left: 0.5rem; padding-right: 0.5rem; }

.component__productslider .splide__progress { display: none; }

/* \xe2\x94\x80\xe2\x94\x80\xe2\x94\x80 PLP category heading \xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80 */
.cl-alist h1.title-big,
.cl-manufacturerlist h1.title-big,
.cl-vendorlist h1.title-big {
    font-family: 'Amatic SC', cursive;
    font-weight: 700;
    font-size: 3rem;
    color: var(--accent-color);
    line-height: 1.2;
}
@media (max-width: 767.98px) {
    .cl-alist h1.title-big,
    .cl-manufacturerlist h1.title-big,
    .cl-vendorlist h1.title-big {
        font-size: 2.25rem;
    }
}



/* \xe2\x94\x80\xe2\x94\x80\xe2\x94\x80 PLP tile grids: align left edge with heading \xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80 */
@media (min-width: 576px) {
    .cl-alist .alist__orga .d-flex,
    .cl-manufacturerlist .alist__orga .d-flex,
    .cl-vendorlist .alist__orga .d-flex {
        margin-left: -10px;
        margin-right: -10px;
    }
    .cl-alist [data-listing="productList"],
    .cl-manufacturerlist [data-listing="productList"],
    .cl-vendorlist [data-listing="productList"] {
        margin-left: -10px;
    }
}

.cl-alist .alist__orga,
.cl-manufacturerlist .alist__orga,
.cl-vendorlist .alist__orga {
    margin-bottom: 50px !important;
}

.alist__bottomlocator { margin-bottom: 30px; }

.cl-alist .categoryDescription,
.cl-manufacturerlist .categoryDescription,
.cl-vendorlist .categoryDescription { color: #555; }

.cl-alist .categoryDescription a,
.cl-manufacturerlist .categoryDescription a,
.cl-vendorlist .categoryDescription a { color: inherit; }

.cl-alist .alist__orga .component__productbox-frame,
.cl-manufacturerlist .alist__orga .component__productbox-frame,
.cl-vendorlist .alist__orga .component__productbox-frame {
    background-color: #f5f5f5;
}

/* ── emfooter seotext ────────────────────────────────────────────── */
.emfooter__seotext {
    background: #fff;
    padding: 40px 0 20px;
}
/* ─── Content pages: softer text color matching PLP category description ─── */
.cl-content .page-header,
.cmsContent { color: #555; }
.cmsContent a { color: inherit; }

.emfooter__seotext-inner {
    margin-bottom: 8px;
    max-height: 16em;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, black 88%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 88%, transparent 100%);
    color: #555;
}
.emfooter__seotext-more { color: var(--primary-color); }

/* container-xxl in main: white background prevents the body background image from bleeding through gaps */
body.has-bg-image main .container-xxl { background: #fff; }

/* ── footer wrapper ──────────────────────────────────────────────── */
footer.emfooter {
    background: transparent !important;
    padding: 0;
}
footer.emfooter .container-xxl {
    background: #fff !important;
    border-top: 1px solid #e0e0e0;
    padding-top: 30px;
    padding-bottom: 20px;
}

/* ── rows & cols ─────────────────────────────────────────────────── */
.emfooter__row { margin-bottom: 10px; }
.emfooter__col { padding-bottom: 20px; }
@media (min-width: 576px) {
    .emfooter__col { flex: 0 0 auto; width: 33.333333%; }
}

/* ── box ─────────────────────────────────────────────────────────── */
.emfooter__box {
    background: #f5f5f5;
    border: 1px solid #d8d8d8;
    height: 100%;
    padding: 15px;
    box-sizing: border-box;
}
.emfooter__box-headline {
    font-weight: 700;
    font-size: 0.88rem;
    text-align: center;
    border-bottom: 1px solid #d8d8d8;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

/* ── service link items ──────────────────────────────────────────── */
.emfooter__servicelist { display: flex; flex-direction: column; }
.emfooter__serviceitem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 10px;
    border-bottom: 1px solid #d7d4d1;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--primary-color);
    text-decoration: none;
}
.emfooter__serviceitem::after {
    content: 203A;
    font-size: 1.3rem;
    color: #bbb;
    line-height: 1;
}
.emfooter__serviceitem:hover {
    background: #ede8f5;
    color: var(--primary-color);
}
.emfooter__serviceitem--bold { font-weight: 700; }

/* ── Order hotline ───────────────────────────────────────────────── */
.emfooter__hotline-intro { margin-bottom: 10px; font-size: 0.9rem; }
.emfooter__hotline-time { font-weight: 700; margin-bottom: 4px; font-size: 0.9rem; }
.emfooter__hotline-phone { margin-bottom: 15px; font-size: 0.9rem; }
.emfooter__opinion {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}
.emfooter__opinion-img {
    width: 160px;
    flex-shrink: 0;
    object-fit: cover;
    align-self: flex-start;
}
.emfooter__opinion-text { min-width: 0; }
@media (max-width: 991.98px) {
    .emfooter__opinion { flex-direction: column; }
    .emfooter__opinion-img { width: 100%; max-width: 160px; }
}
.emfooter__opinion-headline {
    display: block;
    margin-bottom: 6px;
    font-size: 0.88rem;
}
.emfooter__opinion-text { font-size: 0.82rem; }
.emfooter__opinion-text p { margin-bottom: 4px; }
.emfooter__opinion-text .btn { margin-top: 8px; font-size: 0.8rem; }

/* ── banners ─────────────────────────────────────────────────────── */
.emfooter__banners {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-bottom: 14px;
}
.emfooter__banners a { flex: 1; }
.emfooter__banner-img {
    width: 100%;
    height: auto;
    display: block;
}

/* ── social icons ────────────────────────────────────────────────── */
.emfooter__social { display: flex; gap: 6px; flex-wrap: wrap; }
.emfooter__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    border-radius: 4px;
    width: 36px;
    height: 34px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--primary-color);
    flex-shrink: 0;
}
.emfooter__social-link:hover { opacity: 0.8; }

/* ── DPD shipping ────────────────────────────────────────────────── */
.emfooter__delivery { font-size: 0.9rem; }
.emfooter__delivery p { margin-bottom: 6px; }
.emfooter__dpd-logo { max-width: 140px; display: block; margin: 10px 0; }
.emfooter__dpd-btn { display: inline-block; margin: 8px 0 12px; font-size: 0.82rem; }
.emfooter__delivery-links { margin-top: 12px; font-size: 0.82rem; }
.emfooter__delivery-links a { color: var(--primary-color); }

/* ── payment grid ────────────────────────────────────────────────── */
.emfooter__payment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.emfooter__payment-grid a {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d8d8d8;
    padding: 6px;
    min-height: 52px;
}
.emfooter__payment-grid img { max-width: 100%; height: auto; }

/* ── back-to-top ─────────────────────────────────────────────────── */
.emtotop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
}
.emtotop a {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    color: #fff;
    width: 46px;
    height: 30px;
    border-top: 4px solid var(--secondary-color);
    font-size: 0.9rem;
    text-decoration: none;
}
.emtotop a:hover { background: #5f4380; }

/* ── fixed social sidebar ────────────────────────────────────────── */
.emfooter__social-fixed {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1050;
    display: none;
    flex-direction: column;
}
@media (min-width: 1440px) {
    .emfooter__social-fixed { display: flex; }
}
.emfooter__social-fixed .emfooter__social-link {
    border-radius: 8px 0 0 8px;
    box-shadow: -2px 2px 8px rgba(0,0,0,0.25);
    border: none;
    border-bottom: 2px solid rgba(255,255,255,0.3);
    width: 44px;
    height: 50px;
}
.emfooter__social-fixed .emfooter__social-link:last-child { border-bottom: none; }
.emfooter__social-fixed svg { width: 22px; height: 22px; }

/* ── responsive: 2-column payment grid below LG ─────────────────── */
@media (max-width: 991.98px) {
    .emfooter__payment-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── responsive: stack below 576px ──────────────────────────────── */
@media (max-width: 575.98px) {
    .emfooter__opinion { flex-direction: column; }
    .emfooter__opinion-img { width: 100%; max-width: 180px; }
}

/* ─── Recipe world section ──────────────────────────────────────────────── */

/* Homepage teaser */
.emrecipe__teaser {
    position: relative;
    z-index: 1;
    padding: 25px 0;
    margin-bottom: 1.5rem;
    background-color: #fff;
    border-top: 1px solid #e9ecef;
}
.emrecipe__teaser-col-text { padding-top: 14px; }
@media (max-width: 992px) { .emrecipe__teaser-col-text { padding-top: 11px; } }
.emrecipe__teaser-title {
    font-size: 1.125rem;
    font-weight: 400;
    color: #888;
    margin: 0;
}
.emrecipe__teaser-link {
    color: var(--primary-color, #75539D);
    font-size: 1.125rem;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
}
.emrecipe__teaser-link:hover { text-decoration: underline; }
.emrecipe__teaser-img {
    border-radius: 4px;
    width: 100%;
    height: auto;
}
.emrecipe__teaser-desc { color: #555; margin-bottom: 1.5rem; }
.emrecipe__teaser-desc p { margin-bottom: 0; }
.emrecipe__teaser-desc h2 { font-size: 1.75rem; }
/* show the leading <hr> from DB as separator below the header row */
.emrecipe__teaser-desc > hr:first-child { border-color: #dee2e6; margin: 1rem 0; }
.emrecipe__teaser-more {
    color: #555;
    font-weight: 400;
    text-decoration: none;
    display: block;
    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    padding: 0.5rem 0;
    margin-top: 0.25rem;
}
.emrecipe__teaser-more:hover { text-decoration: underline; }

/* Recipe list page */
.emrecipe__group-tabs { border-bottom: 2px solid var(--primary-color, #75539D); }
.emrecipe__group-tabs .nav-link { color: #555; }
.emrecipe__group-tabs .nav-link.active {
    color: var(--primary-color, #75539D);
    border-color: var(--primary-color, #75539D) var(--primary-color, #75539D) #fff;
    font-weight: 600;
}
.emrecipe__list-title { font-size: 1.75rem; font-weight: 700; }
.emrecipe__list-desc { color: #555; }
.cl-emgiftideaslist .component__productbox-frame { background-color: #f5f5f5; }

.emrecipe__card {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    transition: box-shadow .15s;
    color: inherit;
}
.emrecipe__card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.emrecipe__card-img {
    height: 200px;
    object-fit: cover;
    border-radius: 6px 6px 0 0;
}
.emrecipe__card-title { font-size: 1rem; font-weight: 600; color: #222; }
.emrecipe__card-desc { font-size: .875rem; color: #555; }
.emrecipe__card-footer {
    background: transparent;
    border-top: 1px solid #eee;
    padding: .5rem 1rem;
}
.emrecipe__card-link { color: var(--primary-color, #75539D); font-weight: 600; font-size: .875rem; }

/* Recipe detail page */
.emrecipe__detail-nav { margin-bottom: 1rem; }
.emrecipe__nav-group { font-size: .875rem; }
.emrecipe__main-img { border-radius: 6px; object-fit: cover; }
.emrecipe__thumbs { margin-top: .5rem; }
.emrecipe__thumb-img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 4px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color .15s;
}
.emrecipe__thumb-img:hover { border-color: var(--primary-color, #75539D); }
.emrecipe__detail-title { font-size: 1.5rem; font-weight: 700; }
.emrecipe__detail-desc { color: #333; line-height: 1.65; white-space: pre-line; }
.emrecipe__ext-link { margin-top: .5rem; }

/* Product table */
.emrecipe__products-title { font-weight: 700; }
.emrecipe__product-thumb {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 4px;
}
.emrecipe__product-title { font-weight: 500; color: #222; text-decoration: none; }
.emrecipe__product-title:hover { color: var(--primary-color, #75539D); }
.emrecipe__product-artnum { font-size: .8rem; }
.emrecipe__product-price { font-weight: 600; }
.emrecipe__qty { flex-wrap: nowrap; }
.emrecipe__qty-input { min-width: 0; }
.emrecipe__qty-input:focus {
    border-color: #888;
    box-shadow: 0 0 0 0.15rem rgba(0,0,0,0.15);
}
.emrecipe__all-row td { vertical-align: middle; padding-top: 15px !important; }
.emrecipe__detail .btn { border-radius: 0; }
.emrecipe__products-table th,
.emrecipe__products-table td { padding: 6px 8px; }
.emrecipe__products-table td:nth-child(2),
.emrecipe__products-table th:nth-child(2) { min-width: 80px; word-break: break-word; }
.emrecipe__products-table tfoot tr td { border-bottom: none; }

@media (max-width: 575.98px) {

    .emrecipe__card-img { height: 160px; }
    .emrecipe__products-table { font-size: .85rem; }
}

/* Roboto is wider than Inter (o3-theme default): fix input width, shrink text,
   compensate vertical padding so button height stays identical */
.component__productbox-quickadd .component__tobasket-input {
    flex: 0 0 31px;
    width: 31px;
    min-width: 0;
    background-color: #f4f4f4;
    border: 1px solid #f4f4f4;
    color: #000;
}
.component__productbox-quickadd .component__tobasket-submit {
    padding: 6px 8px;
}
.component__productbox-quickadd .component__tobasket-submit span {
    padding: 0 4px;
}

/* ─── Font resize: footer elements not covered by _resize.css ───────────────
   _resize.css targets p/span/li but not <a> tags; div targets only get 101-103%.
   These rules override that so footer text scales properly with font resize.
   Specificity note: body.class + div.class = 0,2,1 (matches _resize.css div rule).
   Since emo3theme.css loads later, equal-specificity !important rules here win. ── */
body.mbw-bf-resize-font-120 a.emfooter__serviceitem,
body.mbw-bf-resize-font-120 div.emfooter__box-headline,
body.mbw-bf-resize-font-120 div.emfooter__hotline-time,
body.mbw-bf-resize-font-120 div.emfooter__hotline-phone { font-size: 120% !important; }

body.mbw-bf-resize-font-130 a.emfooter__serviceitem,
body.mbw-bf-resize-font-130 div.emfooter__box-headline,
body.mbw-bf-resize-font-130 div.emfooter__hotline-time,
body.mbw-bf-resize-font-130 div.emfooter__hotline-phone { font-size: 130% !important; }

body.mbw-bf-resize-font-140 a.emfooter__serviceitem,
body.mbw-bf-resize-font-140 div.emfooter__box-headline,
body.mbw-bf-resize-font-140 div.emfooter__hotline-time,
body.mbw-bf-resize-font-140 div.emfooter__hotline-phone { font-size: 140% !important; }

/* ─── Grayscale mode: filter on content, not body (preserves position:fixed) ── */
body.mbw-bf-grayscale {
    filter: none;
}
body.mbw-bf-grayscale > header,
body.mbw-bf-grayscale > nav:not(#mbw-bf-toolbar),
body.mbw-bf-grayscale > main,
body.mbw-bf-grayscale > footer,
body.mbw-bf-grayscale > #pswp,
body.mbw-bf-grayscale > #emsocialshareright,
body.mbw-bf-grayscale > #emtotop,
body.mbw-bf-grayscale > #usercentrics-root {
    filter: grayscale(100%);
}