/* ============================================================
   ONDACOR · PRODUCT PAGE (v0.1.0)

   CSS editorial para página de produto WooCommerce.
   Carrega apenas em is_product() (ver functions.php enqueue).

   Estratégia: Sub-fase A — CSS only, sem mudar templates PHP
   nem tocar em Elementor. Apanha visualmente o que conseguir
   via classes universais WooCommerce.

   Mini-pacotes:
   - A1: Nome do produto (tipografia editorial Cormorant)
   - A2-A8: virão a seguir, um a um, validados em produção
   ============================================================ */


/* ============================================================
   ▼▼▼ A1 — NOME DO PRODUTO ▼▼▼

   Antes: Manrope sans-serif, tamanho default Elementor (≈30px)
   Depois: Cormorant Garamond serif, ≈48px desktop / 36px mobile

   Selector específico: combina .product_title (WC) + classe
   Elementor (.elementor-heading-title) para apanhar APENAS o H1
   da página de produto, não outros headings.

   Especificidade: .single-product .product_title.elementor-heading-title
   = 0,3,1 (1 classe body + 2 classes elemento + 1 tag)
   ============================================================ */

body.single-product .product_title.elementor-heading-title {
  font-family: var(--ond-serif) !important;
  font-size: 48px !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.005em !important;
  color: var(--ond-ink) !important;
  margin-bottom: 18px !important;
}

@media (max-width: 900px) {
  body.single-product .product_title.elementor-heading-title {
    font-size: 36px !important;
  }
}

@media (max-width: 480px) {
  body.single-product .product_title.elementor-heading-title {
    font-size: 30px !important;
  }
}

/* ▲▲▲ A1 — FIM ▲▲▲ */


/* ============================================================
   ▼▼▼ A2 — PREÇO PRINCIPAL ▼▼▼

   Antes: Manrope ~16px, currency e amount no mesmo peso.
   Depois: Manrope 22px, currency 16px cinza, amount 22px preto.

   Selector específico: apanha apenas os preços que aparecem
   imediatamente a seguir ao .product_title ou dentro do form.cart.
   Evita apanhar preços de cards relacionados (.related .price)
   ou outros widgets de preço noutras zonas.
   ============================================================ */

/* Container do preço — espaço editorial */
body.single-product .product_title.elementor-heading-title + .price,
body.single-product form.cart .price,
body.single-product .summary > .price {
  font-family: var(--ond-sans) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  color: var(--ond-ink) !important;
  margin-bottom: 24px !important;
  line-height: 1.2 !important;
}

/* Símbolo da moeda (€) — mais pequeno e cinza */
body.single-product .product_title.elementor-heading-title + .price .woocommerce-Price-currencySymbol,
body.single-product form.cart .price .woocommerce-Price-currencySymbol,
body.single-product .summary > .price .woocommerce-Price-currencySymbol {
  font-size: 16px !important;
  vertical-align: top !important;
  margin-right: 1px !important;
  color: var(--ond-muted) !important;
  font-weight: 300 !important;
}

/* Preço cortado (em produtos com promoção) — cinza claro com strikethrough */
body.single-product .product_title.elementor-heading-title + .price del,
body.single-product form.cart .price del,
body.single-product .summary > .price del {
  color: var(--ond-muted-soft) !important;
  font-size: 16px !important;
  margin-left: 14px !important;
  font-weight: 300 !important;
  text-decoration: line-through !important;
  opacity: 0.9 !important;
}

/* Preço novo (depois do strikethrough) */
body.single-product .product_title.elementor-heading-title + .price ins,
body.single-product form.cart .price ins,
body.single-product .summary > .price ins {
  background: transparent !important;
  text-decoration: none !important;
  color: var(--ond-ink) !important;
  font-weight: 400 !important;
}

/* Mobile: tamanho ligeiramente menor */
@media (max-width: 480px) {
  body.single-product .product_title.elementor-heading-title + .price,
  body.single-product form.cart .price,
  body.single-product .summary > .price {
    font-size: 20px !important;
  }
  body.single-product .product_title.elementor-heading-title + .price .woocommerce-Price-currencySymbol,
  body.single-product form.cart .price .woocommerce-Price-currencySymbol,
  body.single-product .summary > .price .woocommerce-Price-currencySymbol {
    font-size: 14px !important;
  }
}

