/* The storefront must never expose a document-level horizontal scrollbar.
       `clip` contains off-canvas controls without creating a scroll container,
       preserving the sticky header and intentional inner carousels/tabs. */
    html,
    body {
        max-width: 100%;
        overflow-x: clip;
    }
    /* Keep the Page Builder section full width. Slick is initialized on the
       nested product list, never on this outer container; treating the outer
       element as an uninitialized carousel collapses it to one 320px column. */
    html body :is(.special-offers-container,.special-offer-container,.offer-of-the-day-container) {
        box-sizing: border-box;
        min-width: 0;
        width: 100%;
    }
    html body :is(.special-offers-container,.special-offer-container,.offer-of-the-day-container)
        :is(.block.widget,.products-grid,.products.wrapper) {
        box-sizing: border-box;
        min-width: 0;
        width: 100%;
    }
    /* Contained PageBuilder rows already provide the canonical homepage
       desktop gutter. Legacy 24px margins on the nested section headings and
       Brands widget applied a second inset, so lower sections no longer lined
       up with the hero/category outer edges. Normalize only homepage desktop;
       the existing 16/24px phone/tablet rules remain authoritative. */
    @media (min-width: 1025px) {
        #html-body.cms-index-index :is(
            .special-offers-text-wrapper,
            .special-offers-container,
            .special-offer-container,
            .offer-of-the-day-container,
            .brands-widget,
            .brands-widget-container
        ) {
            box-sizing: border-box;
            max-width: 100%;
            width: 100%;
        }
        #html-body.cms-index-index :is(.special-offers-text-wrapper,.brands-widget-container) {
            margin-right: 0 !important;
            margin-left: 0 !important;
        }
        /* Desktop used two different card gutters: 24px up to 1199px and 6px
           above it. Keep one 6px half-gap at every desktop width, then give the
           clipping viewport the matching symmetric bleed. The first/last card
           borders meet the canonical row edge while adjacent cards retain a
           12px gap. */
        #html-body.cms-index-index .sdwidget-product-carousel .slick-track > .slick-slide {
            margin-right: 6px !important;
            margin-left: 6px !important;
        }
        #html-body.cms-index-index .sdwidget-product-carousel.slick-slider > .slick-list {
            margin-right: -6px !important;
            margin-left: -6px !important;
            max-width: none !important;
            width: calc(100% + 12px) !important;
        }
    }
    /* Render one correctly sized offer card while the nested product list is
       waiting for Slick. This avoids both a raw multi-row flash and a narrow
       first paint without changing the section's available width. */
    html body :is(.special-offers-container,.special-offer-container,.offer-of-the-day-container)
        :is(.product-items,.products.list.items):not(.slick-initialized) {
        display: grid;
        grid-template-columns: minmax(230px, 320px);
        min-height: 360px;
        overflow: hidden;
        width: 100%;
    }
    html body :is(.special-offers-container,.special-offer-container,.offer-of-the-day-container)
        :is(.product-items,.products.list.items):not(.slick-initialized) > .product-item:not(:first-child) {
        display: none !important;
    }
    html body :is(.special-offers-container,.special-offer-container,.offer-of-the-day-container)
        :is(.product-items,.products.list.items):not(.slick-initialized) > .product-item:first-child {
        display: block;
        width: 100% !important;
        max-width: 320px;
        margin: 0 !important;
    }
    /* Form labels describe their controls and should not compete visually with
       section headings. This also overrides legacy bold labels consistently. */
    #html-body #maincontent form label,
    #html-body #maincontent .fieldset label {
        font-weight: 400 !important;
    }
    /* The complete desktop account menu fits naturally in one panel. Let the
       document handle short viewports instead of putting a narrow scrollbar
       between the company name and Log Out. Mobile remains a full-height panel. */
    @media (min-width: 768px) {
        html body .my-account-content .header.links {
            max-height: none !important;
            overflow: visible !important;
            scrollbar-gutter: auto !important;
        }
        /* Keep every localized hero description inside the copy side of the
           artwork so longer translations never cover the worker's face. */
        #html-body .hero-banner.col-3-layout .pagebuilder-column-line > *:first-child
            .pagebuilder-poster-content p {
            box-sizing: border-box;
            max-width: 620px;
            width: 54%;
        }
    }
    /* The native Subject select is intentionally hidden by the theme until its
       custom dropdown is created. Reserve the final control height in the head
       CSS so the field never collapses or overlaps the message during startup. */
    html body.mgzfaq-contacts-form .mgz-faq-post-form-category {
        box-sizing: border-box;
        min-height: 58px;
        position: relative;
    }
    html body.mgzfaq-contacts-form .mgz-faq-post-form-category > label {
        pointer-events: none;
        z-index: 2;
    }
    /* Keep the last row/pager visually attached to the catalog rather than to
       the footer. This applies to the server-rendered list and remains in
       place when ElasticSuite replaces the product region through AJAX. */
    html body:is(.page-products, .catalogsearch-result-index) main.page-main {
        padding-bottom: clamp(40px, 5vw, 72px);
    }
    html body:is(.page-products, .catalogsearch-result-index) .toolbar-products:last-child {
        margin-bottom: 0;
    }
    @media (max-width: 767px) {
        html body:is(.page-products, .catalogsearch-result-index) main.page-main {
            padding-bottom: 40px;
        }
    }
    /* Keep the bottom product-list pager and its page-size control inside the
       phone viewport. Magento renders a desktop-length page frame on the
       server, so phones retain the current page, its direct neighbours and
       previous/next navigation while wider screens keep the complete frame. */
    @media (max-width: 767px) {
        html body :is(.page-products, .recent-products-index,
            .catalogsearch-result-index, .csmarketplace-vshops-view,
            .csmarketplace-vshops-index) .toolbar-products:last-child {
            align-items: center;
            display: grid !important;
            gap: 8px;
            grid-template-columns: minmax(0, 1fr) auto;
            justify-content: initial;
            max-width: 100%;
            min-width: 0;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            width: 100%;
        }
        html body :is(.page-products, .recent-products-index,
            .catalogsearch-result-index, .csmarketplace-vshops-view,
            .csmarketplace-vshops-index) .toolbar-products:last-child .pages {
            grid-column: 1;
            grid-row: 1;
            justify-self: start;
            margin: 0;
            max-width: 100%;
            min-width: 0;
            width: auto;
        }
        html body :is(.page-products, .recent-products-index,
            .catalogsearch-result-index, .csmarketplace-vshops-view,
            .csmarketplace-vshops-index) .toolbar-products:last-child .pages-items {
            display: inline-flex;
            max-width: 100%;
            min-width: 0;
            vertical-align: middle;
        }
        html body :is(.page-products, .recent-products-index,
            .catalogsearch-result-index, .csmarketplace-vshops-view,
            .csmarketplace-vshops-index) .toolbar-products:last-child .pages .item {
            align-items: center;
            display: inline-flex;
            flex: 0 0 auto;
            justify-content: center;
            min-width: 32px;
            padding: 8px 9px;
        }
        html body :is(.page-products, .recent-products-index,
            .catalogsearch-result-index, .csmarketplace-vshops-view,
            .csmarketplace-vshops-index) .toolbar-products:last-child .limiter {
            gap: 6px;
            grid-column: 2;
            grid-row: 1;
            justify-self: end;
            margin: 0;
            min-width: 0;
            white-space: nowrap;
        }
        html body :is(.page-products, .recent-products-index,
            .catalogsearch-result-index, .csmarketplace-vshops-view,
            .csmarketplace-vshops-index) .toolbar-products:last-child .limiter > .label {
            margin: 0;
            max-width: 64px;
            line-height: 1.15;
            overflow-wrap: anywhere;
            text-align: right;
            white-space: normal;
        }
        html body :is(.page-products, .recent-products-index,
            .catalogsearch-result-index, .csmarketplace-vshops-view,
            .csmarketplace-vshops-index) .toolbar-products:last-child .limiter-options {
            box-sizing: border-box;
            min-width: 68px;
            padding-left: 12px !important;
            padding-right: 32px !important;
            width: 68px;
        }
    }
    @media (max-width: 479px) {
        html body :is(.page-products, .recent-products-index,
            .catalogsearch-result-index, .csmarketplace-vshops-view,
            .csmarketplace-vshops-index) .toolbar-products:last-child .pages-items > .item:not(.current):not(.pages-item-previous):not(.pages-item-next) {
            display: none;
        }
        html body :is(.page-products, .recent-products-index,
            .catalogsearch-result-index, .csmarketplace-vshops-view,
            .csmarketplace-vshops-index) .toolbar-products:last-child .pages-items > .item:has(+ .current),
        html body :is(.page-products, .recent-products-index,
            .catalogsearch-result-index, .csmarketplace-vshops-view,
            .csmarketplace-vshops-index) .toolbar-products:last-child .pages-items > .current + .item:not(.pages-item-next) {
            display: inline-flex;
        }
    }
    /* Lossless desktop portraits. Keep existing PNG and mobile artwork fallbacks. */
    @media (min-width: 992px) {
        .customer-register-popup .left-image {
            background-image: image-set(
                url("../images/signup/portrait.webp") type("image/webp"),
                url("../images/signup/portrait.png") type("image/png")
            );
        }
        .popup-block-customer-login-forgot .left-image {
            background-image: image-set(
                url("../images/forgot-password/portrait.webp") type("image/webp"),
                url("../images/forgot-password/portrait.png") type("image/png")
            );
        }
    }
    /* One flat button treatment; keep card/popup shadows and keyboard outlines. */
    html body :is(button, input[type='button'], input[type='submit'], input[type='reset'],
        a.button, a.btn, a.action.primary, a.action.secondary, a[class*='pagebuilder-button-'], [role='button']),
    html body :is(button, a.button, a.btn, a.action.primary, a.action.secondary, [role='button'])::before,
    html body :is(button, a.button, a.btn, a.action.primary, a.action.secondary, [role='button'])::after {
        box-shadow: none !important;
        text-shadow: none !important;
    }
    html body :is(button, input[type='button'], input[type='submit'], input[type='reset'],
        a.button, a.btn, a.action.primary, a.action.secondary, a[class*='pagebuilder-button-'], [role='button']):focus-visible {
        outline: 2px solid #1E99A4 !important;
        outline-offset: 3px;
    }
    /* Cover both the field wrapper and control borders, including fractional
       pixels at browser zoom levels. Header search sizing is separate. */
    body .field .custom-dropdown:not(.search-category-select) .options-list,
    body.mgzfaq-contacts-form .mgz-faq-post-form-category .custom-dropdown .options-list {
        left: -4px;
        width: calc(100% + 8px);
        max-width: calc(100vw - 16px);
        box-sizing: border-box;
        background-color: #fff;
    }
    body .field:has(> .custom-dropdown.open),
    body .field:has(> .control > .custom-dropdown.open),
    body.mgzfaq-contacts-form .mgz-faq-post-form-category:has(.custom-dropdown.open) {
        position: relative;
        z-index: 6;
    }
    /* A category label and its count form one link, including the brackets. */
    .filter-options-content .items a:is(:hover, :focus-visible) {
        color: #1E99A4 !important;
    }
    .filter-options-content .items a:is(:hover, :focus-visible) :is(.count, .category-label-tail, span),
    .filter-options-content .items a:is(:hover, :focus-visible) .count::before,
    .filter-options-content .items a:is(:hover, :focus-visible) .count::after {
        color: inherit !important;
    }
    /* Keep the real brand name selectable; the legacy CMS uses generated text. */
    #html-body .hero-banner .xbau-warmup-brand {
        visibility: visible;
        -webkit-user-select: text;
        user-select: text;
    }
    #html-body .hero-banner .xbau-warmup-brand::before {
        content: none;
        display: none;
    }
    /* Duplicate only the photographic layer, never scale the copy or the frame. */
    .hero-banner .pagebuilder-banner-wrapper:is([data-background-images*="Sakret_Banner"], [data-background-images*="Warmup_Banner"]) {
        position: relative;
        overflow: hidden;
        isolation: isolate;
    }
    .hero-banner .pagebuilder-banner-wrapper:is([data-background-images*="Sakret_Banner"], [data-background-images*="Warmup_Banner"])::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: inherit;
        background-position: inherit;
        background-size: inherit;
        background-repeat: no-repeat;
        pointer-events: none;
        transform: scale(1);
        transform-origin: 75% 70%;
        transition: transform 700ms cubic-bezier(.2,.65,.3,1);
        z-index: -1;
    }
    @media (hover: hover) and (pointer: fine) {
        .hero-banner .pagebuilder-banner-wrapper:is([data-background-images*="Sakret_Banner"], [data-background-images*="Warmup_Banner"]):hover::before {
            transform: scale(1.04);
        }
    }
    @media (prefers-reduced-motion: reduce) {
        .hero-banner .pagebuilder-banner-wrapper:is([data-background-images*="Sakret_Banner"], [data-background-images*="Warmup_Banner"])::before {
            transition: none;
            transform: none !important;
        }
    }
    .page-header .search-autocomplete {
        max-width: calc(100vw - 24px);
        max-height: 60vh;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        background: #fff;
        -webkit-overflow-scrolling: touch;
    }
    .page-header .search-autocomplete .autocomplete-list {
        gap: 12px;
        padding: 18px 22px;
        margin: 0;
    }
    .page-header .search-autocomplete .autocomplete-list + .autocomplete-list { border-top: 1px solid #eee; }
    .page-header .search-autocomplete .autocomplete-list-title { margin: 0 0 4px; }
    .page-header .search-autocomplete dd { min-height: 32px; cursor: pointer; }
    .page-header .search-autocomplete .product-primary { text-transform: none; }
    .page-header .search-autocomplete dd.selected { background-color: #f0f8f9; }
    .page-header .search-autocomplete .qs-option-name { overflow-wrap: anywhere; }
    .page-header .search-autocomplete dd:has(.category-mini-crumb) {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .page-header .search-autocomplete .category-mini-crumb {
        width: 100%;
        font-size: 12px;
        line-height: 1.4;
        font-style: normal;
    }
    body.csmarketplace-vshops-index .category-image {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    body.csmarketplace-vshops-index .category-image img {
        display: block;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
        object-position: center center;
    }
    .catalog-category-view .columns > .xbau-brand-banner {
        display: block;
        clear: both;
        float: none;
        width: 100%;
        aspect-ratio: 5 / 1;
        margin: 0 0 40px;
        overflow: hidden;
        border-radius: 16px;
        grid-column: 1 / -1;
    }
    .xbau-brand-banner img { display: block; width: 100%; height: auto; }
    .catalog-category-view .columns > .xbau-brand-banner-single,
    .catalog-category-view .columns > .xbau-brand-banner-composed {
        position: relative;
        isolation: isolate;
        min-height: 180px;
        border: 1px solid rgba(30, 153, 164, .16);
        background:
            linear-gradient(112deg, #fff 0%, #f8fbfb 48%, rgba(30, 153, 164, .12) 100%);
        box-shadow: 0 14px 38px rgba(77, 77, 79, .08);
    }
    .xbau-brand-banner-single img.xbau-brand-banner-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }
    /* The supplied Albau artwork is 3:1 while this existing brand slot stays
       5:1. Anchor its intentional crop near the top so the helmet, face and
       corrected logo remain visible instead of cutting through both ends. */
    .xbau-brand-banner-albau img.xbau-brand-banner-image {
        object-position: center 15%;
    }
    .xbau-brand-banner-albau img.xbau-brand-banner-face-retouch {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 15%;
        pointer-events: none;
        -webkit-mask-image: radial-gradient(ellipse 3% 11% at 70% 19%, #000 55%, transparent 100%);
        mask-image: radial-gradient(ellipse 3% 11% at 70% 19%, #000 55%, transparent 100%);
    }
    .xbau-brand-banner-single picture {
        display: block;
        width: 100%;
        height: 100%;
    }
    .xbau-brand-banner-composed::before,
    .xbau-brand-banner-composed::after {
        content: '';
        position: absolute;
        z-index: -1;
        border-radius: 50%;
        border: 1px solid rgba(30, 153, 164, .14);
    }
    .xbau-brand-banner-composed::before {
        width: 280px;
        height: 280px;
        right: 3%;
        top: -105px;
    }
    .xbau-brand-banner-composed::after {
        width: 190px;
        height: 190px;
        right: 19%;
        bottom: -110px;
    }
    .xbau-brand-banner-composed .xbau-brand-banner-shape {
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(90deg, transparent 0 54%, rgba(255,255,255,.34) 54% 55%, transparent 55%);
    }
    .xbau-brand-banner-composed img.xbau-brand-banner-background {
        position: absolute;
        inset: 0;
        z-index: -2;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .xbau-brand-banner-composed img.xbau-brand-banner-logo {
        position: absolute;
        left: clamp(28px, 6vw, 86px);
        top: 50%;
        width: auto;
        max-width: min(34%, 420px);
        max-height: 52%;
        transform: translateY(-50%);
        object-fit: contain;
    }
    .xbau-brand-banner-composed img.xbau-brand-banner-product {
        position: absolute;
        right: clamp(28px, 9vw, 145px);
        bottom: 0;
        width: auto;
        max-width: 36%;
        height: 90%;
        object-fit: contain;
        object-position: center bottom;
        filter: drop-shadow(0 12px 14px rgba(77, 77, 79, .14));
    }
    .xbau-brand-banner-koelner img.xbau-brand-banner-logo {
        box-sizing: content-box;
        padding: 16px 20px;
        border-radius: 12px;
        background: #4D4D4F;
    }
    .xbau-brand-banner-olejnik::before,
    .xbau-brand-banner-olejnik .xbau-brand-banner-shape {
        display: none;
    }
    .xbau-brand-banner-olejnik::after {
        display: block;
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        border: 0;
        border-radius: 0;
        background: linear-gradient(90deg, rgba(5,5,6,.94) 0%, rgba(5,5,6,.68) 28%, rgba(5,5,6,.08) 58%, transparent 100%);
    }
    .xbau-brand-banner-olejnik img.xbau-brand-banner-background {
        object-position: center 54%;
    }
    .xbau-brand-banner-olejnik img.xbau-brand-banner-logo {
        box-sizing: content-box;
        left: clamp(26px, 4.5vw, 70px);
        max-width: min(18%, 225px);
        max-height: 58%;
        padding: 12px 16px;
        border: 1px solid rgba(255,255,255,.16);
        border-radius: 12px;
        background: rgba(0,0,0,.34);
        filter: drop-shadow(0 8px 18px rgba(0,0,0,.4));
    }
    .catalog-category-view .columns > .xbau-brand-banner-warmup {
        background: #f5efe7;
    }
    .xbau-brand-banner-warmup img.xbau-brand-banner-image {
        object-position: center center;
    }
    @media (max-width: 767px) {
        .catalog-category-view .columns > .xbau-brand-banner-single,
        .catalog-category-view .columns > .xbau-brand-banner-composed {
            aspect-ratio: 5 / 1;
            min-height: 0;
            margin-bottom: 28px;
            border-radius: 14px;
        }
        .xbau-brand-banner-composed img.xbau-brand-banner-logo {
            left: 22px;
            max-width: 42%;
            max-height: 48%;
        }
        .xbau-brand-banner-composed img.xbau-brand-banner-product {
            right: 12px;
            max-width: 45%;
            height: 86%;
        }
        .xbau-brand-banner-koelner img.xbau-brand-banner-logo {
            max-width: 34%;
            padding: 10px 12px;
        }
        .xbau-brand-banner-olejnik::after {
            background: linear-gradient(90deg, rgba(5,5,6,.9) 0%, rgba(5,5,6,.54) 40%, rgba(5,5,6,.06) 70%, transparent 100%);
        }
        .xbau-brand-banner-olejnik img.xbau-brand-banner-background {
            object-position: 59% 54%;
        }
        .xbau-brand-banner-olejnik img.xbau-brand-banner-logo {
            left: 14px;
            max-width: 28%;
            max-height: 52%;
            padding: 8px 10px;
        }
        .xbau-brand-banner-warmup img.xbau-brand-banner-image {
            object-position: left center;
        }
        .xbau-brand-banner-composed::before { right: -90px; }
    }
    /* Pagination and drawer arrows use the shared Xbau interaction color
       without changing their hit area, background or geometry. */
    body .pages .item:not(.current) > a,
    body .pages .item:not(.current) > a span,
    body .pages .action::before,
    .main-menu-wrapper .menu-item.has-children:not(.child-active) > .title::after {
        transition: color .18s ease, border-color .18s ease;
    }
    .main-menu-wrapper .menu-item.has-children > .title::after {
        border-color: var(--xbau-side-menu-arrow-color, #4D4D4F) !important;
        border-style: solid;
        border-width: 2px 2px 0 0;
        box-sizing: border-box;
        content: "" !important;
        display: block !important;
        flex: 0 0 10px;
        height: 10px;
        margin-left: auto;
        transform: rotate(45deg);
        width: 10px;
    }
    .main-menu-wrapper .menu-item.has-children > .title.xbau-side-menu-arrow-ready::after {
        content: none !important;
        display: none !important;
    }
    .main-menu-wrapper .menu-item.has-children:is(:hover,:focus-within,.active,.child-active) > .title,
    .main-menu-wrapper .menu-item.has-children > .title:is(:hover,:focus-visible),
    .main-menu-wrapper .menu-item.has-children > .title[aria-expanded='true'] {
        --xbau-side-menu-arrow-color: #1E99A4;
    }
    /* This real SVG control is deliberately defined in the late head block as
       well as the navigation bundle. It remains visible after the compiled
       theme and third-party menu CSS have been applied. */
    html body .main-menu-wrapper .menu-item.has-children > .title {
        align-items: center;
        display: flex;
        gap: 12px;
        justify-content: space-between;
    }
    html body .main-menu-wrapper .menu-item.has-children > .title > .xbau-side-menu-arrow {
        color: #4D4D4F !important;
        display: inline-flex !important;
        flex: 0 0 24px;
        height: 24px;
        margin-left: auto;
        opacity: 1 !important;
        visibility: visible !important;
        width: 24px;
    }
    html body .main-menu-wrapper .menu-item.has-children > .title > .xbau-side-menu-arrow svg {
        display: block !important;
        height: 24px;
        width: 24px;
    }
    html body .main-menu-wrapper .menu-item.has-children > .title > .xbau-side-menu-arrow path {
        fill: currentColor !important;
    }
    body .pages .item:not(.current) > a:is(:hover,:focus-visible),
    body .pages .item:not(.current) > a:is(:hover,:focus-visible) span,
    body .pages .action:is(:hover,:focus-visible)::before {
        color: #1E99A4 !important;
    }
    html body .main-menu-wrapper .menu-item.has-children:is(:hover,:focus-within,.active,.child-active) > .title > .xbau-side-menu-arrow,
    html body .main-menu-wrapper .menu-item.has-children > .title[aria-expanded='true'] > .xbau-side-menu-arrow {
        color: #1E99A4 !important;
    }
    body .page-footer .footer.content {
        margin-top: 0;
        padding-top: 80px !important;
    }
    body .page-footer .footer-container {
        margin-bottom: 80px;
    }
    body .product-item .action.towishlist:hover,
    body .product-item .action.towishlist:focus-visible,
    body .product-info-main .action.towishlist:hover,
    body .product-info-main .action.towishlist:focus-visible {
        color: #1E99A4 !important;
    }
    body .product-item .action.towishlist:hover::after,
    body .product-item .action.towishlist:focus-visible::after,
    body .product-info-main .action.towishlist:hover::after,
    body .product-info-main .action.towishlist:focus-visible::after {
        color: #1E99A4 !important;
    }
    /* Subtle, layout-safe feedback for all Xbau and brand marks. */
    .brands-widget-container .brand-logo-box img,
    a.logo img,
    .xbau-footer-logo img {
        transform: scale(1);
        transform-origin: center;
        transition: transform .2s ease-in-out;
        will-change: transform;
    }
    @media (hover: hover) {
        .brands-widget-container .brand-logo-box a:hover img,
        .brands-widget-container .brand-logo-box a:focus-visible img,
        a.logo:hover img,
        a.logo:focus-visible img,
        .xbau-footer-logo:hover img,
        .xbau-footer-logo:focus-visible img {
            transform: scale(1.05);
        }
    }
    /* Match the Help Centre search control to the 56px header search. */
    body.mgz-faq .faq-searchform .block-block-content {
        box-sizing: border-box;
        position: relative;
    }
    body.mgz-faq .faq-searchform input[type='text'] {
        box-sizing: border-box;
        height: 56px !important;
        width: calc(100% - 28px) !important;
        padding: 0 44px 0 18px !important;
        border: 1px solid #BDBDBD !important;
        border-right: 0 !important;
        border-radius: 12px 0 0 12px !important;
        color: #4D4D4F !important;
        box-shadow: none !important;
    }
    /* Explicit shared typography avoids the header's native input font and the
       FAQ module's inherited font rendering the same hint differently. */
    body .page-header .block-search .field.search input[type='text'],
    body.mgz-faq .faq-searchform input[type='text'] {
        font-family: 'Montserrat', sans-serif !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        font-style: normal !important;
        line-height: 24px !important;
        letter-spacing: normal !important;
        color: #4D4D4F !important;
    }
    body .page-header .block-search .field.search input[type='text']::placeholder,
    body.mgz-faq .faq-searchform input[type='text']::placeholder {
        font-family: 'Montserrat', sans-serif !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        font-style: normal !important;
        letter-spacing: normal !important;
        color: #9C9EA1 !important;
        opacity: 1 !important;
    }
    .catalog-product-view .xbau-additional-attributes {
        color: #4D4D4F;
        margin: 0;
    }
    .catalog-product-view .xbau-additional-attributes .xbau-attribute-row {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 0.4em;
        margin: 0 0 10px;
    }
    .catalog-product-view .xbau-additional-attributes dt,
    .catalog-product-view .xbau-additional-attributes dd {
        margin: 0;
        padding: 0;
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }
    .catalog-product-view .xbau-additional-attributes strong {
        font-weight: 700;
    }
    .custom-dropdown.sorter-options.open .options-list {
        height: auto !important;
        max-height: var(--xbau-sorter-space, none);
        box-sizing: border-box;
        transition: visibility 0.1s ease-in-out;
    }
    .custom-dropdown.sorter-options .options-list li {
        flex: 0 0 auto;
        max-height: none;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .custom-dropdown:focus-visible {
        outline: 2px solid #1E99A4;
        outline-offset: 2px;
    }
    .custom-dropdown .options-list li.keyboard-active {
        color: #1E99A4 !important;
        background-color: #f0f8f9;
    }
    .custom-dropdown .options-list li[aria-disabled='true'] {
        opacity: .5;
        cursor: not-allowed;
    }
    body.mgz-faq .faq-searchform input[type='text']:focus {
        border-color: #1E99A4 !important;
        border-radius: 12px 0 0 12px !important;
    }
    body.mgz-faq .faq-searchform #buttom-submit-search {
        box-sizing: border-box;
        width: 56px !important;
        height: 56px !important;
        min-width: 56px;
        padding: 0 !important;
        top: 0 !important;
        right: 0 !important;
        border: 0 !important;
        border-radius: 12px !important;
        background: #1E99A4 !important;
        overflow: hidden;
        transition: background-color .2s ease-in-out;
    }
    body.mgz-faq .faq-searchform #buttom-submit-search::before {
        display: flex !important;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 56px !important;
        height: 56px !important;
        padding: 0 !important;
        top: 0 !important;
        right: 0 !important;
        border-radius: 12px !important;
        background: #1E99A4 !important;
        color: #fff !important;
        content: '\e91a' !important;
        font-family: 'sakret-icons' !important;
        font-size: 24px !important;
        font-weight: 400 !important;
        line-height: 1;
        transition: background-color .2s ease-in-out;
    }
    body.mgz-faq .faq-searchform #buttom-submit-search:hover,
    body.mgz-faq .faq-searchform #buttom-submit-search:focus-visible,
    body.mgz-faq .faq-searchform #buttom-submit-search:hover::before,
    body.mgz-faq .faq-searchform #buttom-submit-search:focus-visible::before {
        background: #4D4D4F !important;
    }
    body.mgz-faq .faq-searchform #buttom-submit-search::after {
        width: 26px !important;
        height: 26px !important;
        top: 15px !important;
        left: 15px !important;
    }
    /* End the input's border under the opaque centre of the 56px button,
       never behind its outer rounded corners. Do not clip the form: hints,
       validation messages and keyboard focus must remain visible. */
    body .faq-form .faq-search {
        box-sizing: border-box;
        width: calc(100% - 28px) !important;
        padding-right: 44px !important;
        border-right: 0 !important;
        border-radius: 12px 0 0 12px !important;
    }
    body .faq-form .faq-form-submit-button {
        box-sizing: border-box;
        top: 0;
        right: 0;
        width: 56px;
        height: 56px;
        border: 0;
        border-radius: 12px;
        background: #1E99A4;
    }
    body .faq-form .faq-form-submit-button:hover,
    body .faq-form .faq-form-submit-button:focus-visible {
        background: #4D4D4F;
    }
    body.mgz-faq .faq-searchform #buttom-submit-search:focus-visible,
    body .faq-form .faq-form-submit-button:focus-visible {
        outline: 2px solid #4D4D4F;
        outline-offset: 3px;
    }
    /* Legal and policy content always uses the Xbau dark grey text palette. */
    body.xbau-legal-page .page-main {
        color: #4D4D4F !important;
    }
    body.xbau-legal-page .page-main :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, th, td, label, legend, strong, b, em),
    body.xbau-legal-page .page-main :where(input, select, textarea) {
        color: #4D4D4F !important;
    }
    body.xbau-legal-page .page-main :where(input, textarea)::placeholder {
        color: #9C9EA1 !important;
        opacity: 1;
    }
    /* Text-link hover palette: dark to teal, teal to dark grey. */
    a.xbau-link-dark:hover,
    a.xbau-link-dark:focus-visible,
    a.xbau-link-dark:hover > span,
    a.xbau-link-dark:focus-visible > span {
        color: #1E99A4 !important;
    }
    a.xbau-link-accent:hover,
    a.xbau-link-accent:focus-visible,
    a.xbau-link-accent:hover > span,
    a.xbau-link-accent:focus-visible > span {
        color: #4D4D4F !important;
    }
    /* The side-navigation close mark keeps its size and changes only colour. */
    body .page-header .header.content > .close-icon svg path {
        transition: fill .2s ease-in-out;
    }
    body .page-header .header.content > .close-icon:is(:hover,:focus-visible) svg path {
        fill: #4D4D4F !important;
    }
    /* Slick clips the carousel viewport horizontally. A small vertical inset
       keeps the 1px card borders inside that clipping edge at every scale. */
    #html-body .product-items.slick-slider > .slick-list {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }
    /* Page Builder product carousels share one compact, rounded arrow control.
       Hidden/disabled Slick controls keep their native accessibility state. */
    #html-body .product-items.slick-slider > button.slick-arrow:not(.slick-hidden) {
        display: flex !important;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0 !important;
        position: absolute !important;
        top: 50% !important;
        border: 1px solid rgba(156, 158, 161, .34) !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, .94) !important;
        box-shadow: 0 4px 14px rgba(77, 77, 79, .10) !important;
        color: #9C9EA1 !important;
        font-size: 0 !important;
        transform: translateY(-50%) !important;
        transition: border-color .2s ease-in-out, color .2s ease-in-out, background-color .2s ease-in-out !important;
        z-index: 3;
    }
    #html-body .product-items.slick-slider > button.slick-arrow:not(.slick-hidden)::before {
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
        background: currentColor !important;
        color: inherit !important;
        content: '' !important;
        display: block !important;
        height: 18px;
        width: 18px;
        opacity: 1 !important;
    }
    #html-body .product-items.slick-slider > button.slick-prev:not(.slick-hidden)::before {
        transform: rotate(180deg);
    }
    #html-body .product-items.slick-slider > button.slick-arrow:not(.slick-hidden):is(:hover,:focus-visible) {
        border-color: #1E99A4 !important;
        background: #fff !important;
        color: #1E99A4 !important;
        box-shadow: 0 4px 14px rgba(77, 77, 79, .10) !important;
        transform: translateY(-50%) !important;
    }
    #html-body .product-items.slick-slider > button.slick-arrow.slick-hidden {
        display: none !important;
    }
    /* Keep text CTAs consistent with the homepage hero without resizing icon-only controls. */
    body .action.primary:not(.search):not(.tocart),
    body.catalog-product-view .box-tocart .action.tocart,
    body .pagebuilder-button-primary,
    body .my-account-toggle-login,
    #html-body .hero-banner.col-3-layout .btn-column a,
    body .action.secondary,
    body .pagebuilder-button-secondary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        min-height: 50px;
        padding: 12px 24px !important;
        border-radius: 12px !important;
        font-family: inherit;
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 22px !important;
        text-align: center;
        text-decoration: none !important;
        transition: background-color .2s ease-in-out, border-color .2s ease-in-out, color .2s ease-in-out !important;
    }
    body .action.primary:not(.search):not(.tocart):hover,
    body .action.primary:not(.search):not(.tocart):focus-visible,
    body.catalog-product-view .box-tocart .action.tocart:hover,
    body.catalog-product-view .box-tocart .action.tocart:focus-visible,
    body .pagebuilder-button-primary:hover,
    body .pagebuilder-button-primary:focus-visible,
    body .my-account-toggle-login:hover,
    body .my-account-toggle-login:focus-visible,
    #html-body .hero-banner.col-3-layout .btn-column a:not(.xbau-about-button):hover,
    #html-body .hero-banner.col-3-layout .btn-column a:not(.xbau-about-button):focus-visible {
        background-color: #1E99A4 !important;
        border-color: #1E99A4 !important;
        color: #4D4D4F !important;
        box-shadow: none !important;
    }
    body .action.primary:not(.search):not(.tocart):hover span,
    body .action.primary:not(.search):not(.tocart):focus-visible span,
    body.catalog-product-view .box-tocart .action.tocart:hover span,
    body.catalog-product-view .box-tocart .action.tocart:focus-visible span,
    body .pagebuilder-button-primary:hover span,
    body .pagebuilder-button-primary:focus-visible span {
        color: #4D4D4F !important;
    }
    body .action.secondary:hover,
    body .action.secondary:focus-visible,
    body .pagebuilder-button-secondary:hover,
    body .pagebuilder-button-secondary:focus-visible,
    #html-body .hero-banner.col-3-layout .btn-column a.xbau-about-button:hover,
    #html-body .hero-banner.col-3-layout .btn-column a.xbau-about-button:focus-visible {
        background-color: transparent !important;
        border-color: #4D4D4F !important;
        color: #4D4D4F !important;
        box-shadow: none !important;
    }
    /* Legacy product-page rules put the bold weight on the nested label, so
       the button could still look different even when the button itself used
       the shared Xbau typography. */
    body.catalog-product-view .box-tocart .action.tocart span {
        color: inherit !important;
        font: inherit !important;
    }
    body.catalog-product-view .box-tocart .action.tocart span::before {
        color: inherit !important;
        transition: color .2s ease-in-out;
    }

    /* At 768-991px the desktop header tried to fit two full navigation rows,
       Help Center, shipping country and language into one tablet viewport.
       Keep the useful controls, let search breathe, and use the existing All
       drawer instead of a duplicate horizontal category menu. */
    @media (min-width: 768px) and (max-width: 991px) {
        body .page-header .panel.header {
            box-sizing: border-box;
            min-height: 72px;
            padding: 12px 20px;
        }
        body .page-header .panel.header .logo {
            flex: 0 0 125px;
        }
        body .page-header .panel.header .logo img {
            max-height: 36px;
        }
        body .page-header .panel.header :is(.help-center,.country-shipping,.switcher-language) {
            display: none !important;
        }
        body .page-header .block-search {
            box-sizing: border-box;
            max-width: none;
            padding: 0 0 0 20px;
        }
        body .page-header .header.content {
            box-sizing: border-box;
            min-height: 72px;
            padding: 0 20px;
        }
        body .page-header .rootmenu.desktop-menu {
            display: none !important;
        }
        body .page-header .open-menu {
            margin-right: 20px;
        }
        body .page-header .seller {
            margin: 0 auto 0 0;
        }
        body .page-header .seller .seller-link {
            white-space: nowrap;
        }
    }
    @media (max-width: 991px) {
        /* Icon actions keep a stable 44px touch target without changing their
           artwork size or hover geometry. */
        body .products-grid .product-item :is(.action.tocart,.action.towishlist) {
            box-sizing: border-box;
            min-width: 44px;
            width: 44px;
        }
    }
    @media (max-width: 767px) {
        body { --xbau-mobile-gutter: 16px; }

        /* Keep the menu, logo and profile control in one stable row. The
           controls are anchored to the header itself so the announcement
           opening/closing cannot move them independently of the logo. */
        body .page-header,
        body .page-header .panel.wrapper,
        body .page-header .panel.header,
        body .page-header .header.content {
            box-sizing: border-box;
            width: 100%;
            max-width: 100%;
        }
        body .page-header .panel.header {
            min-height: 76px;
            padding: 22px 60px !important;
            justify-content: center;
        }
        body .page-header .panel.header > .logo {
            width: auto;
            max-width: 140px;
            margin: 0 auto !important;
        }
        body .page-header .panel.header > .logo img {
            display: block;
            width: auto;
            max-width: 100%;
            max-height: 32px;
        }
        body .page-header .header.content .open-menu,
        body .page-header .my-account .my-account-toggle {
            box-sizing: border-box;
            position: absolute !important;
            top: auto !important;
            bottom: 16px !important;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            min-width: 44px;
            height: 44px;
            min-height: 44px;
            margin: 0 !important;
            padding: 0 !important;
            border: 0 !important;
        }
        body .page-header .header.content .open-menu {
            left: 12px !important;
        }
        body .page-header .my-account .my-account-toggle {
            right: 12px !important;
        }
        body .page-header .header.content .open-menu svg {
            width: 30px;
            height: 30px;
            min-width: 30px;
            flex: 0 0 30px;
        }

        /* Mobile product pages use the same readable type scale and generous
           control geometry as the checkout rather than inheriting compact
           desktop values. */
        body.catalog-product-view .product-info-main .page-title-wrapper .page-title {
            margin-bottom: 14px;
            font-size: 22px;
            line-height: 30px;
        }
        body.catalog-product-view .product-info-main .product.attribute.sku {
            margin-top: 14px;
            margin-bottom: 14px;
            line-height: 22px;
        }
        body.catalog-product-view .product-info-main .box-tocart .fieldset {
            row-gap: 18px;
        }
        body.catalog-product-view .product-info-main .box-tocart .control-qty {
            width: 144px !important;
            min-height: 56px;
            flex: 0 0 144px;
        }
        body.catalog-product-view .product-info-main .box-tocart .control-qty input {
            box-sizing: border-box;
            width: 100% !important;
            height: 56px;
            padding-inline: 46px;
        }
        body.catalog-product-view .product-info-main .box-tocart .control-qty .qty-controls {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
        }
        body.catalog-product-view .product-info-main #product-addtocart-button {
            min-height: 54px;
        }
        body.catalog-product-view .product.info.detailed .data.item.title > .switch {
            box-sizing: border-box;
            display: flex;
            align-items: center;
            min-height: 52px;
            padding-top: 14px;
            padding-bottom: 14px;
            line-height: 22px;
        }

        /* Two dependable text lines keep product cards aligned without
           squeezing long names against the price/action row. */
        body.catalog-category-view .products-grid .product-item-name,
        body.catalogsearch-result-index .products-grid .product-item-name {
            min-height: 44px;
            margin-top: 8px;
            margin-bottom: 8px;
            font-size: 16px;
            line-height: 22px;
        }
        body.catalog-category-view .products-grid .product-item-name .product-item-link,
        body.catalogsearch-result-index .products-grid .product-item-name .product-item-link {
            line-height: inherit;
        }

        /* The home PageBuilder hero was the only main surface using a wider
           24px phone inset. Match it to catalog, brand and account pages. */
        #html-body .hero-banner.col-3-layout {
            --xbau-mobile-hero-gap: 40px;
            box-sizing: border-box;
            padding-right: var(--xbau-mobile-gutter) !important;
            padding-left: var(--xbau-mobile-gutter) !important;
        }
        /* PageBuilder may render the hero columns through either a column-line
           or a column-group wrapper. Detect the promo column by its structure
           (two sibling banners), not by mutable media filenames, and normalize
           both the main-to-promo and promo-to-promo gaps. */
        #html-body .hero-banner.col-3-layout
        :is(.pagebuilder-column-line,.pagebuilder-column-group):has(>
        *:last-child > [data-content-type="banner"] ~ [data-content-type="banner"]) {
            display: flex !important;
            flex-direction: column !important;
            gap: var(--xbau-mobile-hero-gap) !important;
            margin: 0 !important;
        }
        #html-body .hero-banner.col-3-layout
        :is(.pagebuilder-column-line,.pagebuilder-column-group):has(>
        *:last-child > [data-content-type="banner"] ~ [data-content-type="banner"]) > * {
            padding-top: 0 !important;
            padding-bottom: 0 !important;
        }
        #html-body .hero-banner.col-3-layout
        :is(.pagebuilder-column-line,.pagebuilder-column-group):has(>
        *:last-child > [data-content-type="banner"] ~ [data-content-type="banner"]) > *:last-child {
            display: flex !important;
            flex-direction: column !important;
            gap: var(--xbau-mobile-hero-gap) !important;
            margin: 0 !important;
        }
        #html-body .hero-banner.col-3-layout
        :is(.pagebuilder-column-line,.pagebuilder-column-group):has(>
        *:last-child > [data-content-type="banner"] ~ [data-content-type="banner"]) > *:last-child > * {
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            width: 100% !important;
        }
        /* The two compact home promos are 3:2 artworks. Match their containers
           to that ratio so contain can show the full image without letterbox
           strips from the inherited fixed 270px banner height. */
        #html-body .hero-banner.col-3-layout
        :is(.pagebuilder-column-line,.pagebuilder-column-group) > *:last-child:has(>
        [data-content-type="banner"] ~ [data-content-type="banner"]) > [data-content-type="banner"],
        #html-body .hero-banner.col-3-layout
        :is(.pagebuilder-column-line,.pagebuilder-column-group) > *:last-child:has(>
        [data-content-type="banner"] ~ [data-content-type="banner"]) > [data-content-type="banner"] > .pagebuilder-banner-wrapper {
            box-sizing: border-box;
            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
            aspect-ratio: 3 / 2;
            overflow: hidden;
        }
        #html-body .hero-banner.col-3-layout
        :is(.pagebuilder-column-line,.pagebuilder-column-group) > *:last-child:has(>
        [data-content-type="banner"] ~ [data-content-type="banner"]) > [data-content-type="banner"] > .pagebuilder-banner-wrapper {
            background-position: center center !important;
            background-size: contain !important;
            background-color: transparent !important;
        }
        #html-body .hero-banner.col-3-layout
        :is(.pagebuilder-column-line,.pagebuilder-column-group) > *:last-child:has(>
        [data-content-type="banner"] ~ [data-content-type="banner"]) > [data-content-type="banner"] > .pagebuilder-banner-wrapper::before {
            background-position: center center !important;
            background-size: contain !important;
            transform: none !important;
        }

        /* Brand landing-page banners and the home brand strip share the same
           16px phone grid as the hero, catalog, account pages and footer. */
        .catalog-category-view .columns > .xbau-brand-banner,
        .catalog-category-view .brand-banner-container {
            box-sizing: border-box;
            width: auto !important;
            max-width: calc(100% - 32px);
            margin-right: var(--xbau-mobile-gutter) !important;
            margin-left: var(--xbau-mobile-gutter) !important;
        }
        .catalog-category-view .columns > .xbau-brand-banner {
            margin-bottom: 28px !important;
        }
        .catalog-category-view .brand-banner-container {
            overflow: hidden;
            border-radius: 14px;
        }
        #html-body .brands-widget-container {
            box-sizing: border-box;
            margin-right: var(--xbau-mobile-gutter) !important;
            margin-left: var(--xbau-mobile-gutter) !important;
        }
        #html-body .brands-widget-container .brands-container {
            box-sizing: border-box;
            padding-right: 0;
            padding-left: 0;
        }
        body.cms-index-index .xbau-home-brand-strip {
            display: block;
            box-sizing: border-box;
            width: auto !important;
            max-width: calc(100% - 32px) !important;
            margin-right: var(--xbau-mobile-gutter) !important;
            margin-left: var(--xbau-mobile-gutter) !important;
            overflow: hidden;
            border-radius: 14px !important;
        }
        body.cms-index-index .xbau-home-brand-strip img {
            display: block;
            width: 100%;
            height: auto;
            border-radius: inherit;
        }
        #html-body .product-items.slick-slider > button.slick-prev:not(.slick-hidden) { left: 8px !important; }
        #html-body .product-items.slick-slider > button.slick-next:not(.slick-hidden) { right: 8px !important; }

        /* Navigation utility content must fit even at 320px: one social row,
           one contact per row, and the same brand interaction colours. */
        body .sections.nav-sections .rootmenu .xbau-menu-socials .xbau-social-list {
            display: flex !important;
            flex-wrap: nowrap !important;
            justify-content: flex-start !important;
            gap: 8px !important;
            width: 100%;
        }
        body .sections.nav-sections .rootmenu .xbau-menu-socials .xbau-social-list > li {
            flex: 0 0 auto;
            margin: 0 !important;
        }
        body .sections.nav-sections .rootmenu .xbau-menu-socials .xbau-social-link {
            width: 32px;
            min-width: 32px;
            height: 32px;
        }
        body .sections.nav-sections .rootmenu .xbau-menu-socials .xbau-social-link svg {
            width: 15px;
            height: 15px;
        }
        body .sections.nav-sections .rootmenu .details-block .contact-links {
            display: flex !important;
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: 10px !important;
            width: 100%;
        }
        body .sections.nav-sections .rootmenu .details-block .contact-links > li,
        body .sections.nav-sections .rootmenu .details-block .contact-links > li > a {
            box-sizing: border-box;
            display: flex;
            width: 100%;
            color: #4D4D4F !important;
        }
        body .sections.nav-sections .rootmenu .details-block .contact-links > li > a:is(:hover,:focus-visible),
        body .sections.nav-sections .rootmenu li > a:is(:hover,:focus-visible) {
            color: #1E99A4 !important;
        }
        body .sections.nav-sections .rootmenu li:has(> a):is(:hover,:focus-within) > a::after,
        body .sections.nav-sections .rootmenu li:has(> a):is(:hover,:focus-within) > a > :is(.arrow,.fa-angle-down) {
            color: #1E99A4 !important;
            border-color: #1E99A4 !important;
        }
        body .page-main,
        body .page-main-full-width,
        body .columns,
        body .column.main {
            box-sizing: border-box;
            max-width: 100%;
            min-width: 0;
        }

        /* Compact bottom navigation without sacrificing touch targets. */
        body .page-header .bottom-links-wrapper {
            box-sizing: border-box;
            padding: 10px 8px calc(10px + env(safe-area-inset-bottom));
            z-index: 900;
        }
        body .page-header .bottom-links-wrapper .links {
            justify-content: space-around;
        }
        body .page-header .bottom-links-wrapper .link-wrapper {
            flex: 1 1 25%;
            min-width: 0;
            gap: 4px;
            padding: 0 4px;
        }
        body .page-header .bottom-links-wrapper .link-wrapper span {
            font-size: 12px;
            line-height: 16px;
            white-space: nowrap;
        }

        .page-header .search-autocomplete .autocomplete-list {
            padding: 14px 16px;
            gap: 10px;
        }

        /* A single readable footer system for every storefront page. */
        body .page-footer .footer.content {
            box-sizing: border-box;
            display: block;
            width: 100%;
            max-width: 100%;
            padding: 32px var(--xbau-mobile-gutter) calc(96px + env(safe-area-inset-bottom)) !important;
        }
        body .page-footer .footer-container {
            display: block;
            width: 100%;
            margin: 0 0 24px !important;
        }
        #html-body .page-footer .footer-container .xbau-footer-column {
            box-sizing: border-box;
            align-items: flex-start !important;
            width: 100% !important;
            margin: 0 0 24px !important;
            text-align: left !important;
        }
        #html-body .page-footer .footer-container .footer-links-social {
            margin-bottom: 0 !important;
        }
        body .page-footer .footer-list-wrapper,
        body .page-footer .footer-social-content {
            align-items: flex-start;
            width: 100%;
            text-align: left;
        }
        body .page-footer .xbau-footer-heading {
            margin: 0 0 8px;
            color: #4D4D4F;
        }
        body .page-footer .footer-list-wrapper ul {
            width: 100%;
            margin: 0;
            padding: 0;
        }
        body .page-footer .footer-list-wrapper ul > li {
            box-sizing: border-box;
            margin: 0;
            padding: 0 !important;
            border-bottom-color: rgba(156, 158, 161, .3);
        }
        body .page-footer .footer-list-wrapper ul > li > a {
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            width: 100%;
            min-height: 44px;
            padding: 10px 4px 10px 0;
            line-height: 1.45;
        }
        body .page-footer .footer-links-main ul > li > a,
        body .page-footer .footer-links-help ul > li > a {
            justify-content: space-between;
        }
        body .page-footer .xbau-footer-social-copy {
            max-width: 34rem;
            margin: 0 0 16px;
        }
        body .page-footer .footer-social-icons {
            align-self: flex-start;
            width: 100%;
        }
        body .page-footer .xbau-social-list {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            width: 100%;
        }
        body .page-footer .xbau-social-list > li {
            margin: 0;
        }
        body .page-footer .xbau-social-list .xbau-social-link {
            width: 44px;
            min-width: 44px;
            height: 44px;
            min-height: 44px;
        }
        body .page-footer .xbau-footer-logo {
            align-self: flex-start;
            width: 148px;
            max-width: 48%;
            margin-top: 24px;
        }
    }
    @media (min-width: 768px) and (max-width: 1024px) {
        body { --xbau-tablet-gutter: 24px; }
        #html-body .page-footer .footer-container .xbau-footer-column {
            align-items: flex-start !important;
            justify-content: flex-start !important;
            text-align: left !important;
        }
        #html-body .page-footer .footer-container .footer-list-wrapper,
        #html-body .page-footer .footer-container .footer-list-wrapper nav,
        #html-body .page-footer .footer-container .footer-list-wrapper ul {
            box-sizing: border-box;
            text-align: left !important;
            width: 100%;
        }
        .catalog-category-view .columns > .xbau-brand-banner,
        .catalog-category-view .brand-banner-container,
        body.cms-index-index .xbau-home-brand-strip {
            box-sizing: border-box;
            width: auto !important;
            max-width: calc(100% - 48px) !important;
            margin-right: var(--xbau-tablet-gutter) !important;
            margin-left: var(--xbau-tablet-gutter) !important;
        }
        .catalog-category-view .columns > .xbau-brand-banner-single,
        .catalog-category-view .columns > .xbau-brand-banner-composed {
            aspect-ratio: 5 / 1;
            min-height: 0;
        }
        body.cms-index-index .xbau-home-brand-strip {
            display: block;
            overflow: hidden;
            border-radius: 16px !important;
        }
        body.cms-index-index .xbau-home-brand-strip img {
            display: block;
            width: 100%;
            height: auto;
            border-radius: inherit;
        }
        #html-body .product-items.slick-slider > button.slick-prev:not(.slick-hidden) { left: 8px !important; }
        #html-body .product-items.slick-slider > button.slick-next:not(.slick-hidden) { right: 8px !important; }
    }
    @media (max-width: 1024px) {
        a.xbau-link-browser-default,
        a.xbau-link-browser-default:visited,
        a.xbau-link-browser-default > span {
            color: #1E99A4 !important;
        }
        a.xbau-link-browser-default:is(:hover,:focus-visible),
        a.xbau-link-browser-default:is(:hover,:focus-visible) > span {
            color: #4D4D4F !important;
        }
    }
    @media (prefers-reduced-motion: reduce) {
        .brands-widget-container .brand-logo-box img,
        a.logo img,
        .xbau-footer-logo img {
            transition: none;
        }
    }
    @media (min-width: 768px) {
        .page-header .search-autocomplete {
            /* ElasticSuite writes the input-only width inline after each response.
               The popup must retain the measured All-to-search-button span. */
            left: var(--xbau-search-popup-left, 0) !important;
            right: auto !important;
            width: var(--xbau-search-popup-width, 100%) !important;
            box-sizing: border-box;
        }
        body.xbau-favorite-anchored .customer-popup-ajaxwishlist {
            pointer-events: none;
        }
        body.xbau-favorite-anchored .customer-popup-ajaxwishlist .modal-inner-wrap {
            position: fixed !important;
            width: 380px !important;
            max-width: calc(100vw - 24px) !important;
            top: var(--xbau-favorite-top) !important;
            right: var(--xbau-favorite-right) !important;
            left: auto !important;
            bottom: auto !important;
            margin: 0 !important;
            transform: none !important;
            max-height: calc(100dvh - var(--xbau-favorite-top) - 12px);
            overflow-y: auto;
            pointer-events: auto;
        }
        body.xbau-favorite-anchored .customer-popup-ajaxwishlist .modal-header .action-close {
            position: absolute !important;
            top: 32px !important;
            right: 32px !important;
        }
    }
    /* Native localized seller CMS blocks. Only this reviewed revision opts in. */
    #html-body .xbau-sell-copy .pagebuilder-column-group {
        display: block !important;
        width: 100% !important;
        max-width: 1360px;
        padding: 0;
        margin: 0 auto;
    }
    #html-body .xbau-sell-copy .pagebuilder-column-line {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
        width: 100%;
    }
    #html-body .xbau-sell-copy .step-box,
    #html-body .xbau-sell-copy .worth-box {
        width: auto !important;
        min-width: 0;
        margin: 0;
        padding: 28px 24px;
        box-sizing: border-box;
        border-radius: 16px;
        color: #4D4D4F;
        overflow-wrap: anywhere;
    }
    #html-body .xbau-sell-copy .step-box::after { content: none; }
    #html-body .xbau-sell-copy .step-number {
        position: static;
        transform: none;
        align-self: flex-start;
        min-width: 32px;
        min-height: 32px;
        padding: 0;
        border-color: #9C9EA1;
    }
    #html-body .xbau-sell-copy .step-number p { font-size: 16px; color: #1E99A4; }
    #html-body .xbau-sell-copy .step-icon,
    #html-body .xbau-sell-copy .worth-icon {
        display: block;
        align-self: flex-start;
        width: 72px;
        max-width: 72px;
        height: 72px;
        margin: 0 0 22px;
        flex-shrink: 0;
    }
    #html-body .xbau-sell-copy .step-icon { margin-top: 18px; }
    #html-body .xbau-sell-copy .step-icon img,
    #html-body .xbau-sell-copy .worth-icon img {
        width: 72px;
        height: 72px;
        object-fit: contain;
    }
    /* Both PageBuilder sources now use the same resolution-independent SVG. */
    #html-body .xbau-sell-copy img.pagebuilder-mobile-hidden { display: block !important; }
    #html-body .xbau-sell-copy img.pagebuilder-mobile-only { display: none !important; }
    #html-body .xbau-sell-copy .step-name,
    #html-body .xbau-sell-copy .worth-name {
        color: #4D4D4F;
        font-size: 20px;
        line-height: 1.35;
        font-weight: 600;
        text-align: left;
        margin: 0 0 16px;
        min-height: 2.7em;
    }
    #html-body .xbau-sell-copy .step-description {
        text-align: left;
        color: #4D4D4F;
        font-size: 14px;
        line-height: 1.65;
        font-weight: 400;
    }
    #html-body .xbau-sell-copy .step-description p { margin: 0; font-weight: 400; }
    #html-body .xbau-sell-copy .worth-list { margin-top: 0; }
    #html-body .xbau-sell-copy .worth-list ul { padding-left: 18px; margin: 0; }
    #html-body .xbau-sell-copy .worth-list li { color: #4D4D4F; font-size: 14px; font-weight: 400; line-height: 1.65; }
    #html-body .xbau-sell-copy .worth-list li:last-child { margin-bottom: 0; }
    #html-body .xbau-sell-copy .worth-list li::marker { color: #1E99A4; }
    #html-body .xbau-sell-copy .steps-heading,
    #html-body .xbau-sell-copy .worth-heading {
        color: #4D4D4F;
        font-size: clamp(24px, 2.2vw, 32px);
        line-height: 1.35;
        margin: 0 0 36px;
        overflow-wrap: anywhere;
    }
    #html-body .xbau-sell-copy.seller-page-top-container { padding-top: 36px; padding-bottom: 40px; }
    #html-body .xbau-sell-copy.seller-page-bottom-container { padding: 40px 24px; }
    #html-body .xbau-sell-copy.seller-page-bottom-container > .row-full-width-inner { width: 100%; }
    @media (max-width: 1199px) {
        #html-body .xbau-sell-copy .pagebuilder-column-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 599px) {
        #html-body .xbau-sell-copy .pagebuilder-column-line { grid-template-columns: minmax(0, 1fr); }
        #html-body .xbau-sell-copy .step-box,
        #html-body .xbau-sell-copy .worth-box { padding: 24px; }
        #html-body .xbau-sell-copy .step-name,
        #html-body .xbau-sell-copy .worth-name { min-height: 0; }
    }