/* ============================================================
   Sol e Lua — Loja (categoria + produto) — DS v3 Commerce
   Etapa 18. Carregado SÓ em produto/categoria/shop (enqueue
   condicional no functions.php); nunca em cart/checkout/account.
   Tokens e @font-face espelham assets/css/home.css (fonte da verdade).
   Componentes visuais (header, cards, galeria, swatches) entram
   nos Passos 3-5.
   ============================================================ */

/* ===== Fontes self-hosted (mesmas da home; woff2 em ../fontes/) ===== */
@font-face { font-family:'Jost'; font-style:normal; font-weight:400; font-display:swap; src:url('../fontes/jost-400.woff2') format('woff2'); }
@font-face { font-family:'Jost'; font-style:normal; font-weight:500; font-display:swap; src:url('../fontes/jost-500.woff2') format('woff2'); }
@font-face { font-family:'Jost'; font-style:normal; font-weight:600; font-display:swap; src:url('../fontes/jost-600.woff2') format('woff2'); }
@font-face { font-family:'Jost'; font-style:normal; font-weight:700; font-display:swap; src:url('../fontes/jost-700.woff2') format('woff2'); }
@font-face { font-family:'Jost'; font-style:normal; font-weight:800; font-display:swap; src:url('../fontes/jost-800.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:italic; font-weight:500; font-display:swap; src:url('../fontes/cormorant-garamond-500-italic.woff2') format('woff2'); }

/* ===== Tokens DS v3 (cópia fiel de assets/css/home.css:4-49) ===== */
:root {
  --azul: #0B1D51; --azul-medio: #1B2D6B; --azul-claro: #2A3F7E;
  --amarelo: #FEC601; --amarelo-c: #FFD740;
  --coral: #F05D5E; --coral-d: #D94849;
  --ciano: #06AED5;
  --creme: #FDF6F1; --creme-d: #F5EAE0; --nude: #EDD9CC;
  --verde-pix: #00BFA5;
  --whatsapp: #25D366;
  --branco: #FFFFFF;
  --cinza-bg: #F4F2EE;
  --cinza-1: #EEEAE3;
  --cinza-2: #D8D2C7;
  --cinza-3: #8A8378;
  --cinza-4: #4A4640;
  --preto: #18120E;

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'Jost', system-ui, sans-serif;

  --w-light: 300; --w-regular: 400; --w-medium: 500;
  --w-semibold: 600; --w-bold: 700; --w-black: 800;

  --f-xs: 0.72rem; --f-sm: 0.81rem; --f-base: 0.94rem;
  --f-md: 1.06rem; --f-lg: 1.19rem; --f-xl: 1.38rem;
  --f-2xl: 1.63rem; --f-3xl: 2rem; --f-4xl: 2.5rem; --f-hero: 3.5rem;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;
  --s12: 48px; --s16: 64px; --s20: 80px;

  --r-sm: 4px; --r-md: 10px; --r-lg: 20px;
  --r-xl: 32px; --r-pill: 9999px;

  --sh-xs: 0 1px 4px rgba(27,45,91,0.06);
  --sh-sm: 0 2px 12px rgba(27,45,91,0.08);
  --sh-md: 0 6px 24px rgba(27,45,91,0.10);
  --sh-lg: 0 12px 40px rgba(27,45,91,0.12);
  --sh-ouro: 0 4px 20px rgba(254,198,1,0.30);

  --max-w: 1320px;
  --pad-x: clamp(12px, 3vw, 32px);

  --t-fast: 0.15s ease;
  --t-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== Base tipográfica escopada à loja (sem vazar p/ wp-admin/checkout) ===== */
body.woocommerce:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) {
  font-family: var(--font-sans);
  color: var(--preto);
}

.single-product .product_title,
.tax-product_cat .woocommerce-products-header__title {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--azul);
}

/* ============================================================
   HEADER DS v3 (Passo 3) — espelho fiel do header da home/16a
   (assets/css/header.css). Mesmas regras e ORDEM para o cascade
   resolver idêntico. Renderizado por inc/header-solelua.php, que
   substitui o header do Astra só em produto/categoria/shop.
   Tokens DS v3 já definidos no :root acima (não re-declarar).
   ============================================================ */

/* ---------- Skip-link (acessibilidade) ---------- */
.skip-link {
  position: absolute; top: -56px; left: var(--s3);
  background: var(--azul); color: var(--branco);
  padding: var(--s2) var(--s4); border-radius: var(--r-sm);
  font-weight: var(--w-semibold); z-index: 300;
  transition: top var(--t-fast);
}
.skip-link:focus { top: var(--s3); }

/* ---------- Reset escopado (cobre o header sobre os estilos do Astra) ---------- */
.header *, .header *::before, .header *::after,
.topbar *, .topbar *::before, .topbar *::after { box-sizing: border-box; }
.header a, .topbar a { text-decoration: none; }
.topbar a { color: inherit; }
.header img { display: block; max-width: 100%; }

/* ---------- Container do header (renomeado p/ não colidir com containers do Astra/Woo) ---------- */
.hdr-container { max-width: var(--max-w); margin: 0 auto; padding-inline: var(--pad-x); }

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar {
  background: var(--azul);
  color: var(--branco);
  font-size: var(--f-xs);
  font-weight: var(--w-medium);
}
.topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s2) 0;
  gap: var(--s4);
}
/* Aviso deslizante (marquee): viewport recortado + faixa duplicada (2 grupos
   identicos) animada a -50% = loop continuo e perfeito. Pausa ao passar o mouse. */
