/* =============================================================================
   cadiz.css — CADIZ Theme
   Design system principal: tokens, tipografia, layout de todas as seções
   Origem: cadiz_preview.html (aprovado pela cliente)
   Nota: @font-face da Tenor Sans declarado no layout.tpl via static_url

   [25/08/2026] Renomeado de "cadiz-v13.css" pra "cadiz-v14.css" — barra de
   anúncios nova (topo do site, texto/cupom/cor editáveis no painel) +
   cabeçalho com animação estilo "Headroom" (some ao rolar pra baixo,
   reaparece ao rolar pra cima; barra some junto assim que a página sai do
   topo). Página inicial ganhou banner hero com 100vh de verdade, com o
   cabeçalho sobrepondo ele no topo (sem padding-top no body da home).
   Nas demais páginas o padding-top continua existindo, agora calculado
   dinamicamente (barra + cabeçalho) via variável CSS "--cadiz-header-
   offset", atualizada pelo cadiz-v5.js. Corrigido também o texto "Copiado"
   do botão de copiar cupom, que antes deslocava o texto original ao
   aparecer (agora é posicionado de forma absoluta, sem empurrar nada).
   Daqui pra frente, sempre que mexer neste CSS: sobe com um nome novo
   (v15, v16...) E troca a linha do link em layouts/layout.tpl no mesmo
   upload.

   [25/08/2026 — 2] Renomeado pra "cadiz-v15.css" (era "cadiz-v14.css") —
   Nina notou espaço vazio acima da foto do Shop the Look: o ".stl-sticky"
   ainda tinha "top: 60px" e "height: calc(100vh - 60px)", herdados de
   quando o cabeçalho ficava sempre fixo reservando 60px de espaço. Agora
   que o cabeçalho pode sumir ao rolar, esse espaço ficava vazio. Corrigido
   pra "top: 0" e "height: 100vh" — a imagem ocupa 100% da altura da tela
   de verdade, com o cabeçalho sobrepondo ela por cima, igual o banner
   hero.

   [25/08/2026 — 3] Renomeado pra "cadiz-v16.css" (era "cadiz-v15.css") —
   barra de anúncios e cabeçalho eram dois elementos "fixed" separados,
   cada um com seu próprio "transform" animado pelo JS; às vezes
   dessincronizavam e se sobrepunham durante a rolagem. Unificados num
   wrapper único (".cadiz-header-stack", agora declarado em
   layouts/layout.tpl envolvendo os dois) — só o wrapper é fixo e anima,
   a barra e o cabeçalho viram filhos normais dentro dele. Ver
   cadiz-v6.js para a lógica de rolagem correspondente.

   [25/08/2026 — 4] Renomeado pra "cadiz-v17.css" (era "cadiz-v16.css") —
   dois ajustes em produto esgotado, a pedido da Nina (referência:
   /produtos/Blazer-Essencial-marrom/): (1) etiqueta "Esgotado" no canto
   superior direito do card de produto (".product-sold-out-badge"), em
   #1d1d1d — aparece em qualquer card que use home-product-card.tpl
   (grade de categoria/busca, Coleção Atual, Shop the Look), já que todos
   compartilham o mesmo template; (2) mais espaço acima do botão
   "ESGOTADO" na página individual do produto, via override do estado
   ".nostock" (nativo do Recife), escopado a "#product_form" pra não
   afetar o botão do quick-shop modal do card (que reusa a mesma classe
   "nostock").

   [25/08/2026 — 5] Mesmo card: etiqueta "Sale" (mesmo padrão da
   "Esgotado", fundo #f7f4ee / texto #1d1d1d), automática quando o produto
   tem preço promocional (product.compare_at_price > product.price) — os
   dois nunca aparecem juntos, esgotado tem prioridade. Preço do card
   também mudou: quando em promoção, mostra o preço original cortado
   (line-through) seguido do preço com desconto em negrito leve.

   [25/08/2026 — 6] Tamanho sem estoque cortado na página do produto — ver
   cadiz-product-v4.css / cadiz-product-v3.js (o seletor de tamanho da
   página do produto não usa os botões nativos do Recife, é o componente
   próprio ".cadiz-pill" montado em JS — mudança feita lá, não aqui).

   [26/08/2026] Renomeado pra "cadiz-v18.css" (era "cadiz-v17.css") — dois
   ajustes reportados pela Nina: (1) página arrastando pro lado no celular
   — o "body" já tinha "overflow-x: hidden" mas o "html" não; em boa parte
   dos celulares (principalmente iOS Safari) é o "html" que controla o
   scroll da página, não o "body", então um "overflow-x: hidden" só no
   body não é suficiente pra travar o arrasto lateral. Adicionado no
   "html" também (testado ao vivo via DOM: sem elemento vazando a largura
   da tela, e sem mudança de comportamento nos carrosséis internos, que
   têm seu próprio scroll horizontal isolado). (2) Banner hero do celular
   (".hero" dentro do media query mobile) trocado de "aspect-ratio: 4/5"
   pra "height: 90vh" — testado e aprovado ao vivo via DOM com a Nina
   (primeiro 75vh, depois ajustado pra 90vh).

   [26/08/2026 — 2] Renomeado pra "cadiz-v19.css" (era "cadiz-v18.css") —
   Nina insistiu que a página ainda arrastava pro lado no celular mesmo
   depois do "overflow-x: hidden" no html/body (v18), e tinha certeza que
   era o header. Ela tinha razão: a ".mega-menu" (dropdown do hover do
   desktop, ids "cadiz-megamenu-vestuario"/"-ocasiao"/"-beachwear") mesmo
   escondida via "opacity: 0" continuava totalmente montada no layout —
   ".mega-cols" é "flex: 0 0 50%" mas, por padrão, um item flex não
   encolhe abaixo do tamanho do seu conteúdo ("min-width: auto"); com
   várias colunas de texto lado a lado ela terminava com ~760px de
   conteúdo real dentro de uma caixa de ~390px no celular. O
   "overflow: hidden" da própria ".mega-menu" escondia isso visualmente,
   mas o Safari mobile ainda "sente" esse tamanho real através da cadeia
   de elementos "position: fixed"/"position: absolute" do cabeçalho, e é
   isso que deixava a página inteira arrastável pro lado. Como esse
   menu só funciona com mouse (hover) e não faz nada útil no toque,
   solução mais segura foi escondê-lo por completo no mobile
   ("display: none" dentro do media query já existente de 991px) — testado
   ao vivo via DOM (scrollWidth da ".mega-menu" caiu de 760px pra 0,
   scrollWidth da página bateu exatamente com a largura da tela).

   [26/08/2026 — 3] Renomeado pra "cadiz-v20.css" (era "cadiz-v19.css") —
   Nina notou que o ".stl-sticky" (imagem da esquerda do Shop the Look)
   parou de grudar no desktop depois do lote anterior. Causa: o
   "overflow-x: hidden" que eu tinha adicionado no "html" (v18) força o
   navegador a computar "overflow-y: auto" nele também — regra do próprio
   CSS: se um eixo não é "visible", o outro que era "visible" vira "auto"
   automaticamente. Isso faz o "html" virar um contêiner de scroll próprio
   e quebra a referência que o "position: sticky" usa. Como o "overflow-x:
   hidden" no "html" era só uma camada extra de proteção — o "body" já
   tinha o dele desde sempre, e o problema real do arrasto lateral era a
   ".mega-menu" (corrigido no v19, sem depender dessa regra) — removida a
   linha do "html" e mantido só o "overflow-x: hidden" original do "body"
   (que nunca deu esse problema). Testado ao vivo via DOM: sticky voltou a
   grudar, arrasto lateral continua sem reaparecer.
============================================================================= */

/* ── TOKENS ─────────────────────────────────── */
:root {
  --off-white: #F7F4EE;
  --osso:      #F3EEE2;
  --areia:     #E4D4BC;
  --aveia:     #C2B094;
  --castanho:  #7A6248;
  --preto:     #1D1D1D;

  --sp:   20px;   /* margem lateral */
  --sp-v: 60px;   /* padding vertical de seção */
  --gap:  20px;   /* gap entre elementos */

  --announcement-bg:      #1D1D1D; /* fallback — o valor real vem do painel via inline style */
  --cadiz-header-offset:  60px;    /* fallback sem JS — atualizado dinamicamente pelo cadiz-v5.js */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--off-white);
  color: var(--preto);
  overflow-x: hidden;
}

/* ── NAV ─────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--off-white); height: 60px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--sp);
  border-bottom: 1px solid rgba(29,29,29,0.08);
  overflow: visible;
}

/* ── NAV LINKS ── */
.nav-links {
  display: flex; align-items: center; gap: 36px;
  list-style: none; margin: 0; padding: 0;
  position: absolute; left: 50%; transform: translateX(-50%);
}
.nav-links > li { position: relative; }
.nav-links a {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--preto); text-decoration: none;
  transition: opacity 0.2s;
}
.nav-links a:hover { opacity: 0.45; }

/* ── MEGA MENU ── */
.mega-menu {
  position: absolute; left: 0; right: 0; top: 60px;
  width: 100vw;
  background: #F7F4EE;
  border-bottom: 1px solid rgba(29,29,29,0.08);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s ease;
  z-index: 99;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
}
.mega-menu.is-open {
  opacity: 1; pointer-events: auto;
}
/* layout: imagem ocupa 50%, colunas os outros 50% */
.mega-inner {
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 280px;   /* altura fixa do megamenu */
}
/* imagem: exatamente 50% da largura, altura restrita ao container */
.mega-img {
  flex: 0 0 50%;
  padding: var(--sp);
  box-sizing: border-box;
}
.mega-img-inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.mega-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.mega-img-overlay {
  position: absolute;
  bottom: 24px;
  left: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.mega-img-title {
  font-family: 'Tenor Sans', sans-serif;
  font-size: 13px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  text-shadow: 0 1px 6px rgba(0,0,0,0.25);
}
.mega-img-cta {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.6);
  padding-bottom: 2px;
  transition: opacity 0.2s;
}
.mega-img-cta:hover { opacity: 0.6; }
/* colunas: 50% restante, padding interno */
.mega-cols {
  flex: 0 0 50%;
  display: flex;
  gap: 48px;
  align-items: flex-start;
  padding: 36px 48px;
  box-sizing: border-box;
}
.mega-col {
  display: flex; flex-direction: column; gap: 16px;
  min-width: 110px;
}
.mega-heading {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--castanho); margin: 0 0 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(29,29,29,0.1);
  white-space: nowrap;
}
.mega-col a {
  font-family: 'Tenor Sans', sans-serif;
  font-size: 13px; letter-spacing: 0.04em;
  color: var(--preto); text-decoration: none;
  text-transform: none; transition: opacity 0.2s;
}
.mega-col a:hover { opacity: 0.45; }
.mega-ver-tudo {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 9px !important; letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  color: var(--castanho) !important;
  text-decoration: none !important;
  margin-top: 4px;
  align-self: flex-start;
}
.mega-ver-tudo:hover { opacity: 0.45; }
.nav-logo {
  font-family: 'Tenor Sans', sans-serif;
  font-size: 20px; letter-spacing: 0.16em; color: var(--preto);
  text-decoration: none; font-weight: 400;
}
.nav-icons { display: flex; align-items: center; gap: 18px; }
.nav-icons svg { width: 18px; height: 18px; stroke: var(--preto); fill: none; stroke-width: 1.2; cursor: pointer; }

