/* Dots for js/phone-carousel.js. The track itself (scroll-snap, card width) is styled by
   each section, because its own grid rule would outrank a generic selector here. */
.pc-dots { display: none; }

@media (max-width: 575px) {
    .pc-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
    }
        .pc-dots button {
            width: 8px;
            height: 8px;
            padding: 0;
            border: 0;
            border-radius: 8px;
            background: #cfe3d7;
            cursor: pointer;
            transition: width .35s cubic-bezier(.33, 1, .68, 1), background-color .35s ease-out;
        }
        .pc-dots button.on {
            width: 24px;
            background: var(--theme-color1, #1e9e57);
        }
}

@media (prefers-reduced-motion: reduce) {
    .pc-dots button { transition: none; }
}