/* =========================================================================
   RAZAN — "Textil" skin for JTL-Shop 5 (Bootstrap-4-based)
   Premium home & hotel textiles (towels, bed linen, table linen). Brand red #F80808 + warm neutrals.
   Design tokens + component skins ported onto the stock template / Bootstrap-4 classes.
   Loads on top of the compiled baseline; renders without recompilation.
   ========================================================================= */

:root {
    /* Brand */
    --primary:        #E81C24;
    --primary-600:    #d11119;
    --primary-700:    #b30d15;
    --primary-2:      #B80014;
    --accent:         #C8553D;
    --grad:           linear-gradient(120deg, #F80808 0%, #E1101A 52%, #B80014 100%);
    --grad-soft:      linear-gradient(120deg, rgba(248,8,8,.08), rgba(184,0,20,.08));

    /* Ink & surfaces — warm, spa-like */
    --ink:            #211A18;
    --ink-2:          #3c302b;
    --muted:          #7c726c;
    --muted-2:        #a89c95;
    --line:           #ece3dd;
    --line-2:         #f3ede8;
    --surface:        #ffffff;
    --surface-2:      #faf5f1;
    --page:           #fbf7f3;

    /* Status */
    --success:        #1f9d6b;
    --danger:         #e0455b;
    --warning:        #f5a623;
    --info:           #3b82f6;

    /* Header / footer */
    --header-bg:      #fbf7f3;
    --header-ink:     #211A18;
    --footer-bg:      #241A18;
    --footer-ink:     #d8c9c1;
    --copyright-bg:   #1a1210;

    /* Radius */
    --r-xs: 8px;  --r-sm: 12px;  --r: 16px;  --r-lg: 22px;  --r-pill: 999px;

    /* Shadows */
    --sh-sm:    0 1px 2px rgba(33,26,24,.05), 0 2px 8px rgba(33,26,24,.05);
    --sh-md:    0 8px 24px rgba(33,26,24,.08), 0 2px 6px rgba(33,26,24,.05);
    --sh-lg:    0 24px 60px rgba(184,0,20,.14), 0 8px 24px rgba(33,26,24,.08);
    --sh-brand: 0 16px 40px rgba(232,28,36,.30);

    /* Type (fonts already bundled by the stock template base) */
    --font-body: 'Open Sans', system-ui, -apple-system, sans-serif;
    --font-head: 'Montserrat', system-ui, sans-serif;

    --ease: cubic-bezier(.2,.8,.2,1);
}

/* ---------- Base ---------------------------------------------------------- */
html { scroll-behavior: smooth; }
/* Kill any stray horizontal overflow so nothing (top bar, header, a wide row)
   can push a horizontal scrollbar or get clipped at the right edge.
   `clip` — not `hidden` — so the sticky header keeps sticking to the viewport
   and dropdowns/typeahead menus are never trapped. */
html { overflow-x: clip; }
body {
    background: var(--page);
    color: var(--ink);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
#main-wrapper, #content, #content-wrapper { background: var(--page); }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-head);
    color: var(--ink);
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.15;
}
a { color: var(--primary-700); transition: color .18s; }
a:hover { color: var(--primary-2); }
::selection { background: rgba(232,28,36,.18); color: var(--ink); }
:focus-visible { outline: 3px solid rgba(232,28,36,.45); outline-offset: 2px; border-radius: 6px; }

/* Custom scrollbar — page only (keeps the stock template's inner scrollers native) */
html { scrollbar-width: thin; scrollbar-color: #d8cabf transparent; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 10px; height: 10px; }
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
    background: #d8cabf; border-radius: 10px; border: 2px solid var(--page);
}
html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover { background: #c4b2a4; }

/* Decorative helpers (usable in CMS/OPC content) */
.text-grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow {
    font-family: var(--font-head); font-weight: 700; font-size: .74rem; letter-spacing: .18em;
    text-transform: uppercase; color: var(--primary); display: inline-flex; align-items: center; gap: .55em;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--grad); }

/* ---------- Buttons ------------------------------------------------------ */
.btn {
    font-family: var(--font-head);
    font-weight: 600; letter-spacing: .01em;
    border-radius: var(--r-pill) !important;
    border-width: 1.5px;
    position: relative; overflow: hidden;
    transition: transform .2s var(--ease), box-shadow .2s, background .2s, color .2s, border-color .2s;
}
.btn:active { transform: translateY(1px) scale(.99); }

.btn-primary, .btn-success, .btn-buy, .add-to-cart, .btn-add-to-cart {
    background: var(--grad) !important;
    background-size: 160% 160% !important;
    background-position: 0% 50% !important;
    border: none !important;
    color: #fff !important;
    box-shadow: var(--sh-brand) !important;
}
.btn-primary:hover, .btn-success:hover, .btn-buy:hover, .add-to-cart:hover, .btn-add-to-cart:hover {
    color: #fff !important;
    transform: translateY(-2px);
    background-position: 100% 50% !important;
    box-shadow: 0 20px 46px rgba(232,28,36,.42) !important;
}
/* shine sweep — scoped so it never overrides a dropdown caret */
.btn-primary:not(.dropdown-toggle)::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-130%);
    background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
    pointer-events: none;
}
.btn-primary:not(.dropdown-toggle):hover::after { transition: transform .7s ease; transform: translateX(130%); }

.btn-secondary {
    background: var(--ink) !important; border: none !important; color: #fff !important;
}
.btn-secondary:hover { background: var(--ink-2) !important; color: #fff !important; transform: translateY(-2px); box-shadow: var(--sh-md) !important; }

.btn-outline-primary, .btn-outline-secondary {
    background: transparent !important; color: var(--ink) !important; border: 1.5px solid var(--line) !important;
}
.btn-outline-primary:hover, .btn-outline-secondary:hover {
    border-color: var(--primary) !important; color: var(--primary) !important;
    background: transparent !important; transform: translateY(-2px); box-shadow: var(--sh-sm) !important;
}
.btn-link { color: var(--primary-700) !important; }
.btn-link:hover { color: var(--primary-2) !important; }

/* ---------- Forms -------------------------------------------------------- */
.form-control, .custom-select {
    border-radius: var(--r-sm) !important;
    border: 1.5px solid var(--line) !important;
    color: var(--ink);
    transition: border-color .18s, box-shadow .18s, background .18s !important;
}
.form-control::placeholder { color: var(--muted-2); }
.form-control:focus, .custom-select:focus {
    border-color: var(--primary) !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(232,28,36,.14) !important;
}
.form-control.is-invalid, .was-validated .form-control:invalid { border-color: var(--danger) !important; }
.custom-control-input:checked ~ .custom-control-label::before {
    background: var(--grad) !important; border-color: var(--primary) !important;
}
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 4px rgba(232,28,36,.14) !important; }

/* =========================================================================
   RAZAN HEADER — "Boutique Editorial"
   Centre-set wordmark, utility icons split left/right, a thin uppercase
   category rail beneath, and a full-width search overlay behind an icon.
   Imposed on the stock markup (#header-top-bar, #jtl-nav-wrapper,
   nav.navbar, #shop-nav, #mainNavigation): nav.navbar is flattened with
   display:contents so #shop-nav and #mainNavigation become direct flex
   children of the header container, and .toggler-logo-wrapper is absolutely
   centred over row 1. Everything is scoped to >=992px and
   body:not(.is-checkout), so the mobile off-canvas header and the checkout
   secure-header keep the stock template's native behaviour.
   ========================================================================= */

/* ---------- Announcement top bar (#header-top-bar) ----------------------- */
#header-top-bar {
    background: var(--ink) !important;
    color: #e7dcd4 !important;
    font-family: var(--font-head);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
#header-top-bar { display: block !important; }
#header-top-bar .container-fluid,
#header-top-bar .container {
    width: 100%; min-height: 38px;
    display: flex; align-items: center; justify-content: space-between;
    /* wrap the announcement links onto a second line instead of overflowing /
       being cut off on the right when there are many Kopf links */
    flex-wrap: wrap; row-gap: 2px;
}
#header-top-bar .nav { list-style: none; padding-left: 0; margin-bottom: 0; align-items: center; }
#header-top-bar .nav-item { display: inline-flex; align-items: center; }
#header-top-bar a:not(.dropdown-item):not(.btn) { color: #b8a89f !important; transition: color .15s; }
#header-top-bar a:not(.dropdown-item):not(.btn):hover { color: #fff !important; }
#header-top-bar .topbar-note #topbarNote,
#header-top-bar #topbarNote { color: #f2ebe5 !important; font-weight: 600; }
#header-top-bar #topbarNote::before {
    content: "\2726";                       /* four-pointed star, sets the boutique tone */
    color: var(--primary);
    margin-right: .7em;
    letter-spacing: 0;
}

/* ---------- Header shell ------------------------------------------------- */
#jtl-nav-wrapper {
    --rz-row1: 92px;
    position: sticky; top: 0; z-index: 1020;
    background: rgba(251,247,243,.80) !important;
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--line);
    box-shadow: none !important;
    transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
#jtl-nav-wrapper.rz-stuck {
    --rz-row1: 66px;
    background: rgba(251,247,243,.72) !important;
    box-shadow: var(--sh-md) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}

/* Centre-set wordmark */
#logo .navbar-brand { display: inline-flex; align-items: center; margin: 0; padding: 0; }
#shop-logo, #logo .navbar-brand img {
    height: 53px; width: auto;   /* +20% (was 44px) */
    transition: height .3s var(--ease);
}
#jtl-nav-wrapper.rz-stuck #shop-logo,
#jtl-nav-wrapper.rz-stuck #logo .navbar-brand img { height: 38px; }  /* +20% (was 32px) */
/* text fallback when no logo image is uploaded */
#logo .navbar-brand .h1 {
    font-family: var(--font-head); font-weight: 700;
    font-size: 1.6rem; letter-spacing: .26em; text-transform: uppercase;
    color: var(--ink); margin: 0; padding-left: .26em;   /* offset the trailing tracking */
}

/* ---------- Desktop: three-zone row + category rail ---------------------- */
@media (min-width: 992px) {
    body:not(.is-checkout) #jtl-nav-wrapper > .container-fluid,
    body:not(.is-checkout) #jtl-nav-wrapper > .container {
        position: relative;
        display: flex; flex-wrap: wrap; align-items: center;
    }
    body:not(.is-checkout) #jtl-nav-wrapper nav.navbar { display: contents; }

    /* Row 1 — the icon rail spans the full width; search sits left, the rest right. */
    body:not(.is-checkout) #shop-nav.nav-icons {
        order: 1; flex: 1 1 100%;
        display: flex; align-items: center; flex-wrap: nowrap;
        gap: 2px; margin: 0; padding: 0; list-style: none;
        min-height: var(--rz-row1);
        transition: min-height .3s var(--ease);
    }
    body:not(.is-checkout) #shop-nav > li { flex: 0 0 auto; }
    body:not(.is-checkout) #shop-nav > li#search { order: -1; margin-right: auto; }

    /* Logo floats over the centre of row 1, independent of the icon widths. */
    body:not(.is-checkout) .toggler-logo-wrapper {
        position: absolute; top: 0; left: 50%; transform: translateX(-50%);
        z-index: 3; margin: 0; padding: 0;
        height: var(--rz-row1);
        display: flex; align-items: center;
        transition: height .3s var(--ease);
    }

    /* Icon buttons */
    #shop-nav > li > .nav-link {
        display: inline-flex; align-items: center; justify-content: center;
        gap: 9px;
        min-width: 42px; height: 42px; padding: 0 10px;
        border-radius: var(--r-pill);
        color: var(--ink) !important; font-size: 1.02rem; line-height: 1;
        position: relative; transition: background .16s, color .16s, transform .12s;
    }
    #shop-nav > li > .nav-link:hover { color: var(--primary) !important; background: var(--grad-soft); }
    #shop-nav > li > .nav-link:active { transform: scale(.94); }

    /* Cart price rides along on wide viewports only */
    .cart-icon-dropdown-price { font-family: var(--font-head); font-weight: 700; font-size: .86rem; }
    @media (max-width: 1199.98px) { .cart-icon-dropdown-price { display: none; } }
    .cart-icon-dropdown-icon { position: relative; font-size: 1.02rem; }
    #shop-nav .fa-sup {
        position: absolute; top: -8px; right: -10px;
        min-width: 17px; height: 17px; padding: 0 4px;
        background: var(--grad); color: #fff;
        border-radius: 999px; font-size: 10px; font-weight: 800; line-height: 17px;
        display: inline-flex; align-items: center; justify-content: center;
        box-shadow: 0 2px 6px rgba(232,28,36,.45);
    }

    /* Search: icon trigger + full-width overlay panel */
    #shop-nav > li#search > .rz-search-toggle { display: inline-flex; }
    #search .search-wrapper {
        position: absolute; left: 0; right: 0; top: 100%;
        z-index: 1030;
        padding: 22px clamp(16px, 3vw, 40px) 26px;
        background: var(--surface);
        border: 1px solid var(--line);
        border-top: 0;
        border-radius: 0 0 var(--r-lg) var(--r-lg);
        box-shadow: var(--sh-lg);
        opacity: 0; visibility: hidden; pointer-events: none;
        transform: translateY(-10px);
        transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
    }
    #search.is-open .search-wrapper {
        opacity: 1; visibility: visible; pointer-events: auto; transform: none;
    }
    #search .form-icon, #search form { width: 100%; }
    #search .input-group {
        background: var(--surface-2);
        border: 1.5px solid var(--line);
        border-radius: var(--r-pill);
        flex-wrap: nowrap; position: relative;
        transition: border-color .18s, box-shadow .18s;
        /* NB: no overflow:hidden — it would clip the typeahead (.tt-menu) dropdown */
    }
    #search .input-group:focus-within {
        border-color: var(--primary);
        box-shadow: 0 0 0 4px rgba(232,28,36,.12);
    }
    #search .twitter-typeahead { display: flex !important; flex: 1 1 auto; min-width: 0; }
    #search .ac_input, #search .form-control {
        border: 0 !important; background: transparent !important; box-shadow: none !important;
        height: 56px; padding: 0 8px 0 24px; font-size: 16px; color: var(--ink);
        border-radius: var(--r-pill) 0 0 var(--r-pill) !important;
    }
    #search .input-group-append { margin: 0; }
    #search .input-group-append .btn {
        background: var(--grad) !important; border: 0 !important; color: #fff !important;
        width: 60px; border-radius: 0 var(--r-pill) var(--r-pill) 0 !important;
        display: inline-flex; align-items: center; justify-content: center;
        transition: filter .15s;
    }
    #search .input-group-append .btn:hover { filter: brightness(1.08); }
    #search .form-clear { z-index: 4; right: 68px; }

    /* Row 2 — category rail, centred */
    #mainNavigation {
        order: 2; flex: 1 1 100%;
        display: block !important;                 /* beat .collapse on desktop */
        border-top: 1px solid var(--line-2);
        max-height: 320px; opacity: 1; overflow: visible;
        transition: max-height .35s var(--ease), opacity .25s var(--ease), border-color .3s;
    }
    #mainNavigation .nav-mobile-body { width: 100%; }
    /* Left-aligned category bar. Centring looked clean with a few short names
       but wrapped a lone item onto a centred second row on shops with many long
       category names — left-align + tighter spacing fills row 1 and any overflow
       reads naturally left-to-right. */
    #mainNavigation .navbar-nav.nav-scrollbar-inner {
        display: flex; flex-wrap: wrap; align-items: stretch; justify-content: flex-start;
        gap: 0 2px; margin: 0; padding: 0; list-style: none;
    }
    #mainNavigation .nav-scrollbar-item > .nav-link {
        font-family: var(--font-head); font-weight: 600;
        font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
        color: var(--ink-2) !important;
        padding: 15px 13px; border-radius: 0; position: relative;
        white-space: nowrap;
        transition: color .16s;
    }
    /* Centre-growing underline (::before so it never fights the caret ::after).
       `border: 0` is load-bearing: the stock template paints its own underline as a 6px gold
       bottom-border on this very pseudo-element
       (`header .navbar-nav > .nav-item > .nav-link::before` in razan_crit.css),
       so without the reset a gold bar renders under the red one. */
    #mainNavigation .nav-scrollbar-item > .nav-link::before {
        content: ""; position: absolute; left: 50%; bottom: 9px; transform: translateX(-50%);
        width: 0; height: 2px; background: var(--grad); border: 0; border-radius: 2px;
        transition: width .22s var(--ease);
    }
    #mainNavigation .nav-scrollbar-item > .nav-link:hover { color: var(--primary) !important; }
    #mainNavigation .nav-scrollbar-item > .nav-link:hover::before,
    #mainNavigation .nav-scrollbar-item.active > .nav-link::before { width: calc(100% - 30px); }
    #mainNavigation .nav-scrollbar-item.active > .nav-link,
    #mainNavigation .nav-scrollbar-item.active > .nav-link .nav-mobile-heading { color: var(--primary) !important; }
    #mainNavigation .nav-scrollbar-item > .nav-link.dropdown-toggle::after { margin-left: 8px; color: var(--muted-2); }

    /* Full-width mega dropdown */
    #mainNavigation .dropdown-full { position: static; }
    #mainNavigation .dropdown-full > .dropdown-menu {
        left: 0; right: 0; width: 100%;
        margin-top: 0; padding: 26px 30px !important;
        border: 1px solid var(--line) !important;
        border-radius: 0 0 var(--r-lg) var(--r-lg) !important;
    }
    #mainNavigation .dropdown-full > .dropdown-menu > .dropdown-body { padding: 0; }
    #mainNavigation .dropdown-full .subcategory-wrapper { padding: 0; max-width: none; }
    /* deterministic 4-column mega grid (independent of the stock template's bootstrap grid) */
    #mainNavigation .dropdown-full .dropdown-body .row {
        display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
        align-content: start; align-items: start;
        gap: 2px 22px; margin: 0;
    }
    #mainNavigation .dropdown-full .dropdown-body .row > [class*="col-"] {
        max-width: none; flex: none; padding: 0;
    }
    #mainNavigation .dropdown-full .submenu-headline,
    #mainNavigation .dropdown-full .nav-item-lg-m > .nav-link {
        font-family: var(--font-head); font-weight: 600; color: var(--ink) !important;
        display: block; padding: 9px 12px; border-radius: var(--r-sm);
        transition: background .14s, color .14s;
    }
    #mainNavigation .dropdown-full .submenu-headline:hover,
    #mainNavigation .dropdown-full .nav-item-lg-m > .nav-link:hover {
        background: var(--grad-soft); color: var(--primary) !important;
    }

    /* On scroll: condense row 1 and tuck the category rail away */
    #jtl-nav-wrapper.rz-stuck #mainNavigation {
        max-height: 0 !important; opacity: 0 !important;
        overflow: hidden !important; border-color: transparent !important; pointer-events: none;
    }
}

