/* ==========================================================================
   drnts-attr-images – Zeilenliste (product_options_img_sel.html)
   Ergänzt die bestehenden Kachel-Styles, überschreibt nichts davon.
   ========================================================================== */

/* Wrapper – gleicher äußerer Abstand wie die Kachelvariante */
.drnts-attr-options-wrapper {
    margin: 16px 0;
}

/* Gruppenüberschrift */
.drnts-attr-option-group {
    margin-bottom: 20px;
}

.drnts-attr-option-name {
    margin-bottom: 8px;
    font-size: 0.95em;
    color: #333;
}

/* Liste zurücksetzen */
.drnts-attr-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Eine Zeile */
.drnts-attr-list-item {
    display: flex;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #eee;
    gap: 0; /* Abstände über margin an den Kindelementen */
}

.drnts-attr-list-item:last-child {
    border-bottom: none;
}

/* Nicht-lieferbare Zeile leicht ausgegraut */
.drnts-attr-list-item--unavailable {
    opacity: 0.6;
}

/* Radio-Button */
.drnts-attr-radio-input {
    flex-shrink: 0;
    margin: 0 10px 0 0;
    cursor: pointer;
    accent-color: #333;
    width: 16px;
    height: 16px;
}

.drnts-attr-radio-input:disabled {
    cursor: not-allowed;
}

/* Label – nimmt den Rest der Zeile ein, Flex-Reihe */
.drnts-attr-list-label {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 8px;
    cursor: pointer;
    flex-wrap: wrap;        /* bricht auf kleinen Screens um */
    min-width: 0;           /* verhindert Overflow bei langen Texten */
}

.drnts-attr-list-label--unavailable {
    cursor: not-allowed;
}

/* Bild-Container – feste Breite damit alle Texte bündig starten */
.drnts-attr-list-image {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.drnts-attr-selector-image {
    max-width: 40px;
    max-height: 40px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 3px;
    border: 1px solid #ddd;
}

/* Bild bei nicht-lieferbar zusätzlich ausgegraut */
.drnts-attr-selector-image--unavailable {
    filter: grayscale(80%);
}

/* Platzhalter wenn kein Bild vorhanden */
.drnts-attr-no-image {
    font-size: 1.4em;
    opacity: 0.4;
}

/* Attributname */
.drnts-attr-list-name {
    font-size: 0.95em;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* Artikelnummer in Klammern – dezenter als der Name */
.drnts-attr-list-model {
    font-size: 0.82em;
    color: #888;
    white-space: nowrap;
}

/* Aufpreis – rechtsbündig durch auto-margin links */
.drnts-attr-list-price {
    font-size: 0.9em;
    color: #444;
    font-weight: 600;
    margin-left: auto;  /* schiebt den Preis an den rechten Rand */
    white-space: nowrap;
}

/* VPE-Angabe (Grundpreis) */
.drnts-attr-list-vpe {
    font-size: 0.78em;
    color: #aaa;
    white-space: nowrap;
}

/* Nicht-lieferbar-Hinweis in Rot */
.drnts-attr-list-unavailable {
    font-size: 0.82em;
    color: #cc0000;
    font-weight: 600;
    white-space: nowrap;
    margin-left: 4px;
}

/* ==========================================================================
   Responsive: auf kleinen Screens Artikelnummer und VPE umbrechen
   ========================================================================== */
@media (max-width: 480px) {
    .drnts-attr-list-name {
        max-width: 120px;
    }

    .drnts-attr-list-price {
        margin-left: 0;
        flex-basis: 100%;   /* Preis in eigene Zeile */
        text-align: right;
    }
}