/* ========================================
   ZERO ONZE — RESPONSIVE
   Streetwear Dark · B&W · Bebas Neue
   ======================================== */

/* ========================================
   TABLET — até 1024px
   ======================================== */
@media screen and (max-width: 1024px) {
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }

    .hero-title { font-size: clamp(4rem, 12vw, 6.5rem); }

    .hero-description { max-width: 100%; }

    .hero-cta { justify-content: center; }

    .hero-promo { align-items: center; }

    .cashback-badge-large { max-width: 300px; }

    .price-cards { max-width: 420px; width: 100%; }

    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }

    .newsletter-content {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .slider-prev { left: 12px; }
    .slider-next { right: 12px; }
}

/* ========================================
   MOBILE — até 768px
   ======================================== */
@media screen and (max-width: 768px) {

    /* ── Header ── */
    /* .nav-menu é o próprio menu mobile no index.html (id="navMenu"),
       controlado via classe .active pelo main.js. Mantemos um único
       sistema de menu (removida a duplicata .mobile-menu do style.css
       que nunca é usada no markup).

       !important necessário: style.css ainda tem, no seu próprio
       @media (max-width:768px), a regra ".nav-menu, .search-container
       { display: none; }" (resquício de uma versão anterior do menu
       mobile). Como esse arquivo carrega DEPOIS do responsive.css e
       nenhuma regra aqui redefinia "display" para o .nav-menu base
       (só a posição/layout), esse "display:none" do style.css sempre
       vencia — o menu mobile nunca aparecia, mesmo com a classe
       .active aplicada pelo JS. O !important resolve isso na raiz. */
    .nav-menu {
        display: flex !important;
        position: fixed;
        top: 80px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 80px);
        background: var(--black);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 1.5rem 1.5rem 2rem;
        gap: 0;
        transition: left .35s cubic-bezier(.22,1,.36,1);
        z-index: 999;
        border-top: 1px solid var(--border);
        overflow-y: auto;
    }

    .nav-menu.active { left: 0; }

    .nav-menu li { width: 100%; }

    .nav-menu li a {
        font-family: var(--font-display);
        font-size: 2.4rem;
        letter-spacing: 3px;
        color: rgba(245,245,240,0.35);
        padding: 0.85rem 0;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: color .25s ease, padding-left .25s ease;
    }

    .nav-menu li a::before {
        content: '';
        opacity: 0;
    }

    .nav-menu li a:active,
    .nav-menu li a:hover {
        color: var(--white);
        padding-left: .35rem;
    }

    .nav-menu li a::after { display: none; }

    /* Indicador de seta — reforça affordance de navegação,
       no mesmo espírito visual dos ícones do header */
    .nav-menu li a::after {
        content: '\2192';
        display: inline-block;
        opacity: .25;
        font-family: var(--font-body);
        font-size: 1.2rem;
        transform: none;
        position: static;
        width: auto;
        height: auto;
        background: none;
        transition: opacity .25s ease, transform .25s ease;
    }
    .nav-menu li a:hover::after,
    .nav-menu li a:active::after {
        opacity: .8;
        transform: translateX(4px);
    }

    /* Rodapé do menu mobile — mantém a identidade de marca presente
       mesmo na tela cheia do menu (em vez de ficar só texto solto) */
    .nav-menu::after {
        content: 'ZERO ONZE CO';
        display: block;
        margin-top: 1.5rem;
        font-family: var(--font-ui);
        font-size: .68rem;
        letter-spacing: 4px;
        color: rgba(245,245,240,0.18);
        text-transform: uppercase;
    }

    .hamburger { display: flex; }

    /* ── Busca ── */
    /* .search-input tem largura fixa de 210px (style.css) e vive dentro de
       .nav-icons (flex, sem wrap). Ao abrir a busca no mobile, essa largura
       fixa inline empurrava os outros ícones (wishlist/carrinho/hamburger)
       pra fora da tela e forçava scroll horizontal na página inteira.
       Convertendo para um dropdown de largura total abaixo do header
       (mesmo top:80px usado pelo .nav-menu), sem tocar na lógica do JS —
       que só alterna a classe .active. */
    .search-container.active {
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        width: 100%;
        padding: 0.75rem 1rem;
        background: var(--black);
        border-bottom: 1px solid var(--border);
        z-index: 998;
    }

    .search-input { width: 100%; }

    .hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.active span:nth-child(2) { opacity: 0; }
    .hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* ── Hero ── */
    /* min-height aqui é só um valor de "segurança" para o instante antes
       do JS (setupHeroSlider → syncHeight) calcular e aplicar a altura
       exata do slide ativo via style.height inline. Depois que o JS roda,
       esse min-height deixa de ter efeito prático (a altura real, maior
       ou igual, é quem manda). Sem o JS rodando (ex: JS desabilitado),
       este valor evita que o hero colapse para 0px. */
    .hero-slider {
        height: auto;
        min-height: 420px;
        /* O style.css ainda tem, no seu próprio @media 768px, a regra
           ".hero-slider { padding: 3rem 0; }" (resquício de versão antiga).
           Zeramos aqui para não somar um padding duplicado ao container —
           o respiro vertical já é dado pelo padding do .hero-slide. */
        padding: 0;
        transition: height .4s ease;
        overflow: hidden;
    }

    .hero-slide {
        /* !important aqui é deliberado e necessário: o style.css ainda tem,
           dentro do seu próprio @media (max-width:768px), a regra antiga
           ".hero-slide { position: relative; }" (resquício de uma versão
           anterior do responsivo). Como as duas regras têm exatamente a
           mesma especificidade e o mesmo media query, qual delas "vence"
           passa a depender só da ordem de carregamento dos arquivos — uma
           base frágil para algo crítico como o empilhamento do carrossel.
           O !important remove essa ambiguidade de uma vez. O ideal é
           também apagar a regra antiga no style.css (ver instruções), mas
           com o !important aqui o carrossel funciona independentemente
           disso. */
        position: absolute !important;
        padding: 3rem 0 2.5rem;
        display: flex;
        align-items: flex-start;
    }

    /* Remove o número decorativo no mobile (some no fundo de qualquer forma) */
    .hero-slide::after { display: none; }

    .hero-content {
        text-align: left;
        gap: 1.75rem;
    }

    .hero-badge { margin-left: auto; margin-right: auto; }
    .hero-badge,
    .hero-title,
    .hero-description,
    .hero-stock {
        text-align: center;
    }

    .hero-title {
        font-size: clamp(3.2rem, 14vw, 5rem);
        line-height: 0.95;
        letter-spacing: 0;
    }
    .hero-subtitle { font-size: 0.72rem; text-align: center; letter-spacing: 4px; }
    .hero-description {
        font-size: 0.88rem;
        margin: 0 auto 0.75rem;
    }
    .hero-stock { text-align: center; margin-bottom: 1.25rem; }

    .hero-cta {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        justify-content: center;
        padding: 0.85rem;
    }

    /* Painel de promoção: antes era display:none no mobile, escondendo
       o cashback badge e os price-cards — peças fortes da identidade
       visual. Agora ele aparece abaixo do texto, empilhado e centralizado,
       igual ao conteúdo do desktop, só reorganizado para a largura estreita. */
    .hero-promo {
        display: flex;
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
    }

    .cashback-badge-large { width: 100%; justify-content: center; }

    .price-cards { width: 100%; }

    .price-card { padding: 0.65rem 0.9rem; }
    .price-value { font-size: 1.65rem; }

    .slider-nav {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .slider-prev { left: 8px; }
    .slider-next { right: 8px; }

    .slider-indicators { bottom: 10px; }

    /* ── Produtos ── */
    .products-section { padding: 3rem 0; }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .header-actions { width: 100%; justify-content: space-between; }

    .section-title { font-size: clamp(1.8rem, 8vw, 2.5rem); }

    .filters-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.85rem;
        padding: 0.85rem 1rem;
    }

    .category-filters {
        /* O .category-filters herda "flex: 1" do desktop (style.css), que
           dentro de um pai column (.filters-bar no mobile) não garante
           largura total — só prioridade no eixo vertical. Sem largura
           garantida, os botões em nowrap extrapolavam o card e ficavam
           cortados sem nenhum scroll funcional. Anulamos o flex herdado,
           forçamos largura total e deixamos quebrar em quantas linhas
           forem necessárias, sem depender de scroll horizontal. */
        flex: 1 1 100%;
        width: 100%;
        flex-wrap: wrap;
        overflow-x: visible;
    }

    .filter-btn {
        white-space: nowrap;
        font-size: 0.75rem;
        padding: 0.4rem 0.85rem;
        flex: 0 1 auto;
    }

    .advanced-filters {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .filter-select {
        flex: 1;
        min-width: 0;
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.85rem;
    }

    .product-image { height: 280px; }

    .product-name {
        font-size: 0.82rem;
        min-height: auto;
    }

    .price-current { font-size: 1.4rem; }

    /* No mobile o cashback-info pode quebrar feio em 2 colunas estreitas;
       reduzimos a fonte um pouco em vez de escondê-lo, pra manter a
       informação visível (ela existe no desktop também). */
    .cashback-info { font-size: 0.6rem; padding: 2px 6px; }

    .btn-add-cart {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }

    /* ── Logo ── */
    .logo-image { height: 44px !important; }

    /* ── Newsletter ── */
    .newsletter-form { flex-direction: column; }
    .newsletter-form input { border-right: 1px solid var(--border); border-radius: 2px; }
    .newsletter-form button { width: 100%; border-radius: 2px; }

    /* ── About ── */
    .about-section h3 { font-size: 1.8rem; letter-spacing: 3px; }
    .about-section p  { font-size: 0.9rem; }

    /* ── Carrinho gaveta ── */
    .cart-modal { width: 100%; max-width: 100%; }

    /* ── Quick View ── */
    .quick-view-content {
        width: 94%;
        height: auto;
        max-height: 94vh;
    }

    .quick-view-body {
        grid-template-columns: 1fr;
        padding: 0.9rem;
        gap: 0.8rem;
        overflow-y: auto;
    }
    .quick-view-image {
        height: 300px;
        min-height: 0;
    }

    .qv-info-col {
        overflow: visible;
    }

    .qv-header {
        padding: 1rem 1rem 0.8rem;
    }

    .qv-body {
        padding: 0.8rem 1rem;
        gap: 0.7rem;
    }

    .qv-footer {
        padding: 0.8rem 1rem;
    }

    /* ── Checkout ── */
    .checkout-content { height: 96vh; max-height: 96vh; }

    .checkout-steps { padding: 0.55rem 0.75rem; }
    .step-label { display: none; }

    .checkout-body { padding: 1rem; }

    .checkout-step h2 { font-size: 1.5rem; letter-spacing: 2px; }

    .payment-methods { grid-template-columns: 1fr 1fr; }

    .form-row { flex-direction: column; gap: 0.5rem; }

    .shipping-option { padding: 0.5rem; }

    /* Áreas de toque maiores nos controles de quantidade do carrinho,
       sem alterar a aparência (mesma estética, só hit-area maior) */
    .qty-btn { width: 32px; height: 32px; }

    /* Guia de medidas: empilha imagem e texto já a partir do tablet
       (aqui sim com rolagem, pois empilhado não cabe tudo na tela) */
    .size-guide-content {
        max-width: 96%;
        height: auto;
        max-height: 94vh;
    }

    .size-guide-panel {
        grid-template-columns: 1fr;
        height: auto;
        max-height: 94vh;
        overflow-y: auto;
    }

    .size-guide-image-col {
        height: auto;
        overflow: visible;
        padding: 1.25rem 1.25rem 0;
    }

    .size-guide-image {
        max-height: 55vh;
    }

    .size-guide-text-col {
        height: auto;
        overflow: visible;
        justify-content: flex-start;
        padding: 1.5rem 1.5rem 2.25rem;
        border-left: none;
        border-top: 1px solid rgba(255,255,255,0.08);
    }

    .sg-heading h3 { font-size: 1.3rem; }

    .size-guide-close {
        top: 0.75rem;
        right: 0.75rem;
    }

    /* Badges dos cards de produto — menores no mobile */
    .product-badges {
        top: 6px; left: 6px;
        gap: 2px;
    }

    .badge-new, .badge-discount, .badge-bestseller, .badge-low-stock {
        padding: 1px 5px;
        font-size: 0.5rem;
        letter-spacing: 0.5px;
    }
}

