/* Surin UX and performance polish — 2026-09-02 */

/* The theme's customize.css adds 35px to every Nivo slide image. The slider
   already starts exactly after the header, so that margin creates a false gap. */
.html-home-page .theme-custom .nivoSlider img {
    margin-top: 0 !important;
}

/* Keep keyboard focus visible across navigation and commerce actions. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(227, 24, 55, 0.38);
    outline-offset: 3px;
}

@media (max-width: 991.98px) {
    /* Sticky desktop gallery behavior is awkward on a stacked product page. */
    .product-details-page .gallery {
        position: relative !important;
        top: auto !important;
    }

    /* Preserve comfortable touch targets without visually enlarging the icons. */
    header .menu-icon,
    header .btn-cart,
    .nivo-directionNav a {
        min-width: 44px;
        min-height: 44px;
    }

    header .menu-icon,
    header .btn-cart {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .nivo-directionNav a {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}