/* ── Microajustes mobile-first (UX, não visual) ──────────────
   Aplica em mobile/tablet (≤1023px):
   - Garante font-size 16px em campos (evita zoom no iOS Safari)
   - Garante área de toque mínima de 44×44 (WCAG 2.5.5)
   - Padding interno suficiente para inputs/selects/textareas
   - Estado disabled visível em botões e CTAs
   Não altera tipografia, paleta ou hierarquia visual existente.
*/

/* Fecha qualquer overflow horizontal indesejado (carrosséis e elementos
   absolute podem estourar a viewport e abrir scroll lateral em mobile). */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Imagens que falharam (placeholder cinza) não devem ocupar o espaço de
   um banner real. Em qualquer viewport, mostra um banner enxuto com altura
   limitada — em mobile, esconde de vez pra não poluir o funil de compra. */
.banner-full.is-fallback,
.banner img.is-fallback,
.banner-full[src*="produto-placeholder"],
.banner img[src*="produto-placeholder"] {
    max-height: 160px;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 768px) {
    .banner-full.is-fallback,
    .banner img.is-fallback,
    .banner-full[src*="produto-placeholder"],
    .banner img[src*="produto-placeholder"] {
        display: none;
    }
}

@media (max-width: 1023px) {
    input,
    select,
    textarea {
        font-size: 16px;
        /* iOS dispara zoom se < 16px */
    }

    /* Pequena folga interna para inputs em mobile não ficarem
       apertados quando combinados com font-size 16px. */
    input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]),
    select,
    textarea {
        padding: 0.65rem 0.75rem;
        box-sizing: border-box;
    }
}

@media (max-width: 768px) {
    button,
    .btn,
    input[type="submit"],
    input[type="button"],
    .quantity-btn,
    .button-frete,
    .button-cupom,
    .button-frete-alterar,
    .btn-excluir,
    .btn-finalizar,
    .btn-cart,
    .btn-buy,
    .btn-confirmar-pedido,
    .add-address,
    .carousel-btn,
    .carousel-arrow,
    .hamburger-btn,
    .favorito-modal-close,
    a.btn {
        min-height: 44px;
        min-width: 44px;
    }

    /* Ícones em botões circulares — apenas garante área externa. */
    .btn-excluir img {
        max-width: 24px;
    }
}

/* Estado disabled visível — antes só ficava marcado no atributo. */
button:disabled,
input:disabled,
input[type="submit"]:disabled,
.btn:disabled,
.btn[disabled],
[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Loading state padrão em CTAs (usado por scripts JS via classe). */
.is-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.75;
}
.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    margin-top: -8px;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: app-spin 0.7s linear infinite;
}

@keyframes app-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .is-loading::after { animation-duration: 1.6s; }
}

/* Esconder elementos com x-cloak antes do Alpine inicializar. */
[x-cloak] { display: none !important; }

/* Resumo do pedido: hierarquia visual leve (não-uppercase em textos longos). */
.pedido .nome-produto .variacao-label,
.pedido .nome-produto .qtd-label,
.pedido .nome-produto .sku-label {
    font-size: 0.85rem;
    line-height: 1.35;
    margin: 0.1rem 0 0;
    color: #4b5563;
}
.pedido .nome-produto .sku-label {
    font-size: 0.75rem;
    color: #9ca3af;
}
.pedido .nome-produto .qtd-label {
    color: #1f1f1f;
    font-weight: 600;
}

/* ── Imagens menores no mobile (privilegia CTA) ────────────── */

@media (max-width: 768px) {
    /* Galeria do PDP: limita altura pra preço/CTA caberem na primeira dobra. */
    .product-gallery .main-image-container,
    .product-gallery .main-image-track,
    .product-gallery .main-image-slide {
        max-height: 50vh;
    }
    .product-gallery .main-image-slide img,
    .product-gallery .main-image {
        max-height: 50vh;
        object-fit: contain;
        width: 100%;
        height: auto;
    }
    .product-gallery .thumbnails-container {
        max-height: 64px;
    }

    /* Foto no carrinho: card mais compacto. */
    .product.cart-list .content-produto .foto,
    .product.cart-list .content-produto .foto-nome img.foto {
        max-width: 72px;
        max-height: 72px;
        object-fit: contain;
    }

    /* Resumo do pedido no checkout: thumbs ainda menores. */
    .pedido .content-pedido .foto-nome img.foto {
        max-width: 56px;
        max-height: 56px;
        object-fit: contain;
    }
}

@media (max-width: 480px) {
    .product-gallery .main-image-container,
    .product-gallery .main-image-track,
    .product-gallery .main-image-slide,
    .product-gallery .main-image-slide img,
    .product-gallery .main-image {
        max-height: 42vh;
    }

    .product.cart-list .content-produto .foto,
    .product.cart-list .content-produto .foto-nome img.foto {
        max-width: 64px;
        max-height: 64px;
    }
}

/* ── PDP: quantidade + CTA empilhados no mobile ────────────── */
@media (max-width: 768px) {
    .product .quantity-selector {
        flex-wrap: wrap;
        gap: 0.75rem;
        align-items: center;
        margin-top: 1.5rem; /* reduz 70px do desktop que era pra o label flutuante */
    }
    /* Esconde o pseudo "Qnt" — usa position:absolute com margin-top:-70px
       que desalinha completamente quando o quantity-selector vira flex-wrap. */
    .product .quantity-selector::before {
        display: none;
    }
    /* Junção visual do `+` com o input não vale a pena em mobile (causa
       sobreposição com a área de toque ampliada). */
    .product .quantity-selector button#increment {
        margin-left: 0;
    }
    .product .quantity-selector .box-btn-carrinho,
    .product .buttons {
        flex-basis: 100%;
        width: 100%;
        max-width: none !important; /* sobrescreve product.css:479 (max-width: 300px) */
    }
    .product .quantity-selector .btn-cart,
    .product .buttons .btn-buy {
        width: 100%;
        white-space: nowrap;
        min-height: 48px;
        padding: 0.7rem 1rem;
    }
}