/* =========================================================================
   SINGLE PRODUCT — "RECIBO DO MÓDULO" v3 — SISTEMA SHINEWEB
   Par de: woocommerce/single-product.php  +  js/single-product.js

   Ideia central: o cartão de compra é um recibo de assinatura — papel
   branco com borda serrilhada sobre o papel da marca, planos como linhas
   de uma tabela de preço e uma linha de total. É o único elemento com
   ousadia na página; o resto é tipografia e espaço.

   Namespace próprio (.sw-*) de propósito: o woocommerce.css antigo é um
   arquivo grande e cheio de !important em cima de .lp-product-* / .lp-buybox.
   O que precisa de !important aqui é só o que desfaz regra do CORE do
   WooCommerce (woocommerce-layout.css) ou do global.css.

   Enfileirado só em is_product(), depois do lp-woocommerce-style.
   Versão anterior: css/single-product.v2.css.bak
   ========================================================================= */

.sw-product-page {
    /* Papel, verde e âmbar vêm da marca (woocommerce.css / landing), com
       fallback caso este arquivo carregue sozinho. O fundo continua o papel
       da marca para a página não emendar mal com a nav e o rodapé. */
    --sw-fundo:        var(--paper, #F1EFE6);
    --sw-papel:        #FFFFFF;
    --sw-grafite:      #16211C;
    --sw-texto:        #34413A;
    --sw-cinza:        #5B665F;
    --sw-verde:        var(--ledger, #1E6E52);
    --sw-verde-escuro: #155240;
    --sw-verde-claro:  #E3EFE8;
    --sw-regua:        var(--rule, #D8D2C0);   /* linhas sobre o papel da marca */
    --sw-linha:        #DCE3DE;                /* linhas sobre o recibo branco */
    --sw-ambar-texto:  #8A5418;

    --sw-display: 'Schibsted Grotesk', var(--sans, 'Poppins'), sans-serif;
    --sw-texto-fam: var(--sans, 'Poppins'), sans-serif;

    /* Altura da .lp-nav fixa e quanto o body.is-lp-sistema reserva pra ela.
       Desde a nav v3 (css/landing-nav.css) as duas são 64px; na v2 eram
       87px de nav × 61px reservados, e a diferença entrava no breadcrumb. */
    --sw-nav: 64px;
    --sw-nav-reservado: 64px;

    font-family: var(--sw-texto-fam);
    color: var(--sw-texto);
    background: var(--sw-fundo);
}

.sw-product-page *,
.sw-product-page *::before,
.sw-product-page *::after { box-sizing: border-box; }

/* -------------------------------------------------------------------- *
 * O woocommerce.css antigo põe `overflow-x: hidden` no body. Isso faz do
 * body um container de rolagem, e TODO `position: sticky` descendente
 * para de grudar (o recibo, aqui). `clip` corta o transbordo horizontal
 * SEM criar container de rolagem. Onde `clip` não existe (Safari < 16),
 * cai para `visible`: este layout não transborda na horizontal.
 * A regra antiga é `body.is-lp-sistema.single-product` (0-2-1): o seletor
 * repete as duas classes para empatar e vencer pela ordem.
 * -------------------------------------------------------------------- */
body.single-product,
body.is-lp-sistema.single-product { overflow-x: clip; }
@supports not (overflow-x: clip) {
    body.single-product,
    body.is-lp-sistema.single-product { overflow-x: visible; }
}

html { scroll-behavior: smooth; }
.sw-product-page [id] { scroll-margin-top: calc(var(--sw-nav) + 20px); }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

.sw-wrap {
    width: min(1200px, 100% - 48px);
    margin-inline: auto;
}

.sw-sr {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.sw-product-page a:focus-visible,
.sw-product-page button:focus-visible,
.sw-product-page input:focus-visible,
.sw-product-page select:focus-visible,
.sw-product-page textarea:focus-visible,
.sw-product-page [tabindex]:focus-visible {
    outline: 2px solid var(--sw-verde);
    outline-offset: 2px;
}

/* -------------------------------------------------------------------- */
/* RESETS DEFENSIVOS — desfaz o float/width do core do WooCommerce        */
/* -------------------------------------------------------------------- */
.sw-product { margin: 0 !important; padding: 0 !important; }
.sw-product::before,
.sw-product::after { display: none !important; content: none !important; }

.sw-product .summary.entry-summary,
.sw-product div.images,
.sw-product .woocommerce-product-gallery {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0;
}

/* =========================================================================
   ESTRUTURA
   Desktop: intro e corpo na coluna larga, recibo na estreita ocupando as
   duas linhas (e grudando na leitura). Mobile: intro, recibo, corpo — o
   preço aparece logo depois do nome do módulo.
   ========================================================================= */
.sw-breadcrumb {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    padding-top: calc(var(--sw-nav) - var(--sw-nav-reservado) + 24px);
    font-size: .8125rem; color: var(--sw-cinza);
}
.sw-breadcrumb a { color: var(--sw-cinza); text-decoration: none; }
.sw-breadcrumb a:hover { color: var(--sw-grafite); text-decoration: underline; text-underline-offset: 3px; }
.sw-breadcrumb [aria-current] { color: var(--sw-grafite); }

.sw-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    grid-template-areas:
        "intro   receipt"
        "body    receipt";
    grid-template-rows: auto 1fr;
    column-gap: clamp(40px, 6vw, 96px);
    padding: clamp(28px, 4vw, 52px) 0 clamp(72px, 9vw, 120px);
}
.sw-intro   { grid-area: intro; min-width: 0; }
.sw-receipt { grid-area: receipt; align-self: start; min-width: 0; }
.sw-body    { grid-area: body; min-width: 0; }

/* =========================================================================
   1. INTRO
   ========================================================================= */
.sw-title {
    margin: 0 0 22px;
    font-family: var(--sw-display);
    font-weight: 800;
    font-size: clamp(2.75rem, 6.4vw, 5.25rem);
    line-height: .96;
    letter-spacing: -.045em;
    color: var(--sw-grafite);
    text-wrap: balance;
}
/* Nomes longos ("Tarefas — Agente de IA · Tarefas pelo WhatsApp") não
   cabem no corpo de 84px sem virar quatro linhas. */
.sw-title--long {
    font-size: clamp(2.1rem, 4.2vw, 3.4rem);
    line-height: 1.02;
    letter-spacing: -.035em;
}

.sw-lead { max-width: 42ch; }
.sw-lead p {
    margin: 0 0 10px;
    font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
    line-height: 1.55;
    color: var(--sw-texto);
}
.sw-lead p:last-child { margin-bottom: 0; }

/* Estrelas: uma camada cinza + uma âmbar recortada por width, para
   suportar nota fracionada (4,3) sem meia-estrela em imagem. */
.sw-rating {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    margin: 20px 0 0;
    font-size: .875rem; color: var(--sw-cinza);
}
.sw-stars {
    position: relative; display: inline-block; flex: none;
    width: 82px; height: 14px;
    background: var(--sw-regua);
    -webkit-mask: repeating-linear-gradient(to right, #000 0 14px, transparent 14px 17px);
            mask: repeating-linear-gradient(to right, #000 0 14px, transparent 14px 17px);
}
.sw-stars-fill { position: absolute; inset: 0 auto 0 0; background: var(--amber, #C97A2E); }
.sw-rating strong { color: var(--sw-grafite); font-weight: 600; }
.sw-rating a { color: var(--sw-cinza); text-underline-offset: 3px; }
.sw-rating a:hover { color: var(--sw-grafite); }

/* =========================================================================
   2. RECIBO
   ========================================================================= */
/* A sombra fica no pai e usa drop-shadow: é o único jeito de ela seguir o
   recorte serrilhado da máscara do papel (box-shadow ignora a máscara). */
.sw-receipt {
    filter: drop-shadow(0 22px 30px rgba(22, 33, 28, .13))
            drop-shadow(0 2px 3px rgba(22, 33, 28, .07));
}

.sw-receipt-paper {
    --sw-dente: 9px;
    position: relative;
    padding: 26px 26px calc(24px + var(--sw-dente));
    background: var(--sw-papel);
    border-radius: 14px 14px 0 0;
    color: var(--sw-grafite);
    /* Borda de baixo serrilhada, como papel destacado do bloco. */
    -webkit-mask:
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg)
            bottom / calc(var(--sw-dente) * 2) var(--sw-dente) repeat-x,
        linear-gradient(#000 0 0) top / 100% calc(100% - var(--sw-dente) + 1px) no-repeat;
            mask:
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg)
            bottom / calc(var(--sw-dente) * 2) var(--sw-dente) repeat-x,
        linear-gradient(#000 0 0) top / 100% calc(100% - var(--sw-dente) + 1px) no-repeat;
}

.sw-receipt-title {
    margin: 0 0 18px;
    font-family: var(--sw-display);
    font-size: 1.3125rem; font-weight: 700;
    letter-spacing: -.015em; line-height: 1.2;
    color: var(--sw-grafite);
}

/* ---------- estado de acesso ---------- */
.sw-access {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px;
    margin: 0 0 18px; padding: 11px 14px;
    border-radius: 8px;
    font-size: .875rem; line-height: 1.45; font-weight: 500;
}
.sw-access a {
    font-weight: 600; color: inherit;
    text-decoration: underline; text-underline-offset: 3px;
}
.sw-access--liberado  { background: var(--sw-verde-claro); color: var(--sw-verde-escuro); }
.sw-access--trial     { background: #FBF0E1; color: var(--sw-ambar-texto); }
.sw-access--expirado  { background: #FBEAE7; color: #8E2E1F; }
.sw-access--bloqueado { background: #F2F4F2; color: var(--sw-cinza); }

.sw-receipt-sale {
    margin: -6px 0 16px;
    font-size: .875rem; font-weight: 600; color: var(--sw-ambar-texto);
}

/* ---------- preço nativo ---------- */
.sw-summary { display: block; }

/* global.css estiliza .price/.amount sem namespace — zera antes de vestir. */
.sw-summary .price,
.sw-summary .price .amount,
.sw-summary .price ins,
.sw-summary .price del {
    all: unset;
    font-family: inherit;
}
.sw-summary .price {
    display: block;
    margin: 0 0 14px;
    font-family: var(--sw-display);
    line-height: 1.05;
    color: var(--sw-grafite);
}
.sw-summary .price .woocommerce-Price-amount.amount {
    font-size: 2.25rem; font-weight: 800; letter-spacing: -.03em;}
/* O CSS do WooCommerce pinta `.woocommerce div.product p.price` de
   verde-oliva (#958e09) com especificidade 0-3-2. */
.sw-product-page .sw-summary p.price,
.sw-product-page .sw-summary span.price,
.sw-product-page .sw-summary .price ins { color: var(--sw-grafite) !important; }
.sw-summary .price ins { text-decoration: none; }
.sw-summary .price del {
    display: inline-block; margin-right: 10px;
    font-size: 1rem; color: var(--sw-cinza);
    text-decoration: line-through;
}
.sw-summary .lp-price-suffix {
    font-family: var(--sw-texto-fam);
    font-size: .9375rem; font-weight: 500;
    color: var(--sw-cinza); margin-left: 4px;
}

/* Preço-faixa (R$ X – R$ Y) some assim que uma variação é escolhida. */
.sw-summary.has-variation-selected > .price { display: none; }

/* Com o total do recibo no ar, o preço da variação é redundante — mas o
   bloco continua no DOM, porque é nele que o WooCommerce escreve. */
.sw-summary.sw-has-total .woocommerce-variation-price { display: none; }

.sw-summary .woocommerce-variation-description {
    margin: 0 0 14px;
    font-size: .875rem; line-height: 1.6; color: var(--sw-cinza);
}
.sw-summary .woocommerce-variation-description p { margin: 0; }
.sw-summary .woocommerce-variation-availability { font-size: .8125rem; color: var(--sw-cinza); }

/* ---------- planos (linhas montadas pelo JS) ---------- */
.sw-periods-wrap { margin: 0 0 4px; }
.sw-periods-label {
    display: block; margin: 0 0 8px;
    font-size: .875rem; font-weight: 600; color: var(--sw-grafite);
}
.sw-periods { display: grid; gap: 6px; }

.sw-period {
    /* Três colunas: marca | nome+desconto+aviso (encolhe e quebra linha) |
       preço (nunca encolhe). Com o desconto e o aviso em colunas próprias,
       o preço perdia espaço e encavalava no desconto. */
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    width: 100%;
    margin: 0;
    padding: 13px 14px;
    border: 1.5px solid var(--sw-linha);
    border-radius: 10px;
    background: var(--sw-papel);
    font: inherit; text-align: left; color: var(--sw-grafite);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.sw-period:hover:not([aria-checked="true"]):not(:disabled) { border-color: #A9BDB2; }
.sw-period[aria-checked="true"] {
    border-color: var(--sw-verde);
    background: var(--sw-verde-claro);
}
.sw-period:disabled { opacity: .45; cursor: not-allowed; }

.sw-period-mark {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid #9AA8A0;
    background: var(--sw-papel);
}
.sw-period[aria-checked="true"] .sw-period-mark {
    border-color: var(--sw-verde);
    background: var(--sw-verde);
    box-shadow: inset 0 0 0 3px var(--sw-papel);
}

.sw-period-info {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 4px 8px;
    min-width: 0;
}
.sw-period-label { font-size: .9375rem; font-weight: 600; }

.sw-period-save {
    padding: 2px 8px; border-radius: 999px;
    background: var(--sw-verde-claro); color: var(--sw-verde-escuro);
    font-size: .75rem; font-weight: 600;}
.sw-period[aria-checked="true"] .sw-period-save { background: var(--sw-papel); }

.sw-period-price {
    grid-column: 3;
    justify-self: end;
    font-family: var(--sw-display);
    font-size: 1.0625rem; font-weight: 700;    white-space: nowrap;
}
.sw-period-price small {
    margin-left: 1px;
    font-family: var(--sw-texto-fam);
    font-size: .8125rem; font-weight: 500; color: var(--sw-cinza);
}

/* "no carrinho" vai para a linha de baixo do nome (flex-basis 100%): assim
   ele nunca disputa largura com o desconto e o preço. */
.sw-period-cart { display: none; }
.sw-period.is-in-cart .sw-period-cart {
    display: block;
    flex-basis: 100%;
    font-size: .75rem; font-weight: 500; line-height: 1.2; color: var(--sw-verde-escuro);
}

/* Com as linhas no ar, a tabela nativa sai de cena — mas continua no DOM,
   porque é o <select> dela que o WooCommerce lê e escreve. */
.sw-summary.sw-has-pills .variations { display: none; }

/* Fallback sem JS (ou produto sem pa_periodicidade): o <select> nativo
   aparece, vestido. A tabela vira blocos empilhados — <table> com th/td em
   display:block e tbody/tr em display:table-* deixa linha fantasma no Firefox. */
.sw-summary .variations,
.sw-summary .variations tbody,
.sw-summary .variations tr,
.sw-summary .variations th,
.sw-summary .variations td { display: block; }
.sw-summary .variations { width: 100%; margin: 0 0 16px; border-collapse: collapse; }
.sw-summary .variations th,
.sw-summary .variations td { padding: 0; text-align: left; border: 0; }
.sw-summary .variations th.label label {
    font-size: .875rem; font-weight: 600; color: var(--sw-grafite);
}
.sw-summary .variations td.value { margin: 8px 0 12px; }
.sw-summary .variations select {
    width: 100%; padding: 12px 14px;
    border: 1.5px solid var(--sw-linha); border-radius: 10px;
    background: var(--sw-papel); font-family: inherit; font-size: .9375rem; color: var(--sw-grafite);
}
.sw-summary .reset_variations {
    display: inline-block; margin-bottom: 10px;
    font-size: .8125rem; color: var(--sw-cinza);
}

/* ---------- total ---------- */
.sw-total[hidden] { display: none; }
.sw-total {
    margin: 18px 0 18px;
    padding-top: 16px;
    border-top: 1.5px dashed var(--sw-linha);
}
.sw-total-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    margin: 0;
}
.sw-total-label {
    font-family: var(--sw-display);
    font-size: 1rem; font-weight: 700; color: var(--sw-grafite);
}
.sw-total-value {
    font-family: var(--sw-display);
    font-size: 2.25rem; font-weight: 800;
    letter-spacing: -.035em; line-height: 1;    color: var(--sw-grafite);
}
.sw-total-cycle {
    margin: 8px 0 0;
    font-size: .875rem; line-height: 1.5; color: var(--sw-cinza);
}
.sw-total-save {
    margin: 4px 0 0;
    font-size: .875rem; line-height: 1.5; font-weight: 600; color: var(--sw-verde-escuro);
}
.sw-total-save[hidden] { display: none; }

/* O único movimento automático da página, e só em resposta ao clique:
   o valor do total "assenta" ao trocar de plano. */
.sw-total.is-updated .sw-total-value { animation: swAssenta .45s cubic-bezier(.22, .61, .36, 1); }
@keyframes swAssenta {
    from { opacity: .35; transform: translateY(-6px); }
    to   { opacity: 1;   transform: none; }
}

/* ---------- botões ---------- */
.sw-summary form.cart { margin: 0 !important; padding: 0 !important; }

/* Num produto SIMPLES o <form class="cart"> contém só quantidade + botão,
   então ele mesmo é a linha flex. Num produto VARIÁVEL a linha flex é só
   .woocommerce-variation-add-to-cart. */
.sw-summary form.cart:not(.variations_form),
.sw-summary .woocommerce-variation-add-to-cart {
    display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px;
}
/* O clearfix do WooCommerce (::before/::after com content " ") vira item
   de flex e soma o gap dos dois lados, desalinhando a linha do botão. */
.sw-summary form.cart:not(.variations_form)::before,
.sw-summary form.cart:not(.variations_form)::after,
.sw-summary .woocommerce-variation-add-to-cart::before,
.sw-summary .woocommerce-variation-add-to-cart::after { display: none !important; content: none !important; }
.sw-summary form.variations_form { display: block; }
.sw-summary .single_variation_wrap { display: block; }

.sw-summary .quantity { margin: 0 !important; flex: none; }
.sw-summary .quantity .qty {
    width: 64px; height: 52px; padding: 0 8px; text-align: center;
    border: 1.5px solid var(--sw-linha); border-radius: 10px;
    background: var(--sw-papel); font-family: inherit; font-size: 1rem; color: var(--sw-grafite);
}

/* O global.css tem `.woocommerce button.button.alt { background-color:
   var(--primary-color) !important; padding: 15px 30px !important }` (0-3-1),
   que pintava o botão de verde-oliva. O seletor longo abaixo (0-4-1) existe
   só para vencer essa regra. */
.sw-product-page .sw-summary button.single_add_to_cart_button.button,
.sw-product-page .sw-summary .single_add_to_cart_button,
.sw-btn-solid {
    flex: 1 1 180px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 52px; padding: 0 22px !important;
    border: 0 !important; border-radius: 10px !important;
    background: var(--sw-verde) !important;
    color: #fff !important;
    font-family: var(--sw-display) !important;
    font-size: 1rem !important; font-weight: 700 !important;
    letter-spacing: 0 !important; text-transform: none !important;
    text-decoration: none; cursor: pointer;
    box-shadow: none !important;
    transition: background-color .15s ease;
}
.sw-product-page .sw-summary button.single_add_to_cart_button.button:hover,
.sw-btn-solid:hover { background: var(--sw-verde-escuro) !important; }
.sw-product-page .sw-summary button.single_add_to_cart_button.button.disabled,
.sw-product-page .sw-summary button.single_add_to_cart_button.button:disabled {
    background: #B7C2BC !important; cursor: not-allowed;
}
.sw-summary .single_add_to_cart_button.loading { opacity: .75; }

.sw-btn-sm { min-height: 44px; padding: 0 18px; font-size: .9375rem !important; flex: none; }

.sw-btn-ghost {
    width: 100%;
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; padding: 0 20px;
    border: 1.5px solid var(--sw-verde); border-radius: 10px;
    background: transparent; color: var(--sw-verde-escuro);
    font-family: var(--sw-display); font-size: .9375rem; font-weight: 700;
    text-decoration: none; cursor: pointer;
    transition: background-color .15s ease;
}
.sw-btn-ghost:hover { background: var(--sw-verde-claro); }
.sw-btn-ghost[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* ---------- "já está no carrinho" ---------- */
.sw-in-cart[hidden] { display: none; }
.sw-in-cart { display: grid; gap: 10px; }
.sw-in-cart-msg {
    margin: 0;
    font-size: .875rem; font-weight: 600; color: var(--sw-verde-escuro);
}
.sw-in-cart .sw-btn-solid { width: 100%; flex: none; }

/* ---------- teste grátis ---------- */
.sw-trial { margin-top: 10px; }
.sw-trial-note {
    margin: 10px 0 0; text-align: center;
    font-size: .8125rem; line-height: 1.5; color: var(--sw-cinza);
}
.sw-trial-erro {
    margin: 10px 0 0; padding: 9px 12px;
    border-radius: 8px;
    background: #FBEAE7; color: #8E2E1F;
    font-size: .8125rem;
}
.sw-trial-erro[hidden] { display: none; }

/* ---------- notas abaixo do papel ---------- */
.sw-receipt-notes {
    margin: 0; padding: 14px 6px 0;
    list-style: none;
    display: grid; gap: 4px;
    font-size: .8125rem; line-height: 1.5; color: var(--sw-cinza);
    filter: none;
}

/* =========================================================================
   3. CORPO
   ========================================================================= */
/* Espaço entre blocos por gap, não por margin: plugins penduram blocos
   aqui dentro e margin de um anula/soma com a do outro. */
.sw-body {
    display: grid;
    gap: clamp(52px, 6vw, 80px);
    padding-top: clamp(44px, 5vw, 64px);
}
.sw-block { min-width: 0; }

.sw-h2,
.sw-block > h2,
.sw-block #reviews .woocommerce-Reviews-title,
.sw-block #reviews #reply-title {
    margin: 0 0 20px;
    font-family: var(--sw-display);
    font-size: clamp(1.4rem, 2.2vw, 1.75rem);
    font-weight: 700; line-height: 1.15; letter-spacing: -.02em;
    color: var(--sw-grafite);
}

/* ---------- o que o módulo faz ---------- */
.sw-features {
    margin: 0; padding: 0; list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    column-gap: 40px;
}
.sw-features li {
    position: relative;
    padding: 14px 0 14px 30px;
    border-top: 1px solid var(--sw-regua);
    font-size: 1rem; line-height: 1.5; color: var(--sw-grafite);
}
.sw-features li::before {
    content: '';
    position: absolute; left: 3px; top: 20px;
    width: 13px; height: 7px;
    border-left: 2px solid var(--sw-verde);
    border-bottom: 2px solid var(--sw-verde);
    transform: rotate(-45deg);
}

/* ---------- adicionais do módulo (agente de IA, setup, suporte) ----------
   Linhas de preço sobre o papel, como "O que o módulo faz": régua em cima,
   nome à esquerda, preço e botão alinhados à direita. */
.sw-adic-intro { margin: -8px 0 18px; font-size: .9375rem; color: var(--sw-cinza); }
.sw-adic-lista { margin: 0; padding: 0; list-style: none; }
.sw-adic {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px 18px;
    padding: 18px 0;
    border-top: 1px solid var(--sw-regua);
}
.sw-adic:last-child { border-bottom: 1px solid var(--sw-regua); }
.sw-adic-ico {
    display: grid; place-items: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--sw-verde-claro); color: var(--sw-verde-escuro);
    font-size: 1.05rem;
}
.sw-adic-ico--atd { background: #FBF1E4; color: var(--sw-ambar-texto); }
.sw-adic-nome {
    margin: 0;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
    font-family: var(--sw-display); font-size: 1.0625rem; font-weight: 700; color: var(--sw-grafite);
}
.sw-adic-nome a { color: inherit; text-decoration: none; }
.sw-adic-nome a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sw-adic-tag { font-family: var(--sw-texto-fam); font-size: .8125rem; font-weight: 500; color: var(--sw-cinza); }
.sw-adic-desc { margin: 4px 0 0; max-width: 60ch; font-size: .9375rem; line-height: 1.5; color: var(--sw-texto); }
.sw-adic-compra { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
/* sem tabular-nums: no Schibsted ele abre espaço em volta da vírgula ("347 , 00") */
.sw-adic-preco {
    font-family: var(--sw-display); font-size: 1rem; font-weight: 700; color: var(--sw-grafite);
    white-space: nowrap;
}
.sw-adic-preco small { font-family: var(--sw-texto-fam); font-size: .8125rem; font-weight: 500; color: var(--sw-cinza); }
.sw-adic-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 42px; padding: 0 18px;
    border: 1.5px solid var(--sw-verde); border-radius: 10px;
    background: transparent; color: var(--sw-verde-escuro);
    font-family: var(--sw-display); font-size: .9375rem; font-weight: 700;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background-color .15s ease;
}
.sw-adic-btn:hover { background: var(--sw-verde-claro); }
.sw-adic-btn:focus-visible { outline: 2px solid var(--sw-verde); outline-offset: 2px; }
.sw-adic-btn[aria-busy="true"] { opacity: .6; pointer-events: none; }
.sw-adic-btn.is-feito { border-color: transparent; background: var(--sw-verde-claro); }
.sw-adic-status {
    padding: 4px 12px; border-radius: 8px;
    background: var(--sw-verde-claro); color: var(--sw-verde-escuro);
    font-size: .8125rem; font-weight: 600; white-space: nowrap;
}
.sw-adic-erro {
    margin: 14px 0 0; padding: 9px 12px; border-radius: 8px;
    background: #FBEAE7; color: #8E2E1F; font-size: .875rem;
}
.sw-adic-erro[hidden] { display: none; }
.sw-receipt-notes a { color: var(--sw-verde-escuro); font-weight: 600; }
@media (max-width: 640px) {
    .sw-adic { grid-template-columns: 40px minmax(0, 1fr); }
    .sw-adic-ico { width: 40px; height: 40px; }
    .sw-adic-compra { grid-column: 2; justify-content: space-between; }
}

/* ---------- imagens ---------- */
.sw-gallery { margin: 0; }
.sw-gallery .woocommerce-product-gallery { position: relative; }
.sw-gallery .woocommerce-product-gallery__wrapper {
    margin: 0 !important;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--sw-regua);
    background: var(--sw-papel);
}

/* Flexslider e lupa estão desligados nas páginas de produto (functions.php).
   O WooCommerce só empilha as imagens; a primeira aparece e o
   js/product-gallery-thumbs.js troca as demais via style inline, que ganha
   da regra de display:none abaixo. */
.sw-gallery .woocommerce-product-gallery__image {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
}
.sw-gallery .woocommerce-product-gallery__image:not(:first-child) { display: none; }
.sw-gallery .woocommerce-product-gallery__image a { display: block; }
.sw-gallery .woocommerce-product-gallery__image img {
    display: block !important;
    width: 100% !important; max-width: 100% !important;
    height: auto !important;
    margin: 0 !important; border: 0 !important; border-radius: 0 !important;
}

/* Botão do lightbox (PhotoSwipe) */
.sw-gallery .woocommerce-product-gallery__trigger {
    position: absolute; top: 12px; right: 12px; z-index: 3;
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(22, 33, 28, .72); color: #fff;
    font-size: 0; text-decoration: none;
}
.sw-gallery .woocommerce-product-gallery__trigger::before {
    content: '\f00e'; /* fa-magnifying-glass-plus */
    font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 15px;
}
.sw-gallery .woocommerce-product-gallery__trigger img { display: none; }

/* Miniaturas: colunas de largura fixa — com 1fr, poucas imagens esticavam
   a miniatura e ela saía gigante e borrada. */
.sw-gallery .flex-control-thumbs {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, 120px);
    gap: 10px;
    margin: 12px 0 0 !important; padding: 0 !important;
    list-style: none;
}
.sw-gallery .flex-control-thumbs li { width: auto !important; float: none !important; margin: 0 !important; }
.sw-gallery .flex-control-thumbs img {
    display: block; width: 100% !important; height: auto !important;
    aspect-ratio: 16 / 10; object-fit: cover; object-position: top center;
    border-radius: 8px;
    border: 2px solid transparent;
    opacity: .6; cursor: pointer;
    transition: opacity .15s ease, border-color .15s ease;
}
.sw-gallery .flex-control-thumbs img:hover { opacity: .9; }
.sw-gallery .flex-control-thumbs img.flex-active,
.sw-gallery .flex-control-thumbs .flex-active img {
    opacity: 1; border-color: var(--sw-verde);
}

/* ---------- como funciona ---------- */
.sw-prose p,
.sw-prose li {
    max-width: 64ch;
    font-size: 1.0625rem; line-height: 1.72; color: var(--sw-texto);
}
.sw-prose p { margin: 0 0 16px; }
.sw-prose > :last-child { margin-bottom: 0; }
.sw-prose h3 {
    margin: 28px 0 10px;
    font-family: var(--sw-display);
    font-size: 1.1875rem; font-weight: 700; color: var(--sw-grafite);
}
.sw-prose ul, .sw-prose ol { margin: 0 0 16px; padding-left: 20px; }
.sw-prose a { color: var(--sw-verde-escuro); text-underline-offset: 3px; }

/* ---------- avaliações (aba nativa, agora bloco) ---------- */
.sw-block #reviews .commentlist { margin: 0; padding: 0; list-style: none; }
.sw-block #reviews .comment_container {
    display: flex; gap: 14px;
    padding: 18px 0; border-top: 1px solid var(--sw-regua);
}
.sw-block #reviews img.avatar {
    width: 42px !important; height: 42px !important;
    border-radius: 50% !important; border: 0 !important;
    position: static !important; padding: 0 !important; float: none !important;
}
.sw-block #reviews .comment-text { margin: 0 !important; border: 0 !important; padding: 0 !important; }
.sw-block #reviews .star-rating { color: var(--amber, #C97A2E); }
.sw-block #reviews .woocommerce-noreviews { color: var(--sw-cinza); }
.sw-block #review_form input[type="text"],
.sw-block #review_form input[type="email"],
.sw-block #review_form textarea {
    width: 100%; padding: 11px 13px;
    border: 1.5px solid var(--sw-regua); border-radius: 10px;
    background: var(--sw-papel); font-family: inherit; font-size: .9375rem;
}
.sw-block #review_form .submit {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 46px; padding: 0 24px;
    border: 0 !important; border-radius: 10px !important;
    background: var(--sw-verde) !important; color: #fff !important;
    font-family: var(--sw-display) !important; font-weight: 700 !important;
    text-transform: none !important; cursor: pointer;
}

/* ---------- antes de assinar ---------- */
.sw-facts { margin: 0; }
.sw-facts > div {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 8px 24px;
    padding: 16px 0;
    border-top: 1px solid var(--sw-regua);
}
.sw-facts dt {
    margin: 0;
    font-family: var(--sw-display);
    font-size: 1rem; font-weight: 700; color: var(--sw-grafite);
}
.sw-facts dd {
    margin: 0; max-width: 56ch;
    font-size: 1rem; line-height: 1.6; color: var(--sw-texto);
}

.sw-help {
    display: inline-flex; align-items: center; gap: 9px;
    margin-top: 22px;
    font-weight: 600; color: var(--sw-verde-escuro);
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.sw-help i { font-size: 1.125rem; }
.sw-help:hover { color: var(--sw-grafite); }

/* =========================================================================
   4. COMBINA COM — miniatura + texto solto no papel, sem card em volta
   ========================================================================= */
.sw-combo {
    padding: clamp(56px, 7vw, 96px) 0 clamp(72px, 9vw, 120px);
    border-top: 1px solid var(--sw-regua);
}
.sw-combo-list {
    margin: 0; padding: 0; list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    column-gap: 40px;
}
.sw-combo-item {
    display: grid; gap: 6px; align-content: start;
    height: 100%;
    padding: 0 0 22px;
    color: inherit; text-decoration: none;
}
.sw-combo-name {
    font-family: var(--sw-display);
    font-size: 1.1875rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em;
    color: var(--sw-grafite);
}
.sw-combo-item:hover .sw-combo-name { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

.sw-combo-thumb.is-empty {
    display: flex; align-items: center; justify-content: center;
    background: var(--sw-verde-claro);
    font-family: var(--sw-display);
    font-size: 3rem; font-weight: 800; line-height: 1;
    color: var(--sw-verde);
}
.sw-combo-thumb {
    display: block;
    margin-bottom: 10px;
    aspect-ratio: 16 / 10;
    border-radius: 10px;
    border: 1px solid var(--sw-regua);
    background: var(--sw-papel);
    overflow: hidden;
    transition: border-color .15s ease;
}
.sw-combo-thumb img {
    display: block;
    width: 100% !important; height: 100% !important;
    margin: 0 !important;
    object-fit: cover; object-position: top center;
}
.sw-combo-item:hover .sw-combo-thumb { border-color: var(--sw-verde); }
.sw-combo-desc { font-size: .9375rem; line-height: 1.55; color: var(--sw-cinza); }
.sw-combo-price {
    margin-top: 4px;
    font-size: .9375rem; font-weight: 600; color: var(--sw-verde-escuro);}
/* Fallback get_price_html(): herda a linha em vez do estilo do global.css. */
.sw-combo-price .amount,
.sw-combo-price ins { font: inherit; color: inherit; text-decoration: none; }
.sw-combo-price .lp-price-suffix { font-weight: 500; }

/* =========================================================================
   BARRA DE COMPRA FIXA (mobile)
   ========================================================================= */
.sw-mobilebar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    display: none; align-items: center; gap: 14px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--sw-papel);
    border-top: 1px solid var(--sw-regua);
    box-shadow: 0 -10px 24px -18px rgba(22, 33, 28, .45);
}
.sw-mobilebar[hidden] { display: none !important; }
.sw-mobilebar-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.sw-mobilebar-name {
    font-size: .8125rem; color: var(--sw-cinza);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sw-mobilebar-price {
    font-family: var(--sw-display);
    font-size: 1rem; font-weight: 700; color: var(--sw-grafite);}
.sw-mobilebar-price .woocommerce-Price-amount,
.sw-mobilebar-price ins { font: inherit; color: inherit; text-decoration: none; }
.sw-mobilebar-price del { display: none; }
.sw-mobilebar-price .lp-price-suffix { font-weight: 500; color: var(--sw-cinza); margin-left: 2px; }

/* =========================================================================
   NOTIFICAÇÕES DO WOOCOMMERCE
   ========================================================================= */
.sw-product-page .woocommerce-message,
.sw-product-page .woocommerce-info,
.sw-product-page .woocommerce-error {
    width: min(1200px, 100% - 48px);
    margin: 20px auto 0 !important;
    padding: 14px 18px !important;
    border: 0 !important; border-left: 3px solid var(--sw-verde) !important;
    border-radius: 8px;
    background: var(--sw-verde-claro) !important;
    font-size: .9375rem; color: var(--sw-grafite);
    list-style: none;
}
.sw-product-page .woocommerce-message::before,
.sw-product-page .woocommerce-info::before,
.sw-product-page .woocommerce-error::before { display: none !important; }
.sw-product-page .woocommerce-error { background: #FBEAE7 !important; border-left-color: #8E2E1F !important; }
.sw-product-page .woocommerce-message .button,
.sw-product-page .woocommerce-info .button {
    float: right;
    padding: 6px 14px; border-radius: 8px;
    background: var(--sw-verde) !important; color: #fff !important;
    font-size: .875rem !important; text-decoration: none;
}

.sw-password { padding: 80px 0; }

@media (prefers-reduced-motion: reduce) {
    .sw-total.is-updated .sw-total-value { animation: none; }
}

/* =========================================================================
   RESPONSIVO
   ========================================================================= */
/* O recibo só gruda quando cabe inteiro na altura da tela (com o plano
   Anual escolhido ele passa de 730px); se fosse mais alto que a janela,
   grudar esconderia o botão de comprar. Em telas mais baixas (notebook
   1366x768) quem acompanha a leitura é a barra fixa do rodapé. */
@media (min-width: 901px) and (min-height: 860px) {
    .sw-receipt { position: sticky; top: calc(var(--sw-nav) + 24px); }
}
@media (min-width: 901px) and (max-height: 859px) {
    .sw-mobilebar {
        display: flex;
        padding-inline: max(24px, (100% - 1200px) / 2);
    }
    .sw-mobilebar-info { flex-direction: row; align-items: baseline; gap: 14px; }
    body.single-product { padding-bottom: 76px; }
}

@media (max-width: 1080px) {
    .sw-layout { grid-template-columns: minmax(0, 1fr) 360px; column-gap: 40px; }
    .sw-receipt-paper { padding-inline: 22px; }
}

@media (max-width: 900px) {
    .sw-wrap { width: min(1200px, 100% - 36px); }

    .sw-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "intro"
            "receipt"
            "body";
        grid-template-rows: none;
    }
    .sw-receipt { margin-top: 32px; max-width: 520px; }

    .sw-mobilebar { display: flex; }
    /* Espaço para a barra fixa não cobrir o rodapé. */
    body.single-product { padding-bottom: 76px; }
}

@media (max-width: 560px) {
    .sw-wrap { width: min(1200px, 100% - 32px); }

    .sw-breadcrumb { padding-top: calc(var(--sw-nav) - var(--sw-nav-reservado) + 16px); }
    .sw-layout { padding-top: 22px; }
    .sw-title { font-size: clamp(2.5rem, 12vw, 3.25rem); }
    .sw-title--long { font-size: clamp(1.9rem, 8.4vw, 2.4rem); }

    .sw-receipt-paper { padding: 22px 18px calc(20px + var(--sw-dente)); }
    .sw-period { padding: 12px; column-gap: 10px; }

    .sw-facts > div { grid-template-columns: minmax(0, 1fr); }

    /* Duas por linha: uma coluna só empilhava quatro imagens grandes. */
    .sw-combo-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
    .sw-combo-name { font-size: 1rem; }
    .sw-combo-desc { display: none; }
    .sw-combo-price { font-size: .875rem; }

    .sw-product-page .woocommerce-message,
    .sw-product-page .woocommerce-info,
    .sw-product-page .woocommerce-error { width: min(1200px, 100% - 32px); }
}