/**
 * Camada global de UX mobile — carregada em todas as páginas da loja (qualquer tema).
 * Complementa o style.css do tema: safe-area, toque, grids, overflow.
 */

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

body {
    overflow-x: clip;
    /* Evita barra horizontal por margens; overflow-x: hidden é fallback antigo */
    overflow-x: hidden;
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

main {
    min-width: 0;
}

/* Header: âncora do menu mobile e ordem de empilhamento */
header {
    position: relative;
    z-index: 200;
}

header .container {
    position: relative;
}

header .nav-flex {
    position: relative;
    flex-wrap: nowrap;
    gap: clamp(8px, 2vw, 24px);
}

/* Menu drawer mobile */
@media (max-width: 768px) {
    .nav-links {
        z-index: 250;
        left: 0;
        right: 0;
        width: 100%;
        padding: 12px 0 max(20px, env(safe-area-inset-bottom));
        max-height: min(70vh, 480px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-links a {
        display: block;
        padding: 14px 24px;
        font-size: 1.05rem;
        min-height: 48px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .logo {
        max-width: min(52vw, 220px);
        min-width: 0;
    }

    .logo img {
        max-height: 44px;
        width: auto;
        height: auto;
        object-fit: contain;
    }

    .nav-icons {
        flex-shrink: 0;
        gap: 12px;
    }

    .nav-icons > a,
    .nav-icons .mobile-toggle {
        display: flex !important;
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .nav-icons svg,
    .nav-icons [data-lucide] {
        width: 22px;
        height: 22px;
    }

    .container {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }

    /* Grids da home / catálogo */
    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    .featured-section {
        padding: 48px 0 !important;
    }

    .section-head {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 14px !important;
    }

    .section-title {
        font-size: clamp(1.45rem, 5vw, 2rem) !important;
    }

    /* iOS: evita zoom ao focar inputs (use 16px) */
    input.form-control,
    textarea.form-control,
    select.form-control {
        font-size: 16px !important;
    }
}

@media (max-width: 380px) {
    .product-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Títulos de secção em páginas com estilos inline */
@media (max-width: 768px) {
    .cart-page h1,
    .checkout-page h1 {
        font-size: clamp(1.45rem, 5.5vw, 2.2rem) !important;
        margin-bottom: 24px !important;
    }

    .shop-page h2 {
        font-size: clamp(1.35rem, 4.5vw, 1.8rem) !important;
    }
}

/* Layouts de páginas (classes adicionadas nos templates) */
@media (max-width: 900px) {
    .cart-layout,
    .checkout-layout,
    .shop-layout {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    .checkout-layout > aside > div[style*="sticky"] {
        position: relative !important;
        top: auto !important;
    }

    .shop-layout > aside > div[style*="sticky"] {
        position: relative !important;
        top: auto !important;
    }
}

/* Carrinho: scroll horizontal suave na tabela em telas estreitas */
.cart-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: max(-12px, calc(-1 * env(safe-area-inset-left, 0px)));
    margin-right: max(-12px, calc(-1 * env(safe-area-inset-right, 0px)));
    padding-left: max(12px, env(safe-area-inset-left, 12px));
    padding-right: max(12px, env(safe-area-inset-right, 12px));
}

.cart-table-wrap table {
    min-width: 520px;
}

@media (max-width: 768px) {
    .checkout-grid-2col,
    .checkout-grid-3col {
        grid-template-columns: 1fr !important;
    }
}

/* Botão flutuante Roxane — respeita barra do iPhone */
#roxane-fab.roxane-fab,
a.roxane-fab {
    bottom: max(1rem, env(safe-area-inset-bottom)) !important;
    right: max(1rem, env(safe-area-inset-right)) !important;
}

/* Botões e links principais: resposta ao toque */
@media (hover: none) and (pointer: coarse) {
    .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}