/* Search trigger — hidden below lg, where the inline form is the mobile UI */
.rz-search-toggle {
    display: none;
    align-items: center; justify-content: center;
    width: 42px; height: 42px; padding: 0;
    border: 0; background: transparent;
    border-radius: var(--r-pill);
    color: var(--ink); font-size: 1.02rem;
    cursor: pointer;
    transition: background .16s, color .16s;
}
.rz-search-toggle:hover { color: var(--primary); background: var(--grad-soft); }
.rz-search-toggle .rz-search-toggle-close { display: none; }
#search.is-open .rz-search-toggle { color: var(--primary); background: var(--grad-soft); }
#search.is-open .rz-search-toggle .rz-search-toggle-open { display: none; }
#search.is-open .rz-search-toggle .rz-search-toggle-close { display: inline-block; }

.dropdown-menu {
    border: 1px solid var(--line) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--sh-lg) !important;
    padding: .6rem !important;
    animation: rzFadeDown .24s var(--ease);
}
.dropdown-item { border-radius: var(--r-sm); color: var(--ink-2); transition: background .15s, color .15s; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--grad-soft); color: var(--primary); }
@keyframes rzFadeDown { from { opacity: 0; transform: translateY(-8px);} to { opacity: 1; transform: none; } }

.badge-circle-1, .nav-number {
    background: var(--accent) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px -2px rgba(200,85,61,.6);
}

/* ---------- Breadcrumb --------------------------------------------------- */
.breadcrumb { background: transparent !important; border-radius: var(--r-sm) !important; font-size: .85rem; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb-item.active { color: var(--ink); font-weight: 600; }

/* ---------- Product tiles ----------------------------------------------- */
.productbox .productbox-inner,
.productbox-sidebar .productbox-inner {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r) !important;
    box-shadow: var(--sh-sm);
    overflow: hidden;
    transition: transform .28s var(--ease), box-shadow .28s, border-color .28s;
}
.productbox.productbox-column .productbox-inner { height: 100%; }
.productbox:hover .productbox-inner,
.productbox.productbox-hover:hover .productbox-inner {
    transform: translateY(-6px);
    box-shadow: var(--sh-lg);
    border-color: transparent;
}
.productbox-image, .productbox-images { border-radius: var(--r) var(--r) 0 0; overflow: hidden; background: var(--surface-2); }
.productbox-image img { transition: transform .6s var(--ease), opacity .4s; }
.productbox:hover .productbox-image img { transform: scale(1.06); }

.productbox-quick-actions .btn,
.productbox-onhover .btn { box-shadow: var(--sh-md); border-radius: 12px; }
.productbox-quick-actions { backdrop-filter: blur(2px); }

.productbox-title, .productbox-title a { font-family: var(--font-head); font-weight: 600; color: var(--ink); }
.productbox-title a:hover { color: var(--primary); }

/* ---------- Price -------------------------------------------------------- */
.price, .productbox-price, .price-default, .product-price, .preis {
    font-family: var(--font-head); font-weight: 700; color: var(--ink);
}
.special-price, .productbox-price.special-price, .price-sale { color: var(--primary) !important; }
.price small, .price-base, .currency { color: var(--muted); font-weight: 400; }
del, .strike, .price-old { color: var(--muted-2); text-decoration: line-through; }

/* Product tiles → pv-card feel: a prominent, always-visible buy button + tidy type */
.productbox .rz-tile-buy {
    margin-top: 14px;
    border-radius: var(--r-sm) !important;
    font-weight: 600;
    font-size: .92rem;
}
.productbox-column .productbox-title { font-size: 1rem; line-height: 1.35; }
.productbox-column .productbox-title a { font-weight: 600; text-decoration: none; }
.productbox-column .productbox-price, .productbox-column .price { font-size: 1.1rem; font-weight: 800; }
.productbox-column .productbox-inner { padding-bottom: 16px; }

/* Home product-slider tiles (Top-Angebot / Neu im Sortiment / …) → pv-card.
   item_slider.tpl tiles aren't .productbox, so they get their own card skin. */
.item-slider-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--sh-sm);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.item-slider-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.item-slider-card .item-slider { border-radius: 0; margin: 0; }
.item-slider-card .item-slider-desc-link { text-decoration: none; }
.item-slider-card .item-slider-desc {
    display: block;
    font-family: var(--font-head); font-weight: 600; color: var(--ink);
    margin: 12px 14px 0; line-height: 1.35;
}
.item-slider-card .item-slider-desc-link:hover .item-slider-desc { color: var(--primary); }
.item-slider-card .item-slider-rating { display: block; margin: 8px 14px 0; }
.item-slider-card .item-slider-price {
    font-family: var(--font-head); font-weight: 800; font-size: 1.1rem;
    color: var(--ink); margin: 8px 14px 0;
}
.item-slider-card .item-slider-price .special-price { color: var(--primary) !important; }
/* margin-top:auto pins the buy button to the card's bottom, so tiles with a
   1- vs 2-line title or an extra "pro kg" price line still line their buttons
   up across the row (the slides are already equal-height, below) */
.item-slider-card .rz-tile-buy { margin: auto 14px 14px; }
/* equal-height slides so the buttons line up */
.slick-type-product .slick-track, .slick-type-box .slick-track { display: flex; }
.slick-type-product .slick-slide, .slick-type-box .slick-slide { height: auto; }
.slick-type-product .slick-slide > div, .slick-type-box .slick-slide > div { height: 100%; }

