/*
 * AS-Hairstore JTL Child Theme
 * Based on NOVA | Brand blue: #033d8f | Footer: #0b0b0b
 * Font: Inter (Google Fonts)
 */

/* ═══════════════════════════════════════════
   TYPOGRAPHY
═══════════════════════════════════════════ */

:root {
    --as-blue: #033d8f;
}

body,
header,
.ash-footer,
.ash-usp-bar,
nav,
.dropdown-menu {
    font-family: 'Inter', sans-serif !important;
}

/* ═══════════════════════════════════════════
   TOP BAR  (#033d8f brand blue)
═══════════════════════════════════════════ */

#header-top-bar {
    background: #033d8f;
    border-bottom: none;
}

/* Override NOVA's flex-row-reverse so our left→center→right layout works */
#header-top-bar > div {
    flex-direction: row !important;
    padding-top: 0;
    padding-bottom: 0;
    align-items: stretch;
}

/* 3-column grid: 1fr | auto | 1fr — left/right columns are equal flexible space
   so the center column's content is visually centered across the full topbar
   width (not just centered between left/right content). */
.ash-topbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    padding: 7px 0;
    color: #fff;
    font-size: 13px;
    line-height: 1;
    column-gap: 20px;
}

.ash-topbar-left {
    justify-self: start;
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.ash-topbar-phone,
.ash-topbar-email {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: .2px;
    transition: color .15s;
    white-space: nowrap;
}

.ash-topbar-phone:hover,
.ash-topbar-email:hover {
    color: #cce0ff;
    text-decoration: none;
}

.ash-topbar-phone .fa-phone-alt,
.ash-topbar-email .fa-envelope {
    margin-right: 6px;
}

.ash-topbar-center {
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 0;
}

.ash-topbar-center span {
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    padding: 0 14px;
    border-right: 1px solid rgba(255,255,255,.25);
}

.ash-topbar-center span:last-child {
    border-right: none;
}

.ash-topbar-center .fa-check {
    color: #7ab8ff;
    margin-right: 5px;
    font-size: 11px;
}

.ash-topbar-right {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Mobile: stack — USPs on top row (centered, full width), phone left + email
   right on the bottom row. Currency/language dropdowns are hidden on mobile. */
@media (max-width: 991px) {
    /* Override NOVA's `d-none ... d-lg-flex` so the topbar shows on mobile too. */
    #header-top-bar.d-none,
    #header-top-bar {
        display: block !important;
    }
    #header-top-bar > .container,
    #header-top-bar > .container-fluid {
        display: block !important;
    }

    .ash-topbar {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "center center"
            "phone  email";
        column-gap: 12px;
        row-gap: 6px;
        padding: 8px 0;
        font-size: 12px;
    }

    /* Hoist .ash-topbar-left children up so .ash-topbar-phone lands directly
       in the parent grid; same trick for .ash-topbar-right so the email
       inside it can be placed independently. */
    .ash-topbar-left,
    .ash-topbar-right {
        display: contents;
    }

    .ash-topbar-phone {
        grid-area: phone;
        justify-self: start;
    }

    .ash-topbar-email {
        grid-area: email;
        justify-self: end;
    }

    .ash-topbar-center {
        grid-area: center;
        justify-self: center;
        flex-wrap: wrap;
        justify-content: center;
    }

    .ash-topbar-center span {
        font-size: 11px;
        padding: 0 8px;
    }

    /* Currency + language dropdowns: hidden on mobile (rare interaction). */
    .ash-topbar-right .topbar-currency,
    .ash-topbar-right .topbar-lang,
    .ash-topbar-right [class*="currency"],
    .ash-topbar-right [class*="language"] {
        display: none !important;
    }

    .ash-topbar-phone-label {
        display: none;
    }
}

@media (max-width: 420px) {
    .ash-topbar-center span:nth-child(3) {
        display: none;
    }
    .ash-topbar-center span:nth-child(2) {
        border-right: none;
    }
}

/* Topbar dropdowns — white text on blue */
#header-top-bar .dropdown-toggle,
#header-top-bar .nav-link,
#header-top-bar a {
    color: #fff !important;
    font-size: 12px;
}

#header-top-bar .dropdown-menu {
    font-size: 13px;
}

/* ═══════════════════════════════════════════
   MAIN HEADER
═══════════════════════════════════════════ */

header.fixed-navbar,
#jtl-nav-wrapper {
    background: #fff !important;
    background-color: #fff !important;
    border-bottom: 1px solid #e8e8e8;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

#jtl-nav-wrapper .navbar,
#jtl-nav-wrapper nav.navbar {
    background: transparent !important;
}

/* ── midnight.css override: header .dropdown-menu { background: #1C1D2C } ── */
/* Multiple selectors to win specificity battle regardless of CSS load order */
header .dropdown-menu,
.ash-mega-item .ash-mega-dropdown,
.ash-mega-item > .dropdown-menu {
    background-color: #fff !important;
    color: #1a1a1a !important;
}

/* Mobile: header .navbar-collapse { background: #1C1D2C } */
header .navbar-collapse {
    background-color: #fff !important;
    color: #1a1a1a !important;
}

/* Nav scroll arrows: JS inserts them into the <ul> regardless of viewport.
   They're only useful on desktop (where the menu scrolls horizontally) — on
   mobile the menu becomes a drawer so the arrows have no purpose. */
@media (max-width: 991px) {
    .ash-nav-scroll-arrow {
        display: none !important;
    }
}

/* On desktop the categories list is wrapped in #mainNavigation only so the burger
   collapse works on mobile. Flatten the wrapper here so the menu list keeps its
   original flex-item behavior next to #shop-nav. */
@media (min-width: 992px) {
    header.ash-header nav.navbar > #mainNavigation.navbar-collapse {
        display: contents !important;
    }

    /* When there are more menu items than fit, allow horizontal scrolling and
       show < / > arrows at the edges of the menu area. JS appends the arrows
       as flex children of the <ul>; position:sticky keeps them at the edges
       of the scrollport without breaking the mega-dropdown's positioning
       ancestor (which must remain nav.navbar, not a wrapper around the ul). */
    header.ash-header #ash-main-nav {
        overflow-x: auto;
        scroll-behavior: smooth;
        scrollbar-width: none; /* Firefox */
        flex-wrap: nowrap;
    }
    header.ash-header #ash-main-nav::-webkit-scrollbar {
        display: none;
    }
    header.ash-header .ash-nav-scroll-arrow {
        display: none;
        position: sticky;
        flex: 0 0 auto;
        width: 40px;
        height: 36px;
        align-self: center;
        align-items: center;
        justify-content: center;
        border: 0;
        cursor: pointer;
        z-index: 5;
        color: #033d8f;
        font-size: 26px;
        font-weight: 700;
        padding: 0;
        line-height: 1;
    }
    header.ash-header .ash-nav-scroll-arrow.show {
        display: inline-flex;
    }
    header.ash-header .ash-nav-scroll-arrow:hover {
        color: #022a64;
    }
    header.ash-header .ash-nav-scroll-arrow-left {
        left: 0;
        background: linear-gradient(90deg, #fff 60%, rgba(255, 255, 255, 0));
    }
    header.ash-header .ash-nav-scroll-arrow-right {
        right: 0;
        background: linear-gradient(270deg, #fff 60%, rgba(255, 255, 255, 0));
    }
}

/* Desktop: make the cart icon sit flush at the right edge of the header.
   - Remove the right padding on the last nav-link (the cart link) so its glyph
     hugs the edge of the navbar.
   - Pull #shop-nav past the navbar container's 1rem right padding via negative
     margin, so the cart actually reaches the viewport right (not 16px inset). */
@media (min-width: 992px) {
    header.ash-header #shop-nav {
        margin-right: -16px;
    }
    /*header.ash-header .nav-icons > li:last-child > .nav-link,
    header.ash-header .nav-icons > li:last-child > a {
        padding-right: 0 !important;
    }*/
}

/* Action icons: no focus halo / hover background on any screen size */
header.ash-header .nav-icons a,
header.ash-header .nav-icons a:hover,
header.ash-header .nav-icons a:focus,
header.ash-header .nav-icons a:focus-visible,
header.ash-header .nav-icons a:active,
header.ash-header .nav-icons li.show > a,
header.ash-header .nav-icons li.show .nav-link,
header.ash-header .nav-icons .show > .nav-link {
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
    background-color: transparent !important;
    -webkit-tap-highlight-color: transparent !important;
}
header.ash-header .nav-icons input:focus,
header.ash-header .nav-icons input:focus-visible,
header.ash-header .nav-icons header .twitter-typeahead input {
    box-shadow: none !important;
    outline: none !important;
}

/* Dropdown items text */
header .dropdown-item {
    color: #1a1a1a !important;
}

header .dropdown-item:hover,
header .dropdown-item:focus {
    background-color: #f5f5f5 !important;
    color: #033d8f !important;
}

/* Nav-link ::before underline → Markenfarbe statt NOVA-Blau */
header .navbar-nav > .nav-item > .nav-link::before {
    border-color: #033d8f !important;
}

/* Nav links */
header .navbar-nav .nav-link,
header nav .nav-link {
    font-family: 'Inter', sans-serif !important;
    color: #1a1a1a !important;
    background: transparent !important;
    background-color: transparent !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 25px 14px !important;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
}

/* Nav-Items selbst: kein dunkler Hintergrund vom NOVA dark-Theme */
#jtl-nav-wrapper .navbar-nav .nav-item {
/*#jtl-nav-wrapper .navbar-nav .nav-item a*/ 
    background: transparent !important;
    background-color: transparent !important;
}

header .navbar-nav .nav-link:hover,
header .navbar-nav .nav-item.active .nav-link,
header .navbar-nav .nav-item:hover .nav-link {
    color: #033d8f !important;
    border-bottom-color: #033d8f;
}



/* Logo in header */
header .navbar-brand {
    padding: 8px 0;
}

/* Logo vertically centered in the header row */
.toggler-logo-wrapper {
    display: flex;
    align-items: center;
    height: 60px;
}

/* Override midnight.css: header .navbar-brand img { max-width:50vw; object-fit:contain } */
header .navbar-brand img,
header #shop-logo {
    max-height: 33px !important;
    width: auto !important;
    max-width: none !important;
}

/* ═══════════════════════════════════════════
   MEGA MENU  — 3-panel dropdown
═══════════════════════════════════════════ */

/* Full-width mega: nav-item muss position:static sein damit Dropdown relativ
   zur .navbar (position:relative) positioniert wird, nicht zum 150px-Item */
.dropdown-full,
.ash-mega-item {
    position: static !important;
}

/* The dropdown-full stretches across full width */
.ash-mega-item .dropdown-menu.ash-mega-dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1030;
    display: none;
    flex-direction: row;
    border: none;
    border-top: 2px solid #033d8f;
    border-radius: 0;
    padding: 0;
    margin: 0;
    box-shadow: 0 8px 32px rgba(0,0,0,.12);
    min-height: 40vh;
}

/* display: flex !important schlägt Bootstrap's .show { display: block } */
.ash-mega-item.show > .dropdown-menu.ash-mega-dropdown,
.ash-mega-item:hover > .dropdown-menu.ash-mega-dropdown {
    display: flex !important;
}

/* Prevent midnight's color:#fff from cascading onto all anchors inside the dropdown */
.ash-mega-dropdown a {
    color: inherit;
}

/* ── Panel 1: Left sidebar ── */
.ash-mega-sidebar {
    display: flex !important;
    width: 200px;
    flex-shrink: 0;
    flex-direction: column;
    padding: 24px 0 24px;
    background-color: #f7f7f7 !important;
    border-right: 1px solid #eee;
}

.ash-mega-sidebar-title,
.ash-mega-sidebar-current {
    display: block;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .7px;
    padding: 0 20px 14px;
    color: #033d8f !important;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 8px;
    text-decoration: none;
}

.ash-mega-sidebar-current:hover {
    color: #022b65;
}

.ash-mega-sidebar-link {
    display: block;
    padding: 8px 20px;
    color: #444 !important;
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    transition: background .12s, color .12s;
    border-left: 2px solid transparent;
}

.ash-mega-sidebar-link:hover {
    background: #eff4ff;
    color: #033d8f;
    border-left-color: #033d8f;
    text-decoration: none;
}

/* ── Panel 2: Columns ── */
.ash-mega-body {
    flex: 1;
    overflow: hidden;
    background: #fcfcfc;
    background: linear-gradient(0deg, rgba(252, 252, 252, 1) 0%, rgba(230, 230, 230, 1) 85%, rgba(196, 196, 196, 1) 100%);
}

.ash-mega-columns {
    display: flex;
    flex-wrap: wrap;
    padding: 24px 20px;
    gap: 8px 24px;
    align-content: flex-start;
}

.ash-mega-col {
    min-width: 130px;
    flex: 1 1 130px;
    margin-bottom: 16px;
}

.ash-mega-col-heading {
    display: block;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #5f5f5f !important;
    margin-bottom: 10px;
    text-decoration: none;
    padding-bottom: 6px;
    border-bottom: 2px solid #5f5f5f;
}

.ash-mega-col-heading:hover {
    color: #111 !important;
    text-decoration: none;
    border-color: black;
}

.ash-mega-col-link {
    display: block;
    font-size: 13px;
    color: #555 !important;
    text-decoration: none;
    padding: 4px 0;
    transition: color .12s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ash-mega-col-link:hover {
    color: #033d8f;
    text-decoration: none;
}

/* Mobile show-all link */
.ash-mega-mobile-show-all {
    padding: 12px 16px 4px;
}

/* ── Panel 3: CTA image ── */
.ash-mega-cta {
    display: flex !important;
    width: 25%;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    background-color: #033d8f !important;
    flex-direction: column;
    justify-content: flex-end;
}

.ash-mega-cta-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .55;
}

