/*!
 * WS2 — base global · v1.0.0
 * Só estrutura. Nenhuma cor de marca, fonte, forma ou movimento de família (R2, R11).
 * Carregar depois de foundation/core-tokens.css e ANTES do tokens.css da família e do style.css
 * da receita, para que qualquer ajuste da receita vença por ordem.
 */

/* Falha de imagem não vira buraco: o bloco mantém o espaço e o texto alternativo fica legível.
   Tom neutro e translúcido, que funciona sobre qualquer paleta. */
img { background-color: rgba(120, 100, 85, .12); }
img.img-error {
  background-color: rgba(120, 100, 85, .18);
  object-fit: contain;
  font-size: 14px;
  color: rgba(60, 50, 45, .8);
  padding: 12px;
}

/* Contrato de imagens (R16) ----------------------------------------------------
   remover: data-ws2-empty no container do slot */
[data-ws2-empty] { display: none !important; }

/* remover com recomposição: o pai do slot passa a ter uma coluna só */
[data-ws2-slot-layout][data-ws2-layout="single"] {
  grid-template-columns: minmax(0, 1fr) !important;
  max-width: 880px;
  margin-inline: auto;
}

/* Logo do cliente --------------------------------------------------------------
   <img class="ws2-logo"> como primeiro filho de qualquer [data-ws2-slot^="brand.logo"].
   Quando há logo, o nome em texto e o símbolo padrão da família somem naquele ponto. */
.ws2-logo {
  display: block;
  width: auto;
  height: var(--ws2-logo-h, 46px);
  max-width: min(240px, 62vw);
  object-fit: contain;
}
[data-ws2-slot="brand.logo.hero"] { --ws2-logo-h: 72px; }
[data-ws2-slot="brand.logo.footer"] { --ws2-logo-h: 40px; }
[data-ws2-slot^="brand.logo"]:has(> .ws2-logo) { font-size: 0; }
[data-ws2-slot^="brand.logo"]:has(> .ws2-logo) > :not(.ws2-logo) { display: none !important; }

/* Acessibilidade ----------------------------------------------------------------- */
.ws2-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Ícones de marca (R18) -------------------------------------------------------------
   Nenhum logotipo de terceiro é desenhado aqui. O ícone oficial entra como arquivo do kit de
   marca da plataforma, pelo mapa <script data-ws2-icons>. Sem arquivo:
     · WhatsApp → ícone genérico de conversa (balão retangular, NÃO é o logo do WhatsApp);
     · redes → o nome da rede em texto. */
.ws2-icon {
  display: inline-block; flex: 0 0 auto; width: 1.2em; height: 1.2em; vertical-align: -0.2em;
  background-color: currentColor;
  -webkit-mask: var(--ws2-icon-mask, none) center / contain no-repeat;
          mask: var(--ws2-icon-mask, none) center / contain no-repeat;
}
[data-ws2-icon="whatsapp"] {
  --ws2-icon-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3.5 5.5A2.5 2.5 0 0 1 6 3h12a2.5 2.5 0 0 1 2.5 2.5v8.5A2.5 2.5 0 0 1 18 16.5h-7.6l-4.9 4v-4H6a2.5 2.5 0 0 1-2.5-2.5z'/></svg>");
}

/* WhatsApp: ícone e botão configuráveis em qualquer receita ---------------------------
   <body data-ws2-whatsapp-icon="generic | original | mono-light | mono-dark"
         data-ws2-whatsapp-button="family | brand">
   original e mono precisam do arquivo oficial; sem ele, volta ao genérico.
   Recolorir o logo oficial com a cor da família não existe como opção: as plataformas, em
   geral, só aceitam as cores oficiais ou preto e branco. */