/* ── HERO 100vh 100vw (desktop) ─────────────── */
.hero {
  margin-top: 0; width: 100vw; height: 100vh;
  position: relative; overflow: hidden; background: var(--areia);
}
.hero video, .hero img.hero-fallback {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, transparent 35%);
  pointer-events: none;
}

/* Mídia mobile (imagem OU vídeo, mesma classe pros dois) — escondida no desktop por padrão */
.hero-mobile-media { display: none; }

/* ── HERO mobile — imagem ou vídeo próprios do celular, full width 4:5 ── */
@media (max-width: 991px) {
  .hero {
    width: 100%; height: 90vh;
  }
  .hero-desktop-media { display: none !important; }
  .hero-mobile-media {
    display: block; width: 100%; height: 100%;
    object-fit: cover;
  }
  /* Megamenu é hover-only (desktop) — no touch não faz nada, e o
     conteúdo dele (colunas lado a lado) não encolhe pra caber na tela,
     causando arrasto horizontal na página inteira. Ver changelog acima. */
  .mega-menu { display: none !important; }
}

/* ── HERO — texto sobre a imagem (eyebrow + título + CTA) ──
   Opcional (só existe se o título estiver preenchido no painel). Canto
   inferior esquerdo, mesmo texto em desktop e celular — só o tamanho/
   espaçamento muda por breakpoint. Fade escuro atrás garante legibilidade
   sem depender da foto. Valores de desktop aprovados via preview ao vivo
   com a cliente (margem 110px, título pequeno e discreto, gaps maiores
   entre os elementos pra não ficar espremido). ── */
.hero-text-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 45%;
  background: linear-gradient(to top, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0.12) 55%, transparent 100%);
  pointer-events: none; z-index: 1;
}
.hero-content {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 110px 110px;
  z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start;
  max-width: 560px;
}
.hero-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--off-white); margin-bottom: 24px;
}
.hero-title {
  font-family: 'Tenor Sans', sans-serif;
  font-size: clamp(18px, 2vw, 24px); font-weight: 400;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--off-white); line-height: 1.28; margin-bottom: 17px;
  text-shadow: 0 2px 14px rgba(0,0,0,0.2);
}
.hero-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'DM Sans', sans-serif; font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--off-white); text-decoration: none;
  border-bottom: 1px solid rgba(247,244,238,0.5); padding-bottom: 4px;
  transition: opacity 0.3s;
}
.hero-cta:hover { opacity: 0.6; }
.hero-cta svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.5; }

@media (max-width: 991px) {
  .hero-content { padding: 0 24px 40px; max-width: 100%; }
  .hero-eyebrow { font-size: 9px; letter-spacing: 0.28em; margin-bottom: 10px; }
  .hero-title { font-size: 18px; line-height: 1.3; margin-bottom: 16px; }
  .hero-cta { font-size: 9px; }
}

/* ── CATEGORIAS ──────────────────────────────── */
.categories-wrapper {
  padding: var(--sp);
  background: var(--off-white);
}
.categories {
  display: grid; grid-template-columns: repeat(3,1fr); gap: var(--gap);
}
.cat-block { position: relative; aspect-ratio: 2/3; overflow: hidden; cursor: pointer; }
.cat-block img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.65s cubic-bezier(0.25,0.46,0.45,0.94);
}
.cat-block:hover img { transform: scale(1.03); }
.cat-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 55%);
}
.cat-block.left  .cat-text { right: var(--sp); left: auto;  text-align: right; }
.cat-block.right .cat-text { right: var(--sp); left: auto;  text-align: right; }
.cat-text { position: absolute; bottom: var(--sp); }
.cat-text h3 {
  font-family: 'Tenor Sans', sans-serif; font-size: 12px;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--off-white); margin-bottom: 12px; font-weight: 400;
}
.cat-cta {
  display: inline-block; color: var(--off-white);
  font-family: 'DM Sans', sans-serif; font-size: 9px;
  letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer;
  border-bottom: 1px solid rgba(247,244,238,0.4); padding-bottom: 3px;
  transition: opacity 0.3s;
}
.cat-cta:hover { opacity: 0.65; }

/* Barra de progresso do carrossel de categorias — escondida por padrão
   (só existe no mobile, onde as categorias viram carrossel). Bem fina,
   minimalista, cores do site com transparência (trilho quase invisível,
   preenchimento um pouco mais visível). Preenche conforme o JS atualiza a
   largura de .categories-progress-fill de acordo com o scroll (ver cadiz.js). */
.categories-progress { display: none; }

/* ── CATEGORIAS — mobile: carrossel por swipe (não grid), proporção e
   "espiadela" diferentes do carrossel de Coleção Atual — cards mais estreitos
   (58% vs 74%), mesma lógica de arrastar pro lado, sem barra de rolagem.
   Gap entre itens = var(--sp), igual à margem acima do carrossel (padrão
   usado em todos os carrosseis). ── */
@media (max-width: 991px) {
  .categories-wrapper { padding: var(--sp); overflow: visible; }
  .categories-progress {
    display: block;
    width: 100%;
    height: 3px;
    background: rgba(29,29,29,0.14);
    margin-bottom: var(--sp);
    overflow: hidden;
  }
  .categories-progress-fill {
    height: 100%;
    width: 0%;
    background: rgba(122,98,72,0.6); /* var(--castanho) com transparência */
    transition: width 0.08s linear;
  }
  .categories {
    display: flex;
    grid-template-columns: unset;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--sp);
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .categories::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .cat-block {
    flex: 0 0 58%;
    min-width: 58%;
    aspect-ratio: 2 / 3;
    scroll-snap-align: start;
  }
}

/* ── SEÇÃO COLEÇÃO: header + banner + carrossel ── */
/*
  Estrutura visual (como na ref Loewe):

  [padding lateral var(--sp)]
  TÍTULO                    VER MAIS →
  [banner full-width 30vh — sem margens laterais]
  [produtos com padding lateral var(--sp)]
*/
.collection-section {
  background: var(--off-white);
  /* CADIZ-fix-espacamento-home (19/08): era var(--sp-v) = 60px — Nina testou
     ao vivo no DevTools e pediu 120px, pra igualar o espaço que já existe
     entre Shop the Look e Sobre a Marca (a seção collection não tem
     margin-top, então só o padding-bottom dela conta pro espaço visual
     antes do Shop the Look). Valor fixo em vez de var(--sp-v) porque não é
     mais o espaçamento padrão de seção (esse continua 60px nas outras). */
  padding-bottom: 120px;
}
/* CADIZ-fix-espacamento-home-mobile (24/08): os 120px acima são só pro
   desktop — no mobile o espaço ficava grande demais (o resto da home
   usa 60px de padding/margem entre seções no mobile). Nina pediu 60px
   fixo aqui também, testado ao vivo. */
@media (max-width: 767.98px) {
  .collection-section {
    padding-bottom: 60px;
  }
}

/* linha de topo: título à esquerda, link à direita */
.collection-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--sp-v) 60px var(--sp);
}
.collection-header .ci-eyebrow {
  font-family: 'Tenor Sans', sans-serif;
  font-size: clamp(13px, 1.2vw, 16px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--preto);
  margin-bottom: 0;
}
.btn-ver-tudo {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'DM Sans', sans-serif; font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--preto);
  text-decoration: none;
  border-bottom: 1px solid rgba(29,29,29,0.25); padding-bottom: 3px;
  transition: opacity 0.3s; white-space: nowrap;
}
.btn-ver-tudo:hover { opacity: 0.4; }
.btn-ver-tudo svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* banner 30vh — full-width, zero margens laterais */
.collection-banner {
  width: 100%;
  height: 30vh;
  overflow: hidden;
  background: var(--areia);
  /* zero margin/padding — full-width */
}
.collection-banner img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  object-position: center 20%;
}

/* carrossel abaixo do banner — padding lateral var(--sp), espaço topo var(--sp) */
.carousel-wrap {
  position: relative;
  padding: var(--sp) 60px 0;
  overflow: hidden;
}
.carousel-track {
  display: flex; gap: var(--gap);
  transition: transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94);
}
.product-card { flex: 0 0 calc(25% - 15px); min-width: calc(25% - 15px); position: relative; }
.product-card-img-wrap {
  position: relative;
  width: 100%;
  margin-bottom: 12px;
}
.product-card-img {
  display: block;
  position: relative;
  width: 100%; aspect-ratio: 2/3; overflow: hidden;
  background: var(--areia);
}
.product-bag-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 34px; height: 34px;
  background: rgba(247,244,238,0.88);
  backdrop-filter: blur(4px);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 2;
}
.product-card:hover .product-bag-btn { opacity: 1; }
.product-bag-btn svg {
  width: 14px; height: 14px;
  stroke: var(--preto); fill: none; stroke-width: 1.3;
}
/* No mobile não existe hover — o botão precisa ficar sempre visível, senão
   não tem como o cliente descobrir que ele existe. Vale pra qualquer card
   que use essa classe (Coleção Atual, Shop the Look, grades de categoria). */
