/* =============================================================================
   cadiz-product.css — CADIZ Theme
   Página de produto: colunas 73/27, sidebar sticky, tipografia, Tamanho/Cor
   customizados, drawer (Descrição/Guia de tamanhos/Meios de pagamento),
   calculadora de frete sempre aberta, quantidade+Comprar, galeria em grid
   de 2 colunas.

   Origem: CADIZ-filtro-DOM-spec.md — seções 1, 2, 4, 5, 6, 8, 10. Testado
   ao vivo via DOM, 7 rodadas de verificação getComputedStyle/
   getBoundingClientRect contra a aba original antes de virar arquivo.
   As regras órfãs de "#cadiz-dom-product-meta" (mirando uma div que nunca
   chegou a ser criada nas seções 0-8) foram removidas nesta limpeza —
   não faziam nada no protótipo, ver "Resumo" no final do .md.

   Carregado só na página de produto (layout.tpl, template == 'product').

   Seções 11-15 (Descrição nativa, Compartilhar, Lightbox, Carrossel de
   produtos similares, Galeria mobile) vêm de CADIZ-produto-pendente-DOM-spec
   v10.md, aprovado ao vivo por Nina em 21/07/26.

   [25/08/2026] Renomeado de "cadiz-product-v3.css" pra "cadiz-product-v4.css"
   — tamanho sem estoque pra cor selecionada agora aparece cortado
   (".cadiz-pill.no-stock", ver seção logo abaixo de ".cadiz-pill.selected").
   A classe vem automática do cadiz-product-v3.js, que só repassa o que o
   Recife nativo já calcula sozinho — nenhum cadastro manual por produto.
   Também: mais espaço acima do aviso "Última peça" (nativo do Recife,
   ".js-last-product", logo abaixo do swatch de cor) — mesmos 24px usados
   acima do botão "Esgotado" (cadiz-v17.css).
============================================================================= */

/* ── 1. Estrutura geral: colunas 73/27, sidebar sticky, tipografia base ── */

#single-product .container {
  max-width: 100% !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}
@media (min-width: 768px) {
  #single-product .container { padding-left: 40px !important; padding-right: 40px !important; }
}
@media (min-width: 992px) {
  #single-product .container { padding-left: 85px !important; padding-right: 85px !important; }
}
@media (min-width: 992px) {
  #single-product [data-store^="product-info-"] { position: sticky; top: 24px; align-self: flex-start; }
  #single-product .row > .col-md-7 { flex: 0 0 73%; max-width: 73%; }
  #single-product .row > [data-store^="product-info-"] { flex: 0 0 27%; max-width: 27%; }
}
#single-product [data-store^="product-info-"] { --cadiz-black: #161619; --cadiz-muted: #9a9a9a; font-family: 'DM Sans', sans-serif; }
#single-product [data-store^="product-info-"] * { font-family: inherit; }
#single-product .breadcrumbs { margin-bottom: 20px; display: block; color: var(--cadiz-muted); }

.js-product-name { font-family: 'Tenor Sans', serif !important; color: var(--cadiz-black) !important; font-weight: 400; margin-bottom: 4px !important; line-height: 1.3; }
.price-container .js-price-display { font-weight: 700 !important; color: var(--cadiz-black) !important; font-family: 'DM Sans', sans-serif !important; }

#cadiz-dom-size-color-mock { margin-top: 24px; }
#cadiz-dom-size-color-mock .cadiz-sc-row { margin-bottom: 24px; }
#cadiz-dom-size-color-mock .cadiz-sc-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
#cadiz-dom-size-color-mock .cadiz-sc-label { font-size: 15px; color: var(--cadiz-muted); }
#cadiz-dom-size-color-mock .cadiz-size-guide { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cadiz-black); cursor: pointer; }
#cadiz-dom-size-color-mock .cadiz-pills { display: flex; gap: 20px; }
#cadiz-dom-size-color-mock .cadiz-pill { font-size: 15px; color: var(--cadiz-muted); cursor: pointer; padding-bottom: 4px; border-bottom: 2px solid transparent; }
#cadiz-dom-size-color-mock .cadiz-pill.selected { color: var(--cadiz-black); font-weight: 700; border-bottom-color: var(--cadiz-black); }
/* Tamanho sem estoque pra cor selecionada — cortado na diagonal (tipo "/"),
   igual o efeito nativo do Recife pros botões de variante (ver changelog
   acima). Testamos riscado na horizontal primeiro, mas a Nina preferiu a
   diagonal — mais parecido com o padrão que ela já conhecia. */
