/*
Theme Name: Catalogo Ana Paula
Theme URI: http://localhost:8080
Description: Child theme do Storefront para catalogo digital de perfumes. Modo catalogo, paleta rosa, mobile-first.
Author: Ana Paula
Template: storefront
Version: 1.0.0
Text Domain: catalogo-anapaula
*/

:root {
  /* Paleta tirada da LOGO "Coisas de Meninas" (child-theme/logo.png), pelo
     histograma do arquivo: roxo #8D108B na mancha, rosa #F84FA4 nas letras,
     roxo escuro #600672 na sombra.

     Por que o rosa da logo NAO e a cor de acao: #F84FA4 sobre branco da
     contraste de ~3:1, insuficiente para texto e para botao com letra branca.
     Ele entra como ACENTO (selos, hover, detalhe), e o roxo - que da 7,7:1 -
     assume precos, botoes e titulos. Assim combina com a logo e continua
     legivel. */
  --cat-rosa: #c41a96;        /* magenta-roxo: botoes e destaques (5,9:1) */
  --cat-rosa-escuro: #8d108b; /* roxo da logo: precos, titulos, hover (7,7:1) */
  --cat-rosa-vivo: #f84fa4;   /* rosa das letras da logo: acento */
  --cat-roxo-profundo: #600672;
  --cat-rosa-claro: #fcebf7;  /* fundo suave, rosado com toque de lilas */
  --cat-rosa-borda: #f5d2ec;
  --cat-texto: #3a0a38;       /* ameixa bem escura, da familia do roxo */
  --cat-texto-suave: #7b5a78;
  --cat-branco: #ffffff;
  --cat-raio: 16px;
  --cat-sombra: 0 2px 12px rgba(141, 16, 139, 0.10);
  --cat-sombra-hover: 0 6px 20px rgba(141, 16, 139, 0.18);
  --cat-fonte: "Nunito", "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ==========================================================================
   Base / tipografia arredondada
   ========================================================================== */
body,
button,
input,
select,
textarea,
.site-title,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--cat-fonte);
  color: var(--cat-texto);
}

body {
  background-color: var(--cat-rosa-claro);
  font-size: 1rem;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

a {
  color: var(--cat-rosa-escuro);
}

a:hover,
a:focus {
  color: var(--cat-rosa);
}

/* ==========================================================================
   Cabecalho
   ========================================================================== */
/* O Storefront poe `overflow-x: hidden` no body e no .site. Isso transforma os
   dois em contexto de rolagem, e dentro de um contexto de rolagem o
   `position: sticky` do cabecalho simplesmente nao gruda. `clip` corta o
   transbordo horizontal do mesmo jeito, sem criar esse contexto. */
body,
.hfeed.site {
  overflow-x: clip;
}

.site-header {
  background-color: var(--cat-branco);
  border-bottom: 1px solid var(--cat-rosa-borda);
  /* Era 1.2em em cima e embaixo. Com a logo maior, o respiro vem dela. */
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  /* O Storefront deixa ~68px de folga depois do cabecalho. Com ele grudado no
     topo, essa folga vira espaco morto na primeira dobra.
     A regra dele e `.woocommerce-active .site-header`, mais especifica que
     `.site-header` - por isso a sobrescrita vem logo abaixo, com `body` na
     frente para ganhar em especificidade. */
  margin-bottom: 1.5rem;

  /* Fica no topo durante a rolagem. `sticky` e nao `fixed` de proposito: ele
     continua ocupando lugar no fluxo, entao nao ha como cobrir o inicio do
     conteudo nem precisa compensar com padding no corpo da pagina. */
  position: sticky;
  top: 0;
  /* Acima do catalogo e dos submenus do proprio menu (99999 dentro daqui, que
     e um contexto proprio). Abaixo dos flutuantes de WhatsApp/pedido (9999),
     que devem continuar por cima de tudo. */
  z-index: 200;
  box-shadow: 0 2px 10px rgba(58, 10, 56, 0.08);
}

/* Celular deitado: o cabecalho fixo comia 185px de uma tela de 375px de altura
   - 49%, sobrando 190px de catalogo e encobrindo 3 cards ao rolar. Girar o
   telefone e justamente o gesto de quem quer ver a foto maior, entao era a hora
   em que o espaco sumia.

   A consulta e por ALTURA, nao por largura: 812x375 deitado passa por qualquer
   media query de largura como se fosse desktop. Por isso os breakpoints de
   320/375/768/1280 ja validados nao sao afetados por esta regra. */
@media (max-height: 480px) and (orientation: landscape) {
  .site-header {
    position: static;
  }
}

/* Sobrescreve a folga que o Storefront aplica com
   `.home.post-type-archive-product .site-header { margin-bottom: 4.2358em }`
   (~68px). Sao TRES classes; para ganhar, aqui vao tres classes mais o `body`. */
body.woocommerce.woocommerce-page .site-header,
body.woocommerce-active.woocommerce .site-header {
  margin-bottom: 1.5rem;
}

/* Altura do cabecalho: a logo passou de 68 para 89px de altura, entao o espaco
   tem de sair de outro lugar. Os links do menu vinham com 24,6px de padding em
   cima e embaixo (49px so de respiro) e a logo deixava mais 23px de margem
   embaixo. Enxugando os dois, o cabecalho fica MENOR do que era antes mesmo com
   a logo bem maior. */
.site-header .site-branding {
  margin-bottom: 0.25rem;
}

@media (min-width: 768px) {
  .main-navigation ul.menu > li > a,
  .main-navigation ul.nav-menu > li > a {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

/* Logada no painel, a cliente tem a barra do WordPress fixa no topo. Sem isto
   o cabecalho gruda embaixo dela e some. */
body.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}

/* No celular o cabecalho precisa ocupar o minimo: a tela ja e curta e o
   catalogo e o que importa. */
@media (max-width: 767px) {
  .site-header {
    padding-top: 0.35em;
    padding-bottom: 0.35em;
  }
}

.site-header .site-title a,
.site-branding .site-title a {
  color: var(--cat-rosa-escuro);
  font-weight: 800;
}

.storefront-primary-navigation,
.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a {
  color: var(--cat-texto);
}

.main-navigation ul.menu > li > a:hover,
.main-navigation ul.nav-menu > li > a:hover {
  color: var(--cat-rosa);
}

/* ==========================================================================
   Esconder qualquer residuo de e-commerce
   (reforco visual; a remocao no servidor esta em functions.php)
   ========================================================================== */
.site-header-cart,
.site-header-cart .cart-contents,
.site-header-cart .widget_shopping_cart,
.widget_shopping_cart,
.woocommerce-cart-form,
.wc-block-mini-cart,
.wc-block-cart,
.wc-block-checkout,
form.cart .quantity,
form.cart button.single_add_to_cart_button,
.add_to_cart_button,
.added_to_cart,
.product .button.product_type_simple,
.product .button.product_type_variable,
.product .button.product_type_grouped,
.product .button.product_type_external,
.storefront-sticky-add-to-cart,
.woocommerce-message .button.wc-forward,
.woocommerce-breadcrumb ~ .woocommerce-message {
  display: none !important;
}

/* ==========================================================================
   Grade de produtos - MOBILE FIRST (base: 375px, 2 colunas)

   Era 1 coluna. Com card de 453px de altura, os 30 produtos da primeira
   pagina davam 14.061px - 17,3 telas de rolagem. Para percorrer os 337 seriam
   umas 150 telas, um produto de cada vez.

   Com 2 colunas cai para 4.798px, ou 5,9 telas: tres vezes menos. O card fica
   com 157px de largura e a foto com 131px, que continua legivel - e o formato
   que Shopee, Shein e Mercado Livre usam no celular, justamente porque
   catalogo grande no telefone se navega comparando, nao rolando.
   ========================================================================== */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}

/* O Storefront usa um clearfix ::before/::after nessa lista, herdado do
   layout antigo com floats. Num container grid esses pseudo-elementos contam
   como ITENS e ocupam uma celula cada - o que abria um buraco do tamanho de um
   card no inicio da grade, em todas as paginas. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  content: none !important;
  display: none !important;
}

/* Neutraliza o float e as larguras percentuais do Storefront,
   que brigam com o grid. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last,
.woocommerce-page ul.products li.product.first,
.woocommerce-page ul.products li.product.last {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  clear: none !important;
}

/* ==========================================================================
   Card do produto
   ========================================================================== */
.woocommerce ul.products li.product {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--cat-branco);
  border: 1px solid var(--cat-rosa-borda);
  border-radius: var(--cat-raio);
  box-shadow: var(--cat-sombra);
  padding: 0.75rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.woocommerce ul.products li.product:hover {
  box-shadow: var(--cat-sombra-hover);
  transform: translateY(-2px);
}

/* Imagem com proporcao consistente (quadrada) */
.woocommerce ul.products li.product a img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: calc(var(--cat-raio) - 6px);
  margin: 0 0 0.75rem;
  background: var(--cat-rosa-claro);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  padding: 0;
  margin: 0 0 0.4rem;
  color: var(--cat-texto);
}

