.dls-tyre-search-wrap {
    color: #171717;
    font-size: 15px;
    /* Akzentfarbe: direkt das Automotive-EK-Theme-Orange (dieselbe Farbe wie der
       Button "In den Warenkorb"). Fallback ebenfalls Orange – niemals Rot, auch
       wenn das Theme-CSS einmal nicht geladen sein sollte. */
    --dls-accent: var(--ek-accent, #f97316);
    --dls-accent-strong: var(--ek-accent-strong, #ea580c);
    --dls-accent-soft: var(--ek-accent-soft, rgba(249, 115, 22, .16));
}

.dls-tyre-search {
    background: #fff;
    border: 1px solid #e2e5ea;
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(17, 17, 17, .07);
    padding: 20px;
    margin: 0 0 22px;
}

.dls-tyre-area-row {
    margin-bottom: 18px;
}

.dls-tyre-area-label {
    display: block;
    color: #171717;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 10px;
}

.dls-tyre-area-options {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.dls-tyre-area-option {
    min-height: 54px;
    border: 1px solid #d9dde5;
    border-radius: 8px;
    background: #fff;
    color: #171717;
    cursor: pointer;
    font-weight: 800;
    line-height: 1.2;
    padding: 10px 12px;
    text-align: center;
    transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}

.dls-tyre-area-option:hover,
.dls-tyre-area-option:focus {
    border-color: var(--dls-accent);
    box-shadow: 0 0 0 3px var(--dls-accent-soft);
    outline: none;
}

.dls-tyre-area-option.is-active {
    border-color: var(--dls-accent);
    background: var(--dls-accent);
    color: #fff;
    box-shadow: 0 8px 18px -6px var(--dls-accent);
}

.dls-tyre-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
}

.dls-tyre-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.dls-tyre-field span {
    color: #3f4652;
    font-size: 13px;
    font-weight: 800;
}

.dls-tyre-field select {
    width: 100%;
    min-height: 44px;
    border: 1px solid #cfd5df;
    border-radius: 8px;
    background: #fff;
    color: #171717;
    font-weight: 650;
    padding: 9px 11px;
}

.dls-tyre-field select:focus {
    border-color: var(--dls-accent);
    box-shadow: 0 0 0 3px var(--dls-accent-soft);
    outline: none;
}
/* Ladezustand der abhaengigen Filter (wird per JS gesetzt). */
select.is-loading {
    opacity: .55;
    cursor: progress;
}

.dls-tyre-actions,
.dls-tyre-card-actions,
.dls-tyre-pagination,
.dls-tyre-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.dls-tyre-actions {
    justify-content: flex-end;
    border-top: 1px solid #eef1f5;
    margin-top: 18px;
    padding-top: 16px;
}

.dls-tyre-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border: 1px solid #cfd5df;
    border-radius: 8px;
    background: #fff;
    color: #171717;
    font-weight: 800;
    line-height: 1.2;
    padding: 9px 14px;
    text-decoration: none;
    cursor: pointer;
}

.dls-tyre-button:hover,
.dls-tyre-button:focus {
    border-color: var(--dls-accent);
    color: var(--dls-accent-strong);
}

.dls-tyre-button-primary {
    border-color: var(--dls-accent);
    background: var(--dls-accent);
    color: #fff;
}

.dls-tyre-button-primary:hover,
.dls-tyre-button-primary:focus {
    background: var(--dls-accent-strong);
    color: #fff;
}

.dls-tyre-button:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.dls-tyre-empty,
.dls-tyre-result-meta {
    margin: 16px 0;
    color: #465266;
}

.dls-tyre-empty {
    border: 1px solid #e2e5ea;
    border-radius: 8px;
    background: #fafbfc;
    padding: 16px;
}

.dls-tyre-result-panel,
.dls-tyre-results {
    clear: both;
    content-visibility: visible;
    contain: none;
    opacity: 1;
    overflow: visible;
    transform: none;
    visibility: visible;
}

.dls-tyre-search-wrap.is-submitting .dls-tyre-result-panel,
.dls-tyre-search-wrap.is-submitting .dls-tyre-results {
    opacity: 1;
    visibility: visible;
}

.dls-tyre-result-meta {
    align-items: center;
    background: #171717;
    border-radius: 8px;
    color: #fff;
    display: inline-flex;
    font-weight: 800;
    min-height: 36px;
    padding: 7px 12px;
}

.dls-tyre-results {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
    min-height: 1px;
}

.dls-tyre-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100%;
    border: 1px solid #e2e5ea;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(17, 17, 17, .07);
    overflow: hidden;
}

