/* OWN / SMB-1238 -- Zonen-Kacheln im Hauptmenue (Desktop-Chips + mobile Icon-Leiste).
   Gehoert zum Partial app/Views/nav/_zone_menu.php und ersetzt die alten Inline-Styles des
   Fahnen-Flyouts in _header.php. Bewusst eigene Datei statt style-Block im Header: die Nav-Variante
   1 wird gecacht (menu_categories_html), ein Style-Block darin waere Teil des Cache-Inhalts.
   Farbe je Zone kommt als CSS-Variable --pz-zone-accent aus dem Partial (Registry-Wert). */

/* ---------- Desktop: Chips in derselben Menuezeile wie die Warenkategorien ---------- */

.mega-menu .pz-zone-sep {
    width: 1px;
    align-self: center;
    height: 22px;
    margin: 0 10px;
    background: rgba(91, 33, 94, .22);
}

.mega-menu .pz-zone-item {
    display: flex;
    align-items: center;
}

.mega-menu .pz-zone-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 6px;
    border-bottom: 3px solid var(--pz-zone-accent, #5B215E);
    background: rgba(91, 33, 94, .05);
    line-height: 1.2;
    white-space: nowrap;
    transition: background .15s ease, transform .1s ease;
}

.mega-menu .pz-zone-chip:hover,
.mega-menu .pz-zone-chip:focus {
    background: rgba(91, 33, 94, .12);
    text-decoration: none;
    transform: translateY(-1px);
}

.pz-zone-chip-img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex: 0 0 auto;
}

.pz-zone-chip-label {
    font-weight: 600;
}

/* ---------- Mobile: horizontal scrollbare Icon-Leiste (Airbnb-Muster) ----------
   Bis 4 Zonen passt die Zeile ohne Scrollen (pz-zone-bar-fit), ab 5 Eintraegen wird gescrollt und
   die naechste Kachel lugt hervor -- nichts wird hart abgeschnitten. Touch-Ziel >= 44px. */

.pz-zone-bar {
    display: flex;
    gap: 8px;
    margin: 12px 0 4px;
    padding-bottom: 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.pz-zone-bar::-webkit-scrollbar {
    display: none;
}

/* Bis 4 Kacheln ohne Scrollen. Das mobile Menue ist eine Schublade, nicht der volle Viewport
   (gemessen 280px Innenbreite bei 390px Geraetebreite) -- vier Kacheln a 80px waeren dort
   abgeschnitten. Deshalb teilen sich die Kacheln in diesem Fall die Breite gleichmaessig
   (4 x 64px + 3 x 8px Abstand = 280px) statt fester 80px. Linksbuendig statt space-between:
   bei nur zwei aktiven Zonen kleben die Kacheln sonst an den Raendern. */
.pz-zone-bar-fit {
    justify-content: flex-start;
    overflow-x: visible;
}

.pz-zone-bar-fit .pz-zone-tile {
    flex: 1 1 0;
    width: auto;
    min-width: 64px;
    max-width: 96px;
}

.pz-zone-tile {
    scroll-snap-align: start;
    flex: 0 0 auto;
    width: 80px;
    min-height: 76px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 4px;
    border-radius: 10px;
    border-bottom: 3px solid var(--pz-zone-accent, #5B215E);
    background: rgba(91, 33, 94, .05);
    color: #2b2b2b;
    text-align: center;
}

.pz-zone-tile:hover,
.pz-zone-tile:focus {
    background: rgba(91, 33, 94, .12);
    color: #2b2b2b;
    text-decoration: none;
}

.pz-zone-tile-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.pz-zone-tile-label {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    /* Trennung nur an Silben-/Wortgrenzen: ein hartes break-word zerschnitt "Travelzone" mitten
       im Wort ("Travelzo/ne"). Passt ein Name trotzdem nicht, wird er sauber mit Auslassung
       gekuerzt statt zerhackt -- das aria-label traegt in jedem Fall den vollen Namen. */
    hyphens: auto;
    overflow-wrap: normal;
    word-break: normal;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* In der eng geteilten Vier-Kachel-Zeile eine Spur kleiner und mit knapperen Innenabstaenden,
   damit "Travelzone"/"Auktionen" einzeilig bleiben. */
.pz-zone-bar-fit {
    gap: 6px;
}

.pz-zone-bar-fit .pz-zone-tile {
    padding: 8px 2px;
}

.pz-zone-bar-fit .pz-zone-tile-label {
    font-size: 11px;
    white-space: nowrap;
}

/* Ab 5 Kacheln (kein -fit) rechts ein Fade-Out als Scroll-Indikator. */
.mobile-nav-buttons .pz-zone-bar:not(.pz-zone-bar-fit) {
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, #000 88%, transparent 100%);
}