/* O link envolve foto, nome e preco; o botao e irmao dele dentro do card.
   Como o link era um bloco comum, o `margin-top: auto` do preco nao tinha onde
   agir - `auto` so empurra dentro de um flex. Resultado: em produto de nome
   curto o preco e o botao subiam, e numa mesma fileira os botoes ficavam em
   alturas diferentes. Tornando o link um flex que ocupa a altura sobrando, o
   preco desce ate o fim e os botoes alinham. */
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.woocommerce ul.products li.product .price {
  display: block;
  margin-top: auto;
  color: var(--cat-rosa-escuro);
  font-size: 1.05rem;
  font-weight: 800;
  text-align: center;
}

/* O preco vive dentro de um flex (`.cat-precos`, que acomoda varejo e atacado
   lado a lado na area de atacado). Num flex o `text-align` do pai nao move os
   filhos - quem centraliza e o `justify-content`. Sem isto o valor ficava
   encostado a esquerda, com o nome do produto centralizado logo acima. */
.woocommerce ul.products li.product .cat-precos {
  justify-content: center;
}

.woocommerce ul.products li.product .price del {
  color: var(--cat-texto-suave);
  font-weight: 500;
  opacity: 0.7;
}

.woocommerce ul.products li.product .star-rating {
  display: none;
}

/* ==========================================================================
   Selo de "Esgotado" / "Promocao"
   ========================================================================== */
.cat-selo-esgotado {
  position: absolute;
  top: 1.1rem;
  left: 1.1rem;
  z-index: 3;
  background: rgba(61, 43, 49, 0.88);
  color: var(--cat-branco);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
}

/* Esmaece a imagem de produtos esgotados */
.woocommerce ul.products li.product.outofstock a img,
.product.outofstock .woocommerce-product-gallery img {
  opacity: 0.55;
}

.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
  background: var(--cat-rosa);
  color: var(--cat-branco);
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.7rem;
  min-height: auto;
  min-width: auto;
  line-height: 1;
  padding: 0.35rem 0.65rem;
  top: 1.1rem;
  right: 1.1rem;
  left: auto;
  margin: 0;
}

/* Selo grande na pagina do produto */
.single-product .cat-selo-esgotado-single {
  display: inline-block;
  background: rgba(61, 43, 49, 0.88);
  color: var(--cat-branco);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  margin: 0 0 1rem;
}

/* ==========================================================================
   Pagina do produto individual
   ========================================================================== */
.single-product div.product .summary .price {
  color: var(--cat-rosa-escuro);
  font-size: 1.6rem;
  font-weight: 800;
}

.single-product div.product .product_title {
  font-size: 1.5rem;
  line-height: 1.25;
}

.single-product div.product .woocommerce-product-gallery img {
  border-radius: var(--cat-raio);
}

/* ==========================================================================
   Botao flutuante de WhatsApp
   ========================================================================== */
.cat-whatsapp-flutuante {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.cat-whatsapp-flutuante:hover,
.cat-whatsapp-flutuante:focus {
  transform: scale(1.07);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.32);
  background: #1fb955;
}

.cat-whatsapp-flutuante:focus-visible {
  outline: 3px solid var(--cat-rosa-escuro);
  outline-offset: 3px;
}

.cat-whatsapp-flutuante svg {
  width: 32px;
  height: 32px;
  fill: #ffffff;
  display: block;
}

/* Respeita quem prefere menos animacao */
@media (prefers-reduced-motion: reduce) {
  .cat-whatsapp-flutuante,
  .woocommerce ul.products li.product {
    transition: none;
  }
  .cat-whatsapp-flutuante:hover,
  .woocommerce ul.products li.product:hover {
    transform: none;
  }
}

/* ==========================================================================
   Rodape
   ========================================================================== */
.site-footer {
  background-color: var(--cat-branco);
  border-top: 1px solid var(--cat-rosa-borda);
  color: var(--cat-texto-suave);
  /* espaco pro botao de whatsapp nao cobrir conteudo */
  padding-bottom: 90px;
}

.site-footer a {
  color: var(--cat-rosa-escuro);
}

/* ==========================================================================
   Breakpoints - progressivamente mais colunas
   ========================================================================== */