.ash-mega-cta-overlay {
    position: relative;
    z-index: 1;
    padding: 10% 10%;
    margin-top: auto;
    background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 100%);
}

/* Holds the category name itself — the former static "Kategorie" label. */
.ash-mega-cta-label {
    font-size: 1.7vw;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #fff;
    margin: 0 0 16px;
    font-weight: 500;
    text-wrap: auto;
}

.ash-mega-cta-btn {
    display: inline-block;
    border: 2px solid #fff;
    color: black;
    background: white;
    font-weight: 600;
    font-size: 20px;
    padding: 1vw 10%;
    text-transform: uppercase;
    letter-spacing: .6px;
    text-decoration: none;
    transition: background .15s, color .15s;
    border-radius: 2px;
}

.ash-mega-cta-btn:hover {
    background: #fff;
    color: #033d8f !important;
    text-decoration: none;
}

/* Manufacturers dropdown — no CTA panel, no sidebar */
.ash-mega-dropdown--manufacturers {
    min-height: auto;
}

/* ═══════════════════════════════════════════
   USP BAR  (light, above footer)
═══════════════════════════════════════════ */

#footer{
    background-color: #033d8f !important;
}

.ash-usp-bar {
    background: #fff;
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
}

.ash-usp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.ash-usp-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 24px;
    font-size: 14px;
    font-weight: 500;
    color: #222;
    border-right: 1px solid #e8e8e8;
    justify-content: center;
}

.ash-usp-item:last-child {
    border-right: none;
}

.ash-usp-icon {
    font-size: 22px;
    color: #033d8f;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */

.ash-footer {
    background: #0b0b0b;
    color: #aaa;
    font-family: 'Inter', sans-serif;
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
}

/* Force full width regardless of NOVA layout context */
#footer.ash-footer,
.ash-usp-bar {
    position: relative;
    left: 0;
    right: 0;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.ash-footer-main {
    padding: 64px 0 48px;
}

.ash-footer-cols {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.5fr;
    gap: 48px;
    align-items: flex-start;
}

/* Column headings */
.ash-footer-col-heading {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #cecece;
}

/* Footer links */
.ash-footer-link {
    display: block;
    color: #888;
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 10px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .4px;
    transition: color .15s;
}

.ash-footer-link:hover {
    color: #fff;
    text-decoration: none;
}

/* Logo */
.ash-footer-logo-link {
    display: inline-block;
    margin-bottom: 20px;
}

.ash-footer-logo {
    height: 36px;
    width: auto;
    display: block;
    filter: saturate(0.0) brightness(20);
}

/* About text */
.ash-footer-about-text {
    font-size: 13px;
    color: #cecece;
    line-height: 1.75;
    margin-bottom: 24px;
}

/* Kundenservice */
.ash-footer-service {
    border-top: 1px solid #cecece;
    padding-top: 20px;
}

.ash-footer-service-heading {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #fff;
    margin-bottom: 10px;
}

.ash-footer-service-link {
    color: #aaa;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: color .15s;
}

.ash-footer-service-link:hover {
    color: #fff;
}

.ash-footer-hours {
    font-size: 12px;
    color: #cecece;
    line-height: 1.8;
    margin-top: 8px;
}

/* ── Newsletter ── */
.ash-newsletter-form {
    margin-bottom: 0;
}

.ash-newsletter-input-group {
    display: flex;
    border: 1px solid #2a2a2a;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 10px;
    background: #fff;
}

.ash-newsletter-input {
    flex: 1;
    background: transparent;
    border: none;
    color: #fff !important;
    padding: 11px 14px;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    outline: none;
    min-width: 0;
}

.ash-newsletter-input::placeholder {
    color: #555;
}

.ash-newsletter-btn {
    background: transparent;
    border: none;
    border-left: 1px solid #2a2a2a;
    color: #fff;
    padding: 10px 16px;
    cursor: pointer;
    transition: background .15s, color .15s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.ash-newsletter-btn:hover {
    background: #033d8f;
    color: #fff;
}

.ash-newsletter-consent {
    font-size: 11px;
    color: #cecece;
    line-height: 1.6;
    margin-top: 6px;
}

.ash-newsletter-consent-link {
    color: #cacaca;
    text-decoration: underline;
}

.ash-newsletter-consent-link:hover {
    color: #aaa;
}

/* ── Social icons ── */
.ash-footer-social {
    display: flex;
    gap: 10px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.ash-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #1a1a1a;
    color: #888;
    text-decoration: none;
    font-size: 15px;
    transition: background .2s, color .2s;
    border: 1px solid #2a2a2a;
}

.ash-social-icon:hover {
    background: #033d8f;
    color: #fff;
    border-color: #033d8f;
    text-decoration: none;
}

/* ── Footer bottom bar ── */
.ash-footer-bottom {
    border-top: 1px solid #cecece;
    padding: 20px 0 16px;
}

.ash-footer-bottom-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}

/* Selectors in footer */
.ash-footer-selectors {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ash-footer-selectors .dropdown-toggle,
.ash-footer-selectors .btn {
    color: #888 !important;
    font-size: 12px;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    padding: 5px 10px;
    border-radius: 3px;
}

.ash-footer-selectors .dropdown-toggle:hover,
.ash-footer-selectors .btn:hover {
    color: #fff !important;
    border-color: #444;
}

/* Payment icons */
.ash-payment-icons {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ash-payment-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
}

.ash-payment-icon svg {
    display: block;
}

/* Legal row */
.ash-footer-legal-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.ash-copyright {
    font-size: 12px;
    color: #ffffff;
}

.ash-legal-links {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
}

.ash-legal-link {
    font-size: 11px;
    color: #555;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 2px 12px;
    border-right: 1px solid #2a2a2a;
    transition: color .15s;
}

.ash-legal-link:last-child {
    border-right: none;
}

.ash-legal-link:hover {
    color: #bbb;
    text-decoration: none;
}

/* VAT notice — visually hidden but accessible */
.ash-footer-vat {
    display: block !important;
    padding: 8px 0 0;
    color: #333;
    font-size: 11px;
}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */

/* Tablet */
@media (max-width: 1199px) {
    .ash-footer-cols {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }

    .ash-mega-cta {
        width: 200px;
    }
}

/* ≤ 991px: mobile nav, stacked footer */
/* ═══════════════════════════════════════════
   MOBILE / TABLET DRAWER  (<992px burger menu)
═══════════════════════════════════════════ */

/* Backdrop overlay covers everything below the sticky header */
.ash-mobile-backdrop {
    position: fixed;
    top: var(--ash-header-h, 64px);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 1040;
}

body.ash-drawer-open .ash-mobile-backdrop {
    opacity: 1;
    pointer-events: auto;
}

body.ash-drawer-open {
    overflow: hidden;
}

/* Reserve scrollbar space always — when the drawer locks scroll, the scrollbar
   disappears and otherwise the centered header content jumps a few px to the right. */
html {
    scrollbar-gutter: stable;
}

/* Sticky header creates a stacking context — its inner drawer (z:1045) gets
   trapped below it. When the drawer is open, lift the whole header above the
   backdrop (z:1040) so the drawer renders on top, not behind the dim overlay. */
body.ash-drawer-open header.ash-header {
    z-index: 1050;
}

@media (max-width: 991px) {
    /* (legacy `.ash-topbar-center { display: none }` removed — mobile topbar layout
       is now defined in the topbar section near the top of this file.) */

    /* midnight_crit.css makes .toggler-logo-wrapper position:absolute + float:left below lg,
       which drops it out of flow. Put it back and lay it out as ONE row: burger on the
       left, logo optically centered. */
    header.ash-header .toggler-logo-wrapper {
        position: relative !important;   /* containing block for the centered logo */
        float: none !important;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        height: auto;
        min-height: 40px;
        padding: 8px 8px 6px;            /* 8px left mirrors the 8px inset of the icons on the right */
    }
    header.ash-header .toggler-logo-wrapper .burger-menu-wrapper {
        float: none !important;
        order: 1;
        flex: 0 0 auto;
        padding-top: 0 !important;
        margin: 0;
    }
    /* Take the logo out of flow and center it on the full header width, so neither the
       burger on the left nor the absolutely positioned icon cluster on the right
       (see .nav-right.nav-icons further down) shifts it off-center. */
    header.ash-header .toggler-logo-wrapper .logo-wrapper {
        float: none !important;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
    }
    /* `header .navbar-brand { padding: 8px 0 }` would inflate the centered logo box. */
    header.ash-header .toggler-logo-wrapper .navbar-brand {
        padding: 0;
        margin: 0;
    }
    header.ash-header nav.navbar {
        clear: both;
    }

    /* ── Burger button — styled & visible only below lg ── */
    header.ash-header .navbar-toggler {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        margin: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        color: #0a0a0a;
        order: 1;
    }

    header.ash-header .navbar-toggler:hover,
    header.ash-header .navbar-toggler:focus,
    header.ash-header .navbar-toggler:active,
    header.ash-header .navbar-toggler.focus {
        background: transparent !important;
        outline: none !important;
        box-shadow: none !important;
    }

    /* Action icons (search/account/cart) — no focus halo / hover background /
       outline on any interactive state, including when a dropdown is open (.show). */
    header.ash-header .nav-icons a,
    header.ash-header .nav-icons a:hover,
    header.ash-header .nav-icons a:focus,
    header.ash-header .nav-icons a:focus-visible,
    header.ash-header .nav-icons a:active,
    header.ash-header .nav-icons li.show > a,
    header.ash-header .nav-icons li.show .nav-link,
    header.ash-header .nav-icons .show > .nav-link {
        box-shadow: none !important;
        outline: none !important;
        background: transparent !important;
        background-color: transparent !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    header.ash-header .nav-icons input:focus,
    header.ash-header .nav-icons input:focus-visible,
    header.ash-header .nav-icons header .twitter-typeahead input {
        box-shadow: none !important;
        outline: none !important;
    }

    /* Burger icon — three horizontal lines from three nested <span> elements.
       The .navbar-toggler-icon is a flex column; each child span is one bar. */
    header.ash-header .navbar-toggler .navbar-toggler-icon {
        background: none !important;
        background-image: none !important;
        width: 22px;
        height: 16px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 0;
    }
    header.ash-header .navbar-toggler .navbar-toggler-icon::before,
    header.ash-header .navbar-toggler .navbar-toggler-icon::after {
        content: none !important;
    }
    header.ash-header .navbar-toggler .navbar-toggler-icon > span {
        display: block;
        width: 100%;
        height: 2px;
        background: #0a0a0a;
        border-radius: 0;
    }

    /* ── Drop-down panel BELOW the header (no overlap) ── */
    header.ash-header .navbar-collapse {
        position: fixed;
        top: var(--ash-header-h, 64px);
        left: 0;
        right: 0;
        max-height: calc(100vh - var(--ash-header-h, 64px));
        width: auto;
        max-width: none !important; /* override midnight_crit: max-width 16.875rem */
        background: #fff !important;
        z-index: 1045;
        transform: translateY(-12px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform .22s ease, opacity .22s ease, visibility 0s linear .22s;
        overflow-y: auto;
        padding: 8px 0 12px;
        box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
        border-top: 1px solid #e7e7e7;
        display: block !important;
        margin: 0;
        height: auto !important;
    }

    header.ash-header .navbar-collapse.show,
    header.ash-header .navbar-collapse.collapsing {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: transform .22s ease, opacity .22s ease, visibility 0s linear 0s;
    }

    /* No "Menü" pseudo-header — header is already visible above */
    header.ash-header .navbar-collapse::before {
        content: none;
    }

    /* Inside drawer — show categories vertically */
    header.ash-header .navbar-nav,
    header.ash-header .navbar-collapse .navbar-nav {
        flex-direction: column !important;
        width: 100%;
    }

    header.ash-header .navbar-nav .nav-item,
    header.ash-header .navbar-nav .ash-mega-item {
        width: 100%;
        position: relative !important;
        display: block;
    }

    header.ash-header .navbar-nav .nav-link,
    header.ash-header .navbar-collapse .nav-link {
        padding: 14px 22px !important;
        font-size: 14px !important;
        font-weight: 600;
        letter-spacing: .04em;
        color: #0a0a0a !important;
        border: 0 !important;
        border-bottom: 1px solid #f3f3f3 !important;
        background: transparent !important;
        text-align: left;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
    }

    header.ash-header .navbar-nav .nav-link:hover,
    header.ash-header .navbar-nav .nav-link:focus {
        background: #fafafa !important;
        color: #033d8f !important;
    }

    header.ash-header .navbar-nav > .nav-item:last-child > .nav-link,
    header.ash-header .navbar-nav > li:last-child > .nav-link {
        border-bottom: 0 !important;
    }

    /* Hide the search typeahead INSIDE the drawer only — keep the one in the
       top-right search-icon dropdown so its search dialog still works. */
    header.ash-header .navbar-collapse header .twitter-typeahead {
        display: none !important;
    }

    /* No chevron indicator on drawer items */
    header.ash-header .navbar-nav .dropdown-toggle::after {
        content: none !important;
    }

    /* Mobile search wrapper is always rendered for the search plugin to attach to —
       hide it visually but keep it in the DOM so the top-right search icon still works. */
    header.ash-header .search-form-wrapper-fixed {
        position: absolute;
        left: -9999px;
        top: 0;
        height: 0;
        width: 0;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
    }

    /* Mega dropdown becomes inline accordion content (no absolute positioning) */
    header.ash-header .ash-mega-item .dropdown-menu.ash-mega-dropdown {
        position: static !important;
        width: 100% !important;
        min-height: auto !important;
        border: 0 !important;
        border-top: 0 !important;
        box-shadow: none !important;
        flex-direction: column !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #fafafa !important;
        display: none !important;
    }

    header.ash-header .ash-mega-item.show > .dropdown-menu.ash-mega-dropdown {
        display: flex !important;
    }

    /* No hover-open on mobile/tablet — only click via Bootstrap data-toggle */
    header.ash-header .ash-mega-item:hover > .dropdown-menu.ash-mega-dropdown {
        display: none !important;
    }

    header.ash-header .ash-mega-item.show:hover > .dropdown-menu.ash-mega-dropdown {
        display: flex !important;
    }

    header.ash-header .ash-mega-sidebar {
        display: none !important;
    }

    header.ash-header .ash-mega-cta {
        display: none !important;
    }

    header.ash-header .ash-mega-body {
        background: #fafafa;
        width: 100%;
    }

    header.ash-header .ash-mega-columns {
        padding: 4px 0 12px;
        flex-direction: column;
        gap: 0;
    }

    header.ash-header .ash-mega-col {
        max-width: 100%;
        flex: none;
        margin: 0;
        padding: 0;
    }

    header.ash-header .ash-mega-col-heading {
        padding: 12px 22px;
        margin: 0;
        border-bottom: 1px solid #ececec;
        border-top: 0;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #0a0a0a !important;
        background: transparent;
        display: block;
    }

    header.ash-header .ash-mega-col-link {
        padding: 10px 30px;
        font-size: 14px;
        color: #1a1a1a !important;
        text-decoration: none;
        display: block;
        border-bottom: 1px solid #f5f5f5;
    }

    header.ash-header .ash-mega-col-link:hover {
        background: #fff;
        color: #033d8f !important;
    }

    header.ash-header .ash-mega-mobile-show-all {
        padding: 10px 22px 6px;
    }

    header.ash-header .ash-mega-mobile-show-all a {
        font-size: 13px;
        color: #033d8f !important;
        text-decoration: none;
    }

    header.ash-header .ash-mega-mobile-show-all a:hover {
        text-decoration: underline;
    }

    /* Hide the redundant mobile nav-header (back button etc.) inside the drawer */
    header.ash-header .nav-mobile-header {
        display: none !important;
    }

    /* Search input field is hidden by default — keep it visible inside the drawer */
    header.ash-header .navbar-collapse .nav-icons header .twitter-typeahead {
        display: none;
    }

    /* Pull the icon row OUT of the drawer and anchor it to the top-right of the
       header (not the viewport). `<header>` is `position: sticky` (already
       positioned), so `position: absolute` on the icons attaches them to the
       header element — they stay top-right of the header regardless of how tall
       the topbar above is. (Previously `position: fixed; top: 14px` landed the
       icons inside the now-visible mobile topbar.) */
    header.ash-header .nav-right.nav-icons {
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 4;
        flex-direction: row !important;
        flex-wrap: nowrap;
        align-items: center;
        gap: 2px;
        margin: 0;
        padding: 0;
        background: transparent;
        list-style: none;
    }

    /* Inside the drawer (when shown via Bootstrap), DON'T duplicate icons — keep them fixed in header */
    /* The icons stay above the drawer thanks to higher z-index */

    /* (legacy "move the brand to grow + center" rule removed — the brand used to get
       `margin: 0 auto 0 8px`, which would now re-offset the logo that
       .toggler-logo-wrapper centers absolutely. Logo placement lives up there.) */

    /* Hide non-essential icons on tablet/mobile (account + wishlist) */
    header.ash-header .nav-right.nav-icons #shop-nav-search {
        display: inline-flex;
    }

    /* Compact icon button size on mobile */
    header.ash-header .nav-icons .nav-link {
        width: 38px;
        height: 38px;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
    }

    header.ash-header .nav-icons .nav-link:hover {
        background: #f3f3f3 !important;
    }

    header.ash-header .nav-icons .ash-nav-icon {
        height: 18px;
        width: auto;
    }

    /* Cart count badge stays clearly visible */
    header.ash-header .nav-icons .cart-icon-dropdown-price {
        height: 18px;
        width: 18px;
        line-height: 18px;
        font-size: 10px;
        position: absolute;
        top: 0;
        right: 0;
    }

    .ash-mega-dropdown {
        flex-direction: column !important;
        min-height: auto;
    }

    .ash-mega-sidebar {
        display: none !important;
    }

    .ash-mega-cta {
        display: none !important;
    }

    .ash-mega-columns {
        padding: 12px 0;
        flex-direction: column;
        gap: 0;
    }

    .ash-mega-col {
        max-width: 100%;
        flex: none;
        margin-bottom: 0;
    }

    .ash-mega-col-heading {
        padding: 10px 16px;
        margin: 0;
        border-bottom: 1px solid #eee;
        font-size: 13px;
    }

    .ash-mega-col-link {
        padding: 8px 24px;
        font-size: 14px;
    }

    .ash-usp-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ash-usp-item {
        border-bottom: 1px solid #e8e8e8;
    }

    .ash-footer-bottom-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .ash-payment-icons {
        justify-content: flex-start;
    }
}

/* ≤ 767px */
@media (max-width: 767px) {
    .ash-footer-cols {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .ash-footer-main {
        padding: 40px 0 32px;
    }

    .ash-footer-legal-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .ash-legal-links {
        flex-direction: column;
        gap: 4px;
    }

    .ash-legal-link {
        border-right: none;
        padding: 3px 0;
    }
}

/* ≤ 575px */
@media (max-width: 575px) {
    .ash-usp-grid {
        grid-template-columns: 1fr;
    }

    .ash-usp-item {
        border-right: none;
    }

    /* (legacy `.ash-topbar-left { display: none }` at ≤575px removed — phone+email
       now stay visible at the smallest screens too.) */

    /* Phone: hide Account + Wishlist from the compact header (still accessible via drawer) */
    header.ash-header .nav-icons #shop-nav-account,
    header.ash-header .nav-icons li[id*="wish"],
    header.ash-header .nav-icons .wl-nav-item {
        display: none;
    }

    /* Drawer spans full width on phone (overrides 88vw default) */
    header.ash-header .navbar-collapse {
        width: auto;
    }

    /* Tighter header padding */
    header.ash-header .navbar-toggler {
        width: 36px;
        height: 36px;
    }

    header.ash-header .nav-icons .nav-link {
        width: 36px;
        height: 36px;
    }

    /* Keep the centered logo clear of the icon cluster on narrow phones (320px).
       Scale via max-height, not max-width: logo.svg carries no intrinsic pixel size,
       so pairing the `width: auto !important` above with `height: auto` collapses it
       to 0x0. Height drives the width through the aspect ratio instead. */
    header.ash-header .navbar-brand img,
    header.ash-header #shop-logo {
        max-height: 28px !important;
    }
}


.as-nav {
    width: 90%;
    height: 75px;
    display: flex;
    margin-left: 5%;
    margin-right: 5%;
}

.ash-nav-icon{
    height: 25px;
}

.cart-icon-dropdown-price{
    height: 25px;
    width: 25px;
    background: black;
    color: white;
    border-radius: 25px;
    text-align: center;
    line-height: 24px;
    text-indent: 1px;
}

.nav-icons .nav-item a{
    padding: 0px;;
}

header .twitter-typeahead {
    position: absolute !important;
    width: 50px;
    height: 72px;
    z-index: 1;
}

header .twitter-typeahead input{
    padding: 0px;
    margin-top: 17px;
    background: transparent !important;
    border-color: transparent !important;
    cursor: pointer;
}

header .twitter-typeahead input::placeholder{
    color: transparent;
    visibility: hidden;
}

.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
}

/* ═══════════════════════════════════════════
   PRODUCT DETAIL PAGE  (PDP)
═══════════════════════════════════════════ */

/* Page background — light gray for the PDP block (scoped via :has) */
body:has(.ash-pdp) #content-wrapper,
body:has(.ash-pdp) #content {
    background: #f7f7f7;
}

/* Breadcrumb — unified treatment for PDP + catalog (single source of truth)
   Both pages get the same container padding, same inner spacing, same look.
   The wrapper row gets a fixed min-height so the visible breadcrumb strip is the
   same height regardless of whether the page has the PDP prev/next nav arrows. */
body:has(.ash-pdp) .breadcrumb-container,
body:has(.ash-cat) .breadcrumb-container {
    background: transparent;
    padding-top: 12px;
    padding-bottom: 12px;
    max-width: 100%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

/* PDP only — constrain breadcrumb to the Bootstrap container widths (so it aligns with PDP card edges). */
@media (min-width: 576px) {
    body:has(.ash-pdp) .breadcrumb-container { max-width: 540px; }
}
@media (min-width: 768px) {
    body:has(.ash-pdp) .breadcrumb-container { max-width: 720px; }
}
@media (min-width: 992px) {
    body:has(.ash-pdp) .breadcrumb-container { max-width: 960px; }
}
@media (min-width: 1200px) {
    body:has(.ash-pdp) .breadcrumb-container { max-width: 1250px; }
}

/* PDP: indents breadcrumb to align with product card inner content (32px inside the bootstrap container) */
body:has(.ash-pdp) .breadcrumb-container .breadcrumb-wrapper {
    padding-left: 32px;
    padding-right: 32px;
    margin-left: 0;
    margin-right: 0;
}

/* Catalog: the breadcrumb-container is a direct child of #content-wrapper, which
   already supplies the 32px page padding. So bc-container itself adds nothing —
   text aligns flush with the sidebar / content edge at x=32 from the viewport. */
body:has(.ash-cat) .breadcrumb-container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}
body:has(.ash-cat) .breadcrumb-container .breadcrumb-wrapper {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}
body:has(.ash-cat) .breadcrumb-container .breadcrumb-wrapper > [class*="col"] {
    padding-left: 0;
    padding-right: 0;
}

/* Match the visible breadcrumb area height across PDP + catalog. The PDP wrapper
   normally grows to ~45px because it contains the prev/next product navigation
   arrows on the same row; force both pages to the same fixed min-height so the
   visual strip is identical. */
body:has(.ash-pdp) .breadcrumb-container .breadcrumb-wrapper,
body:has(.ash-cat) .breadcrumb-container .breadcrumb-wrapper {
    min-height: 36px;
    align-items: center;
}

body:has(.ash-pdp) #breadcrumb,
body:has(.ash-pdp) .breadcrumb,
body:has(.ash-cat) #breadcrumb,
body:has(.ash-cat) .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 12px;
    color: #888;
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
}

body:has(.ash-pdp) .breadcrumb-item a,
body:has(.ash-cat) .breadcrumb-item a {
    color: #888;
    text-decoration: none;
    transition: color .15s;
}

body:has(.ash-pdp) .breadcrumb-item a:hover,
body:has(.ash-cat) .breadcrumb-item a:hover {
    color: #033d8f;
}

body:has(.ash-pdp) .breadcrumb-item.active,
body:has(.ash-pdp) .breadcrumb-item.last span,
body:has(.ash-cat) .breadcrumb-item.active,
body:has(.ash-cat) .breadcrumb-item.active span,
body:has(.ash-cat) .breadcrumb-item.last span {
    color: #1a1a1a;
}

body:has(.ash-pdp) .breadcrumb-item + .breadcrumb-item::before,
body:has(.ash-cat) .breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    color: #ccc;
    padding: 0 8px;
}

