/*!
 * Feliciano Store — folha de estilo do tema
 * Direcao de design: "Ficha Tecnica" (corte transversal / camadas)
 *
 * REGRAS DE GOVERNANCA (nao violar sem atualizar docs/design-system.md):
 *  R1  accent e a UNICA cor de fundo de botao de compra.
 *  R2  Contorno de contenedor NUNCA depende de sombra — sempre hairline line-strong.
 *  R3  accent-light so sobre base/surface, so >=24px ou como grafismo, nunca como texto normal.
 *  R4  Erro nunca e so cor — sempre icone + texto.
 *  R5  Slugs de fontSize sao imutaveis (estao serializados em templates e na pagina 42).
 *  R6  No maximo UMA assinatura .fs-corte visivel por dobra.
 *
 * Cores vem SEMPRE de var(--wp--preset--color--*) — nunca hex solto aqui.
 * Larguras vem SEMPRE de var(--wp--style--global--wide-size).
 */


/* ==========================================================================
   3.1 Tokens de forma (`assets/style.css`, topo)
   ========================================================================== */

/* =========================================================================
   FELICIANO STORE — TOKENS DE FORMA
   Cores vêm SEMPRE de var(--wp--preset--color--*). Não redeclarar hex aqui.
   ========================================================================= */
:root{
  /* Camadas da assinatura */
  --fs-lay-1: var(--wp--preset--color--primary);      /* #14295C — camada estrutural */
  --fs-lay-2: var(--wp--preset--color--accent-light); /* #C96B4A — camada de conforto */
  --fs-lay-3: var(--wp--preset--color--line);         /* #E2DACD — camada de acabamento */
  --fs-lay-h: 4px;

  /* Raios: quase retos. Editorial/técnico, não app. */
  --fs-radius-sm:   4px;   /* input, badge retangular, swatch */
  --fs-radius-md:   8px;   /* botão */
  --fs-radius-lg:  10px;   /* card, painel, imagem */
  --fs-radius-pill: 999px; /* SOMENTE micro-badge de texto curto */

  /* Sombras: uma camada, quase invisível. A separação vem da hairline (R2). */
  --fs-shadow-card:  0 1px 2px rgba(28,32,41,.05), 0 8px 24px -16px rgba(20,41,92,.28);
  --fs-shadow-raise: 0 2px 4px rgba(28,32,41,.06), 0 16px 32px -18px rgba(20,41,92,.38);
  --fs-shadow-sticky:0 1px 0 var(--wp--preset--color--line), 0 6px 16px -12px rgba(20,41,92,.35);

  /* Alvo de toque mínimo global (enxerto da D2) */
  --fs-tap: 48px;

  --fs-ease: cubic-bezier(.22,1,.36,1);
}


/* ==========================================================================
   3.2 A régua `.fs-corte`
   ========================================================================== */

/* -------------------------------------------------------------------------
   .fs-corte — régua de 3 camadas sob o H2 de banda.
   Três linear-gradient() empilhados: ZERO requisição, ZERO repaint no scroll.
   Sem color-mix(): o LiteSpeed minify pode engolir em parsers antigos.
   Máximo UMA visível por dobra (regra R6).
   ------------------------------------------------------------------------- */
.fs-corte{
  --fs-corte-w: 88px;
  display: block;
  inline-size: var(--fs-corte-w);
  block-size: 22px;
  margin-block: .9rem 0;
  background-image:
    linear-gradient(var(--fs-lay-1) 0 0),
    linear-gradient(var(--fs-lay-2) 0 0),
    linear-gradient(var(--fs-lay-3) 0 0);
  background-repeat: no-repeat;
  background-size:
    100% var(--fs-lay-h),
     58% var(--fs-lay-h),
    100% var(--fs-lay-h);
  background-position: 0 0, 0 9px, 0 18px;
  border-radius: var(--fs-radius-pill);
}
/* Sobre fundo primary (rodapé, banda institucional) */
.fs-corte--invertido{
  --fs-lay-1: var(--wp--preset--color--primary-soft);
  --fs-lay-3: rgba(196,210,240,.35);
}
.fs-corte--centro{ margin-inline: auto; }

/* Animação opcional — só stroke/opacity, nunca layout.
   Ativada por .is-in vindo do IntersectionObserver em assets/theme.js
   (ARQUIVO, nunca inline no footer: inline vira render-blocking). */
@media (prefers-reduced-motion: no-preference){
  .fs-corte{ opacity: 0; transform: translateY(6px); transition: opacity .5s var(--fs-ease), transform .5s var(--fs-ease); }
  .fs-corte.is-in{ opacity: 1; transform: none; }
}


/* ==========================================================================
   3.3 O placeholder `.fs-ph` — a peça que salva o dia 1
   ========================================================================== */

/* -------------------------------------------------------------------------
   .fs-ph — slot de imagem ausente. Renderiza o corte em escala grande
   sobre areia. Fica INTENCIONAL, não quebrado.
   PERMITIDO: card de produto, card de categoria, capa de post.
   PROIBIDO: PDP acima da dobra. Produto sem foto não deve ser publicável.
   ------------------------------------------------------------------------- */
.fs-ph{
  aspect-ratio: 1 / 1;
  inline-size: 100%;
  background-color: var(--wp--preset--color--base-2);
  background-image:
    linear-gradient(var(--wp--preset--color--primary) 0 0),
    linear-gradient(var(--wp--preset--color--accent-light) 0 0),
    linear-gradient(var(--wp--preset--color--line) 0 0);
  background-repeat: no-repeat;
  background-size: 62% 10px, 40% 10px, 62% 10px;
  background-position: 50% 40%, 50% 50%, 50% 60%;
  display: grid;
  place-items: end center;
  border-radius: var(--fs-radius-lg);
}
.fs-ph > span{               /* rótulo opcional: nome da categoria */
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  color: var(--wp--preset--color--muted);   /* 5,32:1 sobre base-2 ✅ */
  padding-block-end: 1.25rem;
  text-align: center;
}
.fs-ph--4x5{ aspect-ratio: 4 / 5; }
.fs-ph--16x9{ aspect-ratio: 16 / 9; background-size: 44% 10px, 28% 10px, 44% 10px; }


/* ==========================================================================
   3.4 Logo e favicon (resolve `site_icon = 0` e a ausência de logo)
   ========================================================================== */

.fs-logo{
  display: inline-flex; align-items: center; gap: .625rem;
  text-decoration: none; min-block-size: var(--fs-tap);
}
.fs-logo__mark{ flex: 0 0 auto; }
/* Sobre o header azul, as barras precisam clarear: */
.fs-site-header .fs-logo__mark rect:nth-child(1),
.fs-site-header .fs-logo__mark rect:nth-child(3){ fill: var(--wp--preset--color--white); }
.fs-site-header .fs-logo__mark rect:nth-child(2){ fill: var(--wp--preset--color--accent-light); }

