/* ========================================================================
   NOVVIA Theme - Modern CSS (2025/2026)
   Cutting-edge CSS features with progressive enhancement.
   All features degrade gracefully in older browsers.
   ======================================================================== */

/* ----- Cascade Layers -------------------------------------------------- */
@layer base, tokens, layout, components, utilities, transitions;

/* ========================================================================
   LAYER: TOKENS - Design Tokens & Custom Properties
   ======================================================================== */
@layer tokens {

    :root {
        /* --- Light Mode Colors ---
         * ALLE Farben kommen aus Theme-Settings (functions.php :root).
         * modern.css definiert nur Nicht-Farb-Tokens (Shadows, Spacing, Radii, Typo).
         * Dadurch greifen die Admin-Einstellungen ohne Konflikte.
         */
        --nv-surface:         #ffffff;
        --nv-surface-raised:  #fdfdfe;
        --nv-surface-overlay: rgba(255,255,255,0.85);

        /* --- Shadows --- */
        --nv-shadow-xs:  0 1px 2px oklch(0 0 0 / 0.04);
        --nv-shadow-sm:  0 1px 3px oklch(0 0 0 / 0.06), 0 1px 2px oklch(0 0 0 / 0.04);
        --nv-shadow-md:  0 4px 6px -1px oklch(0 0 0 / 0.07), 0 2px 4px -2px oklch(0 0 0 / 0.05);
        --nv-shadow-lg:  0 10px 15px -3px oklch(0 0 0 / 0.08), 0 4px 6px -4px oklch(0 0 0 / 0.04);
        --nv-shadow-xl:  0 20px 25px -5px oklch(0 0 0 / 0.10), 0 8px 10px -6px oklch(0 0 0 / 0.04);
        --nv-shadow-glow: 0 0 20px oklch(0.70 0.14 195 / 0.15);

        /* --- Spacing Scale --- */
        --nv-space-xs:   0.25rem;
        --nv-space-sm:   0.5rem;
        --nv-space-md:   1rem;
        --nv-space-lg:   1.5rem;
        --nv-space-xl:   2rem;
        --nv-space-2xl:  3rem;
        --nv-space-3xl:  4rem;

        /* --- Radii --- */
        --nv-radius-sm:  0.375rem;
        --nv-radius-md:  0.625rem;
        --nv-radius-lg:  0.875rem;
        --nv-radius-xl:  1.25rem;
        --nv-radius-2xl: 1.5rem;
        --nv-radius-full: 9999px;

        /* --- Typography (Fluid) --- */
        --nv-text-xs:    clamp(0.6875rem, 0.65rem + 0.1vw, 0.75rem);
        --nv-text-sm:    clamp(0.8125rem, 0.78rem + 0.1vw, 0.875rem);
        --nv-text-base:  clamp(0.9375rem, 0.9rem + 0.12vw, 1rem);
        --nv-text-lg:    clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
        --nv-text-xl:    clamp(1.1875rem, 1.1rem + 0.3vw, 1.25rem);
        --nv-text-2xl:   clamp(1.375rem, 1.2rem + 0.5vw, 1.5rem);
        --nv-text-3xl:   clamp(1.75rem, 1.4rem + 1vw, 1.875rem);
        --nv-text-4xl:   clamp(2rem, 1.5rem + 1.5vw, 2.25rem);
        --nv-text-5xl:   clamp(2.5rem, 1.8rem + 2vw, 3rem);
        --nv-text-hero:  clamp(2.75rem, 2rem + 3vw, 4.5rem);

        /* --- Timing Functions --- */
        --nv-ease-out:      cubic-bezier(0.33, 1, 0.68, 1);
        --nv-ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
        --nv-ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
        --nv-ease-bounce:   cubic-bezier(0.68, -0.55, 0.265, 1.55);

        --nv-duration-fast:  120ms;
        --nv-duration-base:  200ms;
        --nv-duration-slow:  350ms;
        --nv-duration-enter: 250ms;
        --nv-duration-exit:  200ms;

        /* --- Layout --- */
        --nv-content-width:  1400px;
        --nv-header-height:  72px;
        --nv-header-sticky:  60px;

        /* Customizer-Overrides werden via PHP inline-style gesetzt und überschreiben diese Defaults */
    }

    /* --- Dark Mode Tokens --- */
    [data-theme="dark"] {
        --nv-bg:              oklch(0.15 0.015 260);
        --nv-bg-alt:          oklch(0.18 0.015 260);
        --nv-surface:         oklch(0.20 0.015 260);
        --nv-surface-raised:  oklch(0.24 0.015 260);
        --nv-surface-overlay: oklch(0.20 0.015 260 / 0.92);

        --nv-text:            oklch(0.93 0.005 240);
        --nv-text-secondary:  oklch(0.72 0.010 240);
        --nv-text-muted:      oklch(0.55 0.010 250);
        --nv-text-inverse:    oklch(0.15 0.015 260);

        --nv-accent:          oklch(0.73 0.14 195);
        --nv-accent-hover:    oklch(0.78 0.14 195);
        --nv-accent-subtle:   oklch(0.25 0.05 195);
        --nv-accent-contrast: oklch(0.98 0.01 195);

        --nv-border:          oklch(0.30 0.010 260);
        --nv-border-strong:   oklch(0.40 0.010 260);
        --nv-ring:            oklch(0.73 0.14 195 / 0.30);

        --nv-shadow-xs:  0 1px 2px oklch(0 0 0 / 0.20);
        --nv-shadow-sm:  0 1px 3px oklch(0 0 0 / 0.25), 0 1px 2px oklch(0 0 0 / 0.18);
        --nv-shadow-md:  0 4px 6px -1px oklch(0 0 0 / 0.30), 0 2px 4px -2px oklch(0 0 0 / 0.22);
        --nv-shadow-lg:  0 10px 15px -3px oklch(0 0 0 / 0.35), 0 4px 6px -4px oklch(0 0 0 / 0.25);
        --nv-shadow-xl:  0 20px 25px -5px oklch(0 0 0 / 0.40), 0 8px 10px -6px oklch(0 0 0 / 0.30);
        --nv-shadow-glow: 0 0 30px oklch(0.73 0.14 195 / 0.20);
    }
}

/* ========================================================================
   LAYER: BASE - Foundational Resets & Typography
   ======================================================================== */
