/* =========================================================================
   CasaPri — página de produto (PDP)
   ========================================================================= */
/* ---- breadcrumb (Home > Categoria > Produto) ---- */
.casapri-product__breadcrumb {
    margin: 0 0 1.25rem;
    font-family: var(--font-body);
    font-size: .82rem;
    color: var(--body);
}
.casapri-product__breadcrumb .woocommerce-breadcrumb a {
    color: var(--body);
    text-decoration: none;
}
.casapri-product__breadcrumb .woocommerce-breadcrumb a:hover {
    color: var(--ink);
    text-decoration: underline;
}

.casapri-product__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}

/* ---- galeria (Swiper preset `gallery`: 1 slide + thumbs sincronizadas) ---- */
.casapri-gallery__main.swiper {
    background: var(--surface);
    border: 1px solid var(--border);
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.casapri-gallery__main .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}
.casapri-gallery__main .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;   /* mostra a peça inteira, sem cortar nem esticar */
    padding: 1.5rem;
}

/* ---- setas de navegação (mesmo desenho das setas do "Complete o ambiente",
   .casapri-related__nav) ---- */
.casapri-gallery__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--ink);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
    transform: translateY(-50%);
}
.casapri-gallery__nav::before {
    content: "";
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}
.casapri-gallery__nav--prev { left: 14px; }
.casapri-gallery__nav--prev::before { transform: rotate(-135deg); margin-right: -2px; }
.casapri-gallery__nav--next { right: 14px; }
.casapri-gallery__nav--next::before { transform: rotate(45deg); margin-left: -2px; }
.casapri-gallery__nav:hover { border-color: var(--champagne); background: var(--surface); }
/* classe que o próprio Swiper aplica quando não há mais slide naquela direção */
.casapri-gallery__nav.swiper-button-disabled { opacity: .35; cursor: default; pointer-events: none; }

/* thumb-rail — Swiper com slidesPerView: 'auto', a largura fixa abaixo controla quantas cabem */
.casapri-gallery__thumbs.swiper {
    margin-top: .75rem;
}
/* especificidade extra (.casapri-gallery__thumbs .casapri-gallery__thumb) de propósito:
   o swiper-bundle.min.css define .swiper-slide{width:100%;height:100%} com a mesma
   especificidade da classe sozinha e carrega depois do product.css — precisa vencer o empate. */
.casapri-gallery__thumbs .casapri-gallery__thumb {
    width: 72px;
    height: 72px;
    padding: 0;
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    transition: border-color .15s ease;
}
.casapri-gallery__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.casapri-gallery__thumb:hover { border-color: var(--champagne); }
.casapri-gallery__thumb:focus-visible { outline: 2px solid var(--champagne-2); outline-offset: 2px; }
/* classe que o próprio Swiper (módulo thumbs) aplica na thumb ativa */
.casapri-gallery__thumb.swiper-slide-thumb-active { border-color: var(--ink); }

/* ---- summary ---- */
.casapri-product__summary .product_title,
.casapri-product__summary h1.entry-title {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: none;      /* nome de produto NÃO uppercase (Defeito 3) */
    letter-spacing: 0;
    font-size: 1.7rem;
    line-height: 1.25;
    color: var(--ink);
    margin: 0 0 .5rem;
}
/* fio champagne sob o título — assinatura discreta da marca */
.casapri-product__summary .product_title::after {
    content: "";
    display: block;
    width: 48px;
    height: 2px;
    background: var(--champagne);
    margin-top: .9rem;
}

/* ---- rating nativo + link "Ver avaliações" (woocommerce_single_product_summary, prioridade 11) ---- */
.casapri-product__summary .woocommerce-product-rating {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 .5rem;
}
.casapri-product__summary .star-rating { color: var(--champagne); }
.casapri-product__summary .casapri-product__ver-avaliacoes {
    font-family: var(--font-body);
    font-size: .82rem;
    color: var(--body);
    text-decoration: underline;
}
.casapri-product__summary .casapri-product__ver-avaliacoes:hover { color: var(--ink); }