.fs-logo__word{
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--x-large);
  font-weight: 500; letter-spacing: -.01em; line-height: 1;
  color: var(--wp--preset--color--white);       /* 13,99:1 sobre primary ✅ */
}
.fs-logo__word em{ font-style: normal; color: var(--wp--preset--color--primary-soft); } /* 9,21:1 ✅ */


/* ==========================================================================
   3.5 Foco, movimento, reset e regras globais de sistema
   ========================================================================== */

/* ---- Reset FSE (herdado do mkl-shopping-theme, comprovado em produção) --- */
.wp-site-blocks > *{ margin-block-start: 0 !important; }

/* ---- Foco visível: SECONDARY #1F3C88 = 9,70:1 sobre base (mín. 3:1) ------ */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline: 3px solid var(--wp--preset--color--secondary);
  outline-offset: 2px;
  border-radius: var(--fs-radius-sm);
}
/* Sobre fundo azul o anel precisa inverter para continuar perceptível */
.fs-site-header :where(a,button,summary):focus-visible,
.fs-site-footer :where(a,button,summary):focus-visible,
.fs-band--primary :where(a,button,summary):focus-visible{
  outline-color: var(--wp--preset--color--primary-soft); /* 9,21:1 sobre primary ✅ */
}

/* ---- Alvo de toque mínimo 48px (público 45+ compra colchão) -------------- */
:where(a, button, input[type="submit"], .wp-block-button__link, summary){
  min-block-size: var(--fs-tap);
}
:where(nav a, .fs-inline-link){ min-block-size: auto; } /* exceção: link em texto corrido */

/* ---- Tipografia: enxerto da D2, custo zero ------------------------------- */
h1, h2, h3, .fs-balance{ text-wrap: balance; }
p, li, .fs-pretty{ text-wrap: pretty; }
p{ max-inline-size: 68ch; }

/* ---- Algarismos tabulares em TODO dado numérico -------------------------- */
.price, .woocommerce-Price-amount, .fs-price, .fs-spec td, .fs-spec th,
.fs-dim, .woocommerce-product-attributes-item__value{
  font-family: var(--wp--preset--font-family--body);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "cv05" 1;
}
/* SERIFADA PROIBIDA em: preço, botão, badge, label, tabela, breadcrumb, filtro.
   Newsreader só em H1/H2/H3 e no nome do produto. */

/* ---- Movimento ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Imagens: nunca estouram, sempre normalizadas ------------------------ */
img{ max-inline-size: 100%; block-size: auto; }


/* ==========================================================================
   3.6 Bandas da home
   ========================================================================== */

.fs-band{
  padding-block: var(--wp--preset--spacing--70);
  /* full-bleed com conteúdo travado na wide-size */
}
.fs-band--base   { background-color: var(--wp--preset--color--base); }
.fs-band--base-2 { background-color: var(--wp--preset--color--base-2); }
.fs-band--surface{ background-color: var(--wp--preset--color--surface); }
.fs-band--primary{
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);           /* 13,99:1 ✅ */
}
.fs-band--primary :is(h1,h2,h3){ color: var(--wp--preset--color--white); }
.fs-band--primary p{ color: var(--wp--preset--color--primary-soft); } /* 9,21:1 ✅ */

/* Quando a fotografia chegar: a banda azul vira foto + véu, e o contraste
   já está garantido porque foi calculado contra o azul SÓLIDO. */
.fs-band--primary.has-photo{
  background-image: var(--wp--preset--gradient--overlay-primary), var(--fs-photo);
  background-size: cover; background-position: center;
}


/* ==========================================================================
   4. Escala tipográfica e hierarquia
   ========================================================================== */

/* Fallback métrico — enxerto da D2, o único que entregou o código.
   Sem isso, Georgia → Newsreader gera CLS que conta direto no PageSpeed. */
@font-face{
  font-family: "Newsreader Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 103%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face{
  font-family: "Inter Fallback";
  src: local("Segoe UI"), local("Helvetica Neue"), local("Arial");
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}


/* ==========================================================================
   5.1 Botão — 3 variantes
   ========================================================================== */

/* ========================================================================
   BOTÃO — base compartilhada
   Raio 8px. Borda de 2px SEMPRE presente (transparente na primária) para
   que as três variantes tenham exatamente a mesma caixa e não pulem.
   ======================================================================== */
.fs-btn,
.wp-block-button__link,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit{
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-block-size: var(--fs-tap);
  padding: .9rem 1.75rem;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600; line-height: 1.2; letter-spacing: .01em;
  text-decoration: none; text-align: center;
  border-radius: var(--fs-radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .16s var(--fs-ease),
              border-color .16s var(--fs-ease),
              color .16s var(--fs-ease),
              box-shadow .16s var(--fs-ease);
}

/* ---- 1. PRIMÁRIA — a ÚNICA cor de ação do site (regra R1) --------------- */
.fs-btn--primary,
.wp-block-button:not(.is-style-outline):not(.is-style-ghost) .wp-block-button__link,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce #respond input#submit{
  background-color: var(--wp--preset--color--accent);   /* #A34A28 */
  color: var(--wp--preset--color--white);               /* 5,89:1 ✅ AA */
  border-color: var(--wp--preset--color--accent);
  box-shadow: var(--fs-shadow-card);
}
.fs-btn--primary:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover{
  background-color: var(--wp--preset--color--accent-dark); /* 8,59:1 ✅ */
  border-color: var(--wp--preset--color--accent-dark);
  box-shadow: var(--fs-shadow-raise);
}
.fs-btn--primary:active{ box-shadow: none; transform: translateY(1px); }
.fs-btn--primary:focus-visible{
  outline: 3px solid var(--wp--preset--color--secondary); outline-offset: 2px;
}
.fs-btn--primary[disabled], .fs-btn--primary[aria-disabled="true"]{
  background-color: var(--wp--preset--color--line-strong);  /* 3,75:1 sobre base */
  border-color: var(--wp--preset--color--line-strong);
  color: var(--wp--preset--color--white);                    /* 3,94:1 — UI, não texto de leitura */
  box-shadow: none; cursor: not-allowed;
}