@media (max-width: 991px) {
  .product-bag-btn { opacity: 1; }
}
.product-card-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Troca de imagem no hover (sem zoom) — segunda foto do produto por cima da primeira */
.product-card-img img.pc-img-featured,
.product-card-img img.pc-img-secondary {
  position: absolute; inset: 0;
  transition: opacity 0.4s ease;
}
.product-card-img img.pc-img-featured { opacity: 1; }
.product-card-img img.pc-img-secondary { opacity: 0; }
.product-card:hover .product-card-img img.pc-img-featured { opacity: 0; }
.product-card:hover .product-card-img img.pc-img-secondary { opacity: 1; }
.product-info { text-align: center; }
.product-name {
  font-family: 'DM Sans', sans-serif; font-size: 9px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--preto);
  margin-bottom: 5px; font-weight: 400; line-height: 1.6;
}
.product-price { font-size: 12px; color: var(--preto); margin-bottom: 3px; }
/* Preço com desconto: original cortado + preço promocional em negrito leve, lado a lado */
.product-price-compare {
  text-decoration: line-through;
  opacity: 0.55;
  margin-right: 6px;
}
.product-price-sale { font-weight: 600; }
.product-inst  { font-size: 10px; color: var(--aveia); }

/* Etiquetas "Esgotado" / "Sale" no canto superior direito do card — automáticas
   de acordo com o produto (ver home-product-card.tpl). Nunca aparecem juntas. */
.product-sold-out-badge,
.product-sale-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px;
  line-height: 1;
}
.product-sold-out-badge { background: #1d1d1d; color: #fff; }
.product-sale-badge { background: #f7f4ee; color: #1d1d1d; }

/* Página individual do produto: mais espaço acima do botão quando esgotado
   (estado nativo do Recife ".nostock") — escopado ao form do produto pra não
   afetar o botão do quick-shop modal do card, que reusa a mesma classe. */
#product_form .btn-add-to-cart.nostock { margin-top: 24px !important; }
/* O componente nativo de parcelamento (installments) traz seu próprio
   font-size (14px) nos elementos internos, que não herda o 10px do
   .product-inst — força o tamanho menor em toda a subárvore. Também mira
   direto nas classes nativas (.js-max-installments-container /
   .product-installments) dentro de ".product-info" — wrapper comum a todos
   os cards (Coleção Atual e Shop the Look), independente do card_class
   usado — já que o componente pode renderizar sem o wrapper .product-inst
   dependendo da versão do template em produção. */
.product-inst,
.product-inst *,
.product-info .js-max-installments-container,
.product-info .js-max-installments-container *,
.product-info .product-installments,
.product-info .product-installments * { font-size: 10px !important; }

.carousel-nav {
  display: flex; justify-content: center; gap: 28px;
  margin-top: 32px; padding: 0 var(--sp);
}
.carousel-btn {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; padding: 8px;
  color: var(--preto); transition: opacity 0.2s;
  z-index: 2;
}
#prevBtn { left: var(--sp); }
#nextBtn { right: var(--sp); }
.carousel-btn:hover { opacity: 0.35; }
.carousel-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.2; }

/* Barra de controles mobile — só as setas, escondida no desktop (lá elas já
   ficam sobre a imagem, centralizadas). */
.carousel-controls-mobile { display: none; }
.carousel-btn-mobile {
  background: none; border: none; cursor: pointer; padding: 6px;
  color: var(--preto); display: flex; align-items: center;
}
.carousel-btn-mobile svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.3; }

/* Mesma barra de setas, agora para o carrossel do Shop the Look (mobile) —
   reutiliza .carousel-btn-mobile, só troca o wrapper para não colidir com
   os seletores JS .carousel-prev/.carousel-next da Coleção Atual. */
.stl-carousel-controls-mobile { display: none; }

/* ── SEÇÃO COLEÇÃO — mobile: carrossel por swipe nativo, cards grandes com
   "espiadela" do próximo, igual ao PDF. Padding lateral reduzido de 60px
   (desktop) para var(--sp). Ver Tudo continua no cabeçalho (topo), igual ao
   desktop. Abaixo do carrossel, as duas setas ficam centralizadas, lado a
   lado, com um espaço entre elas — não mais uma em cada ponta da tela. ── */
@media (max-width: 991px) {
  .collection-header { padding: var(--sp) var(--sp); }
  .carousel-wrap { padding: var(--sp) var(--sp) 0; overflow: visible; }
  .carousel-wrap .carousel-btn { display: none; } /* setas overlay do desktop somem */
  .carousel-track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .carousel-track::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .product-card {
    flex: 0 0 74%;
    min-width: 74%;
    scroll-snap-align: start;
  }
  .carousel-controls-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 32px var(--sp) 0;
  }
}

/* ── SHOP THE LOOK ───────────────────────────── */
.shop-the-look {
  display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh;
}
.stl-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--areia); }
.stl-sticky img, .stl-sticky video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Lista de produtos em destaque, sobreposta na imagem/vídeo — canto inferior
   esquerdo, discreta (texto branco com sombra leve pra legibilidade sobre
   qualquer foto). Clicar rola até o card correspondente no carrossel/grade. */
.stl-sticky-product-list {
  position: absolute;
  left: 24px;
  right: 24px; /* CADIZ-fix-stl-sticky-margem (24/08): faltava a margem
                  direita, simétrica à esquerda — sem ela o texto ia até
                  a borda da imagem, ficando mais difícil de ler.
                  Testado ao vivo no mobile e desktop (regra única, sem
                  media query, já vale pros dois). */
  bottom: 24px;
  z-index: 2;
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.stl-sticky-product-link {
  display: flex; flex-direction: column; gap: 2px;
  text-decoration: none; cursor: pointer;
  transition: opacity 0.25s ease;
}
.stl-sticky-product-link:hover { opacity: 0.7; }
.stl-sticky-product-name {
  font-family: 'DM Sans', sans-serif; font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.stl-sticky-product-price {
  font-family: 'DM Sans', sans-serif; font-size: 10px;
  color: rgba(255,255,255,0.82); text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

.stl-products { padding: var(--sp-v) 36px var(--sp-v) var(--sp); }
.stl-eyebrow {
  font-family: 'DM Sans', sans-serif; font-size: 9px;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--aveia); margin-bottom: 10px;
}
.stl-divider { width: 32px; height: 1px; background: rgba(29,29,29,0.15); margin: 12px 0; }
.stl-title {
  font-family: 'Tenor Sans', sans-serif;
  font-size: clamp(18px, 2.5vw, 28px); font-weight: 400;
  letter-spacing: 0.15em; text-transform: uppercase;
}
.stl-grid { display: grid; gap: var(--sp-v); margin-top: var(--sp-v); }
.stl-img-wrap {
  position: relative;
  width: 100%;
  margin-bottom: 10px;
}
.stl-img { display: block; position: relative; width: 100%; aspect-ratio: 2/3; overflow: hidden; background: var(--areia); }
.stl-card:hover .product-bag-btn { opacity: 1; }
.stl-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Troca de imagem no hover (sem zoom) — segunda foto do produto por cima da primeira */
.stl-img img.pc-img-featured,
.stl-img img.pc-img-secondary {
  position: absolute; inset: 0;
  transition: opacity 0.4s ease;
}
.stl-img img.pc-img-featured { opacity: 1; }
.stl-img img.pc-img-secondary { opacity: 0; }
.stl-card:hover .stl-img img.pc-img-featured { opacity: 0; }
.stl-card:hover .stl-img img.pc-img-secondary { opacity: 1; }

/* ── SHOP THE LOOK — mobile: imagem editorial full-bleed no topo (1x1,
   quadrada) + carrossel por swipe dos produtos abaixo (cards horizontais),
   em vez do layout sticky 2 colunas do desktop. Dimensões fixas como no PDF:
   sticky = 1:1 (imagem editorial). Cards do carrossel de produto = 2:3, igual
   a todas as outras imagens de produto do site (mesma proporção do carrossel
   de Coleção Atual). Gap entre itens = var(--sp), igual à margem acima do
   carrossel (mesmo padrão dos outros carrosseis). ── */
@media (max-width: 991px) {
  .shop-the-look { grid-template-columns: 1fr; min-height: auto; }
  .stl-sticky { position: relative; top: 0; height: auto; aspect-ratio: 1 / 1; }
  .stl-products { padding: var(--sp-v) var(--sp); overflow: visible; }
  .stl-grid {
    display: flex;
    grid-template-columns: unset;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--sp);
    margin-top: var(--sp-v);
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .stl-grid::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .stl-card { flex: 0 0 74%; min-width: 74%; scroll-snap-align: start; }
  .stl-img { aspect-ratio: 2 / 3; }
  .stl-card .product-bag-btn { opacity: 1; } /* sempre visível no mobile — sem hover pra revelar */

  /* Setas abaixo do carrossel — mesma lógica da Coleção Atual: centralizadas,
     lado a lado, com espaço entre elas e entre elas e os produtos. */
  .stl-carousel-controls-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 32px var(--sp) 0;
  }
}

/* ── SOBRE A MARCA ───────────────────────────── */
.about-section {
  background: var(--osso);
  padding: var(--sp-v) var(--sp);
  margin-top: var(--sp-v);
}
.about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-v);
  align-items: start;
  max-width: 1400px;
  margin: 0 auto;
}
.about-img-main { width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--areia); }
.about-img-main img, .about-img-main video { width: 100%; height: 100%; display: block; object-fit: cover; }
/* Foto exclusiva de celular (opcional, cai pra imagem de desktop se vazia) —
   mesma lógica do Hero: duas <img>, uma some por breakpoint via CSS. Não se
   aplica quando tem vídeo (o vídeo vale pros dois tamanhos de tela). */
.about-img-main .about-mobile-media,
.about-img-small .about-mobile-media { display: none; }

.about-right { display: flex; flex-direction: column; gap: var(--sp); }
/* slogan sem gap extra — cola direto após o CTA */
.about-slogan {
  font-family: 'Tenor Sans', sans-serif; font-size: 11px;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--preto);
  padding-top: var(--sp); border-top: 1px solid rgba(29,29,29,0.12);
  margin-top: 0;        /* sem espaço adicional — fica direto abaixo do CTA */
}
/* COLUNA DIREITA — foto pequena no topo, texto+CTA colados na margem inferior */
.about-right {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
.about-heading-block {
  display: flex;
  flex-direction: column;
  gap: calc(var(--sp) * 0.6);
}
.about-body-block {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp);
  padding-top: var(--sp);
}
.about-img-small {
  width: 100%;
  height: 380px;          /* mais altura — antes era 260px */
  overflow: hidden;
  background: var(--areia);
  flex-shrink: 0;
}
.about-img-small img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  object-position: center center;   /* centro-centro */
}
/* CADIZ-revisao-DOM-HOME-23jul26.md, item 1: home-about.tpl já suporta vídeo
   dentro de .about-img-small (about_has_video), mas o CSS nunca tinha regra
   própria pra <video> — só pro <img> acima. Mesmo tratamento (cover,
   centralizado). A parte ".about-img-main video" já existia (linha 648) e é
   redundante aqui, mas mantida junto por clareza/consistência do bloco. */