.topbar-benefits { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.topbar-track { display: flex; width: max-content; animation: topbar-marquee 32s linear infinite; }
.topbar-track:hover { animation-play-state: paused; }
.topbar-group { display: flex; align-items: center; gap: var(--s6); padding-right: var(--s6); flex: 0 0 auto; }
.topbar-benefit { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.topbar-benefit svg { width: 14px; height: 14px; color: var(--amarelo); }
.topbar-benefit strong { color: var(--amarelo); font-weight: var(--w-bold); }
.topbar-links { display: flex; gap: var(--s5); flex: 0 0 auto; }
.topbar-links a { opacity: 0.85; transition: var(--t-fast); }
.topbar-links a:hover { opacity: 1; color: var(--amarelo); }

@keyframes topbar-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (max-width: 1023px) {
  .topbar-links { display: none; }
  .topbar-inner { padding: 6px 0; }
}

/* ============================================================
   HEADER
   ============================================================ */
.header {
  background: var(--branco);
  box-shadow: var(--sh-xs);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-main {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s8);
  padding-block: var(--s4);
}

.logo {
  font-family: var(--font-serif);
  font-size: var(--f-2xl);
  font-weight: var(--w-medium);
  color: var(--azul);
  line-height: 1;
  letter-spacing: -0.01em;
  display: flex;
  flex-direction: column;
}
.logo-main { font-style: italic; }
.logo-sub {
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--cinza-3);
  font-weight: var(--w-semibold);
  margin-top: 2px;
}

.search {
  position: relative;
  max-width: 640px;
  width: 100%;
  justify-self: center;
}
.search-input {
  width: 100%;
  height: 46px;
  padding: 0 56px 0 var(--s5);
  background: var(--cinza-bg);
  border: 2px solid transparent;
  border-radius: var(--r-md);
  font: var(--w-medium) var(--f-sm) var(--font-sans);
  color: var(--preto);
  transition: var(--t-base);
}
.search-input::placeholder { color: var(--cinza-3); font-weight: var(--w-regular); }
.search-input:focus {
  outline: none;
  background: var(--branco);
  border-color: var(--azul);
}
.search-btn {
  position: absolute;
  right: 4px; top: 4px; bottom: 4px;
  width: 46px;
  background: var(--azul);
  color: var(--branco);
  border: none;
  cursor: pointer;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  transition: var(--t-base);
}
.search-btn:hover { background: var(--amarelo); color: var(--azul); }
.search-btn svg { width: 18px; height: 18px; }

.header-actions { display: flex; align-items: center; gap: var(--s5); }
.header-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--preto);
  font-size: var(--f-xs);
  font-weight: var(--w-medium);
  position: relative;
  transition: var(--t-fast);
}
.header-action:hover { color: var(--azul); }
.header-action svg { width: 22px; height: 22px; stroke-width: 1.8; }
.cart-count {
  position: absolute;
  top: -5px; right: -9px;
  background: var(--coral);
  color: var(--branco);
  font-size: 10px;
  font-weight: var(--w-bold);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
}
.cart-count[hidden] { display: none; }

.menu-toggle { display: none; }

/* ============================================================
   PÚBLICOS (navegação primária)
   ============================================================ */
.publicos {
  background: var(--branco);
  border-top: 1px solid var(--cinza-1);
}
.publicos-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.publico-link {
  padding: var(--s4) var(--s3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  font-family: var(--font-sans);
  font-size: var(--f-sm);
  font-weight: var(--w-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--preto);
  border-right: 1px solid var(--cinza-1);
  transition: var(--t-fast);
}
.publico-link:last-child { border-right: none; }
.publico-link:hover { background: var(--cinza-bg); color: var(--azul); }
.publico-link .ico { font-size: 18px; line-height: 1; }
.publico-link.is-primary { position: relative; }
.publico-link.is-primary::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 3px;
  background: var(--amarelo);
}
.publico-link.is-ofertas { background: var(--coral); color: var(--branco); }
.publico-link.is-ofertas:hover { background: var(--coral-d); color: var(--branco); }

@media (max-width: 1023px) {
  .header-main { grid-template-columns: auto auto auto; gap: var(--s3); }
  .search { grid-column: 1 / -1; order: 3; }
  .menu-toggle {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    color: var(--preto);
  }
  .menu-toggle svg { width: 24px; height: 24px; }
  .header-action span { display: none; }
  .publico-link {
    flex-direction: column;
    gap: 4px;
    font-size: 10px;
    padding: var(--s3) var(--s1);
    letter-spacing: 0.05em;
  }
  .publico-link .ico { font-size: 22px; }
}

/* ---- Ajuste do header mobile: logo a esquerda, acoes a direita
   (substitui o grid auto/auto/auto acima) ---- */
@media (max-width: 1023px) {
  .header-main { grid-template-columns: 1fr auto; }
}

/* ---- Logo real no header (imagem no lugar do texto) ---- */
.header .logo img { display: block; width: auto; height: auto; max-height: 46px; }

/* ---- Guarda contra overflow horizontal no mobile ---- */
body { overflow-x: clip; }

/* ---- Redes sociais no header (ao lado de "Conta") ---- */
.header-socials { display: inline-flex; align-items: center; gap: var(--s3); }
.header-social { display: grid; place-items: center; color: var(--preto); transition: var(--t-fast); }
.header-social:hover { color: var(--azul); }
.header-social svg { width: 20px; height: 20px; }

/* No mobile: logo menor e acoes apertadas; .header-socials vira display:contents
   para Instagram/Facebook/Conta/Sacola ficarem no mesmo flex de .header-actions. */
@media (max-width: 1023px) {
  .header .logo img { max-height: 22px; }
  .header-action svg { width: 19px; height: 19px; }
  .header-social svg { width: 18px; height: 18px; }
  .header-actions { gap: var(--s4); }
  .header-socials { display: contents; }
}

/* Em celular (<=600px) escondemos Instagram/Facebook do header (apertava e
   cortava o carrinho). As redes seguem no rodape. */
@media (max-width: 600px) {
  .header-socials { display: none; }
}

/* ---- Modo deitado / telas baixas (landscape no celular): esconde a topbar,
   solta o header do sticky e compacta paddings. ---- */
@media (max-height: 500px) {
  .topbar { display: none; }
  .header { position: static; }
  .header-main { padding-block: var(--s2); }
  .search-input { height: 40px; }
  .publico-link { padding: var(--s2) var(--s1); }
}

/* ---- Contexto WP: solta o header sticky abaixo da barra de admin ---- */
@media screen and (min-width: 783px) { body.admin-bar .header { top: 32px; } }
@media screen and (max-width: 782px) { body.admin-bar .header { top: 46px; } }