/* ---- 2. SECUNDÁRIA (outline) — ação alternativa, nunca competindo ------- */
.fs-btn--outline,
.wp-block-button.is-style-outline .wp-block-button__link{
  background-color: transparent;
  color: var(--wp--preset--color--primary);       /* 13,31:1 sobre base ✅ */
  border-color: var(--wp--preset--color--primary);
  box-shadow: none;
}
.fs-btn--outline:hover{
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);          /* 13,99:1 ✅ */
}
.fs-btn--outline:focus-visible{ outline: 3px solid var(--wp--preset--color--secondary); outline-offset: 2px; }
.fs-btn--outline[disabled], .fs-btn--outline[aria-disabled="true"]{
  color: var(--wp--preset--color--muted);          /* 5,90:1 ✅ */
  border-color: var(--wp--preset--color--line-strong);
  cursor: not-allowed;
}

/* ---- 3. FANTASMA (texto + seta) — navegação, "ver todos" ---------------- */
.fs-btn--ghost{
  background: transparent; border-color: transparent;
  color: var(--wp--preset--color--secondary);      /* 9,70:1 ✅ */
  padding-inline: .25rem; box-shadow: none;
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.fs-btn--ghost:hover{ color: var(--wp--preset--color--primary-dark); text-decoration-thickness: 2px; }
.fs-btn--ghost::after{ content: "→"; transition: transform .16s var(--fs-ease); }
.fs-btn--ghost:hover::after{ transform: translateX(3px); }
@media (prefers-reduced-motion: reduce){ .fs-btn--ghost:hover::after{ transform: none; } }

/* ---- WhatsApp flutuante (enxerto da D2 — canal humano é conversão) ------ */
.fs-wa{
  position: fixed; inset-block-end: 1.25rem; inset-inline-end: 1.25rem; z-index: 90;
  inline-size: 56px; block-size: 56px; border-radius: var(--fs-radius-pill);
  display: grid; place-items: center;
  background-color: var(--wp--preset--color--success);  /* branco sobre ele: 7,13:1 ✅ */
  color: var(--wp--preset--color--white);
  box-shadow: var(--fs-shadow-raise); border: none;
}
/* Recua acima do sticky add-to-cart no mobile */
body.has-sticky-atc .fs-wa{ inset-block-end: calc(1.25rem + var(--fs-atc-h, 72px)); }


/* ==========================================================================
   5.2 Card de produto
   ========================================================================== */

/* ========================================================================
   CARD DE PRODUTO
   Limite = hairline line-strong (3,75:1). A sombra é enfeite (regra R2).
   SEM barra de 3px no topo — removida por parecer painel SaaS.
   ======================================================================== */
.fs-card,
.woocommerce ul.products li.product,
.wc-block-product-template__responsive .wc-block-product{
  position: relative;
  display: flex; flex-direction: column;
  background-color: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line-strong);
  border-radius: var(--fs-radius-lg);
  box-shadow: var(--fs-shadow-card);
  overflow: hidden;
  transition: box-shadow .18s var(--fs-ease), transform .18s var(--fs-ease), border-color .18s var(--fs-ease);
}
.fs-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--fs-shadow-raise);
  border-color: var(--wp--preset--color--primary);
}
.fs-card:focus-within{ border-color: var(--wp--preset--color--secondary); }
@media (prefers-reduced-motion: reduce){ .fs-card, .fs-card:hover{ transform: none; } }

/* Mídia: 1:1 forçado. O padrão do Woo deixa proporção livre e quebra o grid. */
.fs-card__media,
.woocommerce ul.products li.product a img{
  aspect-ratio: 1 / 1; inline-size: 100%; object-fit: cover;
  background-color: var(--wp--preset--color--base-2);
  display: block; margin: 0; border-radius: 0;
}

.fs-card__body{ display: flex; flex-direction: column; gap: .5rem; padding: 1.125rem 1.25rem 1.25rem; flex: 1; }

.fs-card__title{                      /* H4 — Inter, NÃO serifada */
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--large);
  font-weight: 600; line-height: 1.35;
  color: var(--wp--preset--color--contrast);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fs-card__title a{ color: inherit; text-decoration: none; }
/* Alvo de clique cobre o card inteiro sem aninhar âncoras */
.fs-card__title a::after{ content: ""; position: absolute; inset: 0; }

/* ELEMENTO COMERCIAL 1 — faixa de preço de produto variável.
   "de R$ 3.908,00 a R$ 5.666,60" — "A partir de" esconde o teto e gera
   abandono na PDP. Tabular-nums alinha a coluna na comparação. */
.fs-card__price{
  font-size: var(--wp--preset--font-size--price);
  font-weight: 600; line-height: 1.15; letter-spacing: -.01em;
  color: var(--wp--preset--color--contrast);
  font-variant-numeric: tabular-nums lining-nums;
}
.fs-card__price .from{ font-size: var(--wp--preset--font-size--x-small); font-weight: 400; color: var(--wp--preset--color--muted); }
.fs-card__price del{ color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); font-weight: 400; margin-inline-end: .5rem; }

/* ELEMENTO COMERCIAL 2 — condição à vista. Copy VERDADEIRA hoje. */
.fs-card__pix{
  display: inline-flex; align-items: center; gap: .375rem; align-self: flex-start;
  font-size: var(--wp--preset--font-size--x-small); font-weight: 600;
  color: var(--wp--preset--color--success);           /* 6,17:1 sobre success-soft ✅ */
  background-color: var(--wp--preset--color--success-soft);
  padding: .25rem .625rem; border-radius: var(--fs-radius-sm);
}
/* Texto permitido HOJE: "À vista no Pix". Proibido: "Desconto de X% no Pix"
   (não existe cupom configurado — CDC art. 30). Ver B5. */

/* ELEMENTO COMERCIAL 3 — a ação */
.fs-card__action{ margin-block-start: auto; padding-block-start: .75rem; }
.fs-card__action .fs-btn{ inline-size: 100%; }

/* Favoritar — localStorage, sem plugin e sem login (login em loja nova é atrito) */
.fs-card__fav{
  position: absolute; inset-block-start: .625rem; inset-inline-end: .625rem; z-index: 2;
  inline-size: 44px; block-size: 44px; min-block-size: 44px;
  display: grid; place-items: center;
  background-color: rgba(255,255,255,.92);
  border: 1px solid var(--wp--preset--color--line-strong);
  border-radius: var(--fs-radius-pill);
  color: var(--wp--preset--color--muted); cursor: pointer;
}
.fs-card__fav:hover{ color: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); }
.fs-card__fav[aria-pressed="true"]{ color: var(--wp--preset--color--accent); }
.fs-card__fav[aria-pressed="true"] svg{ fill: currentColor; }
/* aria-label="Adicionar aos favoritos" / "Remover dos favoritos" — alterna via JS */