/* ▲▲▲ A2 — FIM ▲▲▲ */


/* ============================================================
   ▼▼▼ A3 — DESCRIÇÃO CURTA ▼▼▼

   Antes: Manrope sans-serif, preto, sem destaque editorial.
   Depois: Cormorant Garamond italic, 17px, cinza muted.

   Estilo "citação" — pequeno parágrafo editorial que serve de
   contexto antes da tabela de características e do CTA.

   IMPORTANTE: A descrição curta neste site contém DUAS coisas
   no mesmo campo: o parágrafo de introdução + uma lista de
   características (Tamanho, Capacidade, etc.).

   Por isso aplicamos o estilo italic editorial APENAS ao primeiro
   parágrafo. As listas e títulos lá dentro ficam intactos para
   serem tratados no Mini-pacote A4 (tabela de características).
   ============================================================ */

/* Apenas o PRIMEIRO parágrafo direto (texto introdutório) */
body.single-product .woocommerce-product-details__short-description > p:first-child {
  font-family: var(--ond-serif) !important;
  font-style: italic !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: var(--ond-muted) !important;
  margin-bottom: 22px !important;
}

/* Container — espaço editorial à volta */
body.single-product .woocommerce-product-details__short-description {
  margin-top: 8px !important;
  margin-bottom: 28px !important;
  padding: 0 !important;
}

/* Negrito dentro do primeiro parágrafo (ex: <strong>caneca</strong>)
   passa a "italic semibold" caramelo subtil — mais editorial
   que negrito agressivo */
body.single-product .woocommerce-product-details__short-description > p:first-child strong,
body.single-product .woocommerce-product-details__short-description > p:first-child b {
  font-weight: 500 !important;
  color: var(--ond-accent-dark) !important;
}

/* Mobile: tamanho ligeiramente menor */
@media (max-width: 480px) {
  body.single-product .woocommerce-product-details__short-description > p:first-child {
    font-size: 16px !important;
  }
}

/* ▲▲▲ A3 — FIM ▲▲▲ */


/* ============================================================
   ▼▼▼ A4 — TABELA DE CARACTERÍSTICAS ▼▼▼

   Antes: lista <ul> com bullets pretos, "Característica: valor"
   inline, sem hierarquia visual.

   Depois: layout vertical editorial — label em small caps Manrope
   por cima, valor em Manrope regular por baixo, separadores subtis
   entre items, sem bullets.

   IMPORTANTE: reaproveita o mesmo container .woocommerce-product-
   details__short-description (a "descrição curta" deste site contém
   também a lista de características). HTML não muda — só CSS.

   Estrutura HTML real:
     <p>Características:</p>
     <ul>
       <li><strong>Tamanho:</strong> 9,5 × 8,2 cm</li>
       <li>...</li>
     </ul>
   ============================================================ */

/* Título "Características:" → header editorial small caps */
body.single-product .woocommerce-product-details__short-description > p:not(:first-child) {
  font-family: var(--ond-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--ond-muted) !important;
  margin: 32px 0 14px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--ond-rule) !important;
}

/* Esconder os ":" no título "Características:" via pseudo (truque
   visual: o texto fica "Características" sem dois-pontos). Não
   conseguimos editar texto, mas podemos esconder o caractere. */
body.single-product .woocommerce-product-details__short-description > p:not(:first-child):after {
  /* Não funciona universalmente, deixamos o ":" — fica subtil */
}

/* Lista <ul> — sem bullets, sem padding default */
body.single-product .woocommerce-product-details__short-description ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

/* Cada item — bloco com separador subtil */
body.single-product .woocommerce-product-details__short-description ul li {
  display: block !important;
  padding: 14px 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--ond-rule) !important;
  font-family: var(--ond-sans) !important;
  font-size: 14px !important;
  color: var(--ond-ink) !important;
  line-height: 1.5 !important;
}

/* Último item sem separador inferior */
body.single-product .woocommerce-product-details__short-description ul li:last-child {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Label (a parte em <strong>) → small caps Manrope acima do valor */
body.single-product .woocommerce-product-details__short-description ul li strong,
body.single-product .woocommerce-product-details__short-description ul li b {
  display: block !important;
  font-family: var(--ond-sans) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--ond-muted) !important;
  margin-bottom: 4px !important;
}

