/* ==========================================================
   AJUSTES FLUIDOS PARA TELAS PEQUENAS
   Viewports compactas, sem identificação de dispositivo
                  
   ========================================================== */

/*
 * 1. Viewport height dinâmico para Safari móvel (barra de endereços retrátil)
 *    Substitui "min-height:100vh" em elementos que devem preencher
 *    a tela sem ficar cortados pela barra do Safari.
 */
@supports (height: 100dvh) {
    .admin-login-main {
        min-height: 100dvh;
    }
}

/*
 * 2. Variáveis de safe-area globais — usadas em todo o arquivo
 *    para respeitar o entalhe (notch) e a Dynamic Island
 *    (dispositivos com recorte de tela).
 */
:root {
    --safe-top:    env(safe-area-inset-top,    0px);
    --safe-right:  env(safe-area-inset-right,  0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left:   env(safe-area-inset-left,   0px);
}

/*
 * 3. Breakpoint principal para todos os viewports estreitas
 *    (≤ 440 px — cobre desde 375 px até 440 px em portrait)
 */
@media (max-width: 440px) {

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

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

    /* --- Header strip compacto --- */
    .header-strip {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 8px max(14px, env(safe-area-inset-left));
        font-size: 12px;
        line-height: 1.4;
        text-align: left;
    }

    .header-strip span {
        justify-content: flex-start;
        gap: 6px;
    }

    /* --- Navbar: logo menor + safe area lateral --- */
    .navbar {
        padding: 10px max(14px, env(safe-area-inset-left));
        min-height: auto;
        gap: 12px;
    }

    .brand {
        width: 120px;
        height: 60px;
    }

    .menu-toggle {
        width: 40px;
        height: 40px;
    }

    /* --- Menu aberto em tela estreita --- */
    .navbar.is-open .nav-links a {
        padding: 13px 0;
        border-bottom: 1px solid rgba(0, 63, 38, 0.08);
        font-size: 16px;
    }

    .navbar.is-open .nav-actions {
        padding: 10px 0 4px;
        gap: 14px;
    }

    /* --- Hero principal --- */
    .hero {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 24px max(14px, env(safe-area-inset-left)) 20px;
        gap: 0;
    }

    .hero h1 {
        font-size: clamp(36px, 9.5vw, 44px);
        max-width: 100%;
    }

    .hero p {
        font-size: clamp(15px, 4.2vw, 18px);
        margin: 14px 0 20px;
    }

    .hero-actions {
        gap: 10px;
    }

    .hero-actions .btn {
        width: 100%;
        justify-content: center;
        min-height: 46px;
        padding: 0 18px;
        font-size: 14px;
    }

    .hero-visual {
        width: 100%;
        min-height: 280px;
        overflow: hidden;
    }

    /* --- Banner hero de imagem (home) --- */
    .image-hero img {
        height: auto;
        object-fit: contain;
        object-position: center center;
    }

    .hero-tagline {
        top: 58%;
        width: 52%;
        padding: 2px 6px 16px;
        font-size: clamp(11px, 3.4vw, 15px);
    }

    /* --- Pouchs no hero --- */
    .pouch {
        width: 108px;
        height: 196px;
        padding: 42px 12px 12px;
        border-radius: 6px 6px 22px 22px;
    }

    .pouch span   { font-size: 14px; }
    .pouch strong { font-size: 22px; }
    .pouch em     { font-size: 16px; margin-top: 10px; }

    .pouch-grape { left: 96px; }

    .pouch-mango {
        left: 184px;
        width: 120px;
        height: 216px;
        bottom: 22px;
    }

    .fruit-orange {
        left: 6px;
        bottom: 82px;
        width: 90px;
        height: 90px;
    }

    .fruit-mango {
        right: 1px;
        bottom: 20px;
        width: 82px;
        height: 64px;
    }

    .ice { width: 32px; height: 32px; }
    .ice-one   { left: 48px;  bottom: 28px; }
    .ice-two   { left: 148px; bottom: 10px; }
    .ice-three { right: 60px; bottom: 62px; }

    /* --- Seção de categorias home --- */
    .home-category-nav {
        padding: 32px max(14px, env(safe-area-inset-left)) 4px;
    }

    .home-category-nav h2 {
        font-size: clamp(26px, 7vw, 34px);
    }

    .home-category-nav > header p {
        font-size: 14px;
    }

    .home-category-links { gap: 12px; }

    .home-category-card {
        min-height: 200px;
        grid-template-columns: 1.1fr 0.9fr;
        padding: 18px 10px 18px 16px;
        border-radius: 14px;
    }

    .home-category-card small { font-size: 10px; }
    .home-category-card h3   { font-size: 20px; margin: 6px 0 8px; }
    .home-category-card p    { font-size: 12px; margin: 0 0 14px; }

    .home-category-card > img {
        height: 160px;
        transform: none;
    }

    .ice-category-card > img {
        transform: none;
    }

    /* --- Seções genéricas com padding safe area --- */
    .products-preview,
    .content-section,
    .contact-section,
    .benefits-grid-page {
        padding-left:  max(14px, env(safe-area-inset-left));
        padding-right: max(14px, env(safe-area-inset-right));
    }

    /* --- Product cards (home) --- */
    .product-card {
        grid-template-columns: 1fr;
        min-height: auto;
        border-radius: 16px;
    }

    .product-copy { padding: 20px; }

    .product-card h3 {
        font-size: clamp(22px, 6vw, 28px);
        margin: 18px 0 10px;
    }

    .product-image {
        height: 220px;
        background-size: contain;
    }

    /* --- Benefits row (home) --- */
    .benefits-row {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 18px max(14px, env(safe-area-inset-left));
        margin: 0 0 18px;
        border-radius: 0;
    }

    /* --- CTA band (home) --- */
    .cta-band {
        padding: 160px max(14px, env(safe-area-inset-left)) 20px;
    }

    .cta-fruits {
        width: 100%;
        height: 140px;
    }

    .cta-band h2 { font-size: clamp(22px, 6vw, 28px); }

    /* --- Catalog page --- */
    .catalog-page {
        padding: 14px max(12px, env(safe-area-inset-left)) 8px;
    }

    .catalog-intro {
        min-height: 0;
        margin-bottom: 14px;
        padding: 18px 14px;
        border-radius: 14px;
    }

    .catalog-intro h1 { font-size: clamp(28px, 8vw, 36px); }
    .catalog-intro p  { font-size: 14px; }

    .catalog-intro-points {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .catalog-intro-points span {
        grid-template-columns: 36px 1fr;
        column-gap: 10px;
        padding: 10px 12px;
        font-size: 12px;
    }

    .catalog-intro-points svg {
        width: 36px;
        height: 36px;
        padding: 8px;
    }

    .catalog-intro-points strong { font-size: 13px; }

    /* --- Catalog toolbar --- */
    .catalog-toolbar {
        position: static;
        gap: 8px;
        margin-bottom: 20px;
        padding: 8px;
        border-radius: 12px;
    }

    .catalog-tabs {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    .catalog-tab {
        justify-content: center;
        gap: 3px;
        padding: 0 4px;
        font-size: 11px;
        min-height: 38px;
    }

    .catalog-tab small {
        min-width: 18px;
        padding: 2px 3px;
        font-size: 9px;
    }

    .sort-control {
        width: 100%;
        min-width: 0;
        min-height: 38px;
        font-size: 13px;
    }

    /* --- Product list (catálogo) --- */
    .product-list,
    .ice-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .store-card {
        min-height: 360px;
        padding: 8px;
        border-radius: 12px;
    }

    .store-image    { min-height: 120px; }

    .product-photo,
    .product-photo img {
        height: 120px;
        min-height: 120px;
    }

    .store-card h3 {
        font-size: 13px;
        margin-top: 8px;
        min-height: 2.4em;
    }

    .store-card p {
        font-size: 11px;
        min-height: 3.6em;
    }

    .store-card > strong { font-size: 15px; }

    .details-btn {
        min-height: 34px;
        font-size: 10px;
        padding: 4px;
    }

    .store-size {
        left: 5px;
        bottom: 5px;
        padding: 3px 5px;
        font-size: 8px !important;
    }

    .category-heading {
        gap: 10px;
        margin-bottom: 16px;
    }

    .category-heading > svg {
        width: 48px;
        height: 48px;
        padding: 10px;
    }

    .category-heading h2 { font-size: clamp(22px, 6vw, 28px); }
    .category-heading p  { font-size: 13px; }

    /* --- Products hero (catálogo) --- */
    .products-hero {
        grid-template-columns: 1fr;
    }

    .products-hero-copy {
        padding: 28px max(14px, env(safe-area-inset-left)) 14px;
    }

    .products-hero h1 { font-size: clamp(36px, 9vw, 44px); }
    .products-hero p  { font-size: 15px; }

    .products-hero-art { min-height: 200px; }

    /* --- Product detail page --- */
    .product-detail {
        padding: 24px max(14px, env(safe-area-inset-left));
        gap: 24px;
    }

    .detail-visual          { min-height: 280px; }
    .product-image-button   { min-height: 280px; }
    .product-image-button > img { height: 250px; }

    .detail-copy h1 { font-size: clamp(30px, 8vw, 40px); }
    .detail-copy p  { font-size: 16px; }
    .detail-price   { font-size: 28px; }

    .purchase-form { gap: 10px; }

    /* --- Cart page --- */
    .cart-page,
    .checkout-page,
    .success-page {
        padding: 24px max(14px, env(safe-area-inset-left));
        grid-template-columns: 1fr;
    }

    .cart-item {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 12px;
        padding: 14px;
    }

    .cart-item-image {
        width: 72px;
        height: 72px;
    }

    .cart-summary,
    .checkout-summary { padding: 18px; }

    .checkout-form { padding: 16px; }

    .checkout-form fieldset { grid-template-columns: 1fr; }
    .checkout-form legend   { font-size: 18px; }

    /* --- Related products --- */
    .related-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /* --- Company page --- */
    .company-page {
        width: calc(100% - 28px);
        margin: 20px auto 48px;
    }

    .company-card   { padding: 20px; border-radius: 18px; }
    .company-fieldset { padding: 16px; }

    .company-form-grid,
    .cnpj-lookup-row { grid-template-columns: 1fr; }

    /* --- Contact page --- */
    .contact-section {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 28px max(14px, env(safe-area-inset-left)) 18px;
    }

    .contact-form,
    .contact-card { padding: 20px; }

    /* --- About / benefits page --- */
    .split-section { grid-template-columns: 1fr; gap: 20px; }

    .benefits-grid-page { grid-template-columns: repeat(2, 1fr); gap: 14px; }

    /* --- Section heading --- */
    .section-heading {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .section-heading h2,
    .content-section h2 { font-size: clamp(26px, 7vw, 34px); }

    /* --- Footer --- */
    .site-footer {
        padding: 36px max(14px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-bottom));
    }

    .footer-grid { grid-template-columns: 1fr; gap: 24px; }

    .copyright {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }

    /* --- Floating cart button --- */
    .floating-cart-checkout {
        right:  max(14px, env(safe-area-inset-right));
        bottom: max(14px, env(safe-area-inset-bottom));
        width:  52px;
        height: 52px;
        min-height: 52px;
    }

    /* --- Breadcrumbs --- */
    .breadcrumbs {
        width: calc(100% - 28px);
        padding-top: 12px;
        font-size: 0.78rem;
    }

    /* --- Page hero (páginas internas) --- */
    .page-hero { padding: 40px max(14px, env(safe-area-inset-left)); }
    .small-hero h1 { font-size: clamp(32px, 8.5vw, 44px); }
    .small-hero p  { font-size: 17px; }

    /* --- Policy grid --- */
    .policy-grid { grid-template-columns: 1fr; gap: 14px; }

    /* --- Admin --- */
    .admin-main {
        width: calc(100% - 24px);
        padding-top: 20px;
    }

    .admin-topbar {
        padding-left:  max(14px, env(safe-area-inset-left));
        padding-right: max(14px, env(safe-area-inset-right));
        min-height: 62px;
    }
}

/*
 * 4. Sub-breakpoint: viewports estreitas (≤ 393 px)
 *    viewports compactas
 */
@media (max-width: 393px) {

    .home-category-card {
        min-height: 185px;
    }

    .home-category-card h3 { font-size: 18px; }
    .home-category-card p  { font-size: 11px; }

    .home-category-card > img { height: 148px; }

    .hero h1 { font-size: clamp(32px, 9vw, 38px); }
    .hero p  { font-size: clamp(14px, 4vw, 16px); }
    .hero-visual { min-height: 250px; }

    .pouch {
        width: 96px;
        height: 176px;
        padding: 36px 10px 10px;
    }

    .pouch-grape { left: 80px; }

    .pouch-mango {
        left: 162px;
        width: 108px;
        height: 196px;
    }

    .catalog-intro h1 { font-size: clamp(26px, 7.5vw, 32px); }

    .catalog-tab {
        font-size: 10px;
        padding: 0 2px;
    }

    .store-card { min-height: 340px; }

    .product-photo,
    .product-photo img {
        height: 108px;
        min-height: 108px;
    }

    .store-image { min-height: 108px; }

    .store-card h3 { font-size: 12px; }
    .store-card p  { font-size: 10px; }
    .details-btn   { font-size: 9px; }

    .image-hero img { height: auto; }

    .hero-tagline {
        font-size: clamp(10px, 3vw, 13px);
        width: 50%;
    }

    .cta-band {
        padding: 145px max(12px, env(safe-area-inset-left)) 18px;
    }

    .cta-fruits { height: 125px; }

    .floating-cart-checkout {
        width:  48px;
        height: 48px;
        min-height: 48px;
        right:  max(12px, env(safe-area-inset-right));
        bottom: max(12px, env(safe-area-inset-bottom));
    }

    .benefits-grid-page { grid-template-columns: 1fr; }
    .related-grid       { grid-template-columns: 1fr; }
    .footer-grid        { gap: 20px; }

    .btn {
        min-height: 44px;
        padding: 0 16px;
        font-size: 14px;
    }
}