/*
 * Kivanta – eigene Shop-Optik (Kind-Template Kivanta40)
 * Gepflegt im Repo kivanta-search unter shop-template/Kivanta40/, eingespielt per shop-template/deploy-widgets.sh.
 * Geladen in layout/header.tpl auf allen Seiten (normales Stylesheet, damit nichts nach dem ersten Bild springt).
 * Ersetzt seit 14.11.2026: ribbons.css, product-gallery.css, das Feld „Styles“ im Plugin CSS Zubehörartikel und das
 * ET-Feld „Eigener <head>-Inhalt“ (Globale Einstellungen). Neue Regeln bitte nur hier, nicht wieder in Admin-Felder.
 *
 * Abschnitte
 *   1  Farben
 *   2  Badges und Preise (ganzer Shop)
 *   3  Produkt-Slider (ET ProductSlider)
 *   4  „Perfekt kombiniert“ (Plugin CSS Zubehörartikel, Bundle)
 *   5  Artikelseite: Video-Vorschau in der Galerie
 *   6  Geräte-Netz: Android-Tablets, die JTL als Handy erkennt
 *   7  Clerk-Slider (nach der Clerk-Abschaltung am 28.11.2026 löschen)
 *   8  Aus dem ET-Head-Feld: Bildbereich, Produktboxen, USP-Bild, Lexikon, Baby & Kind, Gravurmotive, Clerk-Auto-Hide
 *
 * !important nur dort, wo EasyTemplate/Plugin selbst mit !important oder Inline-Stil arbeitet.
 */

/* ── 1 Farben ─────────────────────────────────────────────────────────────── */
:root {
    --kv-ink: #1f2a1c;          /* Schrift dunkel */
    --kv-ink-soft: #4d5648;     /* Schrift gedämpft */
    --kv-ink-muted: #6b7067;    /* Streichpreis, Kontrast 5,1:1 */
    --kv-green: #6c9a2e;        /* Akzent (Haken, Plus, Links) */
    --kv-green-hover: #eef3e6;
    --kv-line: rgba(31, 42, 28, .08);
    --kv-line-strong: rgba(31, 42, 28, .18);
    --kv-photo-bg: #f3f3f3;     /* Fläche hinter freigestellten Produktfotos */
    --kv-sale: #b3261e;
    --kv-sale-bg: #fdecea;
    --kv-radius: 12px;
}

/* ── 2 Badges und Preise ──────────────────────────────────────────────────── */
/* Badge-Zeile über dem Produktbild (Grundform; muss vor den Rabatt-Regeln stehen) */
.product-gallery { position: relative; }
.kivanta-badge-row {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 5px;
    width: calc(100% - 20px);
    margin: 0;
    padding: 0;
    pointer-events: none;
}
.kivanta-badge-row .badge-dynamic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 7px;
    border-radius: 6px;
    background: #000;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
.kivanta-badge-row .badge-dynamic i { margin-right: 4px; font-size: 12px; }

/* Rabatt dezent: zart rot statt kräftiger Pille (snippets/ribbon.tpl schreibt „−10 %“) */
.kivanta-badge-row .sale-badge {
    background: var(--kv-sale-bg);
    color: var(--kv-sale);
    font-size: 12px;
    font-weight: 600;
}

.price.special-price {
    color: var(--kv-sale);
}

.instead-of.old-price,
.old-price .old-price-value,
.old-price del {
    color: var(--kv-ink-muted);
}

/* ── 3 Produkt-Slider (ET ProductSlider, alle Widgets) ───────────────────────
   Karten mit Rand, Bildfläche 5:4 auf Hellgrau (Foto per multiply), Name/Preis linksbündig, runde Pfeile.
   Der Präfix „body .et-widget.“ ist nötig, um die ET-Regeln zu schlagen. */
