@import url('/css/ux-actions.css?v=20260520-4');
@import url('/css/ux-fixes.css?v=20260520-4');
@import url('/css/home-product-polish.css?v=20260520-4');
@import url('/css/cart-checkout.css?v=20260520-4');
@import url('/css/catalog-filters.css?v=20260520-4');
@import url('/css/product-page-polish.css?v=20260520-4');
@import url('/css/compact-cards-header.css?v=20260522-1');

/* Performance overrides for smoother mobile scroll */
html { scroll-behavior: auto; }

:root {
    --shadow: 0 12px 28px rgba(17,26,54,.06);
    --shadow-soft: 0 8px 18px rgba(17,26,54,.04);
}

.page-card {
    box-shadow: 0 16px 42px rgba(17,26,54,.06);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.hero-slider {
    box-shadow: var(--shadow);
    transform: translateZ(0);
}

.hero-slide {
    transition-duration: .22s;
}

.hero-slide__overlay {
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.05));
}

.hero-slide__cta {
    box-shadow: 0 10px 22px rgba(17,26,54,.1);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.hero-slider__dots,
.hero-slider__arrow,
.icon-button,
.emoji {
    box-shadow: var(--shadow-soft);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.category,
.product {
    transition: transform .14s ease, box-shadow .14s ease;
}

.product .photo img,
.product:hover .photo img {
    transition: none;
    transform: none;
}

@media (max-width: 900px) {
    body {
        background: #f7f8fc;
    }

    .page-card {
        background: rgba(255,255,255,.9);
        box-shadow: 0 8px 22px rgba(17,26,54,.045);
    }

    .category:hover,
    .product:hover,
    .button:hover {
        transform: none;
    }

    .product,
    .category,
    .feature,
    .catalog-sidebar,
    .checkout-copy,
    .checkout-form,
    .product-gallery,
    .product-info {
        box-shadow: 0 6px 18px rgba(17,26,54,.045);
    }

    .hero-slider,
    .categories,
    .products,
    .catalog-products,
    .checkout-page,
    .product-detail {
        content-visibility: auto;
        contain-intrinsic-size: 1px 640px;
    }

    .hero-slide,
    .mobile-drawer,
    .catalog-sidebar,
    .drawer-backdrop {
        transition-duration: .16s;
    }
}

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