.about-img-small video, .about-img-main video {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
}

/* ── SOBRE A MARCA — mobile: empilhado na mesma ordem do PDF (imagem grande →
   título → imagem pequena → texto/CTA), usando display:contents em .about-right
   pra "desmontar" o wrapper e reordenar os 4 blocos como irmãos diretos, sem
   duplicar nada no Twig.
   Espaçamento: removido o margin-top + padding-top da seção (que somavam com
   o padding-bottom do Shop the Look, dobrando o respiro) — agora só o
   padding-bottom do Shop the Look separa as duas seções, igual ao padrão
   usado na transição das outras seções. ── */
@media (max-width: 991px) {
  .about-section { margin-top: 0; padding-top: 0; }
  .about-inner {
    display: flex;
    flex-direction: column;
    gap: var(--sp-v);
  }
  .about-right { display: contents; }
  .about-img-main { order: 1; }
  .about-heading-block { order: 2; }
  .about-img-small { order: 3; height: auto; aspect-ratio: 4 / 5; }
  .about-body-block { order: 4; margin-top: 0; padding-top: 0; }
  .about-img-main .about-desktop-media,
  .about-img-small .about-desktop-media { display: none; }
  .about-img-main .about-mobile-media,
  .about-img-small .about-mobile-media { display: block; }
}
/* CADIZ-revisao-DOM-HOME-23jul26.md, itens 2 e 3: no mobile "de verdade"
   (≤767.98px, breakpoint próprio — diferente do 991px do bloco acima, que
   ainda cobre a faixa intermediária 768-991px com aspect-ratio 4/5), o vídeo
   horizontal do about pedia proporção 16:9 (era 4/5, "em pé") + uma margem
   negativa pra compensar o gap: var(--sp-v) do flex pai, senão dobrava o
   respiro entre os blocos. */
@media (max-width: 767.98px) {
  html body .about-img-small.about-img-small {
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    margin-top: -30px !important;
    margin-bottom: -30px !important;
  }
}
/* espaçador empurra o bloco de texto para baixo */
.about-text-block {
  margin-top: auto;        /* gruda o texto na margem inferior */
  display: flex;
  flex-direction: column;
  gap: var(--sp);
  padding-top: var(--sp);
}
.about-eyebrow {
  font-family: 'DM Sans', sans-serif; font-size: 9px;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--castanho);
}
.about-title {
  font-family: 'Tenor Sans', sans-serif;
  font-size: clamp(22px, 3vw, 38px); font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--preto); line-height: 1.15;
}
.about-title em {
  font-style: italic;
  font-family: 'Cormorant Garamond', 'Tenor Sans', serif;
  letter-spacing: 0.01em;
}
.about-brandname {
  font-family: 'DM Sans', sans-serif; font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--castanho);
}
.about-divider { width: 32px; height: 1px; background: var(--castanho); }
.about-body {
  font-family: 'DM Sans', sans-serif; font-size: 14px;
  line-height: 1.8; color: #5a5a5a; font-weight: 300; max-width: 480px;
}
.about-body em { font-style: normal; color: var(--preto); font-weight: 400; }
.about-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'DM Sans', sans-serif; font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--preto);
  text-decoration: none;
  border-bottom: 1px solid rgba(29,29,29,0.3); padding-bottom: 3px;
  transition: opacity 0.3s; align-self: flex-start;
}
.about-cta:hover { opacity: 0.45; }
.about-cta svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* ── FOOTER ──────────────────────────────────── */
.footer {
  background: var(--preto);
  padding: var(--sp-v) var(--sp);
  display: flex; align-items: center; justify-content: center;
}
.footer-logo {
  font-family: 'Tenor Sans', sans-serif;
  font-size: 20px; letter-spacing: 0.16em;
  color: var(--off-white); text-decoration: none; font-weight: 400;
}


/* =============================================================================
   CADIZ Header — Konte header-v7
   Desktop: .header-main | Mobile: .header-mobile (estruturas separadas)
============================================================================= */

/* [25/08/2026] Barra de anúncios + cabeçalho unificados num wrapper único
   (".cadiz-header-stack", declarado em layouts/layout.tpl). Só o wrapper é
   "fixed" e anima "transform" — a barra e o cabeçalho, dentro dele, ficam
   em fluxo normal (um embaixo do outro), então é fisicamente impossível
   eles dessincronizarem ou se sobreporem: são sempre movidos juntos, num
   transform só, aplicado pelo cadiz-v6.js. */
.cadiz-header-stack {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    transition: transform 0.25s ease;
    will-change: transform;
}

.cadiz-header {
    position: relative;
    background: var(--off-white);
    border-bottom: 1px solid rgba(29,29,29,0.08);
}

/* [25/08/2026] Home: o hero tem 100vh de verdade — sem padding no body,
   o cabeçalho (+ barra de anúncios, se ativa) sobrepõe o topo do hero.
   Demais páginas: o padding-top compensa o cabeçalho fixo, calculado
   dinamicamente pelo cadiz-v6.js (barra + cabeçalho) via a variável CSS
   abaixo — o valor fixo é só um fallback pra antes do JS rodar. */
body.template-home { padding-top: 0; }
body:not(.template-home) { padding-top: var(--cadiz-header-offset, 60px); }

/* ── Barra de anúncios ──────────────────────── */
#cadiz-announcement-bar {
    position: relative;
    width: 100%;
    background-color: var(--announcement-bg);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    color: var(--off-white);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
    flex-wrap: wrap;
    box-sizing: border-box;
}

#cadiz-coupon-copy-btn {
    background: none;
    border: none;
    padding: 0; margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    position: relative; /* referência pro "Copiado" em posição absoluta */
}

#cadiz-coupon-copy-btn svg { width: 13px; height: 13px; flex-shrink: 0; stroke: currentColor; }

/* [25/08/2026] "Copiado" em posição absoluta — some/aparece sem
   deslocar o texto do cupom nem recentralizar a barra. */
#cadiz-coupon-copy-btn .cadiz-copied-text {
    display: none;
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 6px;
    white-space: nowrap;
}

#cadiz-coupon-copy-btn.copied .cadiz-copied-text { display: inline; }

/* ── Desktop ── */
.cadiz-header .header-main {
    height: 60px;
    display: flex;
    align-items: center;
}

.cadiz-header .konte-container-fluid {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    position: relative;
    height: 100%;
}

.cadiz-header .header-left-items { flex: 0 0 auto; z-index: 2; }

.cadiz-header .cadiz-logo { display: flex; align-items: center; text-decoration: none; }

.cadiz-header .cadiz-logo .logo-dark { height: 32px; width: auto; display: block; }

.cadiz-header .cadiz-logo .logo-text {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 18px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--preto);
}

.cadiz-header .header-center-items {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.cadiz-header .nav-menu {
    display: flex;
    align-items: center;
    gap: 36px;
    list-style: none;
    margin: 0; padding: 0;
}

.cadiz-header .nav-menu .menu-item > a {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--preto);
    text-decoration: none;
    transition: opacity 0.2s;
    white-space: nowrap;
    display: block;
    padding: 20px 0;
}

.cadiz-header .nav-menu .menu-item > a:hover { opacity: 0.45; }

/* Item "SALE" do menu principal sempre em negrito — por nome, não por posição.
   Se for removido/ocultado e voltar depois pro menu, o negrito acompanha sozinho. */
.cadiz-header .nav-menu li.cadiz-nav-sale > a { font-weight: 700; }

.cadiz-header .header-right-items {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 0 0 auto;
    z-index: 2;
}

.cadiz-header .header-right-items .icon a,
.cadiz-header .header-right-items .cart-summary a {
    display: flex;
    align-items: center;
    color: var(--preto);
    text-decoration: none;
    position: relative;
}

.cadiz-header .header-right-items svg { stroke: var(--preto); }

.cadiz-badge {
    position: absolute;
    top: -6px; right: -8px;
    background: var(--preto);
    color: var(--off-white);
    font-size: 9px;
    width: 16px; height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'DM Sans', sans-serif;
}

/* ── Mobile header (oculto no desktop) ── */
.cadiz-header .header-mobile { display: none; }

.cadiz-header .cadiz-header-mobile .konte-container-fluid { padding: 0 20px; height: 60px; }

.cadiz-hamburger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    width: 28px;
    height: 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

.cadiz-hamburger .hamburger-inner {
    display: block;
    width: 20px;
    height: 1px;
    background: var(--preto);
    position: relative;
}

.cadiz-hamburger .hamburger-inner::before,
.cadiz-hamburger .hamburger-inner::after {
    content: '';
    position: absolute;
    display: block;
    width: 20px;
    height: 1px;
    background: var(--preto);
}

.cadiz-hamburger .hamburger-inner::before { top: -6px; }
.cadiz-hamburger .hamburger-inner::after { top: 6px; }

.cadiz-header .mobile-header-icons {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cadiz-header .mobile-header-icons .icon a,
.cadiz-header .mobile-header-icons .cart-summary a {
    display: flex;
    align-items: center;
    color: var(--preto);
    text-decoration: none;
    position: relative;
}

/* ── Painel off-canvas ── */
.cadiz-mobile-panel {
    position: fixed;
    inset: 0;
    z-index: 9999;
    visibility: hidden;
    pointer-events: none;
}

.cadiz-mobile-panel.is-open { visibility: visible; pointer-events: auto; }

.cadiz-mobile-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.cadiz-mobile-panel.is-open .cadiz-mobile-backdrop { opacity: 1; }

.cadiz-mobile-inner {
    position: absolute;
    top: 0; left: 0;
    width: 80%;
    max-width: 360px;
    height: 100%;
    background: #F7F4EE;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.35s ease;
    overflow-y: auto;
    z-index: 1;
}

.cadiz-mobile-panel.is-open .cadiz-mobile-inner { transform: translateX(0); }

.cadiz-mobile-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(29,29,29,0.08);
    flex-shrink: 0;
}

