/*
 * AmericaTT, tema proprio (ATT-Layout-Americatt). Mesma estrutura do tema do farma.fit; identidade propria:
 *  - cor: magenta da marca (D3) como acento UNICO; tinta quase preta e cinzas frios; verde e ambar SO como
 *    estado de envio (semantica, nao acento);
 *  - letras (D8): Archivo Narrow nos titulos (estreita, esportiva) e Figtree no texto;
 *  - cantos travados: cartao 10 px, botao e campo 8 px, pilula (filtro, chip) redonda.
 * Celular primeiro (70% do trafego, briefing de abril). ⛔ Sem quantidade de produtos (D4). Sem travessao.
 */

:root {
  /* A marca. O magenta puro (#ED036E) da 4,3:1 com branco: fica para logo, realces e areas grandes.
     Botao com texto branco usa --marca-botao (5,1:1) e texto magenta pequeno usa --marca-texto (6:1). */
  --marca:          #ed036e;
  --marca-botao:    #d6036a;
  --marca-forte:    #c40258;   /* hover, e texto magenta miudo sobre branco */
  --marca-texto:    #c40258;
  --marca-claro:    #fdebf3;
  --marca-linha:    #f7c4db;
  --tinta:          #16161d;
  --tinta-2:        #5b5e6b;   /* texto de apoio: 6,4:1 sobre branco */
  --tinta-3:        #262632;   /* superficies escuras (barra, rodape) */
  --tinta-linha:    #34343f;
  --papel:          #ffffff;
  --superficie:     #f4f4f7;
  --linha:          #e6e6ec;
  --contorno:       #d4d4dd;
  --zap:            #1fa855;
  --zap-texto:      #137a3b;
  --imediato:       #2f8a12;   /* Envio imediato: verde que da para ler (5,1:1) */
  --imediato-fundo: #eaf6e3;
  --padrao:         #93570a;   /* Envio padrao: ambar escuro (5,6:1) */
  --padrao-fundo:   #fff3dc;
  --esgotado:       #6b6e78;
  --sombra-hover:   0 1px 2px rgba(22, 22, 29, .05), 0 10px 24px rgba(22, 22, 29, .08);

  /* ⚠️ Nomes herdados do tema do farma.fit, apontando para as cores da AmericaTT: os componentes que vieram
     de la continuam funcionando sem reescrever cada regra. Codigo novo usa os nomes de cima. */
  --grafite:        var(--tinta);
  --grafite-2:      var(--tinta-3);
  --grafite-linha:  var(--tinta-linha);
  --dourado:        var(--marca-botao);
  --dourado-forte:  var(--marca-forte);
  --dourado-texto:  var(--marca-texto);
  --dourado-claro:  var(--marca-claro);
  --cartao:         var(--superficie);

  --t-titulo: "Archivo Narrow", "Arial Narrow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-texto:  "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --raio-controle: 8px;
  --raio-cartao:   10px;
  --raio-faixa:    14px;

  --anda:  cubic-bezier(.16, 1, .3, 1);
  --c-max: 1480px;
  --c-pad: 16px;
}
@media (min-width: 768px)  { :root { --c-pad: 24px; } }
@media (min-width: 1200px) { :root { --c-pad: 32px; } }

/* ── Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.trava { overflow: hidden; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--t-texto);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
.c { width: 100%; max-width: var(--c-max); margin-inline: auto; padding-inline: var(--c-pad); }
.ic { width: 20px; height: 20px; flex: none; }
:focus-visible { outline: 3px solid rgba(237, 3, 110, .55); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.pular { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--raio-controle); background: var(--grafite); color: #fff; font-weight: 700; text-decoration: none; }
.pular:focus { top: 12px; }

/* ── 1. Barra do topo: frete gratis a esquerda, ajuda (menu TOP-BAR) a direita ── */
.barra { background: var(--tinta); color: rgba(255, 255, 255, .88); font-size: 13px; }
.barra a { color: inherit; text-decoration: none; }
.barra-in { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 36px; }
.barra-frete { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.barra-frete .ic { width: 16px; height: 16px; color: #ff6aa9; }
/* Rastreamento e Fale conosco em botao magenta cheio: o dono pediu destaque (19/09) */
.barra-links { display: none; align-items: center; gap: 8px; }
.barra .barra-links a { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 14px; border-radius: 999px; background: var(--marca-botao); color: #fff; font-size: 13.5px; font-weight: 700; letter-spacing: .01em; transition: background-color .16s, transform .12s; }
.barra .barra-links a:hover { background: var(--marca-forte); }
.barra .barra-links a:active { transform: scale(.97); }
.barra-links .ic { width: 16px; height: 16px; }
@media (min-width: 900px) {
  .barra-in { justify-content: space-between; }
  .barra-links { display: flex; }
}

/* ── 2. Cabecalho ─────────────────────────────────────────────────────── */
.cab { position: sticky; top: 0; z-index: 30; background: var(--papel); border-bottom: 1px solid var(--linha); }
.admin-bar .cab { top: 46px; }
@media (min-width: 783px) { .admin-bar .cab { top: 32px; } }
@media (max-width: 600px) { .admin-bar .cab { top: 0; } }
.cab a { color: inherit; text-decoration: none; }
.cab-in { display: grid; grid-template-columns: 44px 1fr auto; grid-template-areas: "menu logo acoes" "busca busca busca"; align-items: center; gap: 10px 4px; padding-block: 10px; }
.cab .menu   { grid-area: menu; }
.cab .logo   { grid-area: logo; justify-self: center; }
.cab .cab-acoes { grid-area: acoes; justify-self: end; display: flex; align-items: center; gap: 2px; }
.cab .busca  { grid-area: busca; }
.logo > img { display: block; height: 30px; width: auto; }
/* A logo e o botao de voltar ao inicio: reage ao mouse e ao toque (mesma regra do farma.fit) */
.logo, .gaveta-logo, .logo-r-link { display: inline-flex; border-radius: 8px; transition: transform .16s ease-out; -webkit-tap-highlight-color: transparent; }
.logo > img, .gaveta-logo img, .logo-r-link img { transition: opacity .16s ease; }
.logo:active, .gaveta-logo:active, .logo-r-link:active { transform: scale(.97); }
.logo:focus-visible, .gaveta-logo:focus-visible, .logo-r-link:focus-visible { outline: 2px solid var(--marca); outline-offset: 4px; }
@media (hover: hover) { .logo:hover > img, .gaveta-logo:hover img, .logo-r-link:hover img { opacity: .82; } }
.ico-btn { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--raio-controle); background: transparent; color: var(--tinta); font: inherit; cursor: pointer; }
.ico-btn:hover { background: var(--superficie); }
.ico-btn .ic { width: 24px; height: 24px; }
.sacola { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; padding: 0; border-radius: var(--raio-controle); color: var(--tinta); font-size: 14px; font-weight: 700; transition: background-color .16s; }
.sacola:hover { background: var(--superficie); }
.sacola:active { transform: scale(.97); }
.sacola-txt { display: none; }
.sacola-ic { position: relative; display: grid; place-items: center; }
.sacola-ic .ic { width: 25px; height: 25px; }
.cont { position: absolute; top: -7px; right: -9px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--marca-botao); color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.cont[hidden] { display: none; }
.busca { position: relative; display: flex; align-items: center; gap: 10px; height: 46px; margin: 0; padding: 0 14px; border: 1.5px solid var(--contorno); border-radius: var(--raio-controle); background: var(--superficie); color: var(--tinta-2); transition: border-color .16s, box-shadow .16s, background-color .16s; }
.busca:focus-within { border-color: var(--marca); background: #fff; box-shadow: 0 0 0 3px rgba(237, 3, 110, .18); }
.busca > .ic { width: 20px; height: 20px; }
.busca input[type="search"] { flex: 1; min-width: 0; height: auto; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; font: inherit; font-size: 16px; color: var(--tinta); outline: none; }
.busca input::placeholder { color: #6e7180; }

/* Categorias: faixa propria logo abaixo. No celular rola de lado; no computador cada categoria abre as subcategorias */
.nav { border-top: 1px solid var(--linha); }
.nav-in { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.nav-in::-webkit-scrollbar { display: none; }
.nav-item { position: relative; flex: none; }
.nav-cat, .nav-imediato { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; color: var(--tinta); font-family: var(--t-titulo); font-size: 16px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.nav-cat .ic { display: none; width: 14px; height: 14px; color: var(--tinta-2); transition: transform .2s var(--anda); }
.nav-cat[aria-current="page"] { color: var(--marca-texto); box-shadow: inset 0 -3px 0 var(--marca); }
/* Envio imediato em botao verde cheio (dono, 19/09). `.cab a` (0,1,1) vencia `.nav-imediato` e o deixava preto:
   o seletor precisa do `.cab`. Verde mais escuro que --imediato para o branco passar de 4,5:1 (5,4:1) */
.nav-imediato { flex: none; margin-left: auto; }
.cab .nav-imediato { height: 34px; margin-block: 5px; padding: 0 16px; border-radius: 999px; background: #277a0f; color: #fff; transition: background-color .16s, transform .12s; }
.cab .nav-imediato:hover { background: #1f6509; }
.cab .nav-imediato:active { transform: scale(.97); }
/* No celular a faixa rola de lado: o botao vem PRIMEIRO, senao so aparece para quem arrasta ate o fim */
@media (max-width: 899px) { .cab .nav-imediato { order: -1; margin-left: 0; margin-right: 4px; } }
.nav-imediato .ic { width: 17px; height: 17px; }
.nav-sub { display: none; }
@media (min-width: 900px) {
  .cab-in { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo busca acoes"; gap: 32px; padding-block: 14px; }
  .cab .menu { display: none; }
  .cab .logo { justify-self: start; }
  .logo > img { height: 42px; }
  .busca { height: 50px; max-width: 760px; width: 100%; justify-self: center; }
  .cab .cab-acoes { gap: 6px; }
  .sacola-txt { display: inline; }
  .sacola { border: 1.5px solid var(--tinta); border-radius: 999px; padding: 0 16px 0 14px; height: 46px; }
  .sacola:hover { background: var(--tinta); color: #fff; }
  .nav-in { overflow: visible; }
  .nav-cat .ic { display: block; }
  .nav-cat:hover { color: var(--marca-texto); }
  /* Submenu: abre com o mouse e com o Tab (focus-within), cai do item */
  .nav-sub { position: absolute; top: 100%; left: 0; z-index: 5; display: grid; min-width: 230px; padding: 8px; border: 1px solid var(--linha); border-radius: var(--raio-cartao); background: #fff; box-shadow: 0 18px 40px rgba(22, 22, 29, .14); opacity: 0; visibility: hidden; transform: translateY(-4px); transform-origin: top left; transition: opacity .16s ease-out, transform .16s ease-out, visibility 0s linear .16s; }
  .nav-item:hover .nav-sub, .nav-item:focus-within .nav-sub { opacity: 1; visibility: visible; transform: none; transition: opacity .16s ease-out, transform .16s ease-out, visibility 0s; }
  .nav-item:hover .nav-cat .ic, .nav-item:focus-within .nav-cat .ic { transform: rotate(180deg); }
  .nav-sub a { display: flex; align-items: center; min-height: 38px; padding: 0 12px; border-radius: var(--raio-controle); color: var(--tinta); font-size: 14.5px; font-weight: 600; }
  .nav-sub a:hover { background: var(--marca-claro); color: var(--marca-texto); }
  .nav-sub .nav-sub-todas { justify-content: space-between; gap: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--linha); border-radius: var(--raio-controle) var(--raio-controle) 0 0; color: var(--marca-texto); font-weight: 800; }
  .nav-sub .nav-sub-todas .ic { width: 16px; height: 16px; }
}
@media (min-width: 1200px) { .nav-cat, .nav-imediato { padding: 0 16px; font-size: 16.5px; } }

/* ── Sugestoes enquanto digita (dono, 18/09). Painel preso embaixo da caixa; nome inteiro, nunca cortado ── */
.busca { position: relative; }
.sugestoes { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 5; max-height: min(600px, calc(100dvh - 170px)); overflow-y: auto; overscroll-behavior: contain; padding: 8px; border: 1px solid var(--contorno); border-radius: 16px; background: #fff; box-shadow: 0 18px 48px rgba(13, 19, 27, .16), 0 2px 6px rgba(13, 19, 27, .06); color: var(--tinta); text-align: left; transform-origin: top center; animation: sug-abre .16s var(--anda) both; transition: opacity .12s; }
.sugestoes[hidden] { display: none; }
.busca.buscando .sugestoes { opacity: .65; }
@keyframes sug-abre { from { opacity: 0; transform: translateY(-4px) scale(.985); } }
.sugestoes mark { padding: 0 1px; border-radius: 3px; background: rgba(237, 3, 110, .3); color: inherit; font-weight: 800; }
.sug-termos { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 4px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--linha); }
.cab .sug-termo { display: inline-flex; align-items: baseline; gap: 7px; padding: 7px 12px; border-radius: 999px; background: var(--cartao); color: var(--tinta); font-size: 14px; font-weight: 700; }
.sug-tipo { color: var(--tinta-2); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.sug-produtos { display: grid; gap: 2px; }
.sug-linha { display: flex; align-items: center; gap: 6px; }
.sug-linha > .sug-produto { flex: 1; min-width: 0; }
/* Esgotado nas sugestoes (opcao B do dono, 18/09): apagado, com etiqueta e o atalho redondo do WhatsApp */
.sug-linha.esgotado .sug-foto img { opacity: .5; filter: grayscale(.5); }
.sug-linha.esgotado .sug-nome, .sug-linha.esgotado .sug-preco b { color: var(--tinta-2); }
.sug-esgotado { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: var(--esgotado); color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; vertical-align: 1px; }
.cab .sug-zap-mini { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-right: 4px; border: 1px solid rgba(31, 168, 85, .35); border-radius: 50%; background: #fff; color: var(--zap-texto); transition: background-color .14s, color .14s; }
.cab .sug-zap-mini .ic { width: 19px; height: 19px; }
.cab .sug-zap-mini.ativo { border-color: var(--zap); background: var(--zap); color: #fff; }
@media (hover: hover) and (pointer: fine) { .cab .sug-zap-mini:hover { border-color: var(--zap); background: var(--zap); color: #fff; } }
.cab .sug-produto { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; color: var(--tinta); }
.sug-foto { flex: none; width: 56px; height: 56px; overflow: hidden; border-radius: 10px; background: var(--cartao); }
.sug-foto img { display: block; width: 100%; height: 100%; padding: 4px; object-fit: contain; mix-blend-mode: multiply; }
.sug-corpo { display: grid; gap: 2px; min-width: 0; }
.sug-cat { color: var(--dourado-texto); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sug-nome { font-size: 14.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.sug-preco { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; color: var(--tinta-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.sug-preco b { color: var(--tinta); font-family: var(--t-titulo); font-size: 15px; font-weight: 700; }
.cab .sug-todos { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; padding: 12px; border-top: 1px solid var(--linha); border-radius: 0 0 10px 10px; color: var(--grafite); font-size: 14px; font-weight: 800; }
.sug-todos .ic { width: 17px; height: 17px; }
.sug-vazio { display: grid; justify-items: center; gap: 10px; padding: 16px 12px; color: var(--tinta-2); text-align: center; }
.sug-vazio p { margin: 0; }
.cab .sug-zap { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 999px; background: var(--zap); color: #fff; font-weight: 800; }
.sug-zap .ic { width: 18px; height: 18px; }
.cab .sug-produto.ativo, .cab .sug-todos.ativo { background: var(--cartao); }
.cab .sug-termo.ativo { background: var(--dourado); color: #fff; }
.cab .sug-zap.ativo { box-shadow: 0 0 0 3px rgba(31, 168, 85, .3); }
@media (hover: hover) and (pointer: fine) {
  .cab .sug-produto:hover, .cab .sug-todos:hover { background: var(--cartao); }
  .cab .sug-termo:hover { background: var(--dourado); color: #fff; }
}
/* ── Gaveta do menu (celular) ─────────────────────────────────────────── */
/* So o estado ABERTO define display: assim o [hidden] nunca perde para o CSS. */
.gaveta:not([hidden]) { position: fixed; inset: 0; z-index: 80; display: block; }
.gaveta-fundo { position: absolute; inset: 0; background: rgba(13, 19, 27, .55); }
.gaveta-painel { position: absolute; inset: 0 auto 0 0; width: min(86vw, 360px); display: flex; flex-direction: column; gap: 18px; padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); overflow-y: auto; background: var(--papel); box-shadow: 12px 0 40px rgba(13, 19, 27, .25); animation: gaveta-entra .28s var(--anda); }
@keyframes gaveta-entra { from { transform: translateX(-24px); opacity: 0; } }
.gaveta-topo { display: flex; align-items: center; justify-content: space-between; }
.gaveta-topo img { height: 36px; width: auto; }
.gaveta-menu { display: grid; }
.gaveta-menu a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; border-bottom: 1px solid var(--linha); color: var(--tinta); font-family: var(--t-titulo); font-size: 18px; font-weight: 600; text-decoration: none; }
.gaveta-menu a .ic { width: 18px; height: 18px; color: var(--dourado-texto); }
.gaveta-contato { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; }
.g-zap, .g-insta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 14px; border-radius: var(--raio-controle); font-weight: 700; font-size: 14.5px; text-decoration: none; }
.g-zap { background: var(--zap); color: #fff; }
.g-insta { border: 1.5px solid var(--contorno); color: var(--tinta); }
.g-zap .ic, .g-insta .ic { width: 18px; height: 18px; }
@media (min-width: 900px) { .gaveta { display: none !important; } }

/* ── Miolo: paginas de texto ──────────────────────────────────────────── */
.miolo { padding-block: 28px 8px; min-height: 40vh; }
.titulo-pagina { margin: 0 0 18px; font-family: var(--t-titulo); font-size: clamp(26px, 5vw, 38px); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
.texto { max-width: 760px; }
.texto a { color: var(--dourado-texto); text-decoration: underline; text-underline-offset: 3px; }
.texto h2, .texto h3 { font-family: var(--t-titulo); font-weight: 600; line-height: 1.25; }
.lista-posts { padding-left: 18px; }

/* O miolo da loja ainda e o padrao do WooCommerce; so os titulos ganham a letra nova. */
.miolo-loja .woocommerce-products-header__title,
.miolo-loja .product_title { font-family: var(--t-titulo); font-weight: 600; letter-spacing: -.01em; }
.miolo-loja .woocommerce-breadcrumb { font-size: 13px; color: var(--tinta-2); }

/* ════════ Fase 2a (18/09): LOJA ONLINE no modelo da maquete (D20) ════════ */

.sr, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Gaveta (celular): categorias abrem as subcategorias ali mesmo (details nativo) */
.gaveta-imediato { color: var(--imediato) !important; gap: 8px; }
.gaveta-imediato > .ic:first-child { width: 20px !important; height: 20px !important; color: var(--imediato) !important; }
.gaveta-grupo { border-bottom: 1px solid var(--linha); }
.gaveta-grupo summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; color: var(--tinta); font-family: var(--t-titulo); font-size: 19px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; list-style: none; cursor: pointer; }
.gaveta-grupo summary::-webkit-details-marker { display: none; }
.gaveta-grupo summary .ic { width: 18px; height: 18px; color: var(--marca-texto); transition: transform .2s var(--anda); }
.gaveta-grupo[open] summary .ic { transform: rotate(180deg); }
.gaveta-grupo a { display: flex; align-items: center; min-height: 42px; padding-left: 12px; border-left: 2px solid var(--linha); color: var(--tinta); font-size: 15.5px; font-weight: 600; text-decoration: none; }
.gaveta-grupo a:first-of-type { color: var(--marca-texto); font-weight: 800; }
.gaveta-grupo[open] { padding-bottom: 10px; }
.gaveta-menu > a { font-family: var(--t-titulo); font-size: 19px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.gaveta-ajuda { display: grid; gap: 2px; }
.gaveta-ajuda a { display: flex; align-items: center; gap: 10px; min-height: 42px; color: var(--tinta-2); font-size: 15px; font-weight: 600; text-decoration: none; }
.gaveta-ajuda .ic { width: 20px; height: 20px; color: var(--marca-texto); }
.gaveta-contato { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: auto; text-align: center; }
.gaveta-contato small { color: var(--tinta-2); font-size: 12.5px; }

/* ── Botoes ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: var(--raio-controle); border: 1.5px solid transparent; font: inherit; font-weight: 800; font-size: 14px; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color .16s, border-color .16s, transform .1s, color .16s; }
.btn:active { transform: scale(.98); }
.btn .ic { width: 18px; height: 18px; }
.btn-marca { background: var(--marca-botao); color: #fff; }
.btn-marca:hover { background: var(--marca-forte); color: #fff; }
.btn-zap { background: #fff; border-color: var(--contorno); color: var(--tinta); font-weight: 700; }
.btn-zap .ic { color: var(--zap); }
.btn-zap:hover { border-color: var(--zap); }
.btn-contorno { height: 46px; padding: 0 26px; border-radius: 999px; background: #fff; border-color: var(--tinta); color: var(--tinta); }
.btn-contorno:hover { background: var(--tinta); color: #fff; }

/* ── Grade e cartao ── */
.grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.grade > * { min-width: 0; }
@media (min-width: 768px)  { .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1100px) { .grade { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }

/* Cartao: borda fina em vez de fundo cinza (a foto da loja ja vem em fundo branco); no mouse a borda vira magenta */
.card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 8px 8px 10px; border: 1px solid var(--linha); border-radius: var(--raio-cartao); background: #fff; transition: border-color .2s, box-shadow .24s var(--anda), transform .24s var(--anda); }
@media (hover: hover) and (pointer: fine) {
  .card:hover { border-color: var(--marca-linha); box-shadow: var(--sombra-hover); transform: translateY(-2px); }
  .card:hover .card-foto img { transform: scale(1.04); }
}
.card-foto { position: relative; display: block; aspect-ratio: 1; border-radius: calc(var(--raio-cartao) - 4px); background: #fff; overflow: hidden; }
.card-foto img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 6px; transition: transform .42s var(--anda); }
.card.esgotado .card-foto img { opacity: .5; filter: grayscale(.4); }
.card-corpo { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 8px 4px 0; }
.card-marca { color: var(--marca-texto); font-family: var(--t-titulo); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.card-nome { margin: 2px 0 0; font-family: var(--t-texto); font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.card-nome a { display: block; min-height: 2.6em; color: inherit; text-decoration: none; overflow-wrap: anywhere; } /* nome INTEIRO, nunca cortado */
.card-preco { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin-top: 8px; color: var(--tinta); font-family: var(--t-titulo); font-weight: 700; font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.card-preco del { order: -1; color: var(--tinta-2); font-family: var(--t-texto); font-size: 13px; font-weight: 500; }
.card-preco ins { text-decoration: none; }
.card-extra:empty { display: none; }
.card-extra { margin-top: 4px; }
.card-acoes { display: grid; margin-top: auto; padding-top: 10px; }
.card-acoes .btn { width: 100%; min-width: 0; height: 40px; }
.card-acoes .btn.added { display: none; } /* depois de adicionar, o Woo poe "Ver carrinho" no lugar */
.card-acoes .added_to_cart { display: flex; align-items: center; justify-content: center; height: 40px; border-radius: var(--raio-controle); background: var(--imediato-fundo); color: var(--imediato); font-size: 14px; font-weight: 800; text-decoration: none; }
@media (min-width: 1100px) {
  .card { padding: 10px 10px 12px; }
  .card-nome { font-size: 15px; }
  .card-preco { font-size: 24px; }
}

/* ── Selo de envio (inc/envio.php): o diferencial da loja, em todo cartao ── */
.envio { display: inline-flex; align-items: center; gap: 5px; width: fit-content; margin-top: 8px; padding: 3px 9px 3px 7px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1.4; }
.envio .ic { width: 14px; height: 14px; }
.envio-imediato { background: var(--imediato-fundo); color: var(--imediato); }
.envio-padrao { background: var(--padrao-fundo); color: var(--padrao); }
.envio-esgotado { background: var(--superficie); color: var(--esgotado); }

/* Filtro de envio na lateral e na folha */
.lista-envio { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.envio-item { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 10px; border: 1.5px solid var(--linha); border-radius: var(--raio-controle); color: var(--tinta); text-decoration: none; transition: border-color .16s, background-color .16s; }
.envio-item > .ic { width: 20px; height: 20px; }
.envio-item-imediato > .ic { color: var(--imediato); }
.envio-item-padrao > .ic { color: var(--padrao); }
.envio-item .nome { display: grid; line-height: 1.2; }
.envio-item .nome b { font-size: 14.5px; }
.envio-item .nome small { color: var(--tinta-2); font-size: 12.5px; }
.envio-item .caixa { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid var(--contorno); border-radius: 5px; background: #fff; }
.envio-item .caixa .ic { width: 13px; height: 13px; }
.envio-item:hover { border-color: var(--contorno); }
.envio-item.marcada { border-color: var(--imediato); background: var(--imediato-fundo); }
.envio-item-padrao.marcada { border-color: var(--padrao); background: var(--padrao-fundo); }
.envio-item.marcada .caixa { border-color: currentColor; background: currentColor; color: #fff; }
.envio-item-imediato.marcada .caixa { background: var(--imediato); border-color: var(--imediato); }
.envio-item-padrao.marcada .caixa { background: var(--padrao); border-color: var(--padrao); }
.lista-sub { display: grid; gap: 1px; margin: 2px 0 6px 12px; padding: 0 0 0 10px; border-left: 2px solid var(--linha); list-style: none; }
.lista-sub a { min-height: 32px; font-size: 14px; }
.chip-envio { border-color: #c6e6b7 !important; background: var(--imediato-fundo) !important; color: var(--imediato) !important; }

/* ── Cabeca da loja ── */
.migalha { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--tinta-2); font-size: 13.5px; }
.migalha a { color: inherit; text-decoration: none; }
.migalha a:hover { color: var(--tinta); }
.migalha .ic { width: 14px; height: 14px; }
.migalha b { color: var(--tinta); font-weight: 700; }
.cat-cab { margin-top: 10px; }
.cat-cab h1 { margin: 0; font-family: var(--t-titulo); font-size: 32px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; text-wrap: balance; }
.cat-cab p { margin: 6px 0 0; color: var(--tinta-2); }
.so-cel-flex { display: flex; }
.pilulas { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 18px calc(var(--c-pad) * -1) 0; padding: 0 var(--c-pad) 4px; }
.pilulas::-webkit-scrollbar { display: none; }
.pilulas a { flex: none; height: 38px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--contorno); color: var(--tinta); font-size: 14px; font-weight: 700; text-decoration: none; transition: border-color .16s, background .16s; }
.pilulas a:hover { border-color: var(--grafite); }
.pilulas a.ativa { background: var(--grafite); border-color: var(--grafite); color: #fff; }

/* ── Barra de ferramentas e chips ── */
.loja { margin-top: 6px; }
.lateral { display: none; }
.ferramentas { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 18px 0 14px; padding-top: 14px; border-top: 1px solid var(--linha); }
.ferramentas .qtd { order: 3; flex-basis: 100%; color: var(--tinta-2); font-size: 14px; }
.ferramentas .qtd b { color: var(--tinta); }
.btn-filtros { height: 40px; background: #fff; border-color: var(--contorno); color: var(--tinta); font-weight: 700; }
.btn-filtros:hover { border-color: var(--grafite); }
.n-filtros { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--dourado); color: #fff; font-size: 11.5px; font-weight: 800; }
.ordem-form { margin: 0; }
.ordem { height: 40px; padding: 0 12px; border: 1px solid var(--contorno); border-radius: var(--raio-controle); background: #fff; font: inherit; font-size: 14px; font-weight: 600; color: var(--tinta); }
.chips-ativos { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; font-size: 14px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 12px; border-radius: 999px; background: var(--dourado-claro); border: 1px solid var(--marca-linha); color: var(--tinta); font-weight: 700; text-decoration: none; }
.chip:hover { border-color: var(--dourado); }
.chip .ic { width: 14px; height: 14px; }
.chips-ativos .limpar { color: var(--dourado-texto); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ── Filtros (lateral e folha) ── */
.filtro-bloco { padding-block: 16px; border-top: 1px solid var(--linha); }
.filtro-bloco:first-child { border-top: 0; padding-top: 0; }
.filtro-tit { margin: 0 0 10px; font-family: var(--t-titulo); font-size: 16px; font-weight: 600; }
.lista-cat, .lista-marca { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lista-cat .extra, .lista-marca .extra { display: none; }
.lista-cat.aberta .extra { display: list-item; }
.lista-marca.buscando .extra:not([hidden]) { display: list-item; }
.lista-marca li[hidden] { display: none !important; }
.lista-cat a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: 8px; color: var(--tinta); font-size: 14.5px; text-decoration: none; transition: background .16s; }
.lista-cat a:hover { background: var(--cartao); }
.lista-cat a.ativa { background: var(--dourado-claro); font-weight: 800; }
.lista-cat em, .marca-item em { font-style: normal; color: var(--tinta-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.ver-mais { margin-top: 6px; padding: 6px 10px; border: 0; background: transparent; color: var(--dourado-texto); font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; }
.busca-marca { display: flex; align-items: center; gap: 8px; height: 40px; margin-bottom: 8px; padding: 0 10px; border: 1px solid var(--contorno); border-radius: var(--raio-controle); color: var(--tinta-2); }
.busca-marca .ic { width: 17px; height: 17px; }
.busca-marca input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 16px; outline: none; color: var(--tinta); }
.marca-item { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 6px; border-radius: 8px; color: var(--tinta); font-size: 14.5px; text-decoration: none; }
.marca-item:hover { background: var(--cartao); }
.marca-item .caixa { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid var(--contorno); border-radius: 5px; background: #fff; }
.marca-item.marcada .caixa { border-color: var(--dourado); background: var(--dourado); color: #fff; }
.marca-item .caixa .ic { width: 13px; height: 13px; stroke-width: 3; }
.marca-item .nome { flex: 1; min-width: 0; }
.marca-item.marcada .nome { font-weight: 700; }
.marca-vazia { margin: 6px 0 0; color: var(--tinta-2); font-size: 14px; }
.faixa-preco { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.faixa-preco label { display: grid; gap: 4px; color: var(--tinta-2); font-size: 13px; font-weight: 700; }
.faixa-preco input { width: 100%; height: 42px; padding: 0 10px; border: 1px solid var(--contorno); border-radius: var(--raio-controle); font: inherit; font-size: 16px; color: var(--tinta); }
.faixa-preco input:focus, .busca-marca:focus-within { outline: none; border-color: var(--dourado); box-shadow: 0 0 0 3px rgba(237, 3, 110, .25); }
.btn-aplicar { grid-column: 1 / -1; background: var(--grafite); color: #fff; }
.btn-aplicar:hover { background: var(--grafite-2); }

/* ── Fim da lista ── */
.mais { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 28px; }
.mostrando { margin: 0; color: var(--tinta-2); font-size: 14px; }
.mostrando b { color: var(--tinta); font-variant-numeric: tabular-nums; }
.btn-contorno[aria-busy="true"] { opacity: .6; pointer-events: none; }
.voltar-inicio { color: var(--dourado-texto); font-size: 14px; font-weight: 700; }
.vazio { display: grid; justify-items: start; gap: 8px; padding: 28px; border-radius: var(--raio-cartao); background: var(--cartao); }
.vazio strong { font-family: var(--t-titulo); font-size: 20px; }
.vazio span { color: var(--tinta-2); }
.descricao-cat { margin-top: 48px; color: var(--tinta-2); }

@media (min-width: 1024px) {
  .so-cel-flex { display: none; }
  .loja { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 36px; margin-top: 22px; }
  .lateral { display: block; position: sticky; top: 150px; align-self: start; max-height: calc(100vh - 170px); overflow-y: auto; padding-right: 6px; }
  .btn-filtros { display: none; }
  .ferramentas { margin-top: 0; padding-top: 0; border-top: 0; flex-wrap: nowrap; }
  .ferramentas .qtd { order: 0; flex-basis: auto; }
  .loja-grade .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1400px) { .loja-grade .grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── Loja: os produtos ENTRAM em cascata e a troca de categoria mostra que está carregando (dono, 18/09) ──
   Só a grade da loja (categoria, marca, busca); a esteira da home e os relacionados não.
   `backwards`, NUNCA `both`: `both` deixaria o `transform` final preso no cartão e mataria o sobe do :hover.
   A cascata para no 12º (3 fileiras de 4): o resto entra junto, senão o fim da página demora a aparecer.
   Sem movimento pedido pelo sistema, a regra global de reduced-motion desliga tudo e os cartões já nascem no lugar. */
@keyframes card-entra { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.loja-grade .grade > * { --i: 12; animation: card-entra .62s var(--anda) backwards; animation-delay: calc(var(--i) * 48ms); } /* dono, 18/09: "um pouquinho mais lento" (era .44s e 30ms) */
.loja-grade .grade > :nth-child(1) { --i: 0; }  .loja-grade .grade > :nth-child(2) { --i: 1; }
.loja-grade .grade > :nth-child(3) { --i: 2; }  .loja-grade .grade > :nth-child(4) { --i: 3; }
.loja-grade .grade > :nth-child(5) { --i: 4; }  .loja-grade .grade > :nth-child(6) { --i: 5; }
.loja-grade .grade > :nth-child(7) { --i: 6; }  .loja-grade .grade > :nth-child(8) { --i: 7; }
.loja-grade .grade > :nth-child(9) { --i: 8; }  .loja-grade .grade > :nth-child(10) { --i: 9; }
.loja-grade .grade > :nth-child(11) { --i: 10; } .loja-grade .grade > :nth-child(12) { --i: 11; }

/* Clicou noutra categoria, marca, ordem ou preço: os cartões de agora apagam e um brilho passa por eles
   até a página nova chegar. Resposta NA HORA do clique, mesmo com o servidor demorando. */
@keyframes carrega-brilho { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.loja-grade .grade > * { transition: opacity .18s ease, transform .24s var(--anda), box-shadow .24s var(--anda); } /* repete as do .card: esta regra pesa mais e as apagaria */
.loja-grade.carregando .grade > * { opacity: .45; pointer-events: none; }
.loja-grade.carregando .grade > *::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .85) 50%, rgba(255, 255, 255, 0) 70%); background-size: 250% 100%; animation: carrega-brilho 1.1s linear infinite; pointer-events: none; }
.loja-grade.carregando .grade > .bfb-wrapper { position: relative; }
.loja-grade.carregando .ferramentas, .loja-grade.carregando .chips-ativos { opacity: .6; transition: opacity .18s ease; }

/* ── Folha de filtros do celular (so o estado ABERTO define display: o [hidden] nunca perde) ── */
.folha-fundo:not([hidden]) { position: fixed; inset: 0; z-index: 75; display: block; background: rgba(13, 19, 27, .45); backdrop-filter: blur(3px); }
.folha:not([hidden]) { position: fixed; left: 0; right: 0; bottom: 0; z-index: 76; display: flex; flex-direction: column; max-height: 86vh; border-radius: 20px 20px 0 0; background: #fff; box-shadow: 0 -10px 30px rgba(0, 0, 0, .2); animation: folha-sobe .24s var(--anda); }
@keyframes folha-sobe { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.folha-cab { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 10px 18px; border-bottom: 1px solid var(--linha); }
.folha-cab strong { font-family: var(--t-titulo); font-size: 18px; }
.folha-corpo { overflow-y: auto; padding: 16px 18px; }
.folha-pe { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linha); }
.folha-pe .btn { height: 48px; }
@media (min-width: 1024px) { .folha, .folha-fundo { display: none !important; } }
/* ── Secoes de produto da vitrine ── */
.secao { margin-top: 40px; }
.secao + .banner { margin-top: 48px; }
.banner + .secao { margin-top: 28px; }
.secao-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.secao-cab > div:first-child { min-width: 0; }
.secao-acoes { flex: none; }
.secao-cab p { margin: 6px 0 0; color: var(--tinta-2); font-size: 15px; }
.ver-tudo { flex: none; display: inline-flex; align-items: center; gap: 4px; color: var(--dourado-texto); font-weight: 800; font-size: 15px; text-decoration: none; transition: gap .16s; }
.ver-tudo:hover { gap: 8px; }
.ver-tudo .ic { width: 18px; height: 18px; }
.secao-acoes { display: flex; align-items: center; gap: 14px; }
.setas { display: none; gap: 6px; }
.seta { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--contorno); border-radius: 999px; background: #fff; color: var(--tinta); cursor: pointer; transition: border-color .16s, background .16s, transform .16s var(--anda); }
.seta:hover { border-color: var(--grafite); }
.seta:active { transform: scale(.94); }
.seta .ic { width: 18px; height: 18px; }
/* Carrossel: rola de lado, encaixa cartao a cartao. O JS faz andar sozinho (pausa no mouse, no toque e com a aba escondida). */
.fileira { --vis: 2.15; --gap: 10px; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - var(--gap) * (var(--vis) - 1)) / var(--vis)); gap: var(--gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--c-pad) * -1); padding: 2px var(--c-pad) 6px; scroll-padding-inline: var(--c-pad); }
.fileira::-webkit-scrollbar { display: none; }
.fileira > * { min-width: 0; scroll-snap-align: start; }
/* Esteira (data-continuo), dono 18/09: parada; anda so com o mouse em cima da secao e arrasta com o mouse.
   O movimento e do tema.js (Web Animations). No celular a fileira e a rolagem nativa, com o dedo */
.fileira.rolando { display: block; overflow: hidden; scroll-snap-type: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.fileira.rolando.arrastando { cursor: grabbing; }
.fileira.rolando img { -webkit-user-drag: none; }
.fileira-pista { display: grid; grid-auto-flow: column; grid-auto-columns: var(--col); gap: var(--gap); width: max-content; } /* SEM will-change: ele prende a pista numa camada que desenha mole parada (tema.js, assenta) */
.fileira-pista > * { min-width: 0; }
.fileiras { display: grid; gap: 12px; }
@media (min-width: 1100px) { .fileiras { gap: 16px; } }
@media (min-width: 768px) {
  .secao { margin-top: 56px; }
  .secao + .banner, .secao + .zap { margin-top: 56px; }
  .banner + .secao { margin-top: 32px; }
  .setas { display: inline-flex; }
  .fileira { --vis: 3.3; --gap: 14px; }
}
/* Duas fileiras numa trilha so: andam juntas (inc/vitrine.php, 'duas') */
/* Secao com duas fileiras: duas pistas separadas, uma embaixo da outra (cada uma rola sozinha com o dedo) */
.fileira + .fileira { margin-top: calc(var(--gap) - 6px); }
/* Do computador pequeno para cima: pagina com cartoes INTEIROS, sem cartao cortado na beirada (dono, 18/09) */
@media (min-width: 900px) {
  .fileira { --vis: 4; margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
}
@media (min-width: 1100px) {
  .fileira { --vis: 5; --gap: 16px; margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
  /* 5 por fileira: cartao um pouco menor (dono: "pra ficar um pouco menor as imagens") */
  .fileira .card { padding: 8px 8px 10px; }
  .fileira .card-nome { font-size: 14.5px; }
  .fileira .card-preco { font-size: 20px; }
  .fileira .card-acoes { grid-template-columns: minmax(0, 1fr); } /* um botao so (no farma.fit eram dois) */
  .fileira .card-acoes .btn { height: 38px; padding: 0 10px; font-size: 13px; }
  /* Mais baixo, para o banner de baixo ja aparecer (dono: "dar pra ver o banner de baixo quase") */
  .fileira .card-foto { aspect-ratio: 4 / 3; }
  .fileira .card-foto img { padding: 6px; }
  .fileira .card-corpo { padding-top: 8px; }
  .fileira .card-nome { min-height: 0; }
  .fileira .card-nome a { min-height: 2.6em; }
  .fileira .card-preco { margin-top: 6px; }
  .fileira .card-acoes { padding-top: 8px; }
  .fileira .card-acoes .btn { height: 34px; }
}
/* ════════ Home (vitrine) da AmericaTT ════════ */

.miolo-home { padding-top: 0; }
.secao-tit, .secao-cab h2 { margin: 0; font-family: var(--t-titulo); font-size: 30px; font-weight: 700; line-height: 1.02; letter-spacing: -.005em; text-wrap: balance; }
@media (min-width: 768px) { .secao-tit, .secao-cab h2 { font-size: 38px; } }

/* ── Banners (arte do dono + texto de verdade por cima). Mesma mecanica do farma.fit ── */
.banner { position: relative; margin-top: 16px; overflow: hidden; border-radius: var(--raio-faixa); background: var(--banner-fundo, var(--tinta)); color: #fff; container-type: inline-size; }
.banner-2 { --banner-fundo: #0c0b10; }
.banner-3 { --banner-fundo: #0c0b10; }
.banner-link { position: absolute; inset: 0; z-index: 1; }
.banner-arte { display: block; }
.banner-arte img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.banner-2 .banner-arte img { object-position: 64% 50%; }
.banner-texto { position: relative; z-index: 2; padding: 18px 20px 22px; pointer-events: none; }
.banner-texto a { pointer-events: auto; }
.banner-tit { margin: 0; font-family: var(--t-titulo); font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -.01em; text-wrap: balance; }
.banner-tit .realce { background-image: linear-gradient(100deg, #ff5fa6 0%, #ff2d8a 40%, #ff8cc0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.banner-apoio { max-width: 52ch; margin: 10px 0 0; color: rgba(255, 255, 255, .84); font-size: 15px; line-height: 1.45; }
.banner-botao { height: 48px; margin-top: 16px; padding: 0 20px; font-size: 15.5px; box-shadow: 0 10px 26px rgba(237, 3, 110, .32); }

/* Banner 1 sem arte (D5: o institucional ainda vai ser feito): fundo escuro com luz magenta, so texto */
.banner-so-texto { background: radial-gradient(90% 140% at 100% 0%, rgba(237, 3, 110, .42) 0%, rgba(237, 3, 110, 0) 55%), radial-gradient(60% 90% at 0% 100%, rgba(237, 3, 110, .18) 0%, rgba(237, 3, 110, 0) 60%), var(--tinta); }
.banner-so-texto .banner-texto { padding: 34px 22px 32px; }
.banner-so-texto .banner-tit { font-size: 42px; }

/* ── Banner 1 de PONTA A PONTA (dono, 18/09: "faca o banner ser full width", depois "somente o primeiro"). Fica
   fora da .c no front-page.php (as regras ".miolo-home > .banner"); os outros continuam dentro da coluna.
   A arte cresce com a tela ate chegar a 620 px de altura (--arte-max, calculado da arte no PHP); dali em diante
   ela fica presa do lado dos produtos e o outro lado continua no fundo da propria arte, onde mora o texto.
   O texto alinha com a coluna do site (a mesma beirada dos produtos), nao com a beirada da tela. ── */
.miolo-home > .banner { margin-top: 48px; border-radius: 0; }
.miolo-home > .banner:first-child { margin-top: 0; }
.miolo-home > .banner + .c > .secao:first-child { margin-top: 28px; }
.banner-texto { padding-inline: var(--c-pad); }
/* Banner 1 (arte de 18/09): atletas e produtos na esquerda, azul-marinho na direita. Fundo = a cor da beirada
   direita da arte (medida: #0e2036 no alto, #0a1728 no meio, #142031 no chao), para a emenda nao aparecer */
.banner-1 { --banner-fundo: linear-gradient(180deg, #0e2036 0%, #0a1728 55%, #142031 100%); }
.banner-1 .banner-arte img { object-position: 0% 50%; }
/* Arte de celular do dono (1080 x 1350, por enquanto so a do DHS, 18/09): inteira, sem o corte 16:9. O texto vem
   embaixo, no fundo escuro (o alto da arte e escuro, mas estreito demais para titulo, apoio e botao) */
@media (max-width: 767px) {
  .tem-movel .banner-arte img { aspect-ratio: var(--arte-prop-movel, 1080 / 1350); object-position: 50% 50% !important; }
  /* Com arte de celular, o texto fica POR CIMA da imagem, no teto escuro que cada arte tem em cima (banner 1 montado a
     partir da arte de computador; DHS com o teto estendido, 18/09). A banda escura atras do texto sai */
  .tem-movel .banner-texto { position: absolute; inset: 0 0 auto 0; padding: 22px var(--c-pad) 0; background: none; }
  .tem-movel .banner-tit { font-size: 31px; }
  .tem-movel .banner-apoio { max-width: 36ch; margin-top: 8px; font-size: 14px; line-height: 1.4; }
  .tem-movel .banner-botao { height: 44px; margin-top: 14px; }
  .banner-1.tem-movel { background: #080e1a; }
  .banner-2.tem-movel { background: #0a0a0e; }
  .c .tem-movel .banner-texto { padding-inline: 20px; }
}

@media (min-width: 900px) {
  .miolo-home > .banner { margin-top: 64px; }
  .miolo-home > .banner:first-child { margin-top: 0; }
  .miolo-home > .banner + .c > .secao:first-child { margin-top: 36px; }
  .banner { --beirada: 5.4cqw; }
  .miolo-home > .banner { --beirada: max(var(--c-pad), calc((100cqw - var(--c-max)) / 2 + var(--c-pad))); }
  .banner-arte { display: flex; justify-content: flex-start; }
  .lado-esquerda .banner-arte { justify-content: flex-end; }
  .banner-arte img { width: 100%; max-width: var(--arte-max, 1920px); aspect-ratio: var(--arte-prop, 1920 / 620); object-position: 50% 50% !important; }
  /* A beirada de dentro da arte some no fundo (so aparece quando a tela e mais larga que a arte) */
  .miolo-home > .lado-direita .banner-arte img { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 90px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 90px), transparent); }
  .miolo-home > .lado-esquerda .banner-arte img { -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 90px), transparent); mask-image: linear-gradient(270deg, #000 calc(100% - 90px), transparent); }
  .banner:not(.banner-so-texto) .banner-texto { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 0 62cqw 0 var(--beirada); }
  .lado-direita:not(.banner-so-texto) .banner-texto { padding: 0 var(--beirada) 0 min(61cqw, calc(var(--arte-max, 1920px) * .61)); }
  /* Banner 1: o texto sobe um pouco, para longe da fileira de produtos no chao da arte */
  .banner-1:not(.banner-so-texto) .banner-texto { padding-bottom: 7cqw; }
  .banner-2 .banner-texto { background: linear-gradient(90deg, rgba(10, 9, 14, .78) 0%, rgba(10, 9, 14, .55) 26%, rgba(10, 9, 14, .15) 38%, rgba(10, 9, 14, 0) 44%); }
  .banner:not(.banner-so-texto) .banner-tit { font-size: min(4.6cqw, 68px); }
  .banner:not(.banner-so-texto) .banner-apoio { margin-top: min(1.2cqw, 18px); font-size: max(13px, min(1.3cqw, 19px)); }
  .banner:not(.banner-so-texto) .banner-botao { height: max(42px, min(3.4cqw, 54px)); margin-top: min(1.8cqw, 26px); padding: 0 max(18px, min(1.7cqw, 26px)); font-size: max(14px, min(1.25cqw, 17px)); }
  .banner-so-texto .banner-texto { max-width: none; padding: 64px var(--beirada) 60px; }
  .banner-so-texto .banner-tit { max-width: 820px; font-size: 68px; }
  .banner-so-texto .banner-apoio { font-size: 17px; }
}

/* Entrada do banner 1 ao abrir a pagina (a mesma do farma.fit, em magenta): o texto sobe em sequencia e um
   brilho cruza o botao. Uma vez so; movimento reduzido deixa tudo parado e visivel (regra global) */
.banner-entra { --entra: cubic-bezier(.16, 1, .3, 1); --cruza: cubic-bezier(.65, 0, .35, 1); }
.banner-entra .banner-arte img { animation: entra-arte 1.6s var(--entra) both; }
.banner-entra .banner-tit, .banner-entra .banner-apoio, .banner-entra .banner-botao { animation: entra-sobe .9s var(--entra) both; }
.banner-entra .banner-tit { animation-name: entra-foco; animation-duration: 1s; animation-delay: .12s; }
.banner-entra .banner-apoio { animation-delay: .3s; }
.banner-entra .banner-botao { position: relative; overflow: hidden; animation-delay: .44s; }
.banner-entra .banner-botao::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); pointer-events: none; transform: translateX(-100%); animation: entra-cruza .9s var(--cruza) 1.3s backwards; }
@media (hover: hover) and (pointer: fine) {
  .banner-entra:hover .banner-botao::after { transform: translateX(100%); transition: transform .85s var(--cruza); }
}
@keyframes entra-arte { from { opacity: .2; transform: scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes entra-sobe { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes entra-foco { from { opacity: 0; transform: translateY(24px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes entra-cruza { to { transform: translateX(100%); } }

/* ── Diferenciais: 5 itens claros, icone magenta (o farma.fit usa uma barra escura; aqui e o contrario).
   O 5o e a montagem da raquete (dono, 18/09). No celular, 2 por linha e o ultimo ocupa a linha inteira ── */
.difs { margin-top: 14px; }
.difs-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.difs-lista > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.dif { display: flex; align-items: center; gap: 10px; height: 100%; padding: 12px; border: 1px solid var(--linha); border-radius: var(--raio-cartao); color: var(--tinta); text-decoration: none; transition: border-color .16s, background-color .16s; }
a.dif:hover { border-color: var(--marca-linha); background: var(--marca-claro); }
.dif-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--raio-controle); background: var(--marca-claro); color: var(--marca); }
.dif-ic .ic { width: 22px; height: 22px; }
.dif-txt { display: grid; gap: 1px; min-width: 0; line-height: 1.25; }
.dif-txt b { font-family: var(--t-titulo); font-size: 16px; font-weight: 700; }
.dif-txt span { color: var(--tinta-2); font-size: 12.5px; }
@media (min-width: 900px) {
  .difs { margin-top: 18px; }
  .difs-lista { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
  .difs-lista > li:last-child:nth-child(odd) { grid-column: auto; }
  .dif { padding: 14px; gap: 12px; }
  .dif-ic { width: 40px; height: 40px; }
  .dif-ic .ic { width: 23px; height: 23px; }
  .dif-txt b { font-size: 16.5px; }
  .dif-txt span { font-size: 12.5px; }
}
@media (min-width: 1280px) {
  .difs-lista { gap: 12px; }
  .dif { padding: 16px 18px; gap: 14px; }
  .dif-ic { width: 46px; height: 46px; }
  .dif-ic .ic { width: 26px; height: 26px; }
  .dif-txt b { font-size: 18px; }
  .dif-txt span { font-size: 13.5px; }
}

/* ── Categorias: 5 cartoes iguais com foto de produto (dono, 18/09: a versao com 2 cartoes grandes "ficou
   esquisita, meio torta"; a faixa de subcategorias embaixo "so polui"). No celular a fileira rola de lado ── */
.cats { margin-top: 44px; }
.cats .secao-tit { margin-bottom: 16px; }
.cats-grade { display: grid; grid-auto-flow: column; grid-auto-columns: 36%; gap: 10px; margin: 0 calc(var(--c-pad) * -1); padding: 2px var(--c-pad) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--c-pad); scrollbar-width: none; list-style: none; }
.cats-grade::-webkit-scrollbar { display: none; }
.cats-grade > li { min-width: 0; scroll-snap-align: start; }
.cat { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--linha); border-radius: var(--raio-cartao); background: #fff; color: var(--tinta); text-decoration: none; transition: border-color .2s, box-shadow .24s var(--anda), transform .24s var(--anda); }
/* ⚠️ Faixa de foto com ALTURA FIXA e a foto limitada por max-width/max-height. A versao com aspect-ratio + padding
   em % + height 100% cortava a foto na direita em outro navegador (print do dono, 18/09); esta nao depende disso */
.cat-foto { display: flex; align-items: center; justify-content: center; height: 108px; padding: 12px; background: #fff; }
.cat-foto img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .35s var(--anda); }
.cat-nome { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding: 10px 12px; border-top: 1px solid var(--linha); font-family: var(--t-titulo); font-size: 16px; font-weight: 700; line-height: 1.1; letter-spacing: .03em; text-transform: uppercase; }
.cat-nome .ic { flex: none; width: 16px; height: 16px; color: var(--marca); transition: transform .2s var(--anda); }
.cat:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .cat:hover { border-color: var(--marca-linha); box-shadow: var(--sombra-hover); transform: translateY(-2px); }
  .cat:hover .cat-nome { color: var(--marca-texto); }
  .cat:hover .cat-nome .ic { transform: translateX(4px); }
  .cat:hover .cat-foto img { transform: scale(1.06); }
}
@media (min-width: 768px) {
  .cats-grade { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; overflow: visible; }
}
@media (min-width: 1024px) {
  .cats { margin-top: 56px; }
  .cats .secao-tit { margin-bottom: 20px; }
  .cats-grade { gap: 14px; }
  .cat-foto { height: 124px; padding: 14px; }
  .cat-nome { padding: 10px 14px; font-size: 17px; }
}

/* Atendimento no WhatsApp no topo (no lugar do "Entrar": a loja vende sem cadastro, dono 18/09) */
.cab-zap { display: none; }
@media (min-width: 1200px) {
  .cab-zap { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px 0 4px; border-radius: 999px; color: var(--tinta); transition: background-color .16s; }
  .cab-zap:hover { background: var(--superficie); }
  .cab-zap-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--zap); color: #fff; }
  .cab-zap-ic .ic { width: 21px; height: 21px; }
  .cab-zap-txt { display: grid; line-height: 1.15; }
  .cab-zap-txt small { color: var(--tinta-2); font-size: 12px; font-weight: 700; }
  .cab-zap-txt b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
}

/* ── Marcas: logo em cinza que ganha cor; cada uma abre a pagina da marca ── */
.marcas { margin-top: 56px; }
.marcas-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.marca { display: grid; place-items: center; height: 72px; padding: 12px; border: 1px solid var(--linha); border-radius: var(--raio-cartao); background: #fff; transition: border-color .16s, box-shadow .2s var(--anda); }
/* Logos SEMPRE em cor (dono, 18/09: o cinza "parece que nao tem estoque"); o mouse so destaca a moldura */
.marca img { display: block; max-width: 100%; max-height: 40px; width: auto; height: auto; object-fit: contain; transition: transform .2s var(--anda); }
.marca:hover, .marca:focus-visible { border-color: var(--marca-linha); box-shadow: var(--sombra-hover); }
.marca:hover img, .marca:focus-visible img { transform: scale(1.04); }
@media (min-width: 600px) { .marcas-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .marcas-grade { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; } .marca { height: 88px; } .marca img { max-height: 46px; } }

/* ── WhatsApp: perguntas de tenis de mesa que ja abrem a conversa ── */
.zap { display: grid; gap: 20px; margin-top: 56px; padding: 26px 22px; border-radius: var(--raio-faixa); background: radial-gradient(80% 120% at 100% 100%, rgba(237, 3, 110, .35) 0%, rgba(237, 3, 110, 0) 60%), var(--tinta); color: #fff; }
.zap-tit { margin: 0; font-family: var(--t-titulo); font-size: 32px; font-weight: 700; line-height: 1.02; text-wrap: balance; }
.zap-apoio { margin: 10px 0 0; color: rgba(255, 255, 255, .78); font-size: 15px; }
.zap-botao { height: 52px; margin-top: 18px; padding: 0 22px; border-radius: 999px; background: var(--zap); color: #fff; font-size: 16px; box-shadow: 0 10px 28px rgba(31, 168, 85, .35); }
.zap-botao:hover { background: #17924a; }
.zap-botao .ic { width: 22px; height: 22px; }
.zap-perguntas { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.zap-perguntas a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--raio-cartao); color: #fff; font-size: 15.5px; font-weight: 700; text-decoration: none; transition: background-color .16s, border-color .16s; }
.zap-perguntas a .ic { width: 18px; height: 18px; color: #ff6aa9; transition: transform .2s var(--anda); }
.zap-perguntas a:hover { border-color: var(--marca); background: rgba(237, 3, 110, .18); }
.zap-perguntas a:hover .ic { transform: translateX(4px); }
@media (min-width: 900px) {
  .zap { grid-template-columns: 1.1fr 1fr; align-items: center; gap: 40px; margin-top: 72px; padding: 48px 52px; }
  .zap-tit { font-size: 46px; }
  .zap-apoio { font-size: 16.5px; }
}

/* ── Paginas de conteudo feitas no UX Builder (camada de compatibilidade, D9) ── */
.pagina-ux { max-width: none; }
.pagina-ux .titulo-pagina { margin-bottom: 8px; }
.ux-secao { margin-block: 20px; }
.ux-secao.escura { padding: 28px 16px 8px; border-radius: var(--raio-faixa); background: var(--grafite); color: rgba(255, 255, 255, .88); }
.ux-secao.escura :is(h1, h2, h3, h4, strong, b) { color: #fff; }
.ux-linha { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.ux-linha.centro { justify-content: center; }
.ux-col { width: calc(var(--s) / 12 * 100%); padding: 0 10px; margin-bottom: 16px; }
@media (min-width: 768px)  { .ux-col { width: calc(var(--m) / 12 * 100%); } }
@media (min-width: 1024px) { .ux-col { width: calc(var(--l) / 12 * 100%); } }
.ux-col.centro { text-align: center; }
.ux-linha.cartoes > .ux-col > .ux-col-in { height: 100%; padding: 24px 20px; border-radius: var(--raio-cartao); background: var(--cartao); }
.ux-linha.cartoes-escuros > .ux-col > .ux-col-in { background: var(--grafite-2); }
.ux-texto.centro { text-align: center; }
.ux-texto a, .pagina-ux p a { color: var(--dourado-texto); text-decoration: underline; text-underline-offset: 3px; }
.escura .ux-texto a, .escura p a { color: var(--dourado); }
.pagina-ux :is(h1, h2, h3) { font-family: var(--t-titulo); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.pagina-ux .ux-texto h1 { font-size: 24px; margin: 20px 0 8px; }
.ux-btn { max-width: 100%; min-height: 46px; height: auto; margin: 0 0 10px; padding: 11px 20px; border-radius: 999px; font-size: 15px; line-height: 1.2; text-align: center; white-space: normal; }
.ux-btn.largo { display: flex; width: 100%; }
.ux-btn.cor-zap { background: var(--zap); color: #fff; }
.ux-btn.cor-zap:hover { background: #17924a; }
.ux-btn.cor-ouro { background: var(--dourado); color: #fff; }
.ux-btn.cor-grafite { background: var(--grafite); color: #fff; }
.ux-btn.cor-contorno { border: 1.5px solid var(--grafite); background: #fff; color: var(--grafite); }
.escura .ux-btn.cor-grafite { background: var(--dourado); color: #fff; }
.escura .ux-btn.cor-contorno { border-color: rgba(255, 255, 255, .7); background: transparent; color: #fff; }
.ux-titulo h2 { margin: 28px 0 14px; font-family: var(--t-titulo); font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.ux-caixa { display: grid; justify-items: center; gap: 12px; text-align: center; }
.ux-caixa h2 { margin: 0; font-size: 18px; line-height: 1.3; }
.ux-caixa-ic { display: block; }
.ux-imagem { margin: 0 auto 12px; }
.ux-imagem img { display: block; width: 100%; height: auto; border-radius: 12px; }
/* Visibilidade do UX Builder com os cortes do Flatsome: medium = ate 849 px, small = ate 549 px */
.ux-so-pc { display: none; }
@media (min-width: 850px) { .ux-so-pc { display: block; } }
@media (max-width: 549px) { .ux-sem-cel { display: none; } }
.ux-so-medio, .ux-so-cel { display: none; }
@media (max-width: 849px) { .ux-so-medio { display: block; } }
@media (max-width: 549px) { .ux-so-cel { display: block; } }
/* [follow]: botoes redondos das redes sociais */
.ux-redes { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.ux-redes-center { justify-content: center; }
.ux-redes-right { justify-content: flex-end; }
.ux-rede { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--marca-botao); color: #fff; transition: background-color .16s, transform .12s; }
.ux-rede .ic { width: 22px; height: 22px; }
.ux-rede:hover { background: var(--marca-forte); color: #fff; }
.ux-rede:active { transform: scale(.96); }
.ux-faixas { display: grid; gap: 8px; }
.ux-faixa { padding: 10px 14px; border-radius: 12px; background: var(--grafite); color: #fff; text-align: center; }
.ux-faixa :is(h3, h4) { margin: 0; font-size: 15px; }
.ux-logo { display: flex; justify-content: center; margin: 8px 0 14px; }
.ux-logo img { display: block; }
.ux-html iframe { display: block; border-radius: var(--raio-cartao); }
.ux-produtos { margin-block: 16px; }
/* ── Pagina de produto (tela "Produto" da maquete, em cima do modelo do Woo) ── */
.single-product .miolo-loja { padding-top: 18px; }
/* So o produto da pagina: os cartoes de "Relacionados" tambem sao div.product e viravam 2 colunas (dono 18/09: "aqui esta bugado") */
.single-product div.product:not(.card) { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 14px; }
.single-product div.product:not(.card) > * { min-width: 0; }
.single-product div.product .woocommerce-product-gallery,
.single-product div.product .summary { float: none !important; width: auto !important; margin: 0 !important; }
.single-product div.product :is(.woocommerce-tabs, .related, .upsells) { grid-column: 1 / -1; }
/* A lupa da galeria vem do WooCommerce com z-index 99 e ficava por cima do carrinho lateral e do menu */
.single-product div.product .woocommerce-product-gallery__trigger { z-index: 4; }
.single-product div.product:not(.card) > .onsale { position: absolute; top: 14px; left: 14px; z-index: 5; min-height: 0; min-width: 0; margin: 0; padding: 4px 10px; border-radius: 999px; background: var(--dourado); color: #fff; font-size: 11px; font-weight: 800; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; }
@media (min-width: 900px) {
  .single-product div.product:not(.card) { grid-template-columns: 1.1fr 1fr; column-gap: 56px; margin-top: 20px; }
  .single-product div.product .woocommerce-product-gallery { grid-column: 1; grid-row: 1; }
  .single-product div.product .summary { grid-column: 2; grid-row: 1; }
}
/* Galeria */
.single-product .woocommerce-product-gallery .flex-viewport,
.single-product .woocommerce-product-gallery__wrapper { border-radius: var(--raio-faixa); background: var(--cartao); }
.single-product .woocommerce-product-gallery__image img:not(.zoomImg) { aspect-ratio: 1; object-fit: contain; padding: 8%; mix-blend-mode: multiply; transition: opacity .12s; }
/* Lupa ao passar o mouse (dono 18/09: "bugada quando passo o mouse na foto"). A foto ampliada pegava o padding e
   o multiply da foto normal e se misturava com ela: duas fotos uma por cima da outra. Agora a ampliada entra
   sozinha, sem padding, e a de baixo some enquanto o mouse esta em cima */
.single-product div.product div.images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image .zoomImg { padding: 0; background: none; mix-blend-mode: multiply; opacity: 0 !important; transition: opacity .15s; }
/* O !important vence o snippet WPCode do "esgotado" (".product.outofstock img { opacity: 1 !important }"), que
   deixava a foto ampliada SEMPRE visivel nos produtos sem estoque. Quem mostra a ampliada e o :hover, so com mouse */
@media (hover: hover) and (pointer: fine) {
  .single-product div.product div.images .woocommerce-product-gallery__image:hover .zoomImg { opacity: 1 !important; }
  .single-product .woocommerce-product-gallery__image:has(> .zoomImg):hover > a img { opacity: 0 !important; }
}
.single-product .woocommerce-product-gallery__trigger { top: 14px !important; right: 14px !important; }
.single-product div.product div.images .flex-control-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 0; padding: 0; }
.single-product div.product div.images .flex-control-thumbs li { float: none; width: 72px; height: 72px; margin: 0; padding: 6px; border: 2px solid transparent; border-radius: 12px; background: var(--cartao); }
.single-product div.product div.images .flex-control-thumbs li:has(.flex-active) { border-color: var(--dourado); }
.single-product div.product div.images .flex-control-thumbs li img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; opacity: 1; }
/* Coluna da direita */

.single-product .summary .product_title { margin: 6px 0 0; font-family: var(--t-titulo); font-size: 28px; font-weight: 700; line-height: 1.12; letter-spacing: -.02em; }
.single-product div.product .summary p.price { margin: 14px 0 0; color: var(--tinta); font-family: var(--t-titulo); font-size: 34px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.single-product div.product .summary p.price del { color: var(--tinta-2); font-size: 20px; font-weight: 600; }
.single-product div.product .summary p.price ins { text-decoration: none; }
.single-product .summary .woovr-variation .woocommerce-Price-amount { font-weight: 700; color: var(--tinta); }
.single-product .summary .woocommerce-product-details__short-description { margin-top: 16px; color: #3a4049; }
.single-product .summary form.cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 22px 0 0; }
.single-product .summary form.cart .quantity { flex: none; margin: 0 !important; }
.single-product .summary form.cart .quantity .qty { width: 84px; height: 50px; border: 1px solid var(--contorno); border-radius: var(--raio-controle); background: #fff; font: inherit; font-size: 16px; font-weight: 800; text-align: center; }
.single-product .summary form.cart .single_add_to_cart_button.button { flex: 1 1 150px; height: 50px; margin: 0; padding: 0 18px; border-radius: var(--raio-controle); background: var(--dourado); color: #fff; font-family: var(--t-texto); font-size: 15.5px; font-weight: 800; }
.single-product .summary form.cart .single_add_to_cart_button.button:hover { background: var(--dourado-forte); color: #fff; }
.single-product .summary form.variations_form { display: block; }
.single-product .summary form.variations_form .single_variation_wrap { display: flex; flex-direction: column; gap: 10px; }
.single-product .summary form.variations_form .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: 10px; }
.single-product .summary table.variations { margin: 0 0 12px; }
.single-product .summary table.variations :is(th, td) { display: block; padding: 0; text-align: left; }
.single-product .summary table.variations select { width: 100%; height: 46px; padding: 0 12px; border: 1px solid var(--contorno); border-radius: var(--raio-controle); background: #fff; font: inherit; }
.single-product .summary .woovr-variations { display: grid; gap: 8px; margin-bottom: 12px; }
.single-product .summary .woovr-variation { padding: 10px 12px; border: 1px solid var(--contorno); border-radius: var(--raio-controle); background: #fff; transition: border-color .16s, background .16s; }
.single-product .summary .woovr-variation:hover { border-color: var(--grafite); }
.single-product .summary .woovr-variation.woovr-variation-active { border: 2px solid var(--dourado); background: var(--dourado-claro); padding: 9px 11px; }
.single-product .summary .prod-zap { display: flex; width: 100%; height: 50px; margin-top: 10px; font-size: 15.5px; }
.single-product .summary .product_meta { margin-top: 18px; color: var(--tinta-2); font-size: 13.5px; }
.single-product .summary .product_meta a { color: var(--tinta); }
.confianca { display: grid; gap: 10px; margin-top: 22px; padding: 16px; border-radius: 14px; background: var(--cartao); }
.confianca > div { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.confianca .ic { width: 20px; height: 20px; color: var(--dourado-texto); }
.confianca b { display: block; font-size: 14px; }
.confianca b + span { color: var(--tinta-2); font-size: 13px; }
@media (min-width: 900px) {
  .single-product .summary .product_title { font-size: 36px; }
  .single-product div.product .summary p.price { font-size: 40px; }
  .confianca { grid-template-columns: repeat(3, 1fr); }
}
.single-product div.product .woocommerce-tabs ul.tabs { margin: 36px 0 0; padding: 0; border-bottom: 1px solid var(--linha); overflow: visible; }
.single-product div.product .woocommerce-tabs ul.tabs::before { display: none; }
.single-product div.product .woocommerce-tabs ul.tabs li { margin: 0 18px 0 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.single-product div.product .woocommerce-tabs ul.tabs li::before,
.single-product div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.single-product div.product .woocommerce-tabs ul.tabs li a { display: inline-block; padding: 10px 2px; border-bottom: 3px solid transparent; color: var(--tinta-2); font-weight: 800; }
.single-product div.product .woocommerce-tabs ul.tabs li.active a { border-bottom-color: var(--dourado); color: var(--tinta); }
.single-product .woocommerce-Tabs-panel { max-width: 72ch; margin-top: 16px; color: #3a4049; font-size: 15px; line-height: 1.7; }
.single-product .woocommerce-Tabs-panel > h2:first-child { display: none; }
.single-product .related > h2, .single-product .upsells > h2 { margin: 48px 0 18px; font-family: var(--t-titulo); font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
@media (min-width: 768px) { .single-product .related > h2, .single-product .upsells > h2 { font-size: 32px; } }
.single-product .migalha span:last-child { color: var(--tinta); font-weight: 700; }

/* ── Avisos do WooCommerce (adicionado ao carrinho, carrinho atualizado, cupom, erros): cartao claro com o icone
   do proprio Woo na cor do tipo. Vale no site inteiro; antes vinham no padrao do Woo (faixa roxa/verde em cima) ── */
.woocommerce-notices-wrapper { display: grid; gap: 8px; }
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 16px; padding: 13px 16px 13px 46px; border: 1px solid var(--linha); border-radius: 12px; background: var(--cartao); color: var(--tinta); font-size: 14.5px; line-height: 1.45; }
.woocommerce-notices-wrapper > .woocommerce-message, .woocommerce-notices-wrapper > .woocommerce-info, .woocommerce-notices-wrapper > .woocommerce-error { margin: 0; }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { top: 50%; left: 17px; transform: translateY(-50%); }
.woocommerce-message::before { color: var(--zap-texto); }
.woocommerce-info::before { color: var(--dourado-texto); }
.woocommerce-error { border-color: #f3c7c3; background: #fdf3f2; }
.woocommerce-error::before { color: #b42318; }
ul.woocommerce-error { list-style: none; }
ul.woocommerce-error > li { margin: 0; }
.woocommerce-message a.button, .woocommerce-info a.button, .woocommerce-error a.button { order: 2; float: none; margin-left: auto; padding: 8px 14px; border: 1px solid var(--grafite); border-radius: var(--raio-controle); background: #fff; color: var(--grafite); font-size: 13.5px; font-weight: 800; line-height: 1.2; text-decoration: none; }
.woocommerce-message a.button:hover, .woocommerce-info a.button:hover, .woocommerce-error a.button:hover { background: var(--grafite); color: #fff; }
.woocommerce-message a:not(.button), .woocommerce-info a:not(.button), .woocommerce-error a:not(.button) { color: var(--dourado-texto); font-weight: 700; }

/* ── Pagina do carrinho (/cart/). O modelo e o do Woo (inc/carrinho.php): a tabela vira cartoes por CSS ── */
.pagina-carrinho { margin-top: 10px; }
.pagina-carrinho .titulo-pagina { margin: 12px 0 18px; }
.pagina-carrinho > .woocommerce { display: grid; gap: 20px; align-items: start; }
.pagina-carrinho .woocommerce-notices-wrapper:empty { display: none; }
/* Os "clearfix" do Woo (::before/::after com content) viram itens de grade e de flex, cada um com seu espaco */
.pagina-carrinho > .woocommerce::before, .pagina-carrinho > .woocommerce::after,
.pagina-carrinho table.shop_table.cart td.actions .coupon::before, .pagina-carrinho table.shop_table.cart td.actions .coupon::after,
.pagina-carrinho .cart-collaterals::before, .pagina-carrinho .cart-collaterals::after { content: none; display: none; }
.pagina-carrinho .cart-collaterals { display: contents; } /* resumo e "voce tambem pode gostar" viram itens da grade */
.pagina-carrinho .woocommerce .cart-collaterals .cart_totals,
.pagina-carrinho .woocommerce .cart-collaterals .cross-sells { float: none; width: auto; margin: 0; }
.pagina-carrinho .woocommerce-cart-form { order: 1; margin: 0; }
.pagina-carrinho .cart_totals { order: 2; }
.pagina-carrinho .cross-sells { order: 3; }
@media (min-width: 1000px) {
  .pagina-carrinho > .woocommerce:has(.woocommerce-cart-form) { grid-template-columns: minmax(0, 1fr) 380px; column-gap: 40px; }
  .pagina-carrinho .woocommerce-notices-wrapper { grid-column: 1 / -1; }
  .pagina-carrinho .woocommerce-cart-form { grid-column: 1; grid-row: 2; }
  .pagina-carrinho .cart_totals { position: sticky; top: 150px; grid-column: 2; grid-row: 2; }
  .pagina-carrinho .cross-sells { grid-column: 1 / -1; grid-row: 3; }
}

/* Cada produto: um cartao com foto, nome, preco, "- 1 +", subtotal e lixeira */
.pagina-carrinho table.shop_table.cart { display: block; width: 100%; margin: 0; border: 0; border-radius: 0; }
.pagina-carrinho table.shop_table.cart thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pagina-carrinho table.shop_table.cart tbody { display: grid; gap: 12px; }
.pagina-carrinho table.shop_table.cart tr.cart_item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "foto nome tirar" "foto preco preco" "qtd qtd total"; align-items: center; gap: 4px 14px; padding: 14px; border: 1px solid var(--linha); border-radius: var(--raio-cartao); background: #fff; }
.pagina-carrinho table.shop_table.cart tr.cart_item td { display: block; min-width: 0; padding: 0; border: 0; background: none !important; text-align: left !important; }
.pagina-carrinho table.shop_table.cart tr.cart_item td::before { content: none !important; display: none; }
.pagina-carrinho table.shop_table.cart td.product-thumbnail { display: block !important; grid-area: foto; align-self: start; }
.pagina-carrinho table.shop_table.cart td.product-thumbnail img { display: block; width: 64px; height: 64px; padding: 6px; border-radius: 12px; background: var(--cartao); object-fit: contain; mix-blend-mode: multiply; box-shadow: none; }
.pagina-carrinho table.shop_table.cart td.product-name { grid-area: nome; align-self: start; font-size: 15px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.pagina-carrinho table.shop_table.cart td.product-name a { color: var(--tinta); text-decoration: none; }
.pagina-carrinho table.shop_table.cart td.product-name a:hover { color: var(--dourado-texto); }
.pagina-carrinho table.shop_table.cart td.product-price { grid-area: preco; align-self: start; color: var(--tinta-2); font-size: 13px; }
.pagina-carrinho table.shop_table.cart td.product-price::after { content: " cada"; }
.pagina-carrinho table.shop_table.cart td.product-price .woocommerce-Price-amount { color: var(--tinta-2) !important; font-weight: 600; }
.pagina-carrinho table.shop_table.cart td.product-quantity { grid-area: qtd; margin-top: 10px; }
.pagina-carrinho table.shop_table.cart td.product-subtotal { grid-area: total; justify-self: end; margin-top: 10px; text-align: right !important; }
.pagina-carrinho table.shop_table.cart td.product-subtotal .woocommerce-Price-amount { color: var(--grafite) !important; font-family: var(--t-titulo); font-size: 18px; font-weight: 700; }
.pagina-carrinho table.shop_table.cart td.product-remove { grid-area: tirar; justify-self: end; align-self: start; }
.pagina-carrinho table.shop_table.cart td.product-remove a.remove { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: transparent; color: var(--tinta-2) !important; font-size: 0 !important; line-height: 0; }
.pagina-carrinho table.shop_table.cart td.product-remove a.remove::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("icones/trash-2.svg") center / contain no-repeat; mask: url("icones/trash-2.svg") center / contain no-repeat; }
.pagina-carrinho table.shop_table.cart td.product-remove a.remove:hover { background: #fdecec !important; color: #b42318 !important; }
@media (min-width: 700px) {
  .pagina-carrinho table.shop_table.cart tr.cart_item { grid-template-columns: 88px minmax(0, 1fr) auto minmax(110px, auto) 40px; grid-template-areas: "foto nome qtd total tirar" "foto preco qtd total tirar"; gap: 2px 20px; padding: 16px 18px; }
  .pagina-carrinho table.shop_table.cart td.product-thumbnail img { width: 88px; height: 88px; }
  .pagina-carrinho table.shop_table.cart td.product-name { align-self: end; }
  .pagina-carrinho table.shop_table.cart td.product-quantity,
  .pagina-carrinho table.shop_table.cart td.product-subtotal { margin-top: 0; }
  .pagina-carrinho table.shop_table.cart td.product-remove { align-self: center; }
}


/* Cupom (e o "Atualizar carrinho", que some quando o "- +" ja atualiza sozinho) */
.pagina-carrinho table.shop_table.cart tr:has(> td.actions) { display: block; }
.pagina-carrinho table.shop_table.cart td.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 6px 0 0; border: 0; background: none !important; text-align: left !important; }
.pagina-carrinho table.shop_table.cart td.actions .coupon { display: flex; flex: 1 1 280px; gap: 8px; max-width: 460px; float: none; padding: 0; }
.pagina-carrinho table.shop_table.cart td.actions .coupon .input-text { flex: 1; width: auto !important; min-width: 0; height: 46px; margin: 0; padding: 0 14px; border: 1px solid var(--contorno); border-radius: var(--raio-controle); background: #f7f7fa; font: inherit; font-size: 16px; }
.pagina-carrinho table.shop_table.cart td.actions .coupon .input-text:focus { border-color: var(--dourado); background: #fff; box-shadow: 0 0 0 3px rgba(237, 3, 110, .25); outline: none; }
.pagina-carrinho table.shop_table.cart td.actions .button { display: inline-flex; align-items: center; justify-content: center; width: auto; height: 46px; margin: 0; padding: 0 18px; border: 1px solid var(--grafite); border-radius: var(--raio-controle); background: var(--grafite); color: #fff; font: inherit; font-size: 14px; font-weight: 800; }
.pagina-carrinho table.shop_table.cart td.actions .button:hover { background: #000; }
.pagina-carrinho table.shop_table.cart td.actions button[name="update_cart"] { margin-left: auto; background: #fff; color: var(--grafite); }
.pagina-carrinho table.shop_table.cart td.actions button[name="update_cart"]:disabled { opacity: .5; }
.pagina-carrinho .woocommerce-cart-form.qtd-automatica table.shop_table.cart td.actions button[name="update_cart"] { display: none; }

/* "- 1 +" (carrinho e pagina do produto; os botoes entram pelo tema.js) */
.quantity.qtd-passo { display: inline-flex; align-items: center; height: 44px; overflow: hidden; border: 1px solid var(--contorno); border-radius: 999px; background: #fff; }
.quantity.qtd-passo button { display: grid; place-items: center; width: 40px; height: 100%; padding: 0; border: 0; background: none; color: var(--tinta); font-family: var(--t-titulo); font-size: 20px; line-height: 1; cursor: pointer; transition: background-color .12s; }
.quantity.qtd-passo button:hover:not(:disabled) { background: var(--cartao); }
.quantity.qtd-passo button:active:not(:disabled) { background: var(--linha); }
.quantity.qtd-passo button:disabled { color: #b9bac4; cursor: default; }
.quantity.qtd-passo input.qty { width: 42px !important; height: 100%; margin: 0; padding: 0; border: 0 !important; background: none; box-shadow: none; color: var(--grafite); font-family: var(--t-titulo); font-size: 16px; font-weight: 700; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.quantity.qtd-passo input.qty::-webkit-outer-spin-button,
.quantity.qtd-passo input.qty::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.quantity.qtd-passo input.qty:focus-visible { outline: 2px solid rgba(237, 3, 110, .55); outline-offset: -2px; }
/* Na pagina do produto a caixa tem a altura do botao "Adicionar ao carrinho" e a regra antiga do campo (84 px, borda) sai */
.single-product .summary form.cart .quantity.qtd-passo { height: 50px; }
.single-product .summary form.cart .quantity.qtd-passo .qty { width: 44px; height: 100%; border: 0; border-radius: 0; background: none; }
/* Celular: "- 1 +" e "Adicionar ao carrinho" na MESMA linha (antes o botao descia sozinho) */
@media (max-width: 420px) {
  .single-product .summary form.cart .single_add_to_cart_button.button { padding: 0 12px; font-size: 15px; white-space: nowrap; }
  .single-product .summary form.cart .quantity.qtd-passo button { width: 36px; }
  .single-product .summary form.cart .quantity.qtd-passo .qty { width: 36px; }
}

/* Resumo do pedido */
.pagina-carrinho .cart_totals { padding: 20px; border-radius: var(--raio-faixa); background: var(--cartao); }
.pagina-carrinho .cart_totals h2 { margin: 0 0 8px; font-family: var(--t-titulo); font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.pagina-carrinho .cart_totals table.shop_table { display: block; width: 100%; margin: 0; border: 0; border-radius: 0; }
.pagina-carrinho .cart_totals table.shop_table tbody { display: grid; }
.pagina-carrinho .cart_totals table.shop_table tr { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--linha); }
.pagina-carrinho .cart_totals table.shop_table tr:first-child { border-top: 0; }
.pagina-carrinho .cart_totals table.shop_table th,
.pagina-carrinho .cart_totals table.shop_table td { display: block !important; padding: 0; border: 0; background: none !important; }
.pagina-carrinho .cart_totals table.shop_table th { color: var(--tinta-2); font-size: 13.5px; font-weight: 700; text-align: left; }
.pagina-carrinho .cart_totals table.shop_table td { text-align: right !important; }
.pagina-carrinho .cart_totals table.shop_table td::before { content: none !important; display: none; }
.pagina-carrinho .cart_totals .woocommerce-Price-amount { color: var(--grafite) !important; font-family: var(--t-titulo); font-weight: 600; }
.pagina-carrinho .cart_totals tr.order-total { margin-top: 4px; padding-top: 14px; border-top: 1.5px solid var(--grafite); }
.pagina-carrinho .cart_totals tr.order-total th { color: var(--grafite); font-size: 15px; }
.pagina-carrinho .cart_totals tr.order-total .woocommerce-Price-amount { font-size: 24px; font-weight: 700; }
.pagina-carrinho .cart_totals #shipping_method { margin: 0; padding: 0; list-style: none; }
.pagina-carrinho .cart_totals .woocommerce-shipping-destination { margin: 4px 0 0; color: var(--tinta-2); font-size: 12.5px; }
.pagina-carrinho .cart_totals .shipping-calculator-button { color: var(--dourado-texto); font-weight: 700; text-decoration: none; }
.pagina-carrinho .cart_totals .shipping-calculator-form { margin-top: 10px; text-align: left; }
.pagina-carrinho .cart_totals .shipping-calculator-form .input-text,
.pagina-carrinho .cart_totals .shipping-calculator-form select { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--contorno); border-radius: var(--raio-controle); background: #fff; font: inherit; font-size: 16px; }
.pagina-carrinho .cart_totals .wc-proceed-to-checkout { padding: 16px 0 0; }
.pagina-carrinho .cart_totals .wc-proceed-to-checkout a.checkout-button { display: flex; align-items: center; justify-content: center; height: 54px; margin: 0; padding: 0 20px; border-radius: var(--raio-controle); background: var(--dourado); color: #fff; font-family: var(--t-titulo); font-size: 17px; font-weight: 600; box-shadow: 0 8px 22px rgba(237, 3, 110, .28); transition: background-color .16s, transform .12s; }
.pagina-carrinho .cart_totals .wc-proceed-to-checkout a.checkout-button:hover { background: var(--dourado-forte); color: #fff; }
.pagina-carrinho .cart_totals .wc-proceed-to-checkout a.checkout-button:active { transform: scale(.98); }
.carrinho-continuar-link { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 12px; color: var(--tinta-2); font-size: 14px; font-weight: 700; text-decoration: none; }
.carrinho-continuar-link .ic { width: 16px; height: 16px; }
.carrinho-continuar-link:hover { color: var(--grafite); }
.confianca.confianca-carrinho { grid-template-columns: 1fr; margin-top: 16px; padding: 14px; background: #fff; }

/* Voce tambem pode gostar (cross-sells), no mesmo titulo dos Relacionados */
.pagina-carrinho .cross-sells > h2 { margin: 28px 0 16px; font-family: var(--t-titulo); font-size: 24px; font-weight: 700; letter-spacing: -.02em; }

/* Carrinho vazio */
.carrinho-vazio { display: grid; justify-items: center; gap: 10px; max-width: 560px; margin: 8px auto 24px; padding: 40px 20px; border-radius: var(--raio-faixa); background: var(--cartao); text-align: center; }
.carrinho-vazio-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; color: var(--dourado-texto); }
.carrinho-vazio-ic .ic { width: 28px; height: 28px; }
.carrinho-vazio h2 { margin: 6px 0 0; font-family: var(--t-titulo); font-size: 24px; font-weight: 700; letter-spacing: -.015em; }
.carrinho-vazio p { max-width: 40ch; margin: 0; color: var(--tinta-2); }
.carrinho-vazio-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
.carrinho-vazio-acoes .btn { height: 48px; padding: 0 20px; font-size: 15px; }

/* ── Carrinho lateral (dono, 18/09): abre de lado. So o estado ABERTO define display ── */
.carrinho-lado:not([hidden]) { position: fixed; inset: 0; z-index: 85; display: block; }
.carrinho-fundo { position: absolute; inset: 0; background: rgba(13, 19, 27, .5); animation: carrinho-fundo .2s ease-out; }
@keyframes carrinho-fundo { from { opacity: 0; } }
.carrinho-painel { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(420px, 92vw); background: var(--papel); box-shadow: -12px 0 40px rgba(13, 19, 27, .25); animation: carrinho-entra .28s var(--anda); }
@keyframes carrinho-entra { from { transform: translateX(28px); opacity: .5; } }
.carrinho-cab { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 10px 20px; border-bottom: 1px solid var(--linha); }
.carrinho-cab strong { display: inline-flex; align-items: center; gap: 10px; font-family: var(--t-titulo); font-size: 20px; font-weight: 700; }
.carrinho-cab strong .ic { width: 22px; height: 22px; color: var(--dourado-texto); }
.carrinho-corpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 20px; }
.carrinho-pe { padding: 10px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linha); text-align: center; }
.carrinho-continuar { padding: 8px 12px; border: 0; background: transparent; color: var(--dourado-texto); font: inherit; font-weight: 800; cursor: pointer; }
/* O mini carrinho do Woo, no desenho da casa */
.carrinho-corpo .woocommerce-mini-cart { margin: 0; padding: 0; list-style: none; }
.carrinho-corpo .woocommerce-mini-cart-item { position: relative; padding: 14px 36px 14px 0; border-bottom: 1px solid var(--linha); }
.carrinho-corpo .woocommerce-mini-cart-item > a:not(.remove) { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 12px; color: var(--tinta); font-family: var(--t-titulo); font-size: 15px; font-weight: 600; line-height: 1.3; text-decoration: none; }
.carrinho-corpo .woocommerce-mini-cart-item img { float: none !important; width: 64px !important; height: 64px; margin: 0 !important; padding: 4px; border-radius: 10px; background: var(--cartao); object-fit: contain; mix-blend-mode: multiply; }
.carrinho-corpo .woocommerce-mini-cart-item .quantity { display: block; margin: 6px 0 0 76px; color: var(--tinta-2); font-size: 13.5px; }
.carrinho-corpo .woocommerce-mini-cart-item .quantity .woocommerce-Price-amount { color: var(--tinta); font-weight: 800; }
.carrinho-corpo .woocommerce-mini-cart-item dl.variation { margin: 4px 0 0 76px; color: var(--tinta-2); font-size: 13px; }
.carrinho-corpo .woocommerce-mini-cart-item dl.variation :is(dt, dd, p) { display: inline; margin: 0; }
.carrinho-corpo a.remove { position: absolute; top: 14px; right: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: var(--cartao); color: var(--tinta-2) !important; font-size: 20px; line-height: 1; text-decoration: none; transition: background .16s, color .16s; }
.carrinho-corpo a.remove:hover { background: #fde8e8; color: #b42318 !important; }
.carrinho-corpo .woocommerce-mini-cart__total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 16px 0 0; padding-top: 4px; }
.carrinho-corpo .woocommerce-mini-cart__total strong { font-size: 15px; }
.carrinho-corpo .woocommerce-mini-cart__total .woocommerce-Price-amount { font-family: var(--t-titulo); font-size: 22px; font-weight: 700; }
.carrinho-corpo .woocommerce-mini-cart__buttons { display: grid; gap: 8px; margin: 16px 0 0; }
.carrinho-corpo .woocommerce-mini-cart__buttons a { display: flex; align-items: center; justify-content: center; height: 50px; margin: 0; border-radius: var(--raio-controle); border: 1.5px solid var(--grafite); background: #fff; color: var(--grafite); font-size: 15px; font-weight: 800; text-decoration: none; transition: background .16s, transform .16s var(--anda); }
.carrinho-corpo .woocommerce-mini-cart__buttons a.checkout { order: -1; border-color: var(--dourado); background: var(--dourado); color: #fff; }
.carrinho-corpo .woocommerce-mini-cart__buttons a:active { transform: scale(.98); }
.carrinho-corpo .woocommerce-mini-cart__empty-message { margin: 40px 0 8px; color: var(--tinta-2); font-size: 15px; text-align: center; }
.carrinho-corpo .blockUI.blockOverlay { background: rgba(255, 255, 255, .6) !important; }
/* ── Rodape: tinta, logo branca, 3 colunas de links e o atendimento em destaque ── */
.rodape { margin-top: 72px; background: var(--tinta); color: rgba(255, 255, 255, .76); font-size: 14px; }
.rodape a { color: inherit; text-decoration: none; transition: color .16s; }
.rodape a:hover { color: #fff; }
.rodape-in { display: grid; gap: 30px; padding-block: 44px 30px; }
.rodape .logo-r { display: block; height: 36px; width: auto; }
.rodape-marca p { max-width: 38ch; margin: 14px 0 0; line-height: 1.6; }
.rodape h2 { margin: 0 0 12px; color: #fff; font-family: var(--t-titulo); font-size: 17px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.rodape ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.rodape-atendimento { display: grid; gap: 12px; align-content: start; }
.rodape-atendimento h2 { margin-bottom: 2px; }
.rodape .contato { display: flex; align-items: center; gap: 12px; margin: 0; }
.rodape .contato > .ic { flex: none; width: 22px; height: 22px; color: #ff6aa9; }
.rodape .contato span { display: grid; line-height: 1.35; }
.rodape .contato b { color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.legal { display: grid; gap: 8px; padding-block: 18px 28px; border-top: 1px solid var(--tinta-linha); color: rgba(255, 255, 255, .56); font-size: 12px; line-height: 1.6; }
.legal p { margin: 0; }
.legal a { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) {
  .rodape-in { grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 48px; padding-block: 56px 36px; }
}

/* ── Texto sobre o magenta e branco (herdados do farma.fit, onde o texto sobre o dourado era escuro) ── */
.n-filtros, .marca-item.marcada .caixa, .cab .sug-termo.ativo, .ux-btn.cor-ouro,
.single-product div.product:not(.card) > .onsale { color: #fff; }
@media (hover: hover) and (pointer: fine) { .cab .sug-termo:hover { color: #fff; } }
.single-product .summary form.cart .single_add_to_cart_button.button,
.single-product .summary form.cart .single_add_to_cart_button.button:hover,
.pagina-carrinho .cart_totals .wc-proceed-to-checkout a.checkout-button,
.pagina-carrinho .cart_totals .wc-proceed-to-checkout a.checkout-button:hover,
.carrinho-corpo .woocommerce-mini-cart__buttons a.checkout { color: #fff; }
.chip { border-color: var(--marca-linha); }
.sugestoes mark { background: rgba(237, 3, 110, .16); }

/* ── Pagina de produto: a marca em cima do nome (igual ao cartao) ── */
.single-product .summary .prod-marca { display: block; font-size: 15px; }
.single-product .summary .product_title { font-size: 32px; font-weight: 700; line-height: 1.02; letter-spacing: -.005em; }
@media (min-width: 900px) { .single-product .summary .product_title { font-size: 44px; } }
.single-product div.product .summary p.price del { font-family: var(--t-texto); font-size: 18px; font-weight: 500; }


/* ── Produto: o status de cada variacao (plugin WPC) no MESMO desenho do selo do cartao ── */
.single-product .summary .woovr-variation-availability p.stock { display: inline-flex; align-items: center; gap: 5px; width: fit-content; margin: 4px 0 0; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1.5; }
.single-product .summary .woovr-variation-availability p.stock.in-stock { background: var(--imediato-fundo); color: var(--imediato); }
.single-product .summary .woovr-variation-availability p.stock.available-on-backorder { background: var(--padrao-fundo); color: var(--padrao); }
.single-product .summary .woovr-variation-availability p.stock.out-of-stock { background: var(--superficie); color: var(--esgotado); }
.single-product .summary .woovr-variation-name label { font-weight: 800; }
.single-product .summary p.stock .ic { flex: none; width: 1.15em; height: 1.15em; }
/* Produto SIMPLES (dono, 19/09): o status sai no mesmo selo colorido das variacoes, um pouco maior por ser o unico */
.single-product .summary > p.stock,
.single-product .summary .woocommerce-variation-availability p.stock { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin: 0 0 12px; padding: 5px 13px; border-radius: 999px; font-size: 14.5px; font-weight: 800; line-height: 1.4; }
.single-product .summary > p.stock.in-stock,
.single-product .summary .woocommerce-variation-availability p.stock.in-stock { background: var(--imediato-fundo); color: var(--imediato); }
.single-product .summary > p.stock.available-on-backorder,
.single-product .summary .woocommerce-variation-availability p.stock.available-on-backorder { background: var(--padrao-fundo); color: var(--padrao); }
.single-product .summary > p.stock.out-of-stock,
.single-product .summary .woocommerce-variation-availability p.stock.out-of-stock { background: var(--superficie); color: var(--esgotado); }
/* "Nao sabe a diferenca?" com botao para Prazos e envios (dono, 19/09) */
.prod-envio-ajuda { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; padding: 10px 12px; border-radius: var(--raio-controle); background: var(--superficie); color: var(--tinta-2); font-size: 14px; line-height: 1.4; }
.prod-envio-ajuda b { color: var(--tinta); }
.single-product .summary .prod-envio-ajuda a { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border: 1.5px solid var(--tinta); border-radius: 999px; background: #fff; color: var(--tinta); font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background-color .16s, color .16s, transform .12s; }
.single-product .summary .prod-envio-ajuda a:hover { background: var(--tinta); color: #fff; }
.single-product .summary .prod-envio-ajuda a:active { transform: scale(.97); }
.prod-envio-ajuda a .ic { width: 15px; height: 15px; }
/* Galeria em fundo branco com borda fina: as fotos da loja ja vem em fundo branco */
.single-product .woocommerce-product-gallery .flex-viewport,
.single-product .woocommerce-product-gallery__wrapper { background: #fff; }
.single-product .woocommerce-product-gallery .flex-viewport,
.single-product .woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__wrapper { border: 1px solid var(--linha); }
.single-product div.product div.images .flex-control-thumbs li { background: #fff; border: 2px solid var(--linha); }
.single-product div.product div.images .flex-control-thumbs li:has(.flex-active) { border-color: var(--marca); }
/* Quase todo produto tem preco riscado (preco por formula): o selo "Oferta" em todos vira ruido. E a etiqueta
   "Envio Padrao" do produto contradiz a variacao com envio imediato: o status vale e o da variacao */
.single-product div.product:not(.card) > .onsale { display: none; }
.single-product .summary .product_meta .tagged_as { display: none; }

/* ════════ Barra do frete gratis (inc/frete-barra.php): carrinho lateral e pagina do carrinho ════════ */
.frete-barra { display: grid; gap: 9px; padding: 12px 14px; border: 1px solid var(--marca-linha); border-radius: var(--raio-cartao); background: var(--marca-claro); }
.frete-barra-txt { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--tinta); font-size: 14px; line-height: 1.35; }
.frete-barra-txt .ic { flex: none; width: 20px; height: 20px; color: var(--marca-texto); }
.frete-barra-txt b { font-weight: 800; }
.frete-barra-trilho { height: 8px; overflow: hidden; border-radius: 999px; background: rgba(214, 3, 106, .14); }
.frete-barra-trilho > span { display: block; height: 100%; min-width: 8px; border-radius: inherit; background: var(--marca-botao); transition: width .5s var(--anda); }
.frete-barra.liberado { border-color: #cfe8c2; background: var(--imediato-fundo); }
.frete-barra.liberado .ic { color: var(--imediato); }
.frete-barra.liberado .frete-barra-trilho { background: rgba(47, 138, 18, .16); }
.frete-barra.liberado .frete-barra-trilho > span { background: var(--imediato); }
.carrinho-corpo .frete-barra { margin: 6px 0 14px; }
.pagina-carrinho .cart_totals .frete-barra { margin: 0 0 14px; background: #fff; }
.pagina-carrinho .cart_totals .frete-barra.liberado { background: var(--imediato-fundo); }
/* A barra do plugin "Free Shipping Label" chega vazia neste tema: sai, para nunca ter duas */
.fsl-wrapper { display: none !important; }

/* ════════ Checkout (inc/checkout.php + woocommerce/checkout/form-checkout.php) ════════ */
.pagina-checkout { margin-top: 10px; }
.pagina-checkout .titulo-pagina { margin: 12px 0 18px; }
#conteudo .pagina-checkout .woocommerce-notices-wrapper:empty { display: none; }
#conteudo .pagina-checkout form.checkout::before, #conteudo .pagina-checkout form.checkout::after,
#conteudo .pagina-checkout .col2-set::before, #conteudo .pagina-checkout .col2-set::after { content: none; display: none; }
.co-grade { display: grid; gap: 16px; align-items: start; }
.co-dados, #conteudo .pagina-checkout #customer_details { display: grid; gap: 16px; min-width: 0; }
#conteudo .pagina-checkout #customer_details .col-1, #conteudo .pagina-checkout #customer_details .col-2 { float: none; width: auto; max-width: none; }
@media (min-width: 1000px) {
  .co-grade { grid-template-columns: minmax(0, 1fr) 430px; gap: 28px; }
}
.co-bloco { min-width: 0; padding: 20px 18px; border: 1px solid var(--linha); border-radius: var(--raio-faixa); background: #fff; }
@media (min-width: 700px) { .co-bloco { padding: 26px 28px; } }
#conteudo .pagina-checkout .co-bloco h3 { margin: 0 0 18px; font-family: var(--t-titulo); font-size: 24px; font-weight: 700; line-height: 1.1; letter-spacing: -.005em; }

/* Campos: grade de 2 colunas (form-row-first / -last = meia linha, -wide = inteira; ordem em inc/checkout.php) */
#conteudo .pagina-checkout .woocommerce-billing-fields__field-wrapper,
#conteudo .pagina-checkout .woocommerce-shipping-fields__field-wrapper,
#conteudo .pagina-checkout .woocommerce-additional-fields__field-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
#conteudo .pagina-checkout .form-row { grid-column: 1 / -1; float: none; width: auto; min-width: 0; margin: 0; padding: 0; }
#conteudo .pagina-checkout .form-row-first { grid-column: 1; }
#conteudo .pagina-checkout .form-row-last { grid-column: 2; }
#conteudo .pagina-checkout .form-row label { display: block; margin: 0 0 6px; color: var(--tinta); font-size: 13.5px; font-weight: 700; line-height: 1.3; }
#conteudo .pagina-checkout .form-row label .optional { color: var(--tinta-2); font-weight: 500; }
#conteudo .pagina-checkout .form-row .required { color: var(--marca-texto); text-decoration: none; }
#conteudo .pagina-checkout .form-row .input-text,
#conteudo .pagina-checkout .form-row select,
#conteudo .pagina-checkout .form-row textarea { width: 100%; height: 48px; margin: 0; padding: 0 14px; border: 1px solid var(--contorno); border-radius: var(--raio-controle); background: #fff; box-shadow: none; color: var(--tinta); font: inherit; font-size: 16px; transition: border-color .15s, box-shadow .15s; }
#conteudo .pagina-checkout .form-row textarea { height: auto; min-height: 96px; padding: 12px 14px; line-height: 1.45; resize: vertical; }
#conteudo .pagina-checkout .form-row .input-text::placeholder, #conteudo .pagina-checkout .form-row textarea::placeholder { color: #8a8c98; }
#conteudo .pagina-checkout .form-row .input-text:focus,
#conteudo .pagina-checkout .form-row select:focus,
#conteudo .pagina-checkout .form-row textarea:focus { border-color: var(--marca-botao); box-shadow: 0 0 0 3px rgba(214, 3, 106, .16); outline: none; }
#conteudo .pagina-checkout .form-row.woocommerce-invalid .input-text,
#conteudo .pagina-checkout .form-row.woocommerce-invalid select,
#conteudo .pagina-checkout .form-row.woocommerce-invalid .select2-selection--single { border-color: #c62828; box-shadow: 0 0 0 1px #c62828; background: #fffafa; }
#conteudo .pagina-checkout .form-row.woocommerce-invalid > label { color: #a8201a; }
#conteudo .pagina-checkout .form-row.woocommerce-validated .input-text { border-color: var(--contorno); }
#conteudo .pagina-checkout .form-row.woocommerce-validated .input-text:focus { border-color: var(--marca-botao); }
/* Estado (caixa de busca do Woo, selectWoo) com a mesma cara dos campos */
#conteudo .pagina-checkout .select2-container .select2-selection--single { height: 48px; border: 1px solid var(--contorno); border-radius: var(--raio-controle); }
#conteudo .pagina-checkout .select2-container .select2-selection--single .select2-selection__rendered { padding: 0 38px 0 14px; color: var(--tinta); font-size: 16px; line-height: 46px; }
#conteudo .pagina-checkout .select2-container .select2-selection--single .select2-selection__arrow { top: 11px; right: 8px; }
#conteudo .pagina-checkout .select2-container--open .select2-selection--single,
#conteudo .pagina-checkout .select2-container--focus .select2-selection--single { border-color: var(--marca-botao); box-shadow: 0 0 0 3px rgba(214, 3, 106, .16); }
/* Pais: a loja so entrega no Brasil. A linha vira o titulo "Endereco de cobranca" entre o contato e o endereco.
   Dono (19/09): o Woo tem cobranca e entrega; a entrega vai para a cobranca, a nao ser que o cliente marque
   "Entregar em outro endereco" (ai abre o bloco "Endereco de entrega"). */
#conteudo .pagina-checkout #billing_country_field { padding-top: 6px; border-top: 1px solid var(--linha); }
#conteudo .pagina-checkout #billing_country_field > label, #conteudo .pagina-checkout #billing_country_field .woocommerce-input-wrapper { display: none; }
#conteudo .pagina-checkout #billing_country_field::before { content: "Endereço de cobrança"; display: block; margin-top: 14px; font-family: var(--t-titulo); font-size: 20px; font-weight: 700; }
#conteudo .pagina-checkout #billing_country_field::after { content: "Por padrão, a entrega vai para este mesmo endereço."; display: block; margin-top: 4px; color: var(--tinta-2); font-size: 14px; }
#conteudo .pagina-checkout #shipping_country_field { display: none !important; }

/* "Entregar em outro endereco" e observacoes */
#conteudo .pagina-checkout #ship-to-different-address { margin: 0; font-family: var(--t-texto); font-size: 15px; }
#conteudo .pagina-checkout #ship-to-different-address label { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 700; cursor: pointer; }
#conteudo .pagina-checkout #ship-to-different-address input { width: 20px; height: 20px; margin: 0; accent-color: var(--marca-botao); }
#conteudo .pagina-checkout #ship-to-different-address::after { content: "Deixe desmarcado para receber no endereço de cobrança."; display: block; margin-top: 6px; padding-left: 30px; color: var(--tinta-2); font-size: 13.5px; font-weight: 500; }
#conteudo .pagina-checkout #ship-to-different-address:has(input:checked)::after { content: "Preencha abaixo o endereço onde vamos entregar."; }
#conteudo .pagina-checkout .shipping_address { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linha); }
#conteudo .pagina-checkout .shipping_address::before { content: "Endereço de entrega"; display: block; margin: 0 0 14px; font-family: var(--t-titulo); font-size: 20px; font-weight: 700; }
#conteudo .pagina-checkout .woocommerce-additional-fields { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--linha); }
#conteudo .pagina-checkout .woocommerce-additional-fields > h3 { margin-bottom: 14px; font-size: 20px; }

/* ── Duas telas (dono, 19/09): co-passo-1 = dados e endereco, co-passo-2 = entrega conferida, frete e pagamento.
   So valem com o JavaScript ligado (.co-js, posto pelo tema.js); sem ele tudo aparece numa tela, como antes. ── */
#conteudo .pagina-checkout .co-grade > .woocommerce-NoticeGroup { grid-column: 1 / -1; }
.co-passos, .co-seguir, .co-entrega { display: none; }
.co-js .co-passos { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.co-passo { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--tinta-2); font-size: 14.5px; font-weight: 700; }
.co-passo + .co-passo::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--contorno); }
.co-passo-n { display: grid; place-items: center; width: 28px; height: 28px; border: 1.5px solid var(--contorno); border-radius: 50%; background: #fff; color: var(--tinta-2); font-size: 14px; font-variant-numeric: tabular-nums; }
.co-passo[aria-current="step"] { color: var(--tinta); }
.co-passo[aria-current="step"] .co-passo-n { border-color: var(--marca-botao); background: var(--marca-botao); color: #fff; }
.co-passo.feito .co-passo-n { border-color: var(--imediato); background: var(--imediato); color: #fff; }
@media (max-width: 479px) {
  .co-js .co-passos { flex-wrap: nowrap; gap: 6px; }
  .co-passo { gap: 6px; font-size: 13px; white-space: nowrap; }
  .co-passo + .co-passo::before { width: 12px; }
  .co-passo-n { width: 24px; height: 24px; font-size: 13px; }
}

/* Tela 1: sem pagamento; no celular o resumo tambem espera a tela 2 */
.co-js.co-passo-1 #payment { display: none; }
.co-js.co-passo-1 .co-seguir { display: grid; gap: 10px; }
@media (max-width: 999px) { .co-js.co-passo-1 .co-resumo { display: none; } }
#conteudo .pagina-checkout .co-continuar { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 56px; margin: 0; padding: 0 20px; border: 0; border-radius: var(--raio-controle); background: var(--marca-botao); box-shadow: 0 8px 22px rgba(214, 3, 106, .28); color: #fff; font-family: var(--t-titulo); font-size: 19px; font-weight: 700; letter-spacing: .01em; cursor: pointer; transition: background-color .16s, transform .12s; }
#conteudo .pagina-checkout .co-continuar:hover { background: var(--marca-forte); }
#conteudo .pagina-checkout .co-continuar:active { transform: scale(.98); }
#conteudo .pagina-checkout .co-continuar:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
#conteudo .pagina-checkout .co-continuar .ic { width: 20px; height: 20px; }
.co-seguir-nota { margin: 0; color: var(--tinta-2); font-size: 13.5px; text-align: center; }
.co-seguir-aviso { margin: 0; padding: 11px 14px; border-radius: var(--raio-controle); background: #fdecea; color: #a8201a; font-size: 14px; font-weight: 700; }
.co-seguir-aviso[hidden] { display: none; }

/* Tela 2: uma coluna so, no meio: onde entregar, resumo com o frete, pagamento */
.co-js.co-passo-2 .co-dados { display: none; }
.co-js.co-passo-2 .co-entrega { display: block; }
.co-js.co-passo-2.co-grade { grid-template-columns: minmax(0, 680px); justify-content: center; }
.co-entrega-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
#conteudo .pagina-checkout .co-entrega h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 21px; outline: none; }
.co-entrega h3 .ic { width: 22px; height: 22px; color: var(--marca-texto); }
#conteudo .pagina-checkout .co-alterar { flex: none; height: 38px; margin: 0; padding: 0 16px; border: 1.5px solid var(--contorno); border-radius: 999px; background: #fff; color: var(--tinta); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: border-color .16s, transform .12s; }
#conteudo .pagina-checkout .co-alterar:hover { border-color: var(--tinta); }
#conteudo .pagina-checkout .co-alterar:active { transform: scale(.97); }
.co-entrega-dados { display: grid; gap: 2px; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.co-entrega-dados b { font-size: 16px; }
.co-entrega-dados .co-entrega-extra { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--linha); color: var(--tinta-2); font-size: 14px; }
.co-entrega-dados .co-entrega-montagem { color: var(--imediato); font-weight: 700; }

/* Frete SO na tela 1 (dono, 19/09): o bloco "Frete" com as opcoes do Woo; o Woo o refaz a cada conta (.co-frete) */
.co-frete[hidden] { display: none; }
#conteudo .pagina-checkout .co-frete h3 { margin-bottom: 6px; }
.co-frete-nota { margin: 0 0 12px; color: var(--tinta-2); font-size: 14px; }
.co-frete { transition: opacity .15s ease-out; }
.co-frete.carregando { opacity: .55; pointer-events: none; }
#conteudo .pagina-checkout .co-frete-tabela,
#conteudo .pagina-checkout .co-frete-tabela tbody,
#conteudo .pagina-checkout .co-frete-tabela tr,
#conteudo .pagina-checkout .co-frete-tabela td { display: block; width: auto; margin: 0; padding: 0; border: 0; background: none; text-align: left; }
#conteudo .pagina-checkout .co-frete-tabela th { display: none; }
#conteudo .pagina-checkout .co-frete-tabela td > p { margin: 0; color: var(--tinta-2); font-size: 14px; line-height: 1.45; }
#conteudo .pagina-checkout .co-frete #shipping_method { margin: 0; }
#conteudo .pagina-checkout .co-frete #shipping_method li { flex-wrap: wrap; padding: 13px 14px; font-size: 15px; }
#conteudo .pagina-checkout .co-frete #shipping_method li > p { flex: 1 1 100%; margin: 0 0 0 28px; color: var(--tinta-2); font-size: 13px; font-weight: 500; }
#conteudo .pagina-checkout .co-frete #shipping_method li > p small { font-size: inherit; }

/* No resumo o frete e so leitura (woocommerce/checkout/att-frete-resumo.php) */
#conteudo .pagina-checkout .woocommerce-checkout-review-order-table tr.co-frete-linha { flex-wrap: nowrap; align-items: center; }
#conteudo .pagina-checkout .woocommerce-checkout-review-order-table tr.co-frete-linha td { flex: 0 1 auto; display: flex; align-items: baseline; gap: 8px; text-align: right; }
.co-frete-linha .co-frete-nome { color: var(--tinta-2); font-size: 13.5px; font-weight: 600; }

/* Tela 2 = somente o pagamento: sai o titulo do resumo, os produtos, subtotal e frete; fica o TOTAL a pagar */
.co-pagamento-tit { display: none; }
#conteudo .pagina-checkout .co-js.co-passo-2 .co-pagamento-tit { display: block; margin-bottom: 12px; }
#conteudo .pagina-checkout .co-js.co-passo-2 #order_review_heading,
#conteudo .pagina-checkout .co-js.co-passo-2 .woocommerce-checkout-review-order-table tbody,
#conteudo .pagina-checkout .co-js.co-passo-2 .woocommerce-checkout-review-order-table tfoot tr:not(.order-total),
#conteudo .pagina-checkout .co-js.co-passo-2 .co-garantia-entrega { display: none; }
#conteudo .pagina-checkout .co-js.co-passo-2 .woocommerce-checkout-review-order-table tr.order-total { margin: 0; padding: 12px 16px; border: 0; border-radius: var(--raio-controle); background: var(--superficie); }

/* Montagem da raquete (so com madeira + borracha no carrinho) */
.montagem { margin: 0 0 16px; }
.montagem-opcao { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) 26px; align-items: center; gap: 14px; margin: 0; padding: 14px 16px; border: 1.5px solid var(--contorno); border-radius: var(--raio-cartao); background: #fff; cursor: pointer; transition: border-color .16s, background-color .16s; }
.montagem-opcao:hover { border-color: var(--marca-linha); }
.montagem-opcao input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.montagem-opcao:has(input:focus-visible) { outline: 2px solid var(--marca-botao); outline-offset: 2px; }
.montagem-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--raio-cartao); background: var(--marca-claro); color: var(--marca-texto); }
.montagem-ic .ic { width: 26px; height: 26px; }
.montagem-txt { display: grid; gap: 2px; line-height: 1.3; }
.montagem-txt b { font-family: var(--t-titulo); font-size: 18px; font-weight: 700; }
.montagem-txt b em { color: var(--marca-texto); font-style: normal; }
.montagem-txt > span { color: var(--tinta-2); font-size: 13.5px; }
.montagem-marca { display: grid; place-items: center; width: 26px; height: 26px; border: 1.5px solid var(--contorno); border-radius: 7px; background: #fff; color: transparent; transition: background-color .14s, border-color .14s, color .14s; }
.montagem-marca .ic { width: 16px; height: 16px; }
.montagem.pedida .montagem-opcao { border-color: var(--imediato); background: var(--imediato-fundo); }
.montagem.pedida .montagem-ic { background: #fff; color: var(--imediato); }
.montagem.pedida .montagem-marca { border-color: var(--imediato); background: var(--imediato); color: #fff; }
.montagem-detalhes { margin-top: 10px; }
.montagem-detalhes[hidden] { display: none; }
.montagem-detalhes label { display: block; margin: 0 0 6px; font-size: 13.5px; font-weight: 700; }
.montagem-detalhes label span { color: var(--tinta-2); font-weight: 500; }
.montagem-detalhes textarea { width: 100%; min-height: 88px; padding: 12px 14px; border: 1px solid var(--contorno); border-radius: var(--raio-controle); font: inherit; font-size: 16px; line-height: 1.45; resize: vertical; }
.montagem-detalhes textarea:focus { border-color: var(--marca-botao); box-shadow: 0 0 0 3px rgba(214, 3, 106, .16); outline: none; }

/* Resumo do pedido */
#conteudo .pagina-checkout .co-resumo #order_review_heading { margin-bottom: 12px; }
#conteudo .pagina-checkout table.woocommerce-checkout-review-order-table { display: block; width: 100%; margin: 0; border: 0; border-radius: 0; }
#conteudo .pagina-checkout .woocommerce-checkout-review-order-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#conteudo .pagina-checkout .woocommerce-checkout-review-order-table tbody,
#conteudo .pagina-checkout .woocommerce-checkout-review-order-table tfoot { display: grid; }
#conteudo .pagina-checkout .woocommerce-checkout-review-order-table tr { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--linha); }
#conteudo .pagina-checkout .woocommerce-checkout-review-order-table tbody tr:first-child { border-top: 0; padding-top: 4px; }
#conteudo .pagina-checkout .woocommerce-checkout-review-order-table th,
#conteudo .pagina-checkout .woocommerce-checkout-review-order-table td { display: block; padding: 0; border: 0; background: none; font-weight: inherit; text-align: left; }
#conteudo .pagina-checkout .woocommerce-checkout-review-order-table td.product-name { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 12px; align-items: center; min-width: 0; font-size: 14px; line-height: 1.35; }
.co-item-foto { grid-row: span 3; display: block; width: 56px; height: 56px; padding: 4px; border: 1px solid var(--linha); border-radius: var(--raio-cartao); background: #fff; }
.co-item-foto img { display: block; width: 100%; height: 100%; object-fit: contain; }
.co-item-nome { font-weight: 700; }
#conteudo .pagina-checkout .woocommerce-checkout-review-order-table td.product-name .product-quantity { grid-column: 2; color: var(--tinta-2); font-size: 13px; font-weight: 700; }
#conteudo .pagina-checkout .woocommerce-checkout-review-order-table td.product-name p.stock { grid-column: 2; margin: 3px 0 0; color: var(--imediato); font-size: 12.5px; font-weight: 700; }
#conteudo .pagina-checkout .woocommerce-checkout-review-order-table td.product-name p.stock.available-on-backorder { color: var(--padrao); }
#conteudo .pagina-checkout .woocommerce-checkout-review-order-table td.product-name dl.variation { grid-column: 2; margin: 2px 0 0; color: var(--tinta-2); font-size: 12.5px; }
#conteudo .pagina-checkout .woocommerce-checkout-review-order-table td.product-name dl.variation dt,
#conteudo .pagina-checkout .woocommerce-checkout-review-order-table td.product-name dl.variation dd,
#conteudo .pagina-checkout .woocommerce-checkout-review-order-table td.product-name dl.variation p { display: inline; margin: 0; }
#conteudo .pagina-checkout .woocommerce-checkout-review-order-table td.product-total { flex: none; font-weight: 700; white-space: nowrap; }
#conteudo .pagina-checkout .woocommerce-checkout-review-order-table tfoot th { color: var(--tinta-2); font-size: 14px; font-weight: 700; }
#conteudo .pagina-checkout .woocommerce-checkout-review-order-table tfoot td { text-align: right; font-weight: 700; }
#conteudo .pagina-checkout .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals { flex-wrap: wrap; align-items: flex-start; }
#conteudo .pagina-checkout .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td { flex: 1 1 100%; text-align: left; }
#conteudo .pagina-checkout #shipping_method { display: grid; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
#conteudo .pagina-checkout #shipping_method li { display: flex; align-items: center; gap: 10px; margin: 0; padding: 11px 12px; border: 1px solid var(--contorno); border-radius: var(--raio-controle); font-size: 14px; font-weight: 600; line-height: 1.3; }
#conteudo .pagina-checkout #shipping_method li:has(input:checked) { border-color: var(--marca-botao); background: var(--marca-claro); }
#conteudo .pagina-checkout #shipping_method li input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--marca-botao); }
#conteudo .pagina-checkout #shipping_method li label { flex: 1; display: flex; justify-content: space-between; gap: 10px; margin: 0; cursor: pointer; }
#conteudo .pagina-checkout .woocommerce-shipping-totals td > p { margin: 8px 0 0; color: var(--tinta-2); font-size: 13.5px; font-weight: 500; }
#conteudo .pagina-checkout .woocommerce-checkout-review-order-table tr.order-total { margin-top: 2px; padding-top: 14px; border-top: 1.5px solid var(--tinta); }
#conteudo .pagina-checkout .woocommerce-checkout-review-order-table tr.order-total th { color: var(--tinta); font-size: 16px; }
#conteudo .pagina-checkout .woocommerce-checkout-review-order-table tr.order-total .woocommerce-Price-amount { font-family: var(--t-titulo); font-size: 26px; font-weight: 700; }
#conteudo .pagina-checkout .woocommerce-checkout-review-order-table tr.order-total small { display: block; color: var(--tinta-2); font-size: 12px; font-weight: 500; }

/* Pagamento e o botao */
#conteudo .pagina-checkout #payment { margin-top: 18px; border-radius: 0; background: none; }
#conteudo .pagina-checkout #payment ul.payment_methods { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; list-style: none; }
#conteudo .pagina-checkout #payment ul.payment_methods::before, #conteudo .pagina-checkout #payment ul.payment_methods::after { content: none; }
#conteudo .pagina-checkout #payment ul.payment_methods li { margin: 0; padding: 12px 14px; border: 1px solid var(--contorno); border-radius: var(--raio-controle); background: #fff; line-height: 1.4; }
#conteudo .pagina-checkout #payment ul.payment_methods li:has(> input:checked) { border-color: var(--marca-botao); background: var(--marca-claro); }
#conteudo .pagina-checkout #payment ul.payment_methods li > input { width: 18px; height: 18px; margin: 0 8px 0 0; vertical-align: -3px; accent-color: var(--marca-botao); }
#conteudo .pagina-checkout #payment ul.payment_methods li > label { font-weight: 700; cursor: pointer; }
#conteudo .pagina-checkout #payment div.payment_box { margin: 10px 0 0; padding: 12px 14px; border-radius: var(--raio-controle); background: #fff; color: var(--tinta-2); font-size: 13.5px; }
#conteudo .pagina-checkout #payment div.payment_box::before { content: none; }
#conteudo .pagina-checkout #payment .woocommerce-notice, #conteudo .pagina-checkout #payment .woocommerce-info { margin: 0; }
#conteudo .pagina-checkout #payment div.form-row.place-order { margin: 16px 0 0; padding: 0; }
#conteudo .pagina-checkout .woocommerce-privacy-policy-text p { margin: 0 0 12px; color: var(--tinta-2); font-size: 12.5px; line-height: 1.45; }
#conteudo .pagina-checkout .woocommerce-privacy-policy-text a { color: var(--tinta); }
#conteudo .pagina-checkout #place_order { display: flex; align-items: center; justify-content: center; float: none; width: 100%; height: 56px; margin: 0; padding: 0 20px; border: 0; border-radius: var(--raio-controle); background: var(--marca-botao); box-shadow: 0 8px 22px rgba(214, 3, 106, .28); color: #fff; font-family: var(--t-titulo); font-size: 19px; font-weight: 700; letter-spacing: .01em; cursor: pointer; transition: background-color .16s, transform .12s; }
#conteudo .pagina-checkout #place_order:hover { background: var(--marca-forte); color: #fff; }
#conteudo .pagina-checkout #place_order:active { transform: scale(.98); }
#conteudo .pagina-checkout #place_order:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.co-garantias { display: grid; gap: 8px; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--linha); list-style: none; color: var(--tinta-2); font-size: 13.5px; }
.co-garantias li { display: flex; align-items: center; gap: 8px; }
.co-garantias .ic { flex: none; width: 18px; height: 18px; color: var(--tinta); }
.co-garantias a { color: var(--zap-texto); font-weight: 700; }
/* Enquanto o Woo recalcula (trocou o frete, o CEP): o resumo fica esmaecido, sem a nuvem branca de bolinhas */
#conteudo .pagina-checkout .blockUI.blockOverlay { background: rgba(255, 255, 255, .6) !important; }

/* Lugar de cada campo pelo ID. O script do plugin "Brazilian Market" reescreve as classes de largura e manda o
   Telefone para o fim DEPOIS de a pagina abrir (medido: o HTML do servidor vem certo, o do navegador nao); o ID
   ele nao mexe. A ordem aqui e a que ele deixa, entao a ordem na tela e a do Tab sao a mesma. */
#conteudo .pagina-checkout .woocommerce form.checkout .form-row { float: none; width: auto; grid-column: 1 / -1; }
#conteudo .pagina-checkout .woocommerce-input-wrapper { display: block; }
@media (min-width: 600px) {
  #conteudo .pagina-checkout #billing_first_name_field, #conteudo .pagina-checkout #billing_cpf_field,
  #conteudo .pagina-checkout #billing_postcode_field, #conteudo .pagina-checkout #billing_number_field,
  #conteudo .pagina-checkout #billing_neighborhood_field, #conteudo .pagina-checkout #billing_state_field,
  #conteudo .pagina-checkout #shipping_first_name_field, #conteudo .pagina-checkout #shipping_postcode_field,
  #conteudo .pagina-checkout #shipping_number_field, #conteudo .pagina-checkout #shipping_neighborhood_field { grid-column: 1; }
  #conteudo .pagina-checkout #billing_last_name_field, #conteudo .pagina-checkout #billing_email_field,
  #conteudo .pagina-checkout #billing_address_2_field, #conteudo .pagina-checkout #billing_city_field,
  #conteudo .pagina-checkout #billing_phone_field,
  #conteudo .pagina-checkout #shipping_last_name_field, #conteudo .pagina-checkout #shipping_address_2_field,
  #conteudo .pagina-checkout #shipping_city_field { grid-column: 2; }
}
/* Celular: linha inteira, menos nome | sobrenome e numero | complemento (curtos) */
@media (max-width: 599px) {
  #conteudo .pagina-checkout #billing_first_name_field, #conteudo .pagina-checkout #billing_number_field,
  #conteudo .pagina-checkout #shipping_first_name_field, #conteudo .pagina-checkout #shipping_number_field { grid-column: 1; }
  #conteudo .pagina-checkout #billing_last_name_field, #conteudo .pagina-checkout #billing_address_2_field,
  #conteudo .pagina-checkout #shipping_last_name_field, #conteudo .pagina-checkout #shipping_address_2_field { grid-column: 2; }
}
#conteudo .pagina-checkout .woocommerce-terms-and-conditions-wrapper a { color: var(--tinta); font-weight: 700; }
#conteudo .pagina-checkout .woocommerce-terms-and-conditions-checkbox-text { font-size: 14px; }
#conteudo .pagina-checkout .woocommerce-form__label-for-checkbox { display: flex; align-items: flex-start; gap: 10px; }
#conteudo .pagina-checkout .woocommerce-form__label-for-checkbox input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--marca-botao); }