/* Weser Theme – Block: Produkthighlights (Startseite)
   ==========================================================================
   Gemessen aus `.figma-ref/Sprint 3/Weserwaben_Startseite.png` (Desktop 1728):

   - Pills       Höhe 40px, Grund #263864 in BEIDEN Zuständen. Unterschieden
                 wird nur über die Schriftfarbe: aktiv #6BE381, inaktiv weiß.
                 Abstand zwischen den Pills 8px, Innenabstand 16px, Radius 4px.
   - Blaue Fläche x 130–1597 (Container-Innenbreite), y 3255–3621 → 367px hoch,
                 #263864. Ecken wieder als Diagonal-Figur: oben-rechts und
                 unten-links 48px, die beiden anderen scharf – dieselbe Figur
                 wie beim Besonderheiten-Slider und den Kategorie-Kacheln.
   - Produkte    4 nebeneinander, Freisteller mit weichem Schlagschatten,
                 Titel darunter Literata SemiBold weiß, zentriert, oft 2-zeilig.
   - Pagination  Quadrate, RECHTSBÜNDIG unter der Fläche (nicht zentriert wie
                 beim Besonderheiten-Slider), 20px, aktiv gefüllt #263864,
                 inaktiv weiß mit Rand.

   ⚠️ Swiper-CSS wird erst beim Rendern des Blocks eingereiht und liegt damit
   HINTER dem Theme-CSS. Alle Regeln, die Swiper überschreiben, brauchen
   deshalb zwei Klassen, sonst gewinnt bei gleicher Spezifität die spätere
   Swiper-Regel.

   Tablet/Mobil sind ABGELEITET – für Sprint 3 lagen nur Desktop-Screenshots vor.
   ========================================================================== */

.product-highlights-headline {
    color: var(--color-dark);
    margin: 0 0 16px;
}

/* ---- Filter-Pills -------------------------------------------------------- */
.ph-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.ph-filter {
    appearance: none;
    border: 0;
    border-radius: 4px;
    background: var(--color-dark);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 20px;
    padding: 10px 16px;
    min-height: 40px;
    cursor: pointer;
    transition: color var(--transition);
}

.ph-filter.is-active {
    color: var(--color-primary);
}

.ph-filter:hover:not(.is-active),
.ph-filter:focus-visible:not(.is-active) {
    color: var(--color-primary);
}

/* ---- Blaue Fläche -------------------------------------------------------- */
.ph-stage {
    background: var(--color-dark);
    border-radius: 0 48px 0 48px;
    /* 48 + 40 Innenabstand ergeben mit dem Inhalt die gemessenen 367px Höhe. */
    padding: 48px 40px 40px;
    overflow: hidden;
}

.ph-product {
    display: block;
    text-decoration: none;
    text-align: center;
    color: var(--color-white);
}

.ph-product-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 190px;
    margin-bottom: 32px;
}

.ph-product-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    /* Die Freisteller im Figma stehen auf einem weichen Schatten. */
    filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.35));
}

/* Poppins statt Literata – Kundenfeedback 01: „Als Schriftart bitte Poppins
   verwenden – in Figma war sie falsch definiert." */
.ph-product-title {
    font-family: var(--font-body);
    font-weight: var(--fw-semibold);
    font-size: 20px;
    line-height: 28px;
    color: var(--color-white);
    margin: 0;
}

/* ---- Pagination: rechtsbündige Quadrate ---------------------------------- */
.block-product-highlights .swiper-pagination {
    position: static;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 24px;
}

.block-product-highlights .swiper-pagination .swiper-pagination-bullet {
    width: 20px;
    height: 20px;
    margin: 0;
    border-radius: 0;
    background: transparent;
    border: 2px solid var(--color-pagination);
    opacity: 1;
    transition: background var(--transition);
}

.block-product-highlights .swiper-pagination .swiper-pagination-bullet-active {
    background: var(--color-pagination);
}

/* ---- Tablet (768–1199) – abgeleitet -------------------------------------- */
@media (max-width: 1199.98px) {
    .ph-stage {
        padding: 40px 32px;
        border-radius: 0 32px 0 32px;
    }

    .ph-product-img-wrap {
        height: 150px;
        margin-bottom: 24px;
    }

    .ph-product-title {
        font-size: 18px;
        line-height: 24px;
    }
}

/* ---- Mobil (<768) – abgeleitet -------------------------------------------
   Die Kategorienamen sind lang; nebeneinander würden sie auf 390px dreizeilig
   umbrechen. Waagerecht scrollen liest sich besser. */
@media (max-width: 767.98px) {
    .ph-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    .ph-filters::-webkit-scrollbar {
        display: none;
    }

    .ph-filter {
        white-space: nowrap;
        flex: 0 0 auto;
    }

    .ph-stage {
        padding: 32px 24px;
        border-radius: 0 24px 0 24px;
    }

    .ph-product-img-wrap {
        height: 140px;
    }

    /* Mittig statt rechtsbündig – Kundenfeedback 01, Mobil 18 (Chris, 21.09.). */
    .block-product-highlights .swiper-pagination {
        justify-content: center;
    }
}


/* ══ Auswahlfeld statt Scrollstreifen auf Mobil ══════════════════════════
   Kundenfeedback 01 vom 2026-09-09 (Mobil BILD 16). Unterhalb von 768px
   ersetzt ein Auswahlfeld die Pillenreihe; darueber bleibt alles wie bisher.

   ⚠️ Die Pillen werden mit `display: none` ausgeblendet und nicht nur
   verkleinert – sonst haette die Seite zwei bedienbare Filter fuer dieselbe
   Sache, und der Screenreader liest beide vor. */
.ph-filter-select {
    display: none;
    margin-bottom: 24px;
}

.ph-filter-select select {
    width: 100%;
    /* Gleiche Optik wie die Formularfelder: 8px Radius, blauer Rahmen. */
    appearance: none;
    padding: 12px 44px 12px 16px;
    border: 2px solid var(--color-dark);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    color: var(--color-dark);
    font-family: var(--font-body);
    font-size: var(--fs-copy-s);
    font-weight: var(--fw-semibold);
    line-height: normal;
    /* Eigener Pfeil – derselbe wie bei den Auswahlfeldern im Formular. */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23263864' stroke-width='2'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

.ph-filter-select select:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

@media (max-width: 767.98px) {
    /* `:not([hidden])` ist Absicht: Ohne JavaScript bleibt das Feld verborgen
       und die Pillen stehen weiter da. */
    .ph-filter-select:not([hidden]) {
        display: block;
    }

    .ph-filter-select:not([hidden]) + .ph-filters {
        display: none;
    }
}