/* Preço + parcelamento/Pix como um só cartão (referência Insider): as duas
   informações que mais pesam na decisão ficam visualmente coladas, num
   fundo levemente destacado do resto da coluna — não é mais "solto" na
   página. */
.casapri-product__summary .price {
    font-family: var(--font-body);
    color: var(--ink);
    font-size: 1.5rem;
    font-weight: 500;
    background: var(--surface);
    margin: 1rem 0 0;
    padding: 1rem 1.1rem .25rem;
}
.casapri-product__summary .price del { color: var(--body); font-weight: 400; font-size: 1rem; margin-right: .5rem; }
.casapri-product__summary .price ins { text-decoration: none; }

/* ---- selo de frete grátis (perto do título, prioridade 6) ---- */
.casapri-product__summary .casapri-product__selo-frete {
    display: inline-block;
    margin: 0 0 .75rem;
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 500;
    color: var(--champagne-texto);
    background: rgba(209, 188, 146, .18);
    padding: .3rem .65rem;
}

/* ---- parcelamento + pix (logo abaixo do preço, prioridade 15) ----
   Mesmo fundo/padding lateral do .price acima, sem borda entre os dois —
   lêem como um cartão único (preço + condições de pagamento). */
.casapri-product__summary .casapri-product__pagamento {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem 1rem;
    background: var(--surface);
    margin: 0 0 1.25rem;
    padding: 0 1.1rem 1rem;
    font-family: var(--font-body);
    font-size: .9rem;
    color: var(--body);
}
.casapri-product__summary .casapri-product__pix {
    color: var(--champagne-texto);
    font-weight: 500;
}

/* ---- avaliação do Ryviu, movida pra baixo do pagamento via JS (ver
   product-variation-pills.js) — preço+parcelas+Pix ficam como um cartão só,
   sem a avaliação cortando o meio. */
.casapri-product__summary .review-widget { margin: 0 0 1.25rem; }

/* ---- medidas/material (prioridade 16) ---- */
.casapri-product__summary .casapri-product__medidas {
    margin: 0 0 1.25rem;
    font-family: var(--font-body);
    font-size: .85rem;
    color: var(--body);
}

.casapri-product__summary .woocommerce-product-details__short-description {
    color: var(--body);
    margin-bottom: 1.5rem;
}

/* ---- form de variação ----
   Cada atributo em bloco (rótulo em cima, opções embaixo, largura cheia),
   não mais tabela de 2 colunas: com atributos de texto longo (ex.: "Branco
   Quente (2700-3500K)") o table-layout automático do navegador compartilha
   largura de coluna entre TODAS as linhas da tabela — a linha de "Cor"
   (coluna estreita, só bolinhas) empurrava a coluna de "Emissão de Luz"
   pra uma largura curta demais, quebrando o wrap das pills de forma feia.
   Bloco evita esse acoplamento entre linhas de vez. */
.casapri-product__summary .variations,
.casapri-product__summary .variations tbody,
.casapri-product__summary .variations tr,
.casapri-product__summary .variations th,
.casapri-product__summary .variations td {
    display: block;
    width: auto;
}
.casapri-product__summary .variations { margin-bottom: 1rem; }
.casapri-product__summary .variations tr + tr { margin-top: 1.25rem; }
.casapri-product__summary .variations th {
    text-align: left;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: .72rem;
    color: var(--ink);
    margin: 0 0 .5rem;
}
.casapri-product__summary .variations td { padding: 0; }
.casapri-product__summary select {
    font-family: var(--font-body);
    font-size: .95rem;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: .6rem .75rem;
    width: 100%;
    max-width: 340px;
}
.casapri-product__summary select:focus { outline: none; border-color: var(--champagne-2); }
.casapri-product__summary .reset_variations { font-size: .8rem; color: var(--body); margin-left: .5rem; }