body:has(.ash-pdp) .breadcrumb-backtolist,
body:has(.ash-cat) .breadcrumb-backtolist {
    display: none;
}

/* ── PDP main container ── */
.ash-pdp-container {
    background: transparent;
}

.ash-pdp {
    /* background: #fff;
    border: 1px solid #ececec;
    padding: 32px; */
    margin: 16px 0 56px;
    border-radius: 4px;
}

.ash-pdp-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

/* ── Gallery (left column) ── */
.ash-pdp-gallery {
    position: relative;
}

.ash-pdp-gallery-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    display: flex;
    gap: 4px;
}

.ash-pdp-gallery-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
}

/* Show side thumbs only when present (multi-image products) */
.ash-pdp-gallery-inner:has(.ash-pdp-thumbs) {
    grid-template-columns: 88px 1fr;
}

.ash-pdp-thumbs {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ash-pdp-thumb {
    background: #ececec;
    border: 1px solid transparent;
    border-radius: 2px;
    padding: 0;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    cursor: pointer;
    transition: border-color .15s, transform .15s;
    width: 100%;
}

.ash-pdp-thumb:hover {
    border-color: #999;
}

.ash-pdp-thumb.is-active {
    border-color: #033d8f;
}

.ash-pdp-thumb-img,
.ash-pdp-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}

.ash-pdp-stage {
    position: relative;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 2px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    /* <button> reset + zoom affordance */
    padding: 0;
    width: 100%;
    cursor: zoom-in;
    appearance: none;
    -webkit-appearance: none;
    text-align: inherit;
    font: inherit;
    color: inherit;
    transition: border-color .15s;
}

.ash-pdp-stage:hover {
    border-color: #033d8f;
}

.ash-pdp-stage:focus {
    outline: 2px solid #033d8f;
    outline-offset: 2px;
}

