/**
 * IndustrieArmaturen24 - Globale Styles
 * CI: Blau (#1B82C1) + Orange (#F24900)
 */

/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
    --ia24-font: "Open Sans", Arial, sans-serif;
    --ia24-blue: #1B82C1;
    --ia24-blue-dark: #126a9e;
    --ia24-blue-darker: #0a4f7a;
    --ia24-blue-darkest: #063750;
    --ia24-orange: #F24900;
    --ia24-orange-light: #ff6a2a;
    --ia24-orange-dark: #c03d00;
}

/* ============================================
   HEADER
   ============================================ */
.page-header {
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 100;
}

.logo img {
    max-height: 80px !important; min-height: 50px !important;
    width: auto !important;
}

/* Logo container — bigger like mockup */
.page-header img[src*="logo"] {
    height: 50px !important;
    width: auto !important;
    max-width: 280px !important;
}
.page-header .sm\:order-1.lg\:order-0 {
    flex-shrink: 0 !important;
    min-width: 150px !important;
}


.ia24-theme .nav-sections .navigation > ul > li > a {
    color: var(--ia24-blue-darker);
    font-weight: 600;
    font-size: 15px;
    padding: 12px 16px;
    transition: color 0.2s ease;
}

.ia24-theme .nav-sections .navigation > ul > li > a:hover,
.ia24-theme .nav-sections .navigation > ul > li.active > a {
    color: var(--ia24-blue);
}

.ia24-theme .nav-sections .navigation .submenu {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.15);
    margin-top: 8px;
}

/* Suche */
.ia24-theme .block-search input {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.ia24-theme .block-search input:focus {
    border-color: var(--ia24-blue);
    box-shadow: 0 0 0 3px rgba(27, 130, 193, 0.1);
    outline: none;
}

/* Mini Cart */
.ia24-theme .minicart-wrapper .action.showcart {
    color: var(--ia24-blue-darker);
}

.ia24-theme .minicart-wrapper .action.showcart:hover {
    color: var(--ia24-blue);
}

.ia24-theme .minicart-wrapper .counter.qty {
    background: var(--ia24-orange);
    color: #ffffff;
    font-weight: 700;
    border-radius: 50%;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 11px;
}

/* ============================================
   BUTTONS
   ============================================ */
.ia24-theme .action.primary,
.ia24-theme button.primary,
.ia24-theme .btn-primary {
    background: var(--ia24-orange) !important;
    border-color: var(--ia24-orange) !important;
    color: #ffffff !important;
    font-weight: 700;
    padding: 14px 24px;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-transform: none;
    letter-spacing: 0;
}

.ia24-theme .action.primary:hover,
.ia24-theme button.primary:hover,
.ia24-theme .btn-primary:hover {
    background: var(--ia24-orange-light) !important;
    border-color: var(--ia24-orange-light) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(242, 73, 0, 0.3);
}

.ia24-theme .action.secondary,
.ia24-theme button.secondary {
    background: var(--ia24-blue) !important;
    border-color: var(--ia24-blue) !important;
    color: #ffffff !important;
}

.ia24-theme .action.secondary:hover,
.ia24-theme button.secondary:hover {
    background: var(--ia24-blue-dark) !important;
    border-color: var(--ia24-blue-dark) !important;
}

/* ============================================
   LINKS
   ============================================ */
.ia24-theme a {
    color: var(--ia24-blue);
    transition: color 0.2s ease;
}

.ia24-theme a:hover {
    color: var(--ia24-blue-dark);
}

/* ============================================
   BREADCRUMBS
   ============================================ */
.ia24-theme .breadcrumbs {
    background: #f8fafc;
    padding: 12px 0;
    border-bottom: 1px solid #e5e7eb;
}

.ia24-theme .breadcrumbs a {
    color: var(--ia24-blue);
}

/* ============================================
   PRODUCTS
   ============================================ */
.ia24-theme .product-item {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.ia24-theme .product-item:hover {
    border-color: var(--ia24-blue);
    box-shadow: 0 10px 30px -10px rgba(27, 130, 193, 0.15);
    transform: translateY(-4px);
}

.ia24-theme .product-item-name a {
    color: var(--ia24-blue-darker);
    font-weight: 600;
}

.ia24-theme .product-item-name a:hover {
    color: var(--ia24-blue);
}

/* IA24: Attribut-Mini-Tabelle auf Produktkarte */
.ia24-attr-table {
    margin: 6px 0 4px;
    width: 100%;
}
.ia24-attr-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
    line-height: 1.3;
}
.ia24-attr-table tr.ia24-attr-even {
    background: #f4f8fb;
}
.ia24-attr-table tr.ia24-attr-odd {
    background: #ffffff;
}
.ia24-attr-table td {
    padding: 3px 8px;
}
.ia24-attr-table td:first-child {
    border-radius: 3px 0 0 3px;
}
.ia24-attr-table td:last-child {
    border-radius: 0 3px 3px 0;
}
.ia24-attr-table .ia24-attr-label {
    color: #64748b;
    font-weight: 600;
    white-space: nowrap;
    width: 1%;
}
.ia24-attr-table .ia24-attr-value {
    color: #1e293b;
    font-weight: 500;
}

/* IA24: Netto/Brutto Preisanzeige */
.ia24-theme .price-container {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.ia24-theme .price-excluding-tax {
    display: flex;
    align-items: baseline;
    gap: 4px;
    order: 1;
}
.ia24-theme .price-excluding-tax .price {
    font-size: 1.1rem;
    font-weight: 700;
    color: #F24900;
}
/* "Exkl. Steuern" Label von Magento ausblenden (wir zeigen "Netto"/"Brutto") */
.ia24-theme .price-excluding-tax .price-label,
.ia24-theme .price-including-tax .price-label {
    display: none !important;
}
.ia24-theme .price-excluding-tax::before {
    content: 'Netto';
    font-size: 0.68rem;
    font-weight: 600;
    color: #94a3b8;
    min-width: 32px;
}
.ia24-theme .price-including-tax {
    display: flex;
    align-items: baseline;
    gap: 4px;
    order: 2;
}
.ia24-theme .price-including-tax .price {
    font-size: 0.78rem;
    font-weight: 500;
    color: #64748b;
}
.ia24-theme .price-including-tax::before {
    content: 'Brutto';
    font-size: 0.68rem;
    font-weight: 600;
    color: #94a3b8;
    min-width: 32px;
}

/* IA24: Produktdetailseite (PDP) — Netto prominent, Brutto sekundaer
   Hyva PDP Struktur:
   .final-price        = Brutto (inkl. MwSt) — Magento Hauptpreis
   .final-price-excl-tax = Netto (exkl. MwSt) — fuer B2B wichtiger!
   Wir tauschen die Reihenfolge per flexbox order.
*/
.ia24-theme.catalog-product-view .ia24-pdp-price .price-container {
    display: flex;
    flex-direction: column;
    gap: 0;
}
/* Netto (excl-tax) oben, gross, orange */
.ia24-theme.catalog-product-view .ia24-pdp-price .final-price-excl-tax {
    order: 1;
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
}
.ia24-theme.catalog-product-view .ia24-pdp-price .final-price-excl-tax::before {
    content: 'Netto';
    font-size: 0.75rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
/* "Excl. Tax:" Label von Hyva ausblenden */
.ia24-theme.catalog-product-view .ia24-pdp-price .final-price-excl-tax > span > span:first-child {
    display: none !important;
}
.ia24-theme.catalog-product-view .ia24-pdp-price .final-price-excl-tax .price {
    font-size: 1.75rem !important;
    font-weight: 800 !important;
    color: #F24900 !important;
    letter-spacing: -0.02em;
}
/* Brutto (final-price inkl. MwSt) unten, kleiner, grau */
.ia24-theme.catalog-product-view .ia24-pdp-price .final-price {
    order: 2;
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.ia24-theme.catalog-product-view .ia24-pdp-price .final-price .price-label {
    display: none !important;
}
.ia24-theme.catalog-product-view .ia24-pdp-price .final-price::before {
    content: 'Brutto';
    font-size: 0.75rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ia24-theme.catalog-product-view .ia24-pdp-price .final-price .price {
    font-size: 1rem;
    font-weight: 600;
    color: #64748b;
}
/* Alter Preis (durchgestrichen bei Rabatt) */
.ia24-theme.catalog-product-view .ia24-pdp-price .old-price {
    order: 0;
}
.ia24-theme.catalog-product-view .ia24-pdp-price .old-price .price {
    font-size: 1rem;
    color: #94a3b8;
    text-decoration: line-through;
}
/* Configurable-Preis (Template x-if activeProductsPriceData) */
.ia24-theme.catalog-product-view .ia24-pdp-price .price-excl-tax {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
}
.ia24-theme.catalog-product-view .ia24-pdp-price .price-excl-tax::before {
    content: 'Netto';
    font-size: 0.75rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ia24-theme.catalog-product-view .ia24-pdp-price .price-excl-tax > span:first-child {
    display: none !important;
}
.ia24-theme.catalog-product-view .ia24-pdp-price .price-excl-tax .price {
    font-size: 1.75rem !important;
    font-weight: 800 !important;
    color: #F24900 !important;
    letter-spacing: -0.02em;
}

/* IA24: Lieferzeit auf PDP */
.ia24-delivery-time {
    color: #475569;
    font-size: 0.875rem;
}

/* ================================================================
   IA24 PDP GALERIE (Session 20) — komplett neu, Alpine-basiert
   Desktop: Thumbs links (vertikal) + Main rechts mit Hover-Zoom-Hint
   Mobile:  Swipe-Slider mit Snap-Scroll + Dots + Counter
   Lightbox: Fullscreen-Modal mit Pfeil-Nav, Thumb-Strip, Pinch-Zoom
   ================================================================ */

.ia24-gallery { position: relative; }
.ia24-gallery [x-cloak] { display: none !important; }

/* Placeholder wenn keine Bilder */
.ia24-gallery-empty {
    aspect-ratio: 1 / 1;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.ia24-gallery-empty img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    opacity: 0.5;
}

/* ---------- DESKTOP ---------- */
@media (min-width: 768px) {
    .ia24-gallery-mobile { display: none !important; }

    .ia24-gallery-desktop {
        display: flex;
        gap: 16px;
        align-items: flex-start;
    }

    /* Thumbnails links vertikal */
    .ia24-gallery-thumbs {
        flex: 0 0 88px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        max-height: 560px;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #cbd5e1 transparent;
        padding-right: 4px;
    }
    .ia24-gallery-thumbs::-webkit-scrollbar { width: 4px; }
    .ia24-gallery-thumbs::-webkit-scrollbar-track { background: transparent; }
    .ia24-gallery-thumbs::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 4px;
    }

    .ia24-gallery-thumb {
        width: 84px;
        height: 84px;
        border: 2px solid #e2e8f0;
        border-radius: 8px;
        overflow: hidden;
        background: #fff;
        padding: 2px;
        cursor: pointer;
        transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
        flex-shrink: 0;
    }
    .ia24-gallery-thumb:hover {
        border-color: #94a3b8;
    }
    .ia24-gallery-thumb.is-active {
        border-color: #1B82C1;
        box-shadow: 0 0 0 2px rgba(27, 130, 193, 0.25);
    }
    .ia24-gallery-thumb img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

    /* Main-Bild */
    .ia24-gallery-main {
        flex: 1;
        position: relative;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }
    .ia24-gallery-main-btn {
        display: block;
        width: 100%;
        aspect-ratio: 1 / 1;
        position: relative;
        cursor: zoom-in;
        background: #fff;
        border: 0;
        padding: 0;
        margin: 0;
        outline: none;
        overflow: hidden;
    }
    .ia24-gallery-main-btn:focus-visible {
        outline: 2px solid #1B82C1;
        outline-offset: -2px;
        border-radius: 12px;
    }
    .ia24-gallery-main-btn.is-zooming { cursor: zoom-out; }
    .ia24-gallery-main-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 24px;
        pointer-events: none;
        user-select: none;
        -webkit-user-select: none;
        transition: transform 0.12s ease-out;
        will-change: transform;
    }
    /* Beim aktiven Zoom kein Padding mehr (sonst zoomt der Whitespace) */
    .ia24-gallery-main-btn.is-zooming .ia24-gallery-main-img {
        padding: 0;
        transition: transform 0.05s ease-out;
    }

    /* Lupe oben rechts: permanent sichtbar, dezent; wird beim Hover kräftiger */
    .ia24-gallery-zoom-btn {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
        color: #334155;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
        z-index: 3;
        padding: 0;
    }
    .ia24-gallery-zoom-btn:hover {
        background: #1B82C1;
        color: #fff;
        border-color: #1B82C1;
        transform: scale(1.06);
        box-shadow: 0 4px 12px rgba(27, 130, 193, 0.35);
    }
    .ia24-gallery-zoom-btn:focus-visible {
        outline: 2px solid #1B82C1;
        outline-offset: 2px;
    }

    .ia24-gallery-counter {
        position: absolute;
        bottom: 12px;
        right: 12px;
        background: rgba(15, 23, 42, 0.75);
        color: #fff;
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        pointer-events: none;
    }

    .ia24-gallery-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid #e2e8f0;
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #0f172a;
        transition: opacity 0.2s, transform 0.2s, color 0.2s, background 0.2s;
        opacity: 0;
        z-index: 2;
    }
    .ia24-gallery-main:hover .ia24-gallery-nav { opacity: 1; }
    .ia24-gallery-nav:hover {
        background: #fff;
        transform: translateY(-50%) scale(1.08);
        color: #1B82C1;
    }
    .ia24-gallery-nav--prev { left: 12px; }
    .ia24-gallery-nav--next { right: 12px; }
}

/* ---------- MOBILE ---------- */
@media (max-width: 767px) {
    .ia24-gallery-desktop { display: none !important; }

    .ia24-gallery-mobile {
        position: relative;
    }
    .ia24-gallery-mobile-track {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
    }
    .ia24-gallery-mobile-track::-webkit-scrollbar { display: none; }

    .ia24-gallery-mobile-slide {
        flex: 0 0 100%;
        scroll-snap-align: start;
        aspect-ratio: 1 / 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px;
        cursor: pointer;
    }
    .ia24-gallery-mobile-slide img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    .ia24-gallery-mobile-counter {
        position: absolute;
        top: 12px;
        right: 12px;
        background: rgba(15, 23, 42, 0.7);
        color: #fff;
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        pointer-events: none;
    }

    .ia24-gallery-mobile-dots {
        display: flex;
        justify-content: center;
        gap: 6px;
        margin-top: 10px;
    }
    .ia24-gallery-mobile-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #cbd5e1;
        border: 0;
        padding: 0;
        cursor: pointer;
        transition: background 0.2s, width 0.2s, border-radius 0.2s;
    }
    .ia24-gallery-mobile-dot.is-active {
        background: #1B82C1;
        width: 24px;
        border-radius: 4px;
    }
}

/* ---------- LIGHTBOX (alle Viewports) ---------- */
.ia24-gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ia24-gallery-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
}
.ia24-gallery-lightbox-stage {
    position: relative;
    max-width: 90vw;
    max-height: 78vh;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ia24-gallery-lightbox-img {
    max-width: 90vw;
    max-height: 78vh;
    object-fit: contain;
    touch-action: pinch-zoom;
    user-select: none;
    -webkit-user-select: none;
    border-radius: 8px;
    background: #fff;
    padding: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
.ia24-gallery-lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.12);
    border: 0;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.3s;
}
.ia24-gallery-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(90deg);
}
.ia24-gallery-lightbox-counter {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    z-index: 10;
}
.ia24-gallery-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.12);
    border: 0;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.ia24-gallery-lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.25);
}
.ia24-gallery-lightbox-nav--prev { left: 20px; }
.ia24-gallery-lightbox-nav--next { right: 20px; }

