/* I do not know what this file does, but if it is deleted, the shop crashes. SO DON'T TOUCH THIS */

/* region Fonts: Libre Baskerville lokal (Dateien in themes/base/fonts/LibreBaskerville, Quelle Google Fonts, OFL) */
/* Libre Baskerville, italic, latin-ext */
@font-face {
    font-family: 'Libre Baskerville';
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url('../base/fonts/LibreBaskerville/libre-baskerville-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Libre Baskerville, italic, latin */
@font-face {
    font-family: 'Libre Baskerville';
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url('../base/fonts/LibreBaskerville/libre-baskerville-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Libre Baskerville, normal, latin-ext */
@font-face {
    font-family: 'Libre Baskerville';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../base/fonts/LibreBaskerville/libre-baskerville-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Libre Baskerville, normal, latin */
@font-face {
    font-family: 'Libre Baskerville';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../base/fonts/LibreBaskerville/libre-baskerville-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* endregion */

/* region Typo: Laufweite enger */
body {
    letter-spacing: -0.015em;
}

/* Formularfelder erben letter-spacing sonst nicht */
button,
input,
select,
textarea {
    letter-spacing: inherit;
}
/* endregion */

/* region Navigation: engere Hauptlinks (Desktop), hebt auch die Parent-Regel padding-left:0 am 2. Menüpunkt auf */
/* unter 992px sind die Header-Links ausgeblendet */
@media (min-width: 992px) {
    header .navbar-nav > .nav-item > .nav-link,
    header .navbar-nav > .nav-item:nth-child(2) > .nav-link {
        padding-left: .75rem;
        padding-right: .75rem;
    }
}

/* große Desktops: mehr Luft (Nav ab ~1450px auf ~960px begrenzt, 18px lassen Reserve) */
@media (min-width: 1400px) {
    header .navbar-nav > .nav-item > .nav-link,
    header .navbar-nav > .nav-item:nth-child(2) > .nav-link {
        padding-left: 1.125rem;
        padding-right: 1.125rem;
    }
}
/* endregion */

/* region Navigation: Hover-Punkt in Orange (Desktop) */
/* am Link statt am Text-span – der span hat overflow: hidden und würde den Punkt abschneiden */
@media (min-width: 992px) {
    header.niu-header-type-1 .niu-header-nav > li > .nav-link::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 6px;
        width: 6px;
        height: 6px;
        border: 0;
        border-radius: 50%;
        background: var(--niu-secondary);
        transform: translateX(-50%) scale(0);
        transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
    }

    header.niu-header-type-1 .niu-header-nav > li > .nav-link:is(:hover, :focus-visible)::after {
        transform: translateX(-50%) scale(1);
    }

    /* Text bleibt beim Hover hell – NIUplus färbt ihn sonst in --niu-nav-accent / --s-accent */
    header.niu-header-type-1 .niu-header-nav > li > .nav-link:hover,
    header.niu-header-type-1 .niu-header-nav > li > .nav-link:hover * {
        color: var(--s-text);
    }
}
/* endregion */

/* region Bild-Content-Box: Verlauf Primary unten → transparent oben (Klasse sitzt an der Headline) */
.dzm-itb-bgi-wrapper:has(.sos-gradient-primary)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top, var(--niu-primary, var(--primary)), transparent);
}
/* endregion */

/* region Buttons: Secondary-Buttons (orange) mit weißer Schrift */
/* Theme v2 setzt das Token automatisch auf #000 (#niuThemeTokens); html:root schlägt dessen :root */
html:root {
    --niu-btn-secondary-text: #fff;
}
/* endregion */

/* region Buttons: Link-Secondary in Secondary-Farbe, leichter Hover */
.dzm-btn.dzm-btn-link-secondary {
    color: var(--niu-secondary, var(--secondary)) !important;
    transition: opacity .2s ease;
}

.dzm-btn.dzm-btn-link-secondary:hover {
    color: var(--niu-secondary, var(--secondary)) !important;
    opacity: .75;
}
/* endregion */

/* region Itembox: Styling wie Vorlage (Karte, Name, Preis, Badge, Quickbuy) */
body.niu-theme2 .productbox .productbox-inner {
    --niu-card-pad-item: 16px 16px 24px;
    background-color: #fff;
    border-radius: 4px;
}

.productbox .productbox-inner .productbox-title,
.productbox .productbox-inner .productbox-title a {
    font-size: .9375rem;
    font-weight: 700;
    color: var(--niu-primary);
}

.productbox .productbox-inner .productbox-price {
    font-family: inherit;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--niu-secondary);
}

/* Grundpreis näher an den Preis (mb-2 ist !important) */
.productbox .niu-productbox-price-label {
    margin-bottom: 0 !important;
}

.productbox .ribbon {
    background-color: var(--niu-primary);
    color: #fff;
    text-transform: none;
    border-radius: 2px;
}

.productbox .dzm-itembox-quickbuy-trigger-wrapper .dzm-itembox-quickbuy-trigger-btn {
    background-color: var(--niu-secondary);
    color: #fff;
}
/* endregion */

/* region Itembox: Bildbereich bläulich bis an den Kartenrand, Inhalt weiß */
/* nur der äußere Bildbereich, nicht das innere .productbox-image.square (Seitenverhältnis) */
.productbox .productbox-inner > .row > .col > .productbox-image {
    margin: -16px -16px 12px; /* = Karten-Innenabstand oben/seitlich */
    padding: 16px;
    background-color: color-mix(in srgb, var(--niu-primary) 6%, #fff);
    border-radius: 3px 3px 0 0;
}

/* weiße Produktfoto-Hintergründe nehmen die Fläche an */
.productbox .productbox-image img {
    mix-blend-mode: multiply;
}

.productbox .productbox-inner .productbox-image .productbox-ribbon.ribbon {
    top: .75rem;
    left: .75rem;
}
/* endregion */

/* region Itembox: Pfeil-Button unten rechts in der Kartenecke */
/* Bootstrap-.col ist relative → static, damit die Karte (.productbox-inner) Bezugspunkt ist */
.productbox .productbox-inner .col:has(.sos-productbox-price-row) {
    position: static;
}

/* Ecke unten rechts rundet die Karte selbst ab (Companion-Radius + overflow: hidden) */
.sos-productbox-arrow {
    position: absolute;
    right: 0;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    background-color: var(--niu-secondary);
    color: #fff;
    border-radius: var(--niu-radius-control, 3px) 0 0 0;
    transition: opacity .2s ease;
}

.niu-itembox-link:hover .sos-productbox-arrow {
    opacity: .85;
}
/* endregion */

/* region Feature-Ribbons: Klasse sos-feature-ribbon-flat als normaler Text (Companion: Custom-Klasse) */
/* nur in Artikelkarten – auf der Produktseite bleiben es normale Ribbons */
.productbox .ribbon.sos-feature-ribbon-flat {
    background: none !important; /* auch Inline-Farben aus dem Companion */
    color: inherit !important;
    padding: 0 !important; /* px-2 ist !important */
    border-radius: 0 !important;
    font-size: .8125rem !important;
    font-weight: inherit !important;
    text-transform: none !important;
}
/* endregion */

/* region Topbar: USP-Leiste (HTML steht in der Sprachvariable des Willkommenstexts) */
/* Topbar erst ab 992px sichtbar; „Original nordische Marken" erst ab xl (NIUplus: 1300px) */
.dzm-niu-topbar-welcome-message {
    flex: 1 1 auto;
}

.sos-topbar-usps {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 2.5rem; /* linksbündig, fester Abstand zwischen den Punkten */
    margin-right: 2.5rem; /* Abstand zu News/Kontakt */
}

.sos-topbar-usp {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
}

.sos-topbar-usp .bi {
    font-size: 1.125rem;
    line-height: 1;
}

/* Theme v2 färbt Links grau (--s-accent, sehr spezifische Regel) – Telefon-Link wie der übrige Text */
.dzm-niu-topbar a.sos-topbar-usp,
.dzm-niu-topbar a.sos-topbar-usp:hover {
    color: var(--s-text) !important;
    text-decoration: none;
}
/* endregion */

/* region Header: Warenkorb-Summe rechts neben dem Icon (Button setzt column per Inline-Style) */
header [data-niu-mini-cart-wrapper] {
    flex-direction: row !important;
}

/* Anzahl-Bubbles im Header (Warenkorb, Wunschzettel) orange statt rot */
header .fa-sup {
    background-color: var(--niu-secondary);
}
/* endregion */

/* region Header: Nav-Icons auf Höhe der Links */
/* NIUplus setzt unter jedes Nav-Icon eine Textzeile (  als Platzhalter), sobald irgendein Icon Text zeigt.
   Die Zeile hebt die Icons 9px über die Links → aus dem Fluss nehmen; echter Text bleibt unter dem Icon sichtbar. */
header .as-span:has(> .small.text-muted.d-xl-flex) {
    position: relative;
}

header .as-span > .small.text-muted.d-xl-flex {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}
/* endregion */

/* region Produktseite: Details-Tabelle mobil – Label über Wert statt zwei schmaler Spalten */
@media (max-width: 575.98px) {
    .product-attributes .table tbody tr {
        display: block;
        padding: .625rem .75rem;
    }

    /* width: auto hebt die 40%-Spalte von NIUplus auf */
    .product-attributes .table tbody td {
        display: block;
        width: auto;
        max-width: none;
        padding: 0;
        border: 0;
    }

    .product-attributes .table tbody td.h6 {
        font-size: .875rem;
        margin-bottom: .125rem;
        word-break: normal;
    }
}
/* endregion */

/* region Footer: Abstand zwischen „Vertrag widerrufen" und dem Vertrauens-Bereich darunter */
.niu-footer-main-wrapper .withdrawal-link-wrapper + .row {
    margin-top: 2rem;
}
/* endregion */

/* region Footer: erste Spalte (Logo + Sortimentstext) ab Desktop doppelt so breit */
@media (min-width: 992px) {
    .niu-footer-main-wrapper .row.py-5 > .col:first-child {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}
/* endregion */