.ash-pdp-stage:hover .ash-pdp-zoom-hint {
    background: #033d8f;
    color: #fff;
    transform: scale(1.05);
}

/* Zoom indicator chip — bottom-right corner of the main image */
.ash-pdp-zoom-hint {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 2;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #1a1a1a;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
    backdrop-filter: blur(6px);
    transition: background .15s, color .15s, transform .15s;
    pointer-events: none;
}

/* Modal — large preview. Only the currently active slide is visible; the
   image fills the modal box (no .square padding-trick that would collapse
   the image to 0×0 height). */
#productImagesModal .modal-dialog {
    max-width: min(96vw, 1100px);
}

#productImagesModal .modal-content {
    background: #fff;
    border: 0;
    border-radius: 4px;
    padding: 0;
}

#productImagesModal .modal-header {
    border: 0;
    padding: 8px 12px;
    position: relative;
    z-index: 2;
}

#productImagesModal .modal-body,
#productImagesModal .ash-pdp-modal-body {
    padding: 0 24px 24px;
    background: #fff;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Each slide fills the available modal-body area; only `.is-active` renders. */
#productImagesModal .ash-pdp-modal-slide {
    display: none;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

#productImagesModal .ash-pdp-modal-slide.is-active {
    display: flex;
    align-items: center;
    justify-content: center;
}

#productImagesModal .ash-pdp-modal-img,
#productImagesModal .modal-body img {
    width: 100%;
    height: auto;
    max-height: 80vh;
    object-fit: contain;
    display: block;
}

/* Legacy fallback: if NOVA's `.square.square-image > .inner` markup ever
   reappears, make sure the image doesn't collapse to 0×0. */
#productImagesModal .square,
#productImagesModal .square-image {
    position: relative;
    width: 100%;
    padding: 0;
    display: block;
}
#productImagesModal .square .inner {
    position: relative;
    inset: auto;
    display: block;
}

.ash-pdp-stage-inner {
    width: 100%;
    height: 100%;
    display: block;
}

.ash-pdp-stage-slide {
    width: 100%;
    height: 100%;
}

.ash-pdp-stage-img,
.ash-pdp-stage img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    padding: 8%;
    display: block;
}

.ash-pdp-stage-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-size: 64px;
}

.ash-pdp-sale-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: #e02424;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 2px;
    line-height: 1;
}

/* ── Info (right column) ── */
.ash-pdp-info {
    padding: 4px 0;
}

.ash-pdp-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #888;
    margin-bottom: 12px;
    font-weight: 500;
}

.ash-pdp-eyebrow-brand {
    color: #033d8f;
    font-weight: 600;
}

.ash-pdp-eyebrow-category {
    color: #888;
    text-decoration: none;
}

.ash-pdp-eyebrow-category:hover {
    color: #033d8f;
    text-decoration: none;
}

.ash-pdp-title {
    font-family: 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.2;
    margin: 0 0 18px;
    letter-spacing: -.01em;
}

/* ── Price ── */
.ash-pdp-price-block {
    margin: 0 0 14px;
}

/* PDP price row — `display: contents` on .price_wrapper hoists .price and
   .price-note (the VAT/shipping line) up to be direct flex items of the row.
   That lets us order the strike-through old price right after the sale price,
   and push the VAT/shipping text onto its own row via flex-basis: 100%. */
.ash-pdp-price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 4px;
}

.ash-pdp-price-row .price_wrapper {
    display: contents;
}

.ash-pdp-price-row .price,
.ash-pdp-price-row .price.h1 {
    order: 1;
}

.ash-pdp-price-old {
    order: 2;
    font-size: 17px;
    color: #888;
    text-decoration: line-through;
    font-weight: 400;
}

.ash-pdp-price-row .price-note {
    order: 3;
    flex-basis: 100%;
    width: 100%;
    margin-top: 0;
}

.ash-pdp-price-row .price_label {
    font-size: 12px;
    color: #888;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-right: 4px;
}

.ash-pdp-price-row .price,
.ash-pdp-price-row .price.h1 {
    font-size: 22px;
    font-weight: 600;
    color: #0a0a0a;
    line-height: 1;
    margin: 0;
    font-family: 'Inter', sans-serif;
}

/* Only sale prices get the accent red — regular prices stay black so the
   page doesn't visually shout "discount" when there is none. */
.ash-pdp-price-row .price.special-price,
.ash-pdp-price-row .price.special-price.h1 {
    color: #e02424;
}

/* Hide the duplicated "old price" inside NOVA's price-note since we render it manually above */
.ash-pdp-price-block .price-note .text-stroke,
.ash-pdp-price-block .price-note .old-price,
.ash-pdp-price-block .price-note .instead-of {
    display: none;
}

.ash-pdp-price-block .price-note {
    margin-top: 6px;
    font-size: 11px;
    color: #888;
}

.ash-pdp-price-block .price-note .vat_info {
    font-size: 11px;
    color: #888;
}

.ash-pdp-price-block .price-note .vat_info a {
    color: #888;
    text-decoration: underline;
}

.ash-pdp-price-block .price-note .discount,
.ash-pdp-price-block .price-note .yousave,
.ash-pdp-price-block .price-note .suggested-price {
    font-size: 12px;
    color: #888;
}

/* ── Rating ── */
.ash-pdp-rating {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    font-size: 13px;
}

.ash-pdp-rating .rating,
.ash-pdp-rating .stars {
    display: inline-flex;
    gap: 1px;
    color: #f5b941;
    font-size: 14px;
}

.ash-pdp-rating-link {
    color: #555;
    text-decoration: none;
    font-size: 12px;
}

.ash-pdp-rating-link:hover {
    color: #033d8f;
    text-decoration: none;
}

.ash-pdp-rating-count {
    color: #555;
    font-size: 12px;
    margin-left: 4px;
}

/* ── Short description / bullets ── */
.ash-pdp-shortdesc {
    margin: 0 0 22px;
    color: #333;
    font-size: 13px;
    line-height: 1.7;
}

.ash-pdp-shortdesc ul {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: transparent !important;
}

.ash-pdp-shortdesc ul li {
    position: relative;
    padding-left: 16px;
    margin-bottom: 4px;
}

.ash-pdp-shortdesc ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #555;
}

.ash-pdp-shortdesc p {
    margin: 0 0 10px;
}

/* ── Variations ── */
.ash-pdp-variations {
    margin: 0 0 18px;
}

.ash-pdp-variations:empty {
    display: none;
}

/* ── Buy row: qty + add-to-cart ── */
.ash-pdp-buy-wrap {
    margin: 0 0 8px;
}

.ash-pdp-buy-wrap .product-buy {
    margin: 0;
}

.ash-pdp-buy-wrap .basket-form-inline,
.ash-pdp-buy-wrap .row.basket-form-inline {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 10px;
    margin: 0;
}

.ash-pdp-buy-wrap .basket-form-inline > [class*="col-"] {
    padding: 0;
    max-width: none;
    flex: none;
}

/* Quantity stepper */
.ash-pdp-buy-wrap .form-counter,
.ash-pdp-buy-wrap .input-group.form-counter {
    border: 1px solid #d8d8d8;
    border-radius: 2px;
    height: 48px;
    background: #fff;
    flex-wrap: nowrap;
    align-items: stretch;
    overflow: hidden;
}

.ash-pdp-buy-wrap .form-counter .input-group-prepend,
.ash-pdp-buy-wrap .form-counter .input-group-append {
    border: 0;
}

.ash-pdp-buy-wrap .form-counter .btn,
.ash-pdp-buy-wrap .form-counter button {
    background: transparent;
    border: 0;
    color: #555;
    width: 32px;
    height: 100%;
    padding: 0;
    font-size: 12px;
    transition: background .15s, color .15s;
}

.ash-pdp-buy-wrap .form-counter .btn:hover,
.ash-pdp-buy-wrap .form-counter button:hover {
    background: #f5f5f5;
    color: #1a1a1a;
}

.ash-pdp-buy-wrap .form-counter .btn:focus,
.ash-pdp-buy-wrap .form-counter button:focus {
    box-shadow: none;
    outline: none;
}

.ash-pdp-buy-wrap .form-counter .form-control,
.ash-pdp-buy-wrap .form-counter input.quantity {
    border: 0;
    border-left: 1px solid #ececec;
    border-right: 1px solid #ececec;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
    background: transparent;
    box-shadow: none;
    height: auto;
    padding: 0 4px;
}

.ash-pdp-buy-wrap .form-counter input.quantity:focus {
    box-shadow: none;
    outline: none;
}

.ash-pdp-buy-wrap .form-counter .unit,
.ash-pdp-buy-wrap .form-counter .input-group-text.unit {
    background: transparent;
    border: 0;
    border-right: 1px solid #ececec;
    color: #555;
    font-size: 12px;
    padding: 0 12px;
    font-weight: 500;
}

/* Add to cart button — black, full width, uppercase */
.ash-pdp-buy-wrap .btn-primary,
.ash-pdp-buy-wrap button[name="inWarenkorb"],
.ash-pdp-cta {
    background: #1a1a1a !important;
    border: 1px solid #1a1a1a !important;
    color: #fff !important;
    height: 48px;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 0 24px;
    transition: background .15s, border-color .15s;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: none;
}

.ash-pdp-buy-wrap .btn-primary:hover,
.ash-pdp-buy-wrap button[name="inWarenkorb"]:hover,
.ash-pdp-cta:hover {
    background: #033d8f !important;
    border-color: #033d8f !important;
    color: #fff !important;
}

.ash-pdp-buy-wrap .btn-basket-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ash-pdp-buy-wrap .btn-basket-check .fa-shopping-cart {
    display: none; /* design shows label-only CTA */
}

/* NOVA hides the button label below 576px (#add-to-cart .btn-basket-check span)
   and relies on the cart icon instead — but we hide that icon above. Force the
   label to stay visible on mobile so the button isn't empty. */
.ash-pdp-buy-wrap #add-to-cart .btn .btn-basket-check span {
    display: inline-block;
}

/* ── Stock indicator ── */
.ash-pdp-stock {
    margin: 12px 0 14px;
    font-size: 12px;
    color: #2a8a3e;
}

.ash-pdp-stock .stock-label,
.ash-pdp-stock .stock-info {
    font-size: 12px;
}

.ash-pdp-stock .icon-success,
.ash-pdp-stock .text-success {
    color: #2a8a3e !important;
}

/* ── Wishlist link ── */
.ash-pdp-wishlist-row {
    margin: 6px 0 18px;
}

.ash-pdp-wishlist-link.wishlist-button,
.ash-pdp-wishlist-row .wishlist-button {
    background: transparent !important;
    border: 0 !important;
    color: #555 !important;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .8px;
    padding: 4px 0 !important;
    box-shadow: none !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ash-pdp-wishlist-row .wishlist-button .wishlist-button-inner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ash-pdp-wishlist-row .wishlist-button .wishlist-icon {
    color: #555;
    font-size: 14px;
}

.ash-pdp-wishlist-row .wishlist-button.on-list .wishlist-icon,
.ash-pdp-wishlist-row .wishlist-button:hover .wishlist-icon {
    color: #e02424;
}

.ash-pdp-wishlist-row .wishlist-button:hover {
    color: #1a1a1a !important;
    text-decoration: none;
}

/* ── Meta block ── */
.ash-pdp-meta {
    margin: 16px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid #ececec;
    font-size: 12px;
    color: #555;
}

.ash-pdp-meta-row {
    display: flex;
    gap: 6px;
    padding: 3px 0;
}

.ash-pdp-meta-row dt {
    margin: 0;
    font-weight: 600;
    color: #1a1a1a;
    min-width: 110px;
    flex-shrink: 0;
}

.ash-pdp-meta-row dd {
    margin: 0;
    color: #555;
}

.ash-pdp-meta-row dd a {
    color: #555;
    text-decoration: none;
}

.ash-pdp-meta-row dd a:hover {
    color: #033d8f;
    text-decoration: underline;
}

/* ── Share ── */
.ash-pdp-share {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid #ececec;
}

.ash-pdp-share-label {
    font-size: 12px;
    color: #555;
    margin-right: 4px;
    font-weight: 500;
}

.ash-pdp-share-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #1a1a1a;
    color: #fff;
    font-size: 11px;
    text-decoration: none;
    transition: background .15s, transform .15s;
}