#cadiz-dom-size-color-mock .cadiz-pill.no-stock {
  position: relative;
  color: var(--cadiz-muted);
  opacity: 0.55;
}
#cadiz-dom-size-color-mock .cadiz-pill.no-stock:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 4px;
  background: linear-gradient(to top right, transparent calc(50% - 1px), currentColor, transparent calc(50% + 1px));
}

/* Aviso "Última peça" (nativo do Recife) — mais espaço acima, mesmos 24px
   do botão "Esgotado" (cadiz-v17.css), a pedido da Nina. */
.js-last-product {
  margin-top: 24px !important;
}

#cadiz-dom-size-color-mock .cadiz-swatches { display: flex; gap: 8px; }
#cadiz-dom-size-color-mock .cadiz-swatch-wrap { padding-bottom: 6px; border-bottom: 2px solid transparent; cursor: pointer; }
#cadiz-dom-size-color-mock .cadiz-swatch-wrap.selected { border-bottom-color: var(--cadiz-black); }
#cadiz-dom-size-color-mock .cadiz-swatch { width: 14px; height: 14px; display: block; border: 1px solid rgba(22,22,25,0.15); }

#cadiz-dom-qty-cta-row { display: flex !important; flex-direction: column !important; gap: 4px !important; margin-top: 32px !important; margin-bottom: 24px !important; }
#cadiz-dom-qty-cta-row > * { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; margin: 0 !important; }
#cadiz-dom-qty-cta-row .js-quantity { border: 1px solid rgba(22,22,25,0.15); border-radius: 0; padding: 0 24px; display: flex; align-items: center; }
#cadiz-dom-qty-cta-row .form-quantity { border: none !important; flex-wrap: nowrap !important; width: 100%; justify-content: space-between; }
#cadiz-dom-qty-cta-row .form-control-container { flex: 1 1 auto !important; min-width: 40px !important; width: auto !important; border: none !important; }
#cadiz-dom-qty-cta-row .js-quantity-input { width: 100% !important; min-width: 30px !important; display: block !important; height: auto; text-align: center; padding: 18px 0; border: none !important; background: transparent !important; box-shadow: none !important; }
#cadiz-dom-qty-cta-row .form-quantity-icon.btn { border: none !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; width: auto !important; height: auto !important; }
#cadiz-dom-qty-cta-row .form-quantity-icon svg { color: var(--cadiz-muted); }
#cadiz-dom-qty-cta-row .btn-add-to-cart { background: var(--cadiz-black) !important; border-color: var(--cadiz-black) !important; color: #F7F4EE !important; height: auto; padding: 16px; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; display: flex !important; align-items: center; justify-content: center; border-radius: 0 !important; }
#cadiz-dom-qty-cta-row .js-addtocart-placeholder { display: none !important; }

#cadiz-dom-share-row { display: flex; margin-bottom: 20px; margin-top: 0 !important; }
#cadiz-dom-share-row .js-tooltip-open { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
#cadiz-dom-share-row .js-tooltip-open .btn-link { text-decoration: none; }

/* Bloco da calculadora de frete: mantém padding-bottom/margens; border-top e
   padding-top são zerados via inline pelo JS (seção 7 do .md), sempre vencem
   estas duas propriedades aqui — deixadas mesmo assim por fidelidade/segurança. */
#single-product .mb-4.pb-2 { border-top: 1px solid rgba(22,22,25,0.1); padding-top: 16px; padding-bottom: 16px !important; margin-top: 0 !important; margin-bottom: 0 !important; }

#cadiz-dom-descricao-row { margin-top: 0 !important; margin-bottom: 24px !important; }

/* ── 2. Ajustes medidos ao vivo na página real do Konte v2 (1440px) ── */

#single-product .breadcrumbs { font-size: 11px !important; font-weight: 500 !important; }

#cadiz-dom-share-row .js-tooltip-open .btn-link {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--cadiz-black) !important;
}

/* Swatches de cor: 18x18px quadrados, wrapper do mesmo tamanho (o quadrado
   carrega margin:0, o respiro/underline vem do wrapper — layout final depois
   dos 3 ajustes finos aplicados em cima do valor medido originalmente) */