body .et-widget.et-widget-productslider .slick-slide { padding: 0 8px; }
body .et-widget.et-widget-productslider .productbox {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--kv-line);
    border-radius: var(--kv-radius);
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}
body .et-widget.et-widget-productslider .productbox:hover {
    box-shadow: 0 10px 24px rgba(31, 42, 28, .10);
    transform: translateY(-2px);
}
body .et-widget.et-widget-productslider .productbox-image {
    height: auto !important;
    aspect-ratio: 5 / 4;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--kv-photo-bg);
}
body .et-widget.et-widget-productslider .productbox-image::before { display: none !important; } /* ET-Quadrat */
body .et-widget.et-widget-productslider .productbox-image .inner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
}
body .et-widget.et-widget-productslider .productbox-image picture { display: contents; }
body .et-widget.et-widget-productslider .productbox-image img.product-image {
    width: auto !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    transform: scale(1.12);
    transition: transform .3s ease;
}
body .et-widget.et-widget-productslider .productbox:hover img.product-image { transform: scale(1.17); }
body .et-widget.et-widget-productslider .kivanta-badge-row { z-index: 2; }
body .et-widget.et-widget-productslider .productbox-caption {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 12px 14px 14px !important;
    text-align: left;
}
body .et-widget.et-widget-productslider .productbox-title {
    margin: 0 0 8px !important;
    text-align: left;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 500;
    min-height: 2.7em;
}
body .et-widget.et-widget-productslider .productbox-title a { color: var(--kv-ink); }
body .et-widget.et-widget-productslider .productbox-price {
    margin-top: auto;
    text-align: left;
    justify-content: flex-start !important;
}
body .et-widget.et-widget-productslider .price_wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
    gap: 0 8px;
}
body .et-widget.et-widget-productslider .price_wrapper .price { font-size: 15px; font-weight: 500; margin: 0; }
body .et-widget.et-widget-productslider .price-note { margin: 0; }
body .et-widget.et-widget-productslider .old-price-value { font-size: 12px; }

/* Kopfzeile: Pfeile als runde Knöpfe */
body .et-widget.et-widget-productslider .et-slider-nav { display: inline-flex; gap: 8px; }
body .et-widget.et-widget-productslider .et-slider-nav-prev,
body .et-widget.et-widget-productslider .et-slider-nav-next {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--kv-line-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    transition: background .2s;
}
body .et-widget.et-widget-productslider .et-slider-nav-prev:hover,
body .et-widget.et-widget-productslider .et-slider-nav-next:hover { background: var(--kv-green-hover); }

@media (max-width: 767.98px) {
    body .et-widget.et-widget-productslider .slick-slide { padding: 0 5px; }
    body .et-widget.et-widget-productslider .productbox-caption { padding: 10px 10px 12px !important; }
    body .et-widget.et-widget-productslider .productbox-title { font-size: 14px; }
    body .et-widget.et-widget-productslider .price_wrapper .price { font-size: 14px; }
}

/* ── 4 „Perfekt kombiniert“ (Plugin CSS Zubehörartikel, Bundle) ──────────────
   Box steht im ET-Anker #kv-bundle-anchor (HTML-Widget „Anker Bundle – NICHT LÖSCHEN“ auf der Artikelseite).
   Nur Optik; Plugin-Dateien bleiben unverändert. */
section.panel-bundle {
    background: #fff;
    border: 1px solid var(--kv-line);
    border-radius: var(--kv-radius);
    box-shadow: 0 1px 3px rgba(31, 42, 28, .04);
    padding: 8px 8px 4px;
}
#kv-bundle-anchor section.panel-bundle { margin: 8px 0 32px; }
section.panel-bundle .panel-heading { background: none; border: 0; padding: 16px 16px 0; }
section.panel-bundle .panel-title { font-size: 24px; font-weight: 500; line-height: 1.25; color: var(--kv-ink); margin: 0; }
section.panel-bundle .panel-body { padding: 16px; }

/* Bildreihe: Kacheln, kleine Plus-Zeichen */
section.panel-bundle .bundle-artikel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; }
section.panel-bundle .bundle-artikel .cell { float: none; display: flex; align-items: center; justify-content: center; }
section.panel-bundle .bundle-imagebox {
    width: 88px;
    height: 88px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--kv-line);
    border-radius: 10px;
}
section.panel-bundle .bundle-imagebox img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
section.panel-bundle .cell-plus { width: 22px; }
section.panel-bundle .cell-plus i { color: var(--kv-green); font-size: 14px; opacity: .7; }

