/* drx_opc: Produkt-Reihe als rotierende Reihe (Quelle "Artikel mit aktivem Sonderpreis").
   Eigene Datei mit ?v= (siehe DrxProduktReihe::getExtraCssFiles). Der Track liegt ueber den drei
   Produktspalten des bestehenden Grids — Kartenbreite und Beratungs-Box bleiben wie in der festen Reihe. */
.drx-preihe-headrow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    /* drx: Hoehe der Pfeile — die Zeile bleibt gleich hoch, auch wenn sie ausgeblendet sind */
    min-height: 2.4rem;
    /* drx: derselbe Abstand wie .drx-preihe-head, der hier an die Zeile wandert */
    margin: 0 0 clamp(1rem, 2.5vw, 2rem);
}
.drx-preihe-headrow .drx-preihe-head { margin: 0; }
/* drx: Pfeile wie beim Bewertungs-Slider (.drx-reviews-btn) */
/* drx: margin-left:auto haelt die Pfeile rechts, auch wenn die Reihe keine Ueberschrift hat */
.drx-preihe-nav { display: flex; gap: .5rem; flex: 0 0 auto; margin-left: auto; }
.drx-preihe-nav[hidden] { display: none; }
.drx-preihe-btn {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: 1px solid var(--drx-green);
    background: #fff;
    color: var(--drx-green);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}
.drx-preihe-btn:hover { background: var(--drx-green-soft); }
.drx-preihe-track {
    /* drx: derselbe Wert wie der gap der .drx-preihe-grid — die Kartenbreite rechnet damit */
    --drx-preihe-gap: clamp(.5rem, 1.2vw, 1rem);
    grid-column: 1 / -1;
    display: flex;
    gap: var(--drx-preihe-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* drx: Platz fuer den Hover-Hub der Karten (translateY(-4px)), sonst schneidet der Track ihn ab */
    padding-top: 4px;
    margin-top: -4px;
}
.drx-preihe-track::-webkit-scrollbar { display: none; }
/* drx: feste Kartenbreite = ein Drittel des Tracks, egal wie viele Angebote es gibt */
.drx-preihe-track .drx-preihe-card {
    flex: 0 0 calc((100% - 2 * var(--drx-preihe-gap)) / 3);
    scroll-snap-align: start;
}
@media (min-width: 992px) {
    .drx-preihe-grid--slider:has(.drx-preihe-box) .drx-preihe-track { grid-column: 1 / span 3; }
}
@media (max-width: 640px) {
    .drx-preihe-track .drx-preihe-card { flex-basis: calc((100% - var(--drx-preihe-gap)) / 2); }
}