/**
 * MEK7 Product Tabs — Frontend-Styles
 */

/* Spezifikations-Grid */
.mek7-pt-specs h2,
.mek7-pt-fitments h2,
.mek7-pt-oem h3,
.mek7-pt-desc h2 {
    margin-bottom: 1em;
}

.mek7-pt-specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px 24px;
    margin: 1em 0 2em;
}

.mek7-pt-spec-item {
    padding: 10px 0;
    border-bottom: 1px solid #e5e7eb;
}

.mek7-pt-spec-name {
    font-size: 12px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.mek7-pt-spec-value {
    font-size: 15px;
    font-weight: 500;
    color: #111827;
    line-height: 1.4;
}

/* Fitment-Listen */
.mek7-pt-fitments h3 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    color: #0274be;
    font-size: 16px;
    font-weight: 600;
}

.mek7-pt-fitment-list {
    list-style: none;
    margin: 0 0 1em 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 4px 20px;
}

.mek7-pt-fitment-list li {
    padding: 4px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 14px;
}

/* OEM-Tab */
.mek7-pt-oem h3 {
    margin-top: 1em;
    font-size: 14px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mek7-pt-oem p {
    margin: 0 0 1em 0;
    font-family: ui-monospace, SFMono-Regular, "Courier New", monospace;
    font-size: 13px;
    background: #f9fafb;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid #e5e7eb;
}

/* Produktinfo-Beschreibung — Parts-Europe HTML-Style */
.mek7-pt-desc {
    line-height: 1.6;
}

.mek7-pt-desc li {
    margin-bottom: 0.5em;
}

/* Mobile */
@media (max-width: 640px) {
    .mek7-pt-specs-grid {
        grid-template-columns: 1fr;
    }
    .mek7-pt-fitment-list {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════
   Inline-Specs (in Produktinformation-Tab unterhalb der Beschreibung)
   ═══════════════════════════════════════════════════════════ */

.mek7-pt-desc-divider {
    border: 0;
    height: 1px;
    background: #e5e7eb;
    margin: 2em 0 1.5em;
}

.mek7-pt-inline-specs {
    margin-top: 1.5em;
}

.mek7-pt-inline-specs-title {
    font-size: 1.05em;
    font-weight: 600;
    color: #374151;
    margin: 0 0 0.8em 0;
    padding-bottom: 0.4em;
    border-bottom: 1px solid #e5e7eb;
    letter-spacing: 0.01em;
}

.mek7-pt-inline-specs-list {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    column-gap: 2em;
}

.mek7-pt-inline-spec-item {
    display: grid;
    grid-template-columns: minmax(100px, 40%) 1fr;
    gap: 0.8em;
    padding: 0.55em 0;
    border-bottom: 1px solid #f3f4f6;
    align-items: baseline;
    min-height: 2em;
}

.mek7-pt-inline-spec-item:last-child {
    border-bottom: none;
}

.mek7-pt-inline-spec-name {
    margin: 0;
    font-size: 0.88em;
    color: #6b7280;
    font-weight: 500;
    line-height: 1.4;
    hyphens: manual;
}

.mek7-pt-inline-spec-value {
    margin: 0;
    font-size: 0.95em;
    color: #111827;
    font-weight: 500;
    line-height: 1.4;
    word-break: break-word;
}

/* Tablet: eine Spalte */
@media (max-width: 900px) {
    .mek7-pt-inline-specs-list {
        grid-template-columns: 1fr;
    }
}

/* Mobile: engere Typo, gleicher Aufbau */
@media (max-width: 640px) {
    .mek7-pt-inline-specs-title {
        font-size: 1em;
    }
    .mek7-pt-inline-spec-item {
        grid-template-columns: minmax(90px, 45%) 1fr;
        padding: 0.5em 0;
        gap: 0.6em;
    }
    .mek7-pt-inline-spec-name {
        font-size: 0.85em;
    }
    .mek7-pt-inline-spec-value {
        font-size: 0.92em;
    }
}

/* ─────────────────────────────────────────────────────────────────
 * PIM-Description-Generator-Output (ab Mek7 PIM v0.19.11)
 * Diese Klassen kommen direkt aus der JTL-Wawi-Beschreibungs-Spalte
 * und werden im Beschreibungs-Tab gerendert.
 * ───────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────
 * v0.4.2: PIM-Generator-Klassen aus JTL-Wawi-Beschreibung
 * Diese Klassen kommen direkt aus der Beschreibungs-Spalte und
 * werden im Beschreibungs-Tab gerendert.
 * Ziel: kompaktes Layout, gut lesbar, mobile-freundlich.
 * ───────────────────────────────────────────────────────────────── */

/* HAN-Zeile (Hersteller-Artikelnummer) — dezent oben */
.woocommerce-tabs .mek7-pim-han,
.woocommerce-Tabs-panel .mek7-pim-han {
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
    font-size: 12px;
    color: #666;
    letter-spacing: 0.02em;
    line-height: 1.4;
}
.woocommerce-tabs .mek7-pim-han-label,
.woocommerce-Tabs-panel .mek7-pim-han-label {
    color: #666;
}
.woocommerce-tabs .mek7-pim-han-value,
.woocommerce-Tabs-panel .mek7-pim-han-value,
.woocommerce-tabs .mek7-pim-han [itemprop="mpn"],
.woocommerce-Tabs-panel .mek7-pim-han [itemprop="mpn"] {
    color: #222;
    font-weight: 500;
}

/* Section-Headings (h3 "Beschreibung", "Eigenschaften", "Passend für", "Zertifikate") */
.woocommerce-tabs .mek7-pim-section-heading,
.woocommerce-Tabs-panel .mek7-pim-section-heading {
    margin: 22px 0 10px 0 !important;
    padding: 0 !important;
    font-size: 17px;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.3;
}
.woocommerce-tabs .mek7-pim-section-heading:first-child,
.woocommerce-Tabs-panel .mek7-pim-section-heading:first-child {
    margin-top: 0 !important;
}

/* ════════════════════════════════════════════════════════════
   Specs als Definition-Liste — v0.4.4: Parts-Europe-Layout
   Label klein/grau ÜBER dem Wert, mehrere Paare nebeneinander.
   Technik: CSS-Mehrspaltensatz (column-count). Der flache <dl>
   (dt,dd,dt,dd…) fließt von oben nach unten durch die Spalten;
   break-Regeln halten jedes dt+dd-Paar zusammen.
   Desktop 3 Spalten, Tablet 2, Mobile 1.
   ════════════════════════════════════════════════════════════ */
.woocommerce-tabs .mek7-pim-specs,
.woocommerce-Tabs-panel .mek7-pim-specs {
    column-count: 3;
    column-gap: 32px;
    margin: 0 0 1.4em;
    padding: 0;
    font-size: 14px;
    line-height: 1.45;
}

.woocommerce-tabs .mek7-pim-specs dt,
.woocommerce-Tabs-panel .mek7-pim-specs dt {
    font-size: 12px;
    font-weight: 400;
    color: #9aa1a9;
    margin: 0 !important;
    padding: 0;
    line-height: 1.3;
    /* dt nie vom folgenden dd trennen */
    -webkit-column-break-after: avoid;
    break-after: avoid;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
}

.woocommerce-tabs .mek7-pim-specs dd,
.woocommerce-Tabs-panel .mek7-pim-specs dd {
    margin: 0 0 12px !important;
    padding: 0 0 8px;
    color: #1f2937;
    font-weight: 500;
    border-bottom: 1px solid #ededed;
    /* dd nie vom vorangehenden dt trennen + nicht in sich umbrechen */
    -webkit-column-break-before: avoid;
    break-before: avoid;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
}

/* Tablet: 2 Spalten */
@media (max-width: 900px) {
    .woocommerce-tabs .mek7-pim-specs,
    .woocommerce-Tabs-panel .mek7-pim-specs {
        column-count: 2;
        column-gap: 24px;
    }
}

/* Mobile: 1 Spalte */
@media (max-width: 600px) {
    .woocommerce-tabs .mek7-pim-specs,
    .woocommerce-Tabs-panel .mek7-pim-specs {
        column-count: 1;
        font-size: 13.5px;
    }
}

/* Fitments-Wrapper (v0.19.29: gruppiert nach Marke) */
.woocommerce-tabs .mek7-pim-fitments,
.woocommerce-Tabs-panel .mek7-pim-fitments {
    margin: 0 0 0.75em;
    font-size: 13px;
    line-height: 1.5;
}

/* Marken-Header in den Fitments-Gruppen */
.woocommerce-tabs .mek7-pim-fitments-brand,
.woocommerce-Tabs-panel .mek7-pim-fitments-brand {
    margin: 10px 0 4px 0 !important;
    padding: 0 !important;
    font-size: 13px;
}
.woocommerce-tabs .mek7-pim-fitments-brand:first-child,
.woocommerce-Tabs-panel .mek7-pim-fitments-brand:first-child {
    margin-top: 0 !important;
}
.woocommerce-tabs .mek7-pim-fitments-brand-count,
.woocommerce-Tabs-panel .mek7-pim-fitments-brand-count {
    color: #888;
    font-weight: 400;
}

/* Modell-Listen pro Marke — kompakt, kein dicker Border zwischen Items */
.woocommerce-tabs .mek7-pim-fitments-models,
.woocommerce-tabs .mek7-pim-fitments ul,
.woocommerce-Tabs-panel .mek7-pim-fitments-models,
.woocommerce-Tabs-panel .mek7-pim-fitments ul {
    list-style: none;
    margin: 0 0 6px 0 !important;
    padding: 0 0 0 14px !important;
}

.woocommerce-tabs .mek7-pim-fitments-models li,
.woocommerce-tabs .mek7-pim-fitments ul li,
.woocommerce-Tabs-panel .mek7-pim-fitments-models li,
.woocommerce-Tabs-panel .mek7-pim-fitments ul li {
    padding: 2px 0 2px 14px;
    border-bottom: none;
    position: relative;
    color: #374151;
}

.woocommerce-tabs .mek7-pim-fitments-models li:before,
.woocommerce-tabs .mek7-pim-fitments ul li:before,
.woocommerce-Tabs-panel .mek7-pim-fitments-models li:before,
.woocommerce-Tabs-panel .mek7-pim-fitments ul li:before {
    content: "›";
    position: absolute;
    left: 0;
    color: #9ca3af;
    font-weight: 600;
}

/* Hinweis "X weitere Modelle findest du im Tab..." */
.woocommerce-tabs .mek7-pim-fitments-hint,
.woocommerce-Tabs-panel .mek7-pim-fitments-hint {
    color: #6b7280;
    font-size: 12px;
    font-style: italic;
    margin: 4px 0 1.2em !important;
}

/* Zertifikate & Gutachten — Liste der ABE/ECE/PPE-Codes */
.woocommerce-tabs .mek7-pim-certs,
.woocommerce-Tabs-panel .mek7-pim-certs {
    list-style: none;
    padding: 0;
    margin: 0 0 1em;
}

.woocommerce-tabs .mek7-pim-certs li,
.woocommerce-Tabs-panel .mek7-pim-certs li {
    padding: 6px 0 6px 28px;
    border-bottom: 1px solid #f0f0f1;
    position: relative;
}

.woocommerce-tabs .mek7-pim-certs li:before,
.woocommerce-Tabs-panel .mek7-pim-certs li:before {
    content: "✓";
    position: absolute;
    left: 4px;
    top: 6px;
    color: #22863a;
    font-weight: bold;
    font-size: 1.1em;
}

.woocommerce-tabs .mek7-pim-certs li:last-child,
.woocommerce-Tabs-panel .mek7-pim-certs li:last-child {
    border-bottom: none;
}

/* Beschreibungstext-Container — reduziert Default-Theme-Spacing zwischen Absätzen */
.woocommerce-tabs .mek7-pim-han + h3.mek7-pim-section-heading,
.woocommerce-Tabs-panel .mek7-pim-han + h3.mek7-pim-section-heading {
    margin-top: 12px !important;
}

/* Schema.org-Wrapper soll keinen eigenen Block-Stil bekommen */
.woocommerce-tabs [itemtype$="/Product"],
.woocommerce-Tabs-panel [itemtype$="/Product"] {
    display: block;
}