/* ---- pills de atributo (substituem o <select>, product-variation-pills.js) ---- */
.casapri-variacao-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.casapri-variacao-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-body);
    font-size: .85rem;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: .55rem 1rem;
    min-height: 44px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.casapri-variacao-pill:hover:not(:disabled) { border-color: var(--champagne-2); }
.casapri-variacao-pill.is-selecionado {
    background: var(--ink);
    color: var(--white);
    border-color: var(--ink);
}

/* ---- rótulo "Cor: <valor selecionado>" acima do grupo de bolinhas ---- */
.casapri-variacao-rotulo {
    margin: 0 0 .5rem;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: .72rem;
    color: var(--ink);
}

/* ---- bolinhas de cor real (atributo "Cor", referência Insider) ---- */
.casapri-variacao-pills--swatch { align-items: center; gap: .65rem; }
.casapri-variacao-swatch {
    position: relative;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: box-shadow .15s ease, transform .1s ease;
}
.casapri-variacao-swatch:hover:not(:disabled) { transform: scale(1.08); }
/* símbolo de "transparente": metade cinza, metade branca, não é cor real */
.casapri-variacao-swatch--transparente {
    background: linear-gradient(135deg, #FFFFFF 50%, #B9B9B9 50%);
}
.casapri-variacao-swatch.is-selecionado {
    box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--ink);
}

.casapri-variacao-pill.is-desabilitado,
.casapri-variacao-pill:disabled {
    color: var(--body);
    background: var(--surface);
    border-color: var(--border);
    text-decoration: line-through;
    cursor: not-allowed;
    opacity: .6;
}
.casapri-variacao-swatch.is-desabilitado,
.casapri-variacao-swatch:disabled {
    cursor: not-allowed;
    opacity: .3;
}
/* X visual sobre a bolinha desabilitada — riscar cor não daria pra ler */
.casapri-variacao-swatch.is-desabilitado::after,
.casapri-variacao-swatch:disabled::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140%;
    height: 1px;
    background: var(--ink);
    transform: translate(-50%, -50%) rotate(45deg);
}

/* ---- botão (preservado do kit: preto/branco, Jost 600, radius 0, hover inverte) ---- */
/* seletor de elemento (button.___) de propósito, não só classe: o WooCommerce
   10.7 estiliza o roxo com ".woocommerce button.button.alt" — mesma
   quantidade de classes que a nossa regra tinha, mas com um seletor de
   elemento a mais, o que dava empate na contagem de classes e vitória pra
   eles no desempate de especificidade. Igualando o "peso" aqui, o load
   order (nosso CSS carrega depois) decide a favor da gente. */
.casapri-product__summary button.single_add_to_cart_button,
.casapri-product__summary button.button,
.casapri-product__summary button.button.alt {
    background: var(--ink);
    color: var(--white);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    border: 1px solid var(--ink);
    border-radius: 0;
    padding: 15px 34px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.casapri-product__summary button.single_add_to_cart_button:hover,
.casapri-product__summary button.button:hover,
.casapri-product__summary button.button.alt:hover {
    background: var(--white);
    color: var(--ink);
}
/* estado desabilitado (ex.: combinação de variação indisponível) tem regra
   própria no WooCommerce (".woocommerce button.button.alt:disabled"), roxo
   clarinho — mesmo empate de especificidade do estado normal acima, mesma
   correção: seletor de elemento pra igualar o peso. */
.casapri-product__summary button.single_add_to_cart_button:disabled,
.casapri-product__summary button.button:disabled,
.casapri-product__summary button.button.alt:disabled {
    background: var(--surface);
    color: var(--body);
    border-color: var(--border);
    cursor: not-allowed;
}

/* ---- WhatsApp (prioridade 32) + selos de confiança com ícone (prioridade 33) ---- */
.casapri-product__summary .casapri-product__confianca {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    font-family: var(--font-body);
    font-size: .82rem;
    color: var(--body);
}
.casapri-product__summary .casapri-product__confianca li {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.casapri-product__summary .casapri-product__confianca-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--champagne);
    color: var(--white);
    font-size: .7rem;
    line-height: 1;
}
/* Ícone de "compra internacional" dentro da lista de confiança: vem antes do
   texto de prazo de entrega, igual aos ticks ✓ dos itens acima (ícone,
   depois texto) — a explicação de "por que às vezes atrasa" mora no tooltip
   nativo (atributo title), não na tela. O ícone é dourado (--champagne-texto,
   a variante com contraste AA em texto/ícone — --champagne puro é só para
   superfície) e maior, a pedido do Pedro, com o avião girado 45° (estava
   sendo visto de cima). */
