/* Lightweight interaction layer for the customer-facing mobile experience. */
@media (max-width: 768px) {
    :root {
        --micro-fast: 160ms;
        --micro-normal: 190ms;
        scroll-behavior: smooth;
    }

    body.theme-aniz :where(a, button, .btn, [role="button"]) {
        transition: color var(--micro-fast) ease,
                    background-color var(--micro-fast) ease,
                    border-color var(--micro-fast) ease,
                    box-shadow var(--micro-fast) ease,
                    opacity var(--micro-fast) ease,
                    transform var(--micro-fast) ease;
    }

    body.theme-aniz :where(button, .btn, [role="button"]):not(:disabled):active,
    body.theme-aniz a.button:active,
    body.theme-aniz a.btn:active {
        transform: scale(.97);
    }

    .mobile-bottom-nav__item {
        transform: translateZ(0);
        transition: color var(--micro-fast) ease,
                    background-color var(--micro-fast) ease,
                    transform var(--micro-fast) ease;
    }

    .mobile-bottom-nav__item i,
    .mobile-bottom-nav__item .mobile-bottom-nav__icon {
        transition: transform var(--micro-fast) ease;
    }

    .mobile-bottom-nav__item.is-active i,
    .mobile-bottom-nav__item.is-active > .mobile-bottom-nav__icon {
        transform: translateY(-1px) scale(1.06);
    }

    .mobile-bottom-nav__item:active {
        transform: scale(.94);
    }

    .mobile-badge,
    .aniz-header__action-count,
    .cart-count {
        transform-origin: center;
    }

    :where(.mobile-badge, .aniz-header__action-count, .cart-count).is-updating {
        animation: mobile-badge-pulse 240ms ease-out;
    }

    .mobile-bottom-nav__icon.is-cart-impact {
        animation: mobile-cart-impact 260ms ease-out;
    }

    .mobile-fly-to-cart {
        border: 1px solid rgba(31, 107, 130, .18);
        border-radius: 8px;
        box-shadow: 0 8px 20px rgba(15, 23, 42, .18);
        object-fit: contain;
        pointer-events: none;
        position: fixed;
        transform-origin: center;
        will-change: transform, opacity;
        z-index: 180;
    }

    body.theme-aniz :where(.product-card, .single-product, .home-product-card, .related-card, .aniz-latest-card, .aniz-product-tile) {
        transform: translateZ(0);
        transition: box-shadow var(--micro-normal) ease, transform var(--micro-normal) ease;
    }

    body.theme-aniz :where(.product-card, .single-product, .home-product-card, .related-card, .aniz-latest-card, .aniz-product-tile):active {
        box-shadow: 0 10px 24px rgba(15, 23, 42, .12) !important;
        transform: translateY(-2px);
    }

    body.theme-aniz img[data-micro-image] {
        opacity: 0;
        transition: opacity var(--micro-normal) ease;
    }

    body.theme-aniz img[data-micro-image].is-loaded {
        opacity: 1;
    }

    .aniz-header {
        transition: box-shadow var(--micro-normal) ease, transform var(--micro-normal) ease;
    }

    .aniz-header.is-scrolled {
        box-shadow: 0 5px 16px rgba(15, 23, 42, .08);
    }

    .aniz-header.is-scrolled .aniz-header__main {
        transform: scale(.985);
        transform-origin: center top;
    }

    .aniz-header__main {
        transition: transform var(--micro-normal) ease;
    }

    .aniz-header__mobile-main-panel {
        display: block !important;
        opacity: 0;
        pointer-events: none;
        transform: translateX(14px);
        transition: opacity var(--micro-normal) ease, transform var(--micro-normal) ease;
        visibility: hidden;
    }

    .aniz-header__mobile-main-panel.is-open {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
        visibility: visible;
    }

    .products-page__sidebar {
        opacity: 0;
        transition: opacity var(--micro-normal) ease, transform var(--micro-normal) ease !important;
    }

    .products-page__sidebar.is-open {
        opacity: 1;
    }

    .modal.fade .modal-dialog {
        opacity: 0;
        transform: scale(.98);
        transition: opacity var(--micro-normal) ease, transform var(--micro-normal) ease !important;
    }

    .modal.show .modal-dialog {
        opacity: 1;
        transform: scale(1);
    }

    .variant-pill span {
        transition: background-color var(--micro-fast) ease,
                    border-color var(--micro-fast) ease,
                    box-shadow var(--micro-fast) ease,
                    color var(--micro-fast) ease,
                    transform var(--micro-fast) ease;
    }

    .variant-pill input:checked + span {
        box-shadow: 0 0 0 3px rgba(31, 107, 130, .12);
        transform: scale(1.025);
    }

    .variant-pill:active span {
        transform: scale(.97);
    }

    .mobile-toast {
        align-items: center;
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: 10px;
        display: flex;
        gap: 10px;
        justify-content: center;
        pointer-events: none;
    }

    .mobile-toast::before {
        align-items: center;
        background: #208457;
        border-radius: 999px;
        content: "\2713";
        display: inline-flex;
        flex: 0 0 22px;
        font-size: .75rem;
        height: 22px;
        justify-content: center;
    }

    .storefront-notification {
        align-items: center;
        border: 1px solid rgba(255, 255, 255, .12) !important;
        border-radius: 10px !important;
        bottom: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom) + 12px);
        box-shadow: 0 12px 34px rgba(15, 23, 42, .22);
        color: #fff !important;
        display: flex;
        font-size: .86rem !important;
        font-weight: 800;
        gap: 9px;
        left: 14px;
        margin: 0 !important;
        padding: 12px 42px 12px 14px !important;
        position: fixed;
        right: 14px;
        text-align: left !important;
        transition: opacity var(--micro-normal) ease, transform var(--micro-normal) ease;
        z-index: 161;
    }

    .storefront-notification--success { background: #123d33 !important; }
    .storefront-notification--error { background: #7f1d1d !important; }

    .storefront-notification .close {
        color: #fff;
        height: 40px;
        min-height: 40px;
        opacity: .8;
        padding: 0 !important;
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
    }

    .storefront-notification.is-leaving {
        opacity: 0;
        transform: translateY(8px);
    }

    .mobile-search-skeleton {
        align-items: center;
        display: grid;
        gap: 10px;
        grid-template-columns: 66px minmax(0, 1fr);
        padding: 8px;
    }

    .micro-skeleton {
        background: #e9edf0;
        border-radius: 7px;
        overflow: hidden;
        position: relative;
    }

    .micro-skeleton::after {
        animation: mobile-shimmer 1.15s ease-in-out infinite;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .72), transparent);
        content: "";
        inset: 0;
        position: absolute;
        transform: translateX(-100%);
    }

    .mobile-search-skeleton__image {
        height: 66px;
    }

    .mobile-search-skeleton__copy {
        display: grid;
        gap: 8px;
    }

    .mobile-search-skeleton__title {
        height: 14px;
        width: 82%;
    }

    .mobile-search-skeleton__price {
        height: 13px;
        width: 42%;
    }

    @keyframes mobile-badge-pulse {
        0% { transform: scale(1); }
        45% { transform: scale(1.18); }
        100% { transform: scale(1); }
    }

    @keyframes mobile-cart-impact {
        0% { transform: scale(1); }
        45% { transform: scale(1.12); }
        100% { transform: scale(1); }
    }

    @keyframes mobile-shimmer {
        to { transform: translateX(100%); }
    }
}

@media (hover: hover) and (pointer: fine) {
    body.theme-aniz :where(.product-card, .single-product, .home-product-card, .related-card, .aniz-latest-card, .aniz-product-tile):hover {
        box-shadow: 0 10px 24px rgba(15, 23, 42, .12) !important;
        transform: translateY(-2px);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}