/* =========================================================
   PÁGINA DE PRODUTO
   Carregada apenas em /produto/<slug> (performance).
   Reaproveita .panel, .btn, .stars, .product-card e as
   variáveis globais do projeto.
========================================================= */


/* =========================================================
   BREADCRUMB
========================================================= */

.breadcrumb{

    margin-bottom:20px;

}

.breadcrumb ol{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:8px;

    padding:0;

    margin:0;

    list-style:none;

    font-size:.86rem;

    color:var(--muted);

}

.breadcrumb li{

    display:flex;

    align-items:center;

}

.breadcrumb a{

    color:var(--muted);

    text-decoration:none;

    transition:color var(--transition);

}

.breadcrumb a:hover{

    color:var(--cyan);

}

/* Nome longo do produto nunca estoura a linha */
.breadcrumb [aria-current="page"]{

    color:var(--text);

    font-weight:600;

    overflow-wrap:anywhere;

}


/* =========================================================
   TOPO: GALERIA + CAIXA DE COMPRA
========================================================= */

.product-hero{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

    align-items:start;

}

/* Filhos de grid têm min-width:auto por padrão — sem isto, um
   conteúdo longo empurra a coluna e gera scroll horizontal. */
.product-gallery,
.buybox{

    min-width:0;

}


/* -------- Galeria -------- */

.gallery-main{

    position:relative;

    margin:0;

    border-radius:var(--radius-md);

    overflow:hidden;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(69,172,171,.16);

}

/* Área clicável que abre o lightbox e recebe o zoom */
.gallery-zone{

    display:block;

    width:100%;

    padding:0;

    border:none;

    background:transparent;

    cursor:zoom-in;

    overflow:hidden;

}

.gallery-main img{

    display:block;

    width:100%;

    aspect-ratio:1 / 1;

    object-fit:contain;

    /* Origem controlada via JS conforme a posição do mouse */
    transform-origin:var(--zoom-x, 50%) var(--zoom-y, 50%);

    transition:
        transform .35s ease,
        opacity .25s ease;

}

/* Zoom ao passar o mouse (desativado em toque — ver media query) */
.gallery-zone:hover img,
.gallery-zone:focus-visible img{

    transform:scale(2);

}

/* Troca suave de imagem: some, troca o src, reaparece */
.gallery-main img.is-swapping{

    opacity:0;

}

.gallery-hint{

    position:absolute;

    left:14px;

    bottom:14px;

    display:inline-flex;

    align-items:center;

    gap:7px;

    padding:7px 13px;

    border-radius:999px;

    font-size:.76rem;

    color:var(--muted);

    background:rgba(10,10,36,.75);

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(6px);

    pointer-events:none;

    transition:opacity var(--transition);

}

.gallery-main:hover .gallery-hint{

    opacity:0;

}


/* =========================================================
   SETAS DE NAVEGAÇÃO (galeria principal)
========================================================= */

.gallery-nav{

    position:absolute;

    top:50%;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:center;

    width:40px;

    height:40px;

    border-radius:50%;

    cursor:pointer;

    color:var(--text);

    background:rgba(10,10,36,.65);

    border:1px solid rgba(255,255,255,.14);

    backdrop-filter:blur(6px);

    opacity:.65;

    transform:translateY(-50%) scale(1);

    transition:
        opacity .3s ease,
        color .3s ease,
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;

}

.gallery-nav--prev{ left:14px; }
.gallery-nav--next{ right:14px; }

.gallery-main:hover .gallery-nav{

    opacity:1;

}

.gallery-nav:hover{

    color:var(--cyan);

    background:rgba(69,172,171,.18);

    border-color:rgba(69,172,171,.45);

    transform:translateY(-50%) scale(1.1);

}

.gallery-nav:active{

    transform:translateY(-50%) scale(.96);

}

@media(max-width:600px){

    .gallery-nav{

        opacity:.85;

    }

}

