/* ============================================================================
 * v3.9.36ja (02.07.2026) — Tech-Tabelle: Label-Kollaps-Fix (min-width-Täter)
 * ----------------------------------------------------------------------------
 * Diagnose der Vorgänger-Version (v36id):
 *  1. Die "tns-vertical brechen"-Regeln galten GLOBAL. Die einzige echte
 *     tns-vertical im Storefront ist aber die vertikale Thumbnail-Spalte der
 *     PRODUKTSEITE. Sobald tiny-slider sie initialisierte (Klasse tns-vertical
 *     kommt per JS), wurde sie auf 120px Höhe + row gequetscht → Thumbnails
 *     "kurz sichtbar, dann weg".
 *  2. Die Hauptbild-Regeln zielten auf .gallery-slider-single-image — dieser
 *     Selektor greift in SW 6.7 nur bei EINEM Bild pro Produkt, nicht beim
 *     Slider. Bei mehreren Bildern heißt der Container
 *     .gallery-slider-item.js-magnifier-container → keine Wirkung, Bild
 *     unbegrenzt breit / abgeschnitten.
 *  3. Das Zoom-Modal lädt sein Hauptbild lazy per JS (js-load-img). Die
 *     globalen tns-Eingriffe störten die Modal-Slider-Initialisierung →
 *     Hauptbild wurde nie geladen, Modal blieb leer.
 * Konsequenz: Alles strikt scopen. Detail-Thumbnails = Shopware-Default
 * (Soll-Zustand), keinerlei tns-Manipulation außerhalb des Modals.
 * ============================================================================ */

.claude-marker-v36ja { color: red; }

/* ════════════════════════════════════════════════════════════════════════
 * 1) PRODUKTSEITE — Hauptbild: feste Bühne, Bild via contain vollständig.
 *    Shopware positioniert das Bild bei is-cover/is-contain ABSOLUT
 *    (inset 0) im Item — wir geben dem Item eine feste Höhe und lassen
 *    das Bild die Bühne mit object-fit:contain füllen. Nichts wird mehr
 *    abgeschnitten, nichts läuft mehr über.
 * ════════════════════════════════════════════════════════════════════════ */