/* Celular grande: continuam 2 colunas, com mais respiro entre os cards. */
@media (min-width: 480px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    gap: 1.15rem;
  }
}

/* Tablet: 3 colunas */
@media (min-width: 768px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
  }

  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 1rem;
  }

  .single-product div.product .product_title {
    font-size: 2rem;
  }

  .site-footer {
    padding-bottom: 2em;
  }
}

/* Desktop: 4 colunas */
@media (min-width: 1024px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.6rem;
  }

  .cat-whatsapp-flutuante {
    right: 28px;
    bottom: 28px;
    width: 62px;
    height: 62px;
  }
}

/* ==========================================================================
   Topo da vitrine: busca + atalhos de secao
   Mobile-first. Existe porque no celular o menu do tema vira hamburguer, e
   a cliente chega pelo link do WhatsApp - os atalhos precisam estar
   visiveis sem abrir nada.
   ========================================================================== */
.cat-topo {
  margin: 0 0 1.5rem;
}

/* --- Busca --- */
.cat-busca {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0 0 1rem;
  background: var(--cat-branco);
  border: 2px solid var(--cat-rosa-borda);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: var(--cat-sombra);
}

.cat-busca:focus-within {
  border-color: var(--cat-rosa);
}

.cat-busca input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0.85rem 1.1rem;
  font-family: var(--cat-fonte);
  font-size: 1rem;
  color: var(--cat-texto);
  -webkit-appearance: none;
  appearance: none;
}

.cat-busca input[type="search"]:focus {
  outline: none;
  box-shadow: none;
}

.cat-busca input[type="search"]::placeholder {
  color: var(--cat-texto-suave);
  opacity: 1;
}

.cat-busca button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  border: 0;
  border-radius: 0;
  background: var(--cat-rosa);
  color: var(--cat-branco);
  cursor: pointer;
  transition: background 0.2s ease;
}

.cat-busca button:hover,
.cat-busca button:focus {
  background: var(--cat-rosa-escuro);
}

/* --- Atalhos de secao --- */
.cat-atalhos ul {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0.15rem 0 0.6rem;
  list-style: none;
  /* No celular a faixa rola na horizontal, em vez de quebrar em 3 linhas. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.cat-atalhos ul::-webkit-scrollbar {
  display: none;
}

.cat-atalhos li {
  margin: 0;
  flex: 0 0 auto;
}

.cat-atalho {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border: 1.5px solid var(--cat-rosa-borda);
  border-radius: 999px;
  background: var(--cat-branco);
  color: var(--cat-texto);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.cat-atalho:hover,
.cat-atalho:focus {
  border-color: var(--cat-rosa);
  color: var(--cat-rosa-escuro);
  text-decoration: none;
}

.cat-atalho.is-ativo {
  background: var(--cat-rosa);
  border-color: var(--cat-rosa);
  color: var(--cat-branco);
}

.cat-atalho-num {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--cat-rosa-claro);
  color: var(--cat-rosa-escuro);
}

.cat-atalho.is-ativo .cat-atalho-num {
  background: rgba(255, 255, 255, 0.28);
  color: var(--cat-branco);
}

/* Tablet: a busca ganha largura maxima, mas a faixa de atalhos continua
   rolando na horizontal - os 6 atalhos so cabem inteiros perto de 1060px, e
   liberar a quebra aqui deixava o "Kits" sozinho na segunda linha. */
@media (min-width: 768px) {
  .cat-busca {
    max-width: 30rem;
  }

  .cat-atalho {
    font-size: 0.95rem;
    padding: 0.55rem 1rem;
  }
}

/* Do tablet para cima a busca ganha largura maxima (30rem) e passa a ser mais
   estreita que a faixa de categorias. Sem centralizar, ela fica encostada a
   esquerda com a fileira de categorias ocupando a largura toda logo abaixo.
   Abaixo de 768px ela e fluida e ocupa tudo, entao nao ha o que centralizar. */
@media (min-width: 768px) {
  .cat-busca {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==========================================================================
   Precos: varejo + atacado no mesmo produto
   ========================================================================== */
.cat-precos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1.1rem;
  align-items: baseline;
}

.cat-preco {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.15;
}

.cat-preco-rotulo {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cat-texto-suave);
}

.cat-preco-valor {
  font-size: 1.05rem;
  font-weight: 800;
}

.cat-preco--varejo .cat-preco-valor {
  color: var(--cat-texto);
}

/* O atacado e o preco-destaque: e o que a revendedora vem buscar. */
.cat-preco--atacado .cat-preco-valor {
  color: var(--cat-rosa);
}

.cat-preco--atacado .cat-preco-rotulo {
  color: var(--cat-rosa-escuro);
}

.cat-preco-minimo {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--cat-texto-suave);
}

.cat-preco-consultar {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cat-texto-suave);
}

/* O wc_price() vem embrulhado num <span class="woocommerce-Price-amount">;
   neutraliza o tamanho herdado para o rotulo mandar no visual. */
.cat-preco-valor .woocommerce-Price-amount {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

/* ==========================================================================
   Seletor de ordenacao
   O padrao do Storefront ocupa a largura toda e destoa do resto. Aqui vira
   uma pilula compacta, alinhada a direita, com seta propria.
   ========================================================================== */
/* O titulo "Catalogo" vinha com 96px de respiro embaixo, o que jogava a barra
   de resultados e a grade para muito longe do titulo.
   Vem do woocommerce.css, num `padding` de atalho (`0 0 5.99684em`) dentro de
   @media (min-width: 768px), com seletor de duas classes. Por isso a correcao
   precisa (a) estar na mesma media query e (b) ter especificidade maior - daí
   o `body` na frente. */
.woocommerce-products-header {
  padding-bottom: 0;
  margin-bottom: 0.6rem;
}

@media (min-width: 768px) {
  body .woocommerce-products-header,
  body.storefront-full-width-content .woocommerce-products-header {
    padding-bottom: 0;
  }
}

.woocommerce-products-header .page-title {
  margin-bottom: 0;
}

.storefront-sorting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Era `space-between`. Com ele, os dois blocos vazios que o WooCommerce
     imprime (avisos e paginacao) entravam na distribuicao e empurravam a
     contagem para o meio da linha - ela aparecia em x=631 numa grade que
     comeca em x=101. Agora cada um se ancora sozinho, pelas margens `auto`
     abaixo: contagem no inicio do primeiro card, seletor no fim do ultimo. */
  justify-content: flex-start;
  gap: 0.5rem 1rem;
  margin: 0 0 0.9rem;
  padding: 0;
  border: 0;
  font-size: 0.85rem;
}