/* Mobile: ligeiramente menor */
@media (max-width: 480px) {
  body.single-product .woocommerce-product-details__short-description ul li {
    font-size: 13px !important;
    padding: 12px 0 !important;
  }
  body.single-product .woocommerce-product-details__short-description ul li strong,
  body.single-product .woocommerce-product-details__short-description ul li b {
    font-size: 9px !important;
  }
}

/* ▲▲▲ A4 — FIM ▲▲▲ */


/* ============================================================
   ▼▼▼ A5 — META (REF / CATEGORIAS / TAGS) ▼▼▼

   Antes: texto inline Manrope sem hierarquia, links default.
   Depois: hierarquia editorial — labels em small caps cinza,
   valores em Manrope normal, links em cinza com hover caramelo,
   separadores subtis entre Ref/Categorias/Tags.

   Selectores WooCommerce universais:
   - .product_meta       → container
   - .sku_wrapper        → Ref + valor
   - .posted_in          → Categorias
   - .tagged_as          → Tags
   ============================================================ */

/* Container — espaço editorial e separadores */
body.single-product .product_meta {
  margin-top: 28px !important;
  padding: 18px 0 !important;
  border-top: 1px solid var(--ond-rule) !important;
  border-bottom: 1px solid var(--ond-rule) !important;
  font-family: var(--ond-sans) !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
  color: var(--ond-ink) !important;
}

