/* ===== PÁGINA DE PRODUTO ÚNICO ===== */

.pagina-produto {
    margin-top: 64px;
}

/* --- Layout principal do produto --- */

.produto-principal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--espaco-4xl);
    align-items: stretch;
    padding-top: var(--espaco-4xl);
    padding-bottom: var(--espaco-3xl);
}

/* --- Galeria --- */

.produto-principal__galeria {
    position: sticky;
    top: calc(64px + var(--espaco-xl));
}

.produto-principal__imagem-wrap {
    aspect-ratio: 1/1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.5);
    background-color: #ffffff;
}

.produto-principal__imagem {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* --- Detalhes do produto --- */

.produto-principal__detalhes {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--espaco-md);
}

.produto-principal__nome {
    font-family: var(--fonte-serif);
    font-size: var(--texto-3xl);
    font-weight: 300;
    line-height: 1.1;
    color: var(--cor-quase-preto);
}

.produto-principal__volume {
    display: block;
    font-family: var(--fonte-serif);
    font-style: italic;
    font-size: var(--texto-2xl);
    font-weight: 300;
    color: var(--cor-quase-preto);
    margin-top: 0;
    letter-spacing: 0;
    text-transform: none;
}

.produto-principal__pagamento {
    font-family: var(--fonte-sans);
    font-size: var(--texto-sm);
    font-weight: 300;
    color: #6D8871;
    line-height: 1.5;
    margin: 0;
}

.produto-principal__pagamento strong {
    font-weight: 500;
}

.produto-principal__estoque-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    height: 48px;
    padding: 0 var(--espaco-md);
    border: 1px solid var(--cor-quase-preto);
    font-family: var(--fonte-sans);
    font-size: var(--texto-sm);
    font-weight: 400;
    color: var(--cor-quase-preto);
}

.produto-principal__preco {
    font-family: var(--fonte-sans);
    font-size: var(--texto-xl);
    font-weight: 300;
    color: var(--cor-quase-preto);
}

.produto-principal__preco del {
    color: #aaa;
    font-size: var(--texto-base);
    margin-right: var(--espaco-sm);
}

.produto-principal__preco ins {
    text-decoration: none;
    color: var(--cor-borgonha);
}

.produto-principal__tipo {
    font-size: var(--texto-xs);
    font-weight: 300;
    color: #888;
    letter-spacing: 0.05em;
    font-family: var(--fonte-sans);
}

.produto-principal__descricao {
    font-size: var(--texto-xs);
    font-weight: 300;
    line-height: 1.7;
    color: #555;
}

.produto-principal__descricao p {
    font-size: var(--texto-xs);
    font-weight: 300;
    line-height: 1.7;
    color: #555;
    margin: 0;
}

/* Estoque + botão COMPRAR */
.produto-principal__acao {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-sm);
    margin-top: var(--espaco-md);
}

.produto-principal__acao-linha {
    display: flex;
    align-items: center;
    gap: var(--espaco-md);
}

.produto-principal__estoque {
    font-family: var(--fonte-sans);
    font-size: var(--texto-sm);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--cor-quase-preto);
    margin: 0;
}

.em-estoque {
    color: var(--cor-quase-preto);
}

.sem-estoque {
    color: #c00;
}

.produto-principal__comprar {
    display: inline-block;
    padding: 0.9rem 2.5rem;
    font-family: var(--fonte-sans);
    font-size: var(--texto-xs);
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-align: center;
    color: var(--gdg-preto);
    background-color: transparent;
    border: 1px solid var(--gdg-preto);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--transicao-base), color var(--transicao-base), border-color var(--transicao-base);
}

.produto-principal__comprar:hover {
    background-color: var(--gdg-verde);
    border-color: var(--gdg-verde);
    color: var(--gdg-branco);
}

/* --- WooCommerce: botão adicionar ao carrinho --- */

.produto-principal__detalhes .woocommerce-variation-add-to-cart,
.produto-principal__detalhes form.cart {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-md);
}

.produto-principal__detalhes .quantity {
    display: flex;
    align-items: center;
    border: 1px solid rgba(0,0,0,0.15);
    width: fit-content;
}

.produto-principal__detalhes .qty {
    width: 48px;
    height: 48px;
    border: none;
    text-align: center;
    font-family: var(--fonte-sans);
    font-size: var(--texto-sm);
    color: var(--cor-quase-preto);
    background: transparent;
}