.casapri-product__summary .casapri-product__confianca-discreto {
    gap: .35rem;
}
.casapri-product__internacional {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--champagne-texto);
    cursor: help;
}
.casapri-product__internacional svg {
    transform: rotate(45deg);
}
.casapri-product__internacional:hover,
.casapri-product__internacional:focus-visible {
    opacity: .8;
}
/* link, não botão: WhatsApp é a saída secundária, o CTA de verdade é o
   "Adicionar ao carrinho" logo acima — sem borda/fundo pra não competir
   em peso visual com ele. */
.casapri-product__summary .casapri-product__whatsapp {
    display: inline-flex;
    align-items: center;
    margin-top: .9rem;
    font-family: var(--font-body);
    font-size: .85rem;
    color: var(--body);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.casapri-product__summary .casapri-product__whatsapp:hover { color: var(--ink); }

/* ---- quantidade + botão na mesma linha (markup nativo do Woo)
   Produto simples: quantidade + botão são filhos diretos de form.cart.
   Produto variável (a norma no catálogo): ficam dentro de
   .woocommerce-variation-add-to-cart, dentro de form.cart — por isso os
   dois seletores, cada catálogo usa um dos dois nunca os dois juntos. */
.casapri-product__summary form.cart,
.casapri-product__summary .woocommerce-variation-add-to-cart {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
}
.casapri-product__summary .quantity input {
    font-family: var(--font-body);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: .6rem;
    width: 68px;
    height: 48px;
    margin: 0;
}
/* botão ocupa o resto da linha (referência Insider: CTA pesado, quantidade
   é só um campo pequeno ao lado, não divide a atenção meio a meio) */
.casapri-product__summary button.single_add_to_cart_button {
    flex: 1 1 auto;
    text-align: center;
}

/* Preço da variação (dentro de .single_variation_wrap) some daqui de baixo —
   já mora no cartão de preço do topo, perto do parcelamento/Pix (ver
   product-variation-pills.js: sincronizarPrecoDoTopo copia pra lá e marca
   esta classe no form). Regra puramente declarativa de propósito: escondia
   isso dentro do handler de found_variation antes, mas a ordem entre o
   listener nosso e o nativo do Woo não é garantida, e o Woo recria esse
   HTML a cada troca de variação — desfazia o display:none umas vezes sim,
   outras não (o preço duplicado que o Pedro reportou vindo e voltando). */
.casapri-preco-topo-ativo .single_variation_wrap .woocommerce-variation-price {
    display: none;
}

/* ---- disponibilidade da variação (".woocommerce-variation-availability",
   nativo do Woo) — texto com bolinha de status, não moldura: uma caixa com
   borda ali do lado do botão preto lia como um segundo botão (clicável mas
   não é). */
.casapri-product__summary .stock,
.casapri-product__summary .woocommerce-variation-availability .stock {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: .6rem 0 0;
    font-family: var(--font-body);
    font-size: .82rem;
    color: var(--body);
}
.casapri-product__summary .stock::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--body);
}
.casapri-product__summary .stock.in-stock { color: var(--ink); }
.casapri-product__summary .stock.in-stock::before { background: #3F8A4C; }
.casapri-product__summary .stock.out-of-stock::before { background: #A00000; }

.casapri-product__summary .product_meta { margin-top: 1.75rem; font-size: .82rem; color: var(--body); }
.casapri-product__summary .product_meta a { color: var(--body); }
.casapri-product__summary .product_meta a:hover { color: var(--champagne); }
/* SKU oculto por enquanto — o gerado pelo import é longo/técnico e não
   ajuda o cliente na decisão de compra (categorias/tags continuam). */
.casapri-product__summary .product_meta .sku_wrapper { display: none; }

/* ---- responsivo ---- */
@media (max-width: 860px) {
    /* minmax(0, 1fr), não 1fr puro: sem o mínimo 0 na track, o item de grid
       herda min-width:auto (o piso "min-content" dele) — a galeria em Swiper
       vira uma explosão de grid (Chromium chega a computar ~33 milhões de px
       de largura), a imagem "cobre tudo" no mobile. Mesma guarda que a regra
       desktop já tem em .casapri-product__grid acima (minmax(0, 1.15fr) minmax(0, 1fr)). */
    .casapri-product__grid { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
    .casapri-product__summary .product_title { font-size: 1.45rem; }
}

/* =========================================================================
   Resumo curto (short_description) — logo abaixo do preço.
   O próprio Woo (woocommerce_template_single_excerpt, prioridade 20) só
   imprime esse bloco quando $product->get_short_description() tem conteúdo,
   então não precisa de guarda extra aqui: sem texto, sem espaço reservado.
   Sem clamp de linhas de propósito — as short_description do catálogo
   (ticket #8) já foram curadas pra caber em ~3 linhas; truncar por CSS sem
   um "ver mais" só esconderia texto que foi escrito pra ser lido.
   ========================================================================= */
.casapri-product__summary .woocommerce-product-details__short-description p {
    margin: 0;
    line-height: 1.55;
}

/* =========================================================================
   Abas (descrição / ficha técnica / avaliações) — issue #14.
   Markup vem do template nativo do Woo (single-product/tabs/tabs.php),
   reaproveitado por compatibilidade com plugins de avaliação de terceiros
   (Ryviu) que se plugam no filtro `woocommerce_product_tabs`. O JS de troca
   de aba (mostrar/esconder painel) já vem do próprio WooCommerce
   (wc-single-product, enfileirado automaticamente em is_product()).
   ========================================================================= */
/* Sem max-width/padding próprios: .casapri-product__details já mora dentro
   de .casapri-site (theme.css), que aplica max-width: var(--container) +
   padding lateral pra todo o miolo do site. Duplicar aqui empurraria as
   abas mais pra dentro do que a galeria/summary logo acima. */
.casapri-product__details {
    margin: 3rem 0 0;
}
.casapri-product__details .woocommerce-tabs { width: 100%; }
.casapri-product__details ul.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0 0 .75rem;
    border-bottom: 1px solid var(--border);
}
.casapri-product__details ul.tabs li { margin: 0; }
.casapri-product__details ul.tabs li a {
    display: inline-block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: .82rem;
    color: var(--body);
    text-decoration: none;
    padding-bottom: .3rem;
    border-bottom: 2px solid transparent;
}
.casapri-product__details ul.tabs li a:hover { color: var(--ink); }
.casapri-product__details ul.tabs li.active a {
    color: var(--ink);
    border-bottom-color: var(--champagne);
}
.casapri-product__details .panel {
    font-family: var(--font-body);
    color: var(--body);
    line-height: 1.7;
    max-width: 70ch;
}
/* só o h2 que o próprio Woo injeta como título da aba (1º filho do painel) —
   não mexe em subtítulos que o merchant escrever dentro da descrição */
.casapri-product__details .panel > h2:first-child { display: none; }

/* ---- "Ler mais" na aba de descrição (product-description-toggle.js) ----
   Só a descrição (não ficha técnica/avaliações): é a aba mais longa e a que
   mais varia de produto pra produto (algumas têm texto extenso). Colapsada
   por padrão pra não empurrar "Você também pode gostar" pra muito longe;
   JS só adiciona o botão quando o texto realmente estoura a altura. */
#tab-description.casapri-descricao--colapsavel {
    position: relative;
    max-height: 340px;
    overflow: hidden;
}
#tab-description.casapri-descricao--colapsavel::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 90px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--white));
    pointer-events: none;
}
#tab-description.casapri-descricao--colapsavel.is-expandida {
    max-height: none;
}
#tab-description.casapri-descricao--colapsavel.is-expandida::after {
    display: none;
}
.casapri-descricao__botao {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: 1.25rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--ink);
    background: none;
    border: none;
    border-bottom: 1px solid var(--ink);
    padding: 0 0 .2rem;
    cursor: pointer;
}
.casapri-descricao__botao:hover { color: var(--champagne-texto); border-color: var(--champagne-texto); }
.casapri-descricao__botao-seta {
    display: inline-block;
    transition: transform .2s ease;
}
.casapri-descricao__botao.is-expandido .casapri-descricao__botao-seta {
    transform: rotate(180deg);
}