/* Grid que não deixa buraco com 2 produtos e escala para 200 */
.fs-grid-produtos{
  display: grid; gap: var(--wp--preset--spacing--40);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.fs-grid-produtos[data-count="1"],
.fs-grid-produtos[data-count="2"]{ max-inline-size: 760px; margin-inline: auto; }


/* ==========================================================================
   5.3 Card de categoria (e a regra que resolve as 23 categorias com `count = 0`)
   ========================================================================== */

.fs-cat{
  display: flex; flex-direction: column;
  background-color: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line-strong);
  border-radius: var(--fs-radius-lg);
  box-shadow: var(--fs-shadow-card);
  overflow: hidden;
  transition: box-shadow .18s var(--fs-ease), border-color .18s var(--fs-ease);
}
.fs-cat:hover{ box-shadow: var(--fs-shadow-raise); border-color: var(--wp--preset--color--primary); }
.fs-cat__media{ aspect-ratio: 4/5; inline-size: 100%; object-fit: cover; background-color: var(--wp--preset--color--base-2); }
.fs-cat__body{ padding: 1rem 1.125rem 1.25rem; display: flex; flex-direction: column; gap: .25rem; }
.fs-cat__name{
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--x-large);
  font-weight: 500; color: var(--wp--preset--color--contrast);
}
.fs-cat__count{ font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--muted); font-variant-numeric: tabular-nums; }
/* A contagem SÓ é impressa se count > 0. Nunca "0 produtos" (enxerto da D2). */

/* Estado "em breve": SEM <a>, é um <div>. Não focável, não ativável. */
.fs-cat--soon{ background-color: var(--wp--preset--color--base-2); box-shadow: none; border-color: var(--wp--preset--color--line); }
.fs-cat--soon .fs-cat__name{ color: var(--wp--preset--color--muted); }  /* 5,32:1 ✅ */
.fs-cat--soon .fs-cat__tag{
  font-size: var(--wp--preset--font-size--x-small); font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--wp--preset--color--muted);
}


/* ==========================================================================
   5.3 Card de categoria (e a regra que resolve as 23 categorias com `count = 0`)
   ========================================================================== */

.fs-roadmap{ display: grid; gap: .25rem 3rem; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.fs-roadmap li{
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--x-large); font-weight: 400;
  padding-block: .875rem;
  border-block-end: 1px solid var(--wp--preset--color--line);
}
.fs-roadmap li[data-state="soon"]{ color: var(--wp--preset--color--muted); }
.fs-roadmap li[data-state="soon"] span{ font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--x-small); text-transform: uppercase; letter-spacing: .1em; }
.fs-roadmap a{ color: var(--wp--preset--color--contrast); text-decoration: none; }
.fs-roadmap a:hover{ color: var(--wp--preset--color--secondary); text-decoration: underline; text-underline-offset: 4px; }


/* ==========================================================================
   5.4 Badge / selo
   ========================================================================== */

.fs-badge{
  display: inline-flex; align-items: center; gap: .375rem;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 600; line-height: 1;
  text-transform: uppercase; letter-spacing: .08em;
  padding: .375rem .625rem;
  border-radius: var(--fs-radius-sm);
  border: 1px solid transparent;
  font-variant-numeric: tabular-nums;
}
.fs-badge--sale{     background: var(--wp--preset--color--sale-soft);    color: var(--wp--preset--color--sale);    border-color: var(--wp--preset--color--sale); }    /* 6,56:1 ✅ */
.fs-badge--pix{      background: var(--wp--preset--color--success-soft); color: var(--wp--preset--color--success); border-color: var(--wp--preset--color--success); } /* 6,17:1 ✅ */
.fs-badge--info{     background: var(--wp--preset--color--accent-soft);  color: var(--wp--preset--color--accent);  border-color: var(--wp--preset--color--accent); }  /* 5,03:1 ✅ */
.fs-badge--neutro{   background: var(--wp--preset--color--base-2);       color: var(--wp--preset--color--muted);   border-color: var(--wp--preset--color--line-strong); } /* 5,32:1 ✅ */
.fs-badge--pill{ border-radius: var(--fs-radius-pill); }


/* ==========================================================================
   5.5 Breadcrumb
   ========================================================================== */

.fs-breadcrumb{
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--x-small);
  color: var(--wp--preset--color--muted);              /* 5,90:1 ✅ */
  padding-block: 1rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .375rem;
}
.fs-breadcrumb a{ color: var(--wp--preset--color--secondary); text-decoration: none; }  /* 9,70:1 ✅ */
.fs-breadcrumb a:hover{ text-decoration: underline; text-underline-offset: 3px; }
.fs-breadcrumb a:focus-visible{ outline: 3px solid var(--wp--preset--color--secondary); outline-offset: 2px; }
.fs-breadcrumb [aria-current="page"]{ color: var(--wp--preset--color--contrast); font-weight: 600; }
.fs-breadcrumb li + li::before{ content: "/"; color: var(--wp--preset--color--line-strong); margin-inline-end: .375rem; }


/* ==========================================================================
   5.6 Faixa de benefícios
   ========================================================================== */

