/*
 * VORNI Responsive Core v1.0
 * -------------------------------------------------------------
 * Purpose: one cross-browser responsive foundation for iOS,
 * Android and different viewport sizes without device sniffing.
 *
 * This file intentionally does NOT redesign desktop or replace
 * page-specific styles. It normalizes sizing, scrolling, viewport
 * behavior and fluid spacing so existing layouts adapt reliably.
 */

:root {
    --nx-page-gutter: clamp(12px, 2.6vw, 24px);
    --nx-touch-target: 44px;
    --nx-visual-height: 100vh;
    --nx-visual-width: 100vw;
}

@supports (height: 100dvh) {
    :root {
        --nx-visual-height: 100dvh;
    }
}

html {
    width: 100%;
    max-width: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

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

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

img,
video,
canvas {
    height: auto;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

.vorni-main-content,
#vorni-page-content,
.vorni-container,
.woocommerce,
.woocommerce-page {
    min-width: 0;
}

/* Prefer clipping horizontal paint overflow where supported, while
   retaining the theme's existing overflow-x:hidden fallback. */
@supports (overflow: clip) {
    html,
    body {
        overflow-x: clip !important;
    }
}

/* -------------------------------------------------------------
 * PHONE / SMALL MOBILE — 0..767 CSS px
 * Same rules for Safari/Chrome on iOS and Android browsers.
 * ------------------------------------------------------------- */
@media (max-width: 767px) {
    :root {
        --nx-page-gutter: clamp(10px, 3.6vw, 16px);
    }

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-y: auto !important;
        overscroll-behavior-y: auto !important;
    }

    body {
        min-height: 100% !important;
        touch-action: pan-y;
    }

    .vorni-main-content,
    #vorni-page-content,
    .woocommerce,
    .woocommerce-page,
    .vorni-home-hero,
    .vorni-featured-products,
    .vorni-popular-categories,
    #wholesale,
    .vorni-footer {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .vorni-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding-left: var(--nx-page-gutter) !important;
        padding-right: var(--nx-page-gutter) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Prevent iOS focus zoom and keep forms equally usable on Android. */
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Keep interactive controls usable across compact and large phones. */
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"] {
        min-height: var(--nx-touch-target);
    }

    /* Header scales continuously instead of assuming one phone width. */
    .vorni-mobile-header__row {
        grid-template-columns: clamp(36px, 10vw, 40px) minmax(0, 1fr) auto !important;
        gap: clamp(6px, 2.2vw, 10px) !important;
        padding-left: var(--nx-page-gutter) !important;
        padding-right: var(--nx-page-gutter) !important;
    }

    .vorni-mobile-header__delivery,
    .vorni-mobile-search-panel,
    .vorni-mobile-menu {
        padding-left: var(--nx-page-gutter) !important;
        padding-right: var(--nx-page-gutter) !important;
    }

    .vorni-mobile-logo {
        max-width: 100% !important;
        min-width: 0 !important;
        gap: clamp(5px, 2vw, 8px) !important;
    }

    .vorni-mobile-logo__name {
        min-width: 0 !important;
        font-size: clamp(18px, 5.8vw, 24px) !important;
    }

    .vorni-mobile-logo__ua {
        flex: 0 0 auto !important;
    }

    /* Fixed mobile navigation follows the actual viewport and safe area. */
    .vorni-mobile-bottom-nav {
        left: clamp(6px, 2.6vw, 10px) !important;
        right: clamp(6px, 2.6vw, 10px) !important;
        width: auto !important;
        max-width: none !important;
        bottom: max(8px, env(safe-area-inset-bottom)) !important;
    }

    /* Generic overflow protection for common grid/flex descendants. */
    .vorni-home-hero__grid,
    .vorni-home-hero__copy,
    .vorni-home-product-grid,
    .vorni-category-grid,
    .vorni-mobile-benefits,
    .vorni-mobile-price-switch,
    .vorni-mobile-product-tools,
    #customer_login,
    .nx-auth-grid,
    .nx-auth-card {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Account/login SVGs may never inherit an uncontrolled page width. */
    body.woocommerce-account:not(.logged-in) .nx-auth-card-icon {
        flex: 0 0 auto;
    }

    body.woocommerce-account:not(.logged-in) .nx-auth-card-icon svg {
        width: 21px !important;
        height: 21px !important;
        min-width: 21px !important;
        min-height: 21px !important;
        max-width: 21px !important;
        max-height: 21px !important;
    }
}

/* Extra compact phones: preserve content, reduce chrome before text. */
@media (max-width: 359px) {
    :root {
        --nx-page-gutter: 9px;
    }

    .vorni-mobile-icon-button,
    .vorni-mobile-cart {
        width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
    }

    .vorni-mobile-logo .vorni-logo-badge {
        width: 34px !important;
        height: 34px !important;
        flex-basis: 34px !important;
    }

    .vorni-mobile-logo__name {
        font-size: 18px !important;
    }

    .vorni-mobile-logo__ua {
        font-size: 9px !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
}

/* -------------------------------------------------------------
 * LARGE PHONE / TABLET — 768..980 CSS px
 * Keep desktop/tablet visual design, but prevent rigid overflow.
 * ------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 980px) {
    :root {
        --nx-page-gutter: clamp(18px, 3vw, 28px);
    }

    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .vorni-container,
    .vorni-main-content,
    #vorni-page-content,
    .woocommerce,
    .woocommerce-page {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .vorni-container {
        padding-left: var(--nx-page-gutter) !important;
        padding-right: var(--nx-page-gutter) !important;
    }

    img,
    video,
    iframe {
        max-width: 100% !important;
    }
}

/* Landscape phones with short browser viewport: do not force fixed
   viewport-height sections to exceed the visible area. */
@media (max-width: 980px) and (orientation: landscape) and (max-height: 560px) {
    .vorni-custom-qv,
    .vorni-custom-qv__window {
        max-height: var(--nx-visual-height) !important;
    }
}