/* ---- ficha técnica (peso/dimensões/atributos) ---- */
.casapri-product__details table.woocommerce-product-attributes {
    width: 100%;
    max-width: 480px;
    border-collapse: collapse;
}
.casapri-product__details table.woocommerce-product-attributes th,
.casapri-product__details table.woocommerce-product-attributes td {
    text-align: left;
    padding: .6rem 0;
    border-bottom: 1px solid var(--border);
    font-size: .9rem;
}
.casapri-product__details table.woocommerce-product-attributes th {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: .72rem;
    color: var(--ink);
    font-weight: 500;
    width: 40%;
}

/* ---- avaliações (fallback nativo do Woo; Ryviu, se ativo, some por cima) ---- */
.casapri-product__details #reviews .woocommerce-Reviews-title { display: none; }
.casapri-product__details #reviews .commentlist {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}
.casapri-product__details #reviews .comment_container {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border);
}
.casapri-product__details #reviews .comment_container img {
    border-radius: 50%;
    width: 42px;
    height: 42px;
}
.casapri-product__details #reviews .star-rating { color: var(--champagne); }
.casapri-product__details #review_form input,
.casapri-product__details #review_form textarea {
    font-family: var(--font-body);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: .6rem .75rem;
    width: 100%;
    max-width: 420px;
}
.casapri-product__details #review_form textarea { max-width: 100%; }
.casapri-product__details #review_form #submit {
    background: var(--ink);
    color: var(--white);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    border: 1px solid var(--ink);
    border-radius: 0;
    padding: 12px 28px;
    cursor: pointer;
}
.casapri-product__details #review_form #submit:hover { background: var(--white); color: var(--ink); }