.dls-tyre-media {
    aspect-ratio: 16 / 10;
    background: #f5f7fa;
    border-bottom: 1px solid #e7ebf0;
    overflow: hidden;
}

.dls-tyre-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.dls-tyre-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 13px;
    min-width: 0;
    padding: 15px;
}

.dls-tyre-card-head {
    min-height: 88px;
}

.dls-tyre-card h3 {
    margin: 8px 0 0;
    color: #171717;
    font-size: 18px;
    line-height: 1.25;
}

.dls-tyre-card p {
    margin: 5px 0 0;
    color: #465266;
    font-weight: 800;
}

.dls-tyre-badge {
    border-radius: 999px;
    background: #171717;
    color: #fff;
    font-size: 12px;
    font-weight: 850;
    padding: 5px 8px;
    white-space: nowrap;
}

.dls-tyre-badge-muted {
    background: #f0f2f5;
    color: #303846;
}

.dls-tyre-facts,
.dls-tyre-details dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.dls-tyre-facts div,
.dls-tyre-details div {
    min-width: 0;
}

.dls-tyre-facts dt,
.dls-tyre-details dt {
    color: #667085;
    font-size: 12px;
    margin: 0 0 2px;
}

.dls-tyre-facts dd,
.dls-tyre-details dd {
    color: #171717;
    font-weight: 800;
    margin: 0;
    overflow-wrap: anywhere;
}

.dls-tyre-card-foot {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: auto;
}

.dls-tyre-price {
    border-top: 1px solid #eef1f5;
    color: #171717;
    font-size: 24px;
    font-weight: 900;
    padding-top: 12px;
}

.dls-tyre-price [data-dls-price] {
    display: block;
}

.dls-tyre-vat-label {
    display: block;
    color: #667085;
    font-size: 12px;
    font-weight: 700;
    margin-top: 2px;
}

.dls-tyre-card-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dls-tyre-card-actions .dls-tyre-button {
    min-width: 0;
    padding-left: 8px;
    padding-right: 8px;
    text-align: center;
}

.dls-tyre-details {
    border-top: 1px solid #e2e8f0;
    padding-top: 12px;
}

.dls-tyre-details a {
    color: var(--dls-accent-strong);
}

.dls-tyre-pagination {
    justify-content: center;
    margin: 22px 0 0;
}

.dls-tyre-pagination a,
.dls-tyre-pagination span {
    border: 1px solid #cfd5df;
    border-radius: 8px;
    color: #171717;
    padding: 8px 12px;
    text-decoration: none;
}

.dls-tyre-pagination span {
    background: #fafbfc;
}

.dls-tyre-live-status {
    min-height: 20px;
    color: #465266;
    font-size: 13px;
    font-weight: 800;
}

.dls-tyre-live-status.is-success {
    color: #0f7a3a;
}

.dls-tyre-live-status.is-error {
    color: #b42318;
}

.dls-tyre-live-status.is-loading {
    color: #465266;
}

.dls-tyre-live-status a {
    color: inherit;
    margin-left: 6px;
    text-decoration: underline;
}