/* ============================================================
   Ajustes de contexto Astra (Passo 3) — o header espelha o da
   home estática, mas na loja o Astra interfere. Dois acertos para
   o cabeçalho ficar IDÊNTICO ao da home + 1 pedido do proprietário:

   1) Astra usa raiz de 14px (a home usa 16px) -> as fontes em rem
      encolhiam ~12%. Fixa em px (equivalente a 16px) os tamanhos
      que o header usa, escopados só ao cabeçalho.
   2) Astra estiliza input[type=search] e vencia o .search-input
      (busca ficava baixa, branca, sem cantos) -> reforça as
      dimensões/visual da busca para os valores da home.
   3) Topbar um pouco mais fina (pedido do proprietário).
   ============================================================ */
.topbar, .header, .publicos {
  --f-xs: 11.52px;   /* 0.72rem @16px */
  --f-sm: 12.96px;   /* 0.81rem @16px */
  --f-2xl: 26.08px;  /* 1.63rem @16px */
}

.header .search .search-input {
  height: 46px !important;
  padding: 0 56px 0 var(--s5) !important;
  background: var(--cinza-bg) !important;
  border: 2px solid transparent !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
  line-height: normal !important;
  font: var(--w-medium) var(--f-sm) var(--font-sans) !important;
  color: var(--preto) !important;
}
.header .search .search-input:focus {
  background: var(--branco) !important;
  border-color: var(--azul) !important;
}

.topbar-inner { padding: 5px 0; }

/* Astra impõe line-height maior nos links -> trava o do menu p/ bater com a home */
.header .publico-link { line-height: 1.55; }

/* ============================================================
   CATEGORIA / LOJA — grid + card de produto (Passo 4)
   Card = espelho fiel do da home (assets/css/home.css .card*).
   Aplica sobre o loop NATIVO do Woo (ul.products), no lugar do
   grid do Elementor; content-product.php emite o markup .card.
   `!important` onde o sistema de colunas do Astra/Woo briga.
   ============================================================ */

/* Título da categoria em DS v3 (sai do coral que vinha do Elementor) */
.woocommerce-products-header { text-align: center; margin: var(--s8) 0 var(--s6); }
.woocommerce-products-header__title,
.tax-product_cat .woocommerce-products-header__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--w-semibold);
  color: var(--azul);
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1.1;
}

/* Grid sobre o ul.products do Woo. Tokens de fonte fixados em px p/ o card
   bater com a home (Astra usa raiz 14px; a home, 16px). */
.woocommerce ul.products {
  --f-sm: 12.96px; --f-md: 16.96px; --f-lg: 19.04px;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: var(--s3);
  margin: 0 0 var(--s8);
  padding: 0;
  list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; }   /* mata o clearfix do Woo */
.woocommerce ul.products li.product {
  width: auto !important; margin: 0 !important; float: none !important; padding: 0;
}
@media (max-width: 1199px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 899px)  { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 599px)  { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: var(--s2); } }

/* ----- Card (porte fiel do home.css) ----- */
.card {
  background: var(--branco);
  border-radius: var(--r-md);
  overflow: hidden;
  display: block;
  position: relative;
  height: 100%;
  transition: var(--t-base);
  border: 1px solid transparent;
  color: inherit;
  text-decoration: none;
}
.card:hover { border-color: var(--cinza-2); box-shadow: var(--sh-md); transform: translateY(-2px); }

.card-image { position: relative; aspect-ratio: 1 / 1; background: var(--branco); overflow: hidden; }
.card-image-foto {
  position: absolute !important; inset: 0;
  width: 100% !important; height: 100% !important;
  object-fit: cover; margin: 0 !important; transition: var(--t-slow);
}
.card:hover .card-image-foto { transform: scale(1.06); }
.ph { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: var(--s4); background: var(--creme); color: var(--cinza-3); font-size: var(--f-sm); }

.card-badges { position: absolute; top: var(--s2); left: var(--s2); display: flex; flex-direction: column; gap: 4px; z-index: 2; }
.badge { font-size: 10px; font-weight: var(--w-bold); letter-spacing: 0.08em; text-transform: uppercase; padding: 4px var(--s2); border-radius: var(--r-sm); display: inline-block; }
.badge-promo { background: var(--coral); color: var(--branco); }

.card-body { padding: var(--s3) var(--s4) var(--s4); }
.card-name {
  font-size: var(--f-sm); font-weight: var(--w-medium); color: var(--preto);
  line-height: 1.35; margin-bottom: var(--s2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.7em;
}
.card-price-old { font-size: 11.5px; color: var(--cinza-3); text-decoration: line-through; font-weight: var(--w-regular); line-height: 1.2; }
.card-price-main { font-size: var(--f-lg); font-weight: var(--w-black); color: var(--preto); line-height: 1.1; margin: 2px 0 4px; letter-spacing: -0.01em; }
.card-pix { display: inline-flex; align-items: center; gap: 5px; background: var(--cinza-bg); padding: 4px var(--s2); border-radius: var(--r-sm); font-size: 11px; font-weight: var(--w-semibold); color: var(--cinza-4); margin-bottom: 4px; }
.card-pix strong { color: var(--azul); font-weight: var(--w-black); font-size: 13px; }
.card-pix-icon { width: 12px; height: 12px; background: var(--verde-pix); border-radius: 2px; display: grid; place-items: center; color: var(--branco); font-size: 9px; font-weight: var(--w-black); }
.card-parcelas { font-size: 11px; color: var(--cinza-3); font-weight: var(--w-medium); }
.card-parcelas strong { color: var(--cinza-4); font-weight: var(--w-semibold); }

@media (max-width: 599px) {
  .card-body { padding: var(--s2) var(--s3) var(--s3); }
  .card-name { font-size: 12px; min-height: 2.5em; }
  .card-price-main { font-size: var(--f-md); }
  .badge { font-size: 9px; padding: 3px 6px; }
}

/* Contagem / ordenação / paginação do loop nativo — toque DS v3 leve */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select { font-family: var(--font-sans); font-size: var(--f-sm); color: var(--cinza-4); }
.woocommerce nav.woocommerce-pagination { text-align: center; margin: var(--s6) 0; }

/* ============================================================
   FILTROS — sidebar (Passo 4b)
   Layout 2 colunas: sidebar sticky no desktop, off-canvas no
   mobile (<=1023px, alinhado ao header). Filtros = widgets
   nativos do Woo + PWB, re-skin DS v3. Markup em
   woocommerce/archive-product.php + inc/filtros-sidebar.php;
   off-canvas controlado por assets/js/loja.js.
   Fontes em px (Astra usa raiz 14px; alinhar com home/card).
   ============================================================ */
/* A busca de produto (?s=X&post_type=product) herda body.search { max-width:640px }
   do tema, que espreme o layout da loja. Nas páginas da loja o body é sempre
   largura cheia (loja.css só carrega em produto/categoria/shop/busca-produto). */
body.woocommerce { max-width: none !important; }

.loja-layout {
  --f-sm: 12.96px; --f-base: 15.04px; --f-md: 16.96px; --f-lg: 19.04px; --f-xl: 22.08px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--s8);
  align-items: start;
  max-width: var(--max-w);
  margin: 0 auto;
  padding-inline: var(--pad-x);
}
.loja-main { min-width: 0; }   /* impede o grid filho de estourar a coluna */