.ia24-gallery-lightbox-strip {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    max-width: 92vw;
    overflow-x: auto;
    padding: 4px;
    z-index: 10;
    scrollbar-width: none;
}
.ia24-gallery-lightbox-strip::-webkit-scrollbar { display: none; }

.ia24-gallery-lightbox-strip-thumb {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    background: #fff;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    padding: 2px;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.2s, border-color 0.2s;
}
.ia24-gallery-lightbox-strip-thumb:hover { opacity: 1; }
.ia24-gallery-lightbox-strip-thumb.is-active {
    opacity: 1;
    border-color: #1B82C1;
}
.ia24-gallery-lightbox-strip-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

@media (max-width: 640px) {
    .ia24-gallery-lightbox-nav {
        width: 40px;
        height: 40px;
    }
    .ia24-gallery-lightbox-nav--prev { left: 8px; }
    .ia24-gallery-lightbox-nav--next { right: 8px; }
    .ia24-gallery-lightbox-img {
        max-width: 96vw;
        max-height: 68vh;
        padding: 8px;
    }
    .ia24-gallery-lightbox-stage {
        max-width: 96vw;
        max-height: 68vh;
    }
    .ia24-gallery-lightbox-strip { bottom: 10px; }
    .ia24-gallery-lightbox-strip-thumb {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
    }
    .ia24-gallery-lightbox-close {
        top: 10px;
        right: 10px;
        width: 38px;
        height: 38px;
    }
    .ia24-gallery-lightbox-counter {
        top: 14px;
        font-size: 12px;
        padding: 4px 10px;
    }
}

/* IA24: PDP Add-to-Cart Bereich — harmonisches Layout */
/* Preis-Zeile: Preis links, Qty+Button rechts auf gleicher Hoehe */
.ia24-theme.catalog-product-view .ia24-pdp-price-row {
    align-items: center !important;
    gap: 16px !important;
    padding: 20px 0;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    margin: 20px 0 !important;
}

/* Quantity Input — elegant, passend zum Button */
.ia24-theme.catalog-product-view input[type="number"].form-input {
    width: 64px !important;
    height: 48px;
    padding: 0 8px !important;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    border: 2px solid #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
    color: #1e293b;
    transition: all 0.2s ease;
    -moz-appearance: textfield;
}
.ia24-theme.catalog-product-view input[type="number"].form-input:focus {
    border-color: #1B82C1;
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(27, 130, 193, 0.15);
}
.ia24-theme.catalog-product-view input[type="number"].form-input::-webkit-inner-spin-button,
.ia24-theme.catalog-product-view input[type="number"].form-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Add-to-Cart Button — imposant, CI-Orange */
.ia24-theme.catalog-product-view .btn.btn-primary {
    height: 48px;
    padding: 0 28px !important;
    font-size: 0.95rem !important;
    font-weight: 700;
    font-family: 'Open Sans', Arial, sans-serif;
    letter-spacing: 0.02em;
    background: #F24900 !important;
    border: none !important;
    border-radius: 10px !important;
    color: #fff !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(242, 73, 0, 0.25);
}
.ia24-theme.catalog-product-view .btn.btn-primary:hover {
    background: #d93f00 !important;
    box-shadow: 0 4px 16px rgba(242, 73, 0, 0.35);
    transform: translateY(-1px);
}

/* Wishlist-Herz: neben den Warenkorb-Button, gleiche Hoehe */
.ia24-theme.catalog-product-view .btn.p-2.rounded-full {
    border: 2px solid #cbd5e1;
    color: #94a3b8;
    transition: all 0.2s ease;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px !important;
    padding: 0 !important;
    margin-left: 0 !important;
}
.ia24-theme.catalog-product-view .btn.p-2.rounded-full:hover {
    border-color: #F24900;
    color: #F24900;
    background: #fff5f0;
}

/* Payment Shortcuts Sektion — elegante Abtrennung */
.ia24-theme.catalog-product-view .ia24-payment-shortcuts {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    margin-top: 4px;
}
.ia24-theme.catalog-product-view .ia24-payment-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.ia24-theme.catalog-product-view .ia24-payment-buttons {
    flex: 1;
    max-width: 320px;
    margin-left: auto;
}
.ia24-theme.catalog-product-view .ia24-payment-buttons .product-shortcuts-container {
    max-width: 100%;
}

/* IA24: Passende Produkte Widget */
.ia24-suggested-products {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}
.ia24-suggested-products h4 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #064A74;
    margin: 0 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.ia24-suggested-products h4 svg {
    color: #F24900;
    flex-shrink: 0;
}
.ia24-suggested-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f1f3;
}
.ia24-suggested-item:last-child {
    border-bottom: none;
}
.ia24-suggested-img {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    background: #fff;
}
.ia24-suggested-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.ia24-suggested-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ia24-suggested-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: #2A3342;
    text-decoration: none;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ia24-suggested-name:hover {
    color: #1B82C1;
}
.ia24-suggested-desc {
    font-size: 0.82rem;
    color: #6B7280;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
}
.ia24-suggested-price {
    font-size: 0.78rem;
    font-weight: 700;
    color: #F24900;
}
.ia24-suggested-add {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #F24900;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.15s;
}
.ia24-suggested-add:hover {
    background: #d94000;
    transform: scale(1.1);
}
.ia24-suggested-add.ia24-adding {
    background: #16a34a;
    pointer-events: none;
}

/* IA24: Lagerverfuegbarkeit */
.ia24-stock-available {
    color: #16a34a;
    font-weight: 600;
}
.ia24-stock-unavailable {
    color: #dc2626;
    font-weight: 600;
}

/* IA24: Warenkorb-Button in CI-Orange */
.ia24-btn-cart-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    background: #F24900;
    border: 1.5px solid #F24900;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Open Sans', Arial, sans-serif;
    text-decoration: none;
}
.ia24-btn-cart-outline:hover {
    color: #fff;
    background: #d93f00;
    border-color: #d93f00;
}
.ia24-btn-cart-outline svg {
    width: 18px;
    height: 18px;
}

.ia24-theme .price {
    color: var(--ia24-orange);
    font-weight: 700;
}

/* ============================================
   FOOTER
   ============================================ */
.ia24-theme .page-footer {
    background: var(--ia24-blue-darkest);
    color: rgba(255, 255, 255, 0.8);
}

.ia24-theme .footer.content {
    border-top: none;
}

.ia24-theme .page-footer a {
    color: rgba(255, 255, 255, 0.8);
}

.ia24-theme .page-footer a:hover {
    color: var(--ia24-orange);
}

.ia24-theme .page-footer h4,
.ia24-theme .page-footer .footer-title {
    color: #ffffff;
    font-weight: 700;
}

/* ============================================
   FORMS
   ============================================ */
.ia24-theme input[type="text"],
.ia24-theme input[type="email"],
.ia24-theme input[type="password"],
.ia24-theme input[type="tel"],
.ia24-theme textarea,
.ia24-theme select {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 16px;
    transition: all 0.2s ease;
}

.ia24-theme input:focus,
.ia24-theme textarea:focus,
.ia24-theme select:focus {
    border-color: var(--ia24-blue);
    box-shadow: 0 0 0 3px rgba(27, 130, 193, 0.1);
    outline: none;
}

/* ============================================
   MESSAGES
   ============================================ */
.ia24-theme .message.success {
    background: #ecfdf5;
    border-color: #10b981;
    color: #065f46;
}

.ia24-theme .message.error {
    background: #fef2f2;
    border-color: #ef4444;
    color: #991b1b;
}

.ia24-theme .message.info {
    background: #eff6ff;
    border-color: var(--ia24-blue);
    color: var(--ia24-blue-dark);
}

/* ============================================
   CHECKOUT - LIST STYLE FIX
   Behebt das Problem mit angezeigten Punkten "."
   ============================================ */

/* Globale List-Style Fixes */
.checkout-index-index ul,
.checkout-index-index ol,
.checkout-index-index li,
.checkout-cart-index ul,
.checkout-cart-index ol,
.checkout-cart-index li {
    list-style: none !important;
    list-style-type: none !important;
}

/* ::marker Pseudo-Element komplett entfernen */
.checkout-index-index li::marker,
.checkout-cart-index li::marker,
.opc-progress-bar-item::marker {
    content: none !important;
    display: none !important;
    font-size: 0 !important;
    color: transparent !important;
}