/* Sem isto o wrapper de avisos, mesmo vazio, ainda consome o `gap` e desloca a
   contagem alguns pixels para a direita. */
.storefront-sorting > .woocommerce-notices-wrapper:empty {
  display: none;
}

/* O Storefront poe um clearfix `::before`/`::after` aqui. Num container flex
   eles deixam de ser clearfix e viram DOIS itens de largura zero, cada um
   consumindo um `gap` de 16px - a contagem comecava em x=133 numa grade que
   comeca em x=101. Mesma armadilha que ja tinha aberto um buraco na grade de
   produtos. */
.storefront-sorting::before,
.storefront-sorting::after {
  content: none;
}

/* Encosta na borda esquerda do container - a mesma do primeiro card. */
.woocommerce-result-count {
  margin: 0 auto 0 0;
  font-size: 0.82rem;
  color: var(--cat-texto-suave);
  order: 1;
}

/* Empurrado para a borda direita - a mesma do ultimo card da linha. */
.woocommerce-ordering {
  margin: 0 0 0 auto;
  order: 2;
}

.woocommerce-ordering select {
  width: auto;
  max-width: 100%;
  padding: 0.4rem 2rem 0.4rem 0.85rem;
  border: 1.5px solid var(--cat-rosa-borda);
  border-radius: 999px;
  background-color: var(--cat-branco);
  color: var(--cat-texto);
  font-family: var(--cat-fonte);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Seta desenhada em SVG inline - sem imagem externa. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23b11570' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 0.7rem auto;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce-ordering select:hover {
  border-color: var(--cat-rosa);
}

.woocommerce-ordering select:focus {
  outline: none;
  border-color: var(--cat-rosa);
  box-shadow: 0 0 0 3px rgba(228, 32, 146, 0.15);
}

/* A paginacao fica na propria linha, para nao disputar espaco. */
.storefront-sorting .woocommerce-pagination {
  order: 3;
  flex: 1 0 100%;
  margin: 0.25rem 0 0;
  text-align: left;
}

@media (min-width: 768px) {
  .storefront-sorting .woocommerce-pagination {
    flex: 0 0 auto;
    margin: 0;
    text-align: right;
  }
}

/* ==========================================================================
   Atalhos: acabamento e comportamento em uma linha
   ========================================================================== */

/* A faixa rola na horizontal ate os 6 atalhos caberem inteiros (~1060px).
   Antes disso o "Kits" quebrava sozinho numa segunda linha. */
.cat-atalhos {
  position: relative;
}

/* Dica visual de que ha mais conteudo para o lado, enquanto rola. */
.cat-atalhos::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 2.5rem;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(to right, rgba(254, 225, 242, 0), var(--cat-rosa-claro));
}

.cat-atalho {
  /* Acabamento: leve elevacao e transicao mais suave no toque/hover. */
  box-shadow: 0 1px 3px rgba(177, 21, 112, 0.06);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease,
    transform 0.15s ease, box-shadow 0.2s ease;
}

.cat-atalho:hover,
.cat-atalho:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(177, 21, 112, 0.16);
}

.cat-atalho:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(177, 21, 112, 0.10);
}

.cat-atalho.is-ativo {
  box-shadow: 0 3px 10px rgba(228, 32, 146, 0.28);
}

.cat-atalho.is-ativo:hover {
  box-shadow: 0 5px 14px rgba(228, 32, 146, 0.34);
}

/* --------------------------------------------------------------------------
   Segunda linha: subcategorias da secao atual.

   A versao anterior errava o alvo. Eu tinha deixado estes chips MENORES e mais
   apagados que os principais, para "nao competir" - e o efeito foi o oposto do
   necessario: uma cliente ficou perdida procurando "Feminino" e "Masculino"
   com os dois na tela, porque nada dizia que aquela fileira pertencia a
   Miniaturas. Eram so mais pilulas, iguais as de cima.

   Agora sao um BLOCO nomeado: fundo proprio, rotulo dizendo de quem sao, e
   chips do mesmo tamanho dos principais.
   -------------------------------------------------------------------------- */
.cat-subsecao {
  margin-top: 0.5rem;
  padding: 0.7rem 0.85rem 0.5rem;
  background: var(--cat-branco);
  border: 1.5px solid var(--cat-rosa-borda);
  border-radius: var(--cat-raio);
}

/* Sugestao de secao na busca. De proposito com a MESMA aparencia da caixa de
   subcategorias acima: e o mesmo gesto - "clique aqui para ir para a secao" - e
   a cliente ja aprendeu a reconhecer esse desenho. Inventar um terceiro estilo
   so daria mais uma coisa para decifrar. */
.cat-sugestao-secao {
  margin: 0 0 1rem;
  padding: 0.7rem 0.85rem 0.55rem;
  background: var(--cat-branco);
  border: 1.5px solid var(--cat-rosa-borda);
  border-radius: var(--cat-raio);
}

.cat-sugestao-rotulo {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--cat-rosa-escuro);
}

.cat-sugestao-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cat-sugestao-lista .cat-atalho {
  padding: 0.55rem 0.9rem;
  font-size: 0.9rem;
  background: var(--cat-rosa-claro);
}

.cat-subsecao-rotulo {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--cat-rosa-escuro);
}

.cat-subatalhos {
  margin-top: 0;
}

.cat-subatalhos .cat-atalho {
  /* 44px de altura: alvo confortavel para o dedo. Antes eram 35px. */
  padding: 0.55rem 0.9rem;
  font-size: 0.9rem;
  background: var(--cat-rosa-claro);
  border-color: var(--cat-rosa-borda);
  color: var(--cat-rosa-escuro);
  box-shadow: none;
}

.cat-subatalhos .cat-atalho:hover,
.cat-subatalhos .cat-atalho:focus-visible {
  background: #fff;
  border-color: var(--cat-rosa);
  box-shadow: 0 2px 8px rgba(177, 21, 112, 0.12);
}

/* A opcao aberta fica preenchida, igual aos atalhos principais - antes era so
   uma borda mais grossa, que no celular quase nao se distingue das outras. */
.cat-subatalhos .cat-atalho.is-ativo {
  background: var(--cat-rosa-escuro);
  border-color: var(--cat-rosa-escuro);
  color: var(--cat-branco);
  font-weight: 700;
  box-shadow: none;
}

.cat-subatalhos .cat-atalho-num {
  background: rgba(141, 16, 139, 0.10);
  color: var(--cat-rosa-escuro);
}

.cat-subatalhos .cat-atalho.is-ativo .cat-atalho-num {
  background: rgba(255, 255, 255, 0.28);
  color: var(--cat-branco);
}