.ash-pdp-share-icon:hover {
    background: #033d8f;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

/* ═══════════════════════════════════════════
   PDP TABS  (Beschreibung / Technische Daten / Bewertungen)
═══════════════════════════════════════════ */

.ash-pdp-tabs-section {
    background: #fff;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    padding: 32px 0 48px;
    margin-bottom: 32px;
}

.ash-pdp-tabs-section .tab-navigation {
    background: transparent;
}

/* Bootstrap tabs styled to match design */
.ash-pdp-tabs-section .nav-tabs,
.ash-pdp-tabs-section ul.nav-tabs {
    border-bottom: 1px solid #ececec;
    margin: 0 0 28px;
    gap: 4px;
}

.ash-pdp-tabs-section .nav-tabs .nav-link,
.ash-pdp-tabs-section .nav-tabs .nav-item .nav-link {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: #888;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 12px 20px;
    margin-bottom: -1px;
    transition: color .15s, border-color .15s;
    border-radius: 0;
}

.ash-pdp-tabs-section .nav-tabs .nav-link:hover {
    color: #1a1a1a;
    border-color: transparent;
}

.ash-pdp-tabs-section .nav-tabs .nav-link.active,
.ash-pdp-tabs-section .nav-tabs .nav-item.active .nav-link {
    color: #1a1a1a;
    border-bottom-color: #1a1a1a;
    background: transparent;
}

.ash-pdp-tabs-section .tab-content {
    padding: 8px 0 0;
}

.ash-pdp-tabs-section .tab-pane .desc {
    font-size: 14px;
    line-height: 1.7;
    color: #333;
    max-width: 75ch;
}

.ash-pdp-tabs-section .tab-pane .desc h2,
.ash-pdp-tabs-section .tab-pane .desc h3,
.ash-pdp-tabs-section .tab-pane .desc h4 {
    font-family: 'Inter', sans-serif;
    color: #1a1a1a;
    margin: 0 0 14px;
}

.ash-pdp-tabs-section .tab-pane .desc h2 {
    font-size: 20px;
    font-weight: 600;
}

.ash-pdp-tabs-section .tab-pane .desc p {
    margin: 0 0 14px;
}

/* Mobile accordion fallback (NOVA renders accordion when isMobile) */
.ash-pdp-tabs-section .accordion .card {
    border: 0;
    border-bottom: 1px solid #ececec;
    border-radius: 0;
    background: transparent;
}

.ash-pdp-tabs-section .accordion .card-header {
    background: transparent;
    border: 0;
    padding: 14px 0;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #1a1a1a;
}

/* ═══════════════════════════════════════════
   PRODUCT SLIDERS  (PDP recommendations, x-sell,
   category top/bestseller, CMS pages, sidebar boxes)
═══════════════════════════════════════════ */

.ash-pdp-recommendations-container {
    background: transparent;
    padding-top: 24px;
    padding-bottom: 56px;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 32px;
    padding-right: 32px;
}

.ash-pdp-recommendations {
    background: transparent;
}

.ash-rec-section {
    margin: 0 0 48px;
    position: relative;
    padding-left: 72px;
    padding-right: 72px;
}

.ash-rec-section:last-child {
    margin-bottom: 0;
}

/* ── Header (title + optional "show all" link) ── */
.ash-rec-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 22px;
}

.ash-rec-title {
    font-family: 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: #0a0a0a;
    margin: 0;
    letter-spacing: -.01em;
    text-align: left;
    line-height: 1.2;
}

/* Dash-decorated, centered title (PDP recommendation sliders): – TITEL – */
.ash-rec-header--dashes {
    justify-content: center;
}

.ash-rec-header--dashes .ash-rec-title {
    text-align: center;
}

.ash-rec-header--dashes .ash-rec-title::before {
    content: "– ";
    color: #033d8f;
    font-weight: 400;
}

.ash-rec-header--dashes .ash-rec-title::after {
    content: " –";
    color: #033d8f;
    font-weight: 400;
}

.ash-rec-more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #033d8f;
    text-decoration: none;
    transition: color .15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.ash-rec-more:hover,
.ash-rec-more:focus-visible {
    color: #022a66;
    text-decoration: none;
    outline: none;
}

.ash-rec-more svg {
    transition: transform .15s;
}

.ash-rec-more:hover svg {
    transform: translateX(3px);
}

/* Suppress NOVA's slider-headline / hr-sect that might leak through */
.ash-pdp-recommendations .hr-sect,
.ash-pdp-recommendations .slick-slider-other-container,
.ash-pdp-recommendations .productlist-filter-headline,
.ash-rec-section .hr-sect,
.ash-rec-section .productlist-filter-headline {
    display: none;
}

/* ── Slider container ── */
.ash-rec-slider {
    position: relative;
    margin: 0 -10px;
}

.ash-rec-slide {
    padding: 0 10px;
    min-width: 0;
    height: auto;
}

/* Row not full → keep card size fixed and center the existing cards
   instead of stretching them or leaving them left-aligned. */
.ash-rec-slider--few .slick-track {
    margin-left: auto;
    margin-right: auto;
}

/* No non-functional arrows when there is nothing to scroll. */
.ash-rec-slider--few .ash-rec-arrow {
    display: none !important;
}

/* Slick wrappers: equal-height cards */
.ash-rec-slider .slick-list {
    overflow: hidden;
}

.ash-rec-slider .slick-track {
    display: flex;
}

.ash-rec-slider .slick-slide {
    height: auto;
    float: none;
}

.ash-rec-slider .slick-slide > div {
    height: 100%;
}

.ash-rec-slider .slick-slide .ash-rec-slide,
.ash-rec-slider .slick-slide .ash-cat-card {
    height: 100%;
}

/* ── Pre-init fallback (avoid FOUC) — mirrors slick breakpoints 2 / 3 / 5 / 7 ── */
.ash-rec-slider:not(.slick-initialized) {
    display: flex;
    overflow: hidden;
    justify-content: center;
}

.ash-rec-slider:not(.slick-initialized) .ash-rec-slide {
    flex: 0 0 50%;
    max-width: 50%;
}

@media (min-width: 768px) {
    .ash-rec-slider:not(.slick-initialized) .ash-rec-slide {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }
}

@media (min-width: 992px) {
    .ash-rec-slider:not(.slick-initialized) .ash-rec-slide {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

@media (min-width: 1300px) {
    .ash-rec-slider:not(.slick-initialized) .ash-rec-slide {
        flex: 0 0 14.2857%;
        max-width: 14.2857%;
    }
}

.ash-rec-slider--half:not(.slick-initialized) .ash-rec-slide {
    flex: 0 0 50%;
    max-width: 50%;
}

@media (min-width: 768px) {
    .ash-rec-slider--half:not(.slick-initialized) .ash-rec-slide {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }
}

@media (min-width: 992px) {
    .ash-rec-slider--half:not(.slick-initialized) .ash-rec-slide {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

@media (min-width: 1300px) {
    .ash-rec-slider--half:not(.slick-initialized) .ash-rec-slide {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

/* ── Arrows ── */
.ash-rec-arrow,
.ash-rec-slider .ash-rec-arrow.slick-arrow {
    position: absolute;
    top: 32%;
    transform: translateY(-50%);
    z-index: 5;
    width: 48px;
    height: 48px;
    background: #033d8f;
    border: 1px solid #033d8f;
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 1;
    transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s, opacity .15s;
    box-shadow: 0 2px 12px rgba(0,0,0,.12);
}

.ash-rec-arrow:hover,
.ash-rec-arrow:focus-visible {
    background: #022a64;
    color: #ffffff;
    border-color: #022a64;
    outline: none;
}

.ash-rec-arrow svg {
    display: block;
}

.ash-rec-arrow--prev {
    left: -52px;
}

.ash-rec-arrow--next {
    right: -52px;
}

.ash-rec-arrow.slick-disabled {
    opacity: 0;
    pointer-events: none;
}

/* Mobile/tablet: keep arrows visible — pull them in slightly so they stay
   inside the viewport and shrink them so they don't cover the cards. */
@media (max-width: 991px) {
    .ash-rec-arrow,
    .ash-rec-slider .ash-rec-arrow.slick-arrow {
        width: 36px;
        height: 36px;
    }
    .ash-rec-arrow--prev {
        left: -8px;
    }
    .ash-rec-arrow--next {
        right: -8px;
    }
}

@media (max-width: 575px) {
    .ash-rec-arrow,
    .ash-rec-slider .ash-rec-arrow.slick-arrow {
        width: 32px;
        height: 32px;
    }
    .ash-rec-arrow--prev {
        left: 4px;
    }
    .ash-rec-arrow--next {
        right: 4px;
    }
}

/* ── Card overrides inside the (non-compact) slider —
   cards are narrower than catalog (5–7 per row), so trim text & paddings ── */
.ash-rec-slider:not(.ash-rec-slider--compact) .ash-cat-card-image-inner {
    padding: 0;
}

.ash-rec-slider:not(.ash-rec-slider--compact) .ash-cat-card-info {
    padding: 12px 2px 0;
}

.ash-rec-slider:not(.ash-rec-slider--compact) .ash-cat-card-brand {
    font-size: 10px;
    letter-spacing: .12em;
}

.ash-rec-slider:not(.ash-rec-slider--compact) .ash-cat-card-title {
    font-size: 13px;
    margin-top: 3px;
    min-height: 34px;
}

.ash-rec-slider:not(.ash-rec-slider--compact) .ash-cat-card-price {
    margin-top: 6px;
}

.ash-rec-slider:not(.ash-rec-slider--compact) .ash-cat-card-price .price,
.ash-rec-slider:not(.ash-rec-slider--compact) .ash-cat-card-price .price.productbox-price {
    font-size: 14px;
}

.ash-rec-slider:not(.ash-rec-slider--compact) .ash-cat-card-rating {
    font-size: 11px;
    margin-top: 4px;
}

/* Trim badge for smaller cards */
.ash-rec-slider:not(.ash-rec-slider--compact) .ash-cat-badge {
    top: 8px;
    left: 8px;
    font-size: 10px;
    padding: 4px 6px;
}

/* Smaller hover-action buttons in the slider */
.ash-rec-slider:not(.ash-rec-slider--compact) .ash-cat-card-actions {
    top: 8px;
    right: 8px;
    gap: 4px;
}

.ash-rec-slider:not(.ash-rec-slider--compact) .ash-cat-card-actions > * {
    width: 32px;
    height: 32px;
}

/* ── COMPACT VARIANT (sidebar / startpage boxes) ── */
.ash-rec-section--compact {
    margin: 0 0 18px;
}

.ash-rec-section--compact .ash-rec-header {
    margin-bottom: 14px;
    gap: 10px;
    align-items: center;
}

.ash-rec-title--compact {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #0a0a0a;
}

.ash-rec-section--compact .ash-rec-more {
    font-size: 11px;
    font-weight: 500;
}

.ash-rec-slider--compact {
    margin: 0;
    padding: 0 36px;
}

.ash-rec-slider--compact .ash-rec-slide {
    padding: 0;
}

.ash-rec-slider--compact:not(.slick-initialized) .ash-rec-slide {
    flex: 0 0 100%;
    max-width: 100%;
}

.ash-rec-slider--compact:not(.slick-initialized) .ash-rec-slide:not(:first-child) {
    display: none;
}

/* Compact card adjustments — leaner card inside narrow sidebar */
.ash-rec-slider--compact .ash-cat-card {
    background: transparent;
}

.ash-rec-slider--compact .ash-cat-card-image {
    aspect-ratio: 1 / 1;
    background: #f5f5f5;
    margin-bottom: 10px;
}

.ash-rec-slider--compact .ash-cat-card-image-inner {
    padding: 0;
}

.ash-rec-slider--compact .ash-cat-card-actions,
.ash-rec-slider--compact .ash-cat-card-add,
.ash-rec-slider--compact .ash-cat-card-desc,
.ash-rec-slider--compact .ash-cat-card-list-actions {
    display: none;
}

.ash-rec-slider--compact .ash-cat-card-info {
    padding: 0;
}

.ash-rec-slider--compact .ash-cat-card-brand {
    font-size: 10px;
    margin-bottom: 2px;
}

.ash-rec-slider--compact .ash-cat-card-title {
    font-size: 12.5px;
    line-height: 1.35;
    margin-bottom: 4px;
}

.ash-rec-slider--compact .ash-cat-card-price {
    font-size: 13px;
}

.ash-rec-slider--compact .ash-cat-card-price .price,
.ash-rec-slider--compact .ash-cat-card-price .price.productbox-price {
    font-size: 13px;
}

/* Compact slider arrows — smaller, positioned at the edges of the box */
.ash-rec-slider--compact .ash-rec-arrow {
    width: 30px;
    height: 30px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    top: 38%;
}

.ash-rec-slider--compact .ash-rec-arrow svg {
    width: 16px;
    height: 16px;
}

.ash-rec-slider--compact .ash-rec-arrow--prev {
    left: 0;
}

.ash-rec-slider--compact .ash-rec-arrow--next {
    right: 0;
}

/* Hide compact arrows if there's only 1 item */
.ash-rec-slider--compact.ash-rec-slider--few:has(.ash-rec-slide:only-child) .ash-rec-arrow {
    display: none;
}

/* Hide the box-container's default hr and box-content padding around our slider */
.box-container:has(.ash-rec-section--compact) {
    background: transparent;
    border: none;
    padding: 0;
}

.box-container:has(.ash-rec-section--compact) > .box-content-wrapper {
    padding: 0;
}

.box:has(.ash-rec-section--compact) hr.box-normal-hr {
    display: none;
}

@media (max-width: 991px) {
    .ash-pdp-recommendations-container {
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 40px;
    }

    .ash-rec-section {
        padding-left: 24px;
        padding-right: 24px;
    }

    .ash-rec-title {
        font-size: 22px;
    }

    .ash-rec-header {
        margin-bottom: 18px;
    }

    .ash-rec-arrow {
        width: 38px;
        height: 38px;
    }

    .ash-rec-arrow--prev {
        left: -18px;
    }

    .ash-rec-arrow--next {
        right: -18px;
    }
}

@media (max-width: 420px) {
    .ash-pdp-recommendations-container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .ash-rec-title {
        font-size: 20px;
    }
}

/* ═══════════════════════════════════════════
   PDP RESPONSIVE
═══════════════════════════════════════════ */

@media (max-width: 991px) {
    .ash-pdp {
        padding: 20px;
    }

    body:has(.ash-pdp) .breadcrumb-container .breadcrumb-wrapper {
        padding-left: 20px;
        padding-right: 20px;
    }

    .ash-pdp-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .ash-pdp-title {
        font-size: 22px;
    }

    .ash-pdp-tabs-section {
        padding: 24px 0 32px;
    }

    .ash-pdp-tabs-section .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .ash-pdp-tabs-section .nav-tabs .nav-link {
        white-space: nowrap;
        padding: 12px 14px;
    }
}

@media (max-width: 575px) {
    .ash-pdp {
        padding: 14px;
        margin: 8px 0 32px;
    }

    body:has(.ash-pdp) .breadcrumb-container .breadcrumb-wrapper {
        padding-left: 14px;
        padding-right: 14px;
    }

    .ash-pdp-gallery-inner:has(.ash-pdp-thumbs) {
        grid-template-columns: 64px 1fr;
        gap: 8px;
    }

    .ash-pdp-buy-wrap .basket-form-inline,
    .ash-pdp-buy-wrap .row.basket-form-inline {
        grid-template-columns: 120px 1fr;
    }

    .ash-pdp-meta-row dt {
        min-width: 90px;
    }
}

/* ═══════════════════════════════════════════
   CATALOG (productlist / category)
═══════════════════════════════════════════ */

/* Page background — clean white like the design */
body:has(.ash-cat) #content-wrapper,
body:has(.ash-cat) #content {
    background: #ffffff;
}

/* Cap content width at 1440px (design max-width) — overrides NOVA's container-fluid-xl
   Also strip NOVA's 2rem top padding (we want breadcrumb to sit close to header). */
body:has(.ash-cat) #content-wrapper.container-fluid-xl,
body:has(.ash-cat) #content-wrapper {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 32px;
    padding-right: 32px;
    padding-top: 0;
}

/* NOVA wraps the product grid in <section> and applies `main section { padding: 2rem 0 }`,
   adding 32px above and below the grid. We want the grid flush against the toolbar. */
body:has(.ash-cat) main section.ash-cat-grid {
    padding-top: 0;
    padding-bottom: 0;
}

/* Convert NOVA's Bootstrap row+col layout to a CSS grid matching the design (260px sidebar + 1fr) */
@media (min-width: 992px) {
    body:has(.ash-cat) #content > .row.justify-content-lg-end {
        display: grid;
        grid-template-columns: 260px 1fr;
        column-gap: 48px;
        row-gap: 0;
        align-items: start;
        margin: 0;
    }

    body:has(.ash-cat) #content > .row.justify-content-lg-end > [class*="col-"] {
        padding: 0;
        max-width: none;
        flex: none;
    }

    body:has(.ash-cat) #content > .row.justify-content-lg-end > .col-lg-8,
    body:has(.ash-cat) #content > .row.justify-content-lg-end > .col-xl-9 {
        grid-column: 2;
        grid-row: 1;
        margin-left: 0;
    }

    body:has(.ash-cat) #content > .row.justify-content-lg-end > #sidepanel_left,
    body:has(.ash-cat) #content > .row.justify-content-lg-end > aside.sidepanel-left {
        grid-column: 1;
        grid-row: 1;
    }
}