/* ---------- Ratings ------------------------------------------------------ */
.stars, .fa-star, .product-rating .fas { color: #e3c64a; }
.stars .far, .product-rating .far { color: #d7d9e6; }

/* ---------- Badges / ribbons -------------------------------------------- */
.badge {
    font-family: var(--font-head); font-weight: 700; letter-spacing: .04em;
    border-radius: var(--r-pill) !important; text-transform: uppercase; padding: .4em .75em;
}
.badge-primary { background: rgba(232,28,36,.12) !important; color: var(--primary-700) !important; }
.badge-danger, .badge-sale, .label-sale, .ribbon, .ribbon-sale {
    background: linear-gradient(120deg, #F80808, #B80014) !important; color: #fff !important;
    box-shadow: var(--sh-sm);
}
.badge-success { background: rgba(31,157,107,.14) !important; color: var(--success) !important; }
.badge-light, .badge-secondary { background: var(--surface-2) !important; color: var(--muted) !important; border: 1px solid var(--line); }

/* ---------- Cards -------------------------------------------------------- */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r) !important;
    box-shadow: var(--sh-sm);
    overflow: hidden;
}

/* ---------- Sliders / banners ------------------------------------------- */
.banner, .slider, .nivoSlider, .slick-slider { border-radius: var(--r-lg); overflow: hidden; }
.banner .img-fluid, .slider img { border-radius: var(--r-lg); }
.slick-dots li button:before { color: var(--primary) !important; opacity: .35; }
.slick-dots li.slick-active button:before { color: var(--primary) !important; opacity: 1; }
.slick-prev:before, .slick-next:before { color: var(--primary) !important; }

/* Category teaser tiles */
.content-cats-small .sub-categories, .subcategories-image { border-radius: var(--r); transition: transform .18s; overflow: hidden; }
.content-cats-small .outer:hover .subcategories-image { transform: translateY(-4px) scale(1.02); }

/* ---------- Tabs (product detail etc.) ---------------------------------- */
.nav-tabs { border-bottom: 1.5px solid var(--line); }
.nav-tabs .nav-link {
    font-family: var(--font-head); font-weight: 600; color: var(--muted);
    border: none !important; background: transparent !important; position: relative;
}
.nav-tabs .nav-link:hover { color: var(--ink); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: var(--primary) !important; background: transparent !important;
}
/* the stock template already owns this pseudo-element: `.tab-navigation .nav-link::after`
   paints a 6px gold bottom-border and centres it with translateX(-50%).
   Reset both, or the gold bar shows and the red one sits off to the left. */
.nav-tabs .nav-link.active::after {
    content: ""; position: absolute; left: 1rem; right: 1rem; bottom: -1.5px;
    width: auto; height: 3px; transform: none;
    border: 0; border-radius: 3px; background: var(--grad);
}

/* ---------- Pagination --------------------------------------------------- */
.pagination .page-link {
    border: 1.5px solid var(--line);
    border-radius: 12px !important;
    margin: 0 3px;
    color: var(--ink);
    font-family: var(--font-head); font-weight: 600;
    transition: all .15s;
}
.pagination .page-link:hover { border-color: var(--primary); color: var(--primary); background: var(--surface); }
.pagination .page-item.active .page-link {
    background: var(--grad) !important; border-color: transparent !important; color: #fff !important;
    box-shadow: var(--sh-brand);
}

/* ---------- Alerts ------------------------------------------------------- */
.alert { border: 1px solid; border-radius: var(--r-sm); box-shadow: var(--sh-sm); }
.alert-success { background: #eaf8f1; border-color: #b9e6d2; color: #14724f; }
.alert-danger  { background: #fdecef; border-color: #f6c6cf; color: #b32639; }
.alert-info    { background: #eaf1fe; border-color: #c3d6fb; color: #2257c4; }
.alert-warning { background: #fff5e6; border-color: #fbe0b3; color: #ad6c06; }

/* ---------- Modals ------------------------------------------------------- */
.modal-content { border: none !important; border-radius: var(--r-lg) !important; box-shadow: var(--sh-lg) !important; overflow: hidden; }
.modal.show .modal-dialog { animation: rzModalIn .35s var(--ease); }
@keyframes rzModalIn { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- Filters (sidebar / boxes) ----------------------------------- */
aside .card, .sidepanel-left .card, #filter-box .card {
    border: 1px solid var(--line) !important; border-radius: var(--r) !important; background: var(--surface);
}
.noUi-connect { background: var(--grad) !important; }
.noUi-handle { border: 2px solid var(--primary) !important; border-radius: 50% !important; box-shadow: var(--sh-sm) !important; }
.filter-chip, .active-filter-item, .tag { border-radius: var(--r-pill) !important; }

/* ---------- Footer — "Editorial Dark" ------------------------------------ */
#footer.rz-footer {
    background: var(--footer-bg) !important;
    color: var(--footer-ink) !important;
    position: relative;
    margin-top: clamp(48px, 7vw, 96px);
    padding-top: 0;   /* razan.css sets #footer{padding:4rem 0 0} — 64px of dead space */
}
#footer.rz-footer::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--grad);
}
#footer .container { padding-top: clamp(28px, 3vw, 40px); padding-bottom: 26px; }
#footer a { color: var(--footer-ink) !important; text-decoration: none; transition: color .18s; }
#footer a:hover { color: #fff !important; }
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer .card-title { color: #fff !important; }

/* brand column + merchant link columns */
.rz-footer-top {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(28px, 5vw, 64px);
    align-items: start;
}
.rz-footer-brand { flex: 1 1 240px; max-width: 340px; }
.rz-footer-wordmark {
    display: inline-block;
    font-family: var(--font-head); font-weight: 700;
    font-size: 1.35rem; letter-spacing: .22em; text-transform: uppercase;
    color: #fff !important;
}
.rz-footer-story {
    margin: 16px 0 0;
    max-width: 40ch;
    font-size: .9rem; line-height: 1.65;
    color: rgba(216,201,193,.72);
}
.rz-social { display: flex; gap: 10px; margin: 22px 0 0; }
.rz-social a {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.09);
    color: #e0d3cb !important;
    transition: background .18s var(--ease), transform .18s var(--ease), border-color .18s;
}
.rz-social a:hover { background: var(--grad); border-color: transparent; transform: translateY(-2px); color: #fff !important; }

.rz-footer-cols {
    flex: 2 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 26px 56px;
    align-content: start;
}
.rz-footer-col { flex: 0 1 auto; min-width: 140px; }
/* a merchant footer box that is just a button (e.g. "Vertrag widerrufen") — a clearly
   visible pill on the dark footer, not a barely-there ghost outline */
.rz-footer-cols .btn {
    display: inline-flex; align-items: center;
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(255,255,255,.42) !important;
    color: #fff !important;
    box-shadow: none !important;
    border-radius: var(--r-pill);
    font-size: .84rem; font-weight: 600; padding: .5rem 1.15rem;
    white-space: nowrap;
}
.rz-footer-cols .btn:hover { background: var(--grad) !important; border-color: transparent !important; color: #fff !important; }
.rz-footer-col-title,
.rz-footer-col .card-title,
.rz-footer-col .box-title,
.rz-footer-col h3, .rz-footer-col h4, .rz-footer-col h5 {
    font-family: var(--font-head); font-weight: 600;
    font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
    color: #fff !important;
    margin: 0 0 16px;
}
.rz-footer-col ul { margin: 0; padding: 0; }
.rz-footer-col li { margin-bottom: 9px; }
.rz-footer-col a { font-size: .92rem; position: relative; }
.rz-footer-col a:hover { padding-left: 2px; }
/* merchant footer boxes render as .card — strip the card chrome */
#footer-boxes .card, .rz-footer-col .card, .rz-footer-col .box {
    background: transparent !important; border: 0 !important; box-shadow: none !important;
}
#footer-boxes .card-body, .rz-footer-col .card-body { padding: 0 !important; }
.rz-footer-col .nav, .rz-footer-col .navbar-nav { flex-direction: column; }
.rz-footer-col .nav-link { padding: 0 0 9px !important; font-size: .92rem; }

/* inset newsletter card */
.rz-newsletter-card {
    margin-top: clamp(36px, 4vw, 56px);
    padding: clamp(24px, 3vw, 38px);
    border-radius: var(--r-lg);
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    display: grid; grid-template-columns: 1fr 1fr; gap: 26px 40px; align-items: center;
}
.rz-newsletter-card .newsletter-footer-heading {
    font-family: var(--font-head); font-weight: 700;
    font-size: clamp(1.1rem, 2vw, 1.5rem); color: #fff !important; margin: 0;
}
.rz-newsletter-card .info { margin: 10px 0 0; font-size: .82rem; color: rgba(216,201,193,.66); }
.rz-newsletter-card .info a { text-decoration: underline !important; }
.rz-newsletter-card .form-group { margin-bottom: 0; }
.rz-newsletter-card .input-group { background: rgba(255,255,255,.06); border-radius: var(--r-pill); }
#footer .form-control {
    background: transparent !important;
    border: 1.5px solid rgba(255,255,255,.14) !important;
    border-right: 0 !important;
    color: #fff !important;
    height: 52px;
    border-radius: var(--r-pill) 0 0 var(--r-pill) !important;
}
#footer .form-control::placeholder { color: rgba(216,201,193,.5); }
#footer .form-control:focus { border-color: var(--primary) !important; box-shadow: none !important; }
.rz-newsletter-card .input-group-append .btn {
    /* the markup asks for .btn-secondary, which is ink — invisible on the dark
       footer — so the brand gradient is forced here instead */
    background: var(--grad) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: var(--r-pill) !important;
    height: 52px; padding-inline: 26px; white-space: nowrap;
}

/* trust strip */
.rz-footer-trust {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 14px 20px;
    margin: clamp(32px, 4vw, 48px) 0 0;
    padding: 26px 0 0;
    border-top: 1px solid rgba(255,255,255,.08);
}
.rz-footer-trust li { display: flex; align-items: center; gap: 12px; font-size: .86rem; color: rgba(216,201,193,.82); }
.rz-footer-trust i { color: var(--primary); font-size: 1.05rem; width: 22px; text-align: center; }

#footer .footnote-vat { margin-top: 24px; color: rgba(216,201,193,.55); font-size: .78rem; }
#footer .footnote-vat a { text-decoration: underline !important; }

/* legal bar */
.copyright, #copyright {
    background: var(--copyright-bg) !important;
    color: rgba(168,156,149,.85) !important;
    border-top: 1px solid rgba(255,255,255,.05);
    font-size: .8rem;
}
#copyright .rz-copyright-inner {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px 24px;
    padding-top: 18px; padding-bottom: 18px;
}
#copyright .rz-copyright-legal { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; }
#copyright #system-credits { opacity: .7; }
.rz-payment { display: flex; align-items: center; gap: 14px; margin: 0; }
.rz-payment i { font-size: 1.7rem; color: rgba(216,201,193,.55); transition: color .18s; }
.rz-payment li:hover i { color: #fff; }

@media (max-width: 991.98px) {
    .rz-footer-top { grid-template-columns: 1fr; }
    .rz-newsletter-card { grid-template-columns: 1fr; }
    .rz-footer-trust { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .rz-footer-cols { grid-template-columns: repeat(2, 1fr); }
    .rz-footer-trust { grid-template-columns: 1fr; }
    #copyright .rz-copyright-inner { justify-content: center; text-align: center; }
}

/* ---------- Scroll-to-top ----------------------------------------------- */
#scrollToTop, .scroll-to-top, .btn-scroll-top {
    background: var(--grad) !important; border: none !important; color: #fff !important;
    border-radius: 16px !important; box-shadow: var(--sh-brand) !important;
    transition: transform .2s var(--ease);
}
#scrollToTop:hover, .scroll-to-top:hover, .btn-scroll-top:hover { transform: translateY(-3px) scale(1.04); }

/* ---------- Scroll reveal (driven by razan.js) -------------------------- */
.rz-reveal { transition: opacity .7s var(--ease), transform .7s var(--ease); will-change: opacity, transform; }
.rz-anim .rz-reveal { opacity: 0; transform: translateY(22px); }
.rz-anim .rz-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .rz-anim .rz-reveal { opacity: 1 !important; transform: none !important; }
    html { scroll-behavior: auto; }
}

/* page fade-in */
@keyframes rzPageIn { from { opacity: 0; } to { opacity: 1; } }
#content-wrapper { animation: rzPageIn .5s var(--ease); }

/* =========================================================================
   PAGE-SPECIFIC SKINS — Razan Textil design ported onto real JTL classes
   ========================================================================= */

/* ---------- Shared: quantity steppers ----------------------------------- */
.form-counter, .form-counter.choose_quantity {
    border: 1.5px solid var(--line) !important;
    border-radius: var(--r-pill) !important;
    overflow: hidden;
    background: var(--surface);
}
.form-counter .input-group-prepend .btn,
.form-counter .input-group-append .btn,
.form-counter .btn-decrement, .form-counter .btn-increment,
.form-counter .inputgroupprepend .btn {
    background: transparent !important;
    border: none !important;
    color: var(--ink) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.form-counter .btn:hover { background: var(--grad-soft) !important; color: var(--primary) !important; }
.form-counter .quantity, .form-counter input.quantity, .form-counter .unit {
    border: none !important;
    background: transparent !important;
    text-align: center;
    font-family: var(--font-head); font-weight: 600;
    box-shadow: none !important;
}
.btn-icon, .btn-icon-primary {
    border-radius: var(--r-pill) !important;
    border: 1.5px solid var(--line) !important;
    background: var(--surface) !important;
    color: var(--ink) !important;
}
.btn-icon:hover { border-color: var(--primary) !important; color: var(--primary) !important; }

/* =========================================================================
   1) PRODUCT DETAIL
   ========================================================================= */
/* gallery: see "PRODUCT DETAIL — bespoke first view" at the end of this file */

/* variation swatches */
.swatches.textswatches .swatches-text,
.variation.swatches.swatches-text {
    border: 1.5px solid var(--line) !important;
    border-radius: var(--r-pill) !important;
    background: var(--surface) !important;
    font-family: var(--font-head); font-weight: 600;
    color: var(--ink) !important;
    transition: all .15s;
}
.swatches.textswatches .swatches-text:hover { border-color: var(--primary) !important; color: var(--primary) !important; }
.swatches .swatches-text.active, .variation.swatches.active.swatches-text {
    border-color: var(--primary) !important;
    background: var(--grad-soft) !important;
    color: var(--primary-700) !important;
}
.swatches.imgswatches .swatches-image, .variation.swatches.swatches-image {
    border-radius: var(--r-sm) !important;
    border: 2px solid transparent !important;
    box-shadow: 0 0 0 1.5px var(--line);
    transition: all .15s;
}
.swatches .swatches-image.active, .variation.swatches.active.swatches-image {
    box-shadow: 0 0 0 2px var(--primary) !important;
    transform: scale(1.04);
}
.swatches .not-available, .swatches-not-in-stock, .swatches-sold-out { opacity: .45 !important; }
.swatches .swatches-text.not-available, .swatches-text.swatches-sold-out { text-decoration: line-through; }
.swatches-selected.text-success { color: var(--success) !important; font-weight: 600; }
.custom-select.selectpicker, .variation .custom-select { border-radius: var(--r-sm) !important; }

/* price block */
.price_wrapper .price, .price_wrapper h1.price { font-family: var(--font-head); font-weight: 700; color: var(--ink); }
.price_wrapper .special-price { color: var(--primary) !important; }
.price_wrapper .text-danger.text-stroke, .text-stroke { color: var(--muted-2) !important; text-decoration: line-through; }
.price_label.nowonly, .price_label.pricestarting, .price_label.per_unit { color: var(--muted); font-family: var(--font-head); font-weight: 600; }
.base-price, .base_price, .price-note { color: var(--muted); }
.bulk-prices .table { border-radius: var(--r-sm); overflow: hidden; }
.bulk-prices th { background: var(--surface-2); font-family: var(--font-head); font-weight: 600; border-color: var(--line); }
.bulk-prices td { border-color: var(--line); }
.bulk-prices .bulk-base-price, .bulk-prices td:last-child { font-family: var(--font-head); font-weight: 700; color: var(--primary-700); }
.yousave .percent, .discount .value { color: var(--primary); font-weight: 700; }

/* stock / availability */
.delivery-status .status { font-weight: 600; }
.delivery-status .status-1, .status.status-1 { color: var(--success) !important; }
.delivery-status .status-2, .status.status-2 { color: var(--warning) !important; }
.delivery-status .status-3, .status.status-3 { color: var(--danger) !important; }
.estimated-delivery, .estimated-delivery-info { color: var(--muted); }

/* tabs nav variant */
.tab-navigation .nav-tabs { border-bottom: 1.5px solid var(--line); }

/* reviews */
.reviews .review, .reviews-mosthelpful, #reviews-overview {
    border-radius: var(--r);
}
.review-comment { border-bottom: 1px solid var(--line); }
.reviews .progress { background: var(--line-2); border-radius: var(--r-pill); height: 8px; }
.reviews .progress-bar { background: var(--grad) !important; border-radius: var(--r-pill); }
.verified-purchase, .verified-purchase-notice { color: var(--success) !important; font-weight: 600; }
.blockquote-footer { color: var(--muted); }

/* trust badges (if used in OPC content) */
.trust-item i, .info-icon { border-radius: 10px; background: var(--grad-soft); color: var(--primary); }

/* =========================================================================
   2) SHOP / CATEGORY LISTING
   ========================================================================= */
/* category header / hero */
.productlist-header .title h1, #content .title .h2 { font-family: var(--font-head); }

/* toolbar (result options) */
#result-options {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 10px 14px;
}
/* view toggle */
.btn-option.ed { border-color: var(--line) !important; color: var(--muted) !important; }
.btn-option.ed.active, .btn-option.ed:hover {
    background: var(--grad) !important; border-color: transparent !important; color: #fff !important;
}

/* active filter chips */
.active-filters .snippets-filter-item, .active-filters .btn.filter-type-x, .active-filters .js-filter-item {
    background: var(--grad-soft) !important;
    color: var(--primary-700) !important;
    border: none !important;
    border-radius: var(--r-pill) !important;
    font-weight: 600;
}
.active-filters .snippets-filter-item:hover { background: rgba(232,28,36,.16) !important; }
.snippets-filter-item-all.js-filter-item { color: var(--muted) !important; background: transparent !important; }

/* filter boxes (sidebar) */
.box.box-filter-price, .box.box-filter-characteristics,
.box.box-filter-category, .box.box-filter-rating, .box-filter-availability {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 2px 16px;
    margin-bottom: 14px;
}
.btn-filter-box.dropdown-toggle {
    font-family: var(--font-head); font-weight: 700;
    color: var(--ink) !important;
    background: transparent !important;
    border: none !important;
    padding-left: 0; padding-right: 0;
}
.btn-filter-box.dropdown-toggle:hover { color: var(--primary) !important; }
.box-filter-hr { border-color: var(--line); }
.box .nav-link, .box .custom-control-label { color: var(--ink-2); }
.box .nav-link:hover { color: var(--primary); }

/* list view rows */
.productbox-row .productbox-inner {
    border: 1px solid var(--line);
    border-radius: var(--r) !important;
    background: var(--surface);
    box-shadow: var(--sh-sm);
}
.productbox-row:hover .productbox-inner { box-shadow: var(--sh-md); }
.item-list-description { color: var(--muted); }
.basket-details-add-to-cart { border-radius: var(--r-pill) !important; }

/* =========================================================================
   3) CART
   ========================================================================= */
.basket-heading, .basket h1 { font-family: var(--font-head); }
/* line items */
.cart-items-body { border-bottom: 1px solid var(--line); }
.cart-items-image img, .cart-items-image .image { border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); }
.cart-items-name { font-family: var(--font-head); font-weight: 700; color: var(--ink); }
.cart-items-name:hover { color: var(--primary); }
.cart-items-price .price_overall, .price_overall.text-accent, .total-sum {
    font-family: var(--font-head); font-weight: 700; color: var(--ink);
}
.cart-items-delete-button { color: var(--muted-2) !important; border-radius: 10px; transition: all .15s; }
.cart-items-delete-button:hover { background: #fdecef !important; color: var(--danger) !important; }
/* summary */
.cart-summary .card-gray, .card-gray, .basket-summary {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r) !important;
    box-shadow: var(--sh-sm);
}
.basket-summary-total { border-top: 1.5px solid var(--line); padding-top: 12px; }
.basket-summary-total .total-sum { font-size: 1.5rem; font-weight: 800; }
#cart-checkout-btn { border-radius: var(--r-pill) !important; }
.coupon-form #kupon { border-radius: var(--r-sm) !important; }
/* mini-cart dropdown */
.cart-dropdown.dropdown-menu {
    border: 1px solid var(--line) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--sh-lg) !important;
    padding: 14px !important;
}
.dropdown-cart-items td { border-color: var(--line-2) !important; }
.cart-dropdown-total-item-price { font-family: var(--font-head); font-weight: 700; }
.cart-dropdown-buttons .btn { border-radius: var(--r-pill) !important; }
/* empty cart */
.basket-empty .alert { border-radius: var(--r-lg); }
.basket-empty .badge.bubble {
    background: var(--grad-soft) !important; color: var(--primary) !important;
    width: 92px; height: 92px; border-radius: 50% !important; font-size: 2rem;
    display: inline-flex; align-items: center; justify-content: center;
}