/* Progress Bar Styling */
.ia24-theme .opc-progress-bar {
    display: flex;
    justify-content: center;
    gap: 0;
    padding: 0;
    margin: 0 0 2rem 0;
    list-style: none !important;
}

.ia24-theme .opc-progress-bar-item {
    list-style: none !important;
    position: relative;
    flex: 1;
    max-width: 220px;
    text-align: center;
}

.ia24-theme .opc-progress-bar-item._active > span::before {
    background: var(--ia24-blue) !important;
    border-color: var(--ia24-blue) !important;
    color: #fff !important;
}

.ia24-theme .opc-progress-bar-item._complete > span::before {
    background: #16a34a !important;
    border-color: #16a34a !important;
}

/* Payment & Shipping Methods */
.ia24-theme .payment-method,
.ia24-theme .shipping-method {
    list-style: none !important;
}

/* Order Summary */
.ia24-theme .opc-block-summary .product-item {
    list-style: none !important;
}

.ia24-theme .minicart-items {
    list-style: none !important;
    padding: 0;
}

/* ============================================
   LOGO - Größer wie im Mockup (84px)

/* ============================================
   SEARCH - Kompakt im Header (Mockup-Style)
   ============================================ */
@media (min-width: 1024px) {
    /* Always show search, no toggle needed */
    .page-header [x-show="searchOpen"] {
        display: block !important;
        position: absolute !important;
        right: 265px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: auto !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        z-index: 50 !important;
        left: auto !important;
        padding: 0 !important;
    }
    .page-header .search-content-wrapper {
        padding: 0 !important;
    }
    .page-header .search-content-wrapper > div {
        padding: 0 !important;
        max-width: none !important;
        margin: 0 !important;
    }

    /* Form container */
    .page-header .search-content-wrapper .form.minisearch {
        display: flex !important;
        align-items: center !important;
        background: #f0f5f9 !important;
        border: 2px solid #dee2e7 !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        transition: all 0.3s ease !important;
    }
    .page-header .search-content-wrapper .form.minisearch:focus-within {
        border-color: #1B82C1 !important;
        background: #ffffff !important;
        box-shadow: 0 0 0 3px rgba(27,130,193,0.15) !important;
    }

    /* Input field */
    .page-header .search-content-wrapper input[name="q"] {
        width: 200px !important;
        height: 38px !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 14px !important;
        font-size: 0.85rem !important;
        font-family: 'Open Sans', Arial, sans-serif !important;
        background: transparent !important;
        box-shadow: none !important;
        transition: width 0.3s ease !important;
        color: #1a2030 !important;
    }
    .page-header .search-content-wrapper input[name="q"]::placeholder {
        color: #94a3b8 !important;
        font-weight: 500 !important;
    }
    .page-header .search-content-wrapper input[name="q"]:focus {
        width: 280px !important;
        outline: none !important;
        box-shadow: none !important;
    }

    /* Search icon button via ::after on form */
    .page-header .search-content-wrapper .form.minisearch::after {
        content: '';
        flex-shrink: 0;
        width: 38px;
        height: 38px;
        background: #F24900;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        transition: background-color 0.2s;
    }
    .page-header .search-content-wrapper .form.minisearch:hover::after {
        background-color: #064A74;
    }

    /* Hide toggle button on desktop */
    .page-header button[aria-label="Toggle search form"] {
        display: none !important;
    }

    /* Autocomplete dropdown */
    .page-header .search-content-wrapper .mst-searchautocomplete__wrapper {
        position: absolute !important;
        top: 100% !important;
        right: auto !important; left: 50% !important; transform: translateX(-70%) !important;
        width: 520px !important;
        max-height: 480px !important;
        overflow-y: auto !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
        margin-top: 4px !important;
    }
}

/* ============================================
   GLOBAL FONT
   ============================================ */
body,
html {
    font-family: 'Open Sans', Arial, sans-serif;
}

/* ============================================
   STICKY HEADER
   ============================================ */
.page-header {
    position: sticky;
    top: 0;
    z-index: 100;
}

/* ============================================
   MIRASVIT SEARCH AUTOCOMPLETE - Clean Design
   ============================================ */

/* Dropdown container */
.mst-searchautocomplete__wrapper,
.search-content-wrapper .card {
    border-radius: 10px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important;
    border: 1px solid #e5e7eb !important;
    overflow: hidden !important;
}

/* Result header (Produkte; 406) */
.mst-searchautocomplete__wrapper .text-lg,
.search-content-wrapper .text-lg {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #064A74 !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid #eee !important;
    background: #f8fafc !important;
}

/* Individual product item */
.mst-searchautocomplete__item {
    padding: 10px 12px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    align-items: center !important;
    gap: 12px !important;
    transition: background 0.15s !important;
}
.mst-searchautocomplete__item:hover {
    background: #f0f7fc !important;
}
.mst-searchautocomplete__item:last-child {
    border-bottom: none !important;
}

/* Product image */
.mst-searchautocomplete__item .xl\:min-w-32 {
    min-width: 60px !important;
    max-width: 60px !important;
    flex-shrink: 0 !important;
}
.mst-searchautocomplete__item .xl\:min-w-32 img {
    width: 56px !important;
    height: 56px !important;
    object-fit: contain !important;
    padding: 2px !important;
    border: 1px solid #eee !important;
    border-radius: 6px !important;
    background: #fff !important;
}

/* Product title */
.mst-searchautocomplete__item h4 {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #1a2030 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* SKU */
.mst-searchautocomplete__item .mst__product-meta p.text-gray-600.mt-1:not(.line-clamp-2) {
    font-size: 0.7rem !important;
    color: #94a3b8 !important;
    margin-top: 2px !important;
}

/* Description: 1-line truncated */
.mst-searchautocomplete__item p.line-clamp-2 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 0.75rem !important;
    color: #6b7280 !important;
    margin-top: 2px !important;
    line-height: 1.4 !important;
    max-height: 2.8em !important;
}
/* Price */
.mst-searchautocomplete__item .mst__product-meta .flex.flex-row.text-base {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #F24900 !important;
    margin-top: 0 !important;
}


/* Meta row: Price + Cart compact */
.mst-searchautocomplete__item .mt-auto.px-2 {
    padding: 4px 8px 6px !important;
}
.mst-searchautocomplete__item .mt-auto .flex.justify-between {
    align-items: center !important;
}

/* Product meta wrapper compact */
.mst-searchautocomplete__item .mst__product-meta {
    min-width: 0 !important;
}
.mst-searchautocomplete__item .mst__product-meta .flex.flex-col.w-full.p-2 {
    padding: 2px 6px !important;
}

/* View all results link */
.mst-searchautocomplete__wrapper a[class*="viewAll"],
.search-content-wrapper a[class*="viewAll"] {
    color: #1B82C1 !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
}


/* Cart button: icon-only in autocomplete */
.mst-searchautocomplete__item .mst__product-cart button,
.mst-searchautocomplete__item .mst__product-cart a {
    font-size: 0 !important;
    line-height: 0 !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    background: #F24900 !important;
    color: transparent !important;
    border: none !important;
    overflow: hidden !important;
    position: relative !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    flex-shrink: 0 !important;
}
.mst-searchautocomplete__item .mst__product-cart button:hover,
.mst-searchautocomplete__item .mst__product-cart a:hover {
    background: #064A74 !important;
}
.mst-searchautocomplete__item .mst__product-cart button::before,
.mst-searchautocomplete__item .mst__product-cart a::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 20px !important;
    height: 20px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

/* ============================================
   FIX: Mirasvit Search Results Dropdown Width
   ============================================ */
@media (min-width: 1024px) {
    #mirasvitSearchResults {
        width: 480px !important;
        max-width: 480px !important;
        min-width: 480px !important;
        right: 0 !important;
        left: auto !important;
        transform: translateX(60px) !important;
    }
}

/* Fix: Higher specificity for cart button text hiding */
.ia24-theme .mst-searchautocomplete__item .mst__product-cart button,
.ia24-theme .mst-searchautocomplete__item .mst__product-cart a,
.ia24-theme .mst-searchautocomplete__item .mst__product-cart a.btn-primary {
    font-size: 0 !important;
    color: transparent !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
.ia24-theme .mst-searchautocomplete__item .mst__product-cart button::before,
.ia24-theme .mst-searchautocomplete__item .mst__product-cart a::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 20px !important;
    height: 20px !important;
    text-indent: 0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

/* ============================================
   SEARCH DROPDOWN: Fixed height + scrollbar
   ============================================ */
@media (min-width: 1024px) {
    #mirasvitSearchResults {
        max-height: 70vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    /* Styled scrollbar */
    #mirasvitSearchResults::-webkit-scrollbar {
        width: 6px;
    }
    #mirasvitSearchResults::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }
    #mirasvitSearchResults::-webkit-scrollbar-thumb {
        background: #1B82C1;
        border-radius: 3px;
    }
    #mirasvitSearchResults::-webkit-scrollbar-thumb:hover {
        background: #064A74;
    }
}

/* ============================================
   MEGAMENU: Kompakteres Padding fuer Platz
   ============================================ */
@media (min-width: 1024px) {
    .ia24-mega-item > a,
    .ia24-mega-item > button {
        padding: 0.5rem 0.5rem !important;
        font-size: 0.78rem !important;
    }
}

/* ============================================
   HEADER: Gleiche Breite wie Topbar (1800px zentriert)
   ============================================ */
@media (min-width: 1024px) {
    /* Relative parent (contains both .container and search) */
    .page-header > div.relative {
        max-width: 1800px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 28px !important;
        padding-right: 28px !important;
    }
    /* Container erbt die volle Breite vom Parent */
    .page-header .container {
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ============================================
   KATEGORIE: Mirasvit Suchfeld ausblenden
   (Block nicht entfernen, bricht Produktliste!)
   ============================================ */
.mst_categorySearch,
.mst_categorySearch_searchIcon,
[class*="mst_categorySearch"] {
    display: none !important;
}
/* Parent-Container der Mirasvit-Suche auch verstecken */
.catalog-category-view .columns > .column.main > .mst_categorySearch,
.catalog-category-view [class*="categorySearch"] {
    display: none !important;
}

/* ============================================
   KATEGORIE: Beschreibung UNTER die Produkte
   JS verschiebt .category-description nach .columns
   Styling fuer die verschobene Beschreibung
   ============================================ */
.catalog-category-view .category-description {
    max-width: 1340px;
    margin: 0 auto;
    padding: 32px 28px 48px;
}

/* ============================================
   KATEGORIE: Filter-Tabs horizontal neben Titel
   JS verschiebt .sidebar-main in den Titel-Container
   ============================================ */

/* Titel-Container: zentriert mit Filter-Tabs */
.catalog-category-view .ia24-title-with-filter {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    max-width: 1340px;
    margin: 0 auto;
    padding: 16px 28px 12px !important;
}

/* Titel: zentriert */
.catalog-category-view .ia24-title-with-filter > h1 {
    flex: 0 0 auto;
    margin-bottom: 0 !important;
    text-align: center;
}

/* Sidebar: horizontal, zentriert */
.catalog-category-view .ia24-title-with-filter > .sidebar-main {
    flex: 0 0 auto;
    display: flex !important;
    justify-content: center;
    align-items: center;
    max-width: none;
    max-height: none;
    overflow: visible;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

/* "EINKAUFEN NACH" verstecken */
.catalog-category-view .ia24-title-with-filter .sidebar-main h2 {
    display: none !important;
}

/* "Skip to product list" Link verstecken */
.catalog-category-view .ia24-title-with-filter .sidebar-main .sr-only {
    display: none !important;
}

/* Block-Content: horizontales Flex-Layout */
.catalog-category-view .ia24-title-with-filter .sidebar-main .block-content {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
}

/* Jedes Filter-Item: horizontaler Pill-Button */
.catalog-category-view .ia24-title-with-filter .sidebar-main .filter-option {
    flex: 0 0 auto !important;
    margin: 0 !important;
    position: relative;
}

/* Filter-Button als Pill */
.catalog-category-view .ia24-title-with-filter .sidebar-main .filter-option > h3 > button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 6px 14px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #064A74 !important;
    background: #ffffff !important;
    border: 1px solid #dde3ea !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}
.catalog-category-view .ia24-title-with-filter .sidebar-main .filter-option > h3 > button:hover {
    background: #f0f7fc !important;
    border-color: #1B82C1 !important;
    color: #1B82C1 !important;
}

/* Pfeil-Icon im Button */
.catalog-category-view .ia24-title-with-filter .sidebar-main .filter-option > h3 > button svg {
    width: 14px !important;
    height: 14px !important;
    transition: transform 0.2s !important;
}

/* ============================================
   FILTER OVERLAY PANEL
   ============================================ */

/* Pill-Buttons */
.ia24-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #064A74;
    background: #ffffff;
    border: 1px solid #dde3ea;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-family: var(--ia24-font);
}
.ia24-filter-pill:hover {
    background: #f0f7fc;
    border-color: #1B82C1;
    color: #1B82C1;
}
.ia24-filter-pill svg {
    flex-shrink: 0;
}

/* Backdrop */
.ia24-filter-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(6, 55, 80, 0.45);
    z-index: 200;
    animation: ia24FadeIn 0.2s ease;
}

/* Panel */
.ia24-filter-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 440px;
    max-width: 92vw;
    max-height: 70vh;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    z-index: 201;
    animation: ia24SlideUp 0.25s ease;
}

