.root {
    width: 100%;
    min-width: 0;
}

.root[data-device='desktop'] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Fluid for the dashboard grid (Figma breakpoints 2831:26984): slots run
     * 464-468px tall at 437-564px wide. Standalone, the floor wins. */
    min-height: 464px;
    height: 100%;
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius-sm);
    background-color: var(--color-bg-neutral-light);
    overflow: hidden;
}

.swiper {
    width: 100%;
    padding-top: var(--spacing-24);
}

/* Slide width tracks the card so slidesPerView="auto" keeps the Figma
 * geometry at every breakpoint: active slide = card width minus the fixed
 * 48px peek allowance (456 - 408 in the base design), 12px gaps. */
.slide {
    /* 46px accounts for the card's 2px of borders: at the 456px base design
     * the inner box is 454px, so this yields the Figma 408px active slide. */
    width: calc(100% - 46px);
}

.footer {
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
    padding: 0 var(--spacing-24) var(--spacing-20);
    width: 100%;
}

.pageControl {
    display: flex;
    align-items: center;
    gap: 6px; /* Figma one-off; no token */
    padding: var(--spacing-4) 0;
}

.dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background-color: var(--color-bg-fill-neutral-dark);
    opacity: 0.2;
    cursor: pointer;
}

/* Active dot per Figma PageControl (1650:7041): 48px alpha-black timer track.
 * Transition lives here (not on .dot) so the outgoing dot snaps straight back
 * to a 6px dot — otherwise it shrinks as a solid-dark 48px bar while its
 * opacity eases from 1 to 0.2. */
.dotActive {
    position: relative;
    width: 48px;
    border-radius: 999px;
    background-color: var(--color-bg-fill-alpha-black-10);
    opacity: 1;
    overflow: hidden;
    transition:
        width 0.3s ease-in-out,
        opacity 0.3s ease-in-out;
}

.dotPill {
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background-color: var(--color-bg-fill-primary);
    animation: shop-carousel-progress var(--shop-carousel-auto-play-duration, 6000ms) linear forwards;
}

.root[data-auto-play='false'] .dotPill {
    animation-play-state: paused;
}

@keyframes shop-carousel-progress {
    to {
        width: 100%;
    }
}

.viewAll {
    display: flex;
    flex: 1;
    min-width: 1px;
    justify-content: flex-end;
}

.root[data-device='mobile'] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    border-radius: var(--border-radius-md);
    background-color: var(--color-bg-neutral-light);
}

.mobileHeader {
    display: flex;
    align-items: center;
    gap: var(--spacing-16);
    width: 100%;
}

.eyebrow {
    font-family: var(--font-decorative);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs);
    letter-spacing: var(--letter-spacing-xxl);
    text-transform: uppercase;
    color: var(--color-text-primary-disabled);
}

.headerDivider {
    flex: 1;
    min-width: 1px;
    height: 1px;
    background-color: var(--border-color-alpha-black-10);
}

.swiperMobile {
    width: 100%;
}

.rail {
    width: 100%;
}