.produto-principal__detalhes .single_add_to_cart_button,
.produto-principal__detalhes .button {
    display: block;
    width: 100%;
    padding: 1rem 2rem;
    font-family: var(--fonte-sans);
    font-size: var(--texto-xs);
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-align: center;
    color: var(--cor-branco);
    background-color: var(--cor-quase-preto);
    border: 1px solid var(--cor-quase-preto);
    cursor: pointer;
    transition: background-color var(--transicao-base), color var(--transicao-base);
}

.produto-principal__detalhes .single_add_to_cart_button:hover {
    background-color: transparent;
    color: var(--cor-quase-preto);
}

/* Frete */
.produto-principal__frete {
    font-family: var(--fonte-sans);
    font-size: var(--texto-xs);
    font-weight: 300;
    color: #888;
    letter-spacing: 0.05em;
    text-align: center;
}

/* --- Seção info (Atributos + Acordeão em 2 colunas) --- */

.produto-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--espaco-4xl);
    padding-top: var(--espaco-2xl);
    padding-bottom: var(--espaco-3xl);
    align-items: start;
}

/* --- Atributos / Diferenciais (coluna esquerda, lista vertical) --- */

.produto-atributos {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-2xl);
}

.produto-atributos__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--espaco-xl);
}

.produto-atributos__icone {
    color: black;
    flex-shrink: 0;
}

.produto-atributos__icone svg,
.produto-atributos__icone img {
    width: 64px;
    height: 64px;
}

.produto-atributos__texto {
    font-family: var(--fonte-sans);
    font-size: var(--texto-lg);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--cor-quase-preto);
    line-height: 1.5;
    margin: 0;
}

/* --- Acordeão (coluna direita) --- */

.produto-acordeao {
    display: flex;
    flex-direction: column;
}

/* Reuse accordion-item de global.css com sobrescrita de fonte */
.produto-acordeao .accordion-item__gatilho {
    font-family: var(--fonte-serif);
    font-size: var(--texto-lg);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    border-top: 1px solid black;
    padding: 1.5rem 0;
}

.produto-acordeao .accordion-item__gatilho .icone-seta {
    width: 20px;
    height: 20px;
}

.produto-acordeao .accordion-item.ativo .accordion-item__gatilho {
    font-weight: 700;
}

.produto-acordeao .accordion-item__texto {
    font-size: var(--texto-sm);
    line-height: 1.9;
    color: #555;
}

.produto-acordeao .accordion-item__texto p {
    font-size: var(--texto-xs);
    line-height: 1.9;
    color: #555;
    margin-bottom: var(--espaco-sm);
}

/* --- Produtos relacionados --- */

.produto-relacionados {
    padding: var(--espaco-3xl) var(--espaco-xl) var(--espaco-4xl);
    border-top: 1px solid rgba(0,0,0,0.08);
    width: 100%;
}

/* Header com título + setas: escondido no desktop */
.produto-relacionados__header {
    display: none;
}

.produto-relacionados__titulo {
    font-family: var(--fonte-serif);
    font-size: var(--texto-2xl);
    font-weight: 300;
    margin-bottom: var(--espaco-2xl);
    color: var(--cor-quase-preto);
}

.produto-relacionados__grade {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--espaco-2xl);
}

.produto-relacionados__card {
    display: flex;
    flex-direction: column;
}

.produto-relacionados__imagem-link {
    display: flex;
    aspect-ratio: 1/1;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    background: transparent;
    padding: var(--espaco-xl);
    transition: opacity var(--transicao-base);
}

.produto-relacionados__imagem-link:hover {
    opacity: 0.9;
}

.produto-relacionados__imagem {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform var(--transicao-lenta);
}

.produto-relacionados__imagem-link:hover .produto-relacionados__imagem {
    transform: scale(1.04);
}

.produto-relacionados__info {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-xs);
    padding-top: var(--espaco-md);
    border-top: 1px solid var(--cor-quase-preto);
    margin-top: var(--espaco-md);
}

.produto-relacionados__linha {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--espaco-md);
}

.produto-relacionados__nome a {
    font-family: var(--fonte-sans);
    font-size: var(--texto-xs);
    font-weight: 600;
    color: var(--cor-quase-preto);
}

.produto-relacionados__subtitulo {
    font-family: var(--fonte-sans);
    font-size: var(--texto-xs);
    font-weight: 400;
    color: var(--cor-quase-preto);
    line-height: 1.5;
    margin: 0;
    flex: 1;
}

.produto-relacionados__preco {
    font-family: var(--fonte-sans);
    font-size: var(--texto-xs);
    color: var(--cor-quase-preto);
    white-space: nowrap;
}

.produto-relacionados__link-comprar {
    font-family: var(--fonte-sans);
    font-size: var(--texto-xs);
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--cor-quase-preto);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transicao-base), font-weight var(--transicao-base);
}