/* ----- Grid de produtos: 3 colunas quando divide espaço com a sidebar ----- */
@media (min-width: 1200px) {
  .loja-main ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .loja-main ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
/* <=1023px: sidebar vira off-canvas e o main ocupa a largura toda ->
   valem as regras de grid do Passo 4 (3 col ate 900px, 2 col abaixo). */

/* ----- Sidebar sticky no desktop ----- */
.loja-filtros {
  position: sticky;
  top: calc(64px + var(--s4));     /* abaixo do header sticky */
  align-self: start;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  padding-right: var(--s2);
}
body.admin-bar .loja-filtros { top: calc(64px + var(--s4) + 32px); }

/* Cabeçalho da sidebar, botão "Filtrar" e backdrop: só no off-canvas (mobile) */
.loja-filtros-header,
.loja-filtros-toggle,
.loja-filtros-backdrop { display: none; }

/* Esconde o filtro off-canvas NATIVO do Astra (temos a nossa sidebar própria);
   o "Ordenar por" vive no mesmo toolbar do Astra e é preservado. */
.astra-shop-filter-button,
.ast-flyout-filter { display: none !important; }

/* ----- Blocos de filtro (uniformiza os widgets) ----- */
.filtro-bloco {
  margin-bottom: var(--s5);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--cinza-1);
}
.filtro-bloco:last-child { border-bottom: none; }
.filtro-titulo {
  font-family: var(--font-sans);
  font-size: var(--f-sm);
  font-weight: var(--w-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul);
  margin: 0 0 var(--s3);
}
.loja-filtros ul { list-style: none; margin: 0; padding: 0; }

/* Limpar filtros (só quando há filtro ativo) */
.filtro-limpar-wrap { margin: 0 0 var(--s4); }
.filtro-limpar {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-sans); font-size: var(--f-sm); font-weight: var(--w-semibold);
  color: var(--coral) !important; text-decoration: none;
}
.filtro-limpar:hover { color: var(--coral-d) !important; }

/* Listas de termos: categorias + layered nav (tamanho/cor) */
.filtro-cat-lista li,
.woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item { margin: 0 0 var(--s1); }
.filtro-cat-lista a,
.woocommerce-widget-layered-nav-list a {
  font-family: var(--font-sans);
  font-size: var(--f-base);
  color: var(--cinza-4);
  text-decoration: none;
  transition: var(--t-fast);
}
.filtro-cat-lista a:hover,
.woocommerce-widget-layered-nav-list a:hover { color: var(--azul); }
.woocommerce-widget-layered-nav-list__item--chosen a { color: var(--azul); font-weight: var(--w-semibold); }
.filtro-cat-count,
.woocommerce-widget-layered-nav-list .count { color: var(--cinza-3); font-size: var(--f-sm); }

/* Filtros ativos (chips de remoção) */
.woocommerce-widget-layered-nav-filters ul { display: flex; flex-wrap: wrap; gap: var(--s2); }
.woocommerce-widget-layered-nav-filters a {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--creme); color: var(--azul);
  font-family: var(--font-sans); font-size: var(--f-sm); font-weight: var(--w-medium);
  padding: 4px var(--s2); border-radius: var(--r-pill); text-decoration: none;
  transition: var(--t-fast);
}
.woocommerce-widget-layered-nav-filters a:hover { background: var(--nude); }

/* Slider de preço (jQuery UI) */
.price_slider_wrapper { padding-top: var(--s1); }
.price_slider_amount {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  font-family: var(--font-sans); font-size: var(--f-sm); color: var(--cinza-4);
  margin-top: var(--s3);
}
.price_slider_amount .price_label { flex: 1 1 100%; }
.price_slider_amount .button {
  background: var(--azul) !important; color: var(--branco) !important;
  border: none !important; border-radius: var(--r-sm) !important;
  font-family: var(--font-sans) !important; font-size: var(--f-sm) !important;
  font-weight: var(--w-semibold) !important; text-transform: uppercase; letter-spacing: 0.05em;
  padding: var(--s2) var(--s4) !important; cursor: pointer; transition: var(--t-base);
}
.price_slider_amount .button:hover { background: var(--amarelo) !important; color: var(--azul) !important; }
.ui-slider { background: var(--cinza-1); height: 4px; border: none; border-radius: var(--r-pill); margin: var(--s4) 0 var(--s2); }
.ui-slider .ui-slider-range { background: var(--azul); }
.ui-slider .ui-slider-handle {
  background: var(--azul); border: 2px solid var(--branco); border-radius: var(--r-pill);
  width: 16px; height: 16px; top: -6px; box-shadow: var(--sh-xs); cursor: grab;
}

/* Marcas (PWB Filter_By_Brand) — caixas + botão aplicar.
   ATENÇÃO: confirmar as classes reais no HTML renderizado do staging
   (R5); ajustar seletores se necessário. */
