/* Manual overrides that live outside the Tailwind build, so they survive theme:build */

/*
 * Root cause fix: this theme's own tailwind/components/slider.css only defines
 * the legacy ".snap" class. The newer Hyva slider markup (product-slider.phtml,
 * x-snap-slider) uses .snap-track/.snap-pager/.snap-marker + --snap-cols, which
 * were never added here, so every snap-slider on the site (upsell, related,
 * homepage carousels, etc.) has been missing its grid/scroll layout entirely.
 * Restoring the missing rules below (plain CSS, values ported from
 * vendor/hyva-themes/magento2-default-theme/web/tailwind/components/slider.css).
 */
.snap-track {
    --snap-cols: 1;
    --snap-gap: 1rem;
    --snap-size: calc((100% - var(--snap-gap) * (var(--snap-cols) - 1)) / var(--snap-cols));
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--snap-size);
    gap: var(--snap-gap);
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.snap-track::-webkit-scrollbar {
    display: none;
}

@media (prefers-reduced-motion: no-preference) {
    .snap-track {
        scroll-behavior: smooth;
    }
}

.snap-track > * {
    scroll-snap-align: start;
}

.snap-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    min-block-size: 2.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.snap-marker {
    flex-shrink: 0;
    block-size: 1rem;
    inline-size: 1rem;
    border-width: 1px;
    border-color: #475569;
    border-radius: 1rem;
    transition-duration: 300ms;
    transition-property: border-color, background-color;
}

@media (prefers-reduced-motion: no-preference) {
    .snap-marker {
        transition-property: inline-size, border-color, background-color;
        will-change: inline-size;
    }
}

.snap-marker[aria-current="true"] {
    inline-size: 1.75rem;
    border-color: var(--color-primary);
    background-color: var(--color-primary);
}

/* Upsell product slider: always show all items in a single row, no scrolling */
#upsell .snap-track {
    --snap-cols: 4 !important;
}

/*
 * Root cause fix: the installed Tailwind CSS version is 3.2.7, which predates
 * the logical-property utilities (ms-*/me-*/ps-*/pe-*/rounded-s-*/rounded-e-*)
 * added in Tailwind 3.3. Vendor Hyva templates (e.g. the cart drawer dialog,
 * which uses "me-0 rounded-e-none" to dock itself to the right edge) already
 * use these classes, but they can never be generated, so the browser's own
 * dialog default (margin: auto on every side) is never overridden and the
 * drawer opens centered instead of docked. Restoring the specific ones used
 * across the theme as plain CSS.
 */
.ms-0 { margin-inline-start: 0px; }
.ms-7 { margin-inline-start: 1.75rem; }
.ms-8 { margin-inline-start: 2rem; }
.me-0 { margin-inline-end: 0px; }
.me-4 { margin-inline-end: 1rem; }
.me-auto { margin-inline-end: auto; }
.pe-2 { padding-inline-end: 0.5rem; }
.pe-4 { padding-inline-end: 1rem; }
.rounded-s-none { border-start-start-radius: 0px; border-end-start-radius: 0px; }
.rounded-e-none { border-start-end-radius: 0px; border-end-end-radius: 0px; }