/*
 * Phase 1 storefront responsive hardening
 * Loaded last by every available storefront layout.
 * Scope: layout safety, scrolling, touch targets, grids, forms, tables,
 * drawers/modals and common commerce pages. No branding is changed here.
 */

:root {
    --p1-gutter: clamp(12px, 3vw, 24px);
    --p1-touch: 44px;
    --p1-radius: 10px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    margin: 0;
    overflow-x: clip;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

body.p1-menu-open,
body.p1-modal-open { overflow: hidden; }

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

img, video { height: auto; }

iframe { border: 0; }

pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }

p, li, td, th, label, a, button, input, select, textarea {
    overflow-wrap: break-word;
}

.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    max-width: 100%;
    padding-right: var(--p1-gutter);
    padding-left: var(--p1-gutter);
}

.row { min-width: 0; }

.row > *,
[class*="col-"] { min-width: 0; }

.main,
main,
#main,
#content,
.page-content,
.site-content,
.main-content,
.content-area { min-width: 0; max-width: 100%; }

/* Local horizontal scrolling is allowed for data that genuinely needs it. */
.table-responsive,
.p1-table-scroll,
.order-table-wrapper,
.cart-table-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.table-responsive > table,
.p1-table-scroll > table { margin-bottom: 0; }

table { max-width: 100%; }

/* Form and tap safety. */
input, select, textarea, button { max-width: 100%; }

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea {
    min-height: var(--p1-touch);
    font-size: 16px; /* prevents iOS focus zoom */
}

textarea { min-height: 110px; resize: vertical; }

button,
.btn,
[role="button"],
.common-btn,
.th-btn {
    touch-action: manipulation;
}

.btn:not(.btn-sm),
.common-btn,
.th-btn {
    min-height: var(--p1-touch);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: normal;
    text-align: center;
}

/* Header, menus, search and drawers. */
header,
.header-area,
.header-six-area,
.main-header,
.main-header__menu-box,
.navbar { max-width: 100%; }

.navbar,
.navbar__options,
.header-actions,
.header-action-right { min-width: 0; }

.search-form,
.header-search,
.search-style-2,
.search-style-3 { min-width: 0; max-width: 100%; }

.search-form input,
.header-search input { min-width: 0; width: 100%; }