.pwb-brand-filter ul,
.pwb-filter-products ul { list-style: none; margin: 0; padding: 0; }
.pwb-brand-filter li,
.pwb-filter-products li { margin: 0 0 var(--s1); }
.pwb-brand-filter label,
.pwb-filter-products label {
  font-family: var(--font-sans); font-size: var(--f-base); color: var(--cinza-4);
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}
.loja-filtros .pwb-brand-filter button,
.loja-filtros .pwb-filter-products button,
.loja-filtros .pwb-submit {
  background: var(--azul); color: var(--branco); border: none; border-radius: var(--r-sm);
  font-family: var(--font-sans); font-size: var(--f-sm); font-weight: var(--w-semibold);
  padding: var(--s2) var(--s4); margin-top: var(--s2); cursor: pointer; transition: var(--t-base);
}
.loja-filtros .pwb-brand-filter button:hover,
.loja-filtros .pwb-filter-products button:hover,
.loja-filtros .pwb-submit:hover { background: var(--amarelo); color: var(--azul); }

/* Produtos em oferta (WC_Widget_Products) — imagem ANCORADA à esquerda
   (position:absolute) + coluna de texto com padding-left: nome e preços fluem
   numa coluna alinhada e quebram linha sem nunca passar por baixo da imagem
   (o float deixava o preço "vazar" sob a imagem em nomes longos). */
.loja-filtros .product_list_widget { list-style: none; margin: 0; padding: 0; }
.loja-filtros .product_list_widget li {
  position: relative; min-height: 48px;
  margin: 0 0 var(--s4); padding: 0 0 0 56px;   /* 48 imagem + 8 gap */
}
.loja-filtros .product_list_widget picture,
.loja-filtros .product_list_widget li > a > img {
  position: absolute; left: 0; top: 0; display: block;
  width: 48px; height: 48px; margin: 0;
}
.loja-filtros .product_list_widget img {
  width: 48px !important; height: 48px !important;
  object-fit: cover; border-radius: var(--r-sm);
}
.loja-filtros .product_list_widget a {
  display: block; color: var(--cinza-4) !important;
  font-family: var(--font-sans); font-size: var(--f-sm); line-height: 1.3;
  text-decoration: none; margin: 0 0 2px;
}
.loja-filtros .product_list_widget .amount { color: var(--azul); font-weight: var(--w-semibold); font-size: var(--f-sm); }
.loja-filtros .product_list_widget ins { text-decoration: none; }
.loja-filtros .product_list_widget del { opacity: 1; margin-right: 4px; }
.loja-filtros .product_list_widget del .amount { color: var(--cinza-3); font-weight: var(--w-regular); }

/* ============================================================
   OFF-CANVAS no mobile (<=1023px, alinhado ao breakpoint do header)
   ============================================================ */
@media (max-width: 1023px) {
  .loja-layout { grid-template-columns: 1fr; }   /* só o main em fluxo */

  .loja-filtros-toggle {
    display: inline-flex; align-items: center; gap: var(--s2);
    background: var(--azul); color: var(--branco); border: none; border-radius: var(--r-md);
    font-family: var(--font-sans); font-size: var(--f-sm); font-weight: var(--w-semibold);
    letter-spacing: 0.06em; text-transform: uppercase;
    padding: var(--s3) var(--s5); cursor: pointer; margin-bottom: var(--s4);
  }
  .loja-filtros-toggle svg { width: 18px; height: 18px; }

  /* Painel = flex column: cabeçalho fixo + corpo rolável (min-height:0 é o que
     permite o corpo rolar dentro do flex; -webkit-overflow-scrolling p/ iOS). */
  .loja-filtros {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(86vw, 340px); height: 100%; max-height: none;
    background: var(--branco); z-index: 200;
    transform: translateX(-100%); transition: transform var(--t-base);
    box-shadow: var(--sh-lg); padding: 0;
    display: flex; flex-direction: column; overflow: hidden;
  }
  body[data-filtros-open] .loja-filtros { transform: translateX(0); }

  .loja-filtros-header {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    background: var(--branco);
    padding: var(--s4); border-bottom: 1px solid var(--cinza-1);
  }
  .loja-filtros-titulo { font-family: var(--font-serif); font-style: italic; font-size: var(--f-xl); color: var(--azul); }
  .loja-filtros-fechar { background: none; border: none; font-size: 28px; line-height: 1; color: var(--cinza-4); cursor: pointer; padding: 0 var(--s1); }
  .loja-filtros-corpo {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    padding: var(--s4);
  }

  .loja-filtros-backdrop {
    display: block; position: fixed; inset: 0;
    background: rgba(11, 29, 81, 0.45); z-index: 150;
    opacity: 0; pointer-events: none; transition: opacity var(--t-base);
  }
  body[data-filtros-open] .loja-filtros-backdrop { opacity: 1; pointer-events: auto; }
  body[data-filtros-open] { overflow: hidden; }
}

/* ============================================================
   PÁGINA DE PRODUTO (single) — DS v3 (Passo 5)
   Layout 3 colunas no desktop (aside / galeria / compra-sticky);
   empilhado no mobile via flex + order. Galeria e form de variação
   PRESERVADOS (sl-swatches age neles) — aqui só estilo + reordenação.
   Fontes em px (Astra usa raiz 14px; alinhar com home/card).
   ============================================================ */
.sl-produto {
  --f-sm: 12.96px; --f-base: 15.04px; --f-md: 16.96px;
  --f-lg: 19.04px; --f-xl: 22.08px; --f-2xl: 26.08px;
  max-width: 1120px;               /* centralizado: foto menor + compra sem folgas */
  margin: var(--s6) auto var(--s12);
  padding-inline: var(--pad-x);
  color: var(--preto);
}

