/* Preserve the existing home-promo-banner margins, including category pages. */
.ppg-promo-slides { display: grid; overflow: hidden; }
.ppg-promo-slide { grid-area: 1 / 1; visibility: hidden; pointer-events: none; }
.ppg-promo-slide.is-active { visibility: visible; pointer-events: auto; }
.ppg-promo-slide.is-leaving { visibility: visible; pointer-events: none; }
.ppg-promo-slide a { display: block; height: 100%; }
.home-promo-banner.ppg-promo img { display: block; width: 100%; aspect-ratio: 3 / 1; object-fit: contain; margin: 0 auto; }
.ppg-promo-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; }
.ppg-promo-controls[hidden] { display: none; }
.ppg-promo-controls .btn {
    min-width: 36px;
    min-height: 36px;
    border: 1px solid var(--ppg-cta-from, #A01DD4);
    border-radius: 8px;
    background: var(--ppg-surface-1, #121212);
    color: var(--ppg-accent, #00D4E8);
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ppg-promo-controls .btn:hover,
.ppg-promo-controls .btn:active {
    background: var(--ppg-surface-3, #232323);
    border-color: var(--ppg-accent, #00D4E8);
    color: var(--ppg-accent, #00D4E8);
}
.ppg-promo-controls [data-promo-pause] {
    min-width: 76px;
    padding: 6px 16px;
    border-color: transparent;
    background: linear-gradient(110deg, var(--ppg-cta-from, #A01DD4), var(--ppg-cta-to, #2563EB));
    color: var(--ppg-cta-text, #FFFFFF);
    font-weight: 600;
}
.ppg-promo-controls [data-promo-pause]:hover,
.ppg-promo-controls [data-promo-pause]:active {
    background: linear-gradient(110deg, var(--ppg-cta-from, #A01DD4), var(--ppg-cta-to, #2563EB));
    color: var(--ppg-cta-text, #FFFFFF);
    box-shadow: 0 0 0 2px var(--ppg-surface-1, #121212), 0 0 0 3px var(--ppg-accent, #00D4E8);
}
.ppg-promo-dot { border: 0; background: transparent; padding: 12px 6px; cursor: pointer; }
.ppg-promo-dot::before { content: ''; display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--ppg-border-strong, #4A4A4A); }
.ppg-promo-dot:hover::before { background: var(--ppg-loyalty, #BE6BF0); }
.ppg-promo-dot[aria-current="true"]::before { background: var(--ppg-accent, #00D4E8); box-shadow: 0 0 8px rgba(0, 212, 232, .35); }
.ppg-promo-controls button:focus-visible { outline: 2px solid var(--ppg-accent, #00D4E8); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
    .ppg-promo-controls .btn { transition: none; }
}