/* ---------- Suchbox: Tablet (Bereiche 3-spaltig, Filter 2-spaltig) ---------- */
@media (max-width: 900px) {
    .dls-tyre-area-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dls-tyre-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Suchbox: Smartphone (Bereiche 2-spaltig, Filter 1-spaltig) ----------
   Kein horizontaler Scroll: alle 5 Bereiche bleiben sichtbar (2+2+1). */
@media (max-width: 600px) {
    .dls-tyre-search { padding: 14px; }
    .dls-tyre-area-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dls-tyre-area-option { min-height: 48px; font-size: 13px; }
    .dls-tyre-filter-grid { grid-template-columns: 1fr; }
    .dls-tyre-field span { font-size: 13px; }
    .dls-tyre-field select { min-height: 46px; font-size: 16px; }
    /* Suchen / Zuruecksetzen voll und fingerfreundlich */
    .dls-tyre-actions {
        display: grid;
        grid-template-columns: 1fr;
        justify-content: stretch;
        gap: 8px;
    }
    .dls-tyre-actions .dls-tyre-button { width: 100%; min-height: 46px; }
    .dls-tyre-pagination a,
    .dls-tyre-pagination span { min-height: 44px; display: inline-flex; align-items: center; }
}

/* =========================================================
   v0.2.9 – Kompakte Listen-/Tabellenansicht (ohne Produktbilder).
   Ueberschreibt per Quell-Reihenfolge die alte Kartenansicht.
   Farben/Radien werden vom Automotive-EK-Theme (gescopt) feinjustiert.
   ========================================================= */
.dls-tyre-results.dls-tyre-results--list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    margin-top: 14px;
}

/* Kopfzeile + Datenzeilen teilen sich dasselbe 7-Spalten-Raster (Qualität ist nur
   Filter, keine Spalte mehr). Kleine, schrumpffaehige Mindestbreiten + box-sizing:
   das Grid passt sich IMMER der Kartenbreite an und kann nie ueberlaufen/abschneiden. */
.dls-tyre-row-head,
.dls-tyre-card.dls-tyre-card--row {
    box-sizing: border-box;
    display: grid;
    grid-template-columns:
        minmax(130px, 1.9fr)  /* Hersteller / Profil */
        minmax(0, 1fr)        /* Größe */
        minmax(0, .7fr)       /* Index */
        minmax(0, .8fr)       /* Saison */
        minmax(0, .8fr)       /* Bestand */
        minmax(0, 1fr)        /* Preis */
        minmax(140px, 1.4fr); /* Aktionen */
    gap: 14px;
    align-items: center;
}
.dls-tyre-row-head > *,
.dls-tyre-card--row > .dls-tyre-col { min-width: 0; }
.dls-tyre-col-head--index { cursor: help; }