.cadiz-mobile-logo { text-decoration: none; }
.cadiz-mobile-logo img { height: 24px; width: auto; }
.cadiz-mobile-logo span {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 16px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--preto);
}

.cadiz-mobile-close {
    background: none; border: none; cursor: pointer;
    padding: 4px; display: flex; align-items: center; color: var(--preto);
}

.cadiz-mobile-search {
    padding: 14px 20px;
    border-bottom: 1px solid rgba(29,29,29,0.06);
    flex-shrink: 0;
}

.cadiz-mobile-search form {
    display: flex; align-items: center; gap: 10px;
    border-bottom: 1px solid rgba(29,29,29,0.15); padding-bottom: 8px;
}

.cadiz-mobile-search svg { stroke: rgba(29,29,29,0.4); flex-shrink: 0; }

.cadiz-mobile-search input {
    flex: 1; border: none; outline: none;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    font-family: 'DM Sans', sans-serif; font-size: 13px;
    color: var(--preto); background: transparent;
}

.cadiz-mobile-search input::placeholder { color: rgba(29,29,29,0.35); }

.cadiz-mobile-nav {
    flex: 1; overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
.cadiz-mobile-nav::-webkit-scrollbar { display: none; width: 0; height: 0; } /* Chrome/Safari/iOS */

.cadiz-mobile-nav ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }

.cadiz-mobile-nav > ul > li > a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px; font-family: 'DM Sans', sans-serif; font-size: 14px;
    color: var(--preto); text-decoration: none;
    border-bottom: 1px solid rgba(29,29,29,0.05);
}

.cadiz-mobile-nav > ul > li > a:hover { color: var(--castanho); }

.cadiz-mobile-sub { display: none; background: rgba(29,29,29,0.02); }
.cadiz-mobile-has-sub.is-open .cadiz-mobile-sub { display: block; }

.cadiz-mobile-sub li a {
    display: block; padding: 12px 20px 12px 36px;
    font-family: 'DM Sans', sans-serif; font-size: 13px;
    color: rgba(29,29,29,0.6); text-decoration: none;
    border-bottom: 1px solid rgba(29,29,29,0.04);
}

/* Grupo de destaque (topo do menu mobile) — Coleção Atual, Novidades, Best Sellers, SALE
   Sem linhas entre elas (não são categorias com sub) — espaço "solto", só respiro.
   Margem acima (abaixo da barra de pesquisa) igual à margem abaixo (antes da linha
   divisória), para o espaçamento ficar simétrico. */
.cadiz-mobile-nav .cadiz-mobile-nav-featured {
    margin-top: 6px !important;
}
/* Precisa do prefixo ".cadiz-mobile-nav" pra ganhar de ".cadiz-mobile-nav > ul > li > a"
   em especificidade (mesma quantidade de classes, mas aquela regra tem 1 seletor de
   tipo a mais) — sem isso o padding: 14px genérico vence e o espaçamento volta a
   ficar grande. */
.cadiz-mobile-nav .cadiz-mobile-nav-featured > li > a {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    border-bottom: none !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* Negrito só em "SALE" — controlado pelo nome do item no painel (Loja online >
   Menus > Menu principal). Se ocultar/renomear o item, o negrito acompanha. */
.cadiz-mobile-nav-featured .cadiz-mobile-nav-sale > a { font-weight: 700; }

/* Linha fina separando o grupo de destaque das categorias — espaçamento ajustado
   para ficar equivalente ao espaço padrão entre os itens pautados abaixo (antes
   estava maior que o padrão, somando com o padding do último item de cima e do
   primeiro item de baixo). */
.cadiz-mobile-nav-divider {
    border: none;
    border-top: 1px solid rgba(29,29,29,0.1);
    margin: 6px 0 6px;
}

/* "Ocasião" — submenu sempre visível, sem depender de clique/accordion */
.cadiz-mobile-sub-static .cadiz-mobile-sub { display: block !important; }

/* ── Submenu mobile nível 2 (23/07) — ex.: "Partes de cima" dentro de
   "Vestuário", que no painel é "Leva a: Menu" (Blusas, Blazers, Ver tudo).
   Accordion independente do nível 1: abrir/fechar um item de nível 2 nunca
   fecha o pai (Vestuário) nem os irmãos de nível 1 (Ocasião etc.) — ver JS
   correspondente em cadiz-v3.js. ── */
.cadiz-mobile-sub-toggle {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}
.cadiz-mobile-chevron-2 { transition: transform 0.2s ease; flex-shrink: 0; }
.cadiz-mobile-has-sub-2.is-open > .cadiz-mobile-sub-toggle .cadiz-mobile-chevron-2 {
    transform: rotate(180deg);
}
.cadiz-mobile-sub-2 { display: none; background: rgba(29,29,29,0.035); }
.cadiz-mobile-has-sub-2.is-open .cadiz-mobile-sub-2 { display: block; }
.cadiz-mobile-sub-2 li a {
    display: block; padding: 10px 20px 10px 52px;
    font-family: 'DM Sans', sans-serif; font-size: 12px;
    color: rgba(29,29,29,0.55); text-decoration: none;
    border-bottom: 1px solid rgba(29,29,29,0.04);
}

/* Banner com botão, antes dos links finais do menu — margens finas ao redor */
.cadiz-mobile-banner { padding: 12px; }
.cadiz-mobile-banner-link {
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
}
.cadiz-mobile-banner-link img {
    width: 100%; height: 100%; display: block; object-fit: cover;
}
/* Proporção horizontal (3:2) — antes ficava vertical (2:3, herdada do
   tamanho natural da imagem). Qualquer imagem enviada é cropada nessa
   proporção, então o banner fica sempre paisagem. */
.cadiz-mobile-banner-link { aspect-ratio: 3 / 2; }
.cadiz-mobile-banner-btn {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    font-family: 'DM Sans', sans-serif;
    font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.7);
    padding-bottom: 2px;
    white-space: nowrap;
}

.cadiz-mobile-foot {
    padding: 20px; border-top: 1px solid rgba(29,29,29,0.08);
    display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}

.cadiz-mobile-account {
    font-family: 'DM Sans', sans-serif; font-size: 12px;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--preto); text-decoration: none;
}

.cadiz-mobile-socials { display: flex; gap: 18px; }
.cadiz-mobile-socials a { color: var(--preto); opacity: 0.5; display: flex; align-items: center; }
.cadiz-mobile-socials a:hover { opacity: 1; }
.cadiz-mobile-socials svg { fill: currentColor; }

/* ── Breakpoints ──
   CADIZ-fix-header-breakpoint (24/08): era 991px/992px — Nina notou que
   entre ~992px e ~1141px os links do menu desktop (Coleção Atual,
   Novidades, Vestuário, Ocasião + busca) ficavam sem espaço suficiente
   e se sobrepunham. Ela testou ao vivo no DevTools e confirmou que
   1142px é a menor largura onde o cabeçalho desktop ainda cabe direito
   — abaixo disso, melhor já virar o cabeçalho mobile. Os dois
   breakpoints abaixo têm que ficar sincronizados (o segundo controla o
   menu-drawer mobile, que precisa continuar funcionando em toda a
   faixa onde o cabeçalho mobile aparece). */
@media (max-width: 1141px) {
    .cadiz-header .header-main { display: none !important; }
    .cadiz-header .header-mobile { display: flex !important; align-items: center; height: 60px; }
}

@media (min-width: 1142px) {
    .cadiz-mobile-panel { display: none !important; }
}


/* =============================================================================
   CADIZ Footer — Konte v5
============================================================================= */

.cadiz-footer {
    background: var(--preto);
    color: rgba(247,244,238,0.6);
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
}

.cadiz-footer-container { padding-left: 40px !important; padding-right: 40px !important; }
.cadiz-footer-top { padding: 60px 0 48px; }
.cadiz-footer-row { align-items: flex-start; }

.cadiz-footer-col {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 48px !important;
}

.cadiz-footer-col:last-child { padding-right: 0 !important; }

.cadiz-footer-logo-img {
    height: 28px; width: auto;
    filter: brightness(0) invert(1); opacity: 0.85;
    display: block; margin-bottom: 16px;
}

.cadiz-footer-logo-text {
    font-family: 'Tenor Sans', sans-serif; font-size: 18px;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: #F7F4EE; display: block; margin-bottom: 16px;
}

.cadiz-footer-desc { font-size: 13px; line-height: 1.8; color: rgba(247,244,238,0.45); margin: 0 0 6px; }