@media (max-width: 860px) {
    .casapri-product__details { margin-top: 2rem; }
    .casapri-product__details ul.tabs { gap: 1.25rem; }
}

/* =========================================================================
   Barra fixa de compra (mobile) — issue #14.
   Escondida fora da media query (desktop já tem o botão real visível no
   summary); no mobile, some/aparece via .is-visible (JS liga com scroll).
   `body.casapri-sticky-buy-visible` reserva o espaço da barra no fim da
   página pra ela nunca cobrir rodapé/conteúdo.
   ========================================================================= */
.casapri-sticky-buy { display: none; }

@media (max-width: 860px) {
    .casapri-sticky-buy {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 30;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        background: var(--white);
        border-top: 1px solid var(--border);
        box-shadow: 0 -4px 14px rgba(41, 41, 41, .08);
        padding: .75rem 1rem;
        transform: translateY(100%);
        transition: transform .2s ease;
    }
    .casapri-sticky-buy.is-visible { transform: translateY(0); }

    .casapri-sticky-buy__info {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    .casapri-sticky-buy__title {
        font-family: var(--font-body);
        font-size: .78rem;
        color: var(--body);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .casapri-sticky-buy__price {
        font-family: var(--font-body);
        font-weight: 500;
        font-size: 1rem;
        color: var(--ink);
    }
    .casapri-sticky-buy__button {
        flex-shrink: 0;
        font-family: var(--font-display);
        font-weight: 600;
        font-size: .78rem;
        text-transform: uppercase;
        letter-spacing: 1.2px;
        color: var(--white);
        background: var(--ink);
        border: 1px solid var(--ink);
        padding: 12px 22px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        text-decoration: none;
        white-space: nowrap;
    }

    body.casapri-sticky-buy-visible { padding-bottom: 72px; }
}

/* =========================================================================
   "Complete o ambiente" (cross-sell) — issue #12.
   Swiper preset `products`: 1 card + navegação, sem thumbs (product-related.js).
   Sem candidato elegível, o próprio PHP não desenha a <section> — nunca sobra
   título/moldura vazios aqui.
   ========================================================================= */
.casapri-related {
    margin: 3rem 0 0;
}
.casapri-related__title {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-size: 1.4rem;
    line-height: 1.25;
    color: var(--ink);
    margin: 0 0 1.25rem;
}
/* mesmo fio champagne do título da PDP (assinatura de marca, product_title acima) */
.casapri-related__title::after {
    content: "";
    display: block;
    width: 48px;
    height: 2px;
    background: var(--champagne);
    margin-top: .9rem;
}

/* contexto de position:relative para as setas — não é o .swiper em si,
   que carrega overflow:hidden do swiper-bundle e cortaria qualquer botão
   posicionado nas bordas dele (mesma razão da especificidade extra logo
   abaixo, comentada onde a galeria já resolve o mesmo problema). */
.casapri-related__carousel {
    position: relative;
}
.casapri-related__swiper {
    padding: 0 0 .25rem;
}
/* especificidade extra de propósito: swiper-bundle.min.css define
   .swiper-slide{height:100%} com a mesma especificidade da classe sozinha
   e carrega depois do product.css — precisa vencer o empate (mesmo caso já
   documentado para .casapri-gallery__thumb acima). */
.casapri-related__swiper .casapri-related__slide {
    height: auto;
}
/* product-card é flex column; força a altura do slide a esticar o card
   pra corpo/preço alinharem entre slides de nomes com tamanhos diferentes */
.casapri-related__slide .casapri-product-card {
    height: 100%;
}

.casapri-related__nav {
    position: absolute;
    top: 40%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--ink);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.casapri-related__nav::before {
    content: "";
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}
.casapri-related__nav--prev {
    left: -14px;
}
.casapri-related__nav--prev::before {
    transform: rotate(-135deg);
    margin-right: -2px;
}
.casapri-related__nav--next {
    right: -14px;
}
.casapri-related__nav--next::before {
    transform: rotate(45deg);
    margin-left: -2px;
}
.casapri-related__nav:hover {
    border-color: var(--champagne);
    background: var(--surface);
}
/* classe que o próprio Swiper aplica quando não há mais slide naquela direção */
.casapri-related__nav.swiper-button-disabled {
    opacity: .35;
    cursor: default;
    pointer-events: none;
}

@media (max-width: 860px) {
    .casapri-related { margin-top: 2.25rem; }
    /* setas continuam no mobile (pedido do Pedro) — só entram pra dentro do
       carrossel (em vez de -14px pra fora, que no mobile ficava colado na
       borda da viewport / arriscando cortar) e encolhem um pouco pra não
       cobrir tanto do card. */
    .casapri-related__nav {
        width: 34px;
        height: 34px;
        background: rgba(255, 255, 255, .92);
    }
    .casapri-related__nav--prev { left: 6px; }
    .casapri-related__nav--next { right: 6px; }
}