/* Estado vazio (sem fotos publicadas) */
.gallery-placeholder{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:12px;

    aspect-ratio:1 / 1;

    color:var(--muted);

    font-size:.9rem;

    background:
        linear-gradient(
            135deg,
            rgba(69,172,171,.08),
            rgba(40,74,111,.08)
        );

}

.gallery-thumbs{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin:14px 0 0;

    padding:0;

    list-style:none;

}

.gallery-thumb{

    padding:0;

    width:76px;

    height:76px;

    cursor:pointer;

    overflow:hidden;

    border-radius:12px;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.10);

    transition:
        border-color var(--transition),
        transform var(--transition);

}

.gallery-thumb img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.gallery-thumb:hover{

    transform:translateY(-2px);

    border-color:rgba(69,172,171,.35);

}

.gallery-thumb.active{

    border-color:var(--cyan);

    box-shadow:0 0 0 2px rgba(69,172,171,.25);

}


/* =========================================================
   CAIXA DE COMPRA
========================================================= */

.buybox-badge{

    position:static;

    display:inline-flex;

    margin-bottom:14px;

}

/* Linha de categoria e marca, logo abaixo do título */
.buybox-meta{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:10px;

    margin:0 0 14px;

    font-size:.88rem;

    color:var(--muted);

}

.buybox-meta a{

    color:var(--cyan);

    text-decoration:none;

    transition:color var(--transition);

}

.buybox-meta a:hover{

    color:#fff;

}

.buybox-meta strong{

    color:var(--text);

}

.buybox h1{

    margin:0 0 12px;

    font-size:clamp(1.6rem,2.6vw,2.1rem);

    line-height:1.25;

    color:#fff;

}

.buybox-rating{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:10px;

    margin-bottom:16px;

    font-size:.9rem;

}

.rating-count{

    color:var(--muted);

}

/* -------- Bloco de preço -------- */

.price-box{

    padding:22px;

    margin-bottom:20px;

    border-radius:var(--radius-md);

    background:
        linear-gradient(
            135deg,
            rgba(69,172,171,.10),
            rgba(40,74,111,.10)
        );

    border:1px solid rgba(69,172,171,.22);

}

.price-pix{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:12px;

}

.price-pix__value{

    font-size:clamp(1.9rem,3.4vw,2.5rem);

    font-weight:800;

    line-height:1;

    color:#fff;

}

/* =========================================================
   ANIMAÇÃO: preço recalculado ao mudar a quantidade
========================================================= */

#price-pix-value,
#price-cash-value,
#price-installment-value{

    display:inline-block;

}

.price-updated{

    animation:priceUpdated .5s ease;

}

@keyframes priceUpdated{

    0%{

        transform:scale(1.14);

        color:var(--cyan);

    }

    100%{

        transform:scale(1);

    }

}

@media(prefers-reduced-motion:reduce){

    .price-updated{

        animation:none;

    }

}

.price-pix__tag{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:5px 12px;

    border-radius:999px;

    font-size:.76rem;

    font-weight:700;

    color:#0a0a24;

    background:linear-gradient(135deg,#5BFF8A,#45acab);

}

.price-cash{

    margin-top:12px;

    font-size:.92rem;

    color:var(--muted);

}

.price-cash strong{

    color:var(--text);

}

.price-installments{

    display:flex;

    align-items:center;

    gap:8px;

    margin-top:6px;

    font-size:.92rem;

    color:var(--muted);

}

.price-installments strong{

    color:var(--text);

}


/* -------- Disponibilidade -------- */

.stock{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-bottom:22px;

    font-size:.9rem;

    font-weight:600;

}

.stock::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--dot);

}