.fs-beneficios{
  display: grid; gap: var(--wp--preset--spacing--40);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
@media (max-width: 600px){
  .fs-beneficios{
    grid-auto-flow: column; grid-auto-columns: 72%;
    grid-template-columns: none; overflow-x: auto;
    scroll-snap-type: x mandatory; scroll-padding-inline: 1rem;
    padding-block-end: .5rem; scrollbar-width: thin;
  }
  .fs-beneficios > *{ scroll-snap-align: start; }
}
.fs-beneficio{ display: flex; flex-direction: column; gap: .5rem; }
.fs-beneficio__icon{
  inline-size: 28px; block-size: 28px;
  color: var(--wp--preset--color--primary);   /* 13,31:1 sobre base ✅ */
  stroke: currentColor; stroke-width: 1.5; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.fs-beneficio__title{
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600; color: var(--wp--preset--color--contrast);
}
.fs-beneficio__text{ font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--muted); line-height: 1.5; }


/* ==========================================================================
   5.7 Acordeão de FAQ
   ========================================================================== */

.fs-faq{ border-block-start: 1px solid var(--wp--preset--color--line-strong); }
.fs-faq details{ border-block-end: 1px solid var(--wp--preset--color--line-strong); }
.fs-faq summary{
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-block-size: var(--fs-tap);
  padding-block: 1.125rem;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600; color: var(--wp--preset--color--contrast);
  cursor: pointer; list-style: none;
}
.fs-faq summary::-webkit-details-marker{ display: none; }
.fs-faq summary::after{                     /* + em CSS puro, gira para × */
  content: ""; flex: 0 0 auto;
  inline-size: 14px; block-size: 14px;
  background:
    linear-gradient(var(--wp--preset--color--primary) 0 0) center/100% 2px no-repeat,
    linear-gradient(var(--wp--preset--color--primary) 0 0) center/2px 100% no-repeat;
  transition: transform .2s var(--fs-ease);
}
.fs-faq details[open] summary::after{ transform: rotate(45deg); }
.fs-faq summary:hover{ color: var(--wp--preset--color--secondary); }
.fs-faq summary:focus-visible{ outline: 3px solid var(--wp--preset--color--secondary); outline-offset: 2px; border-radius: var(--fs-radius-sm); }
.fs-faq__answer{
  padding-block: 0 1.25rem;
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1.65; color: var(--wp--preset--color--contrast);
  max-inline-size: 68ch;
}
@media (prefers-reduced-motion: reduce){ .fs-faq summary::after{ transition: none; } }


/* ==========================================================================
   5.8 Campo de formulário
   ========================================================================== */

.fs-field{ display: flex; flex-direction: column; gap: .375rem; }
.fs-field label{                              /* label SEMPRE visível, nunca só placeholder */
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--wp--preset--color--muted);     /* 5,90:1 ✅ */
}
.fs-field input, .fs-field select, .fs-field textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.wp-block-search__input{
  inline-size: 100%; min-block-size: var(--fs-tap);
  padding: .75rem .875rem;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--medium);
  color: var(--wp--preset--color--contrast);
  background-color: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line-strong);   /* 3,94:1 ✅ SC 1.4.11 */
  border-radius: var(--fs-radius-sm);
  transition: border-color .16s var(--fs-ease), box-shadow .16s var(--fs-ease);
}
.fs-field input::placeholder{ color: var(--wp--preset--color--muted); opacity: 1; }  /* 6,20:1 ✅ */
.fs-field input:hover{ border-color: var(--wp--preset--color--muted); }
.fs-field input:focus-visible{
  border-color: var(--wp--preset--color--secondary);
  outline: 3px solid var(--wp--preset--color--secondary); outline-offset: 1px;
}
.fs-field input[disabled]{
  background-color: var(--wp--preset--color--base-2);
  color: var(--wp--preset--color--muted);
  border-color: var(--wp--preset--color--line);
  cursor: not-allowed;
}
/* ERRO: cor + ícone + texto. Nunca só cor (SC 1.4.1 — regra R4). */
.fs-field[data-state="error"] input{ border-color: var(--wp--preset--color--sale); border-width: 2px; }
.fs-field__error{
  display: flex; align-items: center; gap: .375rem;
  font-size: var(--wp--preset--font-size--x-small); font-weight: 600;
  color: var(--wp--preset--color--sale);        /* 6,97:1 ✅ */
}
.fs-field__error::before{ content: "⚠"; }
/* aria-invalid="true" + aria-describedby apontando para .fs-field__error */

.fs-field__hint{ font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--muted); }

/* Checkbox de consentimento LGPD — label clicável, alvo 48px */
.fs-consent{ display: flex; align-items: flex-start; gap: .75rem; }
.fs-consent input[type="checkbox"]{
  inline-size: 22px; block-size: 22px; min-block-size: 22px;
  margin-block-start: .125rem; flex: 0 0 auto;
  accent-color: var(--wp--preset--color--secondary);
  border: 1px solid var(--wp--preset--color--line-strong);
}
.fs-consent label{
  text-transform: none; letter-spacing: 0; font-weight: 400;
  font-size: var(--wp--preset--font-size--x-small);
  color: var(--wp--preset--color--muted); line-height: 1.5;
  min-block-size: var(--fs-tap); display: flex; align-items: center;
}

/* ==========================================================================
   7. Cabeçalho do site
   Barra azul-marinho (primary). Logo, navegação e ícones herdam branco.
   A busca é VISÍVEL — em catálogo vendido por medida ela é entrada primária.
   ========================================================================== */
.fs-site-header{
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  position: sticky; top: 0; z-index: 100;
}
.fs-site-header a{ color: var(--wp--preset--color--white); }

/* Faixa superior institucional. Some no mobile para não roubar altura. */
.fs-topbar{
  background-color: var(--wp--preset--color--primary-dark);
  color: var(--wp--preset--color--primary-soft);   /* 7,55:1 sobre primary-dark */
  font-size: var(--wp--preset--font-size--x-small);
  text-align: center;
  padding-block: .5rem;
  letter-spacing: .02em;
}
@media (max-width: 600px){ .fs-topbar{ display: none; } }

.fs-header-inner{
  max-inline-size: var(--wp--style--global--wide-size);
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 1.5rem;
  padding-block: .75rem;
}
.fs-header-actions{ display: flex; align-items: center; gap: .25rem; justify-self: end; }

/* Busca no header: fundo claro sobre o azul, para ler como campo e não como enfeite */
.fs-header-search .wp-block-search__inside-wrapper{
  border: 1px solid var(--wp--preset--color--primary-soft);
  border-radius: var(--fs-radius-md);
  background-color: var(--wp--preset--color--white);
  overflow: hidden;
}
.fs-header-search .wp-block-search__input{
  border: 0; background: transparent;
  color: var(--wp--preset--color--contrast);
  min-block-size: 44px; padding-inline: .875rem;
}
.fs-header-search .wp-block-search__button{
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  border: 0; margin: 0; padding-inline: 1rem;
}

/* Mini-carrinho e conta: alvo de toque cheio. Contador em terracota clara —
   grafismo grande sobre azul, permitido pela regra R3. */
.fs-site-header .wc-block-mini-cart__button,
.fs-site-header .wp-block-woocommerce-customer-account{
  min-block-size: var(--fs-tap); min-inline-size: var(--fs-tap);
  display: inline-flex; align-items: center; justify-content: center;
}
.fs-site-header .wc-block-mini-cart__badge{
  background-color: var(--wp--preset--color--accent-light);
  color: var(--wp--preset--color--primary-dark);   /* 7,12:1 */
  font-weight: 700;
}

/* Navegação: submenu em superfície clara com hairline (regra R2) */
.fs-site-header .wp-block-navigation .wp-block-navigation-submenu__toggle{ min-block-size: var(--fs-tap); }
.fs-site-header .wp-block-navigation__submenu-container{
  background-color: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line-strong);
  border-radius: var(--fs-radius-lg);
  box-shadow: var(--fs-shadow-card);
  padding-block: .5rem;
}
.fs-site-header .wp-block-navigation__submenu-container a{ color: var(--wp--preset--color--contrast); }
.fs-site-header .wp-block-navigation__submenu-container a:hover{ background-color: var(--wp--preset--color--base-2); }

@media (max-width: 781px){
  .fs-header-inner{ grid-template-columns: auto 1fr; gap: .75rem; }
  .fs-header-search{ grid-column: 1 / -1; order: 3; padding-block-end: .75rem; }
}