/* =========================================================================
   4) ACCOUNT
   ========================================================================= */
.account-head-data-credit, .account-data-item .card, .account-orders-item {
    border: 1px solid var(--line) !important;
    border-radius: var(--r) !important;
    background: var(--surface);
    box-shadow: var(--sh-sm);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.account-data-item .card:hover, .account-orders-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-md);
    border-color: transparent !important;
}
.account-data-item .card-title, .account-orders-item .card-title { font-family: var(--font-head); font-weight: 700; }
/* tables */
.table-vertical-middle, .table.table-hover { color: var(--ink-2); }
.table thead th, .table th { font-family: var(--font-head); font-weight: 600; color: var(--muted); border-color: var(--line); text-transform: uppercase; font-size: .76rem; letter-spacing: .05em; }
.table td { border-color: var(--line-2); }
.table-hover tbody tr:hover, .clickable-row:hover { background: var(--surface-2) !important; }
.clickable-row { cursor: pointer; }
/* order items / totals */
.order-items.card-table { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.order-item { border-bottom: 1px solid var(--line-2); }
.order-items-total .total-sum, .order-items-total .price.total-sum { font-family: var(--font-head); font-weight: 800; color: var(--ink); }
.account-comparelist, .account-data-item-wishlist .card { background: var(--surface); }
.btn-row .btn { border-radius: var(--r-pill) !important; }

/* =========================================================================
   5) HOME / CMS blocks (standard components; hero/USP are OPC-built)
   ========================================================================= */
/* category teasers */
.content-cats-small .sub-categories {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--sh-sm);
    transition: transform .2s, box-shadow .2s;
}
.content-cats-small .outer:hover .sub-categories { transform: translateY(-4px); box-shadow: var(--sh-md); }
.content-cats-small .caption { font-family: var(--font-head); font-weight: 600; }
/* product slider section headings */
.product-slider .card-title, .slider-title, .product-stream-title, .headline {
    font-family: var(--font-head); font-weight: 700; color: var(--ink);
}
/* Home product sliders (Top-Angebot / Neu im Sortiment / Sonderangebot / Bestseller):
   turn the stock template's centered "—— title ——" into the bespoke left-aligned heading
   with a red accent bar (matching the .section-head / eyebrow look). */
.slick-slider-other .hr-sect,
.product-slider-wrapper .hr-sect {
    display: block;
    text-align: left;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: clamp(1.35rem, 3vw, 1.9rem);
    letter-spacing: -.01em;
    color: var(--ink);
    border: 0;
    margin: 6px 0 22px;
}
.slick-slider-other .hr-sect::before,
.product-slider-wrapper .hr-sect::before {
    content: "";
    display: block;
    flex: none;
    width: 32px; height: 3px;
    background: var(--grad);
    border-radius: 3px;
    margin: 0 0 12px;
}
.slick-slider-other .hr-sect::after,
.product-slider-wrapper .hr-sect::after { display: none; }
.slick-slider-other .hr-sect a,
.product-slider-wrapper .hr-sect a { color: inherit; text-decoration: none; }
.slick-slider-other .hr-sect a:hover,
.product-slider-wrapper .hr-sect a:hover { color: var(--primary); }
/* newsletter (footer or content) */
.newsletter-wrapper, .box-newsletter, #newsletter {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}
.newsletter-wrapper .form-control, .box-newsletter .form-control { border-radius: var(--r-pill) !important; }
/* generic CMS banner helper */
.cms-banner, .banner-promo { border-radius: var(--r-lg); overflow: hidden; }

/* =========================================================================
   HOME / LANDING BLOCKS — for OPC "HTML" portlets (rz- namespaced, collision-free)
   Paste the matching HTML from HOME-OPC-SNIPPETS.html into an OPC HTML element.
   ========================================================================= */
.rz-section { padding-block: clamp(36px, 6vw, 72px); }
.rz-lead { font-size: 1.08rem; color: var(--muted); }
.muted { color: var(--muted) !important; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.section-head p { margin: 0; max-width: 52ch; color: var(--muted); }

/* on-brand placeholder tile (swap for <img> anytime) */
.rz-ph { background: var(--grad-soft); display: grid; place-items: center; color: var(--primary);
    position: relative; overflow: hidden; border-radius: inherit; min-height: 120px; }
.rz-ph > i { font-size: clamp(1.8rem, 4.5vw, 3rem); opacity: .42; }
.rz-ph.tint-2 { background: linear-gradient(140deg, #fbe4df, #f3ddd6); color: var(--accent); }
.rz-ph.tint-3 { background: linear-gradient(140deg, #e8efe9, #eee7df); color: #6f9079; }
.rz-ph.tint-4 { background: linear-gradient(140deg, #f7ecdb, #f1e2d2); color: #b8804a; }

/* HERO */
.rz-hero { position: relative; overflow: hidden; padding-block: clamp(16px, 4vw, 36px); }
.rz-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 1fr;
    gap: clamp(28px, 4vw, 64px); align-items: center; }
.rz-hero-copy h1 { margin-bottom: .35em; }
.rz-hero-copy .rz-lead { max-width: 46ch; margin-bottom: 1.6rem; }
.rz-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.rz-hero-stats { display: flex; align-items: center; gap: 26px; margin-top: 2.2rem; flex-wrap: wrap; }
.rz-hero-stats > div:not(.rz-vr) { display: flex; flex-direction: column; }
.rz-hero-stats strong { font-family: var(--font-head); font-size: 1.5rem; color: var(--ink); line-height: 1; }
.rz-hero-stats span { font-size: .82rem; color: var(--muted); margin-top: .3em; }
.rz-hero-stats .rz-vr { width: 1px; height: 38px; background: var(--line); }
.rz-hero-visual { position: relative; }
.rz-hero-img { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg); aspect-ratio: 4/4.4; }
.rz-hero-img img, .rz-hero-img .rz-ph { width: 100%; height: 100%; object-fit: cover; }
.rz-hero-badge { position: absolute; top: 20px; right: 20px; background: rgba(33,26,24,.82); color: #fff;
    font-family: var(--font-head); font-weight: 600; font-size: .8rem; padding: .5em 1em; border-radius: var(--r-pill); }
.rz-hero-badge i { color: #ffd9c7; }

/* Floating product card on the hero — glassy, gently bobbing */
.rz-hero-card {
    position: absolute;
    left: -18px;
    bottom: 26px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px 10px 10px;
    background: rgba(255,255,255,.88);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border: 1px solid rgba(255,255,255,.6);
    border-radius: var(--r);
    box-shadow: var(--sh-lg);
    animation: rzFloat 4.5s ease-in-out infinite;
}
.rz-hero-card-thumb {
    width: 56px; height: 56px; flex: 0 0 56px;
    border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2);
}
.rz-hero-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rz-hero-card-body { display: flex; flex-direction: column; line-height: 1.25; }
.rz-hero-card-title { font-family: var(--font-head); font-weight: 700; font-size: .92rem; color: var(--ink); }
.rz-hero-card-meta { font-size: .74rem; color: var(--muted); }
.rz-hero-card-price { font-family: var(--font-head); font-weight: 800; font-size: 1rem; color: var(--primary); margin-top: 2px; }
@keyframes rzFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) { .rz-hero-card { animation: none; } }
@media (max-width: 575.98px) { .rz-hero-card { left: 8px; bottom: 8px; padding: 8px 12px 8px 8px; } }

/* USP strip */
.rz-usp { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r); }
.rz-usp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 22px clamp(8px, 2vw, 18px); }
.rz-usp-item { display: flex; align-items: center; gap: 14px; padding: 4px 12px; }
.rz-usp-item + .rz-usp-item { border-left: 1px solid var(--line); }
.rz-usp-item i { font-size: 1.35rem; color: var(--primary); width: 34px; text-align: center; }
.rz-usp-item strong { display: block; font-family: var(--font-head); font-size: .95rem; }
.rz-usp-item span { font-size: .82rem; color: var(--muted); }

/* category mosaic */
.rz-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 24px; }
.rz-cat-card { position: relative; border-radius: var(--r); overflow: hidden; display: block;
    box-shadow: var(--sh-sm); border: 1px solid var(--line); }
.rz-cat-card img, .rz-cat-card .rz-ph { position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; min-height: 0; transition: transform .6s var(--ease); }
.rz-cat-card::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(33,26,24,.62), rgba(33,26,24,.05) 55%); }
.rz-cat-card:hover img, .rz-cat-card:hover .rz-ph { transform: scale(1.06); }
.rz-cat-card.big { grid-row: span 2; grid-column: span 2; }
.rz-cat-card.wide { grid-column: span 2; }
.rz-cat-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px; color: #fff; }
.rz-cat-body h3 { color: #fff; margin: 6px 0 4px; }
.rz-cat-card.big .rz-cat-body h3 { font-size: 1.7rem; }
.rz-cat-body .rz-go { font-family: var(--font-head); font-weight: 600; font-size: .9rem;
    display: inline-flex; gap: .5em; align-items: center; opacity: .92; color: #fff; }
.rz-cat-body .badge { background: rgba(255,255,255,.18); color: #fff; }

/* promo banner */
.rz-promo { background: var(--grad); border-radius: var(--r-lg); overflow: hidden; display: grid;
    grid-template-columns: 1.1fr .9fr; box-shadow: var(--sh-lg); position: relative; }
.rz-promo-copy { padding: clamp(32px, 4vw, 60px); position: relative; z-index: 1; }
.rz-promo-copy h2, .rz-promo-copy p { color: #fff; }
.rz-promo-copy p { color: rgba(255,255,255,.9); max-width: 46ch; }
.rz-promo-visual { position: relative; min-height: 300px; }
.rz-promo-visual img, .rz-promo-visual .rz-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; min-height: 0; }

/* quote */
.rz-quote { max-width: 800px; margin: 0 auto; text-align: center; }
.rz-quote > i { font-size: 2rem; color: var(--primary); opacity: .5; margin-bottom: 14px; display: block; }
.rz-quote blockquote { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.2rem, 2.4vw, 1.7rem);
    line-height: 1.4; color: var(--ink); margin: 0 0 22px; letter-spacing: -.01em; }
.rz-quote-by { display: inline-flex; align-items: center; gap: 12px; text-align: left; }
.rz-quote-by strong { display: block; font-family: var(--font-head); }
.rz-quote-by span { font-size: .85rem; color: var(--muted); }

/* newsletter */
.rz-newsletter { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: clamp(32px, 4vw, 52px); display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
    align-items: center; box-shadow: var(--sh-sm); position: relative; overflow: hidden; }
.rz-newsletter::before { content: ""; position: absolute; top: -40%; right: -10%; width: 40%; height: 160%;
    background: var(--grad-soft); border-radius: 50%; }
.rz-newsletter > * { position: relative; z-index: 1; }
.rz-news-form { display: flex; gap: 12px; }
.rz-news-form input { flex: 1; height: 54px; border-radius: var(--r-pill) !important; }

@media (max-width: 992px) {
    .rz-hero-inner { grid-template-columns: 1fr; }
    .rz-hero-visual { max-width: 520px; margin-inline: auto; width: 100%; }
    .rz-usp-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .rz-usp-item:nth-child(3) { border-left: 0; }
    .rz-cat-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
    .rz-cat-card.big { grid-column: span 2; }
    .rz-promo { grid-template-columns: 1fr; }
    .rz-promo-visual { min-height: 240px; order: -1; }
    .rz-newsletter { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .rz-cat-grid { grid-template-columns: 1fr; }
    .rz-cat-card, .rz-cat-card.big, .rz-cat-card.wide { grid-column: span 1; grid-row: span 1; }
    .rz-news-form { flex-direction: column; }
    .rz-news-form .btn { width: 100%; }
}

/* =========================================================================
   REMAINING PAGES — brand skins for bespoke components
   (checkout · consent · blog · wizard · comparelist · 404 · misc)
   ========================================================================= */

/* CHECKOUT: stepper, selectable option cards, confirmation totals
   now live in the "CHECKOUT" section at the end of this file. */

/* divider with centered text ("oder") */
.hr-sect, .checkout-existing-customer-hr {
    display: flex; align-items: center; text-align: center;
    color: var(--muted-2); font-family: var(--font-head); font-weight: 600; font-size: .85rem;
}
.hr-sect::before, .hr-sect::after { content: ""; flex: 1; height: 1px; background: var(--line); margin: 0 .8em; }

/* ---------- CHECKOUT: order completed / thank-you ----------------------- */
.order-completed .order-confirmation, .order-confirmation {
    border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-sm);
}
.order-confirmation-note { color: var(--success); font-family: var(--font-head); font-weight: 600; }
.order-confirmation-details { color: var(--ink-2); }

/* ---------- COOKIE CONSENT (own button classes, not .btn) --------------- */
.consent-banner, .consent-modal-content {
    border: 1px solid var(--line) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--sh-lg) !important;
    background: var(--surface);
}
.consent-banner-icon, .consent-modal-icon { color: var(--primary); }
.consent-display-1, .consent-display-2, .consent-display-3 { font-family: var(--font-head); color: var(--ink); font-weight: 700; }
.consent-btn {
    border-radius: var(--r-pill) !important;
    font-family: var(--font-head); font-weight: 600;
    border: 1.5px solid transparent;
    transition: transform .15s, box-shadow .15s, background .15s, color .15s;
}
.consent-btn:hover { transform: translateY(-2px); }
.consent-btn-primary { background: var(--grad) !important; color: #fff !important; box-shadow: var(--sh-brand); }
.consent-btn-outline-primary { background: transparent !important; color: var(--primary) !important; border-color: var(--primary) !important; }
.consent-btn-outline-primary:hover { background: var(--grad-soft) !important; }
.consent-btn-tertiary, .consent-btn-sm {
    background: var(--surface-2) !important; color: var(--muted) !important; border-color: var(--line) !important;
}
.consent-btn-tertiary:hover, .consent-btn-sm:hover { color: var(--ink) !important; }
.consent-switch .consent-input:checked + .consent-label::before,
.consent-input:checked + .consent-label { color: var(--primary); }
.consent-show-more { color: var(--primary-700) !important; }

/* ---------- BLOG: article cards ---------------------------------------- */
.newsbox, .blog-preview {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--sh-sm);
    transition: transform .25s var(--ease), box-shadow .25s, border-color .25s;
}
.newsbox:hover, .blog-preview:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: transparent; }
.newsbox-image img { transition: transform .5s var(--ease); }
.newsbox:hover .newsbox-image img { transform: scale(1.05); }
.newsbox-headline, .newsbox-headline a { font-family: var(--font-head); font-weight: 700; color: var(--ink); text-decoration: none; }
.newsbox-headline a:hover { color: var(--primary); }
.news-categorylist .badge, .blog-details .news-categorylist a { color: var(--primary-700); }
.creation-date, .newsbox-author, .author-meta { color: var(--muted); font-size: .85rem; }
.blog-details-image { border-radius: var(--r-lg); overflow: hidden; }