/* Cada estado define sua cor; o pulso reaproveita as variáveis */
.stock--in{ color:#89ffb4;  --dot:#5BFF8A; --dot-glow:rgba(91,255,138,.55); }
.stock--low{ color:#ffcf7a; --dot:#FFB84A; --dot-glow:rgba(255,184,74,.55); }
.stock--out{ color:#ff9a9a; --dot:#ff6b6b; }

/* Pulso apenas quando há disponibilidade (sinal de "ao vivo").
   Fora de estoque fica estático, sem chamar atenção. */
.stock--in::before,
.stock--low::before{

    animation:stockPulse 2.2s ease-out infinite;

}

/* Anel que expande a partir da bolinha e desvanece */
@keyframes stockPulse{

    0%{

        box-shadow:0 0 0 0 var(--dot-glow);

    }

    70%{

        box-shadow:0 0 0 9px rgba(0,0,0,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(0,0,0,0);

    }

}

/* Respeita quem prefere menos animação */
@media(prefers-reduced-motion:reduce){

    .stock--in::before,
    .stock--low::before{

        animation:none;

        box-shadow:0 0 10px var(--dot-glow);

    }

}


/* -------- Benefícios -------- */

.buybox-benefits{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin:0 0 26px;

    padding:0;

    list-style:none;

}

.buybox-benefits li{

    display:flex;

    align-items:flex-start;

    gap:10px;

    font-size:.94rem;

    color:var(--text);

}

.buybox-benefits svg{

    flex-shrink:0;

    margin-top:2px;

    color:var(--cyan);

}


/* -------- Variantes (cor, tamanho etc.) -------- */

.variant-selector{

    display:flex;

    flex-direction:column;

    gap:14px;

    margin:0 0 22px;

}

/* Na coluna da galeria (embaixo das miniaturas) precisa de respiro
   em cima — na buybox esse espaço já vinha do bloco de preço acima. */
.product-gallery .variant-selector{

    margin-top:24px;

}

.variant-group{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.variant-group__label{

    font-size:.85rem;

    font-weight:600;

    color:var(--muted);

}

.variant-group__options{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

}

.variant-option{

    padding:9px 16px;

    border-radius:999px;

    cursor:pointer;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.14);

    color:var(--text);

    font-family:inherit;

    font-size:.88rem;

    font-weight:600;

    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition);

}

.variant-option:hover{

    border-color:rgba(69,172,171,.4);

}

.variant-option.active{

    color:#fff;

    background:linear-gradient(135deg,var(--cyan),var(--blue));

    border-color:transparent;

    box-shadow:0 8px 22px rgba(69,172,171,.28);

}

.variant-option--unavailable:not(.active){

    opacity:.35;

    cursor:not-allowed;

    text-decoration:line-through;

}

.variant-option--unavailable:not(.active):hover{

    border-color:rgba(255,255,255,.14);

}

.variant-unavailable{

    margin:0;

    font-size:.85rem;

    color:#ff6b81;

}


/* -------- Quantidade -------- */

.qty-row{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:16px;

}

.qty-label{

    font-size:.9rem;

    font-weight:600;

    color:var(--text);

}

/* -------- Ações -------- */

.buybox-actions{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:12px;

    margin-bottom:26px;

}

/* Botão de carrinho */
.cart-btn{

    flex:1;

    min-width:210px;

    padding:15px 22px;

    font-family:inherit;

    font-size:1rem;

    cursor:pointer;

}

.cart-btn:disabled{

    opacity:.5;

    cursor:not-allowed;

}

/* Botões de ícone (favoritar / compartilhar) */
.icon-actions{

    display:flex;

    gap:10px;

}

.icon-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    width:50px;

    height:50px;

    border-radius:50%;

    cursor:pointer;

    color:var(--text);

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.14);

    transition:
        transform var(--transition),
        color var(--transition),
        background var(--transition),
        border-color var(--transition);

}

.icon-btn:hover{

    transform:translateY(-2px);

    color:var(--cyan);

    border-color:rgba(69,172,171,.40);

    background:rgba(69,172,171,.10);

}

/* Estado "favoritado": coração preenchido */
#favorite-btn[aria-pressed="true"]{

    color:#ff6b81;

    border-color:rgba(255,107,129,.45);

    background:rgba(255,107,129,.12);

}

#favorite-btn[aria-pressed="true"] svg{

    fill:currentColor;

}

/* Seletor de quantidade */
.qty{

    display:inline-flex;

    align-items:center;

    border-radius:999px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.14);

}