[data-ws2-whatsapp="button"] .ws2-icon { width: 20px; height: 20px; }
[data-ws2-whatsapp="floating"] .ws2-icon { width: 28px; height: 28px; }
body[data-ws2-whatsapp-icon="original"] [data-ws2-icon="whatsapp"].ws2-icon-file {
  background: var(--ws2-icon-src) center / contain no-repeat; -webkit-mask: none; mask: none;
}
body[data-ws2-whatsapp-icon="mono-light"] [data-ws2-icon="whatsapp"].ws2-icon-file { --ws2-icon-mask: var(--ws2-icon-src); background-color: #fff; }
body[data-ws2-whatsapp-icon="mono-dark"] [data-ws2-icon="whatsapp"].ws2-icon-file { --ws2-icon-mask: var(--ws2-icon-src); background-color: #111; }
body[data-ws2-whatsapp-button="brand"] [data-ws2-whatsapp="button"],
body[data-ws2-whatsapp-button="brand"] [data-ws2-whatsapp="floating"] {
  background: #25D366 !important; color: #fff !important; border-color: #25D366 !important;
}
body[data-ws2-whatsapp-button="brand"] [data-ws2-whatsapp="button"]:hover,
body[data-ws2-whatsapp-button="brand"] [data-ws2-whatsapp="floating"]:hover { background: #1EBE5A !important; }

/* Redes sociais e plataformas de consulta -------------------------------------------
   <ul class="ws2-social" data-ws2-social-display="icon | icon-text | text"
                          data-ws2-social-icon-style="original | mono-light | mono-dark">
   A cor do texto vem do lugar onde a lista está (herda do rodapé). A forma do botão vem da
   família por --ws2-social-radius. */
.ws2-social-row { width: min(1180px, calc(100% - 48px)); margin: 28px auto 0; }
.ws2-social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ws2-social-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px;
  border: 1px solid rgba(128, 128, 128, .38); border-radius: var(--ws2-social-radius, 999px);
  font-size: 14px; line-height: 1; color: inherit; text-decoration: none; transition: opacity .2s ease;
}
.ws2-social-link:hover { opacity: .72; }
.ws2-social-link .ws2-icon { width: 20px; height: 20px; }
.ws2-social-link .ws2-icon:not(.ws2-icon-file),
[data-ws2-social-display="text"] .ws2-social-link .ws2-icon { display: none; }
[data-ws2-social-display="icon"] .ws2-social-link:has(.ws2-icon-file) { padding: 10px; }
[data-ws2-social-display="icon"] .ws2-social-link:has(.ws2-icon-file) .ws2-social-name {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
[data-ws2-social-icon-style="original"] .ws2-icon-file { background: var(--ws2-icon-src) center / contain no-repeat; -webkit-mask: none; mask: none; }
[data-ws2-social-icon-style="mono-light"] .ws2-icon-file { --ws2-icon-mask: var(--ws2-icon-src); background-color: #fff; }
[data-ws2-social-icon-style="mono-dark"] .ws2-icon-file { --ws2-icon-mask: var(--ws2-icon-src); background-color: #111; }

/* Mapa de endereço (R19) -------------------------------------------------------------
   Estrutura neutra: proporção, moldura e botões herdam a cor de onde o mapa está. A forma vem
   da família por --ws2-map-radius (ou --ws2-social-radius, nos botões). */
.ws2-map {
  position: relative; overflow: hidden; aspect-ratio: var(--ws2-map-aspect, 16 / 9);
  border-radius: var(--ws2-map-radius, 0); background: rgba(128, 128, 128, .12);
  border: 1px solid rgba(128, 128, 128, .28);
}
.ws2-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ws2-map[data-ws2-map-loaded] .ws2-map-facade { display: none; }
.ws2-map-facade {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  align-items: flex-start; gap: 12px; padding: clamp(18px, 3vw, 30px); color: inherit;
}
.ws2-map-address { margin: 0; font-size: 15px; }
.ws2-map-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ws2-map-action {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 9px 16px;
  border: 1px solid rgba(128, 128, 128, .42); border-radius: var(--ws2-social-radius, 999px);
  background: none; color: inherit; font: inherit; font-size: 14px; line-height: 1; cursor: pointer;
  transition: opacity .2s ease;
}
.ws2-map-action:hover { opacity: .72; }
.ws2-map-note { margin: 0; font-size: 12px; opacity: .72; max-width: 46ch; }

/* Página de privacidade gerada (tools/montar-paginas.py) -------------------------------
   Neutra de propósito: coluna de leitura, espaçamento e hierarquia. Fonte, cor e peso de
   título vêm da família, por herança — por isso ela pode ser global (R12). */
.ws2-legal { width: min(72ch, calc(100% - 40px)); margin: clamp(40px, 6vw, 96px) auto; line-height: 1.7; }
.ws2-legal h1 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.15; margin: 0 0 18px; }
.ws2-legal h2 { font-size: 1.2em; line-height: 1.3; margin: 2.2em 0 .5em; }
.ws2-legal p { margin: 0 0 1em; }
.ws2-legal-kicker { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; opacity: .7; margin-bottom: 10px !important; }
.ws2-legal-note { font-size: .92em; opacity: .75; }

/* Loja (v1.44) — só estrutura dos comportamentos novos ---------------------------------
   Trilho: a rolagem é a do navegador. Quantos itens cabem, o espaço entre eles e a forma das
   setas são da família (--ws2-rail-item define a largura do item no modo center). */
[data-ws2-rail-track] {
  display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; scrollbar-width: none; list-style: none; margin: 0; padding: 0;
  position: relative;
}
[data-ws2-rail-track]::-webkit-scrollbar { display: none; }
[data-ws2-rail-track] > * { flex: 0 0 auto; scroll-snap-align: start; }
[data-ws2-rail-mode="center"] [data-ws2-rail-track] { padding-inline: calc(50% - var(--ws2-rail-item, 240px) / 2); }
[data-ws2-rail-mode="center"] [data-ws2-rail-track] > * { scroll-snap-align: center; width: var(--ws2-rail-item, 240px); }
[data-ws2-rail] button:disabled { cursor: default; opacity: .35; }
[data-ws2-rail-track]:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
/* v1.45 — laço, arrasto e movimento próprio do trilho. Durante o arrasto e o movimento quadro a
   quadro o encaixe sai (o script assenta o item no fim); no laço a fila não tem ponta, então o
   recuo do modo center sai. */
[data-ws2-rail-track][data-ws2-rail-free] { scroll-snap-type: none; scroll-behavior: auto; }
[data-ws2-rail-looping] [data-ws2-rail-track] { padding-inline: 0; }
[data-ws2-rail-draggable]:not([data-ws2-rail-fits]) [data-ws2-rail-track] { cursor: grab; }
[data-ws2-rail-dragging] [data-ws2-rail-track] { cursor: grabbing; -webkit-user-select: none; user-select: none; }
[data-ws2-rail-dragging] [data-ws2-rail-track] > * { pointer-events: none; }

/* Diálogo e gaveta: o <dialog> nativo; a página atrás não rola enquanto ele está aberto. */
html.ws2-dialog-open { overflow: hidden; }
dialog[data-ws2-dialog] { max-width: none; max-height: none; }

/* Atributo hidden vence qualquer display da família: os comportamentos escondem e mostram por ele
   (painel de aba, estado vazio da sacola, campo do detalhe, mensagem de busca vazia). */
[hidden] { display: none !important; }

/* Sacola e favoritos: o número some quando é zero. */
[data-ws2-cart-count][data-ws2-cart-empty],
[data-ws2-wish-count][data-ws2-wish-empty] { display: none; }
[data-ws2-wish-only] [data-ws2-wish-item]:not([data-ws2-wished]) { display: none !important; }

/* Faixa que corre (v1.55): a volta exata vem do comportamento (--ws2-marquee-distance e -duration). */
[data-ws2-marquee] { overflow: hidden; }
[data-ws2-marquee-track] { display: flex; width: max-content; }
[data-ws2-marquee][data-ws2-marquee-running] [data-ws2-marquee-track] {
  animation: ws2-marquee var(--ws2-marquee-duration, 40s) linear infinite;
  will-change: transform;
}
[data-ws2-marquee][data-ws2-marquee-paused] [data-ws2-marquee-track] { animation-play-state: paused; }
@keyframes ws2-marquee { to { transform: translate3d(calc(-1 * var(--ws2-marquee-distance, 0px)), 0, 0); } }
/* movimento reduzido: linha que rola com o dedo, nada corre */
[data-ws2-marquee][data-ws2-marquee-static] { overflow-x: auto; scrollbar-width: thin; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-ws2-motion="full"]) [data-ws2-marquee-track] { animation: none !important; }
}
html[data-ws2-motion="reduced"] [data-ws2-marquee-track] { animation: none !important; }

/* Meta da sacola (v1.55): barra de progresso a partir de --ws2-goal-progress (0 a 1). */
[data-ws2-goal-bar] { display: block; height: 3px; background: color-mix(in srgb, currentColor 18%, transparent); position: relative; overflow: hidden; }
[data-ws2-goal-bar]::after { content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--ws2-goal-progress, 0)); background: currentColor; transition: transform .4s ease; }