/* Breadcrumb styling for catalog lives in the unified PDP+catalog block above. */

/* Outer wrapper */
.ash-cat {
    background: transparent;
    color: #0a0a0a;
}

/* Category banner image (optional, when configured) */
.ash-cat-banner {
    margin: 0 0 18px;
    border-radius: 4px;
    overflow: hidden;
}

.ash-cat-banner-img {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Page hero ── */
.ash-cat-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    padding: 14px 0 18px;
}

.ash-cat-hero-text {
    flex: 1;
    min-width: 0;
}

.ash-cat-title {
    font-family: 'Inter', sans-serif;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -.02em;
    color: #0a0a0a;
    margin: 0;
}

.ash-cat-sub {
    margin-top: 10px;
    max-width: 640px;
}

.ash-cat-sub p {
    color: #6b6b6b;
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
}

.ash-cat-meta {
    color: #6b6b6b;
    font-size: 13px;
    white-space: nowrap;
    text-align: right;
    flex-shrink: 0;
}

.ash-cat-meta b {
    color: #0a0a0a;
    font-weight: 600;
}

/* ── Subcategories (rendered as a sidebar filter group, "Kategorien") ── */
/* .ash-cat-subcategories-group inherits .ash-cat-filter-group — only the links differ. */

.ash-cat-subcategories-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ash-cat-subcategories-list .ash-cat-subcategory {
    display: block;
    color: #1a1a1a;
    font-size: 13.5px;
    text-decoration: none;
    padding: 0;
    border: 0;
    background: transparent;
    line-height: 1.3;
    transition: color .15s;
}

.ash-cat-subcategories-list .ash-cat-subcategory:hover {
    color: #033d8f;
    text-decoration: none;
}

/* ── Toolbar (active filter chips + sort + per-page + view toggle) ── */
.ash-cat-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 18px 0;
    border-top: 1px solid #e7e7e7;
    margin: 12px 0 24px;
}

.ash-cat-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ash-cat-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    align-items: center;
}

/* Active filter pill */
.ash-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #e7e7e7;
    background: #fff;
    color: #222;
    padding: 7px 12px 7px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    transition: border-color .15s, color .15s, background .15s;
    line-height: 1;
}

.ash-cat-chip:hover {
    border-color: #0a0a0a;
    color: #0a0a0a;
    text-decoration: none;
}

.ash-cat-chip-x {
    font-size: 14px;
    color: #888;
    line-height: 1;
}

.ash-cat-chip--clear {
    color: #fff;
    background: #0a0a0a;
    border-color: #0a0a0a;
    font-weight: 600;
}

.ash-cat-chip--clear:hover {
    background: #1a1a1a;
    color: #fff;
}

.ash-cat-chip--clear .ash-cat-chip-x {
    color: #fff;
}

.ash-cat-toolbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Sort + per-page dropdown — pill button matching design */
.ash-cat-select {
    display: inline-block;
}

.ash-cat-select-btn,
.ash-cat-select .btn,
.ash-cat-select .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #e7e7e7;
    background: #fff;
    color: #1a1a1a;
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: none !important;
    line-height: 1;
}

.ash-cat-select-btn::after {
    /* Suppress Bootstrap's default chevron — we use our own SVG */
    display: none !important;
}

.ash-cat-select-btn b {
    font-weight: 600;
    color: #0a0a0a;
}

.ash-cat-select-label {
    color: #6b6b6b;
}

.ash-cat-select-btn:hover,
.ash-cat-select .btn:hover,
.ash-cat-select .dropdown-toggle:hover {
    border-color: #0a0a0a;
    color: #1a1a1a;
    background: #fff;
}

.ash-cat-select .dropdown-menu {
    border-radius: 8px;
    border: 1px solid #e7e7e7;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    padding: 6px 0;
    font-size: 13px;
}

.ash-cat-select .dropdown-item {
    padding: 8px 16px;
    color: var(--as-blue);
    background-color: #fff !important;
}

.ash-cat-select .dropdown-item:hover,
.ash-cat-select .dropdown-item:focus {
    background-color: var(--as-blue) !important;
    color: #fff;
}

.ash-cat-select .dropdown-item.active,
.ash-cat-select .dropdown-item.page-nav-filter-item.active {
    background-color: var(--as-blue) !important;
    color: #fff;
}

/* View toggle (grid/list) — restyle layout_options.tpl btn-group */
.ash-cat-view-toggle .btn-group {
    display: inline-flex;
    border: 1px solid #e7e7e7;
    border-radius: 999px;
    padding: 3px;
    background: #fff;
}

.ash-cat-view-toggle .btn-option {
    width: 34px;
    height: 30px;
    border-radius: 999px !important;
    border: 0 !important;
    background: transparent !important;
    color: #6b6b6b !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    box-shadow: none !important;
}

.ash-cat-view-toggle .btn-option.active {
    background: #0a0a0a !important;
    color: #fff !important;
}

.ash-cat-view-toggle .btn-option.active::before {
    background: transparent;
}

/* ── Sidebar (NOVA renders boxes.left as #sidepanel_left) ── */
body:has(.ash-cat) #sidepanel_left.sidepanel-left {
    background: transparent;
    padding: 0;
    position: sticky;
    top: 96px;
    align-self: start;
}

/* Mobile: custom.js moves the filter box directly above the product grid
   (see js/custom.js). Reset the sticky desktop sidebar behaviour and give the
   relocated block clear separation from the toolbar above and products below. */
@media (max-width: 991.98px) {
    body:has(.ash-cat) #sidepanel_left.sidepanel-left {
        position: static;
        top: auto;
        padding-left: 0;
        padding-right: 0;
        margin: 4px 0 22px;
        padding-bottom: 22px;
        border-bottom: 1px solid #e7e7e7;
    }
}

/* Hide leftover NOVA filter chrome — collapse buttons, hr separators */
body:has(.ash-cat) #sidepanel_left .btn-filter-box,
body:has(.ash-cat) #sidepanel_left hr.box-filter-hr {
    display: none;
}

/* Sidebar should only contain product-attribute filters — no category trees / filters
   (categories are already navigable via the mega-menu and breadcrumb). */
body:has(.ash-cat) #sidepanel_left .box-categories,
body:has(.ash-cat) #sidepanel_left .box-filter-category {
    display: none;
}

/* Filter group container */
.ash-cat-filter-group {
    background: transparent;
    border-top: 1px solid #e7e7e7;
    padding: 18px 0;
    margin: 0;
}

.ash-cat-filter-group:first-child,
body:has(.ash-cat) #sidepanel_left > .ash-cat-filter-group:first-of-type,
body:has(.ash-cat) #sidepanel_left .ash-cat-filter-group:first-child {
    border-top: 0;
    padding-top: 0;
}

/* Categories boxes are hidden via CSS but still occupy :first-child slots in the DOM.
   When that happens, drop the top border on whichever group becomes the new visual first. */
body:has(.ash-cat) #sidepanel_left .box-categories + .ash-cat-filter-group,
body:has(.ash-cat) #sidepanel_left .box-filter-category + .ash-cat-filter-group,
body:has(.ash-cat) #sidepanel_left .box-categories + .box-filter-category + .ash-cat-filter-group {
    border-top: 0;
    padding-top: 0;
}

.ash-cat-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #0a0a0a;
    margin: 0 0 14px;
}

.ash-cat-filter-count {
    color: #9a9a9a;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
}

/* Checkbox-style filter row — used for brand, type, properties, availability */
.ash-cat-filter-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ash-cat-check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: #1a1a1a;
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 0;
    line-height: 1.3;
    transition: color .15s;
}

.ash-cat-check:hover {
    color: #0a0a0a;
    text-decoration: none;
}

.ash-cat-check-box {
    width: 16px;
    height: 16px;
    border: 1.5px solid #c8c8c8;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #fff;
    transition: background .15s, border-color .15s;
}

.ash-cat-check-box svg {
    width: 10px;
    height: 10px;
    opacity: 0;
    transition: opacity .15s;
}

.ash-cat-check.is-on .ash-cat-check-box,
.ash-cat-check.active .ash-cat-check-box {
    background: #0a0a0a;
    border-color: #0a0a0a;
    color: #fff;
}

.ash-cat-check.is-on .ash-cat-check-box svg,
.ash-cat-check.active .ash-cat-check-box svg {
    opacity: 1;
}

.ash-cat-check-label {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

.ash-cat-check-count {
    margin-left: auto;
    color: #9a9a9a;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}

.ash-cat-check-img {
    max-height: 20px;
    width: auto;
    flex: 0 0 auto;
}

.ash-cat-filter-more {
    display: none;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px;
}

.ash-cat-filter-more.show {
    display: flex;
}

.ash-cat-filter-toggle {
    display: inline-block;
    background: transparent;
    border: 0;
    color: #0a0a0a;
    font-size: 12.5px;
    padding: 0;
    margin-top: 12px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    box-shadow: none !important;
}

.ash-cat-filter-toggle:hover,
.ash-cat-filter-toggle:focus {
    color: #033d8f;
    text-decoration: underline;
    box-shadow: none;
}

/* Swatch-style filter row — used for short text characteristics (levels, %) */
.ash-cat-swatch-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ash-cat-swatch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #e7e7e7;
    background: #fff;
    color: #0a0a0a;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: border-color .15s, background .15s, color .15s;
}

.ash-cat-swatch:hover {
    border-color: #0a0a0a;
    color: #0a0a0a;
    text-decoration: none;
}

.ash-cat-swatch.is-on,
.ash-cat-swatch.active {
    background: #0a0a0a;
    border-color: #0a0a0a;
    color: #fff;
}

/* Price range slider — matches design's bar + dual knobs + € fields */
.ash-cat-price-range {
    padding-top: 6px;
}

.ash-cat-price-bar,
.ash-cat-price-range .price-range-slide {
    position: relative;
    height: 4px;
    background: #ececec;
    border-radius: 999px;
    margin: 18px 6px 14px;
}

/* noUiSlider / evo price slider overrides (when JS init produces .noUi-* elements) */
.ash-cat-price-range .noUi-target {
    background: #ececec;
    border: 0;
    box-shadow: none;
    height: 4px;
    border-radius: 999px;
    margin: 18px 6px 14px;
}

.ash-cat-price-range .noUi-connect {
    background: #0a0a0a;
}

.ash-cat-price-range .noUi-handle {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #0a0a0a;
    box-shadow: none;
    right: -7px;
    top: -6px;
    cursor: pointer;
}

.ash-cat-price-range .noUi-handle::before,
.ash-cat-price-range .noUi-handle::after {
    display: none;
}

.ash-cat-price-fields {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
}

.ash-cat-price-field {
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    background: #fff;
}

.ash-cat-price-currency {
    color: #6b6b6b;
    flex: 0 0 auto;
}

.ash-cat-price-input,
.ash-cat-price-range .price-range-input {
    border: 0 !important;
    outline: 0 !important;
    width: 100%;
    font: inherit;
    font-variant-numeric: tabular-nums;
    background: transparent !important;
    padding: 0;
    box-shadow: none !important;
}

.ash-cat-price-dash {
    color: #aaa;
}

/* Search filter input (snippets/filter/search_in_items.tpl) */
body:has(.ash-cat) #sidepanel_left .filter-search-wrapper,
body:has(.ash-cat) #sidepanel_left .input-group {
    margin-bottom: 12px;
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    padding: 4px 8px;
    background: #fff;
    box-shadow: none;
    display: flex;
    align-items: center;
}