.qty-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    width:42px;

    height:46px;

    border:none;

    background:transparent;

    color:var(--text);

    cursor:pointer;

    border-radius:999px;

    transition:color var(--transition), background var(--transition);

}

.qty-btn:hover{

    color:var(--cyan);

    background:rgba(69,172,171,.10);

}

.qty input{

    width:46px;

    height:46px;

    border:none;

    background:transparent;

    color:var(--text);

    font-family:inherit;

    font-size:1rem;

    font-weight:600;

    text-align:center;

    -moz-appearance:textfield;

}

.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button{

    -webkit-appearance:none;

    margin:0;

}

/* CTA principal */
.buy-cta{

    flex:1;

    min-width:230px;

    padding:15px 24px;

    font-size:1rem;

}

.buy-cta.is-disabled{

    opacity:.5;

    pointer-events:none;

}


/* -------- Selos institucionais -------- */

.buybox-seals{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:12px;

    margin:0;

    padding:22px 0 0;

    list-style:none;

    border-top:1px solid rgba(255,255,255,.08);

}

.seal{

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px 14px;

    border-radius:var(--radius-sm);

    background:rgba(255,255,255,.025);

    border:1px solid rgba(69,172,171,.14);

    transition:
        transform var(--transition),
        border-color var(--transition);

}

.seal:hover{

    transform:translateY(-2px);

    border-color:rgba(69,172,171,.32);

}

.seal__icon{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    width:38px;

    height:38px;

    border-radius:11px;

    color:var(--cyan);

    background:rgba(69,172,171,.12);

    border:1px solid rgba(69,172,171,.22);

}

.seal__text{

    display:flex;

    flex-direction:column;

    font-size:.78rem;

    line-height:1.4;

    color:var(--muted);

}

.seal__text strong{

    font-size:.88rem;

    color:var(--text);

}


/* =========================================================
   DETALHES
========================================================= */

.details-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:24px;

}

/* Mesma proteção contra overflow horizontal (min-width:auto) */
.details-grid > *{

    min-width:0;

}

.details-block--wide{

    grid-column:1 / -1;

}

.details-block{

    padding:24px;

    border-radius:var(--radius-md);

    background:rgba(255,255,255,.025);

    border:1px solid rgba(69,172,171,.14);

    transition:
        transform var(--transition),
        background var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);

}

/* Mesmo comportamento de hover dos demais cards do projeto */
.details-block:hover{

    transform:translateY(-4px);

    background:rgba(255,255,255,.04);

    border-color:rgba(69,172,171,.35);

    box-shadow:
        0 18px 40px rgba(0,0,0,.30),
        0 0 22px rgba(69,172,171,.14);

}

.details-block + .details-block{

    margin-top:24px;

}

.details-block h3{

    display:flex;

    align-items:center;

    gap:9px;

    margin-bottom:16px;

    font-size:1.08rem;

    color:#fff;

}

.details-block h3 svg{

    color:var(--cyan);

}

.details-block p{

    color:var(--muted);

    line-height:1.8;

    /* Descrições da Shopify chegam com quebras de linha reais
       (parágrafos separados) — preserva em vez de colapsar tudo
       numa linha só. */
    white-space:pre-line;

}

/* Descrição/lista longa: trunca em altura fixa com esmaecimento no
   final, botão "ver mais" só aparece (via reviews.js) quando o
   conteúdo realmente passou do limite. Funciona igual em desktop e
   mobile — a diferença é só o tamanho do card ao redor. */
.details-collapsible{

    position:relative;

    max-height:220px;

    overflow:hidden;

}

.details-collapsible::after{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:56px;

    background:linear-gradient(to bottom, transparent, rgba(10,10,36,.95));

    pointer-events:none;

}

.details-collapsible--expanded{

    max-height:none;

}

.details-collapsible--expanded::after{

    display:none;

}

.details-collapsible-toggle{

    margin-top:14px;

    padding:0;

    border:none;

    background:none;

    color:var(--cyan);

    font-size:.9rem;

    font-weight:600;

    cursor:pointer;

}