/* ---------- SELECTION WIZARD: answer cards ------------------------------ */
.selection-wizard-question-heading { font-family: var(--font-head); font-weight: 700; color: var(--ink); }
.selection-wizard-answer {
    display: block;
    border: 1.5px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    padding: 16px;
    transition: border-color .15s, box-shadow .15s, transform .15s, background .15s;
    cursor: pointer;
    color: var(--ink-2);
}
.selection-wizard-answer:hover, .selection-wizard-answer.active {
    border-color: var(--primary); background: var(--grad-soft);
    color: var(--primary-700); transform: translateY(-3px); box-shadow: var(--sh-sm);
}

/* ---------- COMPARELIST ------------------------------------------------- */
.comparelist .comparelist-label, .comparelist-label {
    font-family: var(--font-head); font-weight: 600; color: var(--ink); background: var(--surface-2);
}
.comparelist-item { background: var(--surface); }
.comparelist-item-image { border-radius: var(--r-sm); overflow: hidden; }
.comparelist-delete-all, .delete-link-times { color: var(--muted); }
.comparelist-delete-all:hover { color: var(--danger); }

/* ---------- WISHLIST / misc actions ------------------------------------ */
.wishlist-all-to-cart { background: var(--surface); border-top: 1px solid var(--line); border-radius: 0 0 var(--r) var(--r); }
.wishlist-search-button { border-radius: var(--r-pill) !important; }

/* ---------- 404 / empty pages ------------------------------------------ */
.page-not-found { text-align: center; padding: clamp(40px, 8vw, 90px) 20px; }
.page-not-found h1 { font-size: clamp(3rem, 10vw, 6rem); background: var(--grad);
    -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- LIVE-SEARCH suggestion dropdown ----------------------------- */
.snippets-suggestion { border-radius: var(--r-sm); transition: background .12s, color .12s; }
.snippets-suggestion:hover, .snippets-suggestion.active { background: var(--grad-soft); color: var(--primary); }

/* ---------- REGISTER / LOGIN / CONTACT / NEWSLETTER wrappers ------------ */
.login-form, .register-form, .contact-form, .newsletter-content { color: var(--ink-2); }
.customer-login-buttons-forgot a, .resetpw-wrapper a, .register-wrapper a { color: var(--primary-700); }
.form-error-msg { color: var(--danger); }
/* password strength meter (password.min.js renders a bar) */
.password-strength .progress, .pw-strength .progress { height: 6px; border-radius: var(--r-pill); }
.password-strength .progress-bar { background: var(--grad) !important; }

/* =========================================================================
   PRODUCT DETAIL — bespoke "first view": gallery stage + buy box
   Markup: productdetails/image.tpl + productdetails/details.tpl.
   the stock template's twin slick carousels are gone; one stage + one 4-up rail remain.
   ========================================================================= */
.rz-pdp { align-items: flex-start; row-gap: clamp(28px, 4vw, 48px); }

/* ---------- Gallery ------------------------------------------------------ */
@media (min-width: 992px) {
    .rz-pdp-gallery-col { position: sticky; top: 96px; }
}
.rz-gallery { position: relative; }
.rz-gallery-stage-wrap { position: relative; }

.rz-gallery-stage,
.rz-gallery-main {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: var(--sh-sm);
    cursor: zoom-in;
    aspect-ratio: 1 / 1;
}
.rz-gallery-stage-img,
.rz-gallery-main img {
    display: block;
    width: 100%;
    height: 100%;
    /* `contain`, not `cover`: JTL product images are not guaranteed square, and
       the stock template's own .square-image centres rather than crops. Cropping the main
       product photo would cut the product out of frame for many shops. */
    object-fit: contain;
    transition: transform .15s var(--ease);
    will-change: transform;
}
.rz-gallery-stage.is-zooming,
.rz-gallery-main.is-zooming { cursor: zoom-out; }

.rz-zoom-hint {
    position: absolute;
    right: 14px; bottom: 14px;
    z-index: 2;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    color: var(--ink);
    box-shadow: var(--sh-sm);
    pointer-events: none;
    transition: opacity .2s var(--ease);
}
.rz-gallery-stage.is-zooming .rz-zoom-hint,
.rz-gallery-main.is-zooming .rz-zoom-hint { opacity: 0; }

.rz-gallery-expand {
    position: absolute;
    right: 14px; top: 14px;
    z-index: 3;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: rgba(255,255,255,.92);
    color: var(--ink);
    box-shadow: var(--sh-sm);
    cursor: pointer;
    transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.rz-gallery-expand:hover { background: var(--grad); color: #fff; transform: scale(1.06); }

/* wishlist / comparelist buttons over the stage. The id is needed to outrank
   the stock template's `.product-detail .product-actions { right:2rem; justify-content:center }`,
   which would otherwise stretch this box across the stage and centre the buttons. */
#image_wrapper .rz-gallery-actions {
    position: absolute;
    top: 14px; left: 14px; right: auto; bottom: auto;
    z-index: 3;
    width: auto;
    display: flex; flex-direction: column;
    align-items: flex-start; justify-content: flex-start;
    gap: 8px;
    margin: 0; padding: 0;
}
#image_wrapper .rz-gallery-actions .btn { margin: 0; }
.rz-gallery-actions .btn,
.rz-gallery-actions button,
.rz-gallery-actions a {
    width: 38px; height: 38px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50% !important;
    border: 0 !important;
    background: rgba(255,255,255,.92) !important;
    color: var(--ink) !important;
    box-shadow: var(--sh-sm) !important;
    transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.rz-gallery-actions .btn:hover,
.rz-gallery-actions button:hover,
.rz-gallery-actions a:hover {
    background: var(--grad) !important; color: #fff !important; transform: scale(1.06);
}

/* ---------- Thumbnail rail (exactly 4 visible) --------------------------- */
.rz-product-slider {
    position: relative;
    margin: 14px 0 0;
    padding: 0 30px;
}
.rz-product-slider-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 4px 2px 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) var(--line-2);
}
.rz-product-slider-track::-webkit-scrollbar { height: 6px; }
.rz-product-slider-track::-webkit-scrollbar-track { background: var(--line-2); border-radius: var(--r-pill); }
.rz-product-slider-track::-webkit-scrollbar-thumb { background: var(--primary); border-radius: var(--r-pill); }
.rz-product-slide {
    flex: 0 0 calc((100% - 30px) / 4); /* exactly 4 visible, 3 gaps of 10px */
    width: auto;
    margin: 0;
    padding: 0;
    scroll-snap-align: start;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    box-shadow: var(--sh-sm);
    overflow: hidden;
    cursor: pointer;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.rz-product-slide:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.rz-product-slide.is-selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary), var(--sh-sm);
}
.rz-product-slide-img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;   /* same never-crop rule as the stage */
    background: var(--surface);
}
.rz-product-slider-arrow {
    position: absolute;
    top: calc(50% - 8px);
    transform: translateY(-50%);
    z-index: 2;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--surface);
    color: var(--primary);
    box-shadow: var(--sh-md);
    cursor: pointer;
    transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), opacity .2s var(--ease);
}
.rz-product-slider-arrow:hover { background: var(--grad); color: #fff; }
.rz-product-slider-arrow:active { transform: translateY(-50%) scale(.94); }
.rz-product-slider-prev { left: -2px; }
.rz-product-slider-next { right: -2px; }
.rz-product-slider-arrow[disabled] { opacity: 0; pointer-events: none; }

/* ---------- Info column -------------------------------------------------- */
.rz-pdp-head {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 22px;
}
.rz-pdp-eyebrow {
    display: inline-flex; align-items: center; gap: .55em;
    font-family: var(--font-head); font-weight: 700;
    font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--primary);
}
.rz-pdp-eyebrow::before { content: ""; width: 20px; height: 2px; border-radius: 2px; background: var(--grad); }
.rz-pdp .product-title {
    font-size: clamp(1.5rem, 2.7vw, 2.15rem);
    letter-spacing: -.02em;
    margin: 12px 0 14px;
}
.rz-pdp-metarow {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 6px 22px;
    font-size: .85rem; color: var(--muted);
}
.rz-pdp-metarow .rating-wrapper { display: inline-flex; align-items: center; gap: .5em; }
.rz-pdp-metarow .rating-wrapper a { color: var(--muted); text-decoration: none; }
.rz-pdp-metarow .rating-wrapper a:hover { color: var(--primary); }
.rz-pdp-sku { position: relative; padding-left: 22px; }
.rz-pdp-sku::before {
    content: ""; position: absolute; left: 0; top: 50%;
    width: 1px; height: 14px; margin-top: -7px; background: var(--line);
}
.rz-pdp-shortdesc { color: var(--muted); line-height: 1.7; margin-bottom: 24px; max-width: 58ch; }

/* buy box */
.rz-pdp-buy {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--sh-sm);
    padding: clamp(18px, 2.2vw, 26px);
}
.rz-pdp-buy .price_wrapper .price,
.rz-pdp-buy .price_wrapper h1.price { font-size: clamp(1.55rem, 3vw, 2rem); line-height: 1.1; }
.rz-pdp-buy .stock-information { margin-top: 6px; }
.rz-pdp-buy .basket-details-add-to-cart,
.rz-pdp-buy .btn-add-to-cart { padding-block: .82rem; font-size: 1rem; }
.rz-pdp-buy .variations { margin-top: 18px; }
.rz-pdp-buy .question.btn-link { padding-right: 0; font-size: .85rem; }

/* trust strip */
.rz-pdp-trust {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 20px;
    margin: 22px 0 0;
}
.rz-pdp-trust li { display: flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--ink-2); }
.rz-pdp-trust i { color: var(--primary); width: 20px; text-align: center; font-size: 1rem; }

/* product facts */
.rz-pdp-facts { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 22px; }
.rz-pdp-facts-title {
    font-family: var(--font-head); font-weight: 600;
    font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 14px;
}
.info-essential { margin: 0; }
.info-essential li {
    display: grid;
    grid-template-columns: minmax(120px, 38%) 1fr;
    gap: 10px 16px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line-2);
    line-height: 1.5;
    margin: 0;
}
.info-essential li:last-child { border-bottom: 0; }
.info-essential li strong { font-weight: 500; color: var(--muted); margin: 0; }
.info-essential li > span,
.info-essential li > a { color: var(--ink); font-weight: 600; }
.info-essential .product-availability span { color: var(--success); }
.info-essential .adr-table { margin: 0; }

@media (max-width: 575.98px) {
    .rz-pdp-trust { grid-template-columns: 1fr; }
    .info-essential li { grid-template-columns: 1fr; gap: 2px; }
}

/* ===========================================================================
   MOBILE MENU (phone/tablet) — Razan design skin over the JTL menu markup
   Cosmetic only: colours, borders, spacing, type. Layout/offcanvas mechanics
   are left to the base so the toggle keeps working with JTL data.
   =========================================================================== */
@media (max-width: 991.98px) {
    /* Hamburger button → bordered, rounded box (red when open) */
    .burger-menu-wrapper.navbar-toggler,
    header .nav-mobile-header .navbar-toggler {
        width: 44px; height: 44px; padding: 0;
        display: inline-flex; align-items: center; justify-content: center;
        border: 1px solid var(--line) !important;
        border-radius: 12px;
        background: var(--surface);
        box-shadow: var(--sh-sm);
        transition: background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
    }
    .burger-menu-wrapper.navbar-toggler[aria-expanded="true"] {
        background: var(--grad) !important;
        border-color: transparent !important;
        box-shadow: var(--sh-brand);
    }
    .burger-menu-wrapper.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
        filter: brightness(0) invert(1); /* white bars on the red button */
    }

    /* The opened menu panel */
    #mainNavigation {
        background: var(--page);
        box-shadow: var(--sh-lg);
        border-right: 1px solid var(--line);
    }
    #mainNavigation .nav-mobile-header {
        border-bottom: 1px solid var(--line);
        padding-bottom: 8px; margin-bottom: 4px;
    }
    .nav-offcanvas-title,
    #mainNavigation .nav-mobile-heading { font-family: var(--font-head); }
    .nav-offcanvas-title { font-weight: 700; color: var(--ink); }

    /* Top-level items → clean full-width rows with dividers */
    #mainNavigation .nav-scrollbar-inner > .nav-item > .nav-link {
        display: flex; align-items: center;
        font-family: var(--font-head);
        font-weight: 600;
        font-size: 1rem;
        color: var(--ink) !important;
        padding: 14px 6px;
        border-bottom: 1px solid var(--line-2);
        border-radius: 0;
    }
    #mainNavigation .nav-scrollbar-inner > .nav-item:last-child > .nav-link { border-bottom: 0; }
    #mainNavigation .nav-scrollbar-inner > .nav-item.active > .nav-link,
    #mainNavigation .nav-scrollbar-inner > .nav-item.active > .nav-link .nav-mobile-heading,
    #mainNavigation .nav-scrollbar-inner > .nav-item > .nav-link:hover,
    #mainNavigation .nav-scrollbar-inner > .nav-item > .nav-link:hover .nav-mobile-heading {
        color: var(--primary) !important;
    }
    /* push the sub-category caret to the right edge of the row */
    #mainNavigation .nav-scrollbar-inner > .nav-item > .nav-link.dropdown-toggle::after { margin-left: auto; }
}

/* ===========================================================================
   the stock template LEFTOVERS
   razan.css / razan_crit.css are now REBUILT from themes/razan/sass (which sets
   $primary: #E81C24), so the stock template's gold #F8BF00 exists in no compiled file any
   more. Two kinds of rule still belong here:
     a) the `border: 0` / `transform: none` resets — the stock template paints its nav and tab
        underlines as a 6px bottom-border on the SAME pseudo-element this skin
        uses for its own underline, so they stack whatever colour they are;
     b) colour overrides, kept as defence-in-depth should a stale gold build
        ever be re-shipped. Harmless while the CSS is built from source.
   =========================================================================== */
/* tabs: the stock template colours the active tab's border, not a pseudo-element */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link { border-color: transparent !important; color: var(--primary) !important; }

/* pagination: gold underline bar under the current page */
.page-item.active .page-link::after,
.page-item.active .page-text::after { display: none !important; }