body:has(.ash-cat) #sidepanel_left .input-group .input-group-text,
body:has(.ash-cat) #sidepanel_left .input-group-prepend,
body:has(.ash-cat) #sidepanel_left .input-group-append {
    background: transparent !important;
    border: 0 !important;
    padding: 0 6px !important;
    color: #9a9a9a;
}

body:has(.ash-cat) #sidepanel_left .filter-search,
body:has(.ash-cat) #sidepanel_left .input-group .form-control {
    width: 100%;
    border: 0 !important;
    padding: 7px 0;
    font-size: 13px;
    background: transparent;
    color: #0a0a0a;
    outline: 0;
    box-shadow: none !important;
}

body:has(.ash-cat) #sidepanel_left .filter-search:focus {
    box-shadow: none;
}

/* ── Brand select dropdown (box_manufacturers.tpl) ── */
.ash-cat-brand-select {
    width: 100%;
}

.ash-cat-brand-select-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: #fff;
    border: 1px solid #e7e7e7;
    color: #0a0a0a;
    padding: 11px 14px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    line-height: 1;
    box-shadow: none;
}

.ash-cat-brand-select-btn::after {
    /* Suppress Bootstrap's default chevron */
    display: none !important;
}

.ash-cat-brand-select-btn:hover {
    border-color: #0a0a0a;
}

.ash-cat-brand-select-placeholder {
    color: #9a9a9a;
    flex: 1;
    text-align: left;
}

.ash-cat-brand-select .dropdown-menu {
    width: 100%;
    max-height: 320px;
    overflow-y: auto;
    border-radius: 8px;
    border: 1px solid #e7e7e7;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    padding: 6px 0;
    font-size: 13px;
}

.ash-cat-brand-select .dropdown-item {
    padding: 8px 14px;
    color: #fff;
    background-color: var(--as-blue);
}

.ash-cat-brand-select .dropdown-item:hover,
.ash-cat-brand-select .dropdown-item:focus {
    background: #f5f5f5;
    color: #0a0a0a;
}

/* ── Category navigation tree (box_categories.tpl) ── */
.ash-cat-category-tree .nav,
.ash-cat-category-tree ul,
.ash-cat-category-tree .nav-panel {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ash-cat-category-tree .nav-link,
.ash-cat-category-tree a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 0;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 13.5px;
    border: 0;
    background: transparent;
    transition: color .15s;
}

.ash-cat-category-tree .nav-link:hover,
.ash-cat-category-tree a:hover {
    color: #033d8f;
    text-decoration: none;
}

.ash-cat-category-tree .nav-link.active,
.ash-cat-category-tree a.active {
    color: #0a0a0a;
    font-weight: 600;
}

.ash-cat-category-tree .nav-item {
    list-style: none;
}

/* Nested subcategory chevron */
.ash-cat-category-tree .collapse-toggle,
.ash-cat-category-tree .dropdown-toggle::after {
    color: #cfcfcf;
}

/* ── Last seen products (box_last_seen.tpl) ── */
.ash-cat-last-seen-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ash-cat-last-seen-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    color: inherit;
    text-decoration: none;
    transition: opacity .15s;
}

.ash-cat-last-seen-item:hover {
    text-decoration: none;
    opacity: .85;
}

.ash-cat-last-seen-thumb {
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    background: #f3f3f3;
    border-radius: 4px;
    overflow: hidden;
    padding: 4px;
    box-sizing: border-box;
    position: relative;
}

/* NOVA wraps the image in .square.square-image > .inner where .inner is
   absolutely positioned. By default the .square collapses to 0×0 inside our flex
   thumb, so explicitly fill the thumb. */
.ash-cat-last-seen-thumb .square,
.ash-cat-last-seen-thumb .square-image {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 0;
    display: block;
}

.ash-cat-last-seen-thumb .inner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ash-cat-last-seen-thumb img,
.ash-cat-last-seen-thumb picture {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.ash-cat-last-seen-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ash-cat-last-seen-title {
    font-size: 12.5px;
    font-weight: 500;
    color: #0a0a0a;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ash-cat-last-seen-price .price,
.ash-cat-last-seen-price .price.productbox-price {
    font-size: 12.5px;
    font-weight: 700;
    color: #0a0a0a;
}

.ash-cat-last-seen-price .special-price {
    color: #e30613;
}

.ash-cat-last-seen-price .price-note,
.ash-cat-last-seen-price .base-price,
.ash-cat-last-seen-price .base_price,
.ash-cat-last-seen-price .vat_info,
.ash-cat-last-seen-price .footnote-reference {
    display: none;
}

/* ── Product grid ── */
.ash-cat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 8px 0 0;
}

.ash-cat-grid-item {
    min-width: 0;
}

/* NOVA adds `#product-list .product-wrapper:not(:last-child) { margin-bottom: 1rem }`
   on every grid item, which adds 16px below each card — that stacks with the grid
   row-gap and makes row spacing ~36px instead of the intended 20px. Kill it. */
#product-list.ash-cat-grid .product-wrapper:not(:last-child),
#product-list.ash-cat-grid .ash-cat-grid-item:not(:last-child) {
    margin-bottom: 0;
}

/* ── Product card ── */
.ash-cat-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    position: relative;
    border-radius: 4px;
}

.ash-cat-card form {
    display: contents;
}

.ash-cat-card-image {
    position: relative;
    display: block;
    background: #f3f3f3;
    aspect-ratio: 1 / 1;
    border-radius: 2px;
    overflow: hidden;
}

.ash-cat-card-image-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.ash-cat-card-image-inner picture,
.ash-cat-card-image-inner img,
.ash-cat-card-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.ash-cat-card-image-placeholder {
    color: #cfcfcf;
    font-size: 42px;
    padding: 0;
}

/* Badge — top-left */
.ash-cat-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: #e30613;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 5px 8px;
    border-radius: 2px;
    text-transform: uppercase;
    line-height: 1;
}

.ash-cat-badge--dark {
    background: #0a0a0a;
}

.ash-cat-badge--outline {
    background: #fff;
    color: #0a0a0a;
    border: 1px solid #0a0a0a;
}

/* Hover actions (wishlist + quick view) — top-right, side by side */
.ash-cat-card-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
}

.ash-cat-card:hover .ash-cat-card-actions {
    opacity: 1;
    pointer-events: auto;
}

.ash-cat-card-actions > * {
    width: 34px;
    height: 34px;
    min-width: 34px;
    flex: 0 0 34px;
    background: #fff;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 6px rgba(0,0,0,.08);
    color: #0a0a0a;
    border: 0;
    padding: 0;
    text-decoration: none;
    box-sizing: border-box;
}

/* Force icons to identical render size — NOVA's wishlist uses a Font-Awesome
   <i>, our quick-view uses an <i>, both rendered at the same font-size. */
.ash-cat-card-actions svg,
.ash-cat-card-actions i,
.ash-cat-card-actions .wishlist-icon {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ash-cat-card-actions > *:hover {
    background: #0a0a0a;
    color: #fff;
}

.ash-cat-card-actions .wishlist-button,
.ash-cat-card-actions .badge.wishlist-button,
.ash-cat-card-actions .btn.wishlist-button {
    background: #fff !important;
    color: #0a0a0a !important;
    border: 0 !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 0;
    padding: 0 !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.08) !important;
}

.ash-cat-card-actions .wishlist-button .wishlist-icon,
.ash-cat-card-actions .wishlist-button .far,
.ash-cat-card-actions .wishlist-button .fas {
    font-size: 14px;
}

.ash-cat-card-actions .wishlist-button.on-list .wishlist-icon,
.ash-cat-card-actions .wishlist-button:hover .wishlist-icon {
    color: #e30613;
}

.ash-cat-card-actions .ash-cat-action {
    color: #0a0a0a;
}

/* Add to cart — overlays image bottom on hover (gallery view) */
.ash-cat-card-add,
.ash-cat-card .btn.ash-cat-card-add {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    background: #0a0a0a !important;
    color: #fff !important;
    padding: 10px 12px;
    border: 0 !important;
    border-radius: 2px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .2s, transform .2s, background .15s;
    cursor: pointer;
    text-decoration: none;
    box-shadow: none !important;
}

.ash-cat-card-add:hover,
.ash-cat-card .btn.ash-cat-card-add:hover {
    background: #033d8f !important;
    color: #fff !important;
    text-decoration: none;
}

.ash-cat-card:hover .ash-cat-card-add {
    opacity: 1;
    transform: none;
}

/* Info */
.ash-cat-card-info {
    padding: 14px 2px 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ash-cat-card-brand {
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #6b6b6b;
    font-weight: 600;
}

.ash-cat-card-title {
    margin-top: 4px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: #0a0a0a;
    min-height: 38px;
}

.ash-cat-card-title a {
    color: #0a0a0a;
    text-decoration: none;
}

.ash-cat-card-title a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.text-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ash-cat-card-rating {
    margin-top: 6px;
    color: #f5b941;
    font-size: 12px;
}

/* Card price block — flex with row-wrap so the strike-through old price sits
   on the same line as the sale price, and the per-unit base price wraps below.
   `display: contents` on .price_wrapper hoists its children (.price, .price-note)
   into this flex container so we can order/wrap them independently. */
.ash-cat-card-price {
    margin-top: 8px;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 2px;
}

.ash-cat-card-price .price_wrapper {
    display: contents;
}

.ash-cat-card-price .price {
    order: 1;
}

.ash-cat-card-price .price-note {
    order: 3;
    flex-basis: 100%;
    width: 100%;
    margin-top: 0;
}

/* Sale items: struck-through old (UVP) price displayed inline next to the special price */
.ash-cat-card-oldprice {
    color: #9a9a9a;
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    order: 2;
}

.ash-cat-card-oldprice del {
    text-decoration: line-through;
}

.ash-cat-card-price .price,
.ash-cat-card-price .price.productbox-price {
    font-size: 16px;
    font-weight: 700;
    color: #0a0a0a;
    font-variant-numeric: tabular-nums;
    margin: 0;
}

.ash-cat-card-price .special-price,
.ash-cat-card-price .price.special-price {
    color: #e30613;
}

.ash-cat-card-price .old-price,
.ash-cat-card-price .price-note .old-price {
    color: #6b6b6b;
    font-size: 13px;
    text-decoration: line-through;
    font-weight: 500;
}

/* (.price-note flex/wrap behavior defined in the block above) */

.ash-cat-card-price .price-note .discount {
    display: none; /* keep clean — discount shown via badge */
}

.ash-cat-card-price .base-price,
.ash-cat-card-price .base_price,
.ash-cat-card-price .vat_info,
.ash-cat-card-price .text-stroke {
    color: #6b6b6b;
    font-size: 12px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

/* Hide the "*" footnote-reference next to prices globally — the asterisk
   that points at "incl. VAT, plus shipping" disclaimers. We render those
   disclaimers separately where they're needed (PDP price-note), so the
   marker on every price is visual noise. */
.ash-cat-card-price .footnote-reference,
.ash-cat-last-seen-price .footnote-reference,
.ash-pdp-price-block .footnote-reference,
.ash-pdp-price-row .footnote-reference,
.ash-rec-slider .footnote-reference,
.price .footnote-reference,
.price_wrapper .footnote-reference {
    display: none;
}

/* List-view extras (hidden by default in gallery mode) */
.ash-cat-card-desc,
.ash-cat-card-list-actions {
    display: none;
}

/* ── List view ── */
.ash-cat-grid.is-list {
    grid-template-columns: 1fr;
    gap: 0;
}

.ash-cat-grid.is-list .ash-cat-grid-item {
    border-bottom: 1px solid #e7e7e7;
}

.ash-cat-grid.is-list .ash-cat-grid-item:first-child {
    border-top: 1px solid #e7e7e7;
}

.ash-cat-grid.is-list .ash-cat-card {
    flex-direction: row;
    align-items: stretch;
    padding: 18px 0;
    gap: 24px;
}

.ash-cat-grid.is-list .ash-cat-card-image {
    width: 180px;
    height: 180px;
    aspect-ratio: auto;
    flex: 0 0 auto;
}

/* Hide ONLY the overlay add button in list view — keep the inline one inside
   .ash-cat-card-list-actions (it sits next to the wishlist button on each row). */
.ash-cat-grid.is-list .ash-cat-card-add:not(.ash-cat-card-add--list) {
    display: none;
}

/* List view: don't show the floating heart/eye action icons (they belong in the
   gallery hover overlay only). */
.ash-cat-grid.is-list .ash-cat-card-actions {
    display: none;
}

.ash-cat-grid.is-list .ash-cat-card-info {
    flex: 1;
    padding: 6px 0;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto 1fr auto;
    column-gap: 24px;
    align-items: start;
}

.ash-cat-grid.is-list .ash-cat-card-brand {
    grid-column: 1;
    grid-row: 1;
}

.ash-cat-grid.is-list .ash-cat-card-title {
    grid-column: 1;
    grid-row: 2;
    font-size: 18px;
    line-height: 1.3;
    min-height: 0;
    max-width: 540px;
}

.ash-cat-grid.is-list .ash-cat-card-rating {
    grid-column: 1;
    grid-row: 3;
    align-self: end;
}

.ash-cat-grid.is-list .ash-cat-card-price {
    grid-column: 2;
    grid-row: 1 / 3;
    justify-self: end;
    align-self: start;
    justify-content: flex-end;
    text-align: right;
    margin-top: 0;
    text-align: right;
}

.ash-cat-grid.is-list .ash-cat-card-price .price {
    font-size: 20px;
}

.ash-cat-grid.is-list .ash-cat-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    grid-column: 1;
    grid-row: 3;
    color: #6b6b6b;
    font-size: 13px;
    line-height: 1.55;
    max-width: 560px;
    margin-top: 8px;
}

/* List view: cart + wishlist sit side-by-side as a 50/50 pair, stretched
   to the full width of the info column and matched in height. */
.ash-cat-grid.is-list .ash-cat-card-list-actions {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 4;
    align-items: stretch;
    gap: 10px;
    margin-top: 14px;
    max-width: 420px;
}

.ash-cat-grid.is-list .ash-cat-card-add--list {
    position: static;
    opacity: 1;
    transform: none;
    padding: 11px 18px;
    flex: 1 1 0;
    min-width: 0;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ash-cat-grid.is-list .ash-cat-card-list-actions .wishlist-button,
.ash-cat-grid.is-list .ash-cat-card-list-actions .ash-cat-card-wish,
.ash-cat-grid.is-list .ash-cat-card-wish,
.ash-cat-grid.is-list .ash-cat-card-list-actions .badge.wishlist-button,
.ash-cat-grid.is-list .ash-cat-card-list-actions .btn.wishlist-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    border: 1px solid #e7e7e7 !important;
    background: #fff !important;
    color: #0a0a0a !important;
    border-radius: 2px !important;
    padding: 11px 18px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    width: auto !important;
    height: 42px !important;
    min-width: 0 !important;
    box-shadow: none !important;
    flex: 1 1 0 !important;
}

.ash-cat-grid.is-list .ash-cat-card-list-actions .wishlist-button span,
.ash-cat-grid.is-list .ash-cat-card-list-actions .ash-cat-card-wish span {
    display: inline !important;
    font-size: inherit;
}

/* ── Pagination ── */
.ash-cat-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    border-top: 1px solid #e7e7e7;
    margin-top: 32px;
    padding-top: 28px;
}