/* Alvos de toque no celular: 44px e o minimo confortavel para o dedo. Os
   atalhos estavam com 35px e o seletor de ordenacao com 32px.
   `min-height` e nao padding: com padding a altura final depende da fonte e do
   line-height de cada elemento, e a conta nunca fecha nos 44 - a primeira
   tentativa parou em 37px. */
@media (max-width: 767px) {
  .cat-atalho {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }

  .woocommerce-ordering select {
    min-height: 44px;
  }

  /* Vinha do Storefront com 43px - o unico alvo que ficou abaixo dos 44 na
     auditoria, e logo o botao que abre o menu inteiro no celular. */
  .menu-toggle {
    min-height: 44px;
  }

  /* O botao principal de cada card. Estava com 39px. */
  .cat-add-pedido {
    min-height: 44px;
  }
}

/* A partir daqui os 6 atalhos cabem inteiros: para de rolar, centraliza e
   dispensa a sombra de "tem mais para o lado". */
/* Aqui os atalhos deixam de rolar e ficam centralizados.
   Continuam em `nowrap`: com `wrap`, bastava um chip nao caber para ele descer
   sozinho para a segunda linha - foi o que aconteceu com o "Sexshop" quando o
   "Todos" entrou e virou o oitavo. `safe center` centraliza quando ha espaco e,
   quando nao ha, volta a alinhar pela esquerda em vez de cortar o primeiro chip. */
@media (min-width: 1060px) {
  .cat-atalhos ul {
    justify-content: safe center;
    overflow-x: auto;
  }

  .cat-atalhos::after {
    display: none;
  }
}

/* Oito chips ("Todos" + 7 secoes) pedem ~1100px, e o container tem 1064px em
   1280 de tela. Em vez de quebrar a linha, o chip encolhe um pouco: 3px a menos
   de cada lado e 2px a menos de intervalo devolvem os ~60px que faltavam,
   mantendo a area de toque confortavel. */
@media (min-width: 1060px) {
  .cat-atalhos ul {
    gap: 0.375rem;
  }

  .cat-atalho {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
  }
}

/* ==========================================================================
   Menu do cabecalho numa linha so
   Os <li> do Storefront sao inline-block, e o espaco em branco entre eles no
   HTML soma ~4px por item. Com 7 itens isso estourava o container por poucos
   pixels e jogava o "Kits" para a linha de baixo. Flex elimina esse espaco.
   ========================================================================== */
@media (min-width: 768px) {
  .main-navigation ul.menu,
  .main-navigation ul.nav-menu {
    display: flex;
    flex-wrap: wrap;
    /* flex-start, nao center: itens COM submenu sao mais altos (o submenu conta
       na altura do li), e centralizar deixava "Kits" e "Atacado" 12px mais
       baixos que o resto. */
    align-items: flex-start;
    justify-content: flex-start;
  }

  /* Submenus voltam ao empilhamento normal. */
  .main-navigation ul.menu ul.sub-menu,
  .main-navigation ul.nav-menu ul.sub-menu,
  .main-navigation ul.menu ul.children,
  .main-navigation ul.nav-menu ul.children {
    display: block;
  }

  .main-navigation ul.menu > li > a,
  .main-navigation ul.nav-menu > li > a {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    font-size: 0.95rem;
  }
}

/* A partir daqui os 7 itens cabem folgados: garante linha unica. */
@media (min-width: 1024px) {
  .main-navigation ul.menu,
  .main-navigation ul.nav-menu {
    flex-wrap: nowrap;
  }
}

/* ==========================================================================
   Menu e submenus: acabamento
   O Storefront entrega o submenu cru - fundo cinza #f0f0f0, sem borda, sem
   arredondamento, sem sombra e com o texto em #333, que nao pertence a paleta.
   Aqui ele passa a ser um cartao branco, no mesmo vocabulario dos cards de
   produto e dos chips de categoria.
   ========================================================================== */

/* A setinha e um `::after` com fonte de icone e 15px de margem a esquerda.
   Sem `nowrap` ela caia para a linha de baixo, e era isso que fazia cada item
   do menu ter 65px de altura em vez de 41. */
.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a {
  white-space: nowrap;
  border-radius: 999px;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.main-navigation ul.menu > li > a::after,
.main-navigation ul.nav-menu > li > a::after {
  margin-left: 0.3rem;
  font-size: 0.7em;
  opacity: 0.55;
}

/* Item do topo: pilula suave no hover, e destaque na secao aberta. */
.main-navigation ul.menu > li > a:hover,
.main-navigation ul.nav-menu > li > a:hover,
.main-navigation ul.menu > li:hover > a,
.main-navigation ul.menu > li.focus > a {
  background-color: var(--cat-rosa-claro);
  color: var(--cat-rosa-escuro);
}

.main-navigation ul.menu > li.current-menu-item > a,
.main-navigation ul.menu > li.current-menu-parent > a,
.main-navigation ul.menu > li.current-menu-ancestor > a {
  color: var(--cat-rosa-escuro);
  font-weight: 700;
}

/* --- O cartao do submenu --- */
.main-navigation ul.menu ul.sub-menu,
.main-navigation ul.nav-menu ul.sub-menu,
.main-navigation ul.menu ul.children,
.main-navigation ul.nav-menu ul.children {
  padding: 0.4rem;
  min-width: 12rem;
  background-color: var(--cat-branco);
  border: 1px solid var(--cat-rosa-borda);
  border-radius: calc(var(--cat-raio) - 4px);
  box-shadow: var(--cat-sombra-hover);
}

.main-navigation ul.menu ul li,
.main-navigation ul.nav-menu ul li {
  border: 0;
}

.main-navigation ul.menu ul li a,
.main-navigation ul.nav-menu ul li a {
  padding: 0.5rem 0.75rem;
  border-radius: calc(var(--cat-raio) - 8px);
  color: var(--cat-texto);
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.main-navigation ul.menu ul li a:hover,
.main-navigation ul.nav-menu ul li a:hover,
.main-navigation ul.menu ul li a:focus,
.main-navigation ul.nav-menu ul li a:focus {
  background-color: var(--cat-rosa-claro);
  color: var(--cat-rosa-escuro);
}

/* No celular o menu vira lista empilhada: cartao flutuante ali nao faz sentido,
   viraria caixa dentro de caixa. Volta a ser uma lista recuada. */
@media (max-width: 767px) {
  .main-navigation ul.menu ul.sub-menu,
  .main-navigation ul.nav-menu ul.sub-menu,
  .main-navigation ul.menu ul.children,
  .main-navigation ul.nav-menu ul.children {
    min-width: 0;
    padding: 0 0 0 0.75rem;
    background-color: transparent;
    border: 0;
    border-left: 2px solid var(--cat-rosa-borda);
    border-radius: 0;
    box-shadow: none;
  }
}

/* ==========================================================================
   Lupa da busca - estava pequena demais
   ========================================================================== */
.cat-busca button {
  width: 3.5rem;
}

/* O <svg> e item flex dentro do botao e estava sendo encolhido para ~11px de
   largura, ficando achatado. flex:0 0 auto + min-width travam o tamanho. */
.cat-busca button svg {
  flex: 0 0 auto;
  width: 1.5rem;
  min-width: 1.5rem;
  height: 1.5rem;
}

/* ==========================================================================
   Botao "Mostrar mais"
   ========================================================================== */
.cat-mais {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0 2rem;
  text-align: center;
}

.cat-mais-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 12rem;
  min-height: 3rem;
  padding: 0.8rem 2rem;
  border: 0;
  border-radius: 999px;
  background: var(--cat-rosa);
  color: var(--cat-branco);
  font-family: var(--cat-fonte);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(228, 32, 146, 0.28);
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.cat-mais-botao:hover,
.cat-mais-botao:focus-visible {
  background: var(--cat-rosa-escuro);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(177, 21, 112, 0.34);
}

.cat-mais-botao:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(177, 21, 112, 0.24);
}

.cat-mais-info {
  margin: 0;
  font-size: 0.82rem;
  color: var(--cat-texto-suave);
}

/* Quando o JS assume, a paginacao numerada fica escondida via [hidden]. */
.woocommerce-pagination[hidden] {
  display: none;
}

/* ==========================================================================
   Confirmacao de maioridade (+18)
   ========================================================================== */
.cat-idade {
  max-width: 30rem;
  margin: 1rem auto 3rem;
  padding: 2rem 1.5rem;
  background: var(--cat-branco);
  border: 1px solid var(--cat-rosa-borda);
  border-radius: var(--cat-raio);
  box-shadow: var(--cat-sombra);
  text-align: center;
}

.cat-idade-selo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--cat-rosa);
  color: var(--cat-branco);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.cat-idade-titulo {
  margin: 0 0 0.75rem;
  font-size: 1.35rem;
  color: var(--cat-texto);
}