/* Panel Header */
.ia24-fp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid #eef1f5;
    position: sticky;
    top: 0;
    background: #fff;
    border-radius: 14px 14px 0 0;
    z-index: 1;
}
.ia24-fp-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #064A74;
    margin: 0;
}
.ia24-fp-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: #f1f5f9;
    border-radius: 50%;
    font-size: 1.3rem;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
}
.ia24-fp-close:hover {
    background: #e2e8f0;
    color: #1e293b;
}

/* Optionen */
.ia24-fp-options {
    padding: 8px 24px 16px;
}
.ia24-fp-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin: 2px 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}
.ia24-fp-option:hover {
    background: #f0f7fc;
}

/* Checkbox */
.ia24-fp-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #1B82C1;
    border-radius: 4px;
    flex-shrink: 0;
    cursor: pointer;
}
.ia24-fp-label {
    flex: 1;
    font-size: 0.88rem;
    color: #1e293b;
    font-weight: 500;
}
.ia24-fp-count {
    font-size: 0.78rem;
    color: #94a3b8;
    font-weight: 400;
}

/* Anwenden-Button */
.ia24-fp-apply {
    display: block;
    width: calc(100% - 48px);
    margin: 0 24px 20px;
    padding: 12px;
    background: #F24900;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--ia24-font);
}
.ia24-fp-apply:hover {
    background: #d94000;
    box-shadow: 0 4px 12px rgba(242, 73, 0, 0.3);
}

/* Animationen */
@keyframes ia24FadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes ia24SlideUp {
    from { opacity: 0; transform: translate(-50%, -45%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

/* Scrollbar im Panel */
.ia24-filter-panel::-webkit-scrollbar {
    width: 5px;
}
.ia24-filter-panel::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

/* Produkte: volle Breite (Sidebar ist weg aus .columns) */
.catalog-category-view .columns {
    grid-template-columns: 1fr !important;
}

/* Produktliste: 4 Spalten auf Desktop */
.catalog-category-view .products-grid ul {
    grid-template-columns: repeat(4, 1fr) !important;
}
@media (max-width: 1024px) {
    .catalog-category-view .products-grid ul {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}
@media (max-width: 640px) {
    .catalog-category-view .products-grid ul {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ---- Pagination: CI-Blau Kreise mit weisser Schrift ---- */
/* .ia24-theme Prefix fuer hoehere Spezifitaet gegen Tailwind btn-secondary */
.ia24-theme.catalog-category-view nav.pages ol li.item a,
.ia24-theme.catalog-category-view nav.pages ol li.item a.btn {
    background-color: #064A74 !important;
    color: #fff !important;
    border-color: #064A74 !important;
    font-weight: 600;
    min-width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    transition: background-color 0.2s, transform 0.15s;
}
.ia24-theme.catalog-category-view nav.pages ol li.item a:hover,
.ia24-theme.catalog-category-view nav.pages ol li.item a.btn:hover {
    background-color: #0B77B8 !important;
    border-color: #0B77B8 !important;
    color: #fff !important;
    transform: scale(1.08);
}
/* Aktive Seite: heller hervorgehoben */
.ia24-theme.catalog-category-view nav.pages ol li.item a[aria-current="page"] {
    background-color: #0B77B8 !important;
    border-color: #0B77B8 !important;
    box-shadow: 0 0 0 3px rgba(11,119,184,0.3);
}

/* Prev/Next Pfeile ebenfalls CI-Blau */
.ia24-theme.catalog-category-view nav.pages a.pages-item-previous,
.ia24-theme.catalog-category-view nav.pages a.pages-item-next,
.ia24-theme.catalog-category-view nav.pages a.pages-item-previous.btn,
.ia24-theme.catalog-category-view nav.pages a.pages-item-next.btn {
    background-color: #064A74 !important;
    color: #fff !important;
    border-color: #064A74 !important;
    border-radius: 50% !important;
    min-width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, transform 0.15s;
}
.ia24-theme.catalog-category-view nav.pages a.pages-item-previous:hover,
.ia24-theme.catalog-category-view nav.pages a.pages-item-next:hover {
    background-color: #0B77B8 !important;
    border-color: #0B77B8 !important;
    color: #fff !important;
    transform: scale(1.08);
}
.ia24-theme.catalog-category-view nav.pages a.pages-item-previous svg,
.ia24-theme.catalog-category-view nav.pages a.pages-item-next svg {
    stroke: #fff !important;
}

/* ---- Limiter Select: Pfeil-Richtung korrigieren ---- */
.ia24-theme.catalog-category-view select.limiter-options,
.ia24-theme.catalog-category-view select.form-select.limiter-options {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23064A74' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 14px !important;
    padding-right: 32px !important;
    padding-left: 12px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    font-size: 0.875rem;
    min-height: 38px;
    cursor: pointer;
}
.ia24-theme.catalog-category-view select.limiter-options:focus {
    border-color: #064A74 !important;
    box-shadow: 0 0 0 2px rgba(6,74,116,0.2) !important;
    outline: none !important;
}

/* Limiter Label in CI-Blau */
.ia24-theme.catalog-category-view .field.limiter .label {
    color: #064A74;
    font-weight: 500;
}

/* ---- Sorter Select: Pfeil korrigieren ---- */
.ia24-theme.catalog-category-view select.sorter-options,
.ia24-theme.catalog-category-view select.form-select.sorter-options {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23064A74' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 14px !important;
    padding-right: 32px !important;
    padding-left: 12px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    font-size: 0.875rem;
    min-height: 38px;
    cursor: pointer;
}
.ia24-theme.catalog-category-view select.sorter-options:focus {
    border-color: #064A74 !important;
    box-shadow: 0 0 0 2px rgba(6,74,116,0.2) !important;
    outline: none !important;
}

/* ---- Kategoriebeschreibung: elegante Card ---- */
.ia24-theme.catalog-category-view .category-description {
    max-width: 1340px;
    margin: 40px auto 0 !important;
    padding: 32px 36px 36px !important;
    background: linear-gradient(135deg, #f6f9fc 0%, #eef3f8 100%) !important;
    border-left: 4px solid #064A74 !important;
    border-radius: 0 8px 8px 0 !important;
    box-shadow: 0 2px 12px rgba(6,74,116,0.06);
    position: relative;
}
.ia24-theme.catalog-category-view .category-description::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #064A74 0%, #0B77B8 40%, transparent 100%);
    border-radius: 0 8px 0 0;
}
.ia24-theme.catalog-category-view .category-description h1,
.ia24-theme.catalog-category-view .category-description h2,
.ia24-theme.catalog-category-view .category-description h3 {
    color: #064A74 !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    line-height: 1.4;
}
.ia24-theme.catalog-category-view .category-description p {
    color: #374151 !important;
    font-size: 0.9rem !important;
    line-height: 1.7 !important;
    margin: 0 0 10px 0 !important;
}
.ia24-theme.catalog-category-view .category-description p:last-child {
    margin-bottom: 0 !important;
}
.ia24-theme.catalog-category-view .category-description b,
.ia24-theme.catalog-category-view .category-description strong {
    color: #064A74;
    font-weight: 600;
}

/* Sidebar-additional verstecken (nur Wishlist-Script) */
.catalog-category-view .sidebar-additional {
    display: none !important;
}

/* ---- Responsive: Filter unter Titel auf Mobile ---- */
@media (max-width: 768px) {
    .catalog-category-view .ia24-title-with-filter {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .catalog-category-view .ia24-title-with-filter > .sidebar-main {
        width: 100%;
    }
}

/* IA24: SKU aus Attribut-Tabelle ausblenden (wird inline angezeigt) */
.ia24-theme.catalog-product-view #product-details .attribute-sku {
    display: none;
}

/* ================================================================
   IA24: PDP Beschreibung direkt unter der Galerie (Session 20)
   ================================================================ */
.ia24-pdp-desc-under-gallery {
    margin-top: 28px;
}

/* ================================================================
   IA24: PDP "Mehr Informationen" ausklappbar (Session 20)
   ================================================================ */
.ia24-pdp-attr-accordion {
    margin-top: 18px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}
.ia24-pdp-attr-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    background: #fff;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    transition: background 0.2s;
}
.ia24-pdp-attr-toggle:hover {
    background: #f8fafc;
}
.ia24-pdp-attr-toggle.is-open {
    border-bottom: 1px solid #e2e8f0;
}
.ia24-pdp-attr-toggle-label {
    flex: 1;
}
.ia24-pdp-attr-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #1B82C1;
    color: #fff;
    transition: transform 0.3s ease, background 0.2s;
    flex-shrink: 0;
}
.ia24-pdp-attr-toggle.is-open .ia24-pdp-attr-toggle-icon {
    transform: rotate(45deg);
    background: #F24900;
}
.ia24-pdp-attr-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    background: #fff;
}
.ia24-pdp-attr-body.is-open {
    max-height: 4000px;
    transition: max-height 0.6s ease;
}
.ia24-pdp-attr-body-inner {
    padding: 8px 20px 18px 20px;
}
/* Default-Header "Mehr Informationen" im attributes.phtml ausblenden
   (wir haben bereits einen Toggle-Header) */
.ia24-pdp-attr-body-inner .product.attribute.title,
.ia24-pdp-attr-body-inner .additional-attributes-wrapper > .title,
.ia24-pdp-attr-body-inner [id*="additional"] > h3 {
    display: none;
}

/* ================================================================
   IA24: PDP Trust-USPs in der Breadcrumb-Zeile (Desktop, Session 21)
   Per Alpine in .breadcrumbs .container verschoben -> gleiche Zeile
   ================================================================ */
[x-cloak] { display: none !important; }

/* Breadcrumb-Container wird Flex, sobald USPs injiziert wurden */
.ia24-theme .breadcrumbs .container.ia24-bc-has-usps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.ia24-theme .breadcrumbs .container.ia24-bc-has-usps > ol {
    flex: 0 1 auto;
    min-width: 0;
    margin-right: auto;
}

.ia24-pdp-breadcrumb-usps {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: nowrap;
    flex-shrink: 0;
    padding-right: 8px;
}

/* ===== Breadcrumb-Overflow: crumbs schrumpfen + ellipsen, USPs bleiben stabil ===== */
.ia24-theme .breadcrumbs .container.ia24-bc-has-usps > ol.items {
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden;
    flex: 0 1 auto;
}
.ia24-theme .breadcrumbs .container.ia24-bc-has-usps > ol.items > li.item {
    min-width: 0;
}
.ia24-theme .breadcrumbs .container.ia24-bc-has-usps > ol.items > li.item:first-child {
    flex-shrink: 0;
}
.ia24-theme .breadcrumbs .container.ia24-bc-has-usps > ol.items > li.item a {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
/* Mittlere Crumbs (Kategorien): max 220px, min. ~7 Zeichen sichtbar (8ch inkl. Ellipsis) */
.ia24-theme .breadcrumbs .container.ia24-bc-has-usps > ol.items > li.item:not(:first-child):not(:last-child) a {
    max-width: 220px;
    min-width: 8ch;
}
/* Produkt-Crumb (letzter): darf schrumpfen/ellipsen, schrumpft aber nicht auf 0 */
.ia24-theme .breadcrumbs .container.ia24-bc-has-usps > ol.items > li.item:last-child a {
    max-width: 420px;
}

/* ===== USPs degradieren je Viewport: Subtitle -> Label -> Icons -> weg ===== */
/* Unter 1500px: Subtitle verstecken, Labels bleiben */
@media (max-width: 1499px) {
    .ia24-pdp-bcusp span {
        display: none;
    }
    .ia24-pdp-bcusp strong {
        font-size: 11px;
    }
    .ia24-pdp-breadcrumb-usps {
        gap: 16px;
    }
}
/* Unter 1300px: nur Icons (title-Tooltip bleibt) */
@media (max-width: 1299px) {
    .ia24-pdp-bcusp > div {
        display: none;
    }
    .ia24-pdp-bcusp {
        cursor: help;
    }
    .ia24-pdp-breadcrumb-usps {
        gap: 14px;
    }
    .ia24-pdp-bcusp-sep {
        height: 20px;
    }
}
.ia24-pdp-bcusp {
    display: flex;
    align-items: center;
    gap: 9px;
    line-height: 1.15;
}
.ia24-pdp-bcusp img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    object-fit: contain;
    filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.06));
}
.ia24-pdp-bcusp > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ia24-pdp-bcusp strong {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #0f172a;
    white-space: nowrap;
}
.ia24-pdp-bcusp span {
    font-size: 10px;
    color: #64748b;
    margin-top: 1px;
    white-space: nowrap;
}
.ia24-pdp-bcusp-sep {
    width: 1px;
    height: 22px;
    background: linear-gradient(to bottom, rgba(203, 213, 225, 0) 0%, rgba(148, 163, 184, 0.55) 50%, rgba(203, 213, 225, 0) 100%);
    flex-shrink: 0;
}
/* Unter 1100px kein Platz neben Breadcrumb -> ausblenden, Mobile-Snap uebernimmt */
@media (max-width: 1099px) {
    .ia24-pdp-breadcrumb-usps {
        display: none !important;
    }
}

/* ================================================================
   IA24: PDP Trust-USP-Leiste (unter Beschreibung)
   ================================================================ */
.ia24-trust-usps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 16px 0 32px 0;
    padding: 14px 16px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}