.details-collapsible-toggle:hover{

    text-decoration:underline;

}

.details-collapsible-toggle[hidden]{

    display:none;

}

/* Coluna direita empilhada */
.details-column{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.details-column .details-block + .details-block{

    margin-top:0;

}

/* Tabela de especificações */
.specs-table{

    width:100%;

    border-collapse:collapse;

    font-size:.92rem;

}

.specs-table tr + tr{

    border-top:1px solid rgba(255,255,255,.06);

}

.specs-table th{

    padding:11px 0;

    text-align:left;

    font-weight:500;

    color:var(--muted);

    overflow-wrap:anywhere;

}

.specs-table td{

    padding:11px 0 11px 16px;

    text-align:right;

    color:var(--text);

    overflow-wrap:anywhere;

}

/* Listas com marcador de check */
.check-list{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin:0;

    padding:0;

    list-style:none;

}

.check-list li{

    display:flex;

    align-items:flex-start;

    gap:10px;

    font-size:.92rem;

    color:var(--text);

}

.check-list svg{

    flex-shrink:0;

    margin-top:2px;

    color:var(--cyan);

}

.warranty{

    background:rgba(69,172,171,.07);

    border-color:rgba(69,172,171,.22);

}

/* Mantém o tom ciano próprio da garantia também no hover */
.warranty:hover{

    background:rgba(69,172,171,.11);

    border-color:rgba(69,172,171,.40);

}


/* =========================================================
   AVALIAÇÕES
========================================================= */

.reviews-summary{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:14px;

    padding:20px 24px;

    margin-bottom:24px;

    border-radius:var(--radius-md);

    background:rgba(255,255,255,.025);

    border:1px solid rgba(69,172,171,.14);

}

.reviews-score{

    font-size:2.2rem;

    font-weight:800;

    line-height:1;

    color:#fff;

}


/* =========================================================
   FORMULÁRIO "DEIXE SUA AVALIAÇÃO"
========================================================= */

.review-form-wrap{

    margin-bottom:24px;

}

.review-form{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:14px;

    padding:24px;

    border-radius:var(--radius-md);

    background:rgba(255,255,255,.025);

    border:1px solid rgba(69,172,171,.14);

}

.review-form h3{

    margin:0;

    font-size:1.05rem;

    color:#fff;

}

/* Seletor de estrelas clicável, sem depender de JS: truque clássico
   com radios + label em ordem invertida (5,4,3,...,1 no DOM) e
   `flex-direction:row-reverse` no container, pra hover/seleção
   acender a estrela clicada e todas as anteriores. */
.star-picker{

    display:flex;

    flex-direction:row-reverse;

    justify-content:flex-end;

    gap:4px;

    margin:0;

    padding:0;

    border:none;

}

.star-picker legend{

    position:absolute;

    width:1px;

    height:1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

}

.star-picker input{

    position:absolute;

    opacity:0;

    pointer-events:none;

}

.star-picker label{

    display:flex;

    color:rgba(255,255,255,.22);

    cursor:pointer;

    transition:color var(--transition);

}

.star-picker input:checked ~ label,
.star-picker label:hover,
.star-picker label:hover ~ label{

    color:#FFD54A;

}

.review-form__textarea{

    width:100%;

    min-height:110px;

    padding:12px 14px;

    border-radius:var(--radius-sm);

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.14);

    color:var(--text);

    font-family:inherit;

    font-size:.92rem;

    line-height:1.6;

    resize:vertical;

}

.review-form__textarea:focus{

    outline:none;

    border-color:rgba(69,172,171,.5);

}

.review-form-gate{

    padding:20px 24px;

    border-radius:var(--radius-md);

    background:rgba(255,255,255,.025);

    border:1px solid rgba(69,172,171,.14);

    color:var(--muted);

}

.review-form-gate a{

    color:var(--cyan);

    font-weight:600;

}

.reviews-list{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

    margin:0;

    padding:0;

    list-style:none;

}