.mobile-menu,
.mobile-menu-wrapper,
.offcanvas,
.side-cart,
.cart-drawer,
.filter-drawer,
.sidebar-canvas,
.sidemenu-wrapper {
    width: min(92vw, 420px) !important;
    max-width: 100vw !important;
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.dropdown-menu,
.mega-menu,
.sub-menu {
    max-width: calc(100vw - (2 * var(--p1-gutter)));
}

/* Media, sliders and cards. */
.swiper,
.swiper-container,
.slick-slider,
.owl-carousel,
.banner-area,
.hero-area,
.slider-area { max-width: 100%; overflow: hidden; }

.swiper-slide,
.slick-slide,
.owl-item { min-width: 0; }

.product-card,
.product-box,
.product-wrap,
.product-item,
.product-grid,
.shop-product,
.single-product { min-width: 0; max-width: 100%; }

.product-card img,
.product-box img,
.product-wrap img,
.product-item img,
.product-img img,
.product-image img {
    display: block;
    width: 100%;
    max-width: 100%;
    object-fit: contain;
}

.product-title,
.product-name,
.product-card-title,
.product-content h3,
.product-content h4 {
    overflow-wrap: anywhere;
}

.price,
.product-price { white-space: normal; }

/* Product gallery/detail and commerce actions. */
.product-details,
.product-details-area,
.product-details-wrapper,
.product-gallery,
.product-info,
.product_meta { min-width: 0; max-width: 100%; }

.product-gallery img,
.product-details-img img,
.product-big-img img { width: 100%; object-fit: contain; }

.quantity,
.quantity-box,
.cart-quantity,
.product-actions,
.product-action,
.variation-options,
.variant-options,
.color-options,
.size-options {
    max-width: 100%;
    flex-wrap: wrap;
}

.color-options label,
.size-options label,
.variation-options label,
.variant-options label { flex: 0 0 auto; }

/* Filter/sidebar and result controls. */
.shop-sidebar,
.sidebar-filter,
.filter-sidebar,
.widget-area { max-width: 100%; }

.shop-toolbar,
.shop-topbar,
.product-filter,
.filter-sort-row { gap: 10px; flex-wrap: wrap; }

/* Cart, checkout, account and content pages. */
.cart-area,
.checkout-area,
.checkout-wrapper,
.checkout-form,
.order-summary,
.cart-summary,
.account-area,
.dashboard-area,
.blog-area,
.contact-area { min-width: 0; max-width: 100%; }

.cart-item,
.mini-cart-item,
.side-cart-item { min-width: 0; }

.cart-item img,
.mini-cart-item img,
.side-cart-item img { flex: 0 0 auto; object-fit: cover; }

.modal { padding-right: 0 !important; }

.modal-dialog {
    width: auto;
    max-width: min(96vw, var(--bs-modal-width, 800px));
    margin: max(8px, env(safe-area-inset-top)) auto;
}

.modal-content { max-height: calc(100dvh - 16px); overflow: hidden; }
.modal-body { overflow-y: auto; overscroll-behavior: contain; }

.alert,
.toast,
.swal2-popup { max-width: calc(100vw - (2 * var(--p1-gutter))) !important; }

/* Protect anchors beneath sticky headers. */
[id] { scroll-margin-top: 100px; }

@media (max-width: 991.98px) {
    :root { --p1-gutter: clamp(12px, 2.5vw, 20px); }

    .desktop-only,
    .d-lg-block.desktop-only { display: none !important; }

    .shop-sidebar,
    .sidebar-filter,
    .filter-sidebar {
        width: min(92vw, 380px);
    }

    .checkout-area .row,
    .cart-area .row,
    .product-details-area .row { row-gap: 24px; }

    .order-summary,
    .cart-summary,
    .checkout-summary {
        position: static !important;
        top: auto !important;
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    :root { --p1-gutter: 14px; }

    h1 { font-size: clamp(1.75rem, 8vw, 2.4rem); }
    h2 { font-size: clamp(1.45rem, 6.4vw, 2rem); }
    h3 { font-size: clamp(1.2rem, 5.2vw, 1.6rem); }

    section,
    .section-padding,
    .space,
    .space-top,
    .space-bottom { max-width: 100%; }

    .header-six-area .main-header__menu-box .navbar,
    .navbar__options,
    .header-actions,
    .header-action-right {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .header-logo,
    .navbar-brand { min-width: 0; flex: 0 1 auto; }
    .header-logo img,
    .navbar-brand img { max-width: min(46vw, 180px); max-height: 52px; object-fit: contain; }

    .dropdown-menu,
    .mega-menu,
    .sub-menu { max-height: min(70dvh, 560px); overflow-y: auto; }

    .product-grid-4,
    .product-grid,
    .products-grid,
    .shop-products-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .product-grid-4 > *,
    .product-grid > *,
    .products-grid > *,
    .shop-products-grid > * { width: auto !important; max-width: 100%; }

    .product-card,
    .product-box,
    .product-wrap,
    .product-item { height: 100%; }

    .product-content,
    .product-card-content { padding: 10px; }

    .product-title,
    .product-name,
    .product-card-title { font-size: .92rem; line-height: 1.35; }

    .product-actions .btn,
    .product-action .btn,
    .add-to-cart { width: 100%; }

    .cart-item,
    .mini-cart-item,
    .side-cart-item { gap: 10px; }

    .nav-tabs,
    .nav-pills,
    .category-tabs,
    .product-tabs {
        flex-wrap: nowrap;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
    }

    .nav-tabs > *,
    .nav-pills > *,
    .category-tabs > *,
    .product-tabs > * { flex: 0 0 auto; }

    .pagination { flex-wrap: wrap; gap: 4px; }

    .modal-dialog-centered { min-height: calc(100dvh - 16px); }

    .swal2-container { padding: 8px !important; }
}

@media (max-width: 479.98px) {
    .product-grid-4,
    .product-grid,
    .products-grid,
    .shop-products-grid { gap: 8px; }

    .btn-group:not(.quantity),
    .form-actions,
    .checkout-actions,
    .cart-actions { flex-wrap: wrap; width: 100%; }

    .form-actions > *,
    .checkout-actions > *,
    .cart-actions > * { flex: 1 1 100%; }
}

@media (max-width: 359.98px) {
    .product-grid-4,
    .product-grid,
    .products-grid,
    .shop-products-grid { grid-template-columns: minmax(0, 1fr); }
}

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