/* Kompaktere Items wenn 4 nebeneinander */
.ia24-trust-usps--desktop .ia24-trust-item {
    gap: 8px;
    min-width: 0;
}
.ia24-trust-usps--desktop .ia24-trust-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
}
.ia24-trust-usps--desktop .ia24-trust-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.ia24-trust-usps--desktop .ia24-trust-item > div:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.ia24-trust-usps--desktop .ia24-trust-item strong {
    font-size: 0.82rem;
    font-weight: 700;
    color: #0f172a;
    word-break: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}
.ia24-trust-usps--desktop .ia24-trust-item span {
    font-size: 0.72rem;
    color: #64748b;
    margin-top: 2px;
}
/* Bei schmaleren Desktop-Breiten 2x2 fallback */
@media (min-width: 768px) and (max-width: 1100px) {
    .ia24-trust-usps {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px 20px;
    }
}
.ia24-trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ia24-trust-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    min-width: 42px;
    flex-shrink: 0;
}
.ia24-trust-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.ia24-trust-item strong {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: #1f2937;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.3;
}
.ia24-trust-item > div:last-child span {
    display: block;
    font-size: 0.68rem;
    color: #6b7280;
    line-height: 1.3;
    margin-top: 1px;
}

/* Trennlinie Orange unter Trust-USPs */
.ia24-trust-usps::after {
    content: "";
    grid-column: 1 / -1;
    display: block;
    height: 2px;
    margin-top: 6px;
    background: linear-gradient(90deg, #F24900 0%, rgba(242, 73, 0, 0.15) 100%);
    border-radius: 2px;
}

/* Responsive: kein Thumbnail-Offset unter 768px */
@media (max-width: 767px) {
    .ia24-trust-usps {
        margin-left: 0;
    }
}
@media (max-width: 640px) {
    .ia24-trust-usps {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 14px 16px;
    }
}

/* ================================================================
   IA24: PDP Qualitaetsversprechen (ueber Reviews, statisch)
   Full-Width Container, Titel spannt ganze Breite, 3 Items in 1 Reihe
   ================================================================ */
.ia24-quality-promise {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px 32px;
    margin: 32px 0;
    padding: 28px 32px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}
.ia24-quality-title {
    grid-column: 1 / -1;
    font-size: 1.05rem;
    font-weight: 700;
    color: #064A74;
    margin: 0;
    padding-bottom: 14px;
    border-bottom: none;
    background-image: linear-gradient(90deg, #F24900 0%, rgba(242, 73, 0, 0.15) 100%);
    background-size: 100% 2px;
    background-position: bottom left;
    background-repeat: no-repeat;
}
.ia24-quality-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 0;
    border-bottom: none;
}
.ia24-quality-item:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}
.ia24-quality-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    margin-top: 2px;
}
.ia24-quality-icon--blue {
    background: rgba(27, 130, 193, 0.1);
    color: #1B82C1;
}
.ia24-quality-icon--orange {
    background: rgba(242, 73, 0, 0.1);
    color: #F24900;
}
.ia24-quality-icon svg {
    width: 18px;
    height: 18px;
}
.ia24-quality-item strong {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 4px;
}
.ia24-quality-item p {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.65;
    color: #4b5563;
}
@media (max-width: 640px) {
    .ia24-quality-promise {
        padding: 20px 18px;
        margin: 24px 0;
    }
    .ia24-quality-item {
        gap: 12px;
    }
}

/* ================================================================
   IA24: Datenschutz-Popup (Modal mit Fetch-Content, Session 21)
   ================================================================ */