.review-card{

    display:flex;

    flex-direction:column;

    gap:12px;

    padding:22px;

    border-radius:var(--radius-md);

    background:rgba(255,255,255,.025);

    border:1px solid rgba(69,172,171,.14);

    transition:
        transform var(--transition),
        border-color var(--transition);

}

.review-card:hover{

    transform:translateY(-3px);

    border-color:rgba(69,172,171,.32);

}

.review-card__head{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

}

.review-date{

    font-size:.8rem;

    color:var(--muted);

}

.review-card__footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

}

/* Transparência sobre a origem da avaliação (ver Review.imported em
   app/data/reviews.py) — discreta de propósito, não é o foco do
   card. */
.review-source{

    display:flex;

    align-items:center;

    gap:4px;

    padding:2px 8px;

    border-radius:999px;

    font-size:.72rem;

    font-weight:600;

    white-space:nowrap;

}

.review-source--imported{

    color:var(--muted);

    background:rgba(255,255,255,.06);

}

.review-source--verified{

    color:var(--cyan);

    background:rgba(69,172,171,.12);

}

/* Fotos publicadas pelo cliente junto da avaliação (ver Review.photos
   em app/data/reviews.py) — reaproveitada no card da home (hero.css
   só ajusta o tamanho, ver .hero-card .review-photos). */
.review-photos{

    display:flex;

    flex-wrap:wrap;

    gap:6px;

}

.review-photos img{

    width:84px;

    height:84px;

    border-radius:var(--radius-sm);

    object-fit:cover;

    border:1px solid var(--border);

    cursor:pointer;

    transition:border-color var(--transition);

}

.review-photos img:hover{

    border-color:rgba(69,172,171,.5);

}

@media(max-width:900px){

    .review-photos img{

        width:64px;

        height:64px;

    }

}

@media(max-width:640px){

    .review-photos img{

        width:52px;

        height:52px;

    }

}

/* Texto do comentário: card fica com altura flexível (a linha de
   baixo ainda cabe todo o texto quando sobra espaço na grade — ver
   .review-card{display:flex}), mas trunca em 4 linhas pra não deixar
   um card gigante empurrando os vizinhos na mesma fileira. O botão
   "ver mais" só aparece (via reviews.js) quando o texto realmente
   foi cortado. */
.review-card p{

    flex:1;

    color:var(--text);

    line-height:1.7;

}

.review-text{

    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:4;

    overflow:hidden;

}

.review-text--expanded{

    -webkit-line-clamp:unset;

    overflow:visible;

}

.review-text-toggle{

    align-self:flex-start;

    margin-top:-6px;

    padding:0;

    border:none;

    background:none;

    color:var(--cyan);

    font-size:.84rem;

    font-weight:600;

    cursor:pointer;

}

.review-text-toggle:hover{

    text-decoration:underline;

}

.review-text-toggle[hidden]{

    display:none;

}


/* =========================================================
   LIGHTBOX — foto da avaliação em tamanho grande
========================================================= */

.review-lightbox{

    position:fixed;

    inset:0;

    z-index:1400;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:5vh 5vw;

    background:rgba(5,6,20,.88);

    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);

}

.review-lightbox[hidden]{

    display:none;

}

.review-lightbox img{

    max-width:100%;

    max-height:100%;

    border-radius:var(--radius-md);

    box-shadow:0 20px 60px rgba(0,0,0,.5);

}

.review-lightbox__close{

    position:absolute;

    top:20px;

    right:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    width:40px;

    height:40px;

    border-radius:50%;

    color:#fff;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.2);

    cursor:pointer;

}

.review-lightbox__close:hover{

    background:rgba(255,255,255,.16);

}

.review-card cite{

    font-style:normal;

    font-size:.86rem;

    color:var(--muted);

}


/* =========================================================
   RELACIONADOS
========================================================= */

.related-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:24px;

}


/* =========================================================
   LIGHTBOX
========================================================= */

