/* ============================================================
   MHDCommerce — Responsividade Detalhe do Produto
   Arquivo: wwwroot/css/responsive-produto.css
   Carregar DEPOIS de produto.css
   ============================================================ */

/* ════════════════════════════════════════════
   TABLET — até 1024px
   ════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .breadcrumb-inner { padding-left: 20px; padding-right: 20px; }
    .produto { gap: 32px; padding: 32px; }
    .produto-nome { font-size: 24px; }
}

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

    .breadcrumb-inner { padding: 10px 16px; font-size: 12px; }

    /* Produto vira coluna única */
    .produto {
        grid-template-columns: 1fr; gap: 24px;
        padding: 20px; border-radius: var(--radius-lg);
    }
    .produto-nome { font-size: 22px; }
    .preco-atual { font-size: 30px; }

    /* Botões de ação grudam no rodapé (sticky) */
    .produto-acoes {
        position: sticky; bottom: 0;
        background: var(--white);
        margin: 0 -20px -20px;
        padding: 16px 20px;
        border-top: 1px solid var(--border);
        z-index: 10;
    }

    /* Detalhes 1 coluna */
    .detalhes { padding: 24px 20px; }
    .detalhes-grid { grid-template-columns: 1fr; gap: 0; }

    /* Leve junto: cards menores */
    .leve-junto { margin-top: 28px; }
    .leve-scroll .product-card { width: 160px; }

    /* Modal ocupa mais a tela */
    .desc-modal { max-height: 80vh; }
}

/* ════════════════════════════════════════════
   MOBILE PEQUENO — até 420px
   ════════════════════════════════════════════ */
@media (max-width: 420px) {
    .produto-precos { gap: 8px; }
    .preco-atual { font-size: 26px; }
    .leve-scroll .product-card { width: 150px; }
}