.product-detail-media .gallery-slider-item.js-magnifier-container,
.product-detail-media .gallery-slider-single-image.js-magnifier-container,
.cms-element-image-gallery .gallery-slider-item.js-magnifier-container,
.cms-element-image-gallery .gallery-slider-single-image.js-magnifier-container {
    height: 460px !important;
    min-height: 460px !important;
    max-height: 460px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.product-detail-media .gallery-slider-item.js-magnifier-container img.gallery-slider-image,
.product-detail-media .gallery-slider-single-image.js-magnifier-container img.gallery-slider-image,
.cms-element-image-gallery .gallery-slider-item.js-magnifier-container img.gallery-slider-image,
.cms-element-image-gallery .gallery-slider-single-image.js-magnifier-container img.gallery-slider-image {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: 0 auto !important;
}

/* Mobile: etwas flacher */
@media (max-width: 767px) {
    .product-detail-media .gallery-slider-item.js-magnifier-container,
    .product-detail-media .gallery-slider-single-image.js-magnifier-container {
        height: 320px !important;
        min-height: 320px !important;
        max-height: 320px !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
 * 2) PRODUKTSEITE — Thumbnail-Spalte links: KEINE Eingriffe.
 *    Shopware-Default = gewünschter Zustand. tns-vertical wird hier
 *    absichtlich NICHT mehr angefasst — das hatte die Spalte zerstört.
 * ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
 * 3) ZOOM-MODAL — alles strikt auf .zoom-modal gescoped
 * ════════════════════════════════════════════════════════════════════════ */

/* Hauptbild: sichtbar, zentriert, nie größer als der Viewport.
   Kein width/height:auto !important — das Zoom-JS (transform-basiert)
   braucht die Freiheit, seine eigene Basisgröße zu setzen. */
/* Höhenkette des Modal-Sliders absichern: Shopware setzt
   .zoom-modal .gallery-slider { position:absolute; top:0; bottom:100px } —
   alle tns-Zwischenebenen und die Slides müssen 100% durchreichen. */
.zoom-modal .gallery-slider .tns-outer,
.zoom-modal .gallery-slider .tns-inner,
.zoom-modal .gallery-slider .tns-ovh,
.zoom-modal .gallery-slider [data-image-slider],
.zoom-modal .gallery-slider-item-container,
.zoom-modal .modal-body .gallery-slider-item {
    height: 100% !important;
}

.zoom-modal .image-zoom-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

.zoom-modal .image-zoom-container img.gallery-slider-image,
.zoom-modal .modal-body img.gallery-slider-image {
    max-width: 95vw !important;
    max-height: calc(100vh - 190px) !important; /* Platz für Footer-Thumbs + Buttons */
    object-fit: contain !important;
    object-position: center !important;
}

/* Thumbnails im Modal-Footer: horizontal + vernünftige Größe (statt winzig) */
.zoom-modal .modal-footer .gallery-slider-thumbnails {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    max-height: 100px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

.zoom-modal .modal-footer .gallery-slider-thumbnails-item,
.zoom-modal .modal-footer .gallery-slider-thumbnails-item-inner {
    width: 80px !important;
    height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.zoom-modal .modal-footer img.gallery-slider-thumbnails-image {
    max-width: 76px !important;
    max-height: 76px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* Sicherheitsnetz: FALLS das Modal seine Thumbnails doch als tns-vertical
   initialisiert (geerbte Slider-Optionen der Detailseite), horizontal
   brechen — aber NUR innerhalb des Modals, nie global. */
.zoom-modal .gallery-slider-thumbnails.tns-vertical {
    display: flex !important;
    flex-direction: row !important;
    max-height: 100px !important;
    height: auto !important;
    width: 100% !important;
    transform: none !important;
}
.zoom-modal .gallery-slider-thumbnails.tns-vertical .tns-item {
    transform: none !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    flex: 0 0 80px !important;
}

/* ════════════════════════════════════════════════════════════════════════
 * 4) TECH-DETAILS — v36ja: DER eigentliche Fix.
 *    Wurzel des Label/Wert-Overlaps war unsere eigene Regel (seit v36ic):
 *    min-width:0 auf .fmv2-tech-lbl killt das automatic minimum der
 *    1fr-Label-Spalte im Theme-Grid (1fr auto) → Spalte kollabiert auf 0,
 *    das nowrap-Label läuft sichtbar über den Wert. Fix: Label-Spalte
 *    bekommt max-content, der Wert minmax(0,1fr) und darf umbrechen.
 *    Selektoren mit 4 Klassen — schlagen den .fmv2-wrap.fmv2-wrap--theme-
 *    Scope aus base.scss sicher.
 * ════════════════════════════════════════════════════════════════════════ */
.fmv2-wrap.fmv2-wrap--theme .fmv2-tech-grid .fmv2-tech-row,
.fmv2-wrap .fmv2-tech-grid .fmv2-tech-row {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) !important;
    gap: 4px 16px !important;
    align-items: baseline !important;
}
.fmv2-wrap.fmv2-wrap--theme .fmv2-tech-row .fmv2-tech-lbl,
.fmv2-wrap .fmv2-tech-row .fmv2-tech-lbl {
    min-width: max-content !important;
    white-space: nowrap !important;
}
.fmv2-wrap.fmv2-wrap--theme .fmv2-tech-row .fmv2-tech-val,
.fmv2-wrap .fmv2-tech-row .fmv2-tech-val {
    min-width: 0 !important;
    text-align: right !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

/* Unter ~992px: Tech-Tabelle einspaltig statt zwei 50%-Spalten —
   entspannt die Zeilenbreite deutlich (Theme selbst schaltet erst <720px). */
@media (max-width: 991px) {
    .fmv2-wrap.fmv2-wrap--theme .fmv2-tech-grid,
    .fmv2-wrap .fmv2-tech-grid {
        grid-template-columns: 1fr !important;
    }
    .fmv2-wrap.fmv2-wrap--theme .fmv2-tech-row:nth-child(odd),
    .fmv2-wrap .fmv2-tech-row:nth-child(odd) {
        border-right: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
 * 5) Manufacturer-Label ausblenden (aus v36id, ergänzt um den in SW 6.7
 *    tatsächlich verwendeten Selektor .cms-element-manufacturer-logo)
 * ════════════════════════════════════════════════════════════════════════ */
.cms-element-manufacturer-logo,
.product-detail-manufacturer,
.product-detail-manufacturer-link,
.product-detail-manufacturer-logo-container,
.product-detail-manufacturer-logo-link,
.product-detail-manufacturer-logo,
[class*="product-detail-manufacturer"] {
    display: none !important;
}

/* Doppelte "Produktinformationen …"-Überschrift unter den Tabs
   Beschreibung/Bewertungen ausblenden (Wunsch v36ip; stand früher im
   Custom-CSS-Feld des alten CANNAMED-Themes) */
.product-detail-description-title {
    display: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
 * 6) Übernommen aus dem Custom-CSS-Feld des alten (CANNAMED-Kind-)Themes.
 *    Das Feld wirkt nur bei zugewiesenem CANNAMED-Theme — seit der
 *    Umstellung auf FreshmobileTheme wäre es sonst verloren.
 * ════════════════════════════════════════════════════════════════════════ */
.afdesc-specs-toggle {
    display: flex;
    flex-direction: column;
}
.afdesc-specs-toggle[open] > summary {
    order: 2;
    margin-top: 16px !important;
}
.afdesc-specs-toggle .afdesc-specs-text-open { display: none; }
.afdesc-specs-toggle[open] .afdesc-specs-text-closed { display: none; }
.afdesc-specs-toggle[open] .afdesc-specs-text-open { display: inline; }


/* ════════════════════════════════════════════════════════════════════════
 * 7) v36it — KATEGORIE-/SUCH-LISTING: Karten im Homepage-Stil.
 *    Spiegelt die bewährten Iteration-9/13/14-Regeln der Slider-Karten
 *    aus base.scss auf .cms-element-product-listing (Kategorie + Suche).
 * ════════════════════════════════════════════════════════════════════════ */

/* Beschreibungs-Blob + leere Platzhalter raus (fressen ~100px Höhe) */
.cms-element-product-listing .product-box .product-description,
.cms-element-product-listing .product-box .product-cheapest-price,
.cms-element-product-listing .product-box .product-price-unit,
.cms-element-product-listing .product-box .product-variant-characteristics {
    display: none !important;
}

/* Gleiche Kartenhöhen im Grid: Karte füllt die Zeile, der Inhalt
   fließt von oben, der Preis-Footer wird ans Kartenende gepinnt.
   Karten mit kurzem Titel/ohne Pill bleiben so exakt gleich hoch. */
.cms-element-product-listing .product-box,
.cms-element-product-listing .product-box .card {
    height: 100% !important;
    position: relative !important;
}
.cms-element-product-listing .product-box .card-body {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    padding: 1rem !important;
}
.cms-element-product-listing .product-box .product-info {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

/* Klare Schrift (Inter) wie in den Homepage-Karten */
.cms-element-product-listing .product-box,
.cms-element-product-listing .product-box .product-name,
.cms-element-product-listing .product-box .product-name a,
.cms-element-product-listing .product-box .product-price-info,
.cms-element-product-listing .product-box .product-price,
.cms-element-product-listing .product-box .btn {
    font-family: 'Inter', system-ui, sans-serif !important;
    letter-spacing: 0 !important;
}

/* Einheitliche Bildhöhe */
.cms-element-product-listing .product-box .product-image-wrapper {
    height: 175px !important;
    margin-bottom: .85rem !important;
}
/* Fotos soft abgerundet wie auf der Startseite */
.cms-element-product-listing .product-box .product-image,
.cms-element-product-listing .product-box .product-image-link img {
    border-radius: 16px !important;
    overflow: hidden !important;
}

/* Status-Zeile "Sofort verfügbar" */
.cms-element-product-listing .product-box .fm-status {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 6px 0 0 !important;
    font-size: 11px !important;
    color: #0f6e56 !important;
}
.cms-element-product-listing .product-box .fm-status .fm-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #1aa179;
    display: inline-block;
    flex: 0 0 auto;
}

/* Zustand-Pills (global aus, nur im Listing an) */
.fm-pills { display: none; }
.cms-element-product-listing .product-box .fm-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 8px 0 0 !important;
}
.fm-pill {
    font-size: 11px;
    line-height: 1;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .01em;
}
.fm-pill--ok   { background: #e1f5ee; color: #085041; }
.fm-pill--warn { background: #faeeda; color: #854f0b; }
.fm-pill--info { background: #e6f1fb; color: #0c447c; }

/* Preis-Footer 1:1 wie Homepage (Iteration 14): Trennlinie, Preis
   rechtsbündig, MwSt-Hinweis klein direkt darunter. Definiert jede
   Eigenschaft selbst — überschreibt alle Alt-Regeln inkl. Clipping. */
.cms-element-product-listing .product-box .product-price-info {
    display: block !important;
    text-align: right !important;
    margin: auto 0 0 !important;
    padding: 12px 70px 2px 14px !important;
    min-height: 48px !important;
    border-top: 1px solid #ececec !important;
    overflow: visible !important;
}
.cms-element-product-listing .product-box .product-price-wrapper {
    display: block !important;
    width: 100% !important;
    text-align: right !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}
.cms-element-product-listing .product-box .product-price {
    display: block !important;
    width: 100% !important;
    text-align: right !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #1b2622 !important;
    line-height: 1.15 !important;
    overflow: visible !important;
}
.cms-element-product-listing .product-box .product-price-tax-link {
    display: block !important;
    width: 100% !important;
    text-align: right !important;
    margin: 3px 0 0 !important;
    padding: 0 !important;
    font-size: 10.5px !important;
    font-weight: 400 !important;
    color: #9aa0a0 !important;
    text-decoration: none !important;
    border: none !important;
    background: none !important;
    line-height: 1.3 !important;
    overflow: visible !important;
}

/* Runder Kaufen-Button rechts, vertikal auf Höhe des Preis-Footers */
.cms-element-product-listing .product-box .product-action {
    position: absolute !important;
    right: 14px !important;
    bottom: 16px !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
    width: auto !important;
}
.cms-element-product-listing .product-box .product-action .d-grid {
    display: block !important;
}
.cms-element-product-listing .product-box .btn-buy {
    width: 44px !important;
    height: 44px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: none !important;
    font-size: 0 !important;
    color: transparent !important;
    box-shadow: none !important;
    background: #1aa179 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") center / 24px no-repeat !important;
    transition: background-color .15s ease, transform .12s ease !important;
}
.cms-element-product-listing .product-box .btn-buy:hover {
    background-color: #0f6e56 !important;
    transform: scale(1.06) !important;
}


/* ════════════════════════════════════════════════════════════════════════
 * 8) v36iu — LISTING-KOPFBEREICH: Kategorie-Titel, Chips, Filter, Sortierung
 * ════════════════════════════════════════════════════════════════════════ */

/* Aktiver Breadcrumb wird zum Seitentitel (Kategorieseiten) */
.is-ctl-navigation .breadcrumb-link.is-active {
    display: inline-block !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    letter-spacing: -.01em !important;
    font-size: 26px !important;
    font-weight: 600 !important;
    color: #0e1916 !important;
    margin-top: 4px !important;
    line-height: 1.2 !important;
}

/* Unterkategorie-Chips (Markup aus fm-listing.js) */
.fm-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 4px 0 18px !important;
}
.fm-chip {
    display: inline-block;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    line-height: 1;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid #e2e6e4;
    background: #fff;
    color: #3d4a45;
    text-decoration: none !important;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.fm-chip:hover {
    border-color: #1aa179;
    color: #0f6e56;
}
.fm-chip.is-active {
    background: #12C48B;
    border-color: #12C48B;
    color: #04342C;
    font-weight: 600;
}

/* Filter-Buttons (falls Filter im Layout aktiv sind) als ruhige Pills */
.filter-panel {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 0 14px !important;
}
.filter-panel .filter-panel-item-toggle,
.filter-panel .filter-panel-item .btn {
    border-radius: 999px !important;
    font-size: 13px !important;
    padding: 6px 14px !important;
    border: 1px solid #e2e6e4 !important;
    background: #fff !important;
    color: #3d4a45 !important;
    box-shadow: none !important;
}
.filter-panel .filter-panel-item-toggle:hover {
    border-color: #1aa179 !important;
    color: #0f6e56 !important;
}

/* Sortier-Dropdown dezenter und bündig */
.is-ctl-navigation .sorting.form-select,
.is-ctl-search .sorting.form-select {
    border-radius: 999px !important;
    border: 1px solid #e2e6e4 !important;
    font-size: 13px !important;
    padding: 8px 36px 8px 16px !important;
    min-width: 180px !important;
    box-shadow: none !important;
}


/* ════════════════════════════════════════════════════════════════════════
 * 9) v36iy — Produktdetailseite: Titel (h1) in Inter statt Space Grotesk
 * ════════════════════════════════════════════════════════════════════════ */
.product-detail-name,
h1.product-detail-name {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: -.01em !important;
}


/* ════════════════════════════════════════════════════════════════════════
 * 10) v36iz — Shopware-Properties-Block auf der Produktseite ausblenden.
 *     Die Eigenschaften (Farbe/Marke/Speicher/Zustand) sind fürs Filtern
 *     in der Kategorie da — auf der Detailseite doppeln sie nur unsere
 *     fmv2-"Weitere Details"-Tabelle.
 * ════════════════════════════════════════════════════════════════════════ */
.product-detail-properties,
.product-detail-properties-table,
.product-properties {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════
   v3.9.36md: Menü-Flyout — 3. Ebene in Spalten. FAKTENBASIERT
   (Ahnenkette aus der Browser-Konsole):
   UL.main-navigation-menu-list › … › DIV.row.navigation-flyout-categories
   .is-level-0 › DIV.col-3.navigation-flyout-col ("Spiele", starres 25%-
   Bootstrap-Raster = die ~300px!) › [unbekannter Wrapper] › innere
   .navigation-flyout-col (Konsolen).
   Fix: (1) col-3-Korsett der Ebene-2-Spalten lösen, (2) inneren Spalten-
   Container — gescoped auf Nachfahren einer -col, damit die is-level-0-Row
   nie wieder mitgetroffen wird (der mc-Fehler) — als Flex-Row legen.
   ══════════════════════════════════════════════════════════════ */
/* (1) Ebene-2-Spalten wachsen lassen statt starrem col-3-Viertel */
.navigation-flyout-categories.is-level-0 > .navigation-flyout-col {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: 100% !important;
}
/* (2) Innerer Container der Konsolen-Spalten: Flex-Row.
   Scope ".navigation-flyout-col ..." schließt die is-level-0-Row aus. */
.navigation-flyout-col :has(> .navigation-flyout-col) {
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: flex-start !important;
    column-gap: 42px;
    row-gap: 10px;
    width: 100% !important;
}
.navigation-flyout-col :has(> .navigation-flyout-col) > .navigation-flyout-col,
.navigation-flyout-col :has(> .navigation-flyout-col) > div {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 150px;
    margin: 0 !important;
}
/* Spaltenköpfe absetzen */
.navigation-flyout-link.is-level-1 {
    font-weight: 600;
}
/* 4. Ebene (PS4 unter PlayStation): gestapelt + eingerückt */
.navigation-flyout-categories.is-level-2 {
    display: block !important;
    margin: 4px 0 0 10px !important;
}
.navigation-flyout-link.is-level-2 {
    font-weight: 400;
}