/* ----- Desktop: grid 3 colunas; compra sticky abrange galeria+descrição ----- */
@media (min-width: 992px) {
  /* 2 colunas de verdade: conteúdo (esquerda) | compra (direita, sticky).
     A compra fica em COLUNA PRÓPRIA (não divide linhas com o conteúdo), então
     nunca infla o layout nem sobrepõe os relacionados. */
  .sl-produto {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: var(--s6) var(--s8);
    align-items: start;
  }
  /* Coluna esquerda: aside + foto (linha 1), descrição (2), relacionados (3). */
  .sl-prod-main {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: var(--s6) var(--s8);
    align-items: start;
  }
  .sl-prod-aside       { grid-column: 1; grid-row: 1; }
  .sl-prod-galeria     { grid-column: 2; grid-row: 1; min-width: 0; max-width: 340px; }
  .sl-prod-conteudo    { grid-column: 1 / -1; grid-row: 2; }
  .sl-prod-relacionados{ grid-column: 1 / -1; grid-row: 3; }
  /* A linha do grid externo é dimensionada pela coluna esquerda (mais alta),
     então a compra apenas gruda (sticky) sem forçar altura de ninguém. */
  .sl-prod-summary     { position: sticky; top: calc(64px + var(--s4)); align-self: start; }
  body.admin-bar .sl-prod-summary { top: calc(64px + var(--s4) + 32px); }
}

/* ----- Mobile (<=991px): empilha na ordem do proprietário ----- */
@media (max-width: 991px) {
  .sl-produto { display: flex; flex-direction: column; gap: var(--s5); }
  .sl-prod-main { display: contents; }               /* achata o wrapper no flex */
  .sl-prod-summary { display: contents; }            /* expõe os filhos do resumo ao flex */
  /* Ordena TODOS os filhos expostos: o display:contents joga os nativos
     (categoria, superfrete, meta) no flex; sem order explícito eles caem em 0
     e pulam para a frente — era a causa da bagunça no mobile. */
  .sl-produto .product_title           { order: 1; }
  .sl-produto .sl-ref                  { order: 2; }
  .sl-produto .single-product-category { order: 3; }
  .sl-prod-galeria                     { order: 4; }
  .sl-produto form.cart                { order: 5; }
  .sl-produto .superfrete-calculator-wrapper { order: 6; }
  .sl-produto .product_meta            { order: 7; }
  .sl-prod-aside                       { order: 8; }
  .sl-prod-conteudo                    { order: 9; }
  .sl-prod-relacionados                { order: 10; }
}

/* ============================================================
   COLUNA ESQUERDA — descrição curta + compartilhar
   ============================================================ */
.sl-aside-desc { font-size: var(--f-sm); line-height: 1.6; color: var(--preto); }
.sl-aside-desc p { margin: 0 0 var(--s2); }
.sl-aside-desc strong, .sl-aside-desc b { color: var(--preto); font-weight: var(--w-semibold); }

.sl-share { margin-top: var(--s5); }
.sl-share-titulo { display: block; font-size: var(--f-sm); font-weight: var(--w-semibold); color: var(--preto); margin-bottom: var(--s2); }
.sl-share-links { display: flex; flex-wrap: wrap; gap: var(--s2); }
.sl-share-link {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: var(--r-pill);
  background: var(--cinza-bg); color: var(--cinza-4);
  transition: var(--t-fast);
}
.sl-share-link:hover { background: var(--azul); color: var(--branco); }
.sl-share-link svg { width: 16px; height: 16px; }

/* ============================================================
   COLUNA CENTRO — galeria (miniaturas verticais no desktop)
   ============================================================ */
.sl-prod-galeria .woocommerce-product-gallery { position: relative; margin: 0; width: 100% !important; float: none !important; }
.sl-prod-galeria .woocommerce-product-gallery__image img { border-radius: var(--r-md); }
/* Selo de promoção do Woo removido da página de produto (o desconto já aparece
   no bloco de preço). Escopado à galeria — não afeta os cards de relacionados. */
.sl-prod-galeria .onsale { display: none; }
/* Galeria por variação do plugin sl-swatches: o plugin injeta as N fotos da cor
   no wrapper do flexslider, mas sem controles. Montamos 1 foto PRINCIPAL (a
   ativa) + miniaturas em linha (loja.js); clicar numa miniatura a torna a
   principal. Anulamos o carrossel do flexslider. */
.sl-prod-galeria .flex-viewport { height: auto !important; overflow: visible !important; }
.sl-prod-galeria .woocommerce-product-gallery__wrapper {
  width: 100% !important; transform: none !important; display: block !important;
}
.sl-prod-galeria .woocommerce-product-gallery__image {
  width: 100% !important; float: none !important; margin: 0 0 var(--s2) !important;
}
/* Só quando o loja.js montou as miniaturas (.sl-gallery-ready no wrapper) é que
   escondemos as inativas. Sem JS (ou entre re-renders do plugin), as fotos ficam
   EMPILHADAS — fallback seguro, nunca galeria em branco. */
.sl-prod-galeria .woocommerce-product-gallery__wrapper.sl-gallery-ready .woocommerce-product-gallery__image { display: none !important; }
.sl-prod-galeria .woocommerce-product-gallery__wrapper.sl-gallery-ready .woocommerce-product-gallery__image.sl-gal-active { display: block !important; margin-bottom: 0 !important; }
/* Miniaturas em linha (construídas pelo loja.js) */
.sl-gallery-thumbs { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.sl-gallery-thumbs button {
  width: 54px; height: 68px; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--cinza-2); border-radius: var(--r-sm);
  background: var(--branco); opacity: 0.65; transition: var(--t-fast);
}
.sl-gallery-thumbs button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-gallery-thumbs button.is-active,
.sl-gallery-thumbs button:hover { opacity: 1; border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); }

/* Desktop: miniaturas em coluna à ESQUERDA da foto principal (não embaixo).
   .sl-prod-galeria vira flex row; a foto (order 2) fica à direita e as
   miniaturas (order 1, coluna vertical) à esquerda. No mobile mantém-se o
   layout empilhado (miniaturas embaixo, em linha) das regras base acima. */
@media (min-width: 992px) {
  .sl-prod-galeria { display: flex; flex-direction: row; align-items: flex-start; gap: var(--s2); }
  .sl-prod-galeria .woocommerce-product-gallery { order: 2; flex: 1 1 0; min-width: 0; }
  .sl-gallery-thumbs {
    order: 1; flex: 0 0 auto;
    flex-direction: column; flex-wrap: nowrap; margin-top: 0;
  }
}