.produto-relacionados__link-comprar:hover {
    color: var(--gdg-verde);
    font-weight: 700;
}

/* ===== RESPONSIVO ===== */

@media (max-width: 1024px) {
    .produto-atributos__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .produto-relacionados__grade {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .produto-principal {
        grid-template-columns: 1fr;
        padding-top: var(--espaco-2xl);
        gap: var(--espaco-lg);
    }

    .produto-principal__galeria {
        position: static;
    }

    /* Título + volume menores */
    .produto-principal__nome {
        font-size: 1.5rem;
    }

    .produto-principal__volume {
        font-size: 1rem;
    }

    /* Texto de pagamento */
    .produto-principal__pagamento {
        font-size: 0.75rem;
        line-height: 1.5;
    }

    /* Estoque (etiqueta) */
    .produto-principal__estoque {
        font-size: 0.75rem;
    }

    /* Reordena: ação (botões) antes do tipo + descrição */
    .produto-principal__nome      { order: 1; }
    .produto-principal__pagamento { order: 2; }
    .produto-principal__acao      { order: 3; }
    .produto-principal__tipo      { order: 4; }
    .produto-principal__descricao { order: 5; }

    /* Linha quantidade + COMPRAR lado a lado */
    .produto-principal__acao-linha {
        flex-direction: row;
        align-items: center;
        gap: var(--espaco-sm);
    }

    .produto-principal__estoque-box {
        min-width: 56px;
        height: 44px;
        font-size: 0.875rem;
    }

    .produto-principal__comprar {
        flex: 1;
        padding: 0.75rem 1rem;
        font-size: 0.75rem;
    }

    /* Descrição curta */
    .produto-principal__descricao,
    .produto-principal__descricao p {
        font-size: 0.75rem;
        line-height: 1.6;
    }

    /* Tipo do produto */
    .produto-principal__tipo {
        font-size: 0.7rem;
    }

    /* Reordena: acordeão antes dos atributos */
    .produto-info {
        grid-template-columns: 1fr;
        gap: var(--espaco-xl);
    }

    .produto-acordeao {
        order: 1;
    }

    .produto-atributos {
        order: 2;
    }

    /* Atributos / Diferenciais: fontes e ícones menores */
    .produto-atributos {
        gap: var(--espaco-lg);
    }

    .produto-atributos__item {
        gap: var(--espaco-md);
    }

    .produto-atributos__icone svg,
    .produto-atributos__icone img {
        width: 36px;
        height: 36px;
    }

    .produto-atributos__texto {
        font-size: 0.75rem;
        line-height: 1.4;
    }

    /* Acordeão: fontes menores */
    .produto-acordeao .accordion-item__gatilho {
        font-size: 0.9375rem;
        padding: 1rem 0;
    }

    .produto-acordeao .accordion-item__texto {
        font-size: 0.75rem;
    }

    .produto-acordeao .accordion-item__texto p {
        font-size: 0.75rem;
    }

    /* ===== OUTROS PRODUTOS (carrossel mobile) ===== */

    .produto-relacionados {
        padding: var(--espaco-xl) 0 var(--espaco-2xl);
    }

    /* Mostra header com título + setas */
    .produto-relacionados__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 1.25rem;
        margin-bottom: var(--espaco-md);
    }

    .produto-relacionados__titulo {
        font-family: var(--fonte-sans);
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        margin: 0;
    }

    .produto-relacionados__navegacao {
        display: flex;
        gap: var(--espaco-md);
    }

    .produto-relacionados__seta {
        background: none;
        border: none;
        padding: 4px;
        cursor: pointer;
        color: var(--cor-quase-preto);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Grade vira carrossel horizontal */
    .produto-relacionados__grade {
        grid-template-columns: none;
        display: flex;
        gap: var(--espaco-md);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 1.25rem;
        padding: 0 1.25rem;
        scrollbar-width: none;
    }

    .produto-relacionados__grade::-webkit-scrollbar {
        display: none;
    }

    .produto-relacionados__card {
        flex: 0 0 65%;
        scroll-snap-align: start;
    }

    .produto-relacionados__imagem-link {
        padding: var(--espaco-md);
    }

    .produto-relacionados__nome a {
        font-size: 0.75rem;
    }

    .produto-relacionados__subtitulo,
    .produto-relacionados__preco,
    .produto-relacionados__link-comprar {
        font-size: 0.7rem;
    }
}

@media (max-width: 480px) {
    .produto-relacionados__grade {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--espaco-md);
    }
}