.ash-cat-pager-text {
    color: #6b6b6b;
    font-size: 13px;
}

.ash-cat-pager-text b {
    color: #0a0a0a;
    font-weight: 700;
}

.ash-cat-pager-nums {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ash-cat-pager-num,
.ash-cat-pager-arrow,
.ash-cat-pager-dots {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #1a1a1a;
    text-decoration: none;
    border-radius: 6px;
    transition: background .15s, color .15s, border-color .15s;
}

.ash-cat-pager-num:hover {
    background: #f3f3f3;
    color: #0a0a0a;
    text-decoration: none;
}

.ash-cat-pager-num.is-active {
    background: #0a0a0a;
    color: #fff;
    font-weight: 700;
}

.ash-cat-pager-dots {
    color: #9a9a9a;
    cursor: default;
}

.ash-cat-pager-arrow {
    border: 1px solid #e7e7e7;
    border-radius: 50%;
    color: #1a1a1a;
}

.ash-cat-pager-arrow:hover {
    background: #0a0a0a;
    border-color: #0a0a0a;
    color: #fff;
    text-decoration: none;
}

.ash-cat-pager-arrow.is-disabled {
    pointer-events: none;
    opacity: .4;
}

/* Pagination dropdown (NOVA's default) — hide in favor of our numbered list */
body:has(.ash-cat) .productlist-page-nav {
    display: none;
}

/* ── Responsive ── */
@media (max-width: 1199px) {
    .ash-cat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .ash-cat-title {
        font-size: 36px;
    }

    .ash-cat-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .ash-cat-meta {
        text-align: left;
    }

    body:has(.ash-cat) #sidepanel_left.sidepanel-left {
        padding: 0;
    }

    .ash-cat-toolbar-right {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
    }

    .ash-cat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (max-width: 720px) {
    .ash-cat-title {
        font-size: 28px;
    }

    .ash-cat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .ash-cat-card-title {
        font-size: 13px;
        min-height: 34px;
    }

    .ash-cat-card-price .price {
        font-size: 15px;
    }

    /* Show actions and add button always on mobile (no hover state) */
    .ash-cat-card-actions {
        opacity: 1;
        pointer-events: auto;
        top: 8px;
        right: 8px;
        gap: 4px;
    }

    /* Smaller hover icons on mobile, and drop the quick-view eye — the whole
       card is tappable, no need for a separate quick-view button. */
    .ash-cat-card-actions > *,
    .ash-cat-card-actions .wishlist-button,
    .ash-cat-card-actions .badge.wishlist-button,
    .ash-cat-card-actions .btn.wishlist-button {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        flex: 0 0 28px !important;
    }

    .ash-cat-card-actions .ash-cat-action--view {
        display: none;
    }

    .ash-cat-card-add {
        opacity: 1;
        transform: none;
        left: auto;
        right: 8px;
        bottom: 8px;
        width: auto;
        height: 32px;
        padding: 0 12px;
        border-radius: 999px;
        font-size: 10.5px;
        letter-spacing: .04em;
        gap: 6px;
    }

    .ash-cat-grid.is-list .ash-cat-card {
        flex-direction: row;
        gap: 14px;
        padding: 14px 0;
        align-items: stretch;
    }

    .ash-cat-grid.is-list .ash-cat-card-image {
        width: 110px;
        height: 110px;
        flex: 0 0 110px;
    }

    .ash-cat-grid.is-list .ash-cat-card-actions {
        display: none;
    }

    .ash-cat-grid.is-list .ash-cat-card-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 0;
        flex: 1;
        min-width: 0;
    }

    .ash-cat-grid.is-list .ash-cat-card-brand {
        font-size: 10px;
    }

    .ash-cat-grid.is-list .ash-cat-card-title {
        font-size: 13px;
        line-height: 1.3;
        max-width: none;
    }

    .ash-cat-grid.is-list .ash-cat-card-desc {
        display: none;
    }

    /* Mobile list view: cart + wishlist stay paired 50/50 at compact size. */
    .ash-cat-grid.is-list .ash-cat-card-list-actions {
        margin-top: auto;
        padding-top: 8px;
        gap: 8px;
        max-width: none;
    }

    .ash-cat-grid.is-list .ash-cat-card-add--list,
    .ash-cat-grid.is-list .ash-cat-card-list-actions .wishlist-button,
    .ash-cat-grid.is-list .ash-cat-card-list-actions .ash-cat-card-wish {
        padding: 8px 10px !important;
        font-size: 10.5px !important;
        letter-spacing: .04em !important;
        height: 36px !important;
        flex: 1 1 0 !important;
    }

    .ash-cat-grid.is-list .ash-cat-card-wish span,
    .ash-cat-grid.is-list .wishlist-button span {
        display: inline !important;
    }

    /* Mobile list view: prices left-align so they sit flush with the title and
       the cart button (everything stacks vertically in the info column). */
    .ash-cat-grid.is-list .ash-cat-card-price {
        justify-content: flex-start;
        text-align: left;
        margin-top: 6px;
    }

    .ash-cat-pager {
        flex-direction: column;
        gap: 14px;
        padding-top: 24px;
    }

    .ash-cat-pager-num,
    .ash-cat-pager-arrow {
        width: 32px;
        height: 32px;
        font-size: 12.5px;
    }
}

@media (max-width: 420px) {
    .ash-cat-title {
        font-size: 24px;
    }

    .ash-cat-chip:not(.ash-cat-chip--clear) {
        display: none;
    }
}


.account-icon-dropdown .dropdown-footer {
    background-color: var(--as-blue) !important;
}

.wishlist-dropdown-footer.dropdown-body a{
    color:#0a0a0a !important;
}

/* Front Page CSS */
.ash-page-img-full-width {
    width: 100% !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    max-width: none !important;
}

.opc-item-slider-justImages .slick-list {
    flex: 1 1 auto !important;
    width: 100% !important;
}

.opc-item-slider-justImages .slick-track {
    width: 100% !important;
    align-items: center !important;
}

.opc-item-slider-justImages .product-wrapper.slick-slide {
    width: 20% !important;
    min-width: 20% !important;
    height: 110px !important;
}

.opc-item-slider-justImages .item-slider.productbox-image {
    height: 110px !important;
    padding-bottom: 0 !important;
}

.opc-item-slider-justImages .item-slider.productbox-image .inner {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 110px !important;
}

.opc-item-slider-justImages .item-slider.productbox-image img {
    width: auto !important;
    height: auto !important;
    /*max-width: 100% !important;
    max-height: 72px !important;
    position: static !important;*/
}


.opc-item-slider-justImages .square-image .inner img {
    all:unset;
}

@media (max-width: 991px) {
    .opc-item-slider-justImages .product-wrapper.slick-slide,
    .opc-item-slider-justImages .item-slider.productbox-image,
    .opc-item-slider-justImages .item-slider.productbox-image .inner {
        width: 33.3333% !important;
        min-width: 33.3333% !important;
        height: 90px !important;
    }
    .opc-item-slider-justImages .item-slider.productbox-image img {
        max-height: 56px !important;
    }
}

@media (max-width: 575px) {
    .opc-item-slider-justImages .product-wrapper.slick-slide,
    .opc-item-slider-justImages .item-slider.productbox-image,
    .opc-item-slider-justImages .item-slider.productbox-image .inner {
        width: 50% !important;
        min-width: 50% !important;
        height: 76px !important;
    }
    .opc-item-slider-justImages .item-slider.productbox-image img {
        max-height: 48px !important;
    }
}

.ash-page-grid{
    padding-top: 10px !important;
}

.ash-page-grid > [data-area-id="col-0"] {
    padding: 0px 0px 0px 3px;
}

@media (max-width: 420px) {
    .ash-page-grid > [data-area-id="col-0"] {
        padding: 0px 0px 5px 5px;
    }
}

.ash-page-grid > [data-area-id="col-0"] > div:first-child {
    max-width: none !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.ash-page-grid >[data-area-id="col-1"] {
    padding: 0px 0px 0px 5px;
}
.ash-page-grid >[data-area-id="col-1"]  [data-area-id="col-0"] > div:first-child,
.ash-page-grid >[data-area-id="col-1"]  [data-area-id="col-1"] > div:first-child {
    margin-bottom: 5px;
}

.ash-page-grid >[data-area-id="col-1"]  [data-area-id="col-0"] > div,
.ash-page-grid >[data-area-id="col-1"]  [data-area-id="col-1"] > div{
    max-width: none !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.ash-page-grid >[data-area-id="col-1"]  [data-area-id="col-0"]{
    padding: 0px 3px 0px 0px;
}

.ash-page-grid >[data-area-id="col-1"]  [data-area-id="col-1"]{
    padding: 0px 0px 0px 3px;
}

.blog-preview-author, .blog-preview-comment {
    display: none !important;
}

/* Fixes to NOVA Cart */
.cart-icon-dropdown .cart-dropdown-shipping-notice {
    color: #000 !important;
}

.cart-icon-dropdown .dropdown-item, header .btn-outline-primary, header .btn-outline-primary a:hover, .cart-dropdown .cart-dropdown-total-item, .cart-icon-dropdown .btn-primary {
    color: #000;
}
@media (max-width: 991px) {
        .cart-dropdown.dropdown-menu.dropdown-menu-right.lg-min-w-lg.show {
            width: 96vw;
        }
}

/* ── Startseiten-News: responsives Grid statt NOVA-Carousel ──────────────
   NOVA zeigt ab 1300px 5 Slots für 4 Beiträge und schneidet darunter Karten
   ab; slick.css ist in diesem Theme gar nicht geladen. Das Carousel wird in
   custom.js stillgelegt (Marker-Klasse .slick-initialized), das Layout macht
   dieses Grid. Dadurch greifen NOVAs :not(.slick-initialized)-Regeln nicht
   mehr — Gutter (gap) und Kartenbreite müssen hier gesetzt werden.
   Selektor mit .row.carousel.slick-type-news, um NOVAs
   `.carousel:not(.slick-initialized).slick-type-news .product-wrapper`-
   Breiten (midnight.css) sicher zu überschreiben. */
.index-news-wrapper .row.carousel.slick-type-news {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    /* Bootstrap .row hat -1rem Margin, NOVA gibt den Karten dafür 1rem
       Padding. Beides raus: Gutter macht gap, Kanten fluchten mit .blog-header. */
    margin: 0;
    /* NOVAs .slick-smooth-loading deckelt uninitialisierte Carousels auf
       12.5rem und macht overflow-x:hidden (reserviert 15px Scrollbar-Gutter). */
    max-height: none;
    overflow: visible;
}

.index-news-wrapper .row.carousel.slick-type-news .product-wrapper {
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 0;
    /* NOVAs .mr-auto/.mx-auto sind !important */
    margin: 0 !important;
}

@media (min-width: 768px) {
    .index-news-wrapper .row.carousel.slick-type-news {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .index-news-wrapper .row.carousel.slick-type-news {
        grid-template-columns: repeat(4, 1fr);
    }
}