/* ============================================================
   COLUNA DIREITA — título, Ref., swatches, preço, botão
   ============================================================ */
.single-product .sl-prod-summary .product_title {
  font-family: var(--font-serif); font-style: italic; font-weight: var(--w-semibold);
  color: var(--azul); font-size: var(--f-2xl); line-height: 1.15; margin: 0 0 var(--s2);
}
.sl-ref { font-size: var(--f-sm); color: var(--cinza-3); font-weight: var(--w-medium); margin-bottom: var(--s4); }
.sl-ref span { color: var(--cinza-4); }

/* O WooCommerce dá width:48% a .summary e .images (layout 2-col padrão dele),
   encolhendo a coluna de compra e a galeria — anulamos p/ preencherem o grid. */
.sl-prod-summary { width: 100% !important; float: none !important; }

/* O Astra renderiza o resumo nativo. Ocultamos: (a) o preço nativo (usamos o
   nosso bloco com selos, dentro do form) e (b) a descrição curta duplicada
   (fica só no aside esquerdo). Categoria e meta (SKU/Categorias/Marca) ficam. */
.sl-prod-summary > p.price { display: none; }
.sl-prod-summary > .woocommerce-product-details__short-description { display: none; }

/* Form de variação + swatches: alvos >=44px. Seletores genéricos —
   AJUSTAR no ~/dev após inspecionar o markup real do sl-swatches. */
.sl-prod-summary form.cart { margin: 0; }
.sl-prod-summary .variations { width: 100%; margin: 0 0 var(--s4); border: 0; }
.sl-prod-summary .variations th,
.sl-prod-summary .variations td { display: block; padding: 0; text-align: left; }
.sl-prod-summary .variations .label,
.sl-prod-summary .variations th { font-size: var(--f-sm); font-weight: var(--w-semibold); color: var(--preto); text-transform: none; margin: var(--s3) 0 var(--s2); }
.sl-prod-summary .variations .value { margin-bottom: var(--s2); }
/* botões/labels de swatch (cor/tamanho) — base compacta */
.sl-prod-summary .sl-swatches label,
.sl-prod-summary .sl-swatches .sl-swatch,
.sl-prod-summary .sl-swatches button,
.sl-prod-summary .variations .value li,
.sl-prod-summary .variations .value label {
  min-width: 38px; min-height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 var(--s2); border: 1px solid var(--cinza-2); border-radius: var(--r-sm);
  background: var(--branco); color: var(--preto); font-size: var(--f-sm); font-weight: var(--w-medium);
  cursor: pointer; transition: var(--t-fast);
}
/* Tamanhos (texto): bem menores p/ caber na mesma linha na maioria dos casos. */
.sl-prod-summary .sl-swatches--button .sl-swatch--text {
  min-width: 28px; min-height: 28px; padding: 0 2px;
  font-size: 12.5px; font-weight: var(--w-semibold);
}
/* Cores (imagem): quadradinho um pouco menor que o atual. */
.sl-prod-summary .sl-swatches--color .sl-swatch--img { min-width: 38px; min-height: 38px; padding: 2px; }
.sl-prod-summary .sl-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.sl-prod-summary .sl-swatches .selected,
.sl-prod-summary .sl-swatches .is-selected,
.sl-prod-summary .sl-swatches [aria-pressed="true"],
.sl-prod-summary .variations .value .selected { border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); }
/* "Limpar" (reset das variações) com o mesmo visual do botão "Saiba mais".
   !important + .single-product p/ vencer a especificidade do Astra/Woo. */
.single-product .sl-prod-summary .reset_variations {
  font-family: var(--font-sans) !important; font-size: var(--f-sm) !important;
  font-weight: var(--w-semibold) !important; color: var(--azul) !important;
  text-decoration: underline !important; text-transform: none !important;
}
.single-product .sl-prod-summary .reset_variations:hover { color: var(--coral) !important; }

/* Preço dinâmico nativo da variação: ocultado (preço uniforme; usamos o nosso
   bloco estático). Se algum dia o preço variar por tamanho, reativar via JS. */
.sl-prod-summary .woocommerce-variation-price { display: none; }
.sl-prod-summary .woocommerce-variation-availability { font-size: var(--f-sm); color: var(--cinza-4); margin-bottom: var(--s2); }

/* Bloco de preço + selos (espelho do card da home) */
.sl-preco { margin: var(--s2) 0 var(--s4); }
.sl-preco-linha1 { display: flex; align-items: center; gap: var(--s2); margin-bottom: 2px; }
.sl-preco-antigo { font-size: var(--f-sm); color: var(--cinza-3); text-decoration: line-through; }
.sl-preco-off { font-size: 12px; font-weight: var(--w-bold); color: var(--preto); background: var(--amarelo); padding: 2px 6px; border-radius: var(--r-sm); letter-spacing: 0.04em; }
.sl-preco-atual { font-size: var(--f-2xl); font-weight: var(--w-black); color: var(--preto); line-height: 1.1; letter-spacing: -0.01em; margin-bottom: var(--s2); }
.sl-preco-pix { display: inline-flex; align-items: center; gap: 5px; background: var(--cinza-bg); padding: 4px var(--s2); border-radius: var(--r-sm); font-size: 12px; font-weight: var(--w-semibold); color: var(--cinza-4); margin-bottom: 4px; }
.sl-preco-pix strong { color: var(--azul); font-weight: var(--w-black); font-size: 14px; }
.sl-preco-pix-ico { width: 14px; height: 14px; background: var(--verde-pix); border-radius: 2px; display: grid; place-items: center; color: var(--branco); font-size: 10px; font-weight: var(--w-black); }
.sl-preco-parcelas { font-size: 12px; color: var(--cinza-3); font-weight: var(--w-medium); }
.sl-preco-parcelas strong { color: var(--cinza-4); font-weight: var(--w-semibold); }