.cadiz-footer-links { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.cadiz-footer-links li { list-style: none !important; margin-bottom: 6px; }
.cadiz-footer-links li::before,
.cadiz-footer-links li::marker { display: none !important; content: '' !important; }
.cadiz-footer-links li a { font-family: 'DM Sans', sans-serif; font-size: 12px; letter-spacing: 0.06em; color: rgba(247,244,238,0.5); text-decoration: none; transition: color 0.2s; }
.cadiz-footer-links li a:hover { color: #F7F4EE; }

/* Colunas 2 e 3 (menus Shop/Institucional) — espaçamento maior entre links que a coluna 1 (contato) */
.cadiz-footer-menu-links li { margin-bottom: 12px !important; }

/* Ícones delicados de Whatsapp/E-mail na lista de contato (coluna 1) — nunca maiores que o texto */
.cadiz-contact-link { display: inline-flex !important; align-items: center !important; gap: 6px !important; }
.cadiz-contact-icon { fill: currentColor; flex-shrink: 0; }

/* Submenu de item do rodapé (ex: Ocasião → Festa / Dia a dia), via "Leva a: Menu" no painel —
   grudado na borda esquerda, sem indent, exatamente embaixo do item pai. */
.cadiz-footer-sub { list-style: none !important; padding: 0 !important; margin: 12px 0 0 !important; }
.cadiz-footer-sub li { margin-bottom: 4px !important; }
.cadiz-footer-sub li a { font-size: 11px !important; color: rgba(247,244,238,0.35) !important; }
.cadiz-footer-sub li a:hover { color: #F7F4EE !important; }

/* Linha delicada separando o bloco logo+texto da lista de contato (coluna 1 do rodapé) */
.cadiz-footer-contact-divider {
    border: none;
    border-top: 1px solid rgba(247,244,238,0.15);
    margin: 16px 0;
    width: 50%;
    margin-left: 0;
}

.cadiz-footer-heading { font-family: 'Tenor Sans', sans-serif; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: #F7F4EE; margin: 0 0 16px; font-weight: 400; display: block; }

.cadiz-newsletter-form { margin-top: 16px; }
.cadiz-newsletter-row { display: flex !important; align-items: center !important; border-bottom: 1px solid rgba(247,244,238,0.25) !important; }
.cadiz-newsletter-input { flex: 1 !important; background: transparent !important; border: none !important; outline: none !important; color: rgba(247,244,238,0.7) !important; font-family: 'DM Sans', sans-serif !important; font-size: 13px !important; padding: 10px 0 !important; -webkit-appearance: none !important; }
.cadiz-newsletter-input::placeholder { color: rgba(247,244,238,0.3) !important; }
.cadiz-newsletter-btn { background: transparent !important; border: none !important; color: rgba(247,244,238,0.6) !important; font-family: 'DM Sans', sans-serif !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; padding: 10px 0 10px 16px !important; cursor: pointer !important; white-space: nowrap !important; -webkit-appearance: none !important; }
.cadiz-newsletter-btn:hover { color: #F7F4EE !important; }

.cadiz-footer-bottom { padding-bottom: 32px; }
.cadiz-footer-divider { border: none; border-top: 1px solid rgba(247,244,238,0.1); margin: 0 0 24px; }

.cadiz-footer-bar { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.cadiz-footer-copyright { font-size: 11px; color: rgba(247,244,238,0.28); }
.cadiz-footer-copyright a { color: rgba(247,244,238,0.28); text-decoration: none; }

.cadiz-footer-bar-right { display: flex !important; align-items: center !important; gap: 24px !important; }

.cadiz-footer-payment { display: flex; align-items: center; height: 16px; }
.cadiz-payment-img { height: 16px !important; width: auto !important; max-width: 160px !important; display: block !important; opacity: 1 !important; }

.cadiz-footer-social { display: flex !important; align-items: center !important; gap: 20px !important; }
.cadiz-social-icon { display: flex !important; align-items: center !important; color: #F7F4EE !important; text-decoration: none !important; transition: color 0.2s !important; }
.cadiz-social-icon:hover { color: #F7F4EE !important; }
.cadiz-social-icon svg { fill: currentColor !important; }

.cadiz-powered { display: flex; align-items: center; opacity: 0.3; }
.cadiz-powered a { font-size: 8px !important; color: rgba(247,244,238,0.3) !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; }
.cadiz-powered svg, .cadiz-powered img { height: 10px !important; width: auto !important; filter: brightness(0) invert(1) !important; opacity: 0.3 !important; }

@media (max-width: 768px) {
    .cadiz-footer-top { padding: 40px 0 32px; }
    .cadiz-footer-row { flex-direction: column !important; }
    .cadiz-footer-col { padding-right: 0 !important; padding-bottom: 28px !important; width: 100% !important; }
    .cadiz-footer-bar { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; }
    .cadiz-footer-bar-right { flex-wrap: wrap !important; gap: 16px !important; }
    .cadiz-payment-img { max-width: 200px !important; }
}

/* =============================================================================
   A partir daqui: transcrição do lote de 22/07/2026 — Grade v6 (seção 1),
   Home v4 (seções 2, 3, 4.1) e Nav/Rodapé v9 (seções 1, 2, 2.1, 3, 4, 5, 6.2,
   6.5, 7.2). As trocas de valor simples (fundo do megamenu, do painel mobile,
   opacidade das bandeiras/ícones, margem do hero, padding das setas mobile)
   já foram editadas direto nas regras originais, acima — aqui só entram
   regras novas (seletores que ainda não existiam no arquivo). Regra morta
   ".stl-card.is-highlighted .stl-img" (Home §1) foi removida, não some mais.
============================================================================= */

/* ── GRADE §1 — título das páginas de categoria: mesma fonte/tamanho das
   páginas institucionais (Tenor Sans, 36px). ── */
body.template-category .page-header .h1-huge-md {
  font-family: 'Tenor Sans', serif !important;
  font-size: 36px !important;
  font-weight: 700 !important;
}

/* ── HOME §3 — "ver tudo"/"conheça a história": hover não troca mais de cor,
   anima um sublinhado da esquerda pra direita (mesma duração da busca no
   header, 0.4s). O ":hover{color:...}" cancela uma regra global do tema
   base Recife (a:hover{color:var(--main-foreground-opacity-50)}) que
   competia por baixo mesmo com o opacity corrigido. ── */
.hero-cta, .cat-cta, .about-cta {
  border-bottom: none !important;
  position: relative;
}
.hero-cta::after, .cat-cta::after, .about-cta::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.hero-cta:hover, .cat-cta:hover, .about-cta:hover {
  opacity: 1 !important;
}
.hero-cta:hover::after, .cat-cta:hover::after, .about-cta:hover::after {
  transform: scaleX(1);
}
.hero-cta:hover, .cat-cta:hover {
  color: var(--off-white) !important;
}
.about-cta:hover {
  color: var(--preto) !important;
}
@media (max-width: 991px) {
  .hero-cta::after, .cat-cta::after, .about-cta::after {
    transform: scaleX(1);
  }
}

/* ── NAVRODAPE §2 + §2.1 — underline no link ativo (página atual), padrão
   único sem compensação de letter-spacing (cabeçalho + megamenu + mobile +
   rodapé) — a classe .cadiz-nav-active é aplicada pelo JS (cadiz.js). Além
   disso, mais espaçamento entre linhas quando um link do megamenu quebra em
   2 linhas (ex. "Ver tudo em Vestuário"). ── */
#primary-menu .menu-item > a.cadiz-nav-active,
.mega-menu a.cadiz-nav-active,
.cadiz-mobile-nav a.cadiz-nav-active,
.cadiz-footer-menu-links a.cadiz-nav-active {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.mega-menu a.mega-ver-tudo {
  line-height: 1.8;
}

/* ── NAVRODAPE §3 — "Ver tudo em Vestuário"/Ocasião/Beachwear clicável
   (quando o item tiver URL cadastrada no painel — ver header.tpl). ── */
.mega-menu a.mega-heading-link {
  color: rgb(122, 98, 72);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 2.52px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
}
.mega-menu a.mega-heading-link:hover {
  opacity: 0.7;
}

/* ── NAVRODAPE §4 — megamenu Vestuário (4 colunas): colunas com largura
   fixa (prioridade), a foto encolhe/cresce pra absorver o espaço restante.
   Escopado só em #cadiz-megamenu-vestuario — Ocasião/Beachwear (poucas
   colunas) continuam com a divisão 50/50 genérica (.mega-img/.mega-cols
   no topo deste arquivo), sem essa regra. ── */
#cadiz-megamenu-vestuario .mega-cols {
  flex: 0 0 auto;
}
#cadiz-megamenu-vestuario .mega-img {
  flex: 1 1 auto;
  min-width: 0;
}

/* ── NAVRODAPE §5 — busca inline no cabeçalho (substitui o modal fullscreen
   nativo, que não estava sendo renderizado com a config atual do painel).
   A lupa nunca desaparece — funciona como botão de "ir" quando o campo já
   está aberto. Ver header.tpl (component('search/search-form', ...)) e
   cadiz.js (toggle). ── */
.header-search.icon { position: relative; }
.header-search.icon.cadiz-search-open { z-index: 101; }
.header-search.icon .js-search-button {
  position: relative;
  z-index: 2;
}
.header-search.icon .cadiz-search-field-group {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 25px;
  height: 32px;
  overflow: hidden;
  transition: width 0.4s;
  z-index: 1;
}
.header-search.icon.cadiz-search-open .cadiz-search-field-group {
  width: 220px;
}
.header-search.icon .cadiz-search-field {
  width: 100%;
  height: 32px;
  padding: 6px 82px 6px 0;
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
  color: var(--preto);
  background: transparent;
  border: 0;
  border-bottom: 1.2px solid transparent;
  outline: none;
  pointer-events: none;
  transition: background 0.4s, border-color 0.4s;
}
.header-search.icon.cadiz-search-open .cadiz-search-field {
  background: var(--off-white);
  border-bottom: 1.2px solid var(--preto);
  pointer-events: auto;
}
.header-search.icon .cadiz-search-go-btn {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.66px;
  text-transform: uppercase;
  color: rgb(131, 136, 137);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 1;
  white-space: nowrap;
}
.header-search.icon.cadiz-search-open .cadiz-search-go-btn {
  opacity: 1;
  pointer-events: auto;
}
.header-search.icon .cadiz-search-suggestions {
  position: absolute;
  right: 0;
  top: 100%;
  width: 220px;
  z-index: 1;
}

/* CADIZ-fix-search-desktop (28/07, lote 3): esconde o segundo botão de
   "ir" (ícone de lupa duplicado) que a Nuvemshop já deixa pronto pra
   aparecer dentro do campo quando ele abre — sobrava um segundo ícone ao
   lado do ícone de busca original do header, redundante. */
.header-search.icon .cadiz-search-go-btn {
  display: none !important;
}
/* Fundo do dropdown de sugestões (era branco puro do CSS nativo da
   Nuvemshop) trocado pra bater com o fundo padrão do site.
   CADIZ-fix-search-popup (24/08): o "top" passou por duas revisões —
   primeiro ajustado pra 41px (encostado, sem o gap de 20px nativo),
   depois Nina pediu de volta um espaço acima do popup, só que agora
   fixo em 60px (testado ao vivo no DevTools). Largura aumentada de
   220px (nativo) pra 420px — os títulos dos produtos quebravam em até
   4 linhas, muito apertado; testado que 420px não estoura a borda
   direita do header (o dropdown é ancorado por "right:0", então só
   cresce pra esquerda). */
.header-search.icon .cadiz-search-suggestions {
  background-color: var(--off-white) !important;
  top: 60px !important;
  width: 420px !important;
}
/* Preço de cada produto no dropdown de sugestões, 1px menor que o nome do
   produto (nome fica em 14px nativo), mantendo o negrito nativo. Classe
   ".search-suggestions-price" é nativa da Nuvemshop, não existe em
   nenhum outro arquivo cadiz-*.css — por isso o override entra aqui. */
.header-search.icon .cadiz-search-suggestions .search-suggestions-price {
  font-size: 13px !important;
}

/* ── NAVRODAPE §6.2 — painel mobile: 24px acima de "Coleção Atual" e abaixo
   de "Novidades", 14px entre os dois — escalável (as pontas do grupo
   recebem o ajuste extra, o meio já fica em 14px naturalmente). ── */
.cadiz-mobile-nav .cadiz-mobile-nav-featured { margin-top: 12px !important; }
.cadiz-mobile-nav-featured > li > a { padding-top: 7px !important; padding-bottom: 7px !important; }
.cadiz-mobile-nav-featured > li:first-child > a { padding-top: 12px !important; }
.cadiz-mobile-nav-featured > li:last-child > a { padding-bottom: 12px !important; }
.cadiz-mobile-nav-divider { margin-top: 12px !important; }

/* ── NAVRODAPE §6.5 — banner de imagem no rodapé do menu mobile: camada de
   GPU separada, evita repintura a cada quadro da animação de abrir/fechar
   (imagem pesada, 1280×1920px reais exibida em 336×224px). ── */
.cadiz-mobile-inner,
.cadiz-mobile-banner-link,
.cadiz-mobile-banner-link img {
  will-change: transform;
}

/* ── NAVRODAPE §7.2 — popup do carrinho no mobile: largura 100vw (o painel
   nativo vinha fixo em 600px, cortando à esquerda abaixo desse breakpoint).
   Só a largura — a posição aberta/fechada (right/left) fica por conta do
   mecanismo nativo do modal, que já anima certo sozinho. ── */
@media (max-width: 767px) {
  #modal-cart,
  #modal-cart .js-ajax-cart-panel {
    width: 100vw !important;
    max-width: 100vw !important;
  }
}

/* =============================================================================
   A partir daqui: transcrição do lote de 23/07/2026 — cadiz-dom-account-23jul26.md
   (login, cadastro, minha conta, editar perfil, recuperar senha),
   cadiz-dom-error-23jul26.md (busca sem resultado + 404) e o carrossel
   "Precisa de inspiração?" novo dessas duas últimas páginas. Sitewide porque
   este arquivo (cadiz-v2.css) carrega em toda página — cada bloco é escopado
   por body.template-* pra não vazar pra outro lugar.
============================================================================= */

/* ── ACCOUNT §1 — campo (container), label (escondido visualmente, mantido
   acessível) e input com underline único. Vale pra login, cadastro, editar
   perfil e recuperar senha (mesmo componente nativo nas 4 páginas). ── */
.account-page .form-group { margin-bottom: 24px; position: relative; }
.account-page .form-group .form-label {
  position: absolute !important;
  width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}
/* CADIZ-fix-mobile-deform (28/07): sem o reset de appearance abaixo, o Safari
   iOS mantinha o "chrome" nativo do campo por baixo do CSS (principalmente
   em campos de senha, onde o iOS reserva uma área própria à direita pro
   ícone de preenchimento automático) — mesmo com width:100%, a caixa nativa
   não ocupava o espaço todo, deixando um vazio à direita e o botão de
   mostrar/esconder senha solto fora do campo. Reproduzido só no Safari real
   (iPhone 14 Pro), nunca no Chrome/DevTools. */
/* CADIZ-fix-mobile-deform-2 (28/07, confirmado no Simulador iOS): o "width:
   100% !important" abaixo estava conflitando com a classe nativa
   "form-control-ios" do próprio Nuvemshop (o form-group pai já recebe
   "min-width: 0" inline, tratamento nativo pro WebKit) e causava a mesma
   deformação de largura mesmo depois do fix de appearance acima. Removido
   width daqui: o Bootstrap nativo já define width:100% (sem !important) na
   classe base .form-control, então nada muda em desktop/Chrome — só se
   evita o conflito específico do Safari/iOS. Confirmado ao vivo no Web
   Inspector do Simulador antes de publicar. */
.account-page .form-group input.form-control {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(22,22,25,0.15) !important;
  border-radius: 0 !important;
  padding: 10px 0 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  color: var(--preto) !important;
  box-shadow: none !important;
  outline: none !important;
  height: auto !important;
}
.account-page .form-group input.form-control::placeholder { color: rgba(29,29,29,0.4) !important; }
.account-page .form-group input.form-control:not(:placeholder-shown),
.account-page .form-group input.form-control:-webkit-autofill,
.account-page .form-group input.form-control:focus {
  border-bottom: 1px solid var(--preto) !important;
}
.account-page .form-group input.form-control:-webkit-autofill,
.account-page .form-group input.form-control:-webkit-autofill:hover,
.account-page .form-group input.form-control:-webkit-autofill:focus,
.account-page .form-group input.form-control:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #F7F4EE inset !important;
  -webkit-text-fill-color: var(--preto) !important;
  transition: background-color 5000s ease-in-out 0s;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
}

/* ── ACCOUNT §5 — ícone de mostrar/esconder senha, alinhado ao centro vertical
   do input (não mais ao form-group inteiro). ── */
.account-page .form-group .js-password-toggle {
  top: 18.5px !important;
  transform: translateY(-50%) !important;
}

/* ── ACCOUNT §6 — link "Esqueceu a senha?" (login). Só formaliza o
   margin-top que a classe nativa .mt-2 já produzia (16px), sem mudar valor. ── */
.account-page .text-right.mt-2.mb-2 { margin-top: 1rem !important; }

/* ── ACCOUNT §7 — botão principal (Iniciar sessão / Criar conta / Salvar /
   Enviar email). Classe duplicada pra ganhar especificidade de uma regra
   nativa que travava margin-top em 0 mesmo com !important. ── */
.account-page button[type="submit"].btn-primary.btn-primary {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.96px !important;
  color: #F7F4EE !important;
  background: #161619 !important;
  border: 1px solid #161619 !important;
  border-radius: 0 !important;
  padding: 16px !important;
  height: auto !important;
  box-shadow: none !important;
  margin-top: 32px !important;
}

/* ── ACCOUNT §9 — título das páginas de conta (login/cadastro/minha conta/
   editar perfil/recuperar senha), mesmo padrão de body.template-category
   acima. ── */
body[class*="template-account"] .page-header .h1-huge-md {
  font-family: 'Tenor Sans', serif !important;
  font-size: 36px !important;
  font-weight: 700 !important;
}

/* ── ACCOUNT §10 — título centralizado, mais respiro acima.
   CADIZ-fix-titulo-alinhamento (23/07): faltava o escopo
   "body[class*='template-account']" aqui — sem ele, a regra vazava e
   centralizava o título de TODAS as páginas com page-header (categoria,
   busca, 404, contato, institucional, blog...), não só das de conta.
   Nina reportou (print de /novidades) o título "Novidades" centralizado
   quando devia estar à esquerda. Escopado agora só pras páginas de conta,
   onde esse centralizado é intencional (bloco §13 também centraliza o
   layout da conta). ── */
body[class*="template-account"] .page-header.py-4 h1 {
  text-align: center !important;
  margin-top: 48px !important;
}

/* ── ACCOUNT §11 — espaço abaixo do link "Criar uma conta"/"Já possui uma
   conta? Faça login" no fim do form (login e cadastro). Classe duplicada
   porque a regra foi adicionada depois de já existir a versão simples no
   registro ao vivo — mantidas as duas variações do seletor por segurança. ── */
.account-page .mt-2.mb-2.text-center.font-small,
.account-page .mt-2.mb-2.text-center.font-small.font-small {
  margin-bottom: 48px !important;
}

/* ── ACCOUNT §12 — espaço entre título e bloco de campos (login/cadastro). ── */
.account-page.mb-4 { margin-top: 24px !important; }

/* ── ACCOUNT §13 — centraliza o bloco de campos (login/cadastro/editar/
   recuperar) — a coluna .col-md-5 nativa ficava alinhada à esquerda. ── */
.account-page .row { justify-content: center !important; }

/* ── ACCOUNT — /account/ (orders.tpl): dobro de espaço abaixo do título e
   acima do rodapé. ── */
body[class*="template-account"] .page-header.py-4 { padding-bottom: 48px !important; }
.account-page.mb-4.mb-4 { margin-bottom: 48px !important; }

/* ── ACCOUNT — caixa "Dados Pessoais": borda, padding, sem esticar de
   altura, sem margem extra no último filho. ── */
.account-page .col-md-4.col-md-4 {
  border: 1px solid rgba(22,22,25,0.15) !important;
  padding: 14px !important;
  align-self: flex-start !important;
}
.account-page .col-md-4.col-md-4 > *:last-child { margin-bottom: 0 !important; }

/* ── ACCOUNT — botões "Sair"/"Ir para a loja" (e, por consequência, o botão
   de ação do card de pedido, que usa a mesma classe .btn.btn-primary — já
   confirmado e aceito por Nina) viram links de texto sublinhados. ── */
.account-page a.btn.btn-default.btn-default,
.account-page a.btn.btn-primary.btn-primary {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  color: var(--preto) !important;
  text-decoration: underline !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
}
.account-page a.btn.btn-primary.btn-primary.mt-2 { margin-top: 12px !important; }

/* ── ACCOUNT — card de pedido (/account/): espaçamento interno e texto
   padronizado, com negrito preservado no status (Pago/Enviado etc.). Não
   confirmado 1:1 contra um pedido real (testado com HTML simulado) —
   conferir quando existir um pedido de verdade. ── */
.account-page [data-store^="account-order-item"] .card .card-header,
.account-page [data-store^="account-order-item"] .card .card-body,
.account-page [data-store^="account-order-item"] .card .card-footer {
  padding: 14px !important;
}
.account-page [data-store^="account-order-item"] .card *:not(.btn):not(.btn):not(.btn) {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}
.account-page [data-store^="account-order-item"] .card .card-body .col-7 p strong:not(.btn):not(.btn):not(.btn) {
  font-weight: 700 !important;
}

/* ── ACCOUNT — /account/info: espaço abaixo do link "Quer mudar sua senha?" ── */
.account-page .mt-3.text-center.text-center { margin-bottom: 48px !important; }

/* ── ACCOUNT — /account/reset: subtítulo sem negrito. ── */
.account-page h2.h6.mb-4.mb-4 { font-weight: 400 !important; }

@media (max-width: 767.98px) {
  .account-page .form-group input.form-control,
  .cadiz-mobile-search input,
  .cadiz-newsletter-input,
  .cadiz-select,
  #modal-cart .js-shipping-input,
  #modal-cart .js-cart-quantity-input.form-control-inline,
  #cadiz-dom-qty-cta-row .js-quantity-input {
    font-size: 16px !important;
  }
}

/* =============================================================================
   ERROR PAGES — busca sem resultado (template-search) e 404 (template-404).
   Nenhum dos dois tem um CSS próprio carregado condicionalmente (template
   'search' carrega cadiz-grid-v4.css, mas 'search' aqui é escopado do mesmo
   jeito que os outros blocos deste arquivo sitewide; '404' não tem NENHUM
   arquivo CSS condicional, então precisa estar aqui). Tudo escopado por
   body.template-* pra não vazar pra outras páginas.
============================================================================= */

/* ── ERROR — busca: título "Não encontramos nada para..." ── */
body.template-search .page-header h1.h2 {
  font-family: 'Tenor Sans', serif !important;
  font-size: 36px !important;
}
body.template-search h5.my-4.font-weight-normal {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
}
body.template-search h5.my-4.font-weight-normal a {
  text-decoration: underline !important;
}
.cadiz-search-header-container.cadiz-search-header-container,
.cadiz-search-body-container.cadiz-search-body-container {
  max-width: 100% !important;
  padding-left: 60px !important;
  padding-right: 60px !important;
}
@media (max-width: 767.98px) {
  .cadiz-search-header-container.cadiz-search-header-container,
  .cadiz-search-body-container.cadiz-search-body-container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* ── ERROR — 404 ── */
body.template-404 .page-header h1.h2 {
  font-family: 'Tenor Sans', serif !important;
  font-size: 36px !important;
}
body.template-404 .page-header.py-4.py-4 {
  padding-top: 56px !important;
}
body.template-404 #page-error h2.h5 {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}
body.template-404 #page-error h2.h5 a {
  text-decoration: underline !important;
}
.cadiz-404-header-container.cadiz-404-header-container,
.cadiz-404-body-container.cadiz-404-body-container {
  max-width: 100% !important;
  padding-left: 60px !important;
  padding-right: 60px !important;
}

/* ── ERROR — carrossel "Precisa de inspiração?" (busca + 404, mesmo id
   reaproveitado nas duas páginas — nunca aparecem juntas). Reaproveita
   inteiramente o CSS de .collection-section/.carousel-* já existente pra
   home (Coleção Atual) mais acima neste arquivo — só falta a margem
   inferior antes do rodapé, que é específica dessas duas páginas. ── */
#cadiz-search-inspiration-carousel {
  margin-bottom: 48px !important;
}


/* =============================================================================
   CARRINHO (/comprar) — cadiz-dom-carrinho.md. Página de carrinho completa
   NÃO tem CSS condicional próprio (só o do popup, cadiz-cart-v1.css, que é
   escopado por #modal-cart e não alcança esta página) — por isso tudo aqui,
   sitewide, escopado por body.template-cart pra não vazar pra outra página
   nem pro popup do carrinho quando aberto em cima de outra página.
============================================================================= */

/* ── CARRINHO §2/3 — caixa de totais (coluna direita): borda, padding,
   sem esticar de altura. ── */
body.template-cart .cadiz-cart-col-right.cadiz-cart-col-right {
  border: 1px solid rgba(22, 22, 25, 0.15) !important;
  padding: 14px !important;
  align-self: flex-start !important;
}

/* ── CARRINHO §4 — stepper de quantidade sem caixa/borda (desktop). ── */
body.template-cart .js-ajax-cart-list .cart-item-quantity.form-quantity.form-quantity {
  border-width: medium !important;
  border-style: none !important;
  border-color: currentcolor !important;
  border-image: initial !important;
}

/* ── CARRINHO §5 — fonte do card do item inteiro. ── */
body.template-cart .js-ajax-cart-list .cart-item,
body.template-cart .js-ajax-cart-list .cart-item * {
  font-size: 12px !important;
}

/* ── CARRINHO §9 — esconde o "x" duplicado (desktop) no mobile — o botão já
   tem d-none/d-md-inline-block no próprio HTML (cart-item-ajax.tpl); esta
   regra é reforço, conforme testado ao vivo. ── */
@media (max-width: 767.98px) {
  body.template-cart .cadiz-cart-x-desktop.cadiz-cart-x-desktop {
    display: none !important;
  }
}

/* ── CARRINHO §10 — fonte de Subtotal/Frete no resumo. ── */
body.template-cart #cart-sticky-summary [data-store="cart-subtotal"],
body.template-cart #cart-sticky-summary [data-store="cart-subtotal"] span,
body.template-cart #shipping-cost-container,
body.template-cart #shipping-cost-container span {
  font-size: 12px !important;
}

/* ── CARRINHO §11 — fonte do Total (regra repetida 2x ao vivo, sem
   conflito — mantida 1x aqui). ── */
body.template-cart .js-cart-total-container .row.mb-3.h4.font-large,
body.template-cart .js-cart-total-container .row.mb-3.h4.font-large > span.col-auto,
body.template-cart .js-cart-total-container .js-cart-total {
  font-size: 18px !important;
}

/* ── CARRINHO §12 — fonte das parcelas. ── */
body.template-cart .js-installments-cart-total.js-installments-cart-total,
body.template-cart .js-installments-cart-total.js-installments-cart-total * {
  font-size: 11px !important;
}

/* ── CARRINHO §13 — espaço em dobro antes do botão "Iniciar Compra". ── */
body.template-cart .cadiz-cta-box.cadiz-cta-box {
  margin-top: 32px !important;
}

/* ── CARRINHO §14 — espaço em dobro abaixo do cabeçalho da página. ── */
body.template-cart .page-header.py-4.py-4 {
  padding-bottom: 48px !important;
}

/* ── CARRINHO §15 — espaço em dobro abaixo do texto "não contabiliza
   feriados" (renderizado por snipplets/shipping_options.tpl, dentro da
   calculadora de frete incluída na coluna esquerda). ── */
body.template-cart form[data-store="cart-form"] .font-small.mb-3.mb-3 {
  margin-bottom: 48px !important;
}

/* ── CARRINHO §16 — fonte/peso do título da página. ── */
body.template-cart .page-header .h1-huge-md.h1-huge-md {
  font-family: "Tenor Sans", serif !important;
  font-size: 36px !important;
  font-weight: 700 !important;
}

/* ── CARRINHO §17 — "Carrinho de compras" -> "Carrinho", SEM tocar na
   tradução (config/translations.txt é compartilhado com outras páginas) —
   truque 100% CSS: zera a fonte do texto real (que continua no DOM/HTML,
   inclusive pra acessibilidade/leitor de tela) e mostra só "Carrinho" via
   ::before.
   BUG CONFIRMADO AO VIVO (23/07, print da Nina): a regra do §16 logo acima
   (".page-header .h1-huge-md.h1-huge-md") tem mais especificidade CSS
   (2 classes dobradas = 0,4,1) que a seletor simples "h1.h2" daqui
   (0,3,2 perde no empate de classes), então o font-size:36px do §16 vencia
   o font-size:0 daqui e o texto real reaparecia por baixo do "::before"
   — resultado: "CarrinhoCarrinho de compras" concatenados. Corrigido
   igualando/superando a especificidade do §16 (h1.h2.h1-huge-md, 4 classes
   + 2 elementos = 0,4,2 > 0,4,1). ── */
body.template-cart .page-header h1.h2.h1-huge-md {
  font-size: 0 !important;
  line-height: 0 !important;
}
body.template-cart .page-header h1.h2.h1-huge-md::before {
  content: "Carrinho";
  display: inline-block;
  font-family: "Tenor Sans", serif !important;
  font-size: 36px !important;
  font-weight: 700 !important;
  line-height: 1.2;
}

/* ── CARRINHO §18 — mais espaço antes de "Meios de envio" (classe nova
   adicionada em snipplets/shipping/cart-fulfillment.tpl). ── */
body.template-cart .cadiz-fulfillment-spacing.cadiz-fulfillment-spacing {
  margin-top: 36px !important;
}

/* ── CARRINHO §19 — acordeão "Meios de envio" sempre aberto. ── */
body.template-cart .js-accordion-private-content.js-accordion-private-content {
  display: block !important;
}
body.template-cart .js-accordion-private-toggle-inactive.js-accordion-private-toggle-inactive,
body.template-cart .js-accordion-private-toggle-active.js-accordion-private-toggle-active {
  display: none !important;
}

/* ── CARRINHO §21 — borda da caixa de totais some no mobile. ── */
@media (max-width: 767.98px) {
  body.template-cart .cadiz-cart-col-right.cadiz-cart-col-right {
    border-width: medium !important;
    border-style: none !important;
    border-color: currentcolor !important;
    border-image: initial !important;
  }
}

/* ── QUICKSHOP (28/07, lote 3) — popup de compra rápida (ícone de sacola
   no card do produto), mobile e desktop: fundo trocado de branco (padrão
   nativo da Nuvemshop) pra bater com o fundo padrão do site. Precisou de
   3 seletores porque o branco vinha empilhado em 3 elementos diferentes
   dentro do mesmo popup — sobrescrever só o #quickshop-modal não bastava,
   o wrapper interno .js-item-product.modal-scrollable tinha fundo branco
   próprio por cima. Nenhuma dessas 3 classes existe em outro arquivo
   cadiz-*.css (são nativas da Nuvemshop), por isso o override entra aqui. ── */
#quickshop-modal.modal {
  background-color: var(--off-white) !important;
}
#quickshop-modal .modal-body {
  background-color: var(--off-white) !important;
}
#quickshop-modal .js-item-product.modal-scrollable {
  background-color: var(--off-white) !important;
}

/* ── PEDIDO (24/08) — botão "Solicitar troca/devolução" na página de
   detalhe do pedido (templates/account/order.tpl). Mesmo visual do botão
   "Adicionar mais produtos" do carrinho (fundo transparente, borda fina,
   uppercase, DM Sans) — testado ao vivo com a Nina antes de aplicar. ── */
.order-return-request {
  margin-top: 12px;
}
.order-return-request .btn-outline-cadiz {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.96px;
  color: #161619;
  background: transparent;
  border: 1px solid rgba(22, 22, 25, 0.2);
  border-radius: 0;
  padding: 16px;
  text-align: center;
  text-decoration: none;
}
.order-return-request .order-return-policy-link {
  display: block;
  margin-top: 8px;
  text-align: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: rgba(22, 22, 25, 0.6);
  text-decoration: underline;
}