#cadiz-dom-size-color-mock .cadiz-swatch {
  width: 18px !important;
  height: 18px !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
#cadiz-dom-size-color-mock .cadiz-pill {
  margin: 0 10px 20px 0 !important;
}
#cadiz-dom-size-color-mock .cadiz-swatch-wrap {
  width: 18px !important;
  margin: 0 10px 0 0 !important; /* sem margin-bottom: cores não quebram linha (nowrap), a sobra de 20px virava vão duplo com o padrão de 24px do resto da página */
}
#cadiz-dom-size-color-mock .cadiz-swatch-wrap:last-child {
  margin-right: 0 !important;
}

#cadiz-dom-size-color-mock .cadiz-size-guide {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  color: var(--cadiz-black) !important;
}
#cadiz-dom-size-color-mock .cadiz-sc-label {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
}
#cadiz-dom-size-color-mock .cadiz-pill {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.02em !important;
}
#cadiz-dom-size-color-mock .cadiz-sc-head {
  margin-bottom: 16px !important;
}

/* Tamanho -> Cor: 8px (era 16px, do inline style gerado pelo JS). Cor ->
   Quantidade: 32px, controlado só pelo margin-top do #cadiz-dom-qty-cta-row
   acima — o margin-bottom do último .cadiz-sc-row (Cor) fica zerado pra não
   somar respiro por fora do que está configurado ali (CADIZ-produto-
   pendente-DOM-spec v10.md, seção 2). */
#cadiz-dom-size-color-mock .cadiz-sc-row:first-child {
  margin-bottom: 8px !important;
}
#cadiz-dom-size-color-mock .cadiz-sc-row:last-child {
  margin-bottom: 0 !important;
}

/* ── 4. Drawer padrão (Descrição e Cuidados / Guia de tamanhos / Meios de pagamento) ── */

#cadiz-dom-info-drawer .modal-scrollable-area,
#cadiz-dom-info-drawer .modal-scrollable-area * {
  font-family: 'DM Sans', sans-serif !important;
}
#cadiz-dom-info-drawer .modal-scrollable-area {
  font-size: 14px;
  color: var(--cadiz-black, #161619);
}

/* CADIZ-revisao-DOM-produto-23jul26.md, itens 5, 6 e 7: tabelas do "Guia de
   tamanhos" (dentro do modal nativo #size-guide-modal e do drawer próprio
   #cadiz-dom-info-drawer) — fundo removido, borda fina, fonte 12px. Regra
   nova (não existia em nenhum CSS custom da CADIZ antes). */
#size-guide-modal .user-content table.table,
#size-guide-modal .user-content table.table tr,
#size-guide-modal .user-content table.table th,
#size-guide-modal .user-content table.table td,
#cadiz-dom-info-drawer table.table,
#cadiz-dom-info-drawer table.table tr,
#cadiz-dom-info-drawer table.table th,
#cadiz-dom-info-drawer table.table td {
  background: transparent !important;
  background-color: transparent !important;
}
#size-guide-modal .user-content table.table th,
#size-guide-modal .user-content table.table td,
#cadiz-dom-info-drawer table.table th,
#cadiz-dom-info-drawer table.table td {
  border: 1px solid rgba(29,29,29,0.4) !important;
  font-size: 12px !important;
}

/* CADIZ-revisao-DOM-produto-23jul26.md, item 8: popup de Descrição em 12px
   (mais específico que a regra de 14px do .modal-scrollable-area acima). */
#cadiz-dom-info-content, #cadiz-dom-info-content * {
  font-size: 12px !important;
}

.cadiz-info-tabs-row {
  display: flex;
  justify-content: space-between; /* 3 links (Descrição/Composição/Cuidados), encostando nas 2 bordas — era gap:32px pra 1 link só */
  gap: 0;
  padding-top: 0;
  margin-top: 0 !important;
}
.cadiz-info-tab {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--cadiz-black);
  cursor: pointer;
}

/* ── 5. Calculadora de frete — sempre aberta, sem ícone +/-, título padronizado ── */

