/* --- Flyout Animation States --- */
#pz-sidecart.is-open {
    transform: translateX(0);
}

#pz-sidecart-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* --- Scrollbar Styling (Token-basiert) --- */
#pz-cart-items::-webkit-scrollbar { width: 6px; }
#pz-cart-items::-webkit-scrollbar-track { background: var(--wp--preset--color--background-main); }
#pz-cart-items::-webkit-scrollbar-thumb { 
    background: var(--wp--preset--color--border-subtle); 
    border-radius: 10px; 
}

/* --- Header Cart Trigger Styling (Calm & Clean) --- */
.pz-cart-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; /* Touch Target */
    height: 44px;
    position: relative;
    color: var(--wp--preset--color--text-main);
    
    /* WICHTIG: Überschreibt aggressive Theme-Styles (den grünen Kasten) */
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
}

.pz-cart-trigger:hover,
.pz-cart-trigger:active,
.pz-cart-trigger:focus {
    color: var(--wp--preset--color--text-heading);
    background: transparent !important; /* Verhindert Kasten beim Klicken */
    transform: scale(1.05);
    outline: none !important;
}

/* --- Das Badge (Die Beere mit der Zahl) --- */
.pz-cart-count {
    position: absolute;
    top: 0px;  /* Weiter oben platziert */
    right: 0px; /* Weiter rechts platziert */
    
    background-color: var(--wp--preset--color--surface-highlight);
    color: #ffffff; /* Hartes Weiß für maximalen Kontrast */
    
    /* Perfekte Form und Lesbarkeit */
    font-size: 11px; /* Etwas größer für Lesbarkeit */
    font-weight: 700;
    line-height: 1;
    min-width: 20px; /* Mehr Platz für zweistellige Zahlen */
    height: 20px;
    border-radius: 9999px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Rand, damit es sich vom Icon/Hintergrund abhebt */
    border: 2px solid #ffffff; 
    
    /* Standardmäßig unsichtbar & leicht verkleinert (FOUC-Schutz) */
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none; /* Klicks gehen durch das Badge hindurch */
}

/* Klasse wird vom JS gesetzt, wenn itemCount > 0 */
.pz-cart-count.is-visible {
    opacity: 1;
    transform: scale(1);
}