.ia24-ds-link {
    color: #0B77B8 !important;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}
.ia24-ds-link:hover {
    color: #F24900 !important;
}
.ia24-ds-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.ia24-ds-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.ia24-ds-dialog {
    position: relative;
    background: #ffffff;
    border-radius: 16px;
    width: min(920px, 100%);
    max-height: min(88vh, 900px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 28px 60px -14px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
    overflow: hidden;
    animation: ia24DsIn 0.26s cubic-bezier(0.22, 0.85, 0.31, 1);
}
@keyframes ia24DsIn {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ia24-ds-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(to bottom, #f8fafc, #ffffff);
    flex-shrink: 0;
}
.ia24-ds-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #0B77B8;
    margin: 0;
}
.ia24-ds-title svg {
    color: #F24900;
    flex-shrink: 0;
}
.ia24-ds-close {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}
.ia24-ds-close:hover {
    background: #fee2e2;
    color: #dc2626;
}
.ia24-ds-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px 28px;
    line-height: 1.7;
    color: #334155;
    scroll-behavior: smooth;
}
.ia24-ds-content h1,
.ia24-ds-content h2,
.ia24-ds-content h3,
.ia24-ds-content h4 {
    color: #064A74;
    font-weight: 700;
    margin-top: 1.4em;
    margin-bottom: 0.5em;
    line-height: 1.3;
}
.ia24-ds-content h1 { font-size: 1.35rem; margin-top: 0; }
.ia24-ds-content h2 { font-size: 1.15rem; }
.ia24-ds-content h3 { font-size: 1rem; }
.ia24-ds-content p {
    margin: 0 0 0.9em;
    font-size: 0.92rem;
}
.ia24-ds-content a {
    color: #0B77B8;
    text-decoration: underline;
}
.ia24-ds-content a:hover { color: #F24900; }
.ia24-ds-content ul,
.ia24-ds-content ol {
    margin: 0 0 0.9em 1.2em;
    font-size: 0.92rem;
}
.ia24-ds-content li { margin-bottom: 0.3em; }
.ia24-ds-body::-webkit-scrollbar { width: 10px; }
.ia24-ds-body::-webkit-scrollbar-track { background: #f1f5f9; }
.ia24-ds-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 5px; }
.ia24-ds-body::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.ia24-ds-loading {
    padding: 60px 20px;
    text-align: center;
    color: #64748b;
}
.ia24-ds-spinner {
    width: 38px;
    height: 38px;
    border: 3px solid #e2e8f0;
    border-top-color: #0B77B8;
    border-radius: 50%;
    margin: 0 auto 14px;
    animation: ia24DsSpin 0.8s linear infinite;
}
@keyframes ia24DsSpin { to { transform: rotate(360deg); } }

.ia24-ds-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 24px;
    border-top: 1px solid #e5e7eb;
    background: #f8fafc;
    flex-shrink: 0;
}
.ia24-ds-fullpage {
    font-size: 0.85rem;
    color: #64748b;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}
.ia24-ds-fullpage:hover { color: #0B77B8; }
.ia24-ds-btn {
    padding: 9px 20px;
    border-radius: 8px;
    border: 0;
    background: #0B77B8;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}
.ia24-ds-btn:hover { background: #064A74; }
.ia24-ds-btn:active { transform: translateY(1px); }

@media (max-width: 640px) {
    .ia24-ds-modal { padding: 0; }
    .ia24-ds-dialog { border-radius: 0; width: 100%; max-height: 100vh; height: 100vh; }
    .ia24-ds-body { padding: 18px 18px; }
    .ia24-ds-header { padding: 14px 16px; }
    .ia24-ds-title { font-size: 1rem; }
}

/* ================================================================
   IA24: PDP Kontaktformular (statt Bewertungsformular)
   ================================================================ */
.ia24-pdp-contact {
    margin: 32px 0;
}
.ia24-pdp-contact-inner {
    background: #ffffff;
    border-radius: 10px;
    padding: 36px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border: 1px solid #dee2e7;
}
.ia24-pdp-contact-inner h2 {
    font-size: 1.25rem;
    font-weight: 800;
    color: #1a2030;
    margin: 0 0 6px 0;
}
.ia24-pdp-contact-inner h2 span {
    color: #F24900;
}
.ia24-pdp-contact-inner > p {
    color: #7c8898;
    font-size: 0.88rem;
    margin: 0 0 22px 0;
    line-height: 1.55;
}
/* Buttons, Form, Consent — Styles kommen aus contact-cta inline styles.
   Hier nur PDP-spezifische Overrides */
.ia24-pdp-contact .ia24-contact-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.ia24-pdp-contact .ia24-btn-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: #0A7B7F;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 0.86rem;
    border-radius: 6px;
    text-decoration: none !important;
    transition: all 0.2s;
    box-shadow: 0 3px 12px rgba(10,123,127,0.25);
}
.ia24-pdp-contact .ia24-btn-phone:hover { background: #086C6F; }
.ia24-pdp-contact .ia24-btn-contact {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: #ffffff;
    color: #3E4A5C !important;
    font-weight: 600;
    font-size: 0.86rem;
    border: 1.5px solid #CBD1D8;
    border-radius: 6px;
    text-decoration: none !important;
    transition: all 0.2s;
}
.ia24-pdp-contact .ia24-btn-contact:hover {
    border-color: #1B82C1;
    color: #1B82C1 !important;
}
.ia24-pdp-contact .ia24-contact-note {
    font-size: 0.72rem;
    color: #A3ADBA;
    margin: -14px 0 22px 0;
}
.ia24-pdp-contact .ia24-contact-form {
    border-top: 1px solid #dee2e7;
    padding-top: 22px;
}
.ia24-pdp-contact .ia24-contact-form h3 {
    font-size: 0.92rem;
    font-weight: 700;
    color: #2A3342;
    margin: 0 0 16px 0;
}
.ia24-pdp-contact .ia24-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
.ia24-pdp-contact .ia24-form-row.ia24-full {
    grid-template-columns: 1fr;
}
.ia24-pdp-contact .ia24-form-group label {
    display: block;
    font-size: 0.76rem;
    font-weight: 600;
    color: #5A6577;
    margin-bottom: 4px;
}
/* Produktreferenz-Hinweis */
.ia24-product-ref {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #edf6fc 0%, #f0f7ff 100%);
    border: 1px solid #c7e3f5;
    border-left: 3px solid #1B82C1;
    border-radius: 6px;
    font-size: 0.82rem;
    color: #3E4A5C;
    line-height: 1.5;
}
.ia24-product-ref svg {
    color: #1B82C1;
    flex-shrink: 0;
}
.ia24-product-ref strong {
    color: #064A74;
}

/* IA24: Produktspezifisches Dropdown — optgroup Styling */
.ia24-pdp-contact select optgroup {
    font-weight: 600;
    font-size: 0.82rem;
    color: #3E4A5C;
    padding-top: 4px;
}
.ia24-pdp-contact select optgroup option {
    font-weight: 400;
    padding-left: 8px;
    color: #2A3342;
}

/* IA24: Dynamischer Attributwert-Hinweis */
.ia24-attr-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    margin: -8px 0 12px;
    background: linear-gradient(135deg, #edf9f0 0%, #f0faf3 100%);
    border: 1px solid #b8e6c8;
    border-left: 3px solid #0f9d58;
    border-radius: 6px;
    font-size: 0.82rem;
    color: #3E4A5C;
    line-height: 1.5;
}
.ia24-attr-hint svg {
    color: #0f9d58;
    flex-shrink: 0;
}
.ia24-attr-hint strong {
    color: #064A74;
    font-weight: 600;
}
[x-cloak] { display: none !important; }

.ia24-pdp-contact .ia24-form-group input,
.ia24-pdp-contact .ia24-form-group textarea,
.ia24-pdp-contact .ia24-form-group select {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid #dee2e7;
    border-radius: 5px;
    font-size: 0.86rem;
    font-family: inherit;
    color: #2A3342;
    background: #f7f8fa;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.ia24-pdp-contact .ia24-form-group input:focus,
.ia24-pdp-contact .ia24-form-group textarea:focus,
.ia24-pdp-contact .ia24-form-group select:focus {
    border-color: #1B82C1;
    box-shadow: 0 0 0 3px #C7E3F5;
    background: #ffffff;
}
.ia24-pdp-contact .ia24-form-group textarea {
    resize: vertical;
    min-height: 80px;
}
.ia24-pdp-contact .ia24-consent {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 20px 0;
    background: #f7f8fa;
    border: 1px solid #dee2e7;
    border-radius: 8px;
    padding: 16px;
}
.ia24-pdp-contact .ia24-consent input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: #1B82C1;
    cursor: pointer;
}
.ia24-pdp-contact .ia24-consent label {
    font-size: 0.86rem;
    color: #3E4A5C;
    line-height: 1.6;
    cursor: pointer;
}
.ia24-pdp-contact .ia24-consent label a {
    color: #1B82C1;
    text-decoration: underline;
}
.ia24-pdp-contact .ia24-btn-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 28px;
    background: #F24900;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.88rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    margin-top: 4px;
    box-shadow: 0 3px 12px rgba(242,73,0,0.25);
}
.ia24-pdp-contact .ia24-btn-submit:hover {
    background: #D94100;
    transform: translateY(-1px);
}
@media (max-width: 640px) {
    .ia24-pdp-contact-inner {
        padding: 24px 18px;
    }
    .ia24-pdp-contact .ia24-form-row {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   IA24 — Minicart Hover-Dropdown (Session 16)
   Elegante Vorschau beim Hovern ueber den Warenkorb-Button
   ============================================================ */

.ia24-minicart-wrap {
    position: relative;
}

.ia24-cart-area {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Permanente Warenkorb-Summe neben dem Icon */
.ia24-theme .ia24-cart-total,
.ia24-theme a.ia24-cart-total {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 6px 12px;
    border: 1.5px solid rgba(6, 74, 116, 0.15);
    border-radius: 8px;
    background: #f7fbfe;
    line-height: 1;
    text-decoration: none !important;
    transition: all 0.18s ease;
    white-space: nowrap;
    margin-left: 4px;
}
.ia24-theme .ia24-cart-total:hover,
.ia24-theme a.ia24-cart-total:hover {
    background: #ffffff;
    border-color: #064A74;
    box-shadow: 0 3px 10px rgba(6, 74, 116, 0.12);
    transform: translateY(-1px);
}
.ia24-cart-total-label {
    font-size: 10px;
    font-weight: 600;
    color: #64748b !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 3px;
}
.ia24-cart-total-value {
    font-size: 14px;
    font-weight: 700;
    color: #064A74 !important;
    font-variant-numeric: tabular-nums;
}
.ia24-cart-total-value .price {
    color: inherit !important;
    font-weight: inherit !important;
    font-size: inherit !important;
}
/* Preis-Labels aus Magento (exkl./inkl. Steuern) hier verstecken */
.ia24-cart-total-value .price-label,
.ia24-cart-total-value .price-including-tax,
.ia24-cart-total-value .price-excluding-tax + .price-including-tax {
    display: none !important;
}
.ia24-cart-total-value .price-excluding-tax {
    display: inline !important;
}
.ia24-cart-total--empty .ia24-cart-total-value {
    color: #94a3b8 !important;
}
.ia24-cart-total-zero {
    font-weight: 600;
}

/* Mobile: Summe ausblenden, nur Icon */
@media (max-width: 768px) {
    .ia24-theme .ia24-cart-total,
    .ia24-theme a.ia24-cart-total {
        display: none !important;
    }
}

.ia24-minicart-dropdown {
    position: absolute;
    top: calc(100% + 14px);
    right: -8px;
    width: 380px;
    max-width: calc(100vw - 32px);
    background: #ffffff;
    border: 1px solid rgba(6, 74, 116, 0.08);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(6, 74, 116, 0.14), 0 2px 6px rgba(0,0,0,0.04);
    z-index: 60;
    overflow: hidden;
    font-family: inherit;
}

/* Unsichtbare Bruecke zum Button damit Hover nicht abreisst */
.ia24-minicart-dropdown::before {
    content: "";
    position: absolute;
    top: -14px;
    right: 0;
    width: 100%;
    height: 14px;
    background: transparent;
}

/* Kleiner Pfeil nach oben */
.ia24-mcd-arrow {
    position: absolute;
    top: -7px;
    right: 20px;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-top: 1px solid rgba(6, 74, 116, 0.08);
    border-left: 1px solid rgba(6, 74, 116, 0.08);
    transform: rotate(45deg);
    z-index: 1;
}

/* Header */
.ia24-mcd-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 14px 18px 10px;
    border-bottom: 1px solid #eef3f7;
    background: linear-gradient(180deg, #f7fbfe 0%, #ffffff 100%);
    position: relative;
    z-index: 2;
}
.ia24-mcd-title {
    font-size: 15px;
    font-weight: 700;
    color: #064A74;
    letter-spacing: 0.01em;
}
.ia24-mcd-count {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}
.ia24-mcd-count span:first-child {
    color: #F24900;
    font-weight: 700;
    margin-right: 3px;
}

/* Leerer Warenkorb */
.ia24-mcd-empty {
    padding: 30px 24px 28px;
    text-align: center;
    color: #64748b;
}
.ia24-mcd-empty svg {
    margin: 0 auto 10px;
    color: #cbd5e1;
    stroke: #cbd5e1;
}
.ia24-mcd-empty p {
    font-size: 15px;
    font-weight: 600;
    color: #334155;
    margin: 0 0 4px;
}
.ia24-mcd-empty small {
    font-size: 12px;
    color: #94a3b8;
}

/* Produkt-Liste */
.ia24-mcd-items {
    list-style: none;
    margin: 0;
    padding: 6px 0;
    max-height: 300px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #f1f5f9;
}
.ia24-mcd-items::-webkit-scrollbar {
    width: 6px;
}
.ia24-mcd-items::-webkit-scrollbar-track {
    background: #f1f5f9;
}
.ia24-mcd-items::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}
.ia24-mcd-items::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.ia24-mcd-item {
    display: flex;
    gap: 12px;
    padding: 10px 18px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s ease;
}
.ia24-mcd-item:last-child {
    border-bottom: none;
}
.ia24-mcd-item:hover {
    background: #f7fbfe;
}

.ia24-mcd-item-img {
    flex-shrink: 0;
    display: block;
    width: 52px;
    height: 52px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}
.ia24-mcd-item-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.ia24-mcd-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}
.ia24-mcd-item-name {
    color: #0f172a;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.15s ease;
}
.ia24-mcd-item-name:hover {
    color: #0B77B8;
}
.ia24-mcd-item-meta {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
}
.ia24-mcd-qty {
    color: #64748b;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.ia24-mcd-price {
    color: #F24900;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.ia24-mcd-price .price {
    color: inherit;
    font-weight: inherit;
}

/* "+N weitere Artikel" Hinweis */
.ia24-mcd-extra {
    margin: 0;
    padding: 8px 18px;
    font-size: 12px;
    color: #64748b;
    text-align: center;
    background: #f7fbfe;
    border-top: 1px solid #eef3f7;
}
.ia24-mcd-extra span:first-child {
    color: #064A74;
    font-weight: 700;
    margin-right: 4px;
}

/* Zwischensumme */
.ia24-mcd-subtotal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: #f7fbfe;
    border-top: 1px solid #eef3f7;
}
.ia24-mcd-subtotal-label {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}
.ia24-mcd-subtotal-value {
    font-size: 16px;
    font-weight: 700;
    color: #064A74;
    font-variant-numeric: tabular-nums;
}
.ia24-mcd-subtotal-value .price {
    color: inherit;
    font-weight: inherit;
}

/* Action-Buttons */
.ia24-mcd-actions {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 8px;
    padding: 12px 14px 14px;
    border-top: 1px solid #eef3f7;
    background: #ffffff;
}
.ia24-mcd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: all 0.18s ease;
    cursor: pointer;
    border: 1.5px solid transparent;
    line-height: 1;
    white-space: nowrap;
}
.ia24-mcd-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.ia24-theme .ia24-mcd-btn--secondary,
.ia24-theme a.ia24-mcd-btn--secondary {
    background: #ffffff !important;
    color: #064A74 !important;
    border-color: #064A74 !important;
}
.ia24-theme .ia24-mcd-btn--secondary span,
.ia24-theme a.ia24-mcd-btn--secondary span {
    color: #064A74 !important;
}
.ia24-theme .ia24-mcd-btn--secondary:hover,
.ia24-theme a.ia24-mcd-btn--secondary:hover {
    background: #064A74 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(6, 74, 116, 0.2);
}
.ia24-theme .ia24-mcd-btn--secondary:hover span,
.ia24-theme a.ia24-mcd-btn--secondary:hover span {
    color: #ffffff !important;
}
.ia24-theme .ia24-mcd-btn--primary,
.ia24-theme a.ia24-mcd-btn--primary {
    background: #F24900 !important;
    color: #ffffff !important;
    border-color: #F24900 !important;
    box-shadow: 0 2px 8px rgba(242, 73, 0, 0.25);
}
.ia24-theme .ia24-mcd-btn--primary span,
.ia24-theme a.ia24-mcd-btn--primary span {
    color: #ffffff !important;
}
.ia24-theme .ia24-mcd-btn--primary:hover,
.ia24-theme a.ia24-mcd-btn--primary:hover {
    background: #D94100 !important;
    border-color: #D94100 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(242, 73, 0, 0.35);
}
.ia24-theme .ia24-mcd-btn--primary:hover span,
.ia24-theme a.ia24-mcd-btn--primary:hover span {
    color: #ffffff !important;
}
.ia24-mcd-btn--disabled {
    pointer-events: none;
    opacity: 0.45;
    filter: grayscale(0.3);
    cursor: not-allowed;
    box-shadow: none;
}

/* Alpine Transitions */
.ia24-mcd-enter {
    transition: opacity 180ms ease-out, transform 180ms cubic-bezier(0.2, 0, 0.2, 1);
}
.ia24-mcd-enter-start {
    opacity: 0;
    transform: translateY(-8px);
}
.ia24-mcd-enter-end {
    opacity: 1;
    transform: translateY(0);
}
.ia24-mcd-leave {
    transition: opacity 150ms ease-in, transform 150ms ease-in;
}
.ia24-mcd-leave-start {
    opacity: 1;
    transform: translateY(0);
}
.ia24-mcd-leave-end {
    opacity: 0;
    transform: translateY(-4px);
}

/* Mobile: Hover-Dropdown ausblenden, da kein Hover moeglich */
@media (hover: none), (max-width: 768px) {
    .ia24-minicart-dropdown {
        display: none !important;
    }
}

/* ============================================================
   IA24 — Qty-Picker + Add-to-Cart auf Produktkarten (Session 16)
   ============================================================ */

.ia24-theme .ia24-cart-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.ia24-theme .ia24-qty-picker {
    display: inline-flex;
    align-items: stretch;
    border: 1.5px solid #d6dde4;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
    height: 40px;
    flex-shrink: 0;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.ia24-theme .ia24-qty-picker:focus-within {
    border-color: #0B77B8;
    box-shadow: 0 0 0 3px rgba(11, 119, 184, 0.12);
}

.ia24-theme .ia24-qty-btn {
    width: 32px;
    border: none !important;
    background: #f4f8fb !important;
    color: #064A74 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
    user-select: none;
}
.ia24-theme .ia24-qty-btn:hover {
    background: #064A74 !important;
    color: #ffffff !important;
}
.ia24-theme .ia24-qty-btn:active {
    background: #063a5e !important;
}

.ia24-theme .ia24-qty-input {
    width: 44px;
    border: none !important;
    border-left: 1px solid #e2e8f0 !important;
    border-right: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    font-variant-numeric: tabular-nums;
    padding: 0 4px !important;
    outline: none !important;
    box-shadow: none !important;
    -moz-appearance: textfield;
    appearance: textfield;
}
.ia24-theme .ia24-qty-input::-webkit-outer-spin-button,
.ia24-theme .ia24-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.ia24-theme .ia24-qty-input:focus {
    background: #f7fbfe !important;
}

/* Warenkorb-Button in Reihe mit Qty-Picker: Hoehe angleichen */
.ia24-theme .ia24-cart-row .ia24-btn-cart-outline {
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    flex-grow: 1;
    min-width: 0;
    padding: 0 14px;
    font-size: 13px;
}
.ia24-theme .ia24-cart-row .ia24-btn-cart-outline svg {
    flex-shrink: 0;
}

/* Schmaler Viewport: Qty-Picker bleibt kompakt, Button wrapt */
@media (max-width: 480px) {
    .ia24-theme .ia24-cart-row .ia24-btn-cart-outline {
        flex-basis: 100%;
    }
}

/* ============================================================
   IA24 — Wishlist-Herz als Overlay oben rechts auf Produktbild
   ============================================================ */

.ia24-theme .ia24-photo-wrap {
    position: relative;
}

.ia24-theme .ia24-wishlist-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    opacity: 1;
    pointer-events: auto;
}

/* Wishlist-Button styling */
.ia24-theme .ia24-wishlist-overlay button,
.ia24-theme .ia24-wishlist-overlay a {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(6, 74, 116, 0.1) !important;
    box-shadow: 0 2px 8px rgba(6, 74, 116, 0.12);
    color: #64748b !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    cursor: pointer;
}
.ia24-theme .ia24-wishlist-overlay button:hover,
.ia24-theme .ia24-wishlist-overlay a:hover {
    background: #ffffff !important;
    color: #F24900 !important;
    transform: scale(1.08);
    box-shadow: 0 4px 14px rgba(242, 73, 0, 0.25);
    border-color: rgba(242, 73, 0, 0.2) !important;
}
.ia24-theme .ia24-wishlist-overlay button svg,
.ia24-theme .ia24-wishlist-overlay a svg {
    width: 18px !important;
    height: 18px !important;
    stroke-width: 1.8;
}

/* Wenn bereits in der Wunschliste: gefuelltes Herz in CI-Orange */
.ia24-theme .ia24-wishlist-overlay button.is-in-wishlist,
.ia24-theme .ia24-wishlist-overlay a.is-in-wishlist,
.ia24-theme .ia24-wishlist-overlay button[aria-pressed="true"],
.ia24-theme .ia24-wishlist-overlay a[aria-pressed="true"] {
    color: #F24900 !important;
}
.ia24-theme .ia24-wishlist-overlay button.is-in-wishlist svg,
.ia24-theme .ia24-wishlist-overlay a.is-in-wishlist svg,
.ia24-theme .ia24-wishlist-overlay button[aria-pressed="true"] svg,
.ia24-theme .ia24-wishlist-overlay a[aria-pressed="true"] svg {
    fill: #F24900;
}

/* ============================================================
   IA24 — Mengen-Picker auf der Produkt-Detail-Seite (PDP)
   Etwas groesser als auf Kategorieseiten, passend zum grossen
   Add-to-Cart-Button. 48px Hoehe.
   ============================================================ */

.ia24-theme .ia24-pdp-qty-picker {
    display: inline-flex;
    align-items: stretch;
    border: 1.5px solid #d6dde4;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
    height: 48px;
    flex-shrink: 0;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.ia24-theme .ia24-pdp-qty-picker:focus-within {
    border-color: #0B77B8;
    box-shadow: 0 0 0 3px rgba(11, 119, 184, 0.12);
}

.ia24-theme button.ia24-pdp-qty-btn {
    width: 38px !important;
    min-width: 38px !important;
    height: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    background: #f4f8fb !important;
    color: #064A74 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.15s ease, color 0.15s ease;
    user-select: none;
    text-indent: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
}
.ia24-theme button.ia24-pdp-qty-btn:hover {
    background: #064A74 !important;
    color: #ffffff !important;
}
.ia24-theme button.ia24-pdp-qty-btn:active {
    background: #063a5e !important;
}

.ia24-theme input.ia24-pdp-qty-input {
    width: 56px !important;
    border: none !important;
    border-left: 1px solid #e2e8f0 !important;
    border-right: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    font-variant-numeric: tabular-nums;
    padding: 0 4px !important;
    outline: none !important;
    box-shadow: none !important;
    -moz-appearance: textfield;
    appearance: textfield;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
}
.ia24-theme input.ia24-pdp-qty-input::-webkit-outer-spin-button,
.ia24-theme input.ia24-pdp-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.ia24-theme input.ia24-pdp-qty-input:focus {
    background: #f7fbfe !important;
}

/* Mobile: etwas kompakter, aber immer noch gut bedienbar */
@media (max-width: 640px) {
    .ia24-theme .ia24-pdp-qty-picker {
        height: 44px;
    }
    .ia24-theme button.ia24-pdp-qty-btn {
        width: 34px !important;
        min-width: 34px !important;
        font-size: 18px !important;
    }
    .ia24-theme input.ia24-pdp-qty-input {
        width: 44px !important;
    }
}

/* PDP-Action-Reihe (Picker + Cart-Button + Wishlist) auf Mobile:
   Container nutzt volle Breite, Cart-Button bekommt restlichen Platz
   damit nichts ueber den Container hinausragt. */
@media (max-width: 640px) {
    .ia24-theme .ia24-pdp-actions {
        width: 100%;
        margin-left: 0 !important;
        gap: 8px !important;
        flex-wrap: nowrap;
    }
    .ia24-theme .ia24-pdp-actions #product-addtocart-button {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        white-space: normal;
        line-height: 1.15;
    }
    /* Wishlist-Button bleibt fix breit, schrumpft nicht */
    .ia24-theme .ia24-pdp-actions [data-addto="wishlist"],
    .ia24-theme .ia24-pdp-actions .product-info-wishlist-button {
        flex-shrink: 0;
    }
}

/* ============================================================
   IA24 — Mengen-Picker im Mirasvit-Search-Autocomplete-Dropdown
   Klassen mit ia24-msa-* prefix (msa = MirasvitSearchAutocomplete)
   Kein .ia24-theme prefix, da das Dropdown evtl. ausserhalb des
   Body-Class-Scopes gerendert wird.
   ============================================================ */

.ia24-msa-cart-wrap {
    display: inline-flex !important;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.ia24-msa-qty-picker {
    display: inline-flex !important;
    align-items: stretch;
    border: 1.5px solid #d6dde4 !important;
    border-radius: 8px !important;
    overflow: hidden;
    background: #ffffff !important;
    height: 34px;
    flex-shrink: 0;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    padding: 0 !important;
}
.ia24-msa-qty-picker:focus-within {
    border-color: #0B77B8 !important;
    box-shadow: 0 0 0 3px rgba(11, 119, 184, 0.12) !important;
}

/* Picker-Buttons: globale Mirasvit-CSS-Regeln (::before mit Cart-Icon,
   font-size:0, color:transparent, text-indent:-9999px, width:36px) komplett
   ueberschreiben. Selektor extra-spezifisch (5 Klassen) damit er gegen die
   bestehenden hochspezifischen User-Regeln gewinnt. */
.ia24-theme .mst-searchautocomplete__item .mst__product-cart button.ia24-msa-qty-btn,
.mst-searchautocomplete__item .mst__product-cart button.ia24-msa-qty-btn,
.ia24-msa-cart-wrap button.ia24-msa-qty-btn {
    width: 28px !important;
    min-width: 28px !important;
    height: 100% !important;
    min-height: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: #f4f8fb !important;
    color: #064A74 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.15s ease, color 0.15s ease;
    user-select: none;
    text-indent: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
    text-transform: none !important;
    position: static !important;
}
.ia24-theme .mst-searchautocomplete__item .mst__product-cart button.ia24-msa-qty-btn::before,
.ia24-theme .mst-searchautocomplete__item .mst__product-cart button.ia24-msa-qty-btn::after,
.mst-searchautocomplete__item .mst__product-cart button.ia24-msa-qty-btn::before,
.mst-searchautocomplete__item .mst__product-cart button.ia24-msa-qty-btn::after {
    content: none !important;
    background: none !important;
    background-image: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}
.ia24-theme .mst-searchautocomplete__item .mst__product-cart button.ia24-msa-qty-btn:hover,
.mst-searchautocomplete__item .mst__product-cart button.ia24-msa-qty-btn:hover {
    background: #064A74 !important;
    color: #ffffff !important;
}
.ia24-theme .mst-searchautocomplete__item .mst__product-cart button.ia24-msa-qty-btn:active,
.mst-searchautocomplete__item .mst__product-cart button.ia24-msa-qty-btn:active {
    background: #063a5e !important;
}

.ia24-msa-qty-input {
    width: 42px !important;
    border: none !important;
    border-left: 1px solid #e2e8f0 !important;
    border-right: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    font-variant-numeric: tabular-nums;
    padding: 0 4px !important;
    outline: none !important;
    box-shadow: none !important;
    -moz-appearance: textfield;
    appearance: textfield;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
}
.ia24-msa-qty-input::-webkit-outer-spin-button,
.ia24-msa-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.ia24-msa-qty-input:focus {
    background: #f7fbfe !important;
}

/* Cart-Button-Margin reset */
.ia24-msa-cart-wrap .to-cart {
    margin: 0 !important;
}
.ia24-msa-cart-wrap .to-cart .mst__add_to_cart {
    margin: 0 !important;
}

/* ============================================
   Session 18 — Kategorie-Titel mobile sauber umbrechen
   Titel wie 'Parker Schneidringverschraubung - Ihre Produktauswahl'
   wird sonst mitten im Wort abgeschnitten.
   ============================================ */
.page-title {
    word-break: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}

@media (max-width: 640px) {
    .page-title {
        font-size: 1.2rem !important;
        line-height: 1.3 !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-bottom: 12px !important;
    }
    /* Container vom page-title/filter-block auf Mobile schmaler padding damit der Text mehr Platz hat */
    .ia24-title-with-filter {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* ============================================
   Session 18 — Produktkarten in Kategorien MOBILE
   Ziel: 2-Spalten-Grid, kompakt und elegant.
   ============================================ */
@media (max-width: 640px) {
    /* 2-Spalten-Grid erzwingen (Tailwind grid-cols-1 ueberschreiben) */
    .products.wrapper > ul.grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-top: 8px !important;
    }

    /* Produktkarte: kompakteres Padding, Hover-Ring abgemildert */
    .products.wrapper .product-item.card {
        padding: 8px !important;
        border-radius: 8px !important;
    }

    /* Produktbild kleiner + zentriert */
    .products.wrapper .ia24-photo-wrap {
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    .products.wrapper .product-item-photo img {
        max-height: 110px !important;
        width: auto !important;
        margin: 0 auto !important;
    }
    .products.wrapper .product-item-photo {
        margin-bottom: 4px !important;
    }

    /* Wishlist-Overlay: etwas kleiner */
    .products.wrapper .ia24-wishlist-overlay {
        top: 4px !important;
        right: 4px !important;
    }
    .products.wrapper .ia24-wishlist-overlay button {
        width: 28px !important;
        height: 28px !important;
    }

    /* Produktname: kleiner, 2 Zeilen max mit Ellipsis */
    .products.wrapper .product-info > div:first-child {
        margin-top: 4px !important;
        margin-bottom: 2px !important;
        text-align: center !important;
    }
    .products.wrapper .product-item-link {
        font-size: 0.78rem !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Attributtabelle auf Mobile KOMPAKT anzeigen (wie Desktop, nur kleiner) */
    .products.wrapper .ia24-attr-table {
        margin: 4px 0 6px !important;
        max-width: 100% !important;
    }
    .products.wrapper .ia24-attr-table table {
        width: 100% !important;
        border-collapse: collapse !important;
    }
    .products.wrapper .ia24-attr-table td {
        font-size: 0.62rem !important;
        padding: 2px 4px !important;
        line-height: 1.2 !important;
        overflow-wrap: break-word !important;
        -webkit-hyphens: auto !important;
        hyphens: auto !important;
    }
    .products.wrapper .ia24-attr-table .ia24-attr-label {
        font-weight: 600 !important;
        color: #475569 !important;
        width: 40% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .products.wrapper .ia24-attr-table .ia24-attr-value {
        color: #0f172a !important;
    }
    .products.wrapper .product-item-details { display: none !important; }

    /* Preis: kompakter und zentriert */
    .products.wrapper .product-info > .pt-1 {
        padding-top: 2px !important;
        text-align: center !important;
    }
    .products.wrapper .price-box,
    .products.wrapper [data-role=priceBox] {
        font-size: 0.82rem !important;
        line-height: 1.2 !important;
    }
    .products.wrapper .price-box .price {
        font-size: 0.92rem !important;
        font-weight: 700 !important;
    }

    /* Qty-Picker auf Mobile KOMPAKT anzeigen */
    .products.wrapper .ia24-qty-picker {
        display: inline-flex !important;
        height: 30px !important;
        flex-shrink: 0 !important;
    }
    .products.wrapper .ia24-qty-btn {
        width: 24px !important;
        height: 30px !important;
        font-size: 0.9rem !important;
        padding: 0 !important;
    }
    .products.wrapper .ia24-qty-input {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.78rem !important;
        padding: 0 2px !important;
    }

    /* Cart-Row: Qty-Picker links + Cart-Button rechts, beide in einer Zeile */
    .products.wrapper .ia24-cart-row {
        width: 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        margin: 0 !important;
        align-items: stretch !important;
    }
    .products.wrapper .ia24-btn-cart-outline {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding: 4px 6px !important;
        font-size: 0.72rem !important;
        font-weight: 600 !important;
        gap: 3px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 30px !important;
    }

    .products.wrapper .ia24-btn-cart-outline span {
        /* Text ausblenden, nur Icon - Qty-Picker daneben zeigt eindeutig dass es um Warenkorb geht */
        display: none !important;
    }
    .products.wrapper .ia24-btn-cart-outline svg {
        width: 16px !important;
        height: 16px !important;
        flex-shrink: 0 !important;
    }

    /* Cart-Row Container: minimale Gap, volle Breite */
    .products.wrapper .product-info > div:last-child {
        margin-top: 6px !important;
        padding-top: 6px !important;
        gap: 4px !important;
    }

    /* Compare-Button auf Mobile ausblenden (Platz fuer Cart) */
    .products.wrapper button[data-addto=compare] { display: none !important; }
}

/* ===== Add-to-Cart AJAX Loading-State (Session 19) ===== */
.ia24-btn-cart-outline:disabled,
.ia24-btn-cart-loading {
    opacity: 0.7;
    cursor: wait;
}
.ia24-cart-spinner {
    animation: ia24-cart-spin 0.9s linear infinite;
}
@keyframes ia24-cart-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===== Header: Navigation an Logo ankleben, damit Suchfeld (absolute)
        nicht die letzte Kategorie (z.B. Schiffbauarmaturen) ueberdeckt
        (Session 19) ===== */
@media (min-width: 1024px) {
    .page-header .container > div[x-data="initMegaMenu()"] {
        margin-right: auto !important;
        margin-left: 1.25rem !important;
    }
    /* Menue-Items links ausrichten statt zentrieren */
    #ia24-mega-nav {
        justify-content: flex-start !important;
    }
    /* Logo + Nav etwas nach rechts einruecken (Session 21), so dass die
       Gruppe Logo+Navigation mittiger wirkt ohne das absolute Suchfeld
       zu ueberschneiden */
    .page-header .container > div:first-child {
        margin-left: 96px !important;
    }
}

/* ===== PDP Trust-USP: Desktop vs Mobile Dual-Render (Session 19) =====
   Desktop-Version sitzt unter Produktbild (wie bisher), Mobile-Version sitzt
   unter 'Mehr Informationen' als horizontaler Snap-Scroll in 1 Reihe */

/* ===== PDP Trust-USP Mobile: Snap-Scroll mit Gradient-Fade + Pagination-Dots
        (wie Homepage ia24-usp-bar Pattern, Session 19) ===== */
.ia24-trust-usps--mobile-wrap { display: none; }
.ia24-trust-usps--mobile { display: none; }

@media (max-width: 640px) {
    /* Desktop-Variante ausblenden */
    .ia24-trust-usps--desktop { display: none !important; }

    /* Wrap sichtbar machen */
    .ia24-trust-usps--mobile-wrap {
        display: block;
        margin: 24px 0;
    }

    /* Inner haelt das Gradient-Fade als ::after */
    .ia24-trust-usps--mobile-inner {
        position: relative;
    }
    .ia24-trust-usps--mobile-inner::after {
        content: '';
        position: absolute;
        top: 4px;
        right: 0;
        bottom: 24px;
        width: 36px;
        background: linear-gradient(to right, rgba(247, 250, 252, 0), rgba(247, 250, 252, 0.95));
        pointer-events: none;
        z-index: 2;
    }

    /* Scrollbar: Flex-Row mit Snap */
    .ia24-trust-usps--mobile {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 16px;
        -webkit-overflow-scrolling: touch;
        gap: 10px !important;
        margin: 0 !important;
        padding: 4px 16px !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .ia24-trust-usps--mobile::-webkit-scrollbar { display: none; }
    .ia24-trust-usps--mobile::after { display: none !important; }

    .ia24-trust-usps--mobile .ia24-trust-item {
        flex: 0 0 auto !important;
        width: 220px;
        scroll-snap-align: start;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 14px 16px;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
        gap: 12px;
    }
    .ia24-trust-usps--mobile .ia24-trust-item:last-child {
        margin-right: 16px;
    }

    /* Pagination-Dots */
    .ia24-trust-usps--mobile-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        margin-top: 10px;
        padding: 0 16px;
    }
    .ia24-trust-usps--mobile-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #d6dde4;
        border: none;
        padding: 0;
        cursor: pointer;
        transition: all 0.25s ease;
    }
    .ia24-trust-usps--mobile-dot.is-active {
        background: #0B77B8;
        width: 18px;
        border-radius: 4px;
    }
}

/* ===== PDP Datenblatt-Button + PDF-Modal (Session 19) ===== */
.ia24-datasheet {
    margin: 14px 0 6px 0;
    display: flex;
    justify-content: flex-end;
}
.ia24-datasheet-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: #ffffff;
    color: #064A74;
    border: 1.5px solid rgba(6, 74, 116, 0.22);
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    text-decoration: none;
}
.ia24-datasheet-btn:hover {
    background: #f7fbfe;
    border-color: #064A74;
    color: #053a5c;
    box-shadow: 0 3px 10px rgba(6, 74, 116, 0.12);
    transform: translateY(-1px);
}
.ia24-datasheet-btn:active { transform: translateY(0); }
.ia24-datasheet-btn svg { flex-shrink: 0; color: #F24900; }
.ia24-datasheet-btn-hint {
    margin-left: auto;
    padding: 3px 8px;
    background: #fff1ea;
    color: #F24900;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

@media (max-width: 640px) {
    .ia24-datasheet { justify-content: stretch; }
    .ia24-datasheet-btn { width: 100%; justify-content: center; }
}

/* Modal */
.ia24-datasheet-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.ia24-datasheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.ia24-datasheet-dialog {
    position: relative;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
    width: 100%;
    max-width: 980px;
    height: calc(100vh - 48px);
    max-height: 900px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ia24-datasheet-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(to bottom, #f8fafc, #ffffff);
    flex-shrink: 0;
}
.ia24-datasheet-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #064A74;
    margin-right: auto;
}
.ia24-datasheet-title svg { color: #F24900; }
.ia24-datasheet-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ia24-datasheet-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #ffffff;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.18s ease;
}
.ia24-datasheet-action:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
    color: #111827;
}
.ia24-datasheet-action--download {
    background: #F24900;
    color: #ffffff;
    border-color: #F24900;
}
.ia24-datasheet-action--download:hover {
    background: #c63c00;
    border-color: #c63c00;
    color: #ffffff;
}
.ia24-datasheet-close {
    padding: 8px;
    width: 36px;
    justify-content: center;
}
.ia24-datasheet-iframe {
    flex: 1;
    width: 100%;
    border: 0;
    background: #f3f4f6;
}

@media (max-width: 640px) {
    .ia24-datasheet-modal { padding: 0; }
    .ia24-datasheet-dialog {
        border-radius: 0;
        max-width: 100%;
        max-height: none;
        height: 100vh;
    }
    .ia24-datasheet-header { padding: 12px 14px; }
    .ia24-datasheet-title { font-size: 0.95rem; }
    .ia24-datasheet-action { padding: 7px 10px; font-size: 0.8rem; }
    .ia24-datasheet-action--download span { display: none; }
}

/* Alpine-Transitions fuer Modal (fade + scale) */
.ia24-ds-enter { transition: opacity 0.22s ease, transform 0.22s ease; }
.ia24-ds-enter-start { opacity: 0; transform: scale(0.97); }
.ia24-ds-enter-end { opacity: 1; transform: scale(1); }
.ia24-ds-leave { transition: opacity 0.18s ease, transform 0.18s ease; }
.ia24-ds-leave-start { opacity: 1; transform: scale(1); }
.ia24-ds-leave-end { opacity: 0; transform: scale(0.97); }


/* ===== PDP Suggested Products: Qty-Picker vor dem Add-Button (Session 19) ===== */
.ia24-suggested-qty {
    flex-shrink: 0;
    display: inline-flex;
    align-items: stretch;
    height: 32px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
    margin-right: 6px;
}
.ia24-suggested-qty-btn {
    width: 26px;
    height: 100%;
    padding: 0;
    border: none;
    background: #f3f4f6;
    color: #374151;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ia24-suggested-qty-btn:hover {
    background: #e5e7eb;
    color: #111827;
}
.ia24-suggested-qty-btn:active {
    background: #d1d5db;
}
.ia24-suggested-qty-input {
    width: 34px;
    height: 100%;
    border: none;
    border-left: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
    padding: 0;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    background: #ffffff;
    -moz-appearance: textfield;
    appearance: textfield;
}
.ia24-suggested-qty-input::-webkit-outer-spin-button,
.ia24-suggested-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.ia24-suggested-qty-input:focus {
    outline: none;
    background: #fffbeb;
}

@media (max-width: 640px) {
    .ia24-suggested-qty {
        height: 30px;
    }
    .ia24-suggested-qty-btn { width: 22px; font-size: 14px; }
    .ia24-suggested-qty-input { width: 28px; font-size: 12px; }
}