/* ============================================
   ALVESTE — Camada DESKTOP (>= 1024px)
   Mesma loja e o MESMO DOM da versão mobile. Só reformata a UI/UX para telas
   grandes via media query (+ :has()). Nenhuma mudança de funcionalidade — o JS
   (home-*.js) não é tocado. Carregado DEPOIS de home.css para sobrepor.
   ============================================ */
@media (min-width: 1024px) {

    :root { --header-height: 72px; --dk-max: 1520px; --dk-pad: 48px; }

    body { overflow-x: hidden; }

    /* ---------- Barra superior: logo à esquerda, ícones à direita (só ícones) ---------- */
    .header {
        background: var(--secondary-color);
        border-bottom: 1px solid var(--border-color);
        height: var(--header-height);
        box-shadow: none;
    }
    .header .logo { color: var(--primary-color); text-shadow: none; letter-spacing: 3px; font-size: 22px; }
    .header .logo img { filter: none; }
    .header-content {
        justify-content: flex-start;
        max-width: var(--dk-max);
        margin: 0 auto;
        padding: 0 var(--dk-pad);
    }

    /* A navegação (inferior no mobile) vira uma linha de ícones à direita, alinhada
       ao mesmo container do header. Sem rótulos, sem "pílulas", sem movimento. */
    .mobile-nav {
        top: 0; bottom: auto; left: 0; right: 0;
        height: var(--header-height);
        max-width: var(--dk-max);
        margin: 0 auto;
        justify-content: flex-end;
        align-items: center;
        gap: 26px;
        padding: 0 var(--dk-pad);
        background: transparent;
        z-index: 101;
        pointer-events: none;   /* deixa passar o clique para a logo do header */
    }
    .mobile-nav::before { display: none; }
    .nav-center-wrapper { display: none; }

    .nav-item {
        position: relative;
        pointer-events: auto;   /* só os ícones capturam clique */
        flex: 0 0 auto;
        flex-direction: row;
        width: auto; height: auto; min-width: 0;
        padding: 0; gap: 0;
        border-radius: 0;
        background: none;
        color: var(--text-primary);
        transition: opacity 0.15s ease;
    }
    .nav-item span { display: none; }                 /* só ícone no desktop */
    .nav-item svg { width: 23px; height: 23px; }
    .nav-item:hover { background: none; opacity: 0.5; }
    .nav-item.active { background: none; color: var(--text-primary); opacity: 1; }
    .nav-item .badge {
        top: -7px; right: -9px;
        min-width: 17px; height: 17px; font-size: 10px;
    }

    /* ---------- Conteúdo ---------- */
    .main-content {
        margin-top: var(--header-height);
        margin-bottom: 0;
        min-height: calc(100vh - var(--header-height));
        max-width: var(--dk-max);
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 72px;
    }
    .page-home > section:not(:first-child) { padding: 0 var(--dk-pad); }
    .page-home > section.banner { padding: 0; }
    .section-title { padding: 0 var(--dk-pad); }

    /* ---------- Grade: mais larga, cards limpos (sem "pulo" no hover) ---------- */
    .product-grid { padding: 0 var(--dk-pad); gap: 22px; }
    .product-card { border-radius: 0; }
    .product-image { overflow: hidden; }
    /* botão "+" aparece no hover só com opacidade — nenhum movimento no card/imagem */
    .btn-add-cart { opacity: 0; transition: opacity 0.18s ease; }
    .product-card:hover .btn-add-cart { opacity: 1; }

    /* ---------- Página de produto / kit / conjunto: 2 colunas ---------- */
    .produto-page {
        max-width: var(--dk-max);
        padding: 12px var(--dk-pad) 90px;
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
        column-gap: 64px;
        align-items: start;
    }
    /* O desktop já tem carrinho no topo → esconde o carrinho próprio da página */
    .produto-cart, .produto-cart-btn { display: none; }
    /* As abas de scroll-spy são padrão mobile; no desktop o conteúdo já fica todo visível */
    .produto-tabs { display: none; }
    .produto-sticky { margin-bottom: 0; }
    .produto-page > * { grid-column: 2; min-width: 0; }
    .produto-page > .produto-sticky,
    .produto-page > .produto-topbar,
    .produto-page > .produto-header-mobile {
        grid-column: 1 / -1;
        position: static;
        margin: 0 0 6px;
    }
    .produto-page > .produto-galeria {
        grid-column: 1;
        grid-row: 2 / span 999;
        position: sticky;
        top: calc(var(--header-height) + 16px);
        align-self: start;
        margin: 0;
    }
    /* Galeria: coluna vertical de imagens (sem scroll horizontal) */
    .produto-galeria {
        flex-direction: column;
        overflow: visible;
        scroll-snap-type: none;
        gap: 12px;
    }
    .produto-galeria .product-image-modal {
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 4;
    }
    /* Produto sem imagens → volta a coluna única e mais estreita */
    .produto-page:not(:has(.produto-galeria)) {
        display: block;
        max-width: 680px;
    }

    /* Rodapé de "Adicionar ao carrinho" (kit/conjunto): não fixo no desktop, integrado ao conteúdo */
    .cart-summary-produto {
        position: static !important;
        transform: none !important;
        left: auto !important;
        bottom: auto !important;
        width: 100%;
        max-width: 600px;
        margin: 32px auto 0;
        border: 1px solid var(--border-color);
        border-radius: 12px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        padding: 20px 24px;
    }
    
    /* Desktop: esconde o footer fixo mobile, mostra o inline */
    .cart-summary-mobile {
        display: none !important;
    }
    
    .cart-summary-inline {
        display: block;
        margin-top: 24px;
        padding-top: 20px;
        border-top: 1px solid var(--border-color);
    }
    
    /* Galeria: duas imagens grandes lado a lado + setas prev/next. */
    .produto-galeria {
        display: block;
        position: sticky;
        top: calc(var(--header-height) + 16px);
        max-height: calc(100vh - var(--header-height) - 96px);
    }
    .produto-galeria .galeria-slots {
        display: flex;
        flex-direction: row;
        gap: 12px;
        align-items: flex-start;
        justify-content: center;
        max-height: calc(100vh - var(--header-height) - 96px);
    }
    .produto-galeria .galeria-slots .galeria-main {
        flex: 1 1 0;
        min-width: 0;
        aspect-ratio: 3 / 4;
        max-height: calc(100vh - var(--header-height) - 96px);
        margin: 0;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid var(--border-color);
        background: var(--background-secondary);
        position: relative;
    }
    .produto-galeria .galeria-slots .galeria-main img,
    .produto-galeria .galeria-slots .galeria-main video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .produto-galeria .galeria-slots .galeria-main img.galeria-main-img {
        transition: transform .2s ease;
        transform-origin: center center;
        will-change: transform;
    }
    .produto-galeria .galeria-slots .galeria-main.galeria-main-video { cursor: default; }

    .produto-galeria .galeria-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: none;
        background: rgba(255, 255, 255, 0.9);
        color: #111;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
        transition: opacity .15s;
    }
    .produto-galeria .galeria-nav svg { width: 22px; height: 22px; }
    .produto-galeria .galeria-prev { left: 10px; }
    .produto-galeria .galeria-next { right: 10px; }
    .produto-galeria .galeria-nav:disabled { opacity: 0; pointer-events: none; }

    /* ---------- Carrinho: itens (largo) + resumo lateral ---------- */
    .main-content:has(> .cart-page) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 400px;
        gap: 56px;
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
        align-items: start;
        padding: 44px var(--dk-pad) 90px;
    }
    .cart-page { padding: 0; }
    .cart-page .section-title { font-size: 26px; margin: 0 0 26px; padding: 0; }

    /* Itens em linhas amplas separadas por divisória (visual de checkout de moda) */
    .main-content:has(> .cart-page) .cart-item {
        padding: 22px 0;
        gap: 22px;
        border: none;
        border-bottom: 1px solid var(--border-color);
        border-radius: 0;
        margin: 0;
        align-items: flex-start;
    }
    .main-content:has(> .cart-page) .cart-item-image { width: 120px; height: 150px; border-radius: 4px; }
    .main-content:has(> .cart-page) .cart-item-bundle { align-items: flex-start; }
    .main-content:has(> .cart-page) .cart-item-name { font-size: 15px; }

    /* Resumo grudado no alto da coluna direita, estilo cartão */
    .main-content:has(> .cart-page) .cart-summary {
        position: sticky;
        top: calc(var(--header-height) + 28px);
        bottom: auto; left: auto; right: auto;
        border: 1px solid var(--border-color);
        border-radius: 16px;
        padding: 24px;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.07);
    }
    .main-content:has(> .cart-page) .cart-summary .btn-checkout { margin-top: 6px; }

    /* ---------- Checkout: coluna central, barra de ação no fluxo (sem faixa preta full-width) ---------- */
    .main-content:has(> .checkout-page) {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 8px 24px 56px;
    }
    .main-content:has(> .checkout-page) > .checkout-page {
        width: 100%;
        max-width: 760px;
        margin: 0;
        padding: 12px 0 20px;
    }
    /* A barra de "Continuar/Pagar" deixa de ser fixa full-width e vira um cartão no fim da coluna */
    .main-content:has(> .checkout-page) > .cart-summary {
        position: static;
        width: 100%;
        max-width: 760px;
        left: auto; right: auto; bottom: auto;
        margin: 0 auto;
        border: 1px solid var(--border-color);
        border-radius: 16px;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.07);
    }
    /* Seções do checkout com um respiro maior */
    .checkout-section { padding: 24px; }

    /* ---------- Checkout em página única: produto à esquerda, formulário à direita ---------- */
    .main-content:has(> .checkout2) { padding: 28px var(--dk-pad) 80px; }
    .checkout2 {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 460px;
        gap: 56px;
        align-items: start;
        max-width: 1300px;
        margin: 0 auto;
        padding: 0;
    }
    .checkout2-itens .section-title { font-size: 24px; }
    .checkout2-form { min-width: 0; }
    .checkout2-resumo {
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.07);
    }

    /* ---------- Busca / perfil: largura confortável ---------- */
    .search-page, .perfil-page { max-width: 1120px; margin: 0 auto; }

    /* ---------- Modal (adicionar ao carrinho) como diálogo central ---------- */
    .modal-overlay { align-items: center; }
    .modal-content {
        border-radius: 16px;
        max-width: 460px;
        max-height: 86vh;
        animation: none;
    }
    .modal-overlay.closing .modal-content { animation: fadeOut 0.2s ease forwards; }

    /* ---------- Sheet de dados cadastrais como diálogo central ---------- */
    .dados-overlay { align-items: center; justify-content: center; }
    .dados-sheet {
        border-radius: 16px;
        transform: translateY(16px) scale(0.98);
        opacity: 0;
        transition: transform 0.22s ease, opacity 0.22s ease;
    }
    .dados-overlay.open .dados-sheet { transform: translateY(0) scale(1); opacity: 1; }

    /* ---------- Sheet de pedidos/avaliação como diálogo central ---------- */
    .ped-sheet-content {
        left: 50%; right: auto; bottom: auto; top: 50%;
        width: min(560px, 92vw);
        max-height: 84vh;
        border-radius: 18px;
        transform: translate(-50%, -46%);
        opacity: 0;
    }
    .ped-sheet.active .ped-sheet-content { transform: translate(-50%, -50%); opacity: 1; }
    .ped-sheet-handle { display: none; }

    /* ---------- Ponteiro/hover geral ---------- */
    .product-card, .nav-item, .menu-link, button, .produto-variacoes-row { cursor: pointer; }
    .btn-checkout:hover, .btn-add-to-cart:not(:disabled):hover { opacity: 0.92; }
}