/* Cada linha (Ref, Categorias, Tags) — separadores subtis entre elas */
body.single-product .product_meta > .sku_wrapper,
body.single-product .product_meta > .posted_in,
body.single-product .product_meta > .tagged_as {
  display: block !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

/* Labels (palavras antes dos valores) — small caps cinza */
body.single-product .product_meta .sku_wrapper,
body.single-product .product_meta .posted_in,
body.single-product .product_meta .tagged_as {
  color: var(--ond-muted-soft) !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}

/* O valor SKU (LENAS) — fica em Manrope normal escuro */
body.single-product .product_meta .sku {
  color: var(--ond-ink) !important;
  font-family: var(--ond-sans) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  margin-left: 8px !important;
}

/* Links das categorias e tags — cinza muted com hover caramelo */
body.single-product .product_meta a {
  color: var(--ond-muted) !important;
  font-family: var(--ond-sans) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  text-decoration: none !important;
  border-bottom: 1px dotted transparent !important;
  transition: color 0.2s ease, border-color 0.2s ease !important;
  margin-left: 4px !important;
}

body.single-product .product_meta a:hover {
  color: var(--ond-ink) !important;
  border-bottom-color: var(--ond-rule-strong) !important;
}

/* Mobile: ligeiramente menor */
@media (max-width: 480px) {
  body.single-product .product_meta {
    font-size: 11px !important;
  }
  body.single-product .product_meta .sku_wrapper,
  body.single-product .product_meta .posted_in,
  body.single-product .product_meta .tagged_as {
    font-size: 9px !important;
  }
  body.single-product .product_meta a,
  body.single-product .product_meta .sku {
    font-size: 11px !important;
  }
}

/* ▲▲▲ A5 — FIM ▲▲▲ */


/* ============================================================
   ▼▼▼ A6 — TABS MINIMALISTAS (DESCRIÇÃO / INFO / AVALIAÇÕES) ▼▼▼

   Antes: botões pesados com background, sublinhado azul/cinza no activo.
   Depois: tabs editoriais minimalistas — sem background, fonte Manrope
   uppercase com letterspacing, sublinhado caramelo a indicar activo.

   Padrão de design: linha base subtil --ond-rule no container, apenas
   o tab activo "fura" com sublinhado caramelo de 1px. Hover transita
   suavemente para preto.

   Selectors WooCommerce universais (confirmados no DOM dump):
   - .woocommerce-tabs                 → container
   - .woocommerce-tabs .tabs           → <ul> nav
   - .woocommerce-tabs .tabs li        → cada tab
   - .woocommerce-tabs .tabs li.active → activo
   - .woocommerce-Tabs-panel           → paineis de conteúdo
   ============================================================ */

/* Container das tabs */
body.single-product .woocommerce-tabs {
  margin-top: 60px !important;
  padding-top: 60px !important;
  border-top: 1px solid var(--ond-rule) !important;
}

/* Nav <ul> — flex horizontal, sem bullets, com border base subtil */
body.single-product .woocommerce-tabs ul.tabs {
  display: flex !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 40px 0 !important;
  border-bottom: 1px solid var(--ond-rule) !important;
  background: transparent !important;
  gap: 36px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Esconder o ::before/::after que algumas themes WooCommerce default usam */
body.single-product .woocommerce-tabs ul.tabs::before,
body.single-product .woocommerce-tabs ul.tabs::after,
body.single-product .woocommerce-tabs ul.tabs li::before,
body.single-product .woocommerce-tabs ul.tabs li::after {
  display: none !important;
  content: none !important;
}

/* Cada item da nav */
body.single-product .woocommerce-tabs ul.tabs li {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  position: relative !important;
}

/* Link dentro do tab — small caps Manrope */
body.single-product .woocommerce-tabs ul.tabs li a {
  display: inline-block !important;
  font-family: var(--ond-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--ond-muted) !important;
  padding: 16px 0 !important;
  margin-bottom: -1px !important;
  text-decoration: none !important;
  border: 0 !important;
  background: transparent !important;
  position: relative !important;
  white-space: nowrap !important;
  transition: color 0.25s ease !important;
}

/* Sublinhado activo — animação subtil de scale */
body.single-product .woocommerce-tabs ul.tabs li a::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 1px !important;
  background: var(--ond-accent) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 0.3s cubic-bezier(.4, 0, .2, 1) !important;
}

/* Estado activo: cor preta + sublinhado caramelo aparece */
body.single-product .woocommerce-tabs ul.tabs li.active a {
  color: var(--ond-ink) !important;
}

body.single-product .woocommerce-tabs ul.tabs li.active a::after {
  transform: scaleX(1) !important;
}

/* Hover (em tabs não activos) — cor escurece */
body.single-product .woocommerce-tabs ul.tabs li:not(.active) a:hover {
  color: var(--ond-ink) !important;
}

/* ─── Paineis de conteúdo ───────────────────────────────────── */
body.single-product .woocommerce-Tabs-panel {
  font-family: var(--ond-sans) !important;
  color: var(--ond-ink) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  max-width: 760px !important;
}

/* Headings dentro dos paineis */
body.single-product .woocommerce-Tabs-panel h2,
body.single-product .woocommerce-Tabs-panel h3 {
  font-family: var(--ond-serif) !important;
  font-weight: 400 !important;
  color: var(--ond-ink) !important;
  margin-top: 0 !important;
}

body.single-product .woocommerce-Tabs-panel h2 {
  font-size: 28px !important;
  margin-bottom: 22px !important;
}

body.single-product .woocommerce-Tabs-panel h3 {
  font-size: 18px !important;
  margin: 28px 0 10px !important;
}

/* Parágrafos */
body.single-product .woocommerce-Tabs-panel p {
  margin-bottom: 16px !important;
}

/* Listas dentro de paineis — sem bullets pretos, traço caramelo subtil */
body.single-product .woocommerce-Tabs-panel ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin-bottom: 16px !important;
}

body.single-product .woocommerce-Tabs-panel ul li {
  position: relative !important;
  padding-left: 22px !important;
  margin-bottom: 8px !important;
  line-height: 1.6 !important;
}

body.single-product .woocommerce-Tabs-panel ul li::before {
  content: '—' !important;
  position: absolute !important;
  left: 0 !important;
  color: var(--ond-accent) !important;
}

/* Mobile: tabs com scroll horizontal (já com overflow-x) e tipografia menor */
@media (max-width: 768px) {
  body.single-product .woocommerce-tabs {
    margin-top: 40px !important;
    padding-top: 40px !important;
  }
  body.single-product .woocommerce-tabs ul.tabs {
    gap: 24px !important;
    margin-bottom: 28px !important;
  }
  body.single-product .woocommerce-tabs ul.tabs li a {
    padding: 14px 0 !important;
  }
  body.single-product .woocommerce-Tabs-panel h2 {
    font-size: 24px !important;
  }
}

/* ▲▲▲ A6 — FIM ▲▲▲ */