.cat-idade-texto {
  margin: 0 0 1.5rem;
  color: var(--cat-texto-suave);
}

.cat-idade-acoes {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.cat-idade-sim,
.cat-idade-nao {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: 0.85rem 1.25rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-family: var(--cat-fonte);
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
    transform 0.15s ease, box-shadow 0.2s ease;
}

.cat-idade-sim {
  background: var(--cat-rosa);
  color: var(--cat-branco);
  box-shadow: 0 3px 12px rgba(228, 32, 146, 0.28);
}

.cat-idade-sim:hover,
.cat-idade-sim:focus-visible {
  background: var(--cat-rosa-escuro);
  transform: translateY(-2px);
}

.cat-idade-nao {
  background: transparent;
  border-color: var(--cat-rosa-borda);
  color: var(--cat-texto-suave);
}

.cat-idade-nao:hover,
.cat-idade-nao:focus-visible {
  border-color: var(--cat-rosa);
  color: var(--cat-rosa-escuro);
}

.cat-idade-rodape {
  margin: 1.25rem 0 0;
  font-size: 0.78rem;
  color: var(--cat-texto-suave);
}

@media (min-width: 480px) {
  .cat-idade-acoes {
    flex-direction: row;
    justify-content: center;
  }

  .cat-idade-sim,
  .cat-idade-nao {
    width: auto;
    min-width: 11rem;
  }
}

/* ==========================================================================
   Escopo da busca e aviso de "nada encontrado"
   ========================================================================== */
.cat-busca-escopo {
  margin: -0.35rem 0 0.9rem;
  font-size: 0.8rem;
  color: var(--cat-texto-suave);
}

.cat-busca-escopo a {
  font-weight: 700;
  text-decoration: underline;
}

.cat-busca-sugestao {
  margin: 0 0 1.5rem;
  padding: 1rem 1.15rem;
  background: var(--cat-branco);
  border: 1px solid var(--cat-rosa-borda);
  border-left: 4px solid var(--cat-rosa);
  border-radius: calc(var(--cat-raio) - 6px);
  font-size: 0.92rem;
  color: var(--cat-texto);
}

.cat-busca-sugestao a {
  font-weight: 700;
}

@media (min-width: 768px) {
  .cat-busca-escopo {
    max-width: 30rem;
  }
}

/* ==========================================================================
   Pagina de endereco nao encontrado (404 proprio, ver child-theme/404.php)
   ========================================================================== */
.cat-404 {
  max-width: 32rem;
  margin: 1rem auto 3rem;
  padding: 2rem 1.5rem;
  background: var(--cat-branco);
  border: 1px solid var(--cat-rosa-borda);
  border-radius: var(--cat-raio);
  box-shadow: var(--cat-sombra);
  text-align: center;
}

.cat-404-titulo {
  margin: 0 0 0.75rem;
  font-size: 1.35rem;
}

.cat-404-texto {
  margin: 0 0 1.5rem;
  color: var(--cat-texto-suave);
}

.cat-404-busca {
  margin-bottom: 1.5rem;
  text-align: left;
}

.cat-404-volta {
  margin: 0;
}

.cat-404-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.8rem 2rem;
  border-radius: 999px;
  background: var(--cat-rosa);
  color: var(--cat-branco);
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 3px 12px rgba(228, 32, 146, 0.28);
  transition: background 0.2s ease, transform 0.15s ease;
}

.cat-404-botao:hover,
.cat-404-botao:focus {
  background: var(--cat-rosa-escuro);
  color: var(--cat-branco);
  transform: translateY(-2px);
  text-decoration: none;
}

/* ==========================================================================
   Area de atacado (senha)
   ========================================================================== */
.cat-atacado {
  max-width: 28rem;
  margin: 1rem auto 3rem;
  padding: 2rem 1.5rem;
  background: var(--cat-branco);
  border: 1px solid var(--cat-rosa-borda);
  border-radius: var(--cat-raio);
  box-shadow: var(--cat-sombra);
  text-align: center;
}

.cat-atacado-selo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--cat-rosa-claro);
  color: var(--cat-rosa-escuro);
}

.cat-atacado-titulo {
  margin: 0 0 0.6rem;
  font-size: 1.3rem;
}

.cat-atacado-texto {
  margin: 0 0 1.4rem;
  color: var(--cat-texto-suave);
  font-size: 0.95rem;
}