.dls-tyre-row-head {
    padding: 2px 16px;
    color: #667085;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.dls-tyre-col-head--actions { text-align: right; }

.dls-tyre-card.dls-tyre-card--row {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    border: 1px solid #e2e5ea;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(17, 17, 17, .04);
    overflow: visible;           /* niemals Buttons/Preis abschneiden */
    min-height: 0;
    padding: 12px 16px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
/* Hover + Fokus = Theme-Akzent (Orange, kein Rot). */
.dls-tyre-card.dls-tyre-card--row:hover,
.dls-tyre-card.dls-tyre-card--row:focus-within,
.dls-tyre-card.dls-tyre-card--row.is-open {
    border-color: var(--dls-accent);
    box-shadow: 0 0 0 3px var(--dls-accent-soft), 0 10px 22px -14px rgba(17, 17, 17, .25);
}
/* Geoeffnete Detailkarte zusaetzlich per :has() (progressive Enhancement); die
   .is-open-Klasse aus dem JS sorgt fuer Browser ohne :has()-Support. */
.dls-tyre-card.dls-tyre-card--row:has(.dls-tyre-details-toggle[aria-expanded="true"]) {
    border-color: var(--dls-accent);
    box-shadow: 0 0 0 3px var(--dls-accent-soft), 0 10px 22px -14px rgba(17, 17, 17, .25);
}

.dls-tyre-card--row .dls-tyre-col { min-width: 0; }
.dls-tyre-card--row .dls-tyre-col-label { display: none; }
.dls-tyre-card--row .dls-tyre-col-value {
    color: #171717;
    font-weight: 700;
    overflow-wrap: anywhere;
}
.dls-tyre-col--title { display: flex; flex-direction: column; gap: 2px; }
.dls-tyre-title { color: #171717; font-size: 16px; font-weight: 850; line-height: 1.25; }
.dls-tyre-sub { color: #667085; font-size: 12px; font-weight: 700; }

.dls-tyre-col--price { min-width: 0; }
.dls-tyre-col--price .dls-tyre-price {
    border: 0;
    padding: 0;
    color: #171717;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.2;
    white-space: normal;        /* darf umbrechen, ragt nie in die Aktionsspalte */
    overflow-wrap: anywhere;
}
.dls-tyre-col--price .dls-tyre-price [data-dls-price] { display: block; }
.dls-tyre-col--price .dls-tyre-vat-label {
    display: block;
    color: #667085;
    font-size: 11px;
    font-weight: 700;
}

/* Aktionen: stabiles 2+1-Grid INNERHALB der Spalte – nichts ragt aus der Zeile.
   Ursache der bisherigen Ueberlappung: flex-Buttons ohne min-width:0 wurden breiter
   als die Spalte und liefen ueber den Kartenrand. */
.dls-tyre-col--actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-content: center;
}
.dls-tyre-col--actions .dls-tyre-button {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 8px 10px;
    white-space: normal;        /* Text darf umbrechen statt abzuschneiden */
    overflow-wrap: anywhere;
    text-align: center;
}
/* Primärer Warenkorb-Button ueber die volle Aktionsbreite (2+1-Layout). */
.dls-tyre-col--actions .dls-tyre-add-cart { grid-column: 1 / -1; }

/* Details + Live-Status: volle Breite unter der Zeile, sauberer Umbruch. */
.dls-tyre-card--row .dls-tyre-details,
.dls-tyre-card--row .dls-tyre-live-status { grid-column: 1 / -1; }
/* Detailbereich ist Teil der Karte: volle Breite, nur Trennlinie oben, kein Eigenrahmen. */
.dls-tyre-card--row .dls-tyre-details {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
}
.dls-tyre-details dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 18px;
    margin: 0;
}
.dls-tyre-details dl > div { min-width: 0; }
.dls-tyre-details dd { overflow-wrap: anywhere; word-break: break-word; }
.dls-tyre-card--row .dls-tyre-live-status:empty { display: none; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
    .dls-tyre-details dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Tablet/Mobile: Zeilen werden zu kompakten Karten ----------
   Umbruch bei 900px: Tablet-quer (1024) behaelt die (schrumpffaehige) Tabelle,
   Tablet-hochkant (768) und Smartphones werden zu Karten. Kein horizontaler
   Ueberlauf, keine ausbrechende Spalte. */
@media (max-width: 900px) {
    .dls-tyre-row-head { display: none; }
    .dls-tyre-card.dls-tyre-card--row {
        grid-template-columns: 1fr 1fr;
        gap: 8px 12px;
        align-items: start;
        padding: 14px;
    }
    .dls-tyre-card--row .dls-tyre-col-label {
        display: block;
        color: #667085;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .03em;
        margin-bottom: 1px;
    }
    .dls-tyre-col--title { grid-column: 1 / -1; }
    .dls-tyre-col--title .dls-tyre-col-label { display: none; }
    .dls-tyre-title { font-size: 18px; }

    .dls-tyre-col--size { grid-column: 1 / -1; }
    .dls-tyre-col--size .dls-tyre-col-value { font-size: 20px; font-weight: 900; }

    /* Saison + Bestand als kleine Badges */
    .dls-tyre-col--season .dls-tyre-col-value,
    .dls-tyre-col--stock .dls-tyre-col-value {
        display: inline-block;
        border-radius: 999px;
        background: #f0f2f5;
        color: #303846;
        font-size: 12px;
        font-weight: 800;
        padding: 4px 10px;
    }

    .dls-tyre-col--price {
        grid-column: 1 / -1;
        border-top: 1px solid #eef1f5;
        margin-top: 4px;
        padding-top: 10px;
    }
    .dls-tyre-col--price .dls-tyre-col-label { display: none; }
    .dls-tyre-col--price .dls-tyre-price { font-size: 22px; }

    /* Aktionen ueber die volle Kartenbreite (2+1-Grid bleibt erhalten = tablet zweispaltig). */
    .dls-tyre-col--actions { grid-column: 1 / -1; }
    .dls-tyre-col--actions .dls-tyre-button { min-height: 44px; }
}

/* ---------- Smartphone: Karte komplett einspaltig (keine Mini-Spalten) ---------- */
@media (max-width: 600px) {
    /* Jede Angabe in eigener Zeile: Hersteller/Profil, Größe, Index, Saison,
       Bestand, Preis, dann die Buttons – in genau dieser Reihenfolge. */
    .dls-tyre-card.dls-tyre-card--row { grid-template-columns: 1fr; }
    .dls-tyre-card--row .dls-tyre-col-label { font-size: 12px; }
    /* Buttons untereinander, volle Breite, gut greifbar */
    .dls-tyre-col--actions { grid-template-columns: 1fr; }
    .dls-tyre-col--actions .dls-tyre-add-cart { white-space: normal; }
    .dls-tyre-col--actions .dls-tyre-button { min-height: 46px; }
    /* Detailgrid einspaltig (steht bewusst NACH der @1100-2-Spalten-Regel). */
    .dls-tyre-details dl { grid-template-columns: 1fr; }
}

/* ---------- EPREL: offizielles EU-Reifenlabel (Hover-Popover / Modal) ---------- */
.dls-tyre-eprel-link {
    color: var(--ek-accent, #f97316);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.dls-eprel-pop {
    z-index: 1000;
    width: 300px;
    max-width: calc(100vw - 24px);
    background: #fff;
    border: 1px solid #e2e5ea;
    border-radius: 12px;
    box-shadow: 0 18px 44px -16px rgba(17, 17, 17, .4);
    padding: 14px 16px;
}
.dls-eprel-pop[hidden] { display: none; }
.dls-eprel-title { font-weight: 800; font-size: 13px; color: #171717; margin-bottom: 10px; }
.dls-eprel-img { text-align: center; }
.dls-eprel-img img { max-width: 100%; max-height: 60vh; height: auto; display: inline-block; }
.dls-eprel-facts { display: grid; gap: 6px; margin: 0 0 12px; }
.dls-eprel-facts > div { display: flex; justify-content: space-between; gap: 14px; }
.dls-eprel-facts dt { color: #667085; font-size: 12px; margin: 0; }
.dls-eprel-facts dd { color: #171717; font-weight: 800; margin: 0; }
.dls-eprel-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    border-radius: 999px;
    background: var(--ek-accent, #f97316);
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    padding: 8px 14px;
}
.dls-eprel-open:hover,
.dls-eprel-open:focus { background: var(--ek-accent-strong, #ea580c); color: #fff; }
.dls-eprel-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: #475569;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

/* Modal (Mobil/Tablet) */
body.dls-eprel-open { overflow: hidden; }
body.dls-eprel-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    z-index: 999;
}
.dls-eprel-pop.is-modal {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 340px;
    max-width: calc(100vw - 28px);
    max-height: 86vh;
    overflow-y: auto;
    z-index: 1001;
    padding-top: 44px;
}