/* pills */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link { background: var(--grad) !important; color: #fff !important; }

/* left nav panel (category boxes) */
aside .nav-panel > .nav > .active > .nav-link { border-bottom-color: var(--primary) !important; }

/* variation swatches keep a 1px gold border under the brand ring */
.swatches-image.active, .variation.swatches.active.swatches-image,
.swatches-text.active,  .variation.swatches.active.swatches-text { border-color: var(--primary) !important; }

/* generic link hover inside content (crit: `a:hover { color:#F8BF00 }`) */
#content a:not(.btn):not(.dropdown-item):not(.nav-link):hover { color: var(--primary-2); }

/* login box + tag cloud accents */
.box_login .register .fa { color: var(--primary) !important; }
.jqcloud-word.w5 { color: var(--primary) !important; }
.jqcloud-word a:hover { color: var(--primary) !important; }

/* checkout stepper + animated-button sweep also hard-code the gold */
.stepper .step-active .step-content::after,
.stepper .step-current .step-content::after { background: var(--grad) !important; }
.btn-animated .btn-outline-primary::after,
.btn-animated .btn-outline-primary:hover::after { background: var(--grad-soft) !important; }

/* count bubbles (cart · wishlist · compare) — the stock template paints `.fa-sup` gold
   globally, and the header's red version only exists inside the desktop
   media query, so mobile kept the gold. Recolour it everywhere. */
.fa-sup {
    background: var(--grad) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(232,28,36,.45);
}

/* =========================================================================
   CATEGORY LISTING — bespoke hero, toolbar, sub-category cards, tiles
   Markup: productlist/header.tpl, snippets/productlist_page_nav.tpl,
   productlist/result_options.tpl, productlist/item_box.tpl
   ========================================================================= */

/* ---------- Category hero ------------------------------------------------ */
.rz-cat-hero {
    position: relative;
    margin-bottom: clamp(28px, 4vw, 48px);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
}
.rz-cat-hero:not(.has-media) {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    padding-bottom: 22px;
}
.rz-cat-hero-media { position: absolute; inset: 0; z-index: 0; }
.rz-cat-hero-media img,
.rz-cat-hero-media .productlist-header-description-image {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;                     /* the stock template gives the banner image a bottom margin */
}
.rz-cat-hero.has-media::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(100deg, rgba(33,26,24,.88) 0%, rgba(33,26,24,.64) 46%, rgba(33,26,24,.12) 100%);
}
.rz-cat-hero-body { position: relative; z-index: 2; }
.rz-cat-hero.has-media .rz-cat-hero-body {
    padding: clamp(30px, 5vw, 66px) clamp(22px, 4vw, 56px);
    min-height: 260px;
    display: flex; flex-direction: column; justify-content: center;
}
.rz-cat-hero-eyebrow {
    display: inline-flex; align-items: center; gap: .55em;
    font-family: var(--font-head); font-weight: 700;
    font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--primary);
}
.rz-cat-hero-eyebrow::before { content: ""; width: 20px; height: 2px; border-radius: 2px; background: var(--grad); }
.rz-cat-hero-title {
    font-family: var(--font-head); font-weight: 700;
    font-size: clamp(1.7rem, 3.6vw, 2.7rem);
    letter-spacing: -.02em; line-height: 1.1;
    margin: 12px 0 0; color: var(--ink);
}
.rz-cat-hero .desc { margin-top: 14px; max-width: 62ch; }
.rz-cat-hero .desc p { margin: 0; color: var(--muted); line-height: 1.7; }
.rz-cat-hero-count {
    margin-top: 18px;
    font-family: var(--font-head); font-weight: 600;
    font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted-2);
}
/* the image variant inverts to light-on-dark */
.rz-cat-hero.has-media .rz-cat-hero-title { color: #fff; }
.rz-cat-hero.has-media .desc p { color: rgba(255,255,255,.82); }
.rz-cat-hero.has-media .rz-cat-hero-count { color: rgba(255,255,255,.6); }
.rz-cat-hero.has-media .rz-cat-hero-eyebrow { color: #fff; }
.rz-cat-hero.has-media .rz-cat-hero-eyebrow::before { background: #fff; }

/* ---------- Sub-category cards ------------------------------------------ */
.rz-subcats { margin-bottom: clamp(24px, 3vw, 40px); }
.rz-subcats .sub-categories {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--sh-sm);
    transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s;
    padding-bottom: 14px;
}
.rz-subcats .outer:hover .sub-categories,
.rz-subcats .sub-categories:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: transparent; }
.rz-subcats .subcategories-image { margin: 0 0 12px; overflow: hidden; background: var(--surface-2); }
.rz-subcats .subcategories-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.rz-subcats .sub-categories:hover .subcategories-image img { transform: scale(1.05); }
.rz-subcats .caption {
    font-family: var(--font-head); font-weight: 600; font-size: 1rem;
    padding: 0 16px; text-align: left;
}
.rz-subcats .caption a { color: var(--ink); text-decoration: none; }
.rz-subcats .caption a:hover { color: var(--primary); }
.rz-subcats .item_desc { padding: 0 16px; color: var(--muted); }
.rz-subcats ul { padding: 0 16px; list-style: none; margin: 0; }
.rz-subcats ul a { color: var(--muted); font-size: .86rem; text-decoration: none; }
.rz-subcats ul a:hover { color: var(--primary); }

/* ---------- Toolbar (filter, sort, per-page, view, pagination) ----------- */
hr.productlist-page-nav-top, hr.productlist-page-nav-bottom { display: none; }
.rz-toolbar {
    align-items: center;
    gap: 10px 14px;
    padding: 12px 16px;
    margin-bottom: clamp(20px, 2.5vw, 32px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    box-shadow: var(--sh-sm);
}
.rz-toolbar-footer { margin-top: clamp(20px, 2.5vw, 32px); margin-bottom: 0; }
.rz-toolbar .productlist-item-info {
    font-family: var(--font-head); font-weight: 600;
    font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted); margin-left: auto;
}
.rz-toolbar .productlist-item-border { border: 0; }
.rz-toolbar .btn-outline-secondary,
.rz-toolbar .dropdown-toggle {
    border-radius: var(--r-pill) !important;
    border: 1.5px solid var(--line) !important;
    font-family: var(--font-head); font-weight: 600; font-size: .84rem;
    color: var(--ink-2) !important;
    background: transparent !important;
}
.rz-toolbar .btn-outline-secondary:hover,
.rz-toolbar .dropdown-toggle:hover { border-color: var(--primary) !important; color: var(--primary) !important; }
.rz-toolbar .btn-group > .btn { margin-right: 6px; }
.rz-toolbar .btn-option.ed.active {
    background: var(--grad) !important; border-color: transparent !important; color: #fff !important;
    box-shadow: var(--sh-brand);
}
.rz-toolbar .pagination { margin: 0; }
.rz-toolbar .navbar-pagination { padding: 0; }
#result-options { background: transparent; border: 0; padding: 0; }
#result-options #js-filters .fa-filter { margin-right: .5em; }

/* ---------- Product tile -------------------------------------------------- */
.rz-tile .productbox-inner {
    display: flex; flex-direction: column; height: 100%;
    padding-bottom: 16px;
}
.rz-tile .productbox-image, .rz-tile .productbox-images {
    border-radius: var(--r) var(--r) 0 0;
    overflow: hidden;
    background: var(--surface-2);
}
.rz-tile .productbox-title { padding: 0 16px; margin-top: 14px; }
.rz-tile .productbox-title a {
    font-family: var(--font-head); font-weight: 600; font-size: .98rem; line-height: 1.4;
    color: var(--ink); text-decoration: none;
}
.rz-tile .productbox-title a:hover { color: var(--primary); }
.rz-tile .rating, .rz-tile .product-rating { padding: 0 16px; margin-top: 8px; }
.rz-tile [itemprop=offers] { padding: 0 16px; margin-top: 8px; }
.rz-tile .price { font-family: var(--font-head); font-weight: 800; font-size: 1.1rem; }
.rz-tile .rz-tile-buy { margin: 14px 16px 0; border-radius: var(--r-pill) !important; }

/* quick actions float over the image and fade in on hover */
.rz-tile .productbox-quick-actions {
    position: absolute; top: 12px; right: 12px; z-index: 3;
    display: flex; flex-direction: column; gap: 8px;
    opacity: 0; transform: translateX(6px);
    transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.rz-tile:hover .productbox-quick-actions { opacity: 1; transform: none; }
.rz-tile .productbox-quick-actions .btn,
.rz-tile .productbox-quick-actions button {
    width: 36px; height: 36px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50% !important; border: 0 !important;
    background: rgba(255,255,255,.94) !important;
    color: var(--ink) !important;
    box-shadow: var(--sh-sm) !important;
}
.rz-tile .productbox-quick-actions .btn:hover,
.rz-tile .productbox-quick-actions button:hover { background: var(--grad) !important; color: #fff !important; }
.rz-tile .ribbon, .rz-tile .ribbon-sale { top: 12px; left: 12px; z-index: 3; }

@media (max-width: 991.98px) {
    .rz-toolbar { border-radius: var(--r); }
    .rz-toolbar .productlist-item-info { margin-left: 0; }
    .rz-cat-hero.has-media .rz-cat-hero-body { min-height: 200px; }
}

/* ---------- Category listing: corrections ------------------------------- */

/* The tile's inner {row}/{col} still carry bootstrap gutters, which inset the
   image from the card edge and push the buy button past it. Zero them and let
   the text blocks own their padding. */
.rz-tile .productbox-inner > .row { margin: 0; flex: 1 1 auto; align-content: flex-start; }
.rz-tile .productbox-inner > .row > [class*="col-"] { padding: 0; }
/* last column becomes the flex context that pins the buy button to the bottom,
   so tiles with 1- and 2-line titles still line their buttons up */
.rz-tile .productbox-inner > .row > [class*="col-"]:last-child {
    display: flex; flex-direction: column; flex: 1 1 auto;
}
.rz-tile .rz-tile-buy { margin: 14px 16px 0; }
.rz-tile .productbox-inner > .row > [class*="col-"]:last-child > .rz-tile-buy { margin-top: auto; }

/* the view toggle is a 40px icon button — the full brand shadow is far too loud */
.rz-toolbar .btn-option.ed.active { box-shadow: 0 4px 12px rgba(232,28,36,.28) !important; }

/* Pagination: above 768px the stock template turns the page dropdown into an inline row of
   page numbers (`.pagination .dropdown-menu { position:static; display:flex }`).
   The Razan .dropdown-menu skin uses !important, so without this reset those
   page numbers render inside a bordered, rounded, padded popover box. */
@media (min-width: 768px) {
    .pagination .dropdown-menu {
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        background: transparent !important;
        animation: none !important;
    }
    .pagination .dropdown-item { border-radius: var(--r-sm); }
    .pagination .dropdown-item:hover .page-link { color: var(--primary); }
}
.rz-toolbar .pagination .page-link {
    border: 0;
    background: transparent;
    color: var(--ink-2);
    font-family: var(--font-head); font-weight: 600;
    border-radius: var(--r-pill) !important;
}
.rz-toolbar .pagination .page-item.active .page-link { color: var(--primary); }
.rz-toolbar .pagination .page-item.disabled .page-link { opacity: .35; }

/* =========================================================================
   CART — bespoke page head, line items, summary rail, empty state
   Markup: basket/index.tpl + basket/cart_items.tpl (line-item grid untouched)
   ========================================================================= */

/* shared page head, reused by cart / checkout / account */
.rz-page-head { margin-bottom: clamp(22px, 3vw, 34px); }
.rz-page-title {
    font-family: var(--font-head); font-weight: 700;
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    letter-spacing: -.02em; line-height: 1.1;
    color: var(--ink); margin: 12px 0 0;
}
.rz-page-sub {
    margin-top: 8px;
    font-family: var(--font-head); font-weight: 600;
    font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted-2);
}

/* ---------- Line items --------------------------------------------------- */
.rz-cart-items .cart-items-header {
    font-family: var(--font-head); font-weight: 600;
    font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted-2);
}
.rz-cart-items .cart-items-header hr { display: none; }
.rz-cart-items .cart-items-body {
    align-items: center;
    padding: 18px 16px;
    margin: 0 0 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--sh-sm);
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.rz-cart-items .cart-items-body:hover { box-shadow: var(--sh-md); }
.rz-cart-items .cart-items-image img,
.rz-cart-items .cart-items-image .image {
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--surface-2);
}
.rz-cart-items .cart-items-name {
    font-family: var(--font-head); font-weight: 600; font-size: 1rem;
    color: var(--ink); text-decoration: none; line-height: 1.4;
}
.rz-cart-items .cart-items-name:hover { color: var(--primary); }
.rz-cart-items .cart-items-price .price_overall,
.rz-cart-items .price_overall {
    font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; color: var(--ink);
}
.rz-cart-items .cart-items-delete-button {
    color: var(--muted-2) !important;
    border-radius: 50% !important;
    width: 34px; height: 34px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .16s, color .16s;
}
.rz-cart-items .cart-items-delete-button:hover { background: #fdecef !important; color: var(--danger) !important; }

/* ---------- Summary rail -------------------------------------------------- */
@media (min-width: 992px) { .rz-cart-summary.sticky-top { top: 96px; } }
.rz-summary-heading {
    font-family: var(--font-head); font-weight: 700;
    font-size: 1.15rem; color: var(--ink);
    margin-bottom: 16px;
}
.rz-cart-summary .card,
.rz-cart-summary .card-gray {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r) !important;
    box-shadow: var(--sh-sm);
    padding: clamp(16px, 2vw, 22px);
    margin-bottom: 16px;
}
.rz-cart-summary .card-header, .rz-cart-summary .card-body { background: transparent; border: 0; padding: 0; }
.rz-cart-summary .card-header strong { font-family: var(--font-head); cursor: pointer; }
.rz-cart-summary .row { margin: 0; }
/* the summary rail is only col-lg-3 wide in checkout, where the stock template's col-7/col-5
   split makes "Gesamtsumme" and the amount wrap onto two lines each. Let these
   rows size to their content instead. (Not applied to the col-1/col-10 notices.) */
.rz-cart-summary .total-net,
.rz-cart-summary .tax,
.rz-cart-summary .customer-credit,
.rz-cart-summary .basket-summary-total {
    display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 12px;
}
.rz-cart-summary .total-net > [class*="col-"],
.rz-cart-summary .tax > [class*="col-"],
.rz-cart-summary .customer-credit > [class*="col-"],
.rz-cart-summary .basket-summary-total > [class*="col-"] {
    flex: 0 1 auto; width: auto; max-width: none; padding: 0; white-space: nowrap;
}
.rz-cart-summary .total-net > [class*="col-"]:first-child,
.rz-cart-summary .tax > [class*="col-"]:first-child,
.rz-cart-summary .basket-summary-total > [class*="col-"]:first-child { white-space: normal; }
.rz-cart-summary .total-net,
.rz-cart-summary .tax,
.rz-cart-summary .customer-credit { padding: 6px 0; color: var(--muted); font-size: .9rem; }
.rz-cart-summary .price-col { font-family: var(--font-head); font-weight: 600; color: var(--ink-2); }
.rz-cart-summary .basket-summary-total {
    margin-top: 12px; padding-top: 14px;
    border-top: 1.5px solid var(--line);
    align-items: baseline;
}
.rz-cart-summary .basket-summary-total .price_label {
    font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--ink);
}
.rz-cart-summary .basket-summary-total .total-sum {
    font-family: var(--font-head); font-weight: 800; font-size: 1.55rem; color: var(--ink);
}
.rz-cart-summary .shipping-costs { padding-top: 8px; color: var(--muted); }
#cart-checkout-btn {
    display: flex; align-items: center; justify-content: center; gap: .6em;
    width: 100%;
    margin-top: 18px;
    padding-block: .9rem;
    font-size: 1rem;
    border-radius: var(--r-pill) !important;
}
.rz-summary-trust { margin: 18px 0 0; display: grid; gap: 10px; }
.rz-summary-trust li { display: flex; align-items: center; gap: 10px; font-size: .82rem; color: var(--muted); }
.rz-summary-trust i { color: var(--primary); width: 18px; text-align: center; }