.cat-atacado-erro {
  margin: 0 0 1rem;
  padding: 0.7rem 1rem;
  border-radius: calc(var(--cat-raio) - 8px);
  background: #fdecef;
  border-left: 4px solid #c0392b;
  color: #8e2b21;
  font-size: 0.9rem;
  text-align: left;
}

.cat-atacado-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.cat-atacado-form input[type="password"] {
  width: 100%;
  padding: 0.85rem 1.1rem;
  border: 2px solid var(--cat-rosa-borda);
  border-radius: 999px;
  background: var(--cat-branco);
  font-family: var(--cat-fonte);
  font-size: 1rem;
  color: var(--cat-texto);
}

.cat-atacado-form input[type="password"]:focus {
  outline: none;
  border-color: var(--cat-rosa);
  box-shadow: 0 0 0 3px rgba(228, 32, 146, 0.15);
}

.cat-atacado-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.85rem 2rem;
  border: 0;
  border-radius: 999px;
  background: var(--cat-rosa);
  color: var(--cat-branco);
  font-family: var(--cat-fonte);
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(228, 32, 146, 0.28);
  transition: background 0.2s ease, transform 0.15s ease;
}

.cat-atacado-botao:hover,
.cat-atacado-botao:focus {
  background: var(--cat-rosa-escuro);
  color: var(--cat-branco);
  transform: translateY(-2px);
  text-decoration: none;
}

.cat-atacado-rodape {
  margin: 1.25rem 0 0;
  font-size: 0.82rem;
  color: var(--cat-texto-suave);
}

/* --- Barra fixa de "voce esta no atacado" --- */
.cat-barra-atacado {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.55rem 1rem;
  background: var(--cat-rosa-escuro);
  color: var(--cat-branco);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
}

.cat-barra-atacado a {
  color: var(--cat-branco);
  text-decoration: underline;
  font-weight: 800;
  white-space: nowrap;
}

/* --- Aviso de formas de pagamento --- */
.cat-aviso-pagamento {
  margin: 0 0 1.25rem;
  padding: 0.8rem 1.1rem;
  background: var(--cat-branco);
  border: 1px solid var(--cat-rosa-borda);
  border-left: 4px solid var(--cat-rosa);
  border-radius: calc(var(--cat-raio) - 6px);
  font-size: 0.88rem;
  color: var(--cat-texto);
}

.cat-aviso-pagamento.is-atacado {
  border-left-color: var(--cat-rosa-escuro);
}

/* Segunda linha do aviso: o detalhe (juros, condicoes) em corpo menor, para o
   recado principal continuar sendo lido de relance. */
.cat-aviso-detalhe {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  color: var(--cat-texto-suave);
}

/* Preco unico (varejo, na area publica) nao precisa de rotulo. */
.cat-preco--unico .cat-preco-valor {
  color: var(--cat-rosa-escuro);
  font-size: 1.1rem;
}

/* ==========================================================================
   Logo no cabecalho
   A imagem tem 600x410; sem limite de altura ela empurraria o menu para baixo.
   ========================================================================== */
.site-header .custom-logo-link {
  display: inline-block;
  margin: 0;
  padding: 0;
  max-width: 100%;
}

/* O Storefront tem `.site-header .custom-logo-link img { width:100%; max-width:210px }`,
   que e mais especifico que `.site-header .custom-logo` - por isso a altura
   ficava livre e a logo entrava com 157px, empurrando o menu para baixo.
   Aqui a regra casa a mesma especificidade.
   A largura manda e a altura acompanha (`height: auto`), entao a proporcao
   original 600x410 fica preservada: 130px de largura dao 89px de altura. */
.site-header .site-logo-anchor img,
.site-header .site-logo-link img,
.site-header .custom-logo-link img,
.site-header img.custom-logo {
  width: 130px;
  height: auto;
  max-width: 100%;
  max-height: none;
}

/* No tablet o menu ocupa duas linhas, entao a logo cede um pouco (110px, o piso
   da faixa pedida) para o cabecalho nao passar de 200px. */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-header .site-logo-anchor img,
  .site-header .site-logo-link img,
  .site-header .custom-logo-link img,
  .site-header img.custom-logo {
    width: 110px;
  }
}

/* No celular ela encolhe na mesma proporcao (92px -> 63px de altura), para o
   cabecalho sticky nao comer a tela. */
@media (max-width: 767px) {
  .site-header .site-logo-anchor img,
  .site-header .site-logo-link img,
  .site-header .custom-logo-link img,
  .site-header img.custom-logo {
    width: 92px;
  }
}

/* Com a logo no ar, o nome escrito viraria repeticao. Fica so para leitor de
   tela, sem sumir da arvore de acessibilidade. */
.site-header .site-branding .site-title,
.site-header .site-branding .site-description {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Este bloco limitava a logo a 68px de altura no desktop e anulava a largura de
   130px definida la em cima - a logo saia com 100px em vez de 130px. Agora a
   largura manda e a altura acompanha, preservando a proporcao 600x410. */
@media (min-width: 768px) {
  .site-header .site-logo-anchor img,
  .site-header .site-logo-link img,
  .site-header .custom-logo-link img,
  .site-header img.custom-logo {
    max-height: none;
  }
}

/* --- O rosa da logo como acento --- */
.cat-selo-esgotado {
  background: rgba(58, 10, 56, 0.88);
}

.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
  background: var(--cat-rosa-vivo);
  color: var(--cat-texto);
}

.cat-atalho.is-ativo {
  background: var(--cat-rosa-escuro);
  border-color: var(--cat-rosa-escuro);
  box-shadow: 0 3px 10px rgba(141, 16, 139, 0.28);
}

.cat-atalho.is-ativo:hover {
  box-shadow: 0 5px 14px rgba(141, 16, 139, 0.34);
}

.cat-idade-selo,
.cat-mais-botao,
.cat-404-botao,
.cat-atacado-botao,
.cat-busca button {
  background: var(--cat-rosa);
}

.cat-mais-botao:hover,
.cat-mais-botao:focus-visible,
.cat-404-botao:hover,
.cat-404-botao:focus,
.cat-atacado-botao:hover,
.cat-atacado-botao:focus,
.cat-busca button:hover,
.cat-busca button:focus {
  background: var(--cat-rosa-escuro);
}

.cat-barra-atacado {
  background: var(--cat-roxo-profundo);
}

/* Preco: roxo da logo, que tem contraste bom sobre branco */
.woocommerce ul.products li.product .price,
.cat-preco--atacado .cat-preco-valor,
.cat-preco--unico .cat-preco-valor {
  color: var(--cat-rosa-escuro);
}

/* Barra de "vendo como cliente" - visual diferente da de atacado, para nao
   confundir as duas. */
