/* WP Product Bands Pro - Frontend */
.wppb-band-wrap {
    --wppb-bg: #002392;
    --wppb-color: #ffffff;
    --wppb-size: 18px;
    --wppb-speed: 50s;
    --wppb-skew: -3deg;
    --wppb-gap: 40px;
    --wppb-weight: bold;
    --wppb-py: 12px;
    --wppb-px: 30px;
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--wppb-bg);
    transform: skewY(var(--wppb-skew));
    padding: var(--wppb-py) 0;
    line-height: 1.2;
    z-index: 1;
}
.wppb-band-wrap * { box-sizing: border-box; }
.wppb-track {
    display: flex;
    width: max-content;
    animation: wppb-scroll var(--wppb-speed) linear infinite;
}
.wppb-dir-right .wppb-track {
    animation-direction: reverse;
}
.wppb-rtl .wppb-track {
    animation-direction: reverse;
}
.wppb-track-inner {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.wppb-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 var(--wppb-px);
    color: var(--wppb-color);
    font-size: var(--wppb-size);
    font-weight: var(--wppb-weight);
    text-decoration: none;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transform: skewY(calc(var(--wppb-skew) * -1));
}
a.wppb-item:hover { opacity: 0.85; }
.wppb-item-img {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 50%;
    flex-shrink: 0;
}
.wppb-item-text { display: inline-block; }
.wppb-item-price {
    font-size: calc(var(--wppb-size) * 0.75);
    opacity: 0.85;
}
.wppb-item-rating { letter-spacing: -2px; font-size: calc(var(--wppb-size) * 0.65); }
.wppb-sep {
    display: inline-block;
    padding: 0 calc(var(--wppb-gap) * 0.5);
    opacity: 0.6;
    font-size: calc(var(--wppb-size) * 0.8);
}
@keyframes wppb-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
/* Pause on hover */
.wppb-band-wrap:hover .wppb-track { animation-play-state: paused; }

/* Device visibility */
@media (max-width: 767px)  { .wppb-hide-mobile  { display: none !important; } }
@media (min-width: 768px) and (max-width: 1024px) { .wppb-hide-tablet  { display: none !important; } }
@media (min-width: 1025px) { .wppb-hide-desktop { display: none !important; } }

/* Gutenberg placeholder */
.wppb-no-band { padding: 20px; text-align: center; border: 1px dashed #ccc; }
/* Elementor placeholder */
.wppb-elementor-placeholder { padding: 20px; text-align: center; background: #f0f0f0; border: 2px dashed #ccc; color: #666; }