/* coupon */
.rz-cart-summary #coupon-form .form-control { border-radius: var(--r-pill) !important; }
.rz-cart-summary #basket-coupon-form .btn { border-radius: var(--r-pill) !important; margin-top: 10px; }

/* notices under the summary */
.basket-summary-notice,
.basket-summary-notice-weight-wrapper {
    margin: 0 0 10px;
    padding: 12px 14px;
    background: var(--grad-soft);
    border-radius: var(--r-sm);
    color: var(--primary-700);
    font-size: .84rem;
    align-items: center;
}
.basket-summary-notice i, .basket-summary-notice-weight-wrapper i { color: var(--primary); }

/* ---------- Empty state --------------------------------------------------- */
.rz-cart-empty {
    text-align: center;
    padding: clamp(40px, 7vw, 80px) 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
}
.rz-cart-empty-icon {
    width: 88px; height: 88px; margin: 0 auto 22px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--grad-soft);
    color: var(--primary);
    font-size: 2rem;
}
.rz-cart-empty-title {
    font-family: var(--font-head); font-weight: 700;
    font-size: clamp(1.2rem, 2.4vw, 1.6rem); color: var(--ink);
}
.rz-cart-empty-text { margin: 12px auto 26px; max-width: 44ch; color: var(--muted); line-height: 1.7; }

/* =========================================================================
   CHECKOUT — page head, stepper, section panels, order-completed hero
   Markup: checkout/index.tpl, inc_steps.tpl, step3_shipping_options.tpl,
   step5_confirmation.tpl, order_completed.tpl
   (address forms are left alone — they are field markup, styled via .form-control)
   ========================================================================= */
.rz-checkout-head { text-align: center; margin-bottom: clamp(24px, 3vw, 40px); }
.rz-checkout-head .eyebrow { justify-content: center; }

/* ---------- Stepper ------------------------------------------------------ */
/* the stock template's `.stepper` is a chevron/arrow bar: it paints a white panel behind the
   active step, draws triangle separators with `.step::before/::after` (huge
   transparent borders), and underlines the current step via
   `.step-content::after`. All of that has to be switched off first, otherwise
   the connector line below inherits the triangle's borders and blows up. */
.rz-stepper.stepper {
    background: transparent !important;
    border: 0 !important;
    overflow: visible !important;
}
.rz-stepper .step::before,
.rz-stepper .step::after { display: none !important; }
.rz-stepper .step .step-content::after { display: none !important; }
.rz-stepper .step.step-active,
.rz-stepper .step.step-current { background: transparent !important; }

.rz-stepper {
    display: flex; align-items: flex-start; justify-content: center;
    gap: 0;
    margin: 0 auto clamp(30px, 4vw, 52px);
    max-width: 760px;
    list-style: none; padding: 0;
}
/* Every level from .step down to .step-content must be block-level flex. the stock template's
   .step-content is inline-flex, and an inline-level box sits in a line box —
   the leading above it pushed the bubble ~50px below the step's top edge, so a
   connector positioned from the step's top landed above the bubbles. */
.rz-stepper .step {
    position: relative;
    flex: 1 1 0;
    text-align: center;
    padding: 0 !important;
    max-width: none;
    display: flex; flex-direction: column; align-items: center;
}
.rz-stepper .step > a {
    display: flex; flex-direction: column; align-items: center;
    width: 100%;
    text-decoration: none;
}
.rz-stepper .step .step-content {
    position: relative; z-index: 1;
    min-height: 0;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    background: transparent;
    padding: 0;
    width: 100%;
}
/* the bubble is opaque, so the connector passes behind it rather than through */
.rz-stepper .step .badge { position: relative; z-index: 1; }
.rz-stepper .step a { text-decoration: none; }
/* the numbered bubble */
.rz-stepper .step .badge,
.rz-stepper .step .badge-pill {
    /* `.checkout-steps .badge-pill { margin-left: auto }` shoves the bubble to
       the right edge of the step once the content is a centred flex column */
    margin: 0 !important;
    width: 40px; height: 40px; padding: 0;
    border-radius: 50% !important;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-head); font-weight: 700; font-size: .9rem;
    background: var(--surface) !important;
    color: var(--muted-2) !important;
    border: 2px solid var(--line);
    text-transform: none;
    letter-spacing: 0;
    transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.rz-stepper .step.step-active .badge,
.rz-stepper .step.step-current .badge,
.rz-stepper .step .badge-primary {
    background: var(--grad) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 6px 18px rgba(232,28,36,.3);
}
.rz-stepper .step-text {
    /* the stock template pushes the label with `margin-left:1rem; margin-right:auto` */
    margin: 0 !important;
    font-family: var(--font-head); font-weight: 600;
    font-size: .8rem !important; letter-spacing: .04em;
    color: var(--muted);
    max-width: 16ch; line-height: 1.35;
}
.rz-stepper .step.step-current .step-text,
.rz-stepper .step.step-active .step-text { color: var(--ink); }
/* completed tick, pinned to the bubble's top-right */
.rz-stepper .step-check {
    position: absolute;
    top: -2px; left: calc(50% + 11px); right: auto;
    margin: 0 !important;
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--success) !important; color: #fff !important;
    font-size: 9px;
}
/* Connector between bubbles. It hangs off .step-content rather than .step,
   because .step-content's top edge IS the bubble's top edge — the step box also
   contains whatever leading the anchor/label introduce, so measuring from there
   put the line above the bubbles. ::before is used since the stock template owns ::after. */
.rz-stepper .step:not(:last-child) .step-content::before {
    content: ""; display: block; position: absolute; z-index: 0;
    top: 19px; left: 50%; right: -50%; bottom: auto;
    width: auto; height: 2px;
    border: 0;
    background: var(--line);
}
/* a segment only lights up once the step it leads TO is reached, so the bar
   between "current" and "not yet" stays grey. Degrades to grey without :has(). */
.rz-stepper .step.step-active:has(+ .step.step-active) .step-content::before { background: var(--grad); }

/* ---------- Section panels ----------------------------------------------- */
.rz-checkout fieldset {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--sh-sm);
    padding: clamp(18px, 2.4vw, 30px);
    margin-bottom: 20px;
}
.rz-checkout fieldset > hr { display: none; }
.rz-checkout-legend {
    font-family: var(--font-head); font-weight: 700;
    font-size: 1.15rem !important; color: var(--ink);
    margin-bottom: 6px;
}
.checkout-shipping-form-change { color: var(--muted); font-size: .88rem; margin-bottom: 18px; }
.checkout-shipping-form-change .btn-link { padding: 0 0 0 .5em; font-size: .85rem; }

/* selectable shipping / payment / packaging cards (markup already the stock template-generic) */
.checkout-shipping-form-options .custom-control,
.checkout-payment-method,
.checkout-shipping-form-packaging {
    border: 1.5px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    padding: 16px 18px 16px 46px;
    margin-bottom: 12px;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.checkout-shipping-form-options .custom-control:hover,
.checkout-payment-method:hover,
.checkout-shipping-form-packaging:hover { border-color: var(--primary); box-shadow: var(--sh-sm); }
.checkout-shipping-form-options .custom-control:has(:checked),
.checkout-payment-method:has(:checked),
.checkout-shipping-form-packaging:has(:checked) {
    border-color: var(--primary);
    background: var(--grad-soft);
    box-shadow: var(--sh-sm);
}
.checkout-shipping-form-options .content { align-items: center; }
.checkout-shipping-form-options .content .title,
.checkout-payment-method label strong {
    font-family: var(--font-head); font-weight: 600; color: var(--ink);
}
.checkout-shipping-form-options .desc { color: var(--info) !important; }
.checkout-shipping-form-options .price-col,
.checkout-payment-method .price-col,
.checkout-shipping-form-packaging-cost {
    font-family: var(--font-head); font-weight: 700; color: var(--ink);
}
.checkout-payment-method-badge { background: var(--grad-soft) !important; color: var(--primary-700) !important; }
.checkout-payment-method-note { color: var(--muted); font-size: .85rem; }

/* confirmation + totals */
.checkout-confirmation-billing-address,
.checkout-confirmation-shipping,
.card-products {
    border: 1px solid var(--line) !important;
    border-radius: var(--r) !important;
    background: var(--surface);
    box-shadow: var(--sh-sm);
}
.checkout-confirmation-heading { font-family: var(--font-head); font-weight: 700; color: var(--ink); }
.checkout-confirmation-change { color: var(--primary-700) !important; font-size: .85rem; }
.checkout-items-total-total .total-sum,
.checkout-items-total .total-sum {
    font-family: var(--font-head); font-weight: 800; color: var(--ink); font-size: 1.45rem;
}
.checkout-confirmation-legal-notice { color: var(--ink-2); }
.checkout-button-row .btn, .button-row-mb { border-radius: var(--r-pill) !important; }

/* ---------- Order completed ---------------------------------------------- */
.rz-order-done {
    text-align: center;
    padding: clamp(40px, 6vw, 76px) 20px clamp(24px, 3vw, 36px);
}
.rz-order-done-check {
    width: 88px; height: 88px; margin: 0 auto 24px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--grad);
    color: #fff; font-size: 2.1rem;
    box-shadow: var(--sh-brand);
    animation: rzPop .5s var(--ease);
}
@keyframes rzPop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rz-order-done-check { animation: none; } }
.rz-order-done-title {
    font-family: var(--font-head); font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2.2rem); letter-spacing: -.02em;
    color: var(--ink); margin: 0;
}
.rz-order-done-text { margin: 14px auto 0; max-width: 48ch; color: var(--muted); line-height: 1.7; }
.rz-order-done-actions { display: flex; justify-content: center; margin-top: 28px; }
.rz-order-done-actions .btn { display: inline-flex; align-items: center; gap: .6em; padding-inline: 2rem; }
.order-completed .order-confirmation, .order-confirmation {
    border: 1px solid var(--line); border-radius: var(--r-lg);
    background: var(--surface); box-shadow: var(--sh-sm);
}

@media (max-width: 575.98px) {
    .rz-stepper .step-text { font-size: .7rem; max-width: 10ch; }
    .rz-stepper .step .badge, .rz-stepper .step .badge-pill { width: 34px; height: 34px; }
    .rz-stepper .step:not(:last-child)::after { top: 17px; }
}

/* =========================================================================
   ACCOUNT — sidebar-nav shell, dashboard, orders, auth card
   Markup: account/index.tpl (shell), my_account.tpl, orders.tpl, login.tpl.
   Sub-page forms/tables inherit the shared card / form / table skins.
   ========================================================================= */
.rz-account { row-gap: clamp(24px, 3vw, 40px); }

/* ---------- Sidebar nav -------------------------------------------------- */
@media (min-width: 992px) { .rz-account-aside { position: sticky; top: 96px; align-self: flex-start; } }
.rz-account-nav {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--sh-sm);
    padding: 14px;
}
.rz-account-id {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 8px 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--line-2);
}
.rz-account-avatar {
    flex: 0 0 44px; width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--grad); color: #fff;
    font-family: var(--font-head); font-weight: 700; font-size: .95rem;
    text-transform: uppercase; letter-spacing: .02em;
}
.rz-account-id-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.rz-account-id-body strong { font-family: var(--font-head); color: var(--ink); font-size: .95rem; }
.rz-account-id-body small { color: var(--muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rz-account-nav-list { margin: 0; }
.rz-account-nav-link,
.rz-account-nav-logout {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 12px;
    border-radius: var(--r-sm);
    font-family: var(--font-head); font-weight: 600; font-size: .92rem;
    color: var(--ink-2); text-decoration: none;
    transition: background .15s var(--ease), color .15s var(--ease);
}
.rz-account-nav-link i,
.rz-account-nav-logout i { width: 20px; text-align: center; color: var(--muted-2); font-size: .95rem; transition: color .15s; }
.rz-account-nav-link:hover { background: var(--grad-soft); color: var(--primary); }
.rz-account-nav-link:hover i { color: var(--primary); }
.rz-account-nav-link.is-active {
    background: var(--grad-soft); color: var(--primary-700);
    position: relative;
}
.rz-account-nav-link.is-active i { color: var(--primary); }
.rz-account-nav-link.is-active::before {
    content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
    width: 3px; border-radius: 3px; background: var(--grad);
}
.rz-account-nav-logout {
    margin-top: 8px; padding-top: 16px;
    border-top: 1px solid var(--line-2);
    color: var(--muted);
}
.rz-account-nav-logout:hover { color: var(--danger); }
.rz-account-nav-logout:hover i { color: var(--danger); }

/* ---------- Dashboard head + credit ------------------------------------- */
.rz-account-head .rz-account-head-sub { margin-top: 10px; color: var(--muted); max-width: 62ch; line-height: 1.65; }
.rz-account-credit {
    display: inline-flex; align-items: center; gap: 12px;
    margin-bottom: clamp(20px, 3vw, 30px);
    padding: 14px 20px;
    background: var(--grad-soft);
    border: 1px solid rgba(232,28,36,.18);
    border-radius: var(--r);
    font-size: .92rem; color: var(--ink-2);
}
.rz-account-credit i { color: var(--primary); font-size: 1.1rem; }
.rz-account-credit strong { font-family: var(--font-head); font-weight: 800; color: var(--ink); font-size: 1.1rem; }

/* ---------- Dashboard cards --------------------------------------------- */
.rz-account-cards { row-gap: 20px; }
.rz-account-cards .account-data-item .card,
.account-head-data-credit {
    height: 100%;
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r) !important;
    box-shadow: var(--sh-sm);
    overflow: hidden;
    transition: box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.rz-account-cards .account-data-item .card:hover { box-shadow: var(--sh-md); }
.rz-account-cards .card-header {
    background: transparent; border-bottom: 1px solid var(--line-2);
    padding: 16px 18px;
}
.rz-account-cards .card-header .h3,
.rz-account-cards .card-header .h3 a {
    font-family: var(--font-head); font-weight: 700; font-size: 1.05rem;
    color: var(--ink); text-decoration: none; margin: 0;
}
.rz-account-cards .card-header .h3 a:hover { color: var(--primary); }
.rz-account-cards .card-header .font-size-sm a { color: var(--primary-700); font-weight: 600; }
.rz-account-cards .card-body { padding: 18px; }
.rz-account-cards .table { margin: 0; color: var(--ink-2); }
.rz-account-cards .table td { border-color: var(--line-2); vertical-align: middle; }
.rz-account-cards .table tr:first-child td { border-top: 0; }
.rz-account-cards .clickable-row { cursor: pointer; transition: background .15s; }
.rz-account-cards .clickable-row:hover { background: var(--surface-2); }
.rz-account-cards .table .fa-pencil-alt,
.rz-account-cards .table .fa-eye { color: var(--muted-2); transition: color .15s; }
.rz-account-cards .table a:hover .fa-pencil-alt,
.rz-account-cards .clickable-row:hover .fa-eye { color: var(--primary); }
.rz-account-cards .custom-switch .custom-control-input:checked ~ .custom-control-label::before { background: var(--grad); border-color: transparent; }

/* delete / logout action row at the bottom of the dashboard */
.btn-row .btn { border-radius: var(--r-pill) !important; }

/* ---------- Orders list -------------------------------------------------- */
.rz-order-row.card {
    border: 1px solid var(--line) !important;
    border-radius: var(--r) !important;
    box-shadow: var(--sh-sm);
    margin-bottom: 12px;
    transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s;
}
.rz-order-row.card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: transparent; }
.rz-order-row .card-header { background: transparent; border: 0; padding: 16px 20px; }
.rz-order-row a { color: var(--ink-2); text-decoration: none; }
.rz-order-row a:hover { color: var(--primary); }
.rz-order-row strong { font-family: var(--font-head); color: var(--ink); }
.rz-order-row .fa-eye { color: var(--muted-2); }
.rz-order-row:hover .fa-eye { color: var(--primary); }

/* ---------- Auth card (login / register) --------------------------------- */
.rz-auth-head { text-align: center; }
.rz-auth-head .eyebrow { justify-content: center; }
.rz-auth-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-md);
    padding: clamp(24px, 4vw, 40px);
}
.rz-auth-card fieldset { border: 0; padding: 0; margin: 0; }
.rz-auth-card legend {
    font-family: var(--font-head); font-weight: 700; font-size: 1.15rem;
    color: var(--ink); border: 0; margin-bottom: 20px; width: auto;
}
.rz-auth-card .login-form-submit .btn { padding-block: .8rem; margin-top: 4px; }
.rz-auth-card .register-wrapper,
.rz-auth-card .resetpw-wrapper { display: block; text-align: center; margin-top: 14px; font-size: .9rem; color: var(--muted); }
.rz-auth-card .register-wrapper .register,
.rz-auth-card .resetpw-wrapper .resetpw { color: var(--primary-700); font-weight: 600; }