#product-shipping-container .js-accordion-private-toggle .col-auto,
#product-shipping-container .js-accordion-private-toggle-active,
#product-shipping-container .js-accordion-private-toggle-inactive {
  display: none !important;
}
#product-shipping-container .js-accordion-private-toggle {
  cursor: default !important;
  pointer-events: none !important;
}
#product-shipping-container .js-accordion-private-content {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  opacity: 1 !important;
  overflow: visible !important;
}
.js-accordion-private-toggle .col > div.m-0 {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  color: var(--cadiz-black) !important;
}

/* ── 6. Quantidade + Comprar (altura, largura total, tipografia) ── */

#cadiz-dom-qty-cta-row .js-quantity {
  height: 54px !important;
  box-sizing: border-box !important;
}
#cadiz-dom-qty-cta-row .btn-add-to-cart {
  height: 54px !important;
  box-sizing: border-box !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
#cadiz-dom-qty-cta-row > [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Título, preço e número da quantidade: mesmo tamanho (18px título/preço,
   11px quantidade — igual PP/P/M/G). Substitui os font-size definidos
   acima na seção 1 (era 20px/24px). */
.price-container .js-price-display { font-size: 18px !important; }
#cadiz-dom-qty-cta-row .js-quantity-input { font-size: 11px !important; }
.js-product-name { font-size: 18px !important; }

/* ── 8. Galeria em grid de 2 colunas (referência Konte v2) ── */

#cadiz-dom-gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  width: 100%;
}
#cadiz-dom-gallery-grid > div {
  width: 100%;
  aspect-ratio: 2/3;
  overflow: hidden;
  background: #f2ede6;
}
#cadiz-dom-gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── 10. Espaçamento no topo da página (era 24px nativo, pt-md-4 do Bootstrap) ── */

#single-product { padding-top: 40px !important; }

/* CADIZ-revisao-DOM-produto-23jul26.md, item 1: no mobile de verdade
   (≤767.98px) o espaço de 40px ficava grande demais acima da galeria. */
@media (max-width: 767.98px) {
  html body #single-product {
    padding-top: 20px !important;
  }
}

/* =============================================================================
   A partir daqui: CADIZ-produto-pendente-DOM-spec v10.md (seções 1, 2, 3, 5,
   6, 7, 8) — aprovado ao vivo por Nina em 21/07/26.
============================================================================= */

/* ── 11. Remove o bloco nativo "Descrição" (duplicado do popup/drawer) ──
   .social-share já não vive mais dentro desse wrapper no momento em que
   esta regra é avaliada — cadiz-product.js (seção 7) já moveu shareEl pra
   dentro do <form>, então esconder o wrapper inteiro não afeta Compartilhar. */
[data-store^="product-description-"] { display: none !important; }

/* ── 12. Compartilhar: ícones reais (sem círculo), 18px, 10px de espaço entre
   eles, X a 16px do último ícone, movimento real via transform (não
   clip-path/opacity) ── */

#cadiz-dom-share-row .social-share-button[data-network="facebook"],
#cadiz-dom-share-row .social-share-button[data-network="twitter"],
#cadiz-dom-share-row .social-share-button[data-network="pinterest"],
#cadiz-dom-share-row .pinterest-hidden {
  display: none !important;
}
#cadiz-dom-share-row .position-relative {
  display: inline-flex !important;
  align-items: center;
}
#cadiz-dom-share-row .js-tooltip-open {
  opacity: 1 !important;
  display: inline-flex !important;
  align-items: center;
}
/* Janela fixa onde os ícones deslizam de verdade via transform (não anima
   largura nem clip-path). O .js-tooltip nativo carrega margin-top:20px (o
   espaço do balão/seta do dropdown antigo, sem uso) — zerado aqui, senão o
   conteúdo fica ~10px mais baixo que "Compartilhar". */
#cadiz-dom-share-row .js-tooltip.tooltip {
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  margin-left: 12px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
  clip-path: none !important;
  vertical-align: middle;
}
/* Setinha nativa do balão antigo — sem isso ela entra junto no track animado */
#cadiz-dom-share-row .js-tooltip .tooltip-arrow {
  display: none !important;
}
#cadiz-dom-share-row .cadiz-share-track {
  display: inline-flex;
  align-items: center;
  transform: translateX(-140%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
#cadiz-dom-share-row.cadiz-share-open .cadiz-share-track {
  transform: translateX(0);
}
#cadiz-dom-share-row .social-share-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: 18px !important;
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
  color: #838889 !important;
  margin: 0 10px 0 0 !important;
  padding: 0 !important;
  transition: color .15s ease;
  line-height: 0;
}
#cadiz-dom-share-row .social-share-button svg {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  display: block !important;
}
#cadiz-dom-share-row .social-share-button:hover {
  color: #161619 !important;
}
#cadiz-dom-share-row .cadiz-share-copy {
  margin-right: 0 !important;
}
#cadiz-dom-share-row .js-tooltip-close {
  margin: 0 0 0 16px !important;
  display: inline-flex !important;
  align-items: center;
  line-height: 0;
}
#cadiz-dom-share-row .js-tooltip-close svg {
  width: 11px !important;
  height: 11px !important;
  display: block !important;
}

