/* Mobile-first responsive hardening for Naturiq Store. */
:root {
    --safe-page-x: clamp(1rem, 4vw, 2rem);
    --tap-size: 44px;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

button,
a,
input,
select,
textarea {
    touch-action: manipulation;
}

button,
[role="button"],
input,
select,
textarea {
    min-height: var(--tap-size);
}

input,
select,
textarea {
    font-size: 16px;
}

:focus-visible {
    outline: 3px solid rgba(21, 128, 61, .35);
    outline-offset: 3px;
}

.site-header {
    padding-top: env(safe-area-inset-top);
}

.site-header-inner {
    min-height: 4rem;
}

.mobile-menu-panel {
    transform-origin: top;
}

.mobile-menu-panel[hidden] {
    display: none;
}

.hero-carousel {
    border-radius: 1.25rem;
}

.hero-carousel .hero-frame {
    aspect-ratio: 4 / 3;
    min-height: 0;
}

.hero-carousel .carousel-prev,
.hero-carousel .carousel-next {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.5rem;
}

.hero-carousel .carousel-prev {
    left: .75rem;
}

.hero-carousel .carousel-next {
    right: .75rem;
}

.hero-carousel .carousel-dots {
    bottom: .875rem;
}

.product-card-image {
    height: clamp(12rem, 58vw, 15rem);
}

.responsive-card {
    border-radius: 1.25rem;
}

.responsive-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.responsive-table table {
    min-width: 720px;
}

.admin-orders-table table {
    min-width: 980px;
}

.admin-products-table table {
    min-width: 760px;
}

.mobile-bottom-space {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

@media (max-width: 479px) {
    .xs-stack > * {
        width: 100%;
    }

    .hero-carousel {
        margin-inline: -.25rem;
    }

    .hero-carousel img {
        object-fit: cover;
    }

    .product-detail-image {
        height: min(78vw, 22rem) !important;
    }

    .checkout-summary-sticky {
        position: static !important;
    }

    .mobile-full-button {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

@media (min-width: 480px) {
    .hero-carousel .hero-frame {
        aspect-ratio: 16 / 9;
    }
}

@media (min-width: 640px) {
    .hero-carousel {
        border-radius: 1.75rem;
    }

    .hero-carousel .hero-frame {
        aspect-ratio: 16 / 8;
        min-height: 22rem;
    }

    .hero-carousel .carousel-prev,
    .hero-carousel .carousel-next {
        width: 2.75rem;
        height: 2.75rem;
    }
}

@media (min-width: 768px) {
    .responsive-card {
        border-radius: 1.75rem;
    }

    .product-card-image {
        height: 14rem;
    }
}

@media (min-width: 1024px) {
    .site-header-inner {
        min-height: 5rem;
    }

    .hero-carousel {
        border-radius: 2rem;
    }

    .hero-carousel .hero-frame {
        aspect-ratio: 16 / 7;
        min-height: 32.5rem;
    }

    .product-card-image {
        height: 14rem;
    }
}

@media (min-width: 1280px) {
    .hero-carousel .hero-frame {
        min-height: 34rem;
    }
}

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