/* Liste */
section.panel-bundle .bundle-list { margin-top: 8px; }
section.panel-bundle .css-bundle-flexbox-item { border: none; }
section.panel-bundle .bundle-list .flexbox {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #eef0eb;
}
section.panel-bundle .bundle-list .flexbox .itembox:last-child {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
}
section.panel-bundle .bundle-list input.input-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--kv-green);
    cursor: pointer;
    margin: 0;
    vertical-align: middle;
}
section.panel-bundle .bundle-list .labelname { margin: 0; font-size: 15px; line-height: 1.4; color: var(--kv-ink); cursor: pointer; }
section.panel-bundle .bundle-list .labelname .css-bundle-strong { font-weight: 400; color: #7a8274; }
section.panel-bundle .bundle-item-information { margin-left: auto; display: inline-flex; align-items: baseline; gap: 12px; white-space: nowrap; }
section.panel-bundle .bundle-item-information > .css-bundle-strong { font-weight: 600; color: var(--kv-ink); font-size: 15px; }
section.panel-bundle .bundle-item-information i.css-zubehoer-icon-info-circled {
    font-style: normal;
    font-size: 13px;
    color: var(--kv-green);
    padding-right: 0 !important;
    cursor: pointer;
}
section.panel-bundle .bundle-item-information i.css-zubehoer-icon-info-circled:hover { text-decoration: underline; }

/* Gesamtpreis und Knöpfe */
section.panel-bundle .bundle-price-hinweis { margin-top: 16px; font-size: 15px; color: var(--kv-ink-soft); }
section.panel-bundle .bundle-price-hinweis #bundle-gesamt { font-size: 22px; font-weight: 600; color: var(--kv-ink); margin-left: 4px; }
section.panel-bundle .css-bundle-flexbox-panel { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 10px; }
section.panel-bundle .btn-css-zubehoer[disabled] {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--kv-ink-soft) !important;
    opacity: 1;
    padding: 0 4px;
    font-weight: 400;
}
section.panel-bundle #input-bundle-quantity {
    width: 56px;
    height: 44px;
    border: 1px solid var(--kv-line-strong) !important;
    border-radius: 8px !important;
    font-weight: 600;
}
section.panel-bundle #bundle-basket-button { height: 44px; padding: 0 22px; margin-left: 10px; border-radius: 999px; font-weight: 600; }
.zubehoer-bundle .css-zubehoer-icon-plus { color: #629c0d; }

@media (max-width: 575.98px) {
    section.panel-bundle .bundle-imagebox { width: 64px; height: 64px; padding: 6px; }
    section.panel-bundle .cell-plus { width: 14px; }
    section.panel-bundle .bundle-item-information { margin-left: 0; }
    section.panel-bundle .panel-title { font-size: 20px; }
}

/* ── 5 Artikelseite ───────────────────────────────────────────────────────── */
/* Video-Vorschau in der Galerie (vorher product-gallery.css) */
.et-productdetail-wrapper .youtube-thumbnail .inner { border-radius: 6px; overflow: hidden; }
.et-productdetail-wrapper .youtube-thumbnail a { position: relative; }
.et-productdetail-wrapper .youtube-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .2s ease;
}
.et-productdetail-wrapper .youtube-thumbnail .play-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: #fff;
    background: rgba(98, 156, 13, .92);
    border-radius: 50%;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .22);
}
.et-productdetail-wrapper .youtube-thumbnail a:hover img { opacity: .82; }
.et-productdetail-wrapper .youtube-thumbnail a:hover .play-icon { background: #4f8208; }

/* ── 6 Geräte-Netz ────────────────────────────────────────────────────────────
   Android-Tablets mit verkürzter Kennung („Android 10; K“) stuft JTL als Handy ein (data-device="phone").
   Bootstrap.php setzt dafür die ET-Ansicht „tablet“; dieses Netz greift, falls die Handy-Ansicht doch auf einem
   breiten Bildschirm landet: Burger-Menü statt überfüllter Desktop-Leiste, Footer ohne weiße Ränder. */
@media (min-width: 992px) {
    body[data-device="phone"] nav .et-menu.d-lg-block { display: none !important; }
    body[data-device="phone"] .et-header-main-mobile-menu {
        display: flex !important;
        align-items: center;
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        order: -1;
    }
    body[data-device="phone"] .et-header-main-mobile-menu [data-toggle-search] { display: none; }
    body[data-device="phone"] .et-menu-mobile-wrapper { display: block !important; }
}
@media (min-width: 576px) {
    body[data-device="phone"] footer .et-widget-textlinks.bg-boxed { background: #e6e6e6; }
}

/* ── 7 Clerk-Slider (Topseller u. a.) – nach dem 28.11.2026 löschen ──────────
   Artikelname auf 2 Zeilen, sonst läuft Zeile 3 über den Preis (Design-Kennung GLcrvxXZ). */
.clerk-slider-item .designs-card [class*="clerk-design-component"] > p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}
.clerk-slider-item .designs-card .clerk-design-component-GLcrvxXZ { height: auto; min-height: 42px; }

/* ── 8 Aus dem ET-Feld „Eigener <head>-Inhalt“ (übernommen 14.11.2026, Stand „Bereinigt: 26.10.2026“) ──
   Weggelassen: .DefineAreas_template-name__ISKuw (Klasse der ET-Admin-Oberfläche, im Shop wirkungslos). */

/* Bildbereich der Artikelseite auf Handys: Platz fürs Bild vorhalten (kein Springen) */
@media (max-width: 661.98px) {
    #image_wrapper { min-height: 100vw; }
}

/* Produktboxen: Vergleichen und Wunschzettel ausblenden */
.productbox-quick-actions .compare,
.productbox-quick-actions .wishlist { display: none !important; }

/* ET-Widget „USPs mit Bild“ */
@media only screen and (min-width: 662px) {
    .et-widget-uspswithimage-image { width: 50vw; height: 100%; }
}

/* Lexikon (Plugin kivanta_lexikon): H1 nur auf der Übersichtsseite */
.container.index-heading-wrapper h1 { display: none !important; }
#s360LexikonOverviewPage .container.index-heading-wrapper h1 { display: block !important; }

/* Baby & Kind (Kategorie 108): Unterkategorien als Raster – Widget-CSS-Klasse „baby-kind-subcategories“ */
.baby-kind-subcategories { background: transparent !important; padding: 16px 0 24px; }
.baby-kind-subcategories .et-categories-wrapper {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 24px 28px;
    margin: 0;
}
.baby-kind-subcategories .et-categories-wrapper > .col {
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
}
.baby-kind-subcategories .et-category { width: 100%; height: 100%; }
.baby-kind-subcategories .et-category-link-wrapper { display: block; color: #18231a; text-decoration: none; }
.baby-kind-subcategories .et-category-title { margin: 0; color: inherit; font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.baby-kind-subcategories .et-categories-subcategory-list { margin-top: 10px; }
.baby-kind-subcategories .et-categories-subcategory-list > div + div { margin-top: 4px; }
.baby-kind-subcategories .et-categories-subcategory-list a {
    display: block;
    color: #536057;
    font-size: .88rem;
    line-height: 1.4;
    text-decoration: none;
    text-underline-offset: 3px;
}
.baby-kind-subcategories a:hover,
.baby-kind-subcategories a:focus-visible { color: #5b9f08; text-decoration: underline; }
.baby-kind-subcategories a:focus-visible { outline: 2px solid #5b9f08; outline-offset: 3px; }
@media (max-width: 991.98px) {
    .baby-kind-subcategories .et-categories-wrapper { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .baby-kind-subcategories .et-categories-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479.98px) {
    .baby-kind-subcategories .et-categories-wrapper { grid-template-columns: 1fr; }
}

/* Gravurmotive (Kategorien 1250, 1505): Unterkategorien als Karten mit Pfeil – Widget-CSS-Klasse „gravurmotive-unterkategorien“ */
.gravurmotive-unterkategorien { padding: 16px 0 36px; }
.gravurmotive-unterkategorien .et-sub-categories-wrapper {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
}
.gravurmotive-unterkategorien .et-sub-categories-wrapper > .col {
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
}
.gravurmotive-unterkategorien .et-sub-category { width: 100%; height: 100%; margin: 0; }
.gravurmotive-unterkategorien .et-sub-category-link-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    min-height: 72px;
    height: 100%;
    padding: 14px 16px 14px 18px;
    background: #fff;
    border: 1px solid #e2ebd8;
    border-left: 4px solid #7cb324;
    border-radius: 10px;
    color: #24351c;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .03);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.gravurmotive-unterkategorien .et-sub-category-link-wrapper::after {
    content: "\2192";
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    background: #f2f7ec;
    border-radius: 50%;
    color: #5b9506;
    font-size: 16px;
    line-height: 1;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.gravurmotive-unterkategorien .et-sub-category-title {
    margin: 0;
    color: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    hyphens: none;
    word-break: normal;
}
.gravurmotive-unterkategorien .et-sub-category-link-wrapper:hover,
.gravurmotive-unterkategorien .et-sub-category-link-wrapper:focus-visible {
    background: #fff;
    border-color: #badba0;
    border-left-color: #5b9506;
    color: #172611;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(91, 149, 6, .12);
    text-decoration: none;
}
.gravurmotive-unterkategorien .et-sub-category-link-wrapper:hover::after,
.gravurmotive-unterkategorien .et-sub-category-link-wrapper:focus-visible::after {
    background: #5b9506;
    color: #fff;
    transform: translateX(3px);
}
.gravurmotive-unterkategorien .et-sub-category-link-wrapper:focus-visible { outline: 2px solid #5b9506; outline-offset: 2px; }
@media (max-width: 1199.98px) {
    .gravurmotive-unterkategorien .et-sub-categories-wrapper { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .gravurmotive-unterkategorien .et-sub-categories-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .gravurmotive-unterkategorien .et-sub-category-link-wrapper { min-height: 64px; padding: 12px 14px; }
    .gravurmotive-unterkategorien .et-sub-category-title { font-size: 14px; }
}
@media (max-width: 479.98px) {
    .gravurmotive-unterkategorien .et-sub-categories-wrapper { grid-template-columns: 1fr; }
}

/* Clerk: leere Slider samt Überschrift ausblenden (Widget-CSS-Klasse „clerk-auto-hide“, Kategorie 186 und
   category_main) – nach dem 28.11.2026 mit den Clerk-Widgets löschen */
.clerk-auto-hide:not(:has(.clerk-slider a[href])) { display: none !important; }