.cat-barra-atacado.is-visitante {
  background: var(--cat-texto);
}

/* ==========================================================================
   Pedido pelo WhatsApp
   ========================================================================== */
.cat-add-pedido {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  margin: 0.6rem 0 0;
  padding: 0.6rem 0.9rem;
  border: 1.5px solid var(--cat-rosa-borda);
  border-radius: 999px;
  background: var(--cat-branco);
  color: var(--cat-rosa-escuro);
  font-family: var(--cat-fonte);
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.cat-add-pedido:hover,
.cat-add-pedido:focus-visible {
  background: var(--cat-rosa);
  border-color: var(--cat-rosa);
  color: var(--cat-branco);
}

.cat-add-pedido.is-feito {
  background: var(--cat-rosa-escuro);
  border-color: var(--cat-rosa-escuro);
  color: var(--cat-branco);
}

.cat-add-pedido.is-feito .cat-add-pedido-texto::after {
  content: " ✓";
}

.cat-add-pedido-mais {
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1;
}

.cat-add-pedido--produto {
  width: auto;
  min-width: 15rem;
  padding: 0.85rem 1.6rem;
  font-size: 0.95rem;
}

/* --- Botao flutuante --- */
.cat-pedido-flutuante {
  position: fixed;
  right: 1rem;
  bottom: 5.5rem; /* acima do botao de WhatsApp */
  z-index: 998;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--cat-rosa);
  color: var(--cat-branco);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(141, 16, 139, 0.32);
}

.cat-pedido-flutuante[hidden] {
  display: none;
}

.cat-pedido-flutuante svg {
  width: 1.5rem;
  height: 1.5rem;
}

.cat-pedido-contador {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--cat-rosa-vivo);
  color: var(--cat-texto);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.35rem;
}

/* --- Painel --- */
.cat-pedido-painel {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(58, 10, 56, 0.45);
}

.cat-pedido-painel[hidden] {
  display: none;
}

.cat-pedido-caixa {
  width: 100%;
  max-width: 30rem;
  max-height: 85vh;
  overflow-y: auto;
  padding: 1.25rem;
  background: var(--cat-branco);
  border-radius: var(--cat-raio) var(--cat-raio) 0 0;
  box-shadow: 0 -6px 24px rgba(58, 10, 56, 0.2);
}

.cat-pedido-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.cat-pedido-topo h2 {
  margin: 0;
  font-size: 1.15rem;
}

.cat-pedido-fechar {
  border: 0;
  background: none;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--cat-texto-suave);
  cursor: pointer;
}

.cat-pedido-itens {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.cat-pedido-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--cat-rosa-borda);
}

.cat-pedido-item-nome {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
}

.cat-pedido-item-valor {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--cat-rosa-escuro);
  white-space: nowrap;
}

.cat-pedido-qtd {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* 2,75rem = 44px, o minimo confortavel para o dedo. Eram 32px, e ficam no
   caminho da venda: e onde a pessoa ajusta a quantidade antes de mandar o
   pedido. Errar o toque ali custa mais que em qualquer outro lugar do site. */
.cat-pedido-qtd button {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1.5px solid var(--cat-rosa-borda);
  border-radius: 50%;
  background: var(--cat-branco);
  color: var(--cat-rosa-escuro);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.cat-pedido-qtd button:hover {
  border-color: var(--cat-rosa);
  background: var(--cat-rosa);
  color: var(--cat-branco);
}

.cat-pedido-qtd-num {
  min-width: 1.4rem;
  text-align: center;
  font-weight: 800;
}

.cat-pedido-vazio {
  margin: 1.5rem 0;
  color: var(--cat-texto-suave);
  font-size: 0.9rem;
  text-align: center;
}

.cat-pedido-vazio[hidden],
.cat-pedido-rodape[hidden],
.cat-pedido-aviso[hidden] {
  display: none;
}

.cat-pedido-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 0.9rem;
  font-size: 1rem;
}

.cat-pedido-total-valor {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--cat-rosa-escuro);
}

.cat-pedido-aviso {
  margin: 0 0 0.9rem;
  padding: 0.6rem 0.8rem;
  border-radius: calc(var(--cat-raio) - 8px);
  background: var(--cat-rosa-claro);
  font-size: 0.82rem;
  color: var(--cat-texto);
}

.cat-pedido-enviar {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.1rem;
  margin-bottom: 0.6rem;
  border-radius: 999px;
  background: #25d366;
  color: #06331a;
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
}

.cat-pedido-enviar:hover,
.cat-pedido-enviar:focus {
  background: #1eb457;
  color: #06331a;
  text-decoration: none;
}

.cat-pedido-limpar {
  display: block;
  width: 100%;
  padding: 0.5rem;
  border: 0;
  background: none;
  color: var(--cat-texto-suave);
  font-family: var(--cat-fonte);
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}

@media (min-width: 768px) {
  .cat-pedido-painel {
    align-items: center;
  }

  .cat-pedido-caixa {
    border-radius: var(--cat-raio);
  }
}

/* ==========================================================================
   Modo estatico (demonstracao): busca no navegador e capa do +18
   ========================================================================== */
.cat-busca-estatica {
  margin: -0.4rem 0 1.2rem;
  padding: 0.9rem 1rem;
  background: var(--cat-branco);
  border: 1px solid var(--cat-rosa-borda);
  border-radius: var(--cat-raio);
  box-shadow: var(--cat-sombra);
  max-height: 26rem;
  overflow-y: auto;
}

.cat-busca-estatica[hidden] {
  display: none;
}

.cat-busca-estatica-titulo,
.cat-busca-estatica-vazio {
  margin: 0 0 0.6rem;
  font-size: 0.82rem;
  color: var(--cat-texto-suave);
}

.cat-busca-estatica-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cat-busca-estatica-lista a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--cat-rosa-borda);
  text-decoration: none;
  color: var(--cat-texto);
}

.cat-busca-estatica-lista a:hover {
  color: var(--cat-rosa-escuro);
}

.cat-busca-estatica-lista img {
  width: 2.8rem;
  height: 2.8rem;
  object-fit: cover;
  border-radius: 8px;
  flex: 0 0 auto;
}

.cat-busca-estatica-nome {
  flex: 1 1 auto;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.3;
}

.cat-busca-estatica-preco {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--cat-rosa-escuro);
  white-space: nowrap;
}

/* Capa do aviso +18 na demonstracao */
.cat-idade-capa {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(58, 10, 56, 0.75);
  overflow-y: auto;
}

.cat-idade-capa .cat-idade {
  margin: auto;
}

.cat-idade-capa .cat-idade-nao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}