/* ==========================================================================
   8. Rodapé — inclui a faixa legal obrigatória (Decreto 7.962/2013)
   Razão social + CNPJ + endereço + telefone. Alimenta o Organization JSON-LD.
   ========================================================================== */
.fs-site-footer{
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--primary-soft);
  padding-block-start: var(--wp--preset--spacing--70);
}
.fs-site-footer a{ color: var(--wp--preset--color--white); text-decoration: none; }
.fs-site-footer a:hover{ text-decoration: underline; text-underline-offset: 4px; }
.fs-site-footer h2, .fs-site-footer h3{ color: var(--wp--preset--color--white); }
.fs-footer-cols{
  max-inline-size: var(--wp--style--global--wide-size);
  margin-inline: auto;
  display: grid; gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
}
.fs-footer-col h3{
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  color: var(--wp--preset--color--primary-soft);
  margin-block-end: .875rem;
}
.fs-footer-col ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }

/* Faixa legal: fundo mais escuro, texto pequeno mas legível (7,55:1) */
.fs-legal{
  margin-block-start: var(--wp--preset--spacing--60);
  background-color: var(--wp--preset--color--primary-dark);
  font-size: var(--wp--preset--font-size--x-small);
  line-height: 1.7;
  padding-block: 1.25rem;
}
.fs-legal__inner{
  max-inline-size: var(--wp--style--global--wide-size);
  margin-inline: auto;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
}

/* ==========================================================================
   9. Página de produto (PDP)
   Galeria normalizada em 1:1. O padrão do Woo usa float 25% nas miniaturas,
   que quebra em grid moderno. Zoom e lightbox continuam sendo os nativos.
   ========================================================================== */
.woocommerce div.product div.images img,
.wp-block-woocommerce-product-image-gallery img{
  aspect-ratio: 1 / 1;
  object-fit: cover;
  inline-size: 100%;
  border-radius: var(--fs-radius-lg);
  background-color: var(--wp--preset--color--base-2);
}
.woocommerce div.product div.images .flex-control-thumbs{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem;
  margin-block-start: .5rem; padding: 0; list-style: none;
}
.woocommerce div.product div.images .flex-control-thumbs li{ inline-size: auto; float: none; margin: 0; }
.woocommerce div.product div.images .flex-control-thumbs img{
  border-radius: var(--fs-radius-sm); opacity: .72;
  transition: opacity .2s var(--fs-ease);
}
.woocommerce div.product div.images .flex-control-thumbs img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs img:hover{ opacity: 1; }

/* Ficha técnica — aqui o corte é literal, não decorativo.
   Medidas em tabular-nums para alinharem em coluna. */
.fs-specs{
  border: 1px solid var(--wp--preset--color--line-strong);
  border-radius: var(--fs-radius-lg);
  overflow: hidden;
}
.fs-specs__head{
  background-color: var(--wp--preset--color--base-2);
  padding: .875rem 1.125rem;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  color: var(--wp--preset--color--muted);
  display: flex; align-items: center; gap: .75rem;
}
.fs-specs__head::before{                     /* o corte, em miniatura */
  content: ""; inline-size: 22px; block-size: 14px; flex: 0 0 auto;
  background-image:
    linear-gradient(var(--fs-lay-1) 0 0),
    linear-gradient(var(--fs-lay-2) 0 0),
    linear-gradient(var(--fs-lay-3) 0 0);
  background-repeat: no-repeat;
  background-size: 100% 3px, 58% 3px, 100% 3px;
  background-position: 0 0, 0 5px, 0 10px;
}
.fs-specs table{ inline-size: 100%; border-collapse: collapse; }
.fs-specs tr + tr{ border-block-start: 1px solid var(--wp--preset--color--line); }
.fs-specs th, .fs-specs td{
  padding: .75rem 1.125rem; text-align: start;
  font-size: var(--wp--preset--font-size--small);
}
.fs-specs th{ color: var(--wp--preset--color--muted); font-weight: 500; inline-size: 42%; }
.fs-specs td{ font-variant-numeric: tabular-nums; }

/* Garantia / entrega / trocas — respondem à pergunta de compra */
.fs-assurances{ display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); }
.fs-assurance{
  border: 1px solid var(--wp--preset--color--line-strong);
  border-radius: var(--fs-radius-lg);
  background-color: var(--wp--preset--color--surface);
  padding: 1rem 1.125rem;
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.55;
}
.fs-assurance strong{ display: block; margin-block-end: .25rem; color: var(--wp--preset--color--contrast); }

/* ==========================================================================
   10. Sticky add-to-cart (mobile)
   Maior impacto de conversão em PDP longa. Só aparece quando o formulário
   original sai de vista — a classe .is-visible vem do IntersectionObserver.
   ========================================================================== */