@layer base {

    /* --- Fluid Typography --- */
    h1, .h1 { font-size: var(--nv-text-hero); font-weight: 800; line-height: 1.1; letter-spacing: -0.025em; }
    h2, .h2 { font-size: var(--nv-text-5xl);  font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
    h3, .h3 { font-size: var(--nv-text-4xl);  font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; }
    h4, .h4 { font-size: var(--nv-text-3xl);  font-weight: 600; line-height: 1.25; }
    h5, .h5 { font-size: var(--nv-text-2xl);  font-weight: 600; line-height: 1.3; }
    h6, .h6 { font-size: var(--nv-text-xl);   font-weight: 600; line-height: 1.4; }

    /* --- Smooth Scrolling (respect preferences) --- */
    html {
        scroll-behavior: smooth;
        color-scheme: light dark;
    }

    /* --- Selection Color --- */
    ::selection {
        background: var(--nv-accent);
        color: var(--nv-text-inverse);
    }
}

/* ========================================================================
   LAYER: LAYOUT - Bento Grid, Container Queries, Subgrid
   ======================================================================== */
@layer layout {

    /* --- Bento Grid (Asymmetric, Apple-style) --- */
    .nv-bento {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: minmax(180px, auto);
        gap: var(--nv-space-lg);
    }

    .nv-bento-item {
        position: relative;
        overflow: hidden;
        border-radius: var(--nv-radius-xl);
        background: var(--nv-surface);
        box-shadow: var(--nv-shadow-sm);
        transition:
            box-shadow var(--nv-duration-base) var(--nv-ease-out),
            translate var(--nv-duration-base) var(--nv-ease-out);
    }

    .nv-bento-item:hover {
        box-shadow: var(--nv-shadow-lg);
        translate: 0 -3px;
    }

    .nv-bento-item.featured {
        grid-column: span 2;
        grid-row: span 2;
    }

    .nv-bento-item.wide {
        grid-column: span 2;
    }

    .nv-bento-item.tall {
        grid-row: span 2;
    }

    .nv-bento-item-image {
        position: absolute;
        inset: 0;
        object-fit: cover;
        width: 100%;
        height: 100%;
        transition: scale var(--nv-duration-slow) var(--nv-ease-out);
    }

    .nv-bento-item:hover .nv-bento-item-image {
        scale: 1.06;
    }

    /* === Bento-Section Overrides: konfigurierbar über HP: Kategorien === */
    .nv-bento-section .nv-bento-item {
        aspect-ratio: var(--nv-bento-aspect, 1/1);
        background: var(--nv-bento-bg, #fff);
    }
    .nv-bento-section .nv-bento-item-image {
        object-fit: var(--nv-bento-fit, contain);
        padding: var(--nv-bento-pad, 16px);
        background: var(--nv-bento-bg, #fff);
    }
    /* Bei "auto" (kein festes Seitenverhältnis): Fallback min-height wie vorher */
    .nv-bento-section[style*="--nv-bento-aspect:auto"] .nv-bento-item.featured { aspect-ratio: auto; min-height: 320px; }
    .nv-bento-section[style*="--nv-bento-aspect:auto"] .nv-bento-item:not(.featured) { aspect-ratio: auto; min-height: 200px; }

    .nv-bento-item-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to top,
            oklch(0 0 0 / 0.65) 0%,
            oklch(0 0 0 / 0.15) 50%,
            oklch(0 0 0 / 0) 100%
        );
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: var(--nv-space-xl);
        color: oklch(0.98 0 0);
    }

    /* Eigenes Kachel-Layout: Dark-Gradient und flex-end ausschalten, damit
       custom_html die komplette Gestaltung kontrolliert (Positionierung via
       eigenes display/flex im HTML). Wird durch bento-categories.php gesetzt,
       wenn $custom_html nicht leer ist. */
    .nv-bento-item-overlay.nv-custom {
        background: none !important;
        display: block;
        padding: 0 !important;
        color: inherit;
    }

    .nv-bento-item-title {
        font-size: var(--nv-text-2xl);
        font-weight: 700;
        margin-bottom: var(--nv-space-xs);
    }

    .nv-bento-item .nv-btn-bento {
        display: inline-flex;
        align-items: center;
        gap: var(--nv-space-xs);
        color: oklch(0.98 0 0);
        font-weight: 600;
        font-size: var(--nv-text-sm);
        opacity: 0;
        translate: 0 8px;
        transition:
            opacity var(--nv-duration-enter) var(--nv-ease-out),
            translate var(--nv-duration-enter) var(--nv-ease-out);
    }

    .nv-bento-item:hover .nv-btn-bento {
        opacity: 1;
        translate: 0 0;
    }

    /* Bento responsive */
    @media (max-width: 1024px) {
        .nv-bento { grid-template-columns: repeat(2, 1fr); }
        .nv-bento-item.featured { grid-column: span 2; grid-row: span 1; }
    }

    @media (max-width: 640px) {
        .nv-bento {
            grid-template-columns: 1fr;
            grid-auto-rows: minmax(200px, auto);
        }
        .nv-bento-item.featured,
        .nv-bento-item.wide {
            grid-column: span 1;
        }
    }

    /* === Mobile: Bento-Scroll-Kacheln fuellen Viewport, Text bleibt lesbar === */
    @media (max-width: 720px) {
        /* Feature + Small: Kacheln duerfen Inline-Style (flex:0 0 XXXpx) ueberschreiben */
        .nv-bento-featured.is-scroll > * {
            flex: 0 0 calc(100vw - 32px) !important;
            max-width: calc(100vw - 32px);
        }
        .nv-bento-small.is-scroll > * {
            flex: 0 0 calc(100vw - 40px) !important;
            max-width: calc(100vw - 40px);
        }
        /* Overlay-Text im Bento-Item auf mobil besser lesbar: dunkler Verlauf ueber Bild */
        .nv-bento-item-overlay::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, oklch(0 0 0 / 0.75) 0%, oklch(0 0 0 / 0.35) 50%, transparent 100%);
            z-index: -1;
            pointer-events: none;
        }
        .nv-bento-item-overlay {
            position: relative;
            z-index: 2;
        }
        /* Container darf horizontal scrollen, ohne Seite zu sprengen */
        .nv-bento-featured.is-scroll,
        .nv-bento-small.is-scroll {
            scroll-padding-left: 16px;
        }
    }

    /* === Bento-Small: horizontal Scroll-Modus === */
    .nv-bento-small.is-scroll {
        scrollbar-width: none;
    }
    .nv-bento-small.is-scroll::-webkit-scrollbar {
        display: none;
    }
    .nv-bento-small.is-scroll .nv-bento-item {
        aspect-ratio: var(--nv-bento-aspect, 1/1);
    }
    .nv-bento-small-wrap .nv-bento-scroll-btn,
    .nv-bento-featured-wrap .nv-bento-scroll-btn {
        transition: opacity var(--nv-duration-base, 200ms) var(--nv-ease-out, ease);
    }
    .nv-bento-small-wrap .nv-bento-scroll-btn:hover,
    .nv-bento-featured-wrap .nv-bento-scroll-btn:hover {
        background: var(--nv-surface, #fff) !important;
    }
    .nv-bento-featured.is-scroll .nv-bento-item.featured {
        aspect-ratio: var(--nv-bento-aspect, 1/1);
    }
    @media (max-width: 640px) {
        .nv-bento-small-wrap .nv-bento-scroll-btn,
        .nv-bento-featured-wrap .nv-bento-scroll-btn { display: none !important; }
    }

    /* === PDM-Zeile (Produkt des Monats + Erklärung + Karussell) === */
    .nv-pdm-row {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: var(--nv-space-xl, 2rem);
        align-items: stretch;
    }
    @media (max-width: 1024px) {
        .nv-pdm-row { grid-template-columns: 1fr 1fr; }
        .nv-pdm-row__carousel { grid-column: 1 / -1; }
    }
    @media (max-width: 640px) {
        .nv-pdm-row { grid-template-columns: 1fr; gap: var(--nv-space-lg, 1.5rem); }
        .nv-pdm-row__carousel { grid-column: auto; }
    }

    .nv-pdm-row__col {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .nv-pdm-card {
        display: flex;
        flex-direction: column;
        background: var(--nv-surface, #fff);
        border: 1px solid var(--nv-border, #e2e8f0);
        border-radius: var(--nv-radius-xl, 16px);
        overflow: hidden;
        text-decoration: none;
        color: inherit;
        box-shadow: var(--nv-shadow-sm, 0 2px 8px rgba(0,0,0,.06));
        transition: box-shadow var(--nv-duration-base, 200ms) var(--nv-ease-out, ease), translate var(--nv-duration-base, 200ms) var(--nv-ease-out, ease);
        height: 100%;
    }
    .nv-pdm-card:hover {
        box-shadow: var(--nv-shadow-lg, 0 12px 28px rgba(0,0,0,.14));
        translate: 0 -3px;
    }
    .nv-pdm-card__media {
        position: relative;
        aspect-ratio: 1/1;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    .nv-pdm-card__media img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: var(--nv-space-md, 1rem);
    }
    .nv-pdm-card__badge {
        position: absolute;
        top: 14px;
        left: 14px;
        background: var(--nv-pdm-accent, var(--nv-accent, #2bbcc4));
        color: #fff;
        padding: 6px 14px;
        border-radius: 999px;
        font-size: .875rem;
        font-weight: 800;
        letter-spacing: .04em;
        box-shadow: 0 4px 14px rgba(0,0,0,.15);
        z-index: 2;
    }
    .nv-pdm-card__body {
        padding: var(--nv-space-lg, 1.5rem);
        display: flex;
        flex-direction: column;
        gap: var(--nv-space-xs, .4rem);
        flex: 1;
    }
    .nv-pdm-card__kicker {
        font-size: .75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .1em;
        color: var(--nv-pdm-accent, var(--nv-accent, #2bbcc4));
    }
    .nv-pdm-card__name {
        font-size: clamp(1.125rem, 1.5vw, 1.375rem);
        font-weight: 700;
        line-height: 1.25;
        margin: 0;
        color: var(--nv-text, #0f172a);
    }
    .nv-pdm-card__prices {
        display: flex;
        align-items: baseline;
        gap: .6rem;
        margin-top: var(--nv-space-xs, .4rem);
        flex-wrap: wrap;
    }
    .nv-pdm-card__price-old {
        font-size: .95rem;
        text-decoration: line-through;
        color: var(--nv-text-muted, #94a3b8);
    }
    .nv-pdm-card__price-old bdi { color: inherit; }
    .nv-pdm-card__price-new {
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--nv-pdm-accent, var(--nv-accent, #2bbcc4));
    }
    .nv-pdm-card__cta {
        margin-top: auto;
        font-weight: 700;
        color: var(--nv-pdm-accent, var(--nv-accent, #2bbcc4));
    }
    .nv-pdm-card--placeholder {
        background: var(--nv-bg-alt, #f1f5f9);
        border-style: dashed;
    }
    .nv-pdm-card__placeholder-inner {
        padding: var(--nv-space-xl, 2rem);
        display: flex;
        flex-direction: column;
        gap: var(--nv-space-sm, .75rem);
        align-items: flex-start;
        justify-content: center;
        min-height: 280px;
    }
    .nv-pdm-card__placeholder-inner p {
        color: var(--nv-text-muted, #64748b);
        margin: 0;
    }

    .nv-pdm-row__title {
        font-size: clamp(1.5rem, 2.5vw, 2.25rem);
        font-weight: 800;
        margin: 0 0 var(--nv-space-md, 1rem);
        line-height: 1.15;
        color: var(--nv-text, #0f172a);
    }
    .nv-pdm-row__text {
        color: var(--nv-text-secondary, #475569);
        line-height: 1.6;
        font-size: 1rem;
    }
    .nv-pdm-row__text p { margin: 0 0 .75rem; }
    .nv-pdm-row__text p:last-child { margin-bottom: 0; }

    .nv-pdm-row__carousel-title {
        font-size: 1rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .08em;
        margin: 0 0 var(--nv-space-md, 1rem);
        color: var(--nv-pdm-accent, var(--nv-accent, #2bbcc4));
    }

    /* === HP-Custom-Block: Bild + Text Layouts === */
    .nv-hp-block--image_left .nv-hp-block-split,
    .nv-hp-block--image_right .nv-hp-block-split {
        grid-auto-rows: 1fr;
    }
    .nv-hp-block-split .nv-hp-block-media {
        min-height: 100%;
    }
    /* Bild oben/unten: 1 Spalte, Reihenfolge per order */
    .nv-hp-block--image_top .nv-hp-block-split,
    .nv-hp-block--image_bottom .nv-hp-block-split {
        grid-template-columns: 1fr !important;
    }
    .nv-hp-block--image_top .nv-hp-block-media,
    .nv-hp-block--image_bottom .nv-hp-block-media {
        aspect-ratio: 16 / 9;
        min-height: 300px;
    }
    /* Mobile: Bild+Text-Layouts alle auf 1 Spalte, Bild zuerst wenn "image_left" oder "image_top" */
    @media (max-width: 768px) {
        .nv-hp-block-split {
            grid-template-columns: 1fr !important;
        }
        .nv-hp-block-split .nv-hp-block-media {
            aspect-ratio: 16 / 9;
            min-height: 220px !important;
        }
    }

    /* --- Container Queries for Product Cards --- */
    .nv-product-card-container {
        container-type: inline-size;
        container-name: product-card;
    }

    /* Nur Padding + Actions/Swatches reagieren auf Karten-Breite.
       Schriftgroessen kommen aus der Section (Theme-Settings) via --card-title-size / --card-price-size. */
    @container product-card (max-width: 220px) {
        .nv-product-card { --card-padding: var(--nv-space-sm); }
        .nv-product-card .nv-card-actions { display: none; }
        .nv-product-card .nv-card-swatches { display: none; }
    }

    @container product-card (min-width: 221px) and (max-width: 320px) {
        .nv-product-card { --card-padding: var(--nv-space-md); }
    }

    @container product-card (min-width: 321px) {
        .nv-product-card { --card-padding: var(--nv-space-lg); }
    }

    /* --- CSS Subgrid for Aligned Product Rows --- */
    @supports (grid-template-rows: subgrid) {
        .nv-products-grid {
            display: grid;
            grid-template-columns: repeat(var(--nv-grid-cols, 4), 1fr);
            grid-template-rows: auto;
            gap: var(--nv-space-lg);
        }

        .nv-product-card {
            display: grid;
            grid-template-rows: subgrid;
            grid-row: span 4; /* image, title, price, actions */
        }
    }

    /* --- Product Grid Responsive --- */
    .nv-products-grid {
        display: grid;
        gap: var(--nv-space-lg);
    }

    @media (max-width: 1024px) {
        .nv-products-grid { grid-template-columns: repeat(3, 1fr) !important; }
    }

    @media (max-width: 768px) {
        .nv-products-grid,
        .novvia-products-grid,
        ul.products { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
    }

    @media (max-width: 480px) {
        .nv-products-grid,
        .novvia-products-grid,
        ul.products { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
    }

    /* --- Horizontal Scroll Section (CSS Scroll Snap) --- */
    .nv-scroll-section {
        display: flex;
        gap: var(--nv-space-lg);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: var(--nv-space-lg);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: var(--nv-space-md) 0;
    }

    .nv-scroll-section::-webkit-scrollbar {
        display: none;
    }

    .nv-scroll-section > * {
        scroll-snap-align: start;
        flex: 0 0 auto;
    }

    /* Scrollbar when desired */
    .nv-scroll-section.show-scrollbar {
        scrollbar-width: thin;
        scrollbar-color: var(--nv-border-strong) transparent;
    }

    .nv-scroll-section.show-scrollbar::-webkit-scrollbar {
        display: block;
        height: 6px;
    }

    .nv-scroll-section.show-scrollbar::-webkit-scrollbar-thumb {
        background: var(--nv-border-strong);
        border-radius: var(--nv-radius-full);
    }
}

/* ========================================================================
   LAYER: COMPONENTS - Product Cards, Buttons, Glass, Skeleton, etc.
   ======================================================================== */
@layer components {

    /* --- Modern Product Card --- */
    .nv-product-card {
        position: relative;
        background: var(--nv-surface);
        border-radius: var(--nv-radius-xl);
        overflow: hidden;
        box-shadow: var(--nv-shadow-xs);
        transition:
            box-shadow var(--nv-duration-base) var(--nv-ease-out),
            translate var(--nv-duration-base) var(--nv-ease-out);
    }

    .nv-product-card:hover {
        box-shadow: var(--nv-shadow-lg);
        translate: 0 -4px;
    }

    /* Card Image - Hintergrund kommt aus Theme-Settings (Shop-Tab ->
       Produktbild-Hintergrund). Fallback --nv-bg-alt wenn Variable nicht
       gesetzt ist. */
    .nv-card-image-wrap {
        position: relative;
        aspect-ratio: 1;
        overflow: hidden;
        background: var(--nv-product-image-bg, var(--nv-bg-alt));
    }

    .nv-card-image-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: scale var(--nv-duration-slow) var(--nv-ease-out);
    }

    .nv-card-image-wrap .nv-card-image-secondary {
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity var(--nv-duration-base) var(--nv-ease-out);
    }

    .nv-product-card:hover .nv-card-image-wrap img:first-child {
        scale: 1.08;
    }

    .nv-product-card:hover .nv-card-image-secondary {
        opacity: 1;
    }

    /* Card Badges */
    .nv-card-badges {
        position: absolute;
        top: var(--nv-space-sm);
        left: var(--nv-space-sm);
        display: flex;
        flex-direction: column;
        gap: var(--nv-space-xs);
        z-index: 2;
    }

    .nv-badge {
        display: inline-block;
        padding: 0.2em 0.6em;
        font-size: var(--nv-text-xs);
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        border-radius: var(--nv-radius-sm);
        line-height: 1.4;
    }

    .nv-badge-sale     { background: var(--nv-danger);  color: oklch(0.98 0 0); }
    .nv-badge-new      { background: var(--nv-accent);  color: oklch(0.98 0 0); }
    .nv-badge-hot      { background: var(--nv-warning); color: oklch(0.15 0 0); }

    /* Card Quick Actions (slide up on hover) */
    .nv-card-actions {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        gap: var(--nv-space-xs);
        padding: var(--nv-space-sm);
        background: linear-gradient(to top, oklch(0 0 0 / 0.5), oklch(0 0 0 / 0));
        translate: 0 100%;
        opacity: 0;
        transition:
            translate var(--nv-duration-enter) var(--nv-ease-out),
            opacity var(--nv-duration-enter) var(--nv-ease-out);
        z-index: 3;
    }

    .nv-product-card:hover .nv-card-actions {
        translate: 0 0;
        opacity: 1;
    }

    .nv-card-action-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: var(--nv-radius-full);
        background: var(--nv-surface);
        color: var(--nv-text);
        border: none;
        cursor: pointer;
        box-shadow: var(--nv-shadow-sm);
        transition:
            background var(--nv-duration-fast) var(--nv-ease-out),
            color var(--nv-duration-fast) var(--nv-ease-out),
            scale var(--nv-duration-fast) var(--nv-ease-spring);
    }

    .nv-card-action-btn:hover {
        background: var(--nv-accent);
        color: var(--nv-text-inverse);
    }

    .nv-card-action-btn:active {
        scale: 0.92;
    }

    /* Card Body */
    .nv-card-body {
        padding: var(--card-padding, var(--nv-space-md));
    }

    .nv-card-category {
        font-size: var(--nv-text-xs);
        color: var(--nv-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 500;
        margin-bottom: var(--nv-space-xs);
    }

    /* h3.nv-card-title: Spezifitaet muss hoeher sein als das generische
       h3 in @layer base, sonst uebersteuert dieses die Variable-basierte
       Schriftgroesse. */
    h3.nv-card-title,
    .nv-card-title {
        font-size: var(--card-title-size, 15px);
        font-weight: var(--card-title-weight, 600);
        color: var(--nv-text);
        line-height: 1.4;
        margin-bottom: var(--nv-space-sm);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .nv-card-title a {
        color: inherit;
        text-decoration: none;
    }

    .nv-card-title a:hover {
        color: var(--nv-accent);
    }

    .nv-card-price {
        font-size: var(--card-price-size, 17px);
        font-weight: var(--card-price-weight, 700);
        color: var(--nv-text);
    }

    .nv-card-price del {
        color: var(--nv-text-muted);
        font-weight: 400;
        font-size: 0.85em;
        margin-right: 0.3em;
    }

    .nv-card-price ins {
        text-decoration: none;
        color: var(--nv-danger);
    }

    /* Card Color Swatches */
    .nv-card-swatches {
        display: flex;
        gap: 4px;
        margin-top: var(--nv-space-sm);
    }

    .nv-swatch-dot {
        width: 16px;
        height: 16px;
        border-radius: var(--nv-radius-full);
        border: 2px solid var(--nv-border);
        cursor: pointer;
        transition: border-color var(--nv-duration-fast), scale var(--nv-duration-fast) var(--nv-ease-spring);
    }

    .nv-swatch-dot:hover,
    .nv-swatch-dot.is-active {
        border-color: var(--nv-accent);
        scale: 1.2;
    }

    /* Card Add-to-Cart with Checkmark Animation */
    .nv-card-add-to-cart {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--nv-space-sm);
        width: 100%;
        padding: var(--nv-space-sm) var(--nv-space-md);
        margin-top: var(--nv-space-sm);
        background: var(--nv-accent);
        color: var(--nv-text-inverse);
        font-weight: 600;
        font-size: var(--nv-text-sm);
        border: none;
        border-radius: var(--nv-radius-md);
        cursor: pointer;
        transition:
            background var(--nv-duration-fast) var(--nv-ease-out),
            scale var(--nv-duration-fast) var(--nv-ease-spring);
    }

    .nv-card-add-to-cart:hover {
        background: var(--nv-accent-hover);
    }

    .nv-card-add-to-cart:active {
        scale: 0.97;
    }

    .nv-card-add-to-cart.is-added {
        background: var(--nv-success);
    }

    .nv-card-add-to-cart .nv-check-icon {
        display: none;
        width: 18px;
        height: 18px;
    }

    .nv-card-add-to-cart.is-added .nv-check-icon {
        display: block;
        animation: nv-check-pop var(--nv-duration-enter) var(--nv-ease-spring) forwards;
    }

    .nv-card-add-to-cart.is-added .nv-cart-text {
        display: none;
    }

    .nv-card-add-to-cart .nv-added-text {
        display: none;
    }

    .nv-card-add-to-cart.is-added .nv-added-text {
        display: inline;
    }

    @keyframes nv-check-pop {
        0%   { scale: 0; opacity: 0; }
        60%  { scale: 1.3; }
        100% { scale: 1; opacity: 1; }
    }

    /* --- Glassmorphism --- */
    .nv-glass {
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        background: var(--nv-surface-overlay);
        border: 1px solid var(--nv-border);
        border-radius: var(--nv-radius-xl);
        box-shadow: var(--nv-shadow-lg);
    }

    [data-theme="dark"] .nv-glass {
        background: oklch(0.20 0.015 260 / 0.80);
        border-color: oklch(0.35 0.010 260);
    }

    /* --- Skeleton Loading --- */
    .nv-skeleton {
        position: relative;
        overflow: hidden;
        background: var(--nv-bg-alt);
        border-radius: var(--nv-radius-md);
    }

    .nv-skeleton::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
            90deg,
            transparent 0%,
            oklch(1 0 0 / 0.4) 50%,
            transparent 100%
        );
        background-size: 200% 100%;
        animation: nv-shimmer 1.5s ease-in-out infinite;
    }

    [data-theme="dark"] .nv-skeleton::after {
        background: linear-gradient(
            90deg,
            transparent 0%,
            oklch(0.3 0.01 260 / 0.3) 50%,
            transparent 100%
        );
        background-size: 200% 100%;
    }

    @keyframes nv-shimmer {
        0%   { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    .nv-skeleton-line {
        height: 1em;
        margin-bottom: 0.5em;
        border-radius: var(--nv-radius-sm);
    }

    .nv-skeleton-line.w-75  { width: 75%; }
    .nv-skeleton-line.w-50  { width: 50%; }
    .nv-skeleton-line.w-100 { width: 100%; }

    .nv-skeleton-image {
        aspect-ratio: 1;
    }

    /* --- Haptic-like Feedback Buttons --- */
    .nv-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--nv-space-sm);
        padding: var(--nv-space-sm) var(--nv-space-lg);
        font-weight: 600;
        font-size: var(--nv-text-sm);
        line-height: 1.5;
        border-radius: var(--nv-radius-md);
        border: none;
        cursor: pointer;
        text-decoration: none;
        transition:
            background var(--nv-duration-fast) var(--nv-ease-out),
            color var(--nv-duration-fast) var(--nv-ease-out),
            box-shadow var(--nv-duration-fast) var(--nv-ease-out),
            scale var(--nv-duration-fast) var(--nv-ease-spring);
    }

    .nv-btn:active {
        scale: 0.97;
    }

    .nv-btn-primary {
        background: var(--nv-accent);
        color: var(--nv-text-inverse);
    }

    .nv-btn-primary:hover {
        background: var(--nv-accent-hover);
        box-shadow: var(--nv-shadow-md);
    }

    .nv-btn-outline {
        background: transparent;
        color: var(--nv-accent);
        box-shadow: inset 0 0 0 1.5px var(--nv-accent);
    }

    .nv-btn-outline:hover {
        background: var(--nv-accent);
        color: var(--nv-text-inverse);
    }

    .nv-btn-ghost {
        background: transparent;
        color: var(--nv-text);
    }

    .nv-btn-ghost:hover {
        background: var(--nv-bg-alt);
    }

    .nv-btn-lg {
        padding: var(--nv-space-md) var(--nv-space-xl);
        font-size: var(--nv-text-base);
        border-radius: var(--nv-radius-lg);
    }

    .nv-btn-sm {
        padding: var(--nv-space-xs) var(--nv-space-md);
        font-size: var(--nv-text-xs);
        border-radius: var(--nv-radius-sm);
    }

    /* --- Dark Mode Toggle Button --- */
    .nv-theme-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: var(--nv-radius-full);
        background: var(--nv-bg-alt);
        border: 1px solid var(--nv-border);
        cursor: pointer;
        color: var(--nv-text);
        transition:
            background var(--nv-duration-fast) var(--nv-ease-out),
            rotate var(--nv-duration-slow) var(--nv-ease-spring);
    }

    .nv-theme-toggle:hover {
        background: var(--nv-accent-subtle);
        rotate: 15deg;
    }

    .nv-theme-toggle .nv-icon-sun,
    .nv-theme-toggle .nv-icon-moon {
        width: 20px;
        height: 20px;
        transition: opacity var(--nv-duration-fast), scale var(--nv-duration-fast) var(--nv-ease-spring);
    }

    .nv-theme-toggle .nv-icon-moon  { display: block; }
    .nv-theme-toggle .nv-icon-sun   { display: none; }

    [data-theme="dark"] .nv-theme-toggle .nv-icon-moon  { display: none; }
    [data-theme="dark"] .nv-theme-toggle .nv-icon-sun   { display: block; }

    /* --- Sticky Add-to-Cart Bar (Single Product) --- */
    .nv-sticky-atc {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 900;
        translate: 0 100%;
        opacity: 0;
        transition:
            translate var(--nv-duration-enter) var(--nv-ease-out),
            opacity var(--nv-duration-enter) var(--nv-ease-out);
    }

    .nv-sticky-atc.is-visible {
        translate: 0 0;
        opacity: 1;
    }

    .nv-sticky-atc-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--nv-space-lg);
        max-width: var(--nv-content-width);
        margin: 0 auto;
        padding: var(--nv-space-md) var(--nv-space-lg);
        background: var(--nv-surface);
        backdrop-filter: blur(12px) saturate(150%);
        -webkit-backdrop-filter: blur(12px) saturate(150%);
        border-top: 1px solid var(--nv-border);
        box-shadow: 0 -4px 12px oklch(0 0 0 / 0.08);
    }

    /* --- Image Zoom on Hover (CSS only) --- */
    .nv-image-zoom {
        position: relative;
        overflow: hidden;
        cursor: zoom-in;
    }

    .nv-image-zoom img {
        transition: scale var(--nv-duration-slow) var(--nv-ease-out);
    }

    .nv-image-zoom:hover img {
        scale: 1.5;
    }

    /* Magnifying glass effect */
    .nv-image-magnify {
        position: relative;
        overflow: hidden;
    }

    .nv-image-magnify:hover {
        cursor: crosshair;
    }

    .nv-image-magnify-lens {
        display: none;
        position: absolute;
        width: 180px;
        height: 180px;
        border-radius: var(--nv-radius-full);
        border: 3px solid var(--nv-accent);
        background-repeat: no-repeat;
        box-shadow: var(--nv-shadow-lg);
        pointer-events: none;
        z-index: 10;
    }

    .nv-image-magnify:hover .nv-image-magnify-lens {
        display: block;
    }

    /* --- Newsletter Glass Card --- */
    .nv-newsletter {
        position: relative;
        padding: var(--nv-space-3xl) var(--nv-space-xl);
        border-radius: var(--nv-radius-2xl);
        overflow: hidden;
        text-align: center;
    }

    .nv-newsletter-bg {
        position: absolute;
        inset: 0;
        background:
            radial-gradient(ellipse at 30% 50%, oklch(0.70 0.14 195 / 0.15) 0%, transparent 60%),
            radial-gradient(ellipse at 70% 80%, oklch(0.65 0.12 280 / 0.10) 0%, transparent 50%),
            var(--nv-surface);
        z-index: -1;
    }

    .nv-newsletter-form {
        display: flex;
        gap: var(--nv-space-sm);
        max-width: 480px;
        margin: var(--nv-space-lg) auto 0;
    }

    .nv-newsletter-input {
        flex: 1;
        padding: var(--nv-space-sm) var(--nv-space-md);
        border: 1px solid var(--nv-border);
        border-radius: var(--nv-radius-md);
        font-size: var(--nv-text-sm);
        background: var(--nv-surface);
        color: var(--nv-text);
        outline: none;
        transition: border-color var(--nv-duration-fast), box-shadow var(--nv-duration-fast);
    }

    .nv-newsletter-input:focus {
        border-color: var(--nv-accent);
        box-shadow: 0 0 0 3px var(--nv-ring);
    }

    /* --- Brand Trust Bar --- */
    .nv-brands {
        display: flex;
        align-items: center;
        gap: var(--nv-space-xl);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding: var(--nv-space-lg) 0;
    }

    .nv-brands::-webkit-scrollbar { display: none; }

    .nv-brand-logo {
        flex: 0 0 auto;
        scroll-snap-align: center;
        height: var(--nv-brand-logo-h, 32px);
        width: auto;
        max-width: none;
        object-fit: contain;
        opacity: 0.5;
        filter: grayscale(1);
        transition:
            opacity var(--nv-duration-base) var(--nv-ease-out),
            filter var(--nv-duration-base) var(--nv-ease-out);
    }

    .nv-brand-logo:hover {
        opacity: 1;
        filter: grayscale(0);
    }

    /* --- Testimonial Card --- */
    .nv-testimonial {
        position: relative;
        background: var(--nv-surface);
        border-radius: var(--nv-radius-xl);
        padding: var(--nv-space-xl);
        box-shadow: var(--nv-shadow-sm);
        flex: 0 0 clamp(280px, 33%, 400px);
    }

    .nv-testimonial-stars {
        display: flex;
        gap: 2px;
        color: var(--nv-star, oklch(0.78 0.16 80));
        margin-bottom: var(--nv-space-sm);
    }

    .nv-testimonial-text {
        font-size: var(--nv-text-base);
        color: var(--nv-text-secondary);
        line-height: 1.7;
        margin-bottom: var(--nv-space-md);
    }

    .nv-testimonial-author {
        display: flex;
        align-items: center;
        gap: var(--nv-space-sm);
    }

    .nv-testimonial-avatar {
        width: 40px;
        height: 40px;
        border-radius: var(--nv-radius-full);
        object-fit: cover;
    }

    .nv-testimonial-name {
        font-weight: 600;
        font-size: var(--nv-text-sm);
        color: var(--nv-text);
    }

    /* --- Section Headers --- */
    .nv-section {
        padding: var(--nv-space-3xl) 0;
    }

    .nv-section-header {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        margin-bottom: var(--nv-space-xl);
        gap: var(--nv-space-lg);
    }

    .nv-section-title {
        font-size: var(--nv-text-4xl);
        font-weight: 700;
        color: var(--nv-text);
    }

    .nv-section-subtitle {
        font-size: var(--nv-text-base);
        color: var(--nv-text-muted);
        margin-top: var(--nv-space-xs);
    }

    .nv-section-link {
        display: inline-flex;
        align-items: center;
        gap: var(--nv-space-xs);
        color: var(--nv-accent);
        font-weight: 600;
        font-size: var(--nv-text-sm);
        text-decoration: none;
        white-space: nowrap;
        transition: gap var(--nv-duration-fast) var(--nv-ease-out);
    }

    .nv-section-link:hover {
        gap: var(--nv-space-sm);
    }

    /* --- Native Dialog / Modal --- */
    dialog.nv-dialog {
        position: fixed;
        margin: auto;
        padding: 0;
        border: none;
        border-radius: var(--nv-radius-xl);
        background: var(--nv-surface);
        box-shadow: var(--nv-shadow-xl);
        max-width: 90vw;
        max-height: 85vh;
        overflow: auto;
        color: var(--nv-text);
    }

    dialog.nv-dialog::backdrop {
        background: oklch(0 0 0 / 0.5);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    dialog.nv-dialog[open] {
        animation: nv-dialog-in var(--nv-duration-enter) var(--nv-ease-out) forwards;
    }

    @keyframes nv-dialog-in {
        from { opacity: 0; scale: 0.95; translate: 0 8px; }
        to   { opacity: 1; scale: 1; translate: 0 0; }
    }

    /* --- Native Popover (Tooltips) --- */
    [popover] {
        margin: 0;
        padding: var(--nv-space-sm) var(--nv-space-md);
        border: 1px solid var(--nv-border);
        border-radius: var(--nv-radius-md);
        background: var(--nv-surface);
        box-shadow: var(--nv-shadow-md);
        font-size: var(--nv-text-sm);
        color: var(--nv-text);
        max-width: 320px;
    }

    [popover]:popover-open {
        animation: nv-popover-in var(--nv-duration-fast) var(--nv-ease-out) forwards;
    }

    @keyframes nv-popover-in {
        from { opacity: 0; translate: 0 -4px; }
        to   { opacity: 1; translate: 0 0; }
    }

    /* --- Immersive Product Hero --- */
    .nv-product-hero {
        position: relative;
        min-height: 60vh;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .nv-product-hero-bg {
        position: absolute;
        inset: 0;
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    .nv-product-hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to bottom,
            oklch(0 0 0 / 0) 0%,
            oklch(0 0 0 / 0.3) 60%,
            oklch(0 0 0 / 0.7) 100%
        );
    }

    .nv-product-hero-content {
        position: relative;
        z-index: 2;
        text-align: center;
        color: oklch(0.98 0 0);
        padding: var(--nv-space-3xl);
    }

    /* --- Star Rating --- */
    .nv-stars {
        display: inline-flex;
        gap: 1px;
        color: var(--nv-star, oklch(0.78 0.16 80));
    }

    .nv-stars svg {
        width: 16px;
        height: 16px;
    }

    .nv-stars .nv-star-empty {
        color: var(--nv-border-strong);
    }

    /* --- USP Bar --- */
    .nv-usp-bar {
        background: var(--nv-bg-alt);
        padding: var(--nv-space-md) 0;
        border-bottom: 1px solid var(--nv-border);
    }

    .nv-usp-grid {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--nv-space-xl);
        flex-wrap: wrap;
    }

    .nv-usp-item {
        display: flex;
        align-items: center;
        gap: var(--nv-space-sm);
        font-size: var(--nv-text-sm);
        color: var(--nv-text-secondary);
        white-space: nowrap;
    }

    .nv-usp-icon {
        font-size: var(--nv-text-lg);
        flex-shrink: 0;
    }

    .nv-usp-text {
        font-weight: 500;
    }

    @media (max-width: 640px) {
        .nv-usp-grid {
            gap: var(--nv-space-md);
        }
        .nv-usp-item {
            font-size: var(--nv-text-xs);
        }
    }

    /* --- Marquee (Infinite auto-scroll logos) --- */
    .nv-marquee {
        overflow: hidden;
        position: relative;
    }

    .nv-marquee::before,
    .nv-marquee::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 60px;
        z-index: 2;
        pointer-events: none;
    }

    .nv-marquee::before {
        left: 0;
        background: linear-gradient(to right, var(--nv-bg, #fff), transparent);
    }

    .nv-marquee::after {
        right: 0;
        background: linear-gradient(to left, var(--nv-bg, #fff), transparent);
    }

    .nv-marquee-track {
        display: flex;
        align-items: center;
        gap: var(--nv-space-2xl);
        animation: nv-marquee-scroll 30s linear infinite;
        width: max-content;
    }

    .nv-marquee:hover .nv-marquee-track {
        animation-play-state: paused;
    }

    .nv-marquee-item {
        display: inline-flex;
        align-items: center;
        text-decoration: none;
        flex-shrink: 0;
    }

    .nv-brand-text {
        font-size: var(--nv-text-sm);
        font-weight: 600;
        color: var(--nv-text-muted);
        white-space: nowrap;
        padding: var(--nv-space-sm) var(--nv-space-md);
    }

    @keyframes nv-marquee-scroll {
        0%   { translate: 0 0; }
        100% { translate: -50% 0; }
    }

    /* --- Testimonials Carousel (CSS scroll-snap) --- */
    .nv-testimonials-carousel {
        display: flex;
        gap: var(--nv-space-lg);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: var(--nv-space-lg);
        scrollbar-width: none;
        padding-bottom: var(--nv-space-md);
        -webkit-overflow-scrolling: touch;
    }

    .nv-testimonials-carousel::-webkit-scrollbar {
        display: none;
    }

    .nv-testimonials-carousel .nv-testimonial {
        scroll-snap-align: start;
        min-width: 0;
    }

    .nv-testimonial-avatar-initial {
        width: 40px;
        height: 40px;
        border-radius: var(--nv-radius-full);
        background: var(--nv-accent-subtle);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: var(--nv-text-sm);
        color: var(--nv-accent);
        flex-shrink: 0;
    }

    /* --- Sale Section Accent Background --- */
    .nv-sale-section {
        background: linear-gradient(
            135deg,
            oklch(0.95 0.03 25 / 0.3) 0%,
            oklch(0.97 0.01 25 / 0.1) 100%
        );
    }

    [data-theme="dark"] .nv-sale-section {
        background: linear-gradient(
            135deg,
            oklch(0.20 0.03 25 / 0.3) 0%,
            oklch(0.17 0.01 25 / 0.1) 100%
        );
    }

    /* --- CTA Banner --- */
    .nv-cta-banner {
        position: relative;
        min-height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        text-align: center;
        color: oklch(0.98 0 0);
    }

    .nv-cta-banner-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .nv-cta-banner-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
            135deg,
            oklch(0.15 0.02 260 / 0.75) 0%,
            oklch(0.10 0.03 195 / 0.85) 100%
        );
    }

    .nv-cta-banner-content {
        position: relative;
        z-index: 2;
        padding: var(--nv-space-3xl) var(--nv-space-lg);
    }

    .nv-cta-banner-title {
        font-size: var(--nv-text-5xl);
        font-weight: 800;
        margin-bottom: var(--nv-space-md);
    }

    .nv-cta-banner-text {
        font-size: var(--nv-text-lg);
        max-width: 600px;
        margin: 0 auto var(--nv-space-xl);
        opacity: 0.9;
    }

    /* --- Modern Pagination (Load More) --- */
    .nv-pagination {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--nv-space-md);
        padding: var(--nv-space-2xl) 0;
    }

    .nv-pagination-count {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--nv-space-sm);
        width: 100%;
        max-width: 300px;
    }

    .nv-pagination-count-text {
        font-size: var(--nv-text-sm);
        color: var(--nv-text-muted);
    }

    .nv-pagination-progress {
        width: 100%;
        height: 4px;
        background: var(--nv-border);
        border-radius: var(--nv-radius-full);
        overflow: hidden;
    }

    .nv-pagination-progress-bar {
        height: 100%;
        background: var(--nv-accent);
        border-radius: var(--nv-radius-full);
        transition: width 0.4s var(--nv-ease-out);
    }

    .nv-load-more {
        min-width: 200px;
        transition: opacity var(--nv-duration-base), transform var(--nv-duration-base);
    }

    .nv-load-more.is-loading {
        opacity: 0.7;
        pointer-events: none;
    }

    .nv-back-to-top-pagination {
        display: inline-flex;
        align-items: center;
        gap: var(--nv-space-xs);
        font-size: var(--nv-text-sm);
        color: var(--nv-text-muted);
        cursor: pointer;
    }

    /* Load-more entrance animation for new products */
    @keyframes nv-load-more-enter {
        from {
            opacity: 0;
            translate: 0 20px;
        }
        to {
            opacity: 1;
            translate: 0 0;
        }
    }

    .nv-load-more-enter {
        animation: nv-load-more-enter 0.4s var(--nv-ease-out) both;
    }

    /* --- Archive Layout --- */
    .nv-archive-header {
        margin-bottom: var(--nv-space-xl);
    }

    .nv-archive-title {
        font-size: var(--nv-text-4xl);
        font-weight: 700;
        color: var(--nv-text);
        margin-bottom: var(--nv-space-xs);
    }

    .nv-archive-layout {
        display: flex;
        gap: var(--nv-space-xl);
    }

    .nv-archive-main {
        flex: 1;
        min-width: 0;
    }

    .nv-archive-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--nv-space-md);
        margin-bottom: var(--nv-space-lg);
        padding-bottom: var(--nv-space-md);
        border-bottom: 1px solid var(--nv-border);
    }

    .nv-archive-count {
        font-size: var(--nv-text-sm);
        color: var(--nv-text-muted);
    }

    .nv-archive-controls {
        display: flex;
        align-items: center;
        gap: var(--nv-space-sm);
    }

    .nv-view-toggle {
        display: none;
        align-items: center;
        border: 1px solid var(--nv-border);
        border-radius: var(--nv-radius-md);
        overflow: hidden;
    }

    @media (min-width: 768px) {
        .nv-view-toggle {
            display: flex;
        }
    }

    .nv-view-toggle button {
        padding: var(--nv-space-sm);
        color: var(--nv-text-muted);
        background: none;
        border: none;
        cursor: pointer;
        transition: color var(--nv-duration-fast), background var(--nv-duration-fast);
    }

    .nv-view-toggle button:hover {
        color: var(--nv-text);
        background: var(--nv-bg-alt);
    }

    .nv-view-toggle button.is-active {
        color: var(--nv-accent);
        background: var(--nv-accent-subtle);
    }

    .nv-sort-wrapper select,
    .nv-sort-wrapper .orderby {
        padding: var(--nv-space-sm) var(--nv-space-md);
        border: 1px solid var(--nv-border);
        border-radius: var(--nv-radius-md);
        background: var(--nv-surface);
        color: var(--nv-text);
        font-size: var(--nv-text-sm);
        cursor: pointer;
        outline: none;
        transition: border-color var(--nv-duration-fast);
    }

    .nv-sort-wrapper select:focus,
    .nv-sort-wrapper .orderby:focus {
        border-color: var(--nv-accent);
        box-shadow: 0 0 0 3px var(--nv-ring);
    }

    .nv-active-filters {
        display: flex;
        flex-wrap: wrap;
        gap: var(--nv-space-sm);
        margin-bottom: var(--nv-space-md);
    }

    /* Homepage scroll: horizontal on mobile for product grids */
    @media (max-width: 768px) {
        .nv-homepage-scroll {
            display: flex !important;
            grid-template-columns: none !important;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
            gap: var(--nv-space-md) !important;
            padding-bottom: var(--nv-space-md);
        }

        .nv-homepage-scroll::-webkit-scrollbar {
            display: none;
        }

        .nv-homepage-scroll > * {
            flex: 0 0 clamp(200px, 70vw, 280px);
            scroll-snap-align: start;
        }
    }
}

/* ========================================================================
   LAYER: UTILITIES
   ======================================================================== */
@layer utilities {

    /* --- Visually hidden (accessible) --- */
    .nv-sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* --- Container (fluid max-width) --- */
    .nv-container {
        width: 100%;
        max-width: var(--nv-content-width);
        margin-inline: auto;
        padding-inline: var(--nv-space-lg);
    }

    /* --- Text utilities --- */
    .nv-text-gradient {
        background: linear-gradient(135deg, var(--nv-accent), oklch(0.65 0.15 280));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* --- Focus ring --- */
    .nv-focus-ring:focus-visible {
        outline: 2px solid var(--nv-accent);
        outline-offset: 2px;
    }

    /* --- Dynamic color mixing utility --- */
    .nv-bg-accent-mix {
        background: color-mix(in oklch, var(--nv-accent) 15%, var(--nv-surface));
    }
}

/* ========================================================================
   LAYER: TRANSITIONS - View Transitions, Scroll-driven Animations
   ======================================================================== */
@layer transitions {

    /* --- View Transitions API --- */
    @view-transition {
        navigation: auto;
    }

    ::view-transition-group(product-image) {
        animation-duration: 0.3s;
        animation-timing-function: var(--nv-ease-in-out);
    }

    ::view-transition-old(product-image) {
        animation: nv-vt-fade-out 0.25s var(--nv-ease-out) forwards;
    }

    ::view-transition-new(product-image) {
        animation: nv-vt-fade-in 0.3s var(--nv-ease-out) forwards;
    }

    @keyframes nv-vt-fade-out {
        from { opacity: 1; scale: 1; }
        to   { opacity: 0; scale: 0.96; }
    }

    @keyframes nv-vt-fade-in {
        from { opacity: 0; scale: 1.04; }
        to   { opacity: 1; scale: 1; }
    }

    ::view-transition-group(page-content) {
        animation-duration: 0.25s;
    }

    ::view-transition-old(page-content) {
        animation: nv-vt-slide-out 0.2s var(--nv-ease-out) forwards;
    }

    ::view-transition-new(page-content) {
        animation: nv-vt-slide-in 0.25s var(--nv-ease-out) forwards;
    }

    @keyframes nv-vt-slide-out {
        from { opacity: 1; translate: 0 0; }
        to   { opacity: 0; translate: -20px 0; }
    }

    @keyframes nv-vt-slide-in {
        from { opacity: 0; translate: 20px 0; }
        to   { opacity: 1; translate: 0 0; }
    }

    /* --- Scroll-driven Animations --- */
    @supports (animation-timeline: view()) {

        .nv-scroll-reveal {
            animation: nv-reveal linear both;
            animation-timeline: view();
            animation-range: entry 5% cover 25%;
        }

        @keyframes nv-reveal {
            from { opacity: 0; translate: 0 40px; }
            to   { opacity: 1; translate: 0 0; }
        }

        .nv-scroll-reveal-left {
            animation: nv-reveal-left linear both;
            animation-timeline: view();
            animation-range: entry 5% cover 30%;
        }

        @keyframes nv-reveal-left {
            from { opacity: 0; translate: -40px 0; }
            to   { opacity: 1; translate: 0 0; }
        }

        .nv-scroll-reveal-right {
            animation: nv-reveal-right linear both;
            animation-timeline: view();
            animation-range: entry 5% cover 30%;
        }

        @keyframes nv-reveal-right {
            from { opacity: 0; translate: 40px 0; }
            to   { opacity: 1; translate: 0 0; }
        }

        .nv-scroll-reveal-scale {
            animation: nv-reveal-scale linear both;
            animation-timeline: view();
            animation-range: entry 5% cover 25%;
        }

        @keyframes nv-reveal-scale {
            from { opacity: 0; scale: 0.92; }
            to   { opacity: 1; scale: 1; }
        }

        /* Parallax background */
        .nv-parallax-bg {
            animation: nv-parallax linear both;
            animation-timeline: view();
            animation-range: cover 0% cover 100%;
        }

        @keyframes nv-parallax {
            from { translate: 0 -10%; }
            to   { translate: 0 10%; }
        }

        /* Progress bar on scroll */
        .nv-scroll-progress {
            animation: nv-progress-width linear both;
            animation-timeline: scroll(root);
        }

        @keyframes nv-progress-width {
            from { scale: 0 1; transform-origin: left; }
            to   { scale: 1 1; transform-origin: left; }
        }
    }

    /* --- Fallback for browsers without scroll-timeline --- */
    @supports not (animation-timeline: view()) {
        .nv-scroll-reveal,
        .nv-scroll-reveal-left,
        .nv-scroll-reveal-right,
        .nv-scroll-reveal-scale {
            opacity: 0;
            translate: 0 30px;
            transition: opacity 0.6s var(--nv-ease-out), translate 0.6s var(--nv-ease-out);
        }

        .nv-scroll-reveal-left  { translate: -30px 0; }
        .nv-scroll-reveal-right { translate: 30px 0; }
        .nv-scroll-reveal-scale { translate: 0 0; scale: 0.92; }

        .nv-scroll-reveal.revealed,
        .nv-scroll-reveal-left.revealed,
        .nv-scroll-reveal-right.revealed,
        .nv-scroll-reveal-scale.revealed {
            opacity: 1;
            translate: 0 0;
            scale: 1;
        }
    }

    /* --- Cart Fly-to Animation --- */
    .nv-fly-to-cart {
        position: fixed;
        z-index: 10000;
        width: 60px;
        height: 60px;
        border-radius: var(--nv-radius-full);
        object-fit: cover;
        pointer-events: none;
        box-shadow: var(--nv-shadow-lg);
        animation: nv-fly-to-cart 0.7s var(--nv-ease-in-out) forwards;
    }

    @keyframes nv-fly-to-cart {
        0% {
            opacity: 1;
            scale: 1;
        }
        70% {
            opacity: 0.8;
            scale: 0.5;
        }
        100% {
            opacity: 0;
            scale: 0.2;
        }
    }

    /* --- Cart Icon Bounce --- */
    .nv-cart-bounce {
        animation: nv-bounce 0.4s var(--nv-ease-spring);
    }

    @keyframes nv-bounce {
        0%   { scale: 1; }
        40%  { scale: 1.25; }
        70%  { scale: 0.9; }
        100% { scale: 1; }
    }

    /* --- Page Content Reveal (Apple-Stil) --- */
    /* Apple-Feel: deutlich sichtbares Aufsteigen mit weichem Ausklingen.
       Wichtig: Opacity startet bei 0.6 (nicht 0) - sonst entsteht ein "graues Fenster"
       waehrend der Animation, weil der Browser-Hintergrund durchscheint.
       Ease-Kurve "cubic-bezier(0.16, 1, 0.3, 1)" = Apple's signature "ease-out-expo":
       schnelles Ankommen + sanftes Ausklingen. */
    .nv-page-enter {
        animation: nv-page-enter 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    @keyframes nv-page-enter {
        from { opacity: 0.6; translate: 0 24px; }
        to   { opacity: 1;   translate: 0 0; }
    }
}

/* ========================================================================
   REDUCED MOTION - Respect user preferences
   ======================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .nv-scroll-reveal,
    .nv-scroll-reveal-left,
    .nv-scroll-reveal-right,
    .nv-scroll-reveal-scale {
        opacity: 1 !important;
        translate: 0 0 !important;
        scale: 1 !important;
    }

    .nv-fly-to-cart {
        display: none !important;
    }
}

/* ========================================================================
   PRINT
   ======================================================================== */
@media print {
    .nv-theme-toggle,
    .nv-sticky-atc,
    .nv-back-to-top,
    .nv-card-actions,
    .nv-fly-to-cart {
        display: none !important;
    }
}

/* ========================================================================
   DARK MODE - Image Protection
   Product images are NOT inverted in dark mode.
   ======================================================================== */
[data-theme="dark"] img:not(.nv-invert-ok) {
    /* Keep original colors for product images */
}

[data-theme="dark"] .nv-brand-logo {
    filter: grayscale(1) brightness(2);
}

[data-theme="dark"] .nv-brand-logo:hover {
    filter: grayscale(0) brightness(1.1);
}

/* ========================================================================
   MOBILE OVERRIDES (unlayered — gewinnt gegen Inline-Styles)
   Ziel: Auf Handy-Viewports (<= 720 px) sind Bento-Scroll-Kacheln, HP-Custom-
   Blocks und Produkt-Cards so dargestellt, dass Text + Bild sauber passen.
   ======================================================================== */
@media (max-width: 720px) {

    /* Bento-Scroll-Kacheln: Inline-Width (flex:0 0 600px o.ae.) aufloesen,
       eine Kachel fuellt den Viewport, horizontales Swipe funktioniert. */
    .nv-bento-featured.is-scroll > *,
    .nv-bento-small.is-scroll    > * {
        flex: 0 0 calc(100vw - 32px) !important;
        max-width: calc(100vw - 32px) !important;
        width: calc(100vw - 32px) !important;
    }
    .nv-bento-featured.is-scroll,
    .nv-bento-small.is-scroll {
        scroll-padding-inline: 16px !important;
    }

    /* Bento-Kachel: Bild (abs+cover) NICHT auf strong aspect-ratio zwingen;
       mind. 240 px Hoehe damit Text-Overlay sichtbar bleibt. */
    .nv-bento-item {
        aspect-ratio: 4 / 3 !important;
        min-height: 240px !important;
    }
    .nv-bento-item.featured {
        aspect-ratio: 16 / 10 !important;
        min-height: 280px !important;
    }

    /* Overlay: dunkler Verlauf sorgt dafuer dass heller Text auf jedem Bild lesbar ist.
       Gilt NICHT fuer nv-custom (Kacheln mit eigenem custom_html steuern Farbe selbst). */
    .nv-bento-item-overlay:not(.nv-custom) {
        background: linear-gradient(to top, oklch(0 0 0 / 0.7) 0%, oklch(0 0 0 / 0.35) 60%, transparent 100%) !important;
        color: #fff !important;
    }
    .nv-bento-item-overlay.nv-custom {
        background: none !important;
        display: block !important;
        padding: 0 !important;
        color: inherit !important;
    }

    /* HP-Custom-Block (Bild + Text Layout) auf Mobile:
       2026-04-21: Bild wird aus der absoluten Positionierung befreit und natuerlich
       dargestellt (natuerliches Seitenverhaeltnis, max 100% Breite, max 40vh Hoehe).
       Vorher hat object-fit:cover bei hochformatigen Model-Fotos den Kopf raus-
       geschnitten und nur den weissen Studio-Hintergrund aus der Bildmitte gezeigt. */
    .nv-hp-block-split {
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto !important;
    }
    .nv-hp-block-split .nv-hp-block-media {
        order: 1 !important;
        position: static !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        background: transparent !important;
        text-align: center !important;
    }
    .nv-hp-block-split .nv-hp-block-media img {
        position: static !important;
        inset: auto !important;
        display: inline-block !important;
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 40vh !important;
        object-fit: contain !important;
        border-radius: var(--nv-radius-xl, 14px) !important;
    }
    .nv-hp-block-split .nv-hp-block-text {
        order: 2 !important;
    }

    /* Footer: alle inline grid-template-columns auf Mobile auf 2 Spalten brechen,
       auf ganz kleinen Geraeten (<= 480 px) in 1 Spalte stapeln. Attribut-Selektor
       greift auch dann, wenn der Grid inline und ohne eigene Klasse steht. */
    .nv-footer [style*="grid-template-columns"],
    .nv-footer-widgets [style*="grid-template-columns"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.25rem !important;
    }

    /* HP-Produkt-Karussell (Bestseller / Sale): Scroll-Items 85 vw breit, eins pro Screen */
    .nv-product-scroll-section .nv-scroll-section > * {
        flex: 0 0 calc(100vw - 48px) !important;
        max-width: calc(100vw - 48px) !important;
    }

    /* Neue Produkte Grid (repeat 4) auf 1 Spalte mobil */
    .nv-products-grid.nv-homepage-scroll {
        grid-template-columns: 1fr !important;
    }

    /* PDM-Zeile Mobile-Fallback (falls noch nicht durchgeschlagen) */
    .nv-pdm-row {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    /* Section-Header auf Mobile umbrechen, Scroll-Buttons rechts */
    .nv-section-header {
        flex-wrap: wrap !important;
    }
}

/* ========================================================================
   SEHR SCHMAL (<= 480 px, typisches iPhone-Portrait):
   Footer-Spalten komplett stapeln, HP-Block-Bild noch groesser.
   ======================================================================== */
@media (max-width: 480px) {
    .nv-footer [style*="grid-template-columns"],
    .nv-footer-widgets [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    .nv-hp-block-split .nv-hp-block-media img {
        max-height: 32vh !important;
    }
}