.lightbox{

    position:fixed;

    inset:0;

    z-index:2000;

    display:flex;

    align-items:center;

    justify-content:center;

    /* espaço reservado p/ o botão de fechar (topo) e o contador (base) */
    padding:76px 16px 64px;

    background:rgba(5,6,18,.92);

    backdrop-filter:blur(8px);

    animation:fadeIn .25s ease;

}

.lightbox[hidden]{

    display:none;

}

.lightbox img{

    max-width:100%;

    max-height:100%;

    object-fit:contain;

    border-radius:var(--radius-md);

    border:1px solid rgba(69,172,171,.20);

}

.lightbox-close,
.lightbox-nav{

    display:flex;

    align-items:center;

    justify-content:center;

    width:48px;

    height:48px;

    flex-shrink:0;

    border-radius:50%;

    cursor:pointer;

    color:var(--text);

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.14);

    transition:
        color var(--transition),
        background var(--transition),
        border-color var(--transition);

}

.lightbox-close:hover,
.lightbox-nav:hover{

    color:var(--cyan);

    background:rgba(69,172,171,.14);

    border-color:rgba(69,172,171,.40);

}

.lightbox-close{

    position:absolute;

    top:18px;

    right:18px;

}

/* Setas flutuam sobre as bordas da imagem: não disputam largura,
   evitando overflow horizontal em telas estreitas. */
.lightbox-nav{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    background:rgba(10,10,36,.75);

    backdrop-filter:blur(6px);

}

.lightbox-prev{ left:14px; }
.lightbox-next{ right:14px; }

.lightbox-counter{

    position:absolute;

    bottom:24px;

    left:50%;

    transform:translateX(-50%);

    font-size:.85rem;

    color:var(--muted);

}


/* =========================================================
   TOAST (feedback de carrinho / favoritos / compartilhar)
========================================================= */

.toast{

    position:fixed;

    left:50%;

    bottom:28px;

    z-index:2100;

    transform:translateX(-50%);

    /* nunca ultrapassa a viewport em telas pequenas */
    max-width:min(360px, calc(100vw - 32px));

    text-align:center;

    padding:13px 22px;

    /* Raio pequeno, não "pílula" (999px): a mensagem inclui o nome do
       produto e pode quebrar em 2-3 linhas — border-radius alto vira
       uma bolha/círculo estranho com texto multilinha. */
    border-radius:16px;

    font-size:.9rem;

    font-weight:600;

    line-height:1.4;

    color:var(--text);

    background:rgba(10,10,36,.95);

    border:1px solid rgba(69,172,171,.35);

    box-shadow:0 14px 34px rgba(0,0,0,.4);

    animation:fadeIn .25s ease;

}

.toast[hidden]{

    display:none;

}

@media(max-width:960px){

    .toast{

        /* Acima da barra inferior fixa (.mobile-tabbar), senão o
           toast fica escondido atrás dela. */
        bottom:calc(78px + env(safe-area-inset-bottom));

    }

}


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

/* Sem zoom por hover em telas de toque */
@media(hover:none){

    .gallery-zone:hover img{

        transform:none;

    }

    .gallery-hint{

        display:none;

    }

}

@media(max-width:1024px){

    .product-hero{

        grid-template-columns:1fr;

        gap:32px;

    }

    .details-grid{

        grid-template-columns:1fr;

    }

    .reviews-list,
    .related-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:640px){

    .reviews-list,
    .related-grid{

        grid-template-columns:1fr;

    }

    .buybox-actions{

        flex-direction:column;

        align-items:stretch;

    }

    .qty{

        justify-content:space-between;

    }

    .buy-cta,
    .cart-btn{

        min-width:0;

    }

    .icon-actions{

        justify-content:center;

    }

    .buybox-seals{

        grid-template-columns:1fr;

    }

    .lightbox-nav{

        width:42px;

        height:42px;

    }

    .specs-table th,
    .specs-table td{

        display:block;

        text-align:left;

        padding:4px 0;

    }

    .specs-table tr{

        display:block;

        padding:10px 0;

    }

    .specs-table td{

        color:var(--text);

        font-weight:600;

    }

}