/* Botão "Adicionar à sacola" (padrão do Woo) em DS v3 */
.sl-prod-summary .single_add_to_cart_button {
  width: 100%; min-height: 52px; margin-top: var(--s2);
  background: var(--coral); color: var(--branco);
  border: 0; border-radius: var(--r-md);
  font-family: var(--font-sans); font-size: var(--f-base); font-weight: var(--w-semibold);
  letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer;
  transition: var(--t-fast);
}
.sl-prod-summary .single_add_to_cart_button:hover { background: var(--coral-d); }
.sl-prod-summary .quantity { margin-bottom: var(--s3); }
.sl-prod-summary .quantity .qty { min-height: 44px; border: 1px solid var(--cinza-2); border-radius: var(--r-sm); padding: 0 var(--s2); font-size: var(--f-base); }

/* ============================================================
   ABAIXO — descrição longa (Saiba mais) + relacionados por marca
   ============================================================ */
.sl-descricao { margin-top: var(--s8); }
.sl-descricao-titulo { font-family: var(--font-serif); font-style: italic; font-weight: var(--w-semibold); color: var(--azul); font-size: var(--f-xl); margin: 0 0 var(--s3); }
.sl-descricao .sl-leiamais-corpo { max-width: 70ch; font-size: var(--f-base); line-height: 1.7; color: var(--preto); }
.sl-descricao .sl-leiamais-corpo p { margin: 0 0 var(--s3); }

/* Componente "Saiba mais" (clamp + fade + botão) */
.sl-leiamais { position: relative; }
.sl-leiamais .sl-leiamais-corpo { overflow: hidden; position: relative; }
.sl-leiamais--curta .sl-leiamais-corpo { max-height: 7.5em; }
.sl-leiamais--longa .sl-leiamais-corpo { max-height: 12em; }
.sl-leiamais:not(.aberto) .sl-leiamais-corpo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3em;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--branco));
  pointer-events: none;   /* o fade não pode interceptar o clique do botão */
}
.sl-leiamais.aberto .sl-leiamais-corpo { max-height: none; }
.sl-leiamais-btn {
  margin-top: var(--s2); background: none; border: 0; padding: 0;
  color: var(--azul); font-family: var(--font-sans); font-size: var(--f-sm); font-weight: var(--w-semibold);
  cursor: pointer; text-decoration: underline;
}
.sl-leiamais-btn:hover { color: var(--coral); }

.sl-relacionados { margin-top: var(--s10); }
/* O shortcode [wc_related_by_brand] traz CSS próprio; normaliza p/ DS v3. */
.sl-relacionados h2, .sl-relacionados .wc-related-custom h2 {
  font-family: var(--font-serif) !important; font-style: italic; font-weight: var(--w-semibold);
  color: var(--azul) !important; font-size: var(--f-2xl) !important; text-align: center; margin: 0 0 var(--s6);
}

/* ============================================================
   BARRA FIXA "Comprar" (mobile <=767px) — scroll-to-form
   ============================================================ */
.sl-sticky-cart { display: none; }
@media (max-width: 767px) {
  .sl-sticky-cart.visivel {
    display: flex; align-items: center; gap: var(--s3);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 250;
    background: var(--branco); border-top: 1px solid var(--cinza-1);
    box-shadow: 0 -4px 20px rgba(27,45,91,0.10);
    padding: var(--s2) var(--s4); padding-bottom: max(var(--s2), env(safe-area-inset-bottom));
  }
  .sl-sticky-info { display: flex; align-items: center; gap: var(--s2); flex: 1 1 auto; min-width: 0; }
  .sl-sticky-foto { width: 44px; height: 44px; object-fit: cover; border-radius: var(--r-sm); flex: 0 0 auto; }
  .sl-sticky-texto { display: flex; flex-direction: column; min-width: 0; }
  .sl-sticky-nome { font-size: 12px; color: var(--cinza-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sl-sticky-preco { font-size: var(--f-base); font-weight: var(--w-black); color: var(--preto); }
  .sl-sticky-btn {
    flex: 0 0 auto; min-height: 44px; padding: 0 var(--s5);
    background: var(--coral); color: var(--branco); border: 0; border-radius: var(--r-md);
    font-family: var(--font-sans); font-size: var(--f-sm); font-weight: var(--w-semibold);
    text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer;
  }
  .sl-sticky-btn:hover { background: var(--coral-d); }
}

/* Defensivo: produto em largura cheia (sem sidebar do Astra). Verificar no ~/dev. */
.single-product #secondary,
.single-product .widget-area { display: none; }
.single-product #primary,
.single-product .content-area,
.single-product .site-content > .ast-container { width: 100%; max-width: none; }

/* ============================================================
   BREADCRUMB (Passo 6) — trilha visível DS v3.
   O schema BreadcrumbList é do Rank Math (NÃO emitido aqui).
   Alinha à largura da loja: categoria = --max-w; produto = 1120px
   (mesma largura de .sl-produto). Fonte em px (Astra usa raiz 14px).
   ============================================================ */
/* Oculta o breadcrumb de conteúdo do Astra (.ast-breadcrumbs) nas páginas da
   loja — usamos o nosso (.sl-breadcrumb, DS v3 + trilha do Rank Math). loja.css
   só carrega em produto/categoria/shop, então o escopo já está garantido. */
.ast-breadcrumbs { display: none; }

.sl-breadcrumb {
  max-width: var(--max-w);
  margin: var(--s5) auto 0;
  padding-inline: var(--pad-x);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--cinza-3);
}
.single-product .sl-breadcrumb { max-width: 1120px; }
.sl-breadcrumb a { color: var(--cinza-4); text-decoration: none; transition: color var(--t-fast); }
.sl-breadcrumb a:hover { color: var(--azul); text-decoration: underline; }
/* Separadores: o nosso (.sl-breadcrumb-sep, fallback Woo) e o do Rank Math (.separator). */
.sl-breadcrumb .sl-breadcrumb-sep,
.sl-breadcrumb .separator { margin: 0 var(--s2); color: var(--cinza-2); }
/* Item atual (página) — Woo deixa texto solto; Rank Math usa .last. */
.sl-breadcrumb strong,
.sl-breadcrumb .last { color: var(--azul); font-weight: var(--w-medium); }