.fs-sticky-atc{
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 90;
  background-color: var(--wp--preset--color--surface);
  border-block-start: 1px solid var(--wp--preset--color--line-strong);
  box-shadow: var(--fs-shadow-sticky);
  padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 1rem;
  transform: translateY(110%);
  transition: transform .28s var(--fs-ease);
}
.fs-sticky-atc.is-visible{ transform: none; }
.fs-sticky-atc__info{ min-inline-size: 0; flex: 1 1 auto; }
.fs-sticky-atc__name{
  font-size: var(--wp--preset--font-size--small); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fs-sticky-atc__price{
  font-variant-numeric: tabular-nums; font-weight: 700;
  color: var(--wp--preset--color--contrast);
}
.fs-sticky-atc__btn{ flex: 0 0 auto; }
@media (min-width: 782px){ .fs-sticky-atc{ display: none; } }
@media (prefers-reduced-motion: reduce){ .fs-sticky-atc{ transition: none; } }

/* ==========================================================================
   11. Favoritos (wishlist) — localStorage puro
   Sem endpoint, sem nonce, sem fragmento de cache: não quebra cache de página.
   O estado é pintado pelo theme.js depois da hidratação.
   ========================================================================== */
.fs-wish{
  border: 0; background: transparent; cursor: pointer;
  inline-size: var(--fs-tap); block-size: var(--fs-tap);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; color: var(--wp--preset--color--muted);
  transition: color .18s var(--fs-ease), background-color .18s var(--fs-ease);
}
.fs-wish:hover{ background-color: var(--wp--preset--color--base-2); color: var(--wp--preset--color--accent); }
.fs-wish[aria-pressed="true"]{ color: var(--wp--preset--color--accent); }
.fs-wish[aria-pressed="true"] svg{ fill: currentColor; }
.fs-wish svg{ inline-size: 22px; block-size: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* ==========================================================================
   12. Impressão — a ficha técnica é o que interessa no papel
   ========================================================================== */
@media print{
  .fs-site-header, .fs-site-footer, .fs-sticky-atc, .fs-wa, .fs-wish{ display: none !important; }
  body{ background: #fff; color: #000; }
  .fs-specs{ border-color: #999; }
}

/* ==========================================================================
   13. Skip link e região de anúncio
   Primeiro item tabulável da página. Fica fora de vista até receber foco.
   ========================================================================== */
.fs-skip-link{
  position: absolute;
  inset-inline-start: -9999px;
  z-index: 999;
  padding: .75rem 1.25rem;
  background-color: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--contrast);
  border: 2px solid var(--wp--preset--color--secondary);
  border-radius: var(--fs-radius-md);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  text-decoration: none;
}
.fs-skip-link:focus{
  inset-inline-start: 1rem;
  inset-block-start: 1rem;
}

/* Região viva para anúncios de leitor de tela (favoritos, etc.) */
.fs-sr-only{
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ==========================================================================
   14. Hero — painel do "Corte de Camadas"
   Identidade sem fotografia. O LCP é a manchete em texto, não uma imagem:
   é o que permite a home ser rápida sem depender de ensaio fotográfico.
   ========================================================================== */
.fs-hero-panel{
  display: grid;
  gap: clamp(.75rem, 2vw, 1.25rem);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: var(--fs-radius-lg);
  background-color: rgba(255,255,255,.06);
  border: 1px solid rgba(196,210,240,.28);
}
.fs-hero-panel__layer{
  display: block;
  block-size: clamp(14px, 3.2vw, 26px);
  inline-size: var(--w, 100%);
  border-radius: var(--fs-radius-pill);
  background-color: var(--wp--preset--color--primary-soft);
}
.fs-hero-panel__layer:nth-child(2){ background-color: var(--wp--preset--color--accent-light); }
.fs-hero-panel__layer:nth-child(4){ background-color: rgba(196,210,240,.38); }

@media (prefers-reduced-motion: no-preference){
  .fs-hero-panel__layer{
    transform-origin: left center;
    animation: fs-empilha .6s var(--fs-ease) both;
  }
  .fs-hero-panel__layer:nth-child(2){ animation-delay: .08s; }
  .fs-hero-panel__layer:nth-child(3){ animation-delay: .16s; }
  .fs-hero-panel__layer:nth-child(4){ animation-delay: .24s; }
  @keyframes fs-empilha{
    from{ opacity: 0; transform: scaleX(.2); }
    to  { opacity: 1; transform: scaleX(1); }
  }
}

/* Sobrescrita de cor do H1 dentro da banda azul — o theme.json define
   heading como `contrast`, que sumiria sobre o marinho. */
.fs-band--primary :where(h1,h2,h3){ color: var(--wp--preset--color--white); }

.fs-eyebrow{ margin-block-end: 0; }

/* ==========================================================================
   15. Grade de categorias
   ========================================================================== */
.fs-cats{
  display: grid;
  gap: var(--wp--preset--spacing--40);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.fs-cats:has(.fs-cat:only-child){ max-inline-size: 380px; }

/* Lista das categorias ainda sem produto — texto, nunca link */
.fs-dim{
  margin-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30);
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--small);
}
.fs-roadmap{ list-style: none; padding: 0; }

/* ==========================================================================
   16. Barra da loja e coluna de filtros
   ========================================================================== */
.fs-shop-bar{
  border-block-end: 1px solid var(--wp--preset--color--line-strong);
  padding-block-end: var(--wp--preset--spacing--30);
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--muted);
}
.fs-shop-bar select{
  border: 1px solid var(--wp--preset--color--line-strong);
  border-radius: var(--fs-radius-sm);
  background-color: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--contrast);
  min-block-size: 44px;
  padding: 0 .75rem;
  font-family: var(--wp--preset--font-family--body);
}
.fs-filtro{
  border-block-end: 1px solid var(--wp--preset--color--line);
  padding-block-end: var(--wp--preset--spacing--40);
  margin-block-end: var(--wp--preset--spacing--40);
}
.fs-filtro h2{
  font-family: var(--wp--preset--font-family--body);
  font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  color: var(--wp--preset--color--muted);
  margin-block-end: var(--wp--preset--spacing--30);
}

/* No mobile a coluna de filtros vira uma faixa acima do grid, não uma
   coluna estreita espremida. */
@media (max-width: 781px){
  .fs-filtros{ order: -1; }
  .fs-filtro{ padding-block-end: var(--wp--preset--spacing--30); margin-block-end: var(--wp--preset--spacing--30); }
}

/* ==========================================================================
   17. Ajuste final do grid de produtos com catálogo pequeno
   Com 1–2 itens, `auto-fit` esticaria os cards pela largura toda e o
   resultado pareceria erro de layout. Centralizar comunica "é isso mesmo".
   ========================================================================== */
.wp-block-woocommerce-product-collection .wc-block-product-template{
  display: grid;
  gap: var(--wp--preset--spacing--50);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.wp-block-woocommerce-product-collection .wc-block-product-template:has(li:nth-child(3)){
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.wp-block-woocommerce-product-collection .wc-block-product-template li{ list-style: none; }

/* ==========================================================================
   18. Card de produto — correção de layout real
   -------------------------------------------------------------------------
   O CSS da seção 5.2 pressupunha um wrapper .fs-card__body envolvendo
   título/preço/botão. O template renderiza os blocos como FILHOS DIRETOS de
   .fs-card, então aquele padding nunca se aplicava: o texto encostava na
   borda e o botão flutuava.

   Três defeitos corrigidos aqui:
     a) Sem respiro interno   -> padding nos filhos que não são a mídia
     b) Cards de alturas diferentes e desalinhados -> <li> vira flex e estica
     c) Preço a 1,75rem quebrava "R$ 5.560,00 – R$ 8.062,00" em duas linhas
        -> tamanho próprio de card, menor que o da página de produto
   ========================================================================== */

/* (b) Todos os cards de uma linha com a mesma altura, topo e base alinhados.
   O <li> do product-template não estica sozinho: sem isto, cada card fica
   com a altura do próprio conteúdo e a linha sai torta. */
.wc-block-product-template{ align-items: stretch; }
.wc-block-product-template > li{
  display: flex;
  flex-direction: column;
  margin-block: 0 !important;   /* neutraliza o is-layout-flow do WP */
}
.wc-block-product-template > li > .fs-card{ flex: 1 1 auto; }

/* (a) Respiro. A mídia vai de borda a borda; todo o resto recebe padding. */
.fs-card > :not(.fs-card__media){
  padding-inline: 1.25rem;
  margin-block: 0;
}
.fs-card > .fs-card__title{ padding-block-start: 1.125rem; }
.fs-card > .fs-card__price{ padding-block-start: .375rem; }

/* O botão encosta na base: é o que mantém a base dos cards alinhada mesmo
   quando um título ocupa duas linhas e o outro só uma. */
.fs-card > .fs-card__action{
  margin-block-start: auto;
  padding-block: 1rem 1.25rem;
}

/* Alinhamento à esquerda, consistente. A direção "Ficha Técnica" alinha
   dado em coluna — título centralizado e preço à esquerda brigavam entre si. */
.fs-card__title,
.fs-card__title a,
.fs-card__price,
.fs-card__price .wc-block-components-product-price{
  text-align: start;
}

/* (c) Preço no card. Na página de produto continua grande (--font-size--price);
   aqui a faixa de variável não cabe em uma linha nesse tamanho. */
.fs-card__price,
.fs-card__price .wc-block-components-product-price{
  font-size: 1.15rem;
  line-height: 1.3;
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--wp--preset--color--contrast);
}

/* Botão ocupando a largura do card — alvo maior e base visualmente estável */
.fs-card__action .wc-block-components-product-button__button,
.fs-card__action .wp-block-button__link{
  inline-size: 100%;
  justify-content: center;
  text-align: center;
}

/* A imagem é o topo do card: cantos arredondados só em cima, e sem o
   padding/margem que os blocos do Woo trazem por padrão. */
.fs-card > .fs-card__media,
.fs-card .wc-block-components-product-image{
  margin: 0;
  padding: 0;
  border-radius: 0;
  overflow: hidden;
}
.fs-card .wc-block-components-product-image a,
.fs-card .wc-block-components-product-image img{
  display: block;
  inline-size: 100%;
  margin: 0;
}

/* O título já cobre o card inteiro como área de clique (::after em 5.2).
   O link da imagem então não precisa de foco próprio — evita dois paradas
   de tabulação para o mesmo destino. */
.fs-card .wc-block-components-product-image a{ outline: none; }
.fs-card .wc-block-components-product-image a:focus-visible{
  outline: 3px solid var(--wp--preset--color--secondary);
  outline-offset: -3px;
}

/* Grid do product-collection: colunas iguais e mínimo que não espreme.
   Com 2 produtos as colunas ficam largas demais se auto-fit esticar, então
   limitamos a largura útil da faixa. */
.wp-block-woocommerce-product-collection .wc-block-product-template{
  display: grid;
  gap: var(--wp--preset--spacing--50);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  align-items: stretch;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* ==========================================================================
   19. Página de categoria — coluna de filtro condicional
   -------------------------------------------------------------------------
   O shortcode [fs_filtros] devolve string vazia quando a categoria tem menos
   de 8 produtos. A coluna, porém, continua no DOM ocupando 250px — sobrava
   um vão vazio ao lado do grid.

   Sem filtro, a coluna some e o grid usa a largura toda. Quando o catálogo
   crescer, o filtro aparece e a coluna volta, sem editar template.
   ========================================================================== */
.fs-filtros:not(:has(.wp-block-woocommerce-product-filters)){
  display: none;
}
/* Sem a coluna de filtro, a de produtos ocupa tudo */
.wp-block-columns:has(> .fs-filtros:not(:has(.wp-block-woocommerce-product-filters))){
  gap: 0;
}

/* Fallback para navegador sem :has() — a coluna encolhe em vez de sumir,
   mas nunca deixa um bloco de 250px vazio. */
@supports not selector(:has(*)){
  .fs-filtros{ flex-basis: auto !important; }
}

/* ==========================================================================
   20. Filtros do WooCommerce — acabamento
   O slider nativo vem sem contenção: os campos de valor escapavam da coluna.
   ========================================================================== */
.fs-filtros .wp-block-woocommerce-product-filters{ max-inline-size: 100%; }

.fs-filtros input[type="text"],
.fs-filtros input[type="number"]{
  inline-size: 100%;
  min-inline-size: 0;
  box-sizing: border-box;
  min-block-size: 40px;
  padding: 0 .625rem;
  border: 1px solid var(--wp--preset--color--line-strong);
  border-radius: var(--fs-radius-sm);
  background-color: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--contrast);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--small);
  font-variant-numeric: tabular-nums;
}

/* Os dois campos (mínimo e máximo) lado a lado, sem estourar a coluna */
.fs-filtros .wc-block-price-filter__range-text,
.fs-filtros .wp-block-woocommerce-product-filter-price-slider__content{
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-block-start: .75rem;
}

.fs-filtros .wp-block-woocommerce-product-filter-price-slider{
  padding-inline: .25rem;   /* o punho do slider ficava cortado na borda */
}

/* ==========================================================================
   21. Barra da loja — não deixar a ordenação encostar no grid
   ========================================================================== */
.fs-shop-bar{ gap: 1rem; }
.fs-shop-bar > *{ margin-block: 0; }

/* Em telas estreitas: contagem em cima, ordenação embaixo ocupando a largura */
@media (max-width: 600px){
  .fs-shop-bar{ flex-direction: column; align-items: stretch; }
  .fs-shop-bar select{ inline-size: 100%; }
}

/* ==========================================================================
   22. Grid de produtos com catálogo pequeno
   -------------------------------------------------------------------------
   A 1200px o grid abre 4 trilhas. Com 2 produtos isso produz ou cards
   esticados de ~590px, ou um vão vazio de metade da tela à direita — e nos
   dois casos a loja parece quebrada, não enxuta.

   A faixa é limitada pela contagem real de itens. Quando o catálogo chegar
   a 4+ produtos a limitação deixa de valer sozinha, sem editar nada.
   ========================================================================== */

/* exatamente 1 produto */
.wc-block-product-template:not(:has(> li:nth-child(2))){
  max-inline-size: 340px;
}
/* exatamente 2 */
.wc-block-product-template:has(> li:nth-child(2)):not(:has(> li:nth-child(3))){
  max-inline-size: 700px;
}
/* exatamente 3 */
.wc-block-product-template:has(> li:nth-child(3)):not(:has(> li:nth-child(4))){
  max-inline-size: 1060px;
}
/* 4 ou mais: usa a largura toda, sem regra */

/* Alinhado à esquerda, como o resto da página. A direção "Ficha Técnica"
   alinha dado em coluna — centralizar aqui brigaria com o título acima. */
.wp-block-woocommerce-product-collection .wc-block-product-template{
  margin-inline: 0;
}

@supports not selector(:has(*)){
  /* Sem :has(), limita sempre — pior num catálogo grande, melhor num pequeno,
     e hoje o catálogo é pequeno. */
  .wc-block-product-template{ max-inline-size: 1060px; }
}