@media (max-width: 991.98px) {
    .rz-account-nav { padding: 10px; }
    .rz-account-nav-list { display: flex; flex-wrap: wrap; gap: 4px; }
    .rz-account-nav-list li { flex: 1 1 auto; }
    .rz-account-nav-link { justify-content: center; }
    .rz-account-nav-link.is-active::before { display: none; }
    .rz-account-id { width: 100%; }
}

/* =========================================================================
   SECONDARY PAGES — 404 hero, manufacturer grid
   (blog, contact, newsletter, comparelist, sitemap already inherit the shared
   card / form / table skins; they only gained an rz-page-head this pass)
   ========================================================================= */

/* ---------- 404 ---------------------------------------------------------- */
.rz-404-hero {
    text-align: center;
    padding: clamp(36px, 6vw, 72px) 20px clamp(20px, 3vw, 32px);
}
.rz-404-code {
    font-family: var(--font-head); font-weight: 800;
    font-size: clamp(4.5rem, 16vw, 9rem); line-height: 1;
    letter-spacing: -.04em;
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rz-404-title {
    font-family: var(--font-head); font-weight: 700;
    font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -.02em;
    color: var(--ink); margin: 8px 0 0;
}
.rz-404-text { margin: 14px auto 0; max-width: 52ch; color: var(--muted); line-height: 1.7; }
.rz-404-actions { margin-top: 26px; display: flex; justify-content: center; }
.rz-404-actions .btn { display: inline-flex; align-items: center; gap: .55em; padding-inline: 2rem; }
/* the embedded sitemap becomes "helpful links" under a hairline */
.rz-404-sitemap {
    margin-top: clamp(28px, 4vw, 48px);
    padding-top: clamp(24px, 3vw, 36px);
    border-top: 1px solid var(--line);
}

/* ---------- Manufacturer grid -------------------------------------------- */
.rz-mft-grid { row-gap: 24px; }
.rz-mft-card {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    height: 100%;
    padding: 22px 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--sh-sm);
    text-decoration: none;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
}
.rz-mft-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: transparent; }
.rz-mft-logo {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 96px;
}
.rz-mft-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.rz-mft-name {
    font-family: var(--font-head); font-weight: 600; font-size: .92rem;
    color: var(--ink-2); text-align: center;
}
.rz-mft-card:hover .rz-mft-name { color: var(--primary); }

/* =========================================================================
   the stock template STRUCTURAL NEUTRALIZATION — global bespoke layer
   Converts the stock template's remaining generic patterns (section legends, dividers,
   quotes, wells, list-groups, order summaries, address blocks, media grids)
   to the Razan look in one place, keyed off the stock template's own classes. Every rule
   is guarded with :not([class*="rz-"]) or scoped away from rebuilt areas so
   it never overrides bespoke work.
   ========================================================================= */

/* ---------- Section legends (form/section headings the stock template left bare) ------- */
legend:not([class*="rz-"]),
.subheadline:not([class*="rz-"]),
.section-heading:not([class*="rz-"]),
form .h2:not([class*="rz-"]),
form .h3:not([class*="rz-"]),
fieldset > .h2:not([class*="rz-"]),
fieldset > .h3:not([class*="rz-"]),
.tab-content .h3:not([class*="rz-"]),
#newsContent > .h2:not([class*="rz-"]),
.blog-details .h2:not([class*="rz-"]),
.order-details .h2:not([class*="rz-"]),
.order-details .h3:not([class*="rz-"]),
.newsletter-content .h2:not([class*="rz-"]),
.newsletter-content .h3:not([class*="rz-"]) {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--ink);
    letter-spacing: -.005em;
    display: block;
    width: auto;
    max-width: none;
    margin: 0 0 16px;
    padding: 0 0 0 14px;
    border: 0;
    position: relative;
}
legend:not([class*="rz-"])::before,
.subheadline:not([class*="rz-"])::before,
.section-heading:not([class*="rz-"])::before,
form .h2:not([class*="rz-"])::before,
form .h3:not([class*="rz-"])::before,
fieldset > .h2:not([class*="rz-"])::before,
fieldset > .h3:not([class*="rz-"])::before,
.tab-content .h3:not([class*="rz-"])::before,
#newsContent > .h2:not([class*="rz-"])::before,
.blog-details .h2:not([class*="rz-"])::before,
.order-details .h2:not([class*="rz-"])::before,
.order-details .h3:not([class*="rz-"])::before,
.newsletter-content .h2:not([class*="rz-"])::before,
.newsletter-content .h3:not([class*="rz-"])::before {
    content: "";
    position: absolute; left: 0; top: 2px; bottom: 2px;
    width: 3px; border-radius: 3px;
    background: var(--grad);
}
.subheadline:not([class*="rz-"]) {
    font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--primary); font-weight: 700;
}

/* ---------- Content dividers (bare the stock template <hr>) ---------------------------- */
#content hr:not([class*="rz-"]):not(.dropdown-divider) {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 22px 0;
}

/* ---------- Quotes / replies (reviews, blog comments) -------------------
   Scoped to review/comment contexts, NOT all #content — a bare `#content
   blockquote` (id specificity) would override the home testimonial
   `.rz-quote blockquote`. */
.reviews blockquote,
.review-item blockquote,
#newsContent blockquote,
.review-reply,
.blog-details blockquote {
    position: relative;
    margin: 0;
    padding: 14px 18px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--primary);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    color: var(--ink-2); line-height: 1.6;
}
.review-reply { margin-top: 12px; margin-left: 18px; }
.blockquote-footer,
.review-reply .subheadline { color: var(--muted); font-size: .85rem; margin-top: 6px; }
.blockquote-divider { display: none; }
.verified-purchase, .verified-purchase-notice { color: var(--success) !important; font-weight: 600; }

/* ---------- Legal-page wells (AGB / Datenschutz / Widerruf) ------------- */
.well, .well-sm {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--sh-sm);
    padding: clamp(20px, 3vw, 34px);
    color: var(--ink-2); line-height: 1.75;
}
.well h2, .well h3, .well-sm h2, .well-sm h3 { font-family: var(--font-head); color: var(--ink); }

/* ---------- List groups (blog comments, wizard questions) --------------- */
.list-group:not([class*="rz-"]) { border-radius: var(--r); }
.list-group-item:not([class*="rz-"]) {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink-2);
}
.list-group-flush > .list-group-item:not([class*="rz-"]) {
    border-left: 0; border-right: 0;
    padding: 16px 4px;
}

/* ---------- Order summary lists / totals (account + checkout) ----------- */
.order-details-data, .order-items {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--sh-sm);
    padding: clamp(16px, 2vw, 24px);
}
.order-details-data dl, .order-details-data dt, .order-details-data dd { margin: 0; }
.order-details-data dt { color: var(--muted); font-weight: 500; }
.order-details-data dd { color: var(--ink); font-family: var(--font-head); font-weight: 600; margin-bottom: 8px; }
.order-items .price_label, .checkout-items .price_label,
.order-items .tax_label, .checkout-items .tax_label { color: var(--muted); }
.order-items .total-sum, .checkout-items .total-sum,
.checkout-items-total .total-sum {
    font-family: var(--font-head); font-weight: 800; color: var(--ink);
}
.order-items-total, .checkout-items-total { border-top: 1.5px solid var(--line); }

/* ---------- Address blocks (checkout confirmation, address pickers) ----- */
.checkout-confirmation-billing-address,
.checkout-confirmation-shipping,
.dt-address {
    color: var(--ink-2); line-height: 1.6;
}
.checkout-confirmation-billing-address .title,
.checkout-confirmation-shipping .title,
p > strong.title {
    font-family: var(--font-head); font-weight: 700; color: var(--ink);
    display: inline-block; margin-bottom: 4px;
}
/* DataTables address picker rows → card-like rows */
table.dataTable.display .dt-address,
.address-select-table td { vertical-align: middle; }

/* ---------- Media grids (product tabs, media files) --------------------- */
.tab-content .media, #media .media {
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--r-sm); padding: 12px 14px; margin-bottom: 10px;
    align-items: center;
}
.mediafiles.card-columns { column-gap: 20px; }

/* ---------- Bundle price bar (product detail) --------------------------- */
.bundle-price {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r); padding: 16px 20px; box-shadow: var(--sh-sm);
}
.bundle-price .text-warning, .bundle-price .yousave { color: var(--primary) !important; font-weight: 700; }

/* ---------- "Read more" / arrow affordances ----------------------------- */
.newsbox-footer a, .blog-preview .newsbox-footer a {
    font-family: var(--font-head); font-weight: 600; color: var(--primary-700);
    text-decoration: none; display: inline-flex; align-items: center; gap: .5em;
    transition: gap .18s var(--ease), color .18s;
}
.newsbox-footer a:hover { color: var(--primary-2); gap: .8em; }

/* ---------- "OR" divider (login/register split) ------------------------- */
.checkout-existing-customer-hr .hr-sect { color: var(--muted-2); }

/* ---------- Form validation message ------------------------------------- */
.form-error-msg { color: var(--danger); font-size: .85rem; }

/* ---------- Extra section-heading coverage (livesearch, reviews) -------- */
#livesearch .h2:not([class*="rz-"]),
.reviews .h3:not([class*="rz-"]) {
    position: relative;
    padding-left: 14px;
    font-family: var(--font-head); font-weight: 700;
    margin-bottom: 16px;
}
#livesearch .h2:not([class*="rz-"])::before,
.reviews .h3:not([class*="rz-"])::before {
    content: ""; position: absolute; left: 0; top: 2px; bottom: 2px;
    width: 3px; border-radius: 3px; background: var(--grad);
}
#livesearch .badge-pill.badge-primary { background: var(--grad-soft) !important; color: var(--primary-700) !important; }

/* ---------- Maintenance / offline page ---------------------------------- */
.maintenance-main-heading {
    font-family: var(--font-head); font-weight: 700; color: var(--ink);
    letter-spacing: -.02em;
}
.maintenance-main-notice { color: var(--muted); }

/* =========================================================================
   MEGA-MENU — "Cards" (desktop). Each sub-category becomes a soft card
   (surface, border, hover-lift) holding its header + child links. The panel
   gets a warm background so the white cards read against it. The inline child
   lists carry class `dropdown-menu`, so they're flattened first (the global
   .dropdown-menu skin would otherwise box them a second time inside the card).
   ========================================================================= */
@media (min-width: 992px) {
    /* panel: warm ground so the white cards stand out */
    #mainNavigation .dropdown-full > .dropdown-menu {
        background: var(--page) !important;
        padding: 26px 30px 30px !important;
    }
    /* adaptive card grid — cards fill the row whether there are 3 or 8 */
    #mainNavigation .dropdown-full .dropdown-body .row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
        gap: 18px 20px;
        align-items: start;   /* cards hug their content instead of stretching to equal height */
        margin: 0;
    }
    #mainNavigation .dropdown-full .dropdown-body .row > [class*="col-"] { max-width: none; flex: none; padding: 0; }

    /* each sub-category column = a card */
    #mainNavigation .dropdown-full .nav-item-lg-m {
        display: flex; flex-direction: column;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--r);
        box-shadow: var(--sh-sm);
        padding: 16px 18px 12px;
        margin: 0;
        transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
    }
    #mainNavigation .dropdown-full .nav-item-lg-m:hover {
        transform: translateY(-3px);
        box-shadow: var(--sh-md);
        border-color: transparent;
    }

    /* card header (the sub-category name) */
    #mainNavigation .dropdown-full .submenu-headline-toplevel {
        font-family: var(--font-head); font-weight: 700;
        font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase;
        color: var(--ink) !important;
        padding: 0 0 10px; margin: 0 0 8px;
        border-bottom: 1px solid var(--line-2);
        border-radius: 0;
        background: transparent !important;
        display: flex; align-items: center; gap: 8px;
    }
    #mainNavigation .dropdown-full .nav-item-lg-m:hover .submenu-headline-toplevel { color: var(--primary) !important; }
    #mainNavigation .dropdown-full .submenu-headline-toplevel.dropdown-toggle::after { display: none; }
    #mainNavigation .dropdown-full .submenu-headline-image { max-height: 24px; width: auto; }

    /* flatten the inline child list, then style the links inside the card */
    #mainNavigation .dropdown-full .categories-recursive-dropdown.dropdown-menu {
        position: static !important; display: block !important;
        border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
        padding: 0 !important; margin: 0 !important; min-width: 0 !important;
        background: transparent !important; animation: none !important;
    }
    #mainNavigation .dropdown-full .categories-recursive-dropdown .nav { flex-direction: column; flex-wrap: nowrap; }
    #mainNavigation .dropdown-full .categories-recursive-dropdown .nav-item { width: 100%; }
    #mainNavigation .dropdown-full .categories-recursive-dropdown .nav-link {
        padding: 4px 0; margin: 0;
        font-family: var(--font-body); font-weight: 400; font-size: 13px;
        letter-spacing: 0; text-transform: none;
        color: var(--muted) !important;
        border-radius: 0;
        transition: color .14s var(--ease), padding-left .14s var(--ease);
    }
    #mainNavigation .dropdown-full .categories-recursive-dropdown .nav-link:hover {
        color: var(--primary) !important; background: transparent !important; padding-left: 4px;
    }
    #mainNavigation .dropdown-full .more-subcategories { color: var(--muted-2); }

    /* a column with no children (just a headline) still reads as a card link */
    #mainNavigation .dropdown-full .nav-item-lg-m > .submenu-headline:not(.dropdown-toggle) {
        border-bottom: 0; margin: 0; padding: 0;
    }
}