/* CADIZ-revisao-DOM-produto-23jul26.md, item 4: botão "Compartilhar" nativo
   duplicado no mobile (o outro, mantido, já é forçado visível em qualquer
   largura pela regra #cadiz-dom-share-row .position-relative acima). */
@media (max-width: 767.98px) {
  html body .social-share a.js-modal-open.d-md-none {
    display: none !important;
  }
}

/* ── 13. Lightbox da galeria: sem CSS extra — Fancybox nativo já traz seu
   próprio visual (setas, contador, miniaturas, overlay). Ver
   cadiz-product.js seção 10. ── */

/* ── 14. Carrossel "Produtos similares" — mesmo padrão visual do carrossel
   da home (Coleção Atual: .collection-section/.carousel-wrap/.carousel-track
   já vêm de cadiz.css, carregado em todas as páginas), mas SEM "espiadela":
   só os 4 cards cabem, o resto fica 100% escondido até avançar (a home
   mantém a espiadela dela, sem alteração). overflow:hidden clipa na borda
   do padding-box, não do content-box — como .carousel-wrap tem 60px de
   padding lateral, o clip ficava 60px além de onde o 4º card termina; o
   .carousel-viewport (sem padding próprio) resolve isso. ── */
#relPrevBtn { left: var(--sp); }
#relNextBtn { right: var(--sp); }
.cadiz-related-products .carousel-wrap { overflow: visible; }
.cadiz-related-products .carousel-viewport { overflow: hidden; width: 100%; }

/* ── 15. Galeria mobile: carrossel 1 foto por vez, com dots (padrão Konte) —
   só <992px, desktop mantém a grade de 2 colunas (seção 8) sem alteração ── */
@media (max-width: 991px) {
  #cadiz-dom-gallery-grid.cadiz-has-mobile-swiper { display: none !important; }

  .cadiz-gallery-mobile-swiper { position: relative; width: 100%; overflow: hidden; }
  .cadiz-gallery-mobile-swiper .swiper-wrapper { display: flex; }
  .cadiz-gallery-mobile-swiper .swiper-slide { flex: 0 0 100%; width: 100%; }
  .cadiz-gallery-mobile-swiper .swiper-slide a { display: block; line-height: 0; }
  .cadiz-gallery-mobile-swiper .swiper-slide img { width: 100%; height: auto; display: block; }

  /* dots — valores medidos no Konte: 6x6px, 10px entre eles, ativo #161619, inativo #CDCFD0 */
  .cadiz-gallery-dots.swiper-pagination {
    position: absolute; left: 20px; bottom: 17px; right: auto; top: auto; width: auto;
    display: flex; align-items: center; gap: 10px; z-index: 2;
  }
  .cadiz-gallery-dots .swiper-pagination-bullet {
    width: 6px; height: 6px; border-radius: 50%; background: #CDCFD0; opacity: 1; margin: 0;
  }
  .cadiz-gallery-dots .swiper-pagination-bullet-active { background: #161619; }

  /* CADIZ-revisao-DOM-produto-23jul26.md, itens 2 e 3: 1 cor de marca só,
     sem borda (a borda preta vinha de fora dos arquivos CADIZ, provável
     CSS nativo do Swiper). */
  .cadiz-gallery-dots .swiper-pagination-bullet {
    border: none !important;
    background: rgba(122, 98, 72, 0.35) !important;
  }
  .cadiz-gallery-dots .swiper-pagination-bullet-active {
    border: none !important;
    background: rgba(122, 98, 72, 1) !important;
  }
}
@media (min-width: 992px) {
  .cadiz-gallery-mobile-swiper { display: none !important; }
}