/* ========================================
   MOBILE PEQUENO — até 480px
   ======================================== */
@media screen and (max-width: 480px) {
    .navbar { padding: 0 1rem; }

    .logo-image { height: 38px !important; }

    .nav-icons { gap: 0; }

    .icon-btn { width: 34px; height: 34px; font-size: 0.95rem; }

    .hero-title { font-size: clamp(2.7rem, 16vw, 4.2rem); }

    .hero-promo { max-width: 100%; }

    .price-card { padding: 0.55rem 0.8rem; }
    .price-value { font-size: 1.5rem; }

    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }

    .product-badges {
        top: 5px; left: 5px;
        gap: 2px;
    }

    .badge-new, .badge-discount, .badge-bestseller, .badge-low-stock {
        padding: 1px 4px;
        font-size: 0.44rem;
        letter-spacing: 0.3px;
    }

    .product-image { height: 240px; }

    .social-icons a { width: 38px; height: 38px; font-size: 0.95rem; }

    .price-cards { max-width: 100%; }

    .section-title { font-size: 1.8rem; }

    .quick-view-content {
        width: 96%;
        max-height: 96vh;
    }

    .quick-view-image { height: 230px; }

    .qv-name { font-size: 1.5rem; }
    .qv-description { font-size: 0.82rem; line-height: 1.5; }
    .qv-size-btn { padding: 0.55rem 0; }
    .qv-size-guide-btn { margin-top: 0.4rem; padding: 0.55rem 0.75rem; }
    .qv-btn-cart { padding: 0.75rem; }
    .qv-btn-wish, .qv-btn-checkout { padding: 0.55rem; }

    .checkout-steps { gap: 0; }

    .step-number { width: 24px; height: 24px; font-size: 0.78rem; }

    /* No checkout, form em coluna sempre */
    .form-group { flex: 1 1 100%; }

    /* Guia de medidas: pequenos ajustes de padding no celular
       (o empilhamento em si já acontece a partir de 768px) */
    .size-guide-content { max-width: 100%; }
    .size-guide-text-col { padding: 1.5rem 1.25rem 2rem; }
    .sg-heading h3 { font-size: 1.15rem; }
}

/* ========================================
   ANIMAÇÕES DE ENTRADA
   ======================================== */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

.product-card { animation: fadeUp 0.45s ease both; }

/* Stagger nos cards via nth-child */
.product-card:nth-child(1)  { animation-delay: 0.05s; }
.product-card:nth-child(2)  { animation-delay: 0.10s; }
.product-card:nth-child(3)  { animation-delay: 0.15s; }
.product-card:nth-child(4)  { animation-delay: 0.20s; }
.product-card:nth-child(5)  { animation-delay: 0.25s; }
.product-card:nth-child(6)  { animation-delay: 0.30s; }

/* ========================================
   UTILITÁRIOS
   ======================================== */
.hidden         { display: none !important; }
.text-center    { text-align: center; }
.flex-center    { display: flex; align-items: center; justify-content: center; }

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem;   }
.mt-3 { margin-top: 2rem;   }

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem;   }
.mb-3 { margin-bottom: 2rem;   }

/* ── Scrollbar global ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #555; }