/*
 * CSS do tema Luluzetys.
 *
 * As secoes de header, rodape e grade vem do mesmo desenho ja validado nos
 * partials do Git Pages, sem as gambiarras que so existiam la: nada de
 * @import (a fonte e enfileirada no functions.php), nada de !important e
 * nada de seletor duplicado com #git-pages-app — no tema nao ha CSS de
 * plugin competindo pelos mesmos componentes.
 */

:root {
  --lz-blush: #f2c5d1;
  --lz-rose: #c98f9f;
  --lz-paper: #faf8f6;
  --lz-white: #ffffff;
  --lz-linen: #ede2dc;
  --lz-ink: #252323;
  --lz-text: #6f6967;
  --lz-line: #e8e1de;
  --lz-font: "Montserrat", "Open Sans", Helvetica, Arial, sans-serif;

  /* UM raio para o site inteiro. Antes havia seis valores diferentes
     espalhados — 2px, 3px, 4px, 6px, 12px e 999px — e os tokens de raio
     so existiam dentro de .lz-produto, entao TUDO fora da pagina de
     produto caia no fallback de 12px. Botao com 3px parecia quadrado ao
     lado de uma foto com 12px. Mexa aqui e o site inteiro acompanha.
     999px continua reservado ao que e circulo de verdade: a bolinha de
     cor, a pill de tamanho e o "x" de remover do carrinho. */
  /* Rosa mais fechado, para o estado escolhido e para o brilho do
     hover. Sai do mesmo tom da marca, so com menos luz — assim a
     selecao se destaca sem introduzir uma cor nova no site. */
  --lz-rose-forte: #b47488;

  --lz-raio: 6px;
  --lz-p-raio: var(--lz-raio);
  --lz-p-raio-foto: var(--lz-raio);

  /* O WooCommerce arredonda os campos de formulario pela variavel dele,
     com valor padrao 4px, e aplica dentro de :where() — especificidade
     zero de proposito, para o tema poder mandar. Era por isso que os
     campos ficavam com 4px enquanto botoes e cartoes tinham 6px: nao
     era briga de seletor, era uma variavel que ninguem tinha apontado.
     Assim se usa a porta que o core deixou aberta, em vez de escalar
     especificidade contra ele. */
  --wc-form-border-radius: var(--lz-raio);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--lz-paper);
  color: var(--lz-ink);
  font-family: var(--lz-font);
  line-height: 1.5;
}

img {
  max-width: 100%;
  height: auto;
}

/* O link de pular so aparece para quem navega por teclado. */
.luluzetys-pular {
  position: absolute;
  left: -9999px;
}

.luluzetys-pular:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 999;
  padding: 12px 18px;
  border: 1px solid var(--lz-ink);
  border-radius: var(--lz-raio);
  background: var(--lz-white);
  font-size: 0.8rem;
  font-weight: 600;
}

.luluzetys-container {
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
}

.luluzetys-conteudo {
  padding: clamp(32px, 5vw, 64px) 0 clamp(48px, 7vw, 88px);
}

.luluzetys-titulo-secao {
  margin: 0 0 24px;
  color: var(--lz-ink);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
}

.luluzetys-texto {
  color: var(--lz-text);
  font-size: 0.94rem;
  line-height: 1.7;
}

.luluzetys-main {
  display: block;
  min-height: 40vh;
  background: var(--lz-paper);
}

.luluzetys-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 48px;
  padding: 0 28px;
  border: 1px solid var(--lz-blush);
  border-radius: var(--lz-raio);
  background: var(--lz-blush);
  color: var(--lz-ink);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.luluzetys-button:hover,
.luluzetys-button:focus {
  border-color: var(--lz-rose);
  background: var(--lz-white);
  color: var(--lz-rose);
}

/* Sem logo no Personalizar, o nome do site entra no lugar dela. */
.luluzetys-header-brand-texto,
.luluzetys-footer-brand-texto {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
}

.luluzetys-header-brand img {
  display: block;
  width: auto;
  height: 46px;
  max-width: 100%;
  object-fit: contain;
}

.luluzetys-footer-brand img {
  display: block;
  width: auto;
  height: 52px;
  max-width: 100%;
  object-fit: contain;
}

.luluzetys-header-sacola {
  position: relative;
}

.luluzetys-sacola-contador {
  position: absolute;
  top: 2px;
  right: 2px;
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--lz-rose);
  color: var(--lz-white);
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
}

/* ===== HEADER E GRADE DE PRODUTOS ===== */

/* O 400;500;600;700&display=swap");

.luluzetys-header {
  --lz-blush: #f2c5d1;
  --lz-rose: #c98f9f;
  --lz-paper: #faf8f6;
  --lz-white: #ffffff;
  --lz-ink: #252323;
  --lz-text: #6f6967;
  --lz-line: #e8e1de;
  --lz-linen: #ede2dc;
  --lz-font: "Montserrat", "Open Sans", Helvetica, Arial, sans-serif;
  color: var(--lz-ink);
  font-family: var(--lz-font);
  background: var(--lz-white);
}

.luluzetys-header *,
.luluzetys-header *::before,
.luluzetys-header *::after {
  box-sizing: border-box;
}

/* Um plugin injeta um logo "invisivel" como primeiro filho do body usando apenas */
/* width:0 e opacity:0, sem tirar do fluxo. Isso deixava 69px de branco acima da */
/* barra rosa. Aqui ele sai do fluxo sem ser removido do DOM. */
body > .hid_i {
  position: absolute;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.luluzetys-topbar {
  background: var(--lz-blush);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
}

.luluzetys-topbar-inner,
.luluzetys-header-inner {
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
}

.luluzetys-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 34px;
}

.luluzetys-topbar p {
  margin: 0;
  font-weight: 700;
}

.luluzetys-topbar-links,
.luluzetys-header-nav,
.luluzetys-header-actions {
  display: flex;
  align-items: center;
}

.luluzetys-topbar-links {
  gap: 18px;
}

.luluzetys-header a {
  color: inherit;
  text-decoration: none;
}

.luluzetys-header-main {
  border-bottom: 1px solid var(--lz-line);
  background: var(--lz-white);
}

/* Uma linha so: logo | menu centralizado | acoes. */
/* A posicao de cada item e explicita porque no HTML a nav vem antes */
/* das acoes; sem isso o grid manda os icones para a linha de baixo. */
/* As colunas laterais usam a mesma largura minima para o menu do meio */
/* ficar opticamente centralizado, e nao so centralizado no espaco que */
/* sobra entre uma logo estreita e tres icones largos. */
.luluzetys-header-inner {
  display: grid;
  grid-template-columns: minmax(140px, auto) 1fr minmax(140px, auto);
  gap: 0 20px;
  align-items: center;
  min-height: 84px;
}

.luluzetys-header-brand {
  display: inline-flex;
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  align-items: center;
  line-height: 0;
}
/* dela vence qualquer seletor de classe, deixando a logo em tamanho */
/* original (668x246). Mesmo caso do hero da home. */
.luluzetys-header-brand img {
  display: block;
  width: auto;
  height: 46px;
  max-width: 100%;
  object-fit: contain;
}

.luluzetys-header-nav {
  grid-column: 2;
  grid-row: 1;
  justify-content: center;
  min-width: 0;
  gap: clamp(12px, 1.6vw, 20px);
}

/* A rolagem fica neste wrapper, e nao na nav, porque overflow recorta */
/* posicionamento absoluto — o painel do "Ver mais" seria cortado. */
.luluzetys-header-nav-scroll {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 20px);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.luluzetys-header-nav-scroll::-webkit-scrollbar {
  display: none;
}

/* ----------------------------------------------------------------- */
/* MENU DE CATEGORIAS DINAMICO                                        */
/* O menu vem do shortcode product_categories com hide_empty, entao   */
/* so aparece categoria que tem produto e a lista se atualiza sozinha */
/* quando o catalogo muda. O canvas.php do Git Pages roda do_shortcode */
/* nos partials, por isso funciona aqui.                              */
/* NUNCA escrever um shortcode entre colchetes aqui dentro do style:  */
/* o do_shortcode roda no arquivo inteiro e executaria o shortcode no */
/* meio do CSS, injetando HTML e quebrando a folha de estilo.         */
/* O shortcode devolve a grade de categorias do WooCommerce (com foto  */
/* e contador); o CSS abaixo desmonta isso e transforma numa nav.     */
/* ----------------------------------------------------------------- */
/* Regras comuns aos dois shortcodes: some com a foto e o contador que */
/* o WooCommerce coloca em cada categoria, e zera a aparencia de card. */
.luluzetys-header-nav li.product-category {
  width: auto;
  margin: 0;
  padding: 0;
  float: none;
  background: none;
  border: 0;
  list-style: none;
}

.luluzetys-header-nav li.product-category img,
.luluzetys-header-nav li.product-category mark.count {
  display: none;
}

.luluzetys-header-nav li.product-category h2 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

/* "Sem Categoria" e o balde padrao do WooCommerce, nao e uma categoria */
/* de verdade — fica fora da faixa e do painel. */
.luluzetys-header-nav li.product-category:has(a[href*="/sem-categoria"]) {
  display: none;
}

/* O "> " importa: achata so a lista da faixa, sem tocar na do painel. */
.luluzetys-header-nav-scroll > .woocommerce,
.luluzetys-header-nav-scroll > .woocommerce > ul.products {
  display: contents;
}

.luluzetys-header-nav-scroll > .woocommerce li.product-category a,
.luluzetys-nav-more-label {
  display: block;
  color: var(--lz-ink);
  font-family: var(--lz-font);
  font-size: 0.71rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.luluzetys-header-nav-scroll > .woocommerce li.product-category a:hover,
.luluzetys-header-nav-scroll > .woocommerce li.product-category a:focus {
  color: var(--lz-rose);
}

/* ----------------------------------------------------------------- */
/* VER MAIS                                                           */
/* A faixa mostra so as categorias com mais produtos; o painel abre    */
/* com a lista completa em ordem alfabetica, entao nenhuma categoria   */
/* fica inacessivel. Sao dois shortcodes: o de cima limitado, o de     */
/* dentro do painel sem limite.                                        */
/* O checkbox e o mecanismo de abrir/fechar sem depender de script.    */
/* ----------------------------------------------------------------- */
.luluzetys-nav-more {
  position: relative;
  flex: 0 0 auto;
}

.luluzetys-nav-more-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.luluzetys-nav-more-label {
  color: var(--lz-rose);
  cursor: pointer;
  user-select: none;
}

.luluzetys-nav-more-label::after {
  display: inline-block;
  margin-left: 6px;
  content: "+";
  font-weight: 600;
}

.luluzetys-nav-more-toggle:checked ~ .luluzetys-nav-more-label::after {
  content: "–";
}

.luluzetys-nav-more-toggle:focus-visible ~ .luluzetys-nav-more-label {
  outline: 2px solid var(--lz-rose);
  outline-offset: 4px;
}

.luluzetys-nav-more-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  /* Acima de 99, que e o z-index da lupa de zoom da galeria do
     WooCommerce — com 40, a lupa aparecia desenhada por cima do menu. */
  z-index: 200;
  display: none;
  min-width: 220px;
  max-height: 60vh;
  padding: 10px;
  overflow-y: auto;
  transform: translateX(-50%);
  border: 1px solid var(--lz-line);
  border-radius: var(--lz-raio);
  background: var(--lz-white);
  box-shadow: 0 18px 40px rgba(37, 35, 35, 0.14);
}

.luluzetys-nav-more-toggle:checked ~ .luluzetys-nav-more-panel {
  display: block;
}

.luluzetys-nav-more-panel ul.products {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* O WooCommerce imprime um clearfix em "ul.products::before" — heranca
   da epoca do float. Num container grid ele deixa de ser invisivel e
   vira um ITEM, ocupando a primeira celula: era o vao branco no canto
   superior esquerdo do painel, que empurrava a primeira categoria para
   a coluna da direita. A grade principal ja neutralizava isso; o painel
   tinha ficado de fora. */
.luluzetys-nav-more-panel ul.products::before,
.luluzetys-nav-more-panel ul.products::after {
  display: none;
  content: none;
}

.luluzetys-nav-more-panel li.product-category a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--lz-raio);
  color: var(--lz-ink);
  font-family: var(--lz-font);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.luluzetys-nav-more-panel li.product-category a:hover,
.luluzetys-nav-more-panel li.product-category a:focus {
  background: rgba(242, 197, 209, 0.3);
  color: var(--lz-rose);
}

.luluzetys-header-actions {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  justify-content: flex-end;
  gap: 4px;
}

.luluzetys-header-search {
  display: flex;
  align-items: center;
  width: min(226px, 24vw);
  height: 40px;
  border: 1px solid var(--lz-line);
  border-radius: 999px;
  background: var(--lz-white);
  transition: border-color 180ms ease, box-shadow 180ms ease, width 180ms ease;
}

.luluzetys-header-search:focus-within,
.luluzetys-header-search.lz-busca-aberta {
  border-color: var(--lz-blush);
  box-shadow: 0 0 0 3px rgba(242, 197, 209, 0.22);
}

.luluzetys-search-label {
  flex: 1 1 auto;
  min-width: 0;
}

.luluzetys-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.luluzetys-search-field {
  width: 100%;
  height: 38px;
  min-width: 0;
  padding: 0 4px 0 15px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--lz-ink);
  font-family: var(--lz-font);
  font-size: 0.78rem;
  font-weight: 500;
}

.luluzetys-search-field::placeholder {
  color: var(--lz-text);
  opacity: 0.85;
}

.luluzetys-header-search .luluzetys-search-submit {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.luluzetys-header-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: var(--lz-ink);
  line-height: 1;
  transition: background 180ms ease, color 180ms ease;
}

.luluzetys-header-action svg {
  display: block;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.luluzetys-header-action:hover,
.luluzetys-header-action:focus {
  background: rgba(242, 197, 209, 0.34);
  color: var(--lz-rose);
}

.luluzetys-topbar a:hover,
.luluzetys-topbar a:focus {
  color: var(--lz-rose);
  text-decoration: none;
}

/* Abaixo de 1024 o menu nao cabe na linha da logo e desce para uma */
/* faixa propria, rolando na horizontal. Os breakpoints do site sao */
/* 1024 e 768 nos tres arquivos — nao inventar outros. */
@media (max-width: 1024px) {
  .luluzetys-header .luluzetys-header-inner {
    grid-template-columns: auto auto;
    justify-content: space-between;
    row-gap: 8px;
    /* A logo estava a 1px da faixa rosa. O recuo de cima da o mesmo
       respiro que ja existia embaixo. */
    padding-top: 14px;
    padding-bottom: 10px;
  }

  .luluzetys-header-brand {
    grid-column: 1;
  }

  .luluzetys-header-actions {
    grid-column: 2;
  }

  .luluzetys-header-search {
    width: min(190px, 26vw);
  }

  /* A faixa sangra ate a borda para o item cortado sinalizar que ha */
  /* mais categorias para o lado. A margem negativa e exatamente o */
  /* recuo lateral do container, entao nunca sobra nem estoura — ao */
  /* contrario de 100vw, que erra quando existe barra de rolagem. */
  .luluzetys-header-nav {
    position: relative;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    width: calc(100% + 48px);
    margin-left: -24px;
    padding: 0;
  }

  .luluzetys-header-nav-scroll {
    gap: 8px;
    width: 100%;
    padding: 2px 24px 8px;
    scroll-padding-left: 24px;
    /* O degrade na borda direita e a placa de "tem mais ali": a faixa
       leva ~745px de categorias numa janela de 270 e, sem isso, nada
       dizia que rolava — parecia um menu de duas opcoes. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
  }

  .luluzetys-header-nav-scroll > .woocommerce li.product-category {
    flex: 0 0 auto;
  }

  /* ---------------------------------------------------------------
     FAIXA DE CATEGORIAS NO CELULAR
     Sem pilulas e sem "Ver mais": a faixa mostra TODAS as categorias e
     rola para o lado, como uma prateleira. Antes eram 8 pilulas com
     borda mais um botao "Ver mais" que abria um painel — muito peso
     visual no topo, e a navegacao dividida em dois lugares.

     Nao ha lista nova: o header ja imprime duas listas, a curta (8, por
     quantidade de produtos) e a completa (todas, em ordem alfabetica)
     que servia ao painel. No celular a curta sai de cena e a COMPLETA
     vira a faixa. Uma so lista aparece de cada vez.
     --------------------------------------------------------------- */
  .luluzetys-header .luluzetys-header-nav-scroll,
  .luluzetys-header .luluzetys-nav-more-label,
  .luluzetys-header .luluzetys-nav-more-toggle {
    display: none;
  }

  .luluzetys-header .luluzetys-nav-more {
    position: static;
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 0;
  }

  /* O painel deixa de ser painel: vira a propria faixa, no fluxo. */
  .luluzetys-header .luluzetys-nav-more-panel,
  .luluzetys-header .luluzetys-nav-more-toggle:checked ~ .luluzetys-nav-more-panel {
    position: static;
    display: block;
    width: 100%;
    max-height: none;
    padding: 2px 16px 8px;
    overflow-x: auto;
    overflow-y: visible;
    transform: none;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    scrollbar-width: none;
    /* A borda esfumacada avisa que ha mais categorias para o lado. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
  }

  .luluzetys-header .luluzetys-nav-more-panel::-webkit-scrollbar {
    display: none;
  }

  .luluzetys-header .luluzetys-nav-more-panel ul.products {
    display: flex;
    gap: 18px;
    width: max-content;
  }

  /* Texto limpo: sem moldura, sem fundo. O respiro entre os nomes e o
     que separa um do outro. */
  .luluzetys-header .luluzetys-nav-more-panel li.product-category {
    flex: 0 0 auto;
  }

  .luluzetys-header .luluzetys-nav-more-panel li.product-category a {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--lz-ink);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .luluzetys-header .luluzetys-nav-more-panel li.product-category a:hover,
  .luluzetys-header .luluzetys-nav-more-panel li.product-category a:focus {
    background: none;
    color: var(--lz-rose);
  }

}

@media (max-width: 768px) {
  .luluzetys-topbar-inner,
  .luluzetys-header-inner {
    width: min(100% - 32px, 1240px);
  }

  .luluzetys-topbar-links {
    display: none;
  }

  .luluzetys-topbar-inner {
    justify-content: center;
    text-align: center;
  }

  .luluzetys-topbar p {
    font-size: 0.72rem;
  }

  .luluzetys-header-inner {
    min-height: 64px;
  }

  .luluzetys-header-brand img {
    height: 36px;
  }

  .luluzetys-header-action {
    width: 38px;
    height: 38px;
  }

  .luluzetys-header .luluzetys-header-actions {
    position: relative;
  }

  .luluzetys-header .luluzetys-header-search {
    width: 38px;
    overflow: hidden;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  .luluzetys-header .luluzetys-header-search:focus-within,
  .luluzetys-header .luluzetys-header-search.lz-busca-aberta {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 220;
    width: min(270px, calc(100vw - 32px));
    overflow: visible;
    transform: translateY(-50%);
    border-color: var(--lz-line);
    background: var(--lz-white);
    box-shadow: 0 14px 34px rgba(37, 35, 35, 0.16);
  }

  .luluzetys-header .luluzetys-search-label {
    flex: 0 1 auto;
    width: 0;
    overflow: hidden;
  }

  .luluzetys-header .luluzetys-search-field {
    width: 0;
    padding: 0;
    opacity: 0;
  }

  .luluzetys-header .luluzetys-header-search:focus-within .luluzetys-search-label,
  .luluzetys-header .luluzetys-header-search.lz-busca-aberta .luluzetys-search-label {
    flex: 1 1 auto;
    width: auto;
  }

  .luluzetys-header .luluzetys-header-search:focus-within .luluzetys-search-field,
  .luluzetys-header .luluzetys-header-search.lz-busca-aberta .luluzetys-search-field {
    width: 100%;
    padding: 0 4px 0 14px;
    opacity: 1;
  }

  .luluzetys-header-action svg {
    width: 20px;
    height: 20px;
  }

  /* O recuo do container cai para 16px aqui, entao a sangria acompanha. */
  .luluzetys-header-nav {
    width: calc(100% + 32px);
    margin-left: -16px;
  }

  .luluzetys-header-nav-scroll {
    gap: 8px;
    padding: 2px 16px 8px;
    scroll-padding-left: 16px;
  }

  .luluzetys-nav-more {
    padding-right: 16px;
  }

  /* No celular o dropdown vira folha de largura total.
     O detalhe que fazia os nomes se atropelarem: o painel e
     position:absolute e estava ancorado no .luluzetys-nav-more, que tem
     a largura da pilula "Ver mais" (~90px). Entao "left/right: 16px"
     resolvia contra 90px, e o min-width de 220px espremia duas colunas
     de ~105px — "Blusas e Croppeds" quebrava em tres linhas dentro de
     uma altura fixa. Passando a ancora para a nav (que ocupa a largura
     toda), as bordas passam a ser as da tela. */
  /* O painel-dropdown nao existe mais no celular: a faixa de
     categorias, definida no bloco de 1024px, ja mostra todas elas. As
     regras que sobravam aqui (duas colunas, itens de 44px) estavam
     inflando a faixa. */
}

/* ================================================================= */
/* GRADE DE PRODUTOS COMPARTILHADA                                   */
/* Mora aqui no header, e nao em pages/, de proposito: o CSS de       */
/* pages/*.html so vale dentro daquela pagina. Este partial carrega   */
/* em toda pagina que usa header "principal", entao a home e as       */
/* futuras paginas de categoria usam exatamente a mesma grade.        */
/* Uso: envolver o shortcode do WooCommerce numa div .luluzetys-grid. */
/* ================================================================= */
.luluzetys-grid, .woocommerce {
  --lz-grid-gap-x: 10px;
  --lz-grid-gap-y: 32px;
  font-family: var(--lz-font);
}

.luluzetys-main .woocommerce ul.products,
.woocommerce .luluzetys-main ul.products,
.luluzetys-grid .woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--lz-grid-gap-y) var(--lz-grid-gap-x);
  margin: 0;
  padding: 0;
  list-style: none;
}

.luluzetys-main .woocommerce ul.products::before,
.woocommerce .luluzetys-main ul.products::before,
.luluzetys-grid .woocommerce ul.products::before,
.luluzetys-main .woocommerce ul.products::after,
.woocommerce .luluzetys-main ul.products::after,
.luluzetys-grid .woocommerce ul.products::after {
  display: none;
  content: none;
}

/* Card sem moldura: sem fundo, sem borda, sem sombra e sem movimento */
/* no hover. A foto e o preco e que carregam o visual. */
.luluzetys-main .woocommerce ul.products li.product,
.woocommerce .luluzetys-main ul.products li.product,
.luluzetys-grid .woocommerce ul.products li.product {
  position: relative;
  width: auto;
  margin: 0;
  padding: 0;
  float: none;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.luluzetys-main .woocommerce ul.products li.product a,
.woocommerce .luluzetys-main ul.products li.product a,
.luluzetys-grid .woocommerce ul.products li.product a,
.luluzetys-main .woocommerce ul.products li.product a:visited,
.woocommerce .luluzetys-main ul.products li.product a:visited,
.luluzetys-grid .woocommerce ul.products li.product a:visited,
.luluzetys-main .woocommerce ul.products li.product a:hover,
.woocommerce .luluzetys-main ul.products li.product a:hover,
.luluzetys-grid .woocommerce ul.products li.product a:hover,
.luluzetys-main .woocommerce ul.products li.product a:focus,
.woocommerce .luluzetys-main ul.products li.product a:focus,
.luluzetys-grid .woocommerce ul.products li.product a:focus {
  color: var(--lz-ink);
  text-decoration: none;
}

.luluzetys-main .woocommerce ul.products li.product a.luluzetys-card-foto,
.woocommerce .luluzetys-main ul.products li.product a.luluzetys-card-foto,
.luluzetys-grid .woocommerce ul.products li.product a.luluzetys-card-foto {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--lz-raio);
  background: var(--lz-linen);
}

/* Proporcao TRAVADA em 2:3 (retrato), igual na home, na loja, nas
   categorias, na busca e nos relacionados.
   Antes era "height: auto", ou seja, cada foto mandava na propria
   altura — bastava uma peca fotografada num enquadramento diferente
   para a linha ficar desalinhada e os cards de tamanhos distintos.
   Com aspect-ratio o espaco e sempre o mesmo e o object-fit cover
   preenche sem distorcer (recorta o excedente, nunca estica).
   Se um dia o catalogo mudar de formato, muda-se aqui, num lugar so. */
.luluzetys-main .woocommerce ul.products li.product img,
.woocommerce .luluzetys-main ul.products li.product img,
.luluzetys-grid .woocommerce ul.products li.product img,
.luluzetys-main ul.products li.product img,
.luluzetys-grid ul.products li.product img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  margin: 0;
  border: 0;
  border-radius: 0;
}

/* O tema entrega uma segunda foto para o hover. Ela fica sobreposta e */
/* so aparece por opacidade — nada se move. */
.luluzetys-main .woocommerce ul.products li.product img.secondary-product-image,
.woocommerce .luluzetys-main ul.products li.product img.secondary-product-image,
.luluzetys-grid .woocommerce ul.products li.product img.secondary-product-image {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  opacity: 0;
  transition: opacity 450ms ease;
  width: 100%;
  object-fit: cover;
}

.luluzetys-main .woocommerce ul.products li.product:hover img.secondary-product-image,
.woocommerce .luluzetys-main ul.products li.product:hover img.secondary-product-image,
.luluzetys-grid .woocommerce ul.products li.product:hover img.secondary-product-image {
  opacity: 1;
}

.luluzetys-main .woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce .luluzetys-main ul.products li.product .woocommerce-loop-product__title,
.luluzetys-grid .woocommerce ul.products li.product .woocommerce-loop-product__title {
  margin: 16px 0 0;
  padding: 0;
  color: var(--lz-ink);
  font-family: var(--lz-font);
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.45;
  transition: color 180ms ease;
}

.luluzetys-main .woocommerce ul.products li.product:hover .woocommerce-loop-product__title,
.woocommerce .luluzetys-main ul.products li.product:hover .woocommerce-loop-product__title,
.luluzetys-grid .woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
  color: var(--lz-rose);
}

.luluzetys-main .woocommerce ul.products li.product .price,
.woocommerce .luluzetys-main ul.products li.product .price,
.luluzetys-grid .woocommerce ul.products li.product .price {
      display: block;
      margin: 6px 0 0;
      color: var(--lz-ink);
      font-size: 0.92rem;
      font-weight: 600;
      line-height: 1.4;
    }

.luluzetys-main .woocommerce ul.products li.product .price del,
.woocommerce .luluzetys-main ul.products li.product .price del,
.luluzetys-grid .woocommerce ul.products li.product .price del {
  color: var(--lz-text);
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.7;
}

.luluzetys-main .woocommerce ul.products li.product .price ins,
.woocommerce .luluzetys-main ul.products li.product .price ins,
.luluzetys-grid .woocommerce ul.products li.product .price ins {
  background: none;
  color: var(--lz-text);
  text-decoration: none;
}

.luluzetys-main .woocommerce ul.products li.product .onsale,
.woocommerce .luluzetys-main ul.products li.product .onsale,
.luluzetys-grid .woocommerce ul.products li.product .onsale {
  position: absolute;
  top: 10px;
  right: auto;
  left: 10px;
  z-index: 2;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 5px 9px;
  border-radius: var(--lz-raio);
  background: var(--lz-white);
  color: var(--lz-ink);
  font-family: var(--lz-font);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.luluzetys-main .woocommerce ul.products li.product .button,
.woocommerce .luluzetys-main ul.products li.product .button,
.luluzetys-grid .woocommerce ul.products li.product .button,
.luluzetys-main .woocommerce ul.products li.product .product-action-wrap,
.woocommerce .luluzetys-main ul.products li.product .product-action-wrap,
.luluzetys-grid .woocommerce ul.products li.product .product-action-wrap {
  display: none;
}
/* no canto do card. Nao e favorito de verdade, nao clica em nada, entao */
/* sai. Enquanto essa regra existir no plugin, isto aqui precisa ficar. */
.luluzetys-main .woocommerce ul.products li.product::after,
.woocommerce .luluzetys-main ul.products li.product::after,
.luluzetys-grid .woocommerce ul.products li.product::after {
  display: none;
  content: none;
}

/* Atencao ao mexer aqui: as regras responsivas precisam repetir as TRES
   variantes de seletor da grade, igual as regras de cima. Faltava a
   ".luluzetys-grid", que e justamente a da home — o resultado era a home
   ficar com 4 colunas em qualquer largura, com cards de 92px no celular. */
@media (max-width: 1024px) {
  .luluzetys-main .woocommerce ul.products,
  .woocommerce .luluzetys-main ul.products,
  .luluzetys-grid .woocommerce ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .luluzetys-grid, .woocommerce {
    --lz-grid-gap-x: 8px;
    --lz-grid-gap-y: 26px;
  }

  .luluzetys-main .woocommerce ul.products,
  .woocommerce .luluzetys-main ul.products,
  .luluzetys-grid .woocommerce ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .luluzetys-main .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .woocommerce .luluzetys-main ul.products li.product .woocommerce-loop-product__title,
  .luluzetys-grid .woocommerce ul.products li.product .woocommerce-loop-product__title {
    margin-top: 10px;
    font-size: 0.78rem;
  }

  .luluzetys-main .woocommerce ul.products li.product .price,
  .woocommerce .luluzetys-main ul.products li.product .price,
  .luluzetys-grid .woocommerce ul.products li.product .price {
      display: block;
      margin: 6px 0 0;
      color: var(--lz-ink);
      font-size: 0.92rem;
      font-weight: 600;
      line-height: 1.4;
    }
}
  
/* ===== CATEGORIA E PAGINA DE PRODUTO ===== */
/* ------------------------------------------------------------------ */
/* CABECALHO DE CATEGORIA                                              */
/* ------------------------------------------------------------------ */
.woocommerce-products-header__title,
.page-title {
  margin: 0 0 10px;
  color: var(--lz-ink);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
}

.term-description {
  max-width: 60ch;
  color: var(--lz-text);
  font-size: 0.88rem;
  line-height: 1.6;
}

.woocommerce-result-count,
.woocommerce-ordering select {
  color: var(--lz-text);
  font-size: 0.8rem;
}

.woocommerce-breadcrumb {
  margin-bottom: 18px;
  color: var(--lz-text);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}

.woocommerce-breadcrumb a {
  color: var(--lz-text);
  text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
  color: var(--lz-rose);
}

/* ------------------------------------------------------------------ */
/* PAGINA DE PRODUTO                                                   */
/* ------------------------------------------------------------------ */
div.product .product_title {
  margin: 0 0 12px;
  color: var(--lz-ink);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.25;
}

div.product .summary .price {
  display: block;
  margin: 0 0 16px;
  color: var(--lz-ink);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

div.product .summary .price del {
  margin-right: 10px;
  color: var(--lz-text);
  font-size: 0.95rem;
  font-weight: 400;
  opacity: 0.7;
}

div.product .summary .price ins {
  background: none;
  color: var(--lz-ink);
  text-decoration: none;
}

div.product .woocommerce-product-details__short-description {
  margin-top: 16px;
  color: var(--lz-text);
  font-size: 0.9rem;
  line-height: 1.7;
}

div.product .woocommerce-product-gallery__image img {
  border-radius: var(--lz-raio);
  background: var(--lz-linen);
}

div.product form.cart {
  margin-top: 18px;
}

div.product form.cart .quantity input {
  min-height: 54px;
  border: 1px solid var(--lz-line);
  border-radius: var(--lz-raio);
}

/* Seletor de variacao: o padrao do WooCommerce e um select solto e sem
   altura definida, que destoa do botao ao lado. */
div.product .variations {
  margin-bottom: 14px;
  border: 0;
}

div.product .variations th,
div.product .variations td {
  padding: 4px 0;
  border: 0;
}

div.product .variations label {
  color: var(--lz-ink);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

div.product .variations select {
  width: 100%;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--lz-line);
  border-radius: var(--lz-raio);
  background-color: var(--lz-white);
  color: var(--lz-ink);
  font-size: 0.88rem;
}

div.product .product_meta {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--lz-line);
  color: var(--lz-text);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------------ */
/* ABAS E RELACIONADOS                                                 */
/* ------------------------------------------------------------------ */
.woocommerce-tabs ul.tabs {
  margin: 0 0 20px;
  padding: 0;
  border-bottom: 1px solid var(--lz-line);
}

.woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.woocommerce-tabs ul.tabs li a {
  display: inline-block;
  padding: 12px 18px;
  color: var(--lz-text);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.woocommerce-tabs ul.tabs li.active a {
  color: var(--lz-ink);
  box-shadow: inset 0 -2px 0 var(--lz-rose);
}

.related.products > h2,
.up-sells > h2,
.cross-sells > h2 {
  margin: 0 0 26px;
  color: var(--lz-ink);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* PAGINACAO                                                           */
/* ------------------------------------------------------------------ */
.woocommerce-pagination ul {
  border: 0;
}

.woocommerce-pagination ul li {
  border: 0;
}

.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
  min-width: 40px;
  padding: 10px;
  color: var(--lz-text);
  font-size: 0.82rem;
  font-weight: 600;
}

.woocommerce-pagination ul li span.current {
  background: none;
  color: var(--lz-ink);
  box-shadow: inset 0 -2px 0 var(--lz-rose);
}


/* ===== RODAPE ===== */

.luluzetys-footer {
  --lz-blush: #f2c5d1;
  --lz-white: #ffffff;
  --lz-ink: #252323;
  --lz-text: #6f6967;
  --lz-line: #e8e1de;
  --lz-rose: #c98f9f;
  --lz-font: "Montserrat", "Open Sans", Helvetica, Arial, sans-serif;
  color: var(--lz-ink);
  font-family: var(--lz-font);
  background: #f7dbe3;
}

.luluzetys-footer *,
.luluzetys-footer *::before,
.luluzetys-footer *::after {
  box-sizing: border-box;
}

/* Botao "voltar ao topo" do tema Kadence, injetado direto no body. */
/* O certo e desligar no Personalizar do tema; aqui so escondemos. */
body > #kt-scroll-up,
body > #kt-scroll-up-reader {
  display: none;
}

.luluzetys-footer-container {
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
  padding: 52px 0 24px;
}

.luluzetys-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 32px;
}

.luluzetys-footer-brand {
  display: block;
  margin: 0;
  line-height: 0;
}
/* CSS hardcoded do plugin vence seletor de classe por ser ID. */
.luluzetys-footer-brand img {
  display: block;
  width: auto;
  height: 52px;
  max-width: 100%;
  object-fit: contain;
}

.luluzetys-footer-text {
  max-width: 300px;
  margin: 15px 0 0;
  color: var(--lz-text);
  font-size: 0.94rem;
  line-height: 1.7;
}

.luluzetys-footer-heading {
  margin: 0 0 14px;
  color: var(--lz-ink);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.luluzetys-footer-links {
  display: grid;
  /* Era 10px. Somado a area de toque de 40px dos links, dava 50px por
     item e a coluna virava uma lista solta. O respiro agora vem da
     propria area de toque. */
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.luluzetys-footer-link {
  color: var(--lz-text);
  font-size: 0.92rem;
  line-height: 1.4;
  text-decoration: none;
}

.luluzetys-footer-link:hover,
.luluzetys-footer-link:focus {
  color: var(--lz-rose);
  text-decoration: none;
}

/* ----------------------------------------------------------------- */
/* FAIXA DE SELOS                                                     */
/* Os meios de pagamento aqui sao os que estao realmente ativos no     */
/* checkout: Pix e cartao de credito, os dois via Mercado Pago.        */
/* Nao ha boleto habilitado. Se algum gateway for ligado ou desligado  */
/* no WooCommerce, esta faixa precisa ser atualizada na mao.           */
/* ----------------------------------------------------------------- */
.luluzetys-seals {
  display: flex;
  flex-wrap: wrap;
  gap: 30px 44px;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 42px;
  padding-top: 30px;
  border-top: 1px solid rgba(37, 35, 35, 0.12);
}

.luluzetys-seal-group {
  display: grid;
  gap: 12px;
}

.luluzetys-seal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Bandeiras: CAIXA DE TAMANHO FIXO para todas.
   Com largura automatica, cada arquivo mandava no proprio tamanho e a
   fileira virava um amontoado de pastilhas de larguras diferentes. Uma
   caixa igual para todas, com a imagem contida dentro, resolve de
   uma vez — e vale para qualquer bandeira que venha a ser aceita. */
.luluzetys-seal-row {
  align-items: center;
}

.luluzetys-seal--marca {
  gap: 0;
  justify-content: center;
  width: 54px;
  min-height: 34px;
  padding: 0 7px;
}

.luluzetys-marca-img {
  display: block;
  width: 100%;
  height: 20px;
  /* contain, e nao cover: a bandeira aparece inteira, nunca recortada. */
  object-fit: contain;
}

/* O simbolo do Pix e desenho vetorial e acompanha a mesma caixa. */
.luluzetys-seal--marca .luluzetys-marca {
  width: 22px;
  height: 22px;
}

/* A cor verde-agua e SO do Pix (#32BCAD, a oficial da marca).
   O seletor vai pelo title, e nao pela classe do desenho: ".luluzetys-marca"
   e a classe de TODO simbolo vetorial do rodape, entao colorir por ela
   pintava Visa e Mastercard de verde junto — foi o que aconteceu na home,
   onde essas duas ainda sao SVG. Pelo title, so o Pix e alcancado, tanto
   no rodape do tema quanto no do Git Pages. */
.luluzetys-seal--marca[title="Pix"] .luluzetys-marca {
  color: #32bcad;
}

/* Marca e desenho CHEIO; os outros simbolos do rodape (caminhao, escudo,
   cadeado) sao de traco. A regra ".luluzetys-seal svg" la embaixo manda
   "fill: none; stroke: currentColor; stroke-width: 1.7" em todos, e num
   viewBox de 24 esse traco de 1.7 e grosso o bastante para fechar as
   frestas brancas entre as quatro setas do Pix — a marca virava um bloco
   solido verde. Aqui o traco sai e o preenchimento volta. */
.luluzetys-seal .luluzetys-marca {
  fill: currentColor;
  stroke: none;
}

.luluzetys-seal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(37, 35, 35, 0.1);
  border-radius: var(--lz-raio);
  background: var(--lz-white);
  color: var(--lz-ink);
  font-family: var(--lz-font);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.luluzetys-seal svg {
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.luluzetys-seal-secure {
  color: #2f6b4f;
}

.luluzetys-seal-note {
  margin: 0;
  color: var(--lz-text);
  font-size: 0.78rem;
  line-height: 1.5;
}

.luluzetys-footer-bottom {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid rgba(37, 35, 35, 0.12);
  color: var(--lz-text);
  font-size: 0.84rem;
}

@media (max-width: 1024px) {
  .luluzetys-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px 32px;
  }

  .luluzetys-footer-section:first-child {
    grid-column: 1 / -1;
  }

  .luluzetys-seals {
    gap: 26px 32px;
  }
}

@media (max-width: 768px) {
  .luluzetys-footer-container {
    width: min(100% - 32px, 1240px);
    padding: 40px 0 24px;
  }

  .luluzetys-footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .luluzetys-footer-text {
    max-width: none;
  }

  .luluzetys-seals {
    gap: 26px;
    margin-top: 32px;
    padding-top: 26px;
  }

  /* Os selos de TEXTO ("Conexao segura SSL", "Dados protegidos") viram
     grade de duas colunas para nao virar uma coluna comprida. */
  .luluzetys-seal-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  /* As BANDEIRAS sao excecao: sao caixas pequenas e de largura fixa, e
     numa grade de duas colunas cada uma ficava sozinha num vao largo —
     seis pastilhas espalhadas em tres linhas. Em fileira, elas se
     encaixam lado a lado e ocupam o espaco de verdade. */
  .luluzetys-seal-row:has(.luluzetys-seal--marca) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .luluzetys-seal {
    justify-content: center;
    min-height: 34px;
    padding: 0 8px;
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    text-align: center;
  }

  .luluzetys-seal svg {
    width: 15px;
    height: 15px;
  }

  .luluzetys-footer-bottom {
    margin-top: 30px;
    font-size: 0.78rem;
  }
}
  
/* ===== LAYOUT DA PAGINA DE PRODUTO ===== */
/* Duas colunas explicitas em grid; o float de 48% do CSS core do */
/* WooCommerce fica anulado para o layout nao depender dele. */
.luluzetys-main div.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 34px 52px;
  align-items: start;
}

/* Posicao explicita em vez de deixar o grid distribuir por ordem: o
   Kadence Shop Kit injeta .ksk-gallery e .kske-thumbnails como filhos
   extras de div.product, e por ordem eles ocupariam a coluna do resumo,
   empurrando-o para a linha de baixo. Nomeando quem vai onde, o layout
   fica igual com ou sem esse plugin. */
.luluzetys-main div.product .woocommerce-product-gallery,
.luluzetys-main div.product .ksk-gallery {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  float: none;
  margin: 0;
}

.luluzetys-main div.product .summary {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  float: none;
  margin: 0;
}

/* Miniaturas do Shop Kit acompanham a galeria, na coluna da esquerda. */
.luluzetys-main div.product .kske-thumbnails {
  grid-column: 1;
  grid-row: 2;
  width: 100%;
}

/* Tudo que nao e galeria nem resumo ocupa a linha inteira. */
.luluzetys-main div.product .woocommerce-tabs,
.luluzetys-main div.product .related.products,
.luluzetys-main div.product .up-sells,
.luluzetys-main div.product > .woocommerce-product-details__short-description,
.luluzetys-main div.product .woocommerce-message,
.luluzetys-main div.product .woocommerce-info,
.luluzetys-main div.product .woocommerce-error {
  grid-column: 1 / -1;
  width: 100%;
  float: none;
}

.luluzetys-main .woocommerce-notices-wrapper {
  grid-column: 1 / -1;
}

/* ===== AVISOS DO WOOCOMMERCE ===== */
/* O WooCommerce desenha um icone com a fonte propria dele num ::before
   absoluto, e abre espaco para ele com "padding: 1em 2em 1em 3.5em".
   Este bloco trocava o recuo por "14px 18px" e matava justamente a
   calha da esquerda: o icone caia em cima da primeira letra do texto.
   Medido: icone em left 20.6px e texto comecando em 21px.
   O recuo da esquerda volta a ser grande o bastante para a calha, e o
   ::before e reposicionado dentro dela. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  position: relative;
  margin: 0 0 22px;
  padding: 14px 18px 14px 44px;
  border: 1px solid var(--lz-line);
  border-left: 3px solid var(--lz-rose);
  border-radius: var(--lz-raio);
  background: var(--lz-white);
  color: var(--lz-ink);
  font-size: 0.86rem;
  line-height: 1.5;
  list-style: none;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  top: 14px;
  left: 17px;
  width: 16px;
  font-size: 15px;
  line-height: 1.45;
}

.woocommerce-error {
  border-left-color: #b3261e;
}

.woocommerce-error::before {
  color: #b3261e;
}

/* Cada motivo do erro na sua linha, sem marcador — a lista do
   WooCommerce vem com varios <li> quando ha mais de um problema. */
.woocommerce-message li,
.woocommerce-info li,
.woocommerce-error li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce-message li + li,
.woocommerce-info li + li,
.woocommerce-error li + li {
  margin-top: 6px;
}

.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
  color: var(--lz-rose);
}

/* ===== CARRINHO E CHECKOUT ===== */
/* O checkout e o classico (shortcode); estas regras cobrem a tabela do
   carrinho, cupom, totais, os campos de endereco e o bloco do pedido. */
.luluzetys-main table.shop_table {
  width: 100%;
  margin: 0 0 26px;
  border: 1px solid var(--lz-line);
  border-radius: var(--lz-raio);
  border-collapse: separate;
  border-spacing: 0;
  background: var(--lz-white);
}

.luluzetys-main table.shop_table th,
.luluzetys-main table.shop_table td {
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--lz-line);
  color: var(--lz-ink);
  font-size: 0.88rem;
  text-align: left;
  vertical-align: middle;
}

.luluzetys-main table.shop_table th {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.luluzetys-main table.shop_table tr:last-child > th,
.luluzetys-main table.shop_table tr:last-child > td {
  border-bottom: 0;
}

.luluzetys-main table.shop_table .product-thumbnail img {
  width: 64px;
  aspect-ratio: 2 / 3;
  border-radius: var(--lz-raio);
  object-fit: cover;
  background: var(--lz-linen);
}

.luluzetys-main table.shop_table .product-remove a {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: var(--lz-text);
  font-size: 1.1rem;
  font-weight: 400;
  text-decoration: none;
}

.luluzetys-main table.shop_table .product-remove a:hover {
  background: rgba(242, 197, 209, 0.34);
  color: #b3261e;
}

/* Campos: mesma altura e mesmo raio em todo lugar. */
.luluzetys-main input[type="text"],
.luluzetys-main input[type="email"],
.luluzetys-main input[type="tel"],
.luluzetys-main input[type="password"],
.luluzetys-main input[type="number"],
.luluzetys-main input[type="search"],
.luluzetys-main select,
.luluzetys-main textarea {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--lz-line);
  border-radius: var(--lz-raio);
  background: var(--lz-white);
  color: var(--lz-ink);
  font-family: var(--lz-font);
  font-size: 0.9rem;
}

.luluzetys-main textarea {
  min-height: 96px;
  padding: 10px 12px;
}

.luluzetys-main input:focus,
.luluzetys-main select:focus,
.luluzetys-main textarea:focus {
  outline: 2px solid var(--lz-blush);
  outline-offset: 0;
  border-color: var(--lz-rose);
}

.luluzetys-main form .form-row label {
  margin-bottom: 4px;
  color: var(--lz-ink);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.luluzetys-main form .form-row {
  margin: 0 0 14px;
  padding: 0;
}

/* Campo "Pais" com 44px no meio de campos de 343px.
   A causa e uma regra do proprio WooCommerce:
   ".woocommerce form .form-row .country_to_state--single{width:auto}",
   que ele aplica quando a loja vende para um pais so. Como <select> e
   elemento substituido, "auto" vira largura intrinseca — nao preenche o
   pai — e sobra um toco ao lado de "Nome", "CEP" e "Endereco".
   Igualamos ao resto do formulario com 4 classes contra as 3 dele. */
.luluzetys-main .woocommerce form .form-row select.country_to_state--single,
.luluzetys-main .woocommerce-page form .form-row select.country_to_state--single {
  width: 100%;
  min-height: 46px;
}

/* Quantidade compacta, alinhada com os botoes. */
.luluzetys-main .quantity .qty {
  width: 74px;
  min-height: 46px;
  text-align: center;
}

/* Botoes do WooCommerce na linguagem do tema. O botao de acao principal
   (finalizar, fazer pedido) e escuro; os secundarios sao claros. */
/* O :not() e o que impede a guerra de especificidade: os botoes da
   pagina de produto tem bloco proprio mais abaixo, e sem esta exclusao
   as duas regras empatavam em (0,2,0) e vencia a que estivesse por
   ultimo no arquivo — foi o que deixou o botao com 46px e raio 3px em
   vez dos 54px e do raio do token. */
.luluzetys-main .button:not(.single_add_to_cart_button):not(.lz-comprar-agora):not(.checkout-button),
.luluzetys-main button[type="submit"]:not(.single_add_to_cart_button):not(.lz-comprar-agora):not(.checkout-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid var(--lz-line);
  border-radius: var(--lz-raio);
  background: var(--lz-white);
  color: var(--lz-ink);
  font-family: var(--lz-font);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.luluzetys-main .button:not(.single_add_to_cart_button):not(.lz-comprar-agora):not(.checkout-button):hover,
.luluzetys-main button[type="submit"]:not(.single_add_to_cart_button):not(.lz-comprar-agora):not(.checkout-button):hover {
  border-color: var(--lz-rose);
  color: var(--lz-rose);
}

.luluzetys-main .button:disabled {
  opacity: 0.5;
  cursor: default;
}

.luluzetys-main .checkout-button,
.luluzetys-main #place_order {
  min-height: 54px;
  padding: 0 30px;
  border-color: var(--lz-ink);
  background: var(--lz-ink);
  color: var(--lz-white);
  font-size: 0.78rem;
}

.luluzetys-main .checkout-button:hover,
.luluzetys-main #place_order:hover {
  border-color: var(--lz-ink);
  background: var(--lz-white);
  color: var(--lz-ink);
}

.luluzetys-main .wc-proceed-to-checkout .checkout-button {
  display: flex;
  width: 100%;
}

/* O WooCommerce so estica o "Finalizar pedido" na folha de tela
   pequena, entao no desktop ele ficava com 209px numa coluna de 507 —
   a acao principal da loja menor que os campos acima dela.
   O #payment vem do proprio core e da a especificidade necessaria. */
.luluzetys-main #payment #place_order,
.luluzetys-main .place-order #place_order {
  display: flex;
  width: 100%;
  margin-top: 4px;
}

/* No celular o botao ficava com 267px de 375. Nao era largura: era recuo
   empilhado. O #order_review ja tem 22px de padding e o WooCommerce ainda
   poe 1em em "#payment div.form-row", somando 37px de cada lado numa tela
   de 375. Zeramos so o recuo lateral dessa linha — o vertical continua
   separando o botao dos metodos de pagamento. */
@media (max-width: 768px) {
  .luluzetys-main .woocommerce-checkout #payment div.form-row.place-order {
    padding-right: 0;
    padding-left: 0;
  }
}

/* Avisos do WooCommerce na pagina de produto ficam acima do conteudo,
   com o mesmo recuo dos blocos de texto no celular. */
.luluzetys-conteudo-produto .woocommerce-notices-wrapper:not(:empty) {
  margin-bottom: 20px;
}

/* ---------------- Carrinho: itens a esquerda, resumo a direita -----
   Antes a pagina era uma pilha: tabela de 1240px de largura com quatro
   colunas espalhadas, e o bloco de totais logo abaixo, estreito, com
   meia tela vazia ao lado. Duas colunas resolvem as duas coisas — a
   tabela fica num vao legivel e o resumo sobe para o campo de visao,
   acompanhando a rolagem.

   O :has garante que isso so vale quando existe o bloco de totais, ou
   seja, com o carrinho cheio. No carrinho vazio a regra inteira e
   ignorada e a pagina continua empilhada, que e o certo la. Se o
   navegador nao entender :has, tambem cai para a pilha — nada quebra. */
@media (min-width: 1025px) {
  body.woocommerce-cart .luluzetys-main .woocommerce:has(> .cart-collaterals) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }

  body.woocommerce-cart .luluzetys-main .woocommerce > .woocommerce-notices-wrapper {
    grid-column: 1 / -1;
  }

  body.woocommerce-cart .luluzetys-main .woocommerce > .cart-collaterals {
    position: sticky;
    top: 24px;
  }
}

/* Totais do carrinho num cartao discreto. */
.luluzetys-main .cart_totals {
  width: 100%;
  padding: 20px;
  border: 1px solid var(--lz-line);
  border-radius: var(--lz-raio);
  background: var(--lz-white);
}

.luluzetys-main .cart_totals > h2 {
  margin: 0 0 14px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* A tabela de totais dentro do cartao nao repete moldura. */
.luluzetys-main .cart_totals table.shop_table {
  margin: 0;
  border: 0;
  background: none;
}

.luluzetys-main .cart_totals table.shop_table th,
.luluzetys-main .cart_totals table.shop_table td {
  padding: 10px 0;
}

.luluzetys-main .cart_totals tr:last-child th,
.luluzetys-main .cart_totals tr:last-child td {
  border-bottom: 0;
}

.luluzetys-main .cart-collaterals {
  margin-top: 8px;
}

/* O campo de cupom vinha com 80px fixos do WooCommerce e mostrava
   "Codigo d". Agora ele ocupa a sobra da linha; o min-width zero e o
   que permite um item flex encolher abaixo do conteudo. */
.luluzetys-main .woocommerce-cart-form .coupon {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Base de 120px e nao 160px: com 160 o campo empurrava o "Aplicar
   cupom" para a linha de baixo num celular de 375, e o botao ainda
   quebrava o proprio texto em duas linhas. */
.luluzetys-main .woocommerce-cart-form .coupon .input-text#coupon_code {
  flex: 1 1 120px;
  width: auto;
  min-width: 0;
}

.luluzetys-main .woocommerce-cart-form .coupon button {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* A linha de acoes: cupom a esquerda, "atualizar carrinho" a direita.
   Nao ponha display:flex neste <td>. A celula tem colspan=6 e, fora do
   algoritmo de tabela, o colspan deixa de valer — as colunas se
   redistribuem e a de remover fica com 344px enquanto a da foto some
   para 56px. O float e o que o proprio WooCommerce usa aqui. */
.luluzetys-main .woocommerce-cart-form td.actions {
  overflow: hidden;
}

.luluzetys-main .woocommerce-cart-form td.actions button[name="update_cart"] {
  float: right;
}

/* Larguras das colunas: sem elas o navegador distribui pelo conteudo e
   "Remover" (um x de 28px) acaba mais largo que a foto do produto. */
.luluzetys-main .woocommerce-cart-form td.product-remove,
.luluzetys-main .woocommerce-cart-form th.product-remove {
  width: 56px;
  text-align: center;
}

.luluzetys-main .woocommerce-cart-form td.product-thumbnail,
.luluzetys-main .woocommerce-cart-form th.product-thumbnail {
  width: 96px;
}

/* Foto do item com o mesmo raio das outras fotos do site. */
.luluzetys-main .woocommerce-cart-form td.product-thumbnail img {
  display: block;
  width: 72px;
  max-width: none;
  height: auto;
  border-radius: var(--lz-p-raio-foto);
}

/* O "x" de remover vira um alvo redondo de verdade, em vez de um
   simbolo solto de poucos pixels no canto da linha. */
.luluzetys-main .woocommerce-cart-form td.product-remove a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--lz-line);
  border-radius: 999px;
  background: var(--lz-white);
  color: var(--lz-text);
  font-size: 18px;
  line-height: 1;
  transition: border-color 160ms ease, color 160ms ease;
}

.luluzetys-main .woocommerce-cart-form td.product-remove a.remove:hover {
  border-color: #b3261e;
  background: var(--lz-white);
  color: #b3261e;
}

/* ---------------- Carrinho no celular: cada item vira um cartao ----
   A folha "woocommerce-smallscreen.css" empilha as celulas da tabela e
   ESCONDE a foto do produto. Numa loja de roupa isso e perda real: o
   cliente revisa o pedido sem ver o que esta comprando. Aqui a linha
   vira uma grade de tres colunas — foto, informacoes, remover — e a
   foto volta. */
@media (max-width: 768px) {
  .luluzetys-main .woocommerce-cart-form tr.cart_item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 32px;
    gap: 2px 14px;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--lz-line);
  }

  /* Vence a regra do smallscreen que esconde a coluna da foto. */
  .luluzetys-main .woocommerce-cart-form tr.cart_item td.product-thumbnail {
    display: block;
    grid-column: 1;
    grid-row: 1 / span 4;
    width: auto;
    padding: 0;
    border: 0;
  }

  .luluzetys-main .woocommerce-cart-form tr.cart_item td {
    grid-column: 2;
    padding: 0;
    border: 0;
    text-align: left;
  }

  .luluzetys-main .woocommerce-cart-form tr.cart_item td.product-remove {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .luluzetys-main .woocommerce-cart-form tr.cart_item td.product-name {
    grid-row: 1;
  }

  .luluzetys-main .woocommerce-cart-form tr.cart_item td.product-price {
    grid-row: 2;
  }

  .luluzetys-main .woocommerce-cart-form tr.cart_item td.product-quantity {
    grid-row: 3;
    margin-top: 6px;
  }

  .luluzetys-main .woocommerce-cart-form tr.cart_item td.product-subtotal {
    grid-row: 4;
    margin-top: 6px;
    font-weight: 600;
  }

  /* Os rotulos "Produto:", "Preco:" que o smallscreen imprime antes de
     cada celula. Com a foto e o nome a vista, "Produto:" e ruido; os
     outros ficam, porque numero solto sem rotulo confunde. */
  .luluzetys-main .woocommerce-cart-form tr.cart_item td.product-name::before,
  .luluzetys-main .woocommerce-cart-form tr.cart_item td.product-thumbnail::before,
  .luluzetys-main .woocommerce-cart-form tr.cart_item td.product-remove::before {
    content: none;
  }

  /* A tabela empilhada nao precisa de cabecalho no celular. */
  .luluzetys-main .woocommerce-cart-form thead {
    display: none;
  }
}

/* Preenche a coluna inteira do resumo. As 3 classes empatam com a regra
   do core (".woocommerce .cart-collaterals .cart_totals {width:48%;
   float:right}") e o theme.css carrega depois, entao vence. O resquicio
   "min-width: min(420px,100%)" da epoca do layout empilhado saiu — era
   ele que prendia o cartao em 420px dentro de uma coluna de 606. */
.luluzetys-main .cart-collaterals .cart_totals {
  float: none;
  width: 100%;
  min-width: 0;
}

.luluzetys-main .cart_totals h2,
.luluzetys-main #order_review_heading,
.luluzetys-main .woocommerce-billing-fields > h3,
.luluzetys-main .woocommerce-additional-fields > h3 {
  margin: 0 0 14px;
  color: var(--lz-ink);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Checkout em duas colunas: dados a esquerda, pedido a direita.
   As LINHAS do grid importam tanto quanto as colunas: sem elas, o
   posicionamento automatico punha o #order_review na linha 2 — ou seja,
   ABAIXO da coluna inteira de campos. O titulo "Seu pedido" ficava no
   topo e o conteudo dele so comecava 1400px depois, deixando a direita
   da tela vazia. Os campos ocupam as duas linhas; o titulo fica na
   linha 1 (que mede so a altura dele) e o pedido na linha 2, colado. */
.luluzetys-main form.checkout {
  display: grid;
  /* Meio a meio. Era 1.15/0.85, e a diferenca aparecia: o resumo do
     pedido ficava visivelmente mais estreito que a coluna de campos,
     sem motivo — com o checkout em etapas, a coluna da esquerda mostra
     poucos campos por vez e nao precisa do espaco extra. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 10px 48px;
  align-items: start;
}

.luluzetys-main form.checkout #customer_details {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 100%;
  float: none;
}

.luluzetys-main form.checkout #customer_details .col-1,
.luluzetys-main form.checkout #customer_details .col-2 {
  width: 100%;
  float: none;
}

.luluzetys-main form.checkout #order_review_heading,
.luluzetys-main form.checkout #order_review {
  grid-column: 2;
  width: 100%;
}

.luluzetys-main form.checkout #order_review_heading {
  grid-row: 1;
}

.luluzetys-main form.checkout #order_review {
  grid-row: 2;
  align-self: start;
  position: sticky;
  top: 20px;
  padding: 22px;
  border: 1px solid var(--lz-line);
  border-radius: var(--lz-raio);
  background: var(--lz-white);
}

.luluzetys-main form.checkout #order_review table.shop_table {
  margin-bottom: 18px;
  border: 0;
}

/* O nome do produto ficava espremido em 128px enquanto a coluna do
   subtotal folgava com 333 — "Calca Courino Lisa" quebrava em tres
   linhas ao lado de um numero curto. 52% e o equilibrio: as duas
   colunas sao compartilhadas pela tabela inteira, entao dar mais que
   isso ao nome espreme a descricao do frete, que mora na segunda. */
.luluzetys-main form.checkout #order_review table.shop_table td.product-name {
  width: 52%;
}

/* So o NOME do metodo de entrega e negrito; a descricao (endereco,
   prazo, "aguardar a loja confirmar") e texto corrido. Vinha tudo em
   700 e o bloco parecia um aviso gritado no meio do resumo. */
.luluzetys-main #order_review tr.woocommerce-shipping-totals td,
.luluzetys-main #order_review tr.woocommerce-shipping-totals td label {
  font-weight: 400;
}

.luluzetys-main #order_review tr.woocommerce-shipping-totals td label .woocommerce-Price-amount,
.luluzetys-main #order_review tr.woocommerce-shipping-totals th {
  font-weight: 600;
}

/* Formas de pagamento dentro do bloco do pedido. */
.luluzetys-main #payment {
  background: none;
  border-radius: 0;
}

.luluzetys-main #payment ul.payment_methods {
  margin: 0 0 16px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--lz-line);
  list-style: none;
}

.luluzetys-main #payment ul.payment_methods li {
  margin: 0 0 8px;
  list-style: none;
}

.luluzetys-main #payment div.payment_box {
  margin: 8px 0 0;
  padding: 12px 14px;
  border-radius: var(--lz-raio);
  background: var(--lz-paper);
  color: var(--lz-text);
  font-size: 0.82rem;
}

.luluzetys-main #payment div.payment_box::before {
  display: none;
}

/* Cupom no carrinho: campo e botao lado a lado. */
.luluzetys-main .coupon {
  display: flex;
  gap: 8px;
  align-items: center;
}

.luluzetys-main .coupon .input-text {
  width: 180px;
  min-height: 46px;
}

@media (max-width: 1024px) {
  .luluzetys-main form.checkout {
    grid-template-columns: 1fr;
    /* As linhas explicitas tambem precisam sair. Com uma coluna so, o
       "grid-row: 1 / span 2" que o #customer_details herda do desktop
       continuava reservando as duas linhas, e o resumo do pedido era
       colocado POR CIMA dos campos — os precos apareciam em cima do
       endereco. Em "auto", cada bloco entra na sua vez. */
    grid-template-rows: auto;
  }

  .luluzetys-main form.checkout #customer_details {
    grid-column: 1;
    grid-row: auto;
  }

  .luluzetys-main form.checkout #order_review_heading,
  .luluzetys-main form.checkout #order_review {
    grid-column: 1;
    grid-row: auto;
    position: static;
  }
}

@media (max-width: 768px) {
  .luluzetys-main div.product {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* No celular a foto e o que vende a peca: o container do produto abre
     mao do recuo lateral para a imagem ir de borda a borda, e os blocos
     de texto recebem o recuo de volta individualmente. Assim nada
     depende de vencer o CSS do plugin de galeria. */
  .luluzetys-conteudo-produto {
    width: 100%;
    padding-top: 0;
  }

  .luluzetys-conteudo-produto div.product > .summary,
  .luluzetys-conteudo-produto div.product > .woocommerce-tabs,
  .luluzetys-conteudo-produto div.product > .related.products,
  .luluzetys-conteudo-produto div.product > .up-sells,
  .luluzetys-conteudo-produto .woocommerce-notices-wrapper,
  .luluzetys-conteudo-produto .woocommerce-breadcrumb {
    padding-right: 16px;
    padding-left: 16px;
  }

  .luluzetys-conteudo-produto div.product .woocommerce-product-gallery img,
  .luluzetys-conteudo-produto div.product .ksk-gallery img {
    border-radius: 0;
  }

  /* Alguns plugins de galeria deixam um container de miniaturas vazio
     entre a foto e o resumo. Vazio ele ainda ocupa uma linha do grid e
     dois espacamentos, abrindo um buraco no meio da pagina. */
  .luluzetys-main div.product > .kske-thumbnails:empty,
  .luluzetys-main div.product > .thumbnails:empty {
    display: none;
  }

  .luluzetys-main div.product .woocommerce-product-gallery,
  .luluzetys-main div.product .ksk-gallery {
    margin-bottom: 0;
  }

  /* Titulo e preco proporcionais a tela, sem o exagero do desktop. */
  .luluzetys-main div.product .product_title {
    margin-bottom: 6px;
    font-size: 1.15rem;
  }

  .luluzetys-main div.product .summary .price {
    margin-bottom: 14px;
    font-size: 1.3rem;
  }

  .luluzetys-main div.product .summary > *:first-child {
    margin-top: 0;
  }

  .luluzetys-main div.product .variations {
    margin-bottom: 10px;
  }

  .luluzetys-main div.product .variations label {
    font-size: 0.68rem;
  }

  .luluzetys-main div.product form.cart {
    margin-top: 14px;
  }

  /* Abas e relacionados com respiro menor entre secoes. */
  .luluzetys-main div.product .woocommerce-tabs,
  .luluzetys-main div.product .related.products {
    margin-top: 8px;
  }

  .luluzetys-main .cart-collaterals {
    justify-content: stretch;
  }

  /* A tabela do carrinho vira lista empilhada no celular. */
  .luluzetys-main table.shop_table_responsive thead {
    display: none;
  }

  .luluzetys-main table.shop_table_responsive tr {
    display: block;
    padding: 6px 0;
    border-bottom: 1px solid var(--lz-line);
  }

  .luluzetys-main table.shop_table_responsive td {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 12px;
    border: 0;
    text-align: right;
  }

  .luluzetys-main table.shop_table_responsive td::before {
    content: attr(data-title);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
  }

  .luluzetys-main table.shop_table_responsive td.product-remove::before,
  .luluzetys-main table.shop_table_responsive td.actions::before {
    content: none;
  }

  .luluzetys-main .coupon {
    flex-wrap: wrap;
  }

  .luluzetys-main .coupon .input-text,
  .luluzetys-main .coupon .button {
    width: 100%;
  }
}

/* ===== SECOES DA HOME =====
   Vindas do pages/inicio.html, agora sob dominio do tema via
   front-page.php. Sem os seletores duplicados com #git-pages-app e
   sem !important: no tema nao ha copia do plugin competindo. */
.luluzetys-home {
      --lz-blush: #f2c5d1;
      --lz-pink: #e9afc0;
      --lz-rose: #c98f9f;
      --lz-paper: #faf8f6;
      --lz-white: #ffffff;
      --lz-linen: #ede2dc;
      --lz-taupe: #8a766e;
      --lz-gold: #b98274;
      --lz-ink: #252323;
      --lz-text: #6f6967;
      --lz-line: #e8e1de;
      --lz-font: "Montserrat", "Open Sans", Helvetica, Arial, sans-serif;
      color: var(--lz-ink);
      font-family: var(--lz-font);
      background: var(--lz-paper);
    }
    .luluzetys-home *,
    .luluzetys-home *::before,
    .luluzetys-home *::after {
      box-sizing: border-box;
    }
    .luluzetys-home p:empty {
      display: none;
    }
    .luluzetys-home .luluzetys-benefit-icon br,
    .luluzetys-home .luluzetys-benefit-copy br,
    .luluzetys-home .luluzetys-section-head br,
    .luluzetys-home .luluzetys-instagram-card br {
      display: none;
    }
    .luluzetys-home .luluzetys-hero {
      padding: 0;
      background: var(--lz-white);
    }
    .luluzetys-home .luluzetys-hero .luluzetys-container {
      width: 100%;
      max-width: none;
    }
    .luluzetys-home .luluzetys-hero-media {
      position: relative;
      width: 100%;
      min-height: clamp(320px, 38vw, 620px);
      overflow: hidden;
      background: var(--lz-white);
    }
    .luluzetys-home .luluzetys-hero-media .luluzetys-home-banners,
    .luluzetys-home .luluzetys-hero-media .luluzetys-home-banners-track,
    .luluzetys-home .luluzetys-hero-media .luluzetys-home-banner-slide,
    .luluzetys-home .luluzetys-hero-media .luluzetys-home-banner,
    .luluzetys-home .luluzetys-hero-media .luluzetys-home-banner-link,
    .luluzetys-home .luluzetys-hero-media .luluzetys-home-banner-media {
      display: block;
      width: 100%;
      height: 100%;
      min-height: inherit;
      margin: 0;
    }
    .luluzetys-home .luluzetys-hero-media .luluzetys-home-banners {
      position: relative;
      overflow: hidden;
      background: var(--lz-white);
    }
    .luluzetys-home .luluzetys-hero-media .luluzetys-home-banners-empty {
      display: block;
      width: 100%;
      height: 0;
      min-height: 0;
      background: var(--lz-white);
    }
    /* Sem banner cadastrado, o hero nao pode reservar 547px de branco no
       topo da loja: o min-height existe para o banner nao "pular" ao
       carregar, e sem banner nao ha o que segurar. */
    .luluzetys-home .luluzetys-hero-media:has(> .luluzetys-home-banners-empty) {
      min-height: 0;
    }
    .luluzetys-home .luluzetys-hero-media .luluzetys-home-banners-track {
      position: relative;
    }
    .luluzetys-home .luluzetys-hero-media .luluzetys-home-banner-slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      visibility: hidden;
      transition: opacity 420ms ease, visibility 420ms ease;
    }
    .luluzetys-home .luluzetys-hero-media .luluzetys-home-banner-slide.is-active {
      z-index: 1;
      opacity: 1;
      visibility: visible;
    }
    .luluzetys-home .luluzetys-hero-media .luluzetys-home-banner-image {
      display: block;
      width: 100%;
      height: 100%;
      max-width: none;
      max-height: none;
      object-fit: cover;
    }
    .luluzetys-home .luluzetys-hero-media .luluzetys-home-banner-dots {
      position: absolute;
      right: 0;
      bottom: clamp(14px, 2vw, 24px);
      left: 0;
      z-index: 3;
      display: flex;
      justify-content: center;
      gap: 8px;
      padding: 0 18px;
      pointer-events: none;
    }
    .luluzetys-home .luluzetys-hero-media .luluzetys-home-banner-dot {
      appearance: none;
      display: block;
      width: 9px;
      height: 9px;
      padding: 0;
      border: 1px solid rgba(255, 255, 255, 0.92);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.46);
      box-shadow: 0 1px 8px rgba(37, 35, 35, 0.18);
      cursor: pointer;
      line-height: 0;
      pointer-events: auto;
    }
    .luluzetys-home .luluzetys-hero-media .luluzetys-home-banner-dot.is-active {
      width: 28px;
      background: var(--lz-white);
    }
    .luluzetys-home .luluzetys-benefits {
      padding: clamp(18px, 2.4vw, 26px) 0;
      background: var(--lz-white);
      border-top: 0;
      border-bottom: 1px solid var(--lz-line);
    }
    .luluzetys-home .luluzetys-benefits-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
      align-items: center;
      margin: 0;
      padding: 0;
    }
    .luluzetys-home .luluzetys-benefit {
      display: flex;
      gap: 13px;
      align-items: center;
      justify-content: center;
      min-height: 0;
      margin: 0;
      padding: 4px 18px;
      background: none;
      border: 0;
      border-left: 1px solid var(--lz-line);
      border-radius: 0;
      box-shadow: none;
    }
    .luluzetys-home .luluzetys-benefit::before {
      display: none;
      content: none;
    }
    .luluzetys-home .luluzetys-benefit:first-child {
      border-left: 0;
    }
    .luluzetys-home .luluzetys-benefit-icon {
      display: inline-flex;
      flex: none;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border: 0;
      border-radius: 0;
      background: none;
      color: var(--lz-rose);
      line-height: 1;
    }
    .luluzetys-home .luluzetys-benefit-icon svg {
      display: block;
      width: 25px;
      height: 25px;
      fill: none;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 1.5;
    }
    .luluzetys-home .luluzetys-benefit-copy {
      min-width: 0;
    }
    .luluzetys-home .luluzetys-benefit strong {
      display: block;
      margin: 0;
      color: var(--lz-ink);
      font-size: 0.73rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      line-height: 1.2;
      text-transform: uppercase;
    }
    .luluzetys-home .luluzetys-benefit-copy span {
      display: block;
      margin: 4px 0 0;
      color: var(--lz-text);
      font-size: 0.79rem;
      font-weight: 400;
      line-height: 1.4;
    }
    .luluzetys-products-section {
      padding: clamp(54px, 7vw, 86px) 0 38px;
      background: var(--lz-paper);
    }
    .luluzetys-section-head {
      display: grid;
      justify-items: center;
      gap: 10px;
      margin-bottom: clamp(28px, 3.4vw, 42px);
      text-align: center;
    }
    .luluzetys-section-head h2 {
      margin: 0;
      color: var(--lz-ink);
      font-family: var(--lz-font);
      font-size: clamp(1rem, 1.5vw, 1.18rem);
      font-weight: 600;
      letter-spacing: 0.16em;
      line-height: 1.2;
      text-transform: uppercase;
    }
    .luluzetys-section-head p {
      max-width: 46ch;
      margin: 0;
      color: var(--lz-text);
      font-size: 0.88rem;
      line-height: 1.6;
    }
    .luluzetys-more {
      display: flex;
      justify-content: center;
      margin-top: 42px;
    }
    .luluzetys-instagram {
      padding: 0 0 clamp(56px, 6vw, 84px);
      background: var(--lz-paper);
    }
    .luluzetys-instagram-card {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 18px 28px;
      padding: clamp(26px, 3vw, 38px) clamp(24px, 3vw, 40px);
      background: var(--lz-white);
      border: 1px solid var(--lz-line);
      border-radius: var(--lz-raio);
    }
    .luluzetys-instagram h2 {
      margin: 0;
      color: var(--lz-ink);
      font-family: var(--lz-font);
      font-size: clamp(0.98rem, 1.4vw, 1.12rem);
      font-weight: 600;
      letter-spacing: 0.16em;
      line-height: 1.2;
    }
    .luluzetys-instagram p {
      margin: 8px 0 0;
      color: var(--lz-text);
      font-size: 0.94rem;
    }
    .luluzetys-instagram .luluzetys-button {
      flex: none;
      margin-top: 0;
    }
    @media (max-width: 1024px) {
      .luluzetys-home .luluzetys-hero-media {
        min-height: clamp(300px, 50vw, 480px);
      }
      .luluzetys-home .luluzetys-benefits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 16px;
      }
      .luluzetys-home .luluzetys-benefit:nth-child(3) {
        grid-column: 1 / -1;
        padding-top: 16px;
        border-top: 1px solid var(--lz-line);
        border-left: 0;
      }
    }
    @media (max-width: 768px) {
      .luluzetys-container {
        width: min(100% - 32px, 1240px);
      }
      .luluzetys-home .luluzetys-hero-media {
        min-height: 340px;
        aspect-ratio: 4 / 5;
      }
      .luluzetys-products-section {
        padding-top: clamp(36px, 8vw, 54px);
      }
      .luluzetys-home .luluzetys-benefits-grid {
        grid-template-columns: 1fr;
        row-gap: 0;
      }
      .luluzetys-home .luluzetys-benefit,
      .luluzetys-home .luluzetys-benefit:nth-child(3) {
        justify-content: flex-start;
        padding: 12px 0;
        border-top: 1px solid var(--lz-line);
        border-left: 0;
      }
      .luluzetys-home .luluzetys-benefit:first-child {
        border-top: 0;
        padding-top: 4px;
      }
      .luluzetys-home .luluzetys-benefit:last-child {
        padding-bottom: 4px;
      }
      .luluzetys-home .luluzetys-benefit-icon {
        width: 30px;
        height: 30px;
      }
      .luluzetys-home .luluzetys-benefit-icon svg {
        width: 25px;
        height: 25px;
      }
      .luluzetys-instagram-card {
        justify-content: center;
        padding: 26px 22px;
        text-align: center;
      }
      .luluzetys-instagram-card > div {
        width: 100%;
      }
    }
    .luluzetys-home .luluzetys-hero-media:has(.luluzetys-home-banners-empty) {
      min-height: 0;
      aspect-ratio: auto;
    }

    /* Computador e celular sao duas listas independentes. O tema imprime
       duas pistas irmas — uma so com as fotos de PC, outra so com as de
       celular — e cada largura ve apenas a sua. Sem estas regras as duas
       apareciam juntas, e um banner cadastrado so no celular subia
       tambem no computador.

       Fica depois das media queries do hero de proposito: as regras de
       colapso mexem no mesmo min-height que elas definem. E o !important
       repete o motivo da regra acima — no isolation maximum o Git Pages
       injeta uma copia deste CSS prefixada com #git-pages-app, e a
       especificidade de ID ganha do :has(). */
    .luluzetys-home .luluzetys-hero-media .luluzetys-banners {
      display: block;
      width: 100%;
      height: 100%;
      min-height: inherit;
      margin: 0;
    }
    /* O corte aqui e 600px, e nao os 768px do resto do site. A foto de
       celular e em pe (900x1100); num tablet ela ocuparia a tela toda
       de altura. Tablet ganha a foto deitada, igual ao computador.
       Telefone deitado tambem cai no lado do PC, e e o que se quer: a
       tela ja esta larga. Telefone em pe nao passa de ~480px, e o menor
       tablet (iPad mini) tem 744px — 600 separa os dois com folga. */
    @media (min-width: 601px) {
      .luluzetys-home .luluzetys-hero-media .luluzetys-banners--celular {
        display: none !important;
      }
      /* Sem nenhuma foto de PC o topo colapsa, em vez de reservar uma
         faixa branca de meia tela esperando um banner que nao existe. */
      .luluzetys-home .luluzetys-hero-media:not(:has(.luluzetys-banners--pc)) {
        min-height: 0 !important;
        aspect-ratio: auto !important;
      }
    }
    @media (max-width: 600px) {
      .luluzetys-home .luluzetys-hero-media .luluzetys-banners--pc {
        display: none !important;
      }
      .luluzetys-home .luluzetys-hero-media:not(:has(.luluzetys-banners--celular)) {
        min-height: 0 !important;
        aspect-ratio: auto !important;
      }
    }
    /* De 601 a 768 o site inteiro ainda esta no modo "celular", e a media
       query de 768px poe o topo em 4/5 — retrato, feito para a foto em pe.
       Como agora entra a foto deitada, o topo volta a forma larga, a mesma
       de 769 a 1024. O !important e para vencer o CSS inline da home, que
       vem depois do theme.css e repete estas mesmas regras em 768px. */
    @media (min-width: 601px) and (max-width: 768px) {
      .luluzetys-home .luluzetys-hero-media:has(.luluzetys-banners--pc) {
        min-height: clamp(300px, 50vw, 480px) !important;
        aspect-ratio: auto !important;
      }
    }

/* ================================================================== */
/* PAGINA DE PRODUTO — REDESIGN                                        */
/*                                                                     */
/* Escala propria, mais apertada que a do resto do site, porque este e */
/* o unico lugar onde tudo compete pela mesma coluna estreita. Sem     */
/* card, sem sombra e sem fundo cinza: a hierarquia vem de tipografia, */
/* espaco e um fio de 1px quando precisa separar.                      */
/* ================================================================== */
.lz-produto {
  --lz-p-gap: clamp(28px, 4vw, 64px);
  /* Sem redefinir --lz-p-raio aqui: esta linha declarava 4px e ganhava
     do :root por estar mais perto do elemento, entao os dois botoes de
     compra e o campo de CEP saiam com 4px enquanto o resto do site
     tinha 6px. O raio e decisao do site inteiro, nao desta pagina. */
  --lz-p-fio: 1px solid var(--lz-line);

  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--lz-p-gap);
  align-items: start;
}

/* A coluna de compra acompanha a rolagem da foto.
   SEM overflow e SEM max-height, de proposito: com "overflow-y: auto" o
   painel virava um container de rolagem proprio — a roda do mouse sobre
   ele rolava o painel por dentro em vez da pagina, e a experiencia
   mudava conforme a posicao do cursor. Num painel maior que a tela, o
   preco fica visivel no topo e o resto aparece rolando a pagina. */
.lz-produto__painel {
  position: sticky;
  top: 24px;
}

.lz-produto__midia {
  position: relative;
}

/* ---------------- Titulo e preco ---------------- */
.lz-produto .product_title {
  margin: 0 0 10px;
  color: var(--lz-ink);
  font-size: clamp(1.45rem, 2.2vw, 1.95rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.lz-produto .summary > .price,
.lz-produto .price {
  display: block;
  margin: 0 0 22px;
  padding-bottom: 22px;
  border-bottom: var(--lz-p-fio);
  color: var(--lz-ink);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
}

.lz-produto .price del {
  margin-right: 10px;
  color: var(--lz-text);
  font-size: 0.95rem;
  font-weight: 400;
  opacity: 0.65;
}

.lz-produto .price ins {
  background: none;
  color: var(--lz-ink);
  text-decoration: none;
}

/* ---------------- Variacoes ---------------- */
/* A tabela do WooCommerce continua no HTML porque o script de variacoes
   conta com ela; aqui ela so deixa de se comportar como tabela. */
.lz-produto table.variations,
.lz-produto table.variations tbody,
.lz-produto table.variations tr,
.lz-produto table.variations th,
.lz-produto table.variations td {
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.lz-produto table.variations tr + tr {
  margin-top: 18px;
}

.lz-produto table.variations th.label label {
  display: block;
  margin: 0 0 10px;
  color: var(--lz-ink);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* O select fica acessivel mas fora de vista: quem aparece sao os botoes,
   e ele segue sendo a fonte da verdade do WooCommerce. */
.lz-campo-variacao select {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.lz-opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Pill redonda, na mesma familia da bolinha de cor. O raio grande e o
   que faz as duas fileiras (tamanho e cor) parecerem o mesmo controle. */
.lz-opcao {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--lz-line);
  border-radius: 999px;
  background: var(--lz-white);
  color: var(--lz-ink);
  font-family: var(--lz-font);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  cursor: pointer;
  text-transform: uppercase;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

/* O brilho e um anel de sombra da propria cor, e nao um fundo mais
   claro: ele cresce para FORA, entao a pastilha nao muda de tamanho e a
   fileira nao se mexe quando o dedo passa. */
.lz-opcao:hover {
  border-color: var(--lz-rose-forte);
  color: var(--lz-rose-forte);
  box-shadow: 0 0 0 3px rgba(201, 143, 159, 0.28);
}

/* Escolhido em rosa, e nao em preto: a marca aparece justamente no
   momento em que a cliente decide. */
.lz-opcao.is-ativo {
  border-color: var(--lz-rose-forte);
  background: var(--lz-rose-forte);
  color: var(--lz-white);
}

.lz-opcao.is-ativo:hover {
  border-color: var(--lz-rose-forte);
  background: var(--lz-rose-forte);
  color: var(--lz-white);
  box-shadow: 0 0 0 3px rgba(180, 116, 136, 0.32);
}

.lz-opcao:focus-visible {
  outline: 2px solid var(--lz-rose);
  outline-offset: 2px;
}

/* Combinacao sem estoque: continua legivel, mas riscada e sem acao. */
.lz-opcao.is-indisponivel,
.lz-opcao:disabled {
  border-color: var(--lz-line);
  color: var(--lz-text);
  cursor: not-allowed;
  opacity: 0.45;
  text-decoration: line-through;
}

.lz-produto .reset_variations {
  /* Clicar de novo na opcao escolhida ja desmarca, entao o link "Limpar"
     do WooCommerce virou repeticao. Fica escondido, nao removido: o
     script de variacoes mexe nele e reclamaria se nao existisse.
     O !important e obrigatorio porque esse script mostra o link
     escrevendo style inline no elemento. */
  display: none !important;
  margin-top: 12px;
  color: var(--lz-text);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lz-produto .reset_variations:hover {
  color: var(--lz-rose);
}

/* O preco da variacao escolhida nao repete a moldura do preco de cima. */
.lz-produto .single_variation .price {
  margin: 0 0 16px;
  padding-bottom: 0;
  border-bottom: 0;
  font-size: 1.2rem;
}

.lz-produto .woocommerce-variation-availability p {
  margin: 0 0 12px;
  color: var(--lz-text);
  font-size: 0.8rem;
}

/* ---------------- Frete ---------------- */
/* O bloco do Melhor Envio vem como caixa cinza; aqui ele vira uma linha
   de formulario como qualquer outra, sem fundo e sem moldura. */
/* O bloco fica abaixo do botao (movido no functions.php) e compacto:
   campo de 42px, rotulo pequeno e sem a caixa cinza do plugin. */
.lz-frete {
  margin-top: 18px;
  padding-top: 16px;
  border-top: var(--lz-p-fio);
}

.lz-produto .containerCalculator {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
}

/* O plugin imprime o titulo "Simulacao de frete" como texto solto ou
   em h3/h4; qualquer um deles vira rotulo discreto. */
.lz-produto .containerCalculator h3,
.lz-produto .containerCalculator h4,
.lz-produto .containerCalculator > label,
.lz-produto .containerCalculator .titleCalculator {
  display: block;
  margin: 0 0 8px;
  color: var(--lz-ink);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.lz-produto .containerCalculator .calculatorRow,
.lz-produto .containerCalculator .row,
.lz-produto .containerCalculator .col-75 {
  width: auto;
  margin: 0;
  padding: 0;
  background: none;
}

.lz-produto .containerCalculator .row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.lz-produto .containerCalculator .col-75 {
  flex: 1 1 auto;
  min-width: 0;
}

.lz-produto .containerCalculator input[type="text"],
.lz-produto .containerCalculator input.iptCep {
  width: 100%;
  min-height: 42px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--lz-line);
  border-radius: var(--lz-p-raio);
  background: var(--lz-white);
  font-family: var(--lz-font);
  font-size: 0.88rem;
}

.lz-produto .containerCalculator button,
.lz-produto .containerCalculator .button {
  flex: none;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--lz-ink);
  border-radius: var(--lz-p-raio);
  background: none;
  color: var(--lz-ink);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lz-produto .containerCalculator .resultado-frete {
  margin-top: 12px;
  color: var(--lz-text);
  font-size: 0.82rem;
  line-height: 1.6;
}

/* ---------------- Quantidade e compra ---------------- */
.lz-produto .woocommerce-variation-add-to-cart,
.lz-produto form.cart:not(.variations_form) {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
  margin-top: 4px;
}

/* Quantidade em tres bolinhas: menos e mais nas pontas, o numero numa
   bolinha maior no centro. A caixa em volta sumiu — quem desenha agora
   sao os proprios circulos. */
.lz-produto .quantity {
  display: inline-flex;
  flex: none;
  gap: 10px;
  align-items: center;
  border: 0;
  border-radius: 0;
}

.lz-quantidade__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--lz-line);
  border-radius: 999px;
  background: var(--lz-white);
  color: var(--lz-ink);
  font-family: var(--lz-font);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

.lz-quantidade__btn:hover {
  border-color: var(--lz-ink);
  background: var(--lz-paper);
}

.lz-produto .quantity input.qty {
  width: 52px;
  height: 52px;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--lz-ink);
  border-radius: 999px;
  background: var(--lz-white);
  font-weight: 600;
  font-size: 0.92rem;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.lz-produto .quantity input.qty::-webkit-outer-spin-button,
.lz-produto .quantity input.qty::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}

/* A aparencia dos dois botoes de compra esta num bloco unico, mais
   abaixo ("OS DOIS BOTOES DE COMPRA"). Ficava espalhada em tres lugares
   com valores diferentes — 54px aqui, 52px la — e o resultado era um
   botao sair diferente do outro. Nao estilize os botoes aqui. */

/* Enquanto o ajax do WooCommerce trabalha, o botao avisa. */
.lz-produto .single_add_to_cart_button.loading {
  opacity: 0.75;
  cursor: progress;
}

.lz-produto .single_add_to_cart_button.added::after {
  margin-left: 8px;
  content: "✓";
}

/* ---------------- Informacoes secundarias ---------------- */
.lz-produto .woocommerce-product-details__short-description {
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: var(--lz-p-fio);
  color: var(--lz-text);
  font-size: 0.9rem;
  line-height: 1.75;
}

.lz-produto .product_meta {
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: var(--lz-p-fio);
  color: var(--lz-text);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  line-height: 1.9;
}

.lz-produto .product_meta > span {
  display: block;
}

.lz-produto .product_meta a {
  color: var(--lz-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lz-produto .product_meta a:hover {
  color: var(--lz-rose);
}

/* Blocos de aviso que plugins penduram no resumo: discretos. */
.lz-produto .single-product-extras {
  margin-top: 18px;
  padding-top: 16px;
  border-top: var(--lz-p-fio);
  color: var(--lz-text);
  font-size: 0.8rem;
  line-height: 1.6;
}

.lz-produto .single-product-extras svg {
  width: 15px;
  height: 15px;
}

/* ---------------- Selo de promocao ---------------- */
.lz-produto .onsale {
  position: absolute;
  top: 14px;
  left: 14px;
  right: auto;
  z-index: 2;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 6px 11px;
  border-radius: var(--lz-p-raio);
  background: var(--lz-white);
  color: var(--lz-ink);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

/* ---------------- Mobile ---------------- */
@media (max-width: 1024px) {
  .lz-produto {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .lz-produto__painel {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 768px) {
  /* Foto e painel no mesmo eixo. Antes a midia tinha margem negativa e
     o bloco final devolvia padding, o que deixava a foto alinhada numa
     medida e o texto em outra. */
  .luluzetys-conteudo-produto .lz-produto__midia {
    margin-right: 0;
    margin-left: 0;
    padding-right: 16px;
    padding-left: 16px;
  }

  .luluzetys-conteudo-produto .lz-produto__painel {
    padding-right: 16px;
    padding-left: 16px;
  }

  .lz-produto .product_title {
    font-size: 1.3rem;
  }

  .lz-produto .price {
    margin-bottom: 18px;
    padding-bottom: 18px;
    font-size: 1.25rem;
  }

  /* Area de toque maior nas opcoes e nos passos de quantidade. */
  .lz-opcao {
    min-height: 46px;
    padding: 0 16px;
  }

  .lz-quantidade__btn {
    width: 44px;
    height: 44px;
  }

  /* Botao ocupa a linha inteira, com a quantidade acima. */
  .lz-produto .woocommerce-variation-add-to-cart,
  .lz-produto form.cart:not(.variations_form) {
    gap: 10px;
  }

  /* A area de compra nao tem regra propria no celular: a grade de uma
     coluna e o grid-column dos dois botoes agora valem em toda largura.
     As tres regras que existiam aqui repetiam o que ja esta no bloco
     unico e eram justamente onde a divergencia de altura nascia. */

  .lz-produto .containerCalculator .row {
    flex-wrap: wrap;
  }

  .lz-produto .containerCalculator .col-75 {
    flex: 1 1 100%;
  }

  .lz-produto .containerCalculator button,
  .lz-produto .containerCalculator .button {
    flex: 1 1 100%;
  }
}

.lz-produto__categoria {
  display: inline-block;
  margin: 0 0 10px;
  color: var(--lz-rose);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

.lz-produto__categoria:hover {
  color: var(--lz-ink);
}

/* ================================================================== */
/* NEUTRALIZA O LAYOUT PADRAO DO WOOCOMMERCE                           */
/*                                                                     */
/* O CSS do proprio WooCommerce traz um layout de duas colunas com     */
/* float e porcentagens, e uma grade de produtos com float. Enquanto o */
/* Kadence estava ativo ele sobrescrevia tudo isso; com tema proprio   */
/* essas regras voltam a valer e vencem seletor mais curto.            */
/*                                                                     */
/* Cada seletor aqui existe para passar de um seletor especifico do    */
/* core — por isso sao longos. Nao encurtar sem conferir o que ganha.  */
/* ================================================================== */

/* --- Menu de categorias no header --- */
/* Vence ".woocommerce ul.products li.product" (0,3,2). */
.luluzetys-header-nav .woocommerce ul.products li.product,
.luluzetys-header-nav .woocommerce ul.products li.product-category {
  width: auto;
  margin: 0;
  padding: 0;
  float: none;
  clear: none;
  background: none;
  border: 0;
}

/* Vence ".woocommerce ul.products li.product a img" (0,3,4). */
.luluzetys-header-nav .woocommerce ul.products li.product img,
.luluzetys-header-nav .woocommerce ul.products li.product-category img,
.luluzetys-header-nav .woocommerce ul.products li.product mark.count {
  display: none;
}

.luluzetys-header-nav .woocommerce ul.products li.product h2,
.luluzetys-header-nav .woocommerce ul.products li.product-category h2 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

/* --- Pagina de produto --- */
/* Vence ".woocommerce div.product div.images" e ".summary" (0,2,2). */
.woocommerce div.product.lz-produto .woocommerce-product-gallery,
.woocommerce div.product.lz-produto div.images,
.woocommerce div.product.lz-produto .summary,
.woocommerce div.product.lz-produto div.summary {
  width: 100%;
  margin: 0;
  float: none;
}

.woocommerce div.product.lz-produto .woocommerce-product-gallery__wrapper,
.woocommerce div.product.lz-produto .woocommerce-product-gallery__image {
  width: 100%;
  margin: 0;
}

.woocommerce div.product.lz-produto .woocommerce-product-gallery__image img {
  display: block;
  width: 100%;
  height: auto;
}

/* As miniaturas do core saem em 5 colunas minusculas; aqui viram uma
   fileira legivel abaixo da foto principal. */
.woocommerce div.product.lz-produto .flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.woocommerce div.product.lz-produto .flex-control-thumbs li {
  width: auto;
  margin: 0;
  float: none;
  list-style: none;
}

/* Miniaturas encaixadas numa fileira, todas do mesmo tamanho. Aqui o
   recorte e proposital: miniatura serve para reconhecer a foto, e uma
   fileira irregular fica desalinhada. A foto grande e que mantem a
   proporcao original. */
.woocommerce div.product.lz-produto .flex-control-thumbs li {
  flex: 0 0 auto;
  width: 76px;
}

.woocommerce div.product.lz-produto .flex-control-thumbs img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  border: 1px solid transparent;
  border-radius: var(--lz-p-raio-foto);
  object-fit: cover;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 160ms ease, border-color 160ms ease;
}

.woocommerce div.product.lz-produto .flex-control-thumbs img:hover {
  opacity: 0.85;
}

.woocommerce div.product.lz-produto .flex-control-thumbs img.flex-active {
  border-color: var(--lz-ink);
  opacity: 1;
}

/* ------------------------------------------------------------------ */
/* SETAS DA GALERIA                                                    */
/* Aparecem sobre a foto e so no ponteiro fino: no toque, arrastar ja  */
/* e o gesto natural e as setas cobririam a peca.                      */
/* ------------------------------------------------------------------ */
.lz-galeria .flex-viewport {
  position: relative;
}

.lz-galeria__seta {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  transform: translateY(-50%);
  border: 1px solid var(--lz-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--lz-ink);
  cursor: pointer;
  opacity: 0;
  transition: opacity 180ms ease, background 180ms ease;
}

.lz-galeria__seta svg {
  width: 18px;
  height: 18px;
}

.lz-galeria__seta--anterior {
  left: 14px;
}

.lz-galeria__seta--proxima {
  right: 14px;
}

.lz-galeria:hover .lz-galeria__seta,
.lz-galeria__seta:focus-visible {
  opacity: 1;
}

.lz-galeria__seta:hover {
  background: var(--lz-white);
}

@media (hover: none) {
  .lz-galeria__seta {
    display: none;
  }
}

/* Abas e relacionados voltam a ocupar a linha inteira. */
.woocommerce div.product.lz-produto .woocommerce-tabs,
.woocommerce div.product.lz-produto .related,
.woocommerce div.product.lz-produto .upsells {
  width: 100%;
  float: none;
  clear: both;
}

/* --- Grade de produtos (loja, categoria, relacionados) --- */
/* Vence ".woocommerce ul.products li.product" (0,3,2) do core. */
.luluzetys-main .woocommerce ul.products li.product,
.woocommerce .luluzetys-main ul.products li.product,
.luluzetys-grid .woocommerce ul.products li.product,
.luluzetys-main.woocommerce ul.products li.product {
  width: auto;
  margin: 0;
  float: none;
  clear: none;
}

.luluzetys-main .woocommerce ul.products li.product a img,
.woocommerce .luluzetys-main ul.products li.product a img,
.luluzetys-grid .woocommerce ul.products li.product a img,
.luluzetys-main.woocommerce ul.products li.product a img {
  width: 100%;
  margin: 0;
  box-shadow: none;
}

/* --- Cores padrao do WooCommerce --- */
/* O core pinta o preco de verde-oliva e os botoes de roxo, com
   seletores que usam :where(body:not(...)) e um "div.product p.price"
   mais especifico do que qualquer coisa curta. Estas regras existem so
   para desfazer isso — a paleta da loja e a do topo deste arquivo. */
.woocommerce div.product.lz-produto p.price,
.woocommerce div.product.lz-produto span.price,
.woocommerce div.product.lz-produto .summary .price,
.woocommerce div.product.lz-produto .single_variation .price {
  color: var(--lz-ink);
}

.woocommerce div.product.lz-produto p.price del,
.woocommerce div.product.lz-produto .summary .price del {
  color: var(--lz-text);
}

.woocommerce div.product.lz-produto p.price ins,
.woocommerce div.product.lz-produto .summary .price ins {
  background: none;
  color: var(--lz-ink);
}

/* As cores dos dois botoes de compra tambem moram no bloco unico
   ("OS DOIS BOTOES DE COMPRA"). Era aqui que estava a terceira copia. */

/* Demais botoes do WooCommerce (carrinho, checkout, cupom, conta). */
.luluzetys-main.woocommerce a.button,
.luluzetys-main.woocommerce button.button,
.luluzetys-main.woocommerce input.button,
.luluzetys-main .woocommerce a.button,
.woocommerce .luluzetys-main a.button,
.luluzetys-main .woocommerce button.button,
.woocommerce .luluzetys-main button.button,
.luluzetys-main .woocommerce input.button,
.woocommerce .luluzetys-main input.button {
  border-color: var(--lz-line);
  background-color: var(--lz-white);
  color: var(--lz-ink);
}

.luluzetys-main.woocommerce a.button.alt,
.luluzetys-main.woocommerce button.button.alt,
.luluzetys-main.woocommerce input.button.alt,
.luluzetys-main .woocommerce a.button.alt,
.woocommerce .luluzetys-main a.button.alt,
.luluzetys-main .woocommerce button.button.alt,
.woocommerce .luluzetys-main button.button.alt,
.luluzetys-main .woocommerce input.button.alt,
.woocommerce .luluzetys-main input.button.alt,
.luluzetys-main.woocommerce a.checkout-button,
.luluzetys-main .woocommerce a.checkout-button,
.woocommerce .luluzetys-main a.checkout-button {
  border-color: var(--lz-ink);
  background-color: var(--lz-ink);
  color: var(--lz-white);
}

.luluzetys-main.woocommerce a.button.alt:hover,
.luluzetys-main.woocommerce button.button.alt:hover,
.luluzetys-main .woocommerce a.button.alt:hover,
.woocommerce .luluzetys-main a.button.alt:hover,
.luluzetys-main .woocommerce button.button.alt:hover,
.woocommerce .luluzetys-main button.button.alt:hover,
.luluzetys-main .woocommerce a.checkout-button:hover,
.woocommerce .luluzetys-main a.checkout-button:hover {
  background-color: var(--lz-white);
  color: var(--lz-ink);
}

/* Selo de promocao: o core usa o mesmo roxo. */
.woocommerce span.onsale,
.luluzetys-main .woocommerce span.onsale,
.woocommerce .luluzetys-main span.onsale {
  background-color: var(--lz-white);
  color: var(--lz-ink);
}

/* ================================================================== */
/* SELETOR DE COR                                                      */
/* Bolinha com a cor real e, abaixo da fileira, o nome do que esta      */
/* escolhido. A cor vem do --lz-cor que o script escreve por opcao;     */
/* quando o nome nao esta no mapa de cores, a opcao cai na pastilha de  */
/* texto e nada aqui se aplica.                                        */
/* ================================================================== */
.lz-opcoes__fileira {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lz-opcoes__fileira--cor {
  /* O anel da bolinha escolhida e box-shadow, que desenha fora da caixa
     do botao. Sem esta folga, a primeira bolinha tem o anel cortado
     pela borda do container. A margem negativa devolve o alinhamento
     para o anel nao empurrar a fileira para dentro. */
  gap: 10px;
  margin: -4px;
  padding: 4px;
}

.lz-cor {
  position: relative;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--lz-line);
  border-radius: 999px;
  background: var(--lz-cor, var(--lz-linen));
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.lz-cor:hover {
  transform: scale(1.06);
}

/* O anel fica fora da bolinha para nao cobrir a cor. */
.lz-cor.is-ativo {
  box-shadow: 0 0 0 2px var(--lz-white), 0 0 0 3px var(--lz-ink);
}

.lz-cor:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--lz-white), 0 0 0 3px var(--lz-rose);
}

/* Indisponivel: risco diagonal por cima da cor. */
.lz-cor.is-indisponivel {
  cursor: not-allowed;
  opacity: 0.5;
}

.lz-cor.is-indisponivel::after {
  position: absolute;
  inset: -1px;
  border-radius: 999px;
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 1px),
    var(--lz-text) calc(50% - 1px),
    var(--lz-text) calc(50% + 1px),
    transparent calc(50% + 1px)
  );
  content: "";
}

/* O nome da cor escolhida vive DENTRO do <label> do atributo — a linha
   le "Cor  Preto". Sem caixa alta e num peso mais leve que o rotulo,
   para ser resposta e nao titulo. */
.lz-opcoes__escolhido {
  display: none;
  margin-left: 8px;
  color: var(--lz-text);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
}

.lz-opcoes__escolhido.is-visivel {
  display: inline;
}

/* ================================================================== */
/* FOTOS ARREDONDADAS                                                  */
/* Grade de produtos e galeria do produto com o mesmo raio, para o      */
/* catalogo e a pagina falarem a mesma lingua.                          */
/* ================================================================== */
.luluzetys-main ul.products li.product a.luluzetys-card-foto,
.luluzetys-grid ul.products li.product a.luluzetys-card-foto,
.luluzetys-main ul.products li.product .woocommerce-loop-image-link ,
.luluzetys-grid ul.products li.product .woocommerce-loop-image-link {
  border-radius: var(--lz-p-raio-foto);
}

.luluzetys-main ul.products li.product img,
.luluzetys-grid ul.products li.product img,
.luluzetys-main .woocommerce ul.products li.product img,
.woocommerce .luluzetys-main ul.products li.product img,
.luluzetys-grid .woocommerce ul.products li.product img {
  border-radius: var(--lz-p-raio-foto);
}

/* A bolinha e as miniaturas nao entram nessa regra. */
.luluzetys-header-nav ul.products li.product img {
  border-radius: 0;
}

.woocommerce div.product.lz-produto .woocommerce-product-gallery,
.woocommerce div.product.lz-produto .woocommerce-product-gallery__image,
.woocommerce div.product.lz-produto .woocommerce-product-gallery__image img {
  border-radius: var(--lz-p-raio-foto);
}

.woocommerce div.product.lz-produto .woocommerce-product-gallery {
  overflow: hidden;
}

@media (max-width: 768px) {
  /* Sangrando ate a borda, o arredondamento das pontas de cima fica
     estranho contra a lateral da tela: some no celular. */
  .luluzetys-conteudo-produto .woocommerce div.product.lz-produto .woocommerce-product-gallery,
  .luluzetys-conteudo-produto .woocommerce div.product.lz-produto .woocommerce-product-gallery__image img {
    border-radius: 0;
  }

  .lz-cor {
    width: 38px;
    height: 38px;
  }
}

/* O plugin de frete usa grade propria com padding largo; aqui ela vira
   uma linha simples de campo e botao. */
.lz-produto .containerCalculator .calculatorRow,
.lz-produto .containerCalculator .row,
.lz-produto .containerCalculator .col-75,
.lz-produto .containerCalculator .col-25 {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.lz-produto .containerCalculator .resultado-frete:empty {
  margin: 0;
}

.lz-produto .containerCalculator small {
  font-size: 0.76rem;
}

/* ================================================================== */
/* RELACIONADOS                                                        */
/* Mesma grade da home: 4 colunas, gap curto, foto arredondada e a      */
/* mesma tipografia de nome e preco. Herda tudo de .luluzetys-main, so  */
/* o titulo da secao e o espaco acima sao proprios daqui.               */
/* ================================================================== */
.lz-produto .related.products,
.luluzetys-main .related.products,
.luluzetys-main .up-sells {
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: var(--lz-p-fio, 1px solid var(--lz-line));
}

.luluzetys-main .related.products > h2,
.luluzetys-main .up-sells > h2 {
  margin: 0 0 clamp(24px, 3vw, 36px);
  color: var(--lz-ink);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

/* O WooCommerce imprime "columns-4" na lista; a grade abaixo ignora
   isso e usa as mesmas medidas do catalogo. */
.luluzetys-main .related.products ul.products,
.luluzetys-main .up-sells ul.products {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 10px;
}

@media (max-width: 1024px) {
  .luluzetys-main .related.products ul.products,
  .luluzetys-main .up-sells ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .luluzetys-main .related.products ul.products,
  .luluzetys-main .up-sells ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 8px;
  }

  /* No celular a pagina de produto tira o recuo do container; os
     relacionados precisam dele de volta. */
  .luluzetys-conteudo-produto .related.products,
  .luluzetys-conteudo-produto .up-sells {
    padding-right: 16px;
    padding-left: 16px;
  }
}

/* ================================================================== */
/* GALERIA — DUAS EXPERIENCIAS                                         */
/*                                                                     */
/* Desktop: sem carrossel. As fotos ficam empilhadas e rolam, enquanto  */
/* a coluna de compra fica fixa ao lado. E o padrao das lojas de moda   */
/* contemporaneas e resolve o problema de ter que clicar em seta para   */
/* ver a peca por outro angulo.                                        */
/*                                                                     */
/* Celular: o carrossel do WooCommerce continua ativo, porque arrastar  */
/* para o lado e o gesto natural, com miniaturas logo abaixo.           */
/*                                                                     */
/* Os !important existem porque o FlexSlider escreve largura e          */
/* transform como estilo inline no elemento, e estilo inline so perde   */
/* para !important. Sao poucos e todos no mesmo lugar.                  */
/* ================================================================== */
@media (min-width: 1025px) {
  /* Desmonta o palco do carrossel: altura livre e nada recortado. */
  .lz-produto .woocommerce-product-gallery .flex-viewport {
    height: auto !important;
    overflow: visible !important;
  }

  /* A esteira de slides vira uma coluna. */
  .lz-produto .woocommerce-product-gallery__wrapper {
    display: grid !important;
    width: 100% !important;
    gap: 10px;
    transform: none !important;
    transition: none !important;
  }

  .lz-produto .woocommerce-product-gallery__wrapper > * {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    opacity: 1 !important;
  }

  /* Empilhado, miniatura e seta perdem a funcao: navegar entre fotos
     que ja estao todas abertas nao faz sentido.
     O seletor repete ".woocommerce div.product.lz-produto" porque e
     assim que a regra que liga o display esta escrita mais acima; um
     seletor curto aqui perderia para ela mesmo dentro da media query. */
  .woocommerce div.product.lz-produto .flex-control-thumbs,
  .lz-produto .woocommerce-product-gallery .flex-control-thumbs,
  .lz-produto .lz-galeria__seta {
    display: none;
  }

  /* Cada foto arredondada individualmente, ja que agora sao varias. */
  .lz-produto .woocommerce-product-gallery {
    overflow: visible;
    border-radius: 0;
  }

  .lz-produto .woocommerce-product-gallery__image,
  .lz-produto .woocommerce-product-gallery__image img {
    border-radius: var(--lz-p-raio-foto);
  }

  /* A coluna de compra acompanha a rolagem das fotos. O top considera a
     altura do header para o painel nao encostar nele.
     O recuo a esquerda afasta o texto da foto, que agora encosta na
     coluna por causa do gap curto do grid. */
  /* So o recuo e daqui; sticky e a ausencia de rolagem interna ja vem
     da regra base do painel — nao repetir max-height/overflow aqui, foi
     essa copia que manteve o bug vivo numa primeira tentativa. */
  .lz-produto__painel {
    padding-left: 10px;
  }
}

@media (max-width: 1024px) {
  /* Carrossel: a foto ocupa a largura toda e o arraste manda. */
  .lz-produto .woocommerce-product-gallery .flex-viewport {
    overflow: hidden;
  }

  .lz-produto .woocommerce-product-gallery__image img {
    width: 100%;
    height: auto;
  }

  /* Miniaturas coladas, com pouco gap, logo abaixo da foto. */
  .woocommerce div.product.lz-produto .flex-control-thumbs,
  .lz-produto .woocommerce-product-gallery .flex-control-thumbs {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    margin: 6px 0 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .lz-produto .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar {
    display: none;
  }

  .lz-produto .woocommerce-product-gallery .flex-control-thumbs li {
    flex: 0 0 auto;
    width: 58px;
  }

  .lz-produto .woocommerce-product-gallery .flex-control-thumbs img {
    border-radius: var(--lz-raio);
  }
}

@media (max-width: 768px) {
  /* Sangrando ate a borda, as miniaturas recebem o recuo de volta para
     nao encostarem na lateral da tela. */
  .luluzetys-conteudo-produto .lz-produto .woocommerce-product-gallery .flex-control-thumbs {
    padding-right: 16px;
    padding-left: 16px;
  }

  .luluzetys-conteudo-produto .lz-produto .woocommerce-product-gallery .flex-control-thumbs li {
    width: 52px;
  }
}

/* ================================================================== */
/* RITMO DO PAINEL DE COMPRA                                           */
/*                                                                     */
/* A escada de espacos e proposital: o que pertence ao mesmo assunto    */
/* fica junto (categoria/nome/preco), e o fio separa decisao de         */
/* leitura. O espaco grande que sobrava embaixo da variante vinha de    */
/* elementos que o WooCommerce mantem no DOM mesmo vazios — eles        */
/* ocupavam altura e margem sem mostrar nada.                          */
/* ================================================================== */
.lz-produto__categoria {
  margin-bottom: 8px;
}

.lz-produto .product_title {
  margin: 0 0 8px;
}

.lz-produto .price {
  margin: 0 0 20px;
  padding-bottom: 20px;
}

/* Vazios do WooCommerce: o wrapper da variacao, a area de preco/estoque
   da variacao e o alerta do reset so ocupam espaco quando tem conteudo. */
.lz-produto .single_variation_wrap > .single_variation:empty,
.lz-produto .woocommerce-variation.single_variation:empty,
.lz-produto .woocommerce-variation-description:empty,
.lz-produto .woocommerce-variation-price:empty,
.lz-produto .woocommerce-variation-availability:empty,
.lz-produto .reset_variations_alert {
  display: none;
  margin: 0;
  padding: 0;
}

/* O wrapper da variacao nao adiciona respiro proprio: quem controla o
   espaco antes do botao e a tabela de variacoes. */
.lz-produto .single_variation_wrap {
  margin: 0;
}

.lz-produto .single_variation {
  margin: 0;
}

/* Preco e disponibilidade da variacao, quando existem, entram colados
   ao botao em vez de flutuar no meio. */
.lz-produto .woocommerce-variation-price {
  margin: 0 0 12px;
}

.lz-produto .woocommerce-variation-availability {
  margin: 0 0 12px;
}

/* Tabela de variacoes: o respiro fica embaixo dela, uma vez so. */
.lz-produto table.variations {
  margin: 0 0 18px;
}

.lz-produto table.variations tr + tr {
  margin-top: 16px;
}

/* A barra de quantidade e compra nao precisa de margem de topo: o
   espaco vem da tabela acima. */
.lz-produto .woocommerce-variation-add-to-cart,
.lz-produto form.cart:not(.variations_form) {
  margin-top: 0;
}

/* Descricao e meta com o mesmo respiro do fio de cima. */
.lz-produto .woocommerce-product-details__short-description {
  margin: 20px 0 0;
  padding-top: 20px;
}

.lz-produto .product_meta {
  margin: 18px 0 0;
  padding-top: 16px;
}

/* ================================================================== */
/* DOIS BOTOES DE COMPRA                                               */
/* "Adicionar ao carrinho" continua sendo a acao principal (preto) e   */
/* "Comprar agora" fica ao lado em contorno. O contorno preenche no    */
/* hover, invertendo com o vizinho — movimento pequeno e legivel, sem  */
/* animacao chamativa.                                                 */
/* ================================================================== */
/* Uma coluna so, em qualquer largura: quantidade numa linha, cada botao
   na sua. Antes a quantidade dividia a linha com o "Adicionar ao
   carrinho", que sobrava com 176px — texto longo demais para isso, entao
   ele quebrava em duas linhas e ficava com 62px de altura contra os 54px
   do "Comprar agora". Era essa a diferenca entre os dois botoes: nao era
   estilo, era largura. Empilhados, os dois tem exatamente a mesma caixa. */
.lz-produto .woocommerce-variation-add-to-cart,
.lz-produto form.cart:not(.variations_form) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

/* A quantidade nao estica com os botoes: fica do tamanho dela, na
   esquerda. */
.lz-produto .woocommerce-variation-add-to-cart .quantity,
.lz-produto form.cart:not(.variations_form) .quantity {
  justify-self: start;
}

/* ================================================================== */
/* OS DOIS BOTOES DE COMPRA                                            */
/* Fonte, tamanho, altura, recuo e raio ficam nesta regra so, para os   */
/* dois. Antes estavam em tres blocos separados com valores diferentes  */
/* (54px num, 52px noutro) e por isso um saia diferente do outro.       */
/* A UNICA coisa que os separa e o preenchimento, logo abaixo.          */
/*                                                                      */
/* Sobre o tamanho do seletor: o WooCommerce pinta o botao de roxo com  */
/* ".woocommerce div.product form.cart .button", que da (0,4,2). Um     */
/* seletor curto como ".lz-produto .single_add_to_cart_button" perde    */
/* dessa regra. Por isso o "form.cart button." — leva para (0,5,3) e    */
/* vence com folga, sem !important e sem depender da ordem do arquivo.  */
/* ================================================================== */
.woocommerce div.product.lz-produto form.cart button.single_add_to_cart_button,
.woocommerce div.product.lz-produto form.cart button.lz-comprar-agora {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  height: auto;
  padding: 14px 24px;
  border: 1px solid transparent;
  /* Arredondados de ponta a ponta, a pedido — e conversando com o resto
     da area de compra, que ja e toda redonda: as bolinhas da quantidade
     e as pills de tamanho logo acima. */
  border-radius: 999px;
  /* O texto nunca quebra em duas linhas: era ISSO que fazia um botao
     parecer mais alto que o outro, e nao o contorno. Os dois usam borda
     de 1px com box-sizing border-box, entao a borda nao soma altura
     nenhuma — o que somava era a segunda linha de texto. */
  white-space: nowrap;
  font-family: var(--lz-font);
  font-size: 0.78rem;
  font-weight: 600;
  /* Era 0.16em: em caixa alta isso abre quase 2px por letra e o
     "Adicionar ao carrinho" ficava esparramado ao lado do outro. */
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
  white-space: normal;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.woocommerce div.product.lz-produto form.cart button.single_add_to_cart_button,
.woocommerce div.product.lz-produto form.cart button.lz-comprar-agora {
  grid-column: 1 / -1;
}

/* Primario: "Comprar agora" leva direto ao checkout, entao e ele que
   recebe a cor da marca. Texto em tinta, e nao branco, porque branco
   sobre o rose da 2.7:1 de contraste e some; tinta da 5.4:1. */
.woocommerce div.product.lz-produto form.cart button.lz-comprar-agora {
  /* Contorno na mesma tinta do outro botao, a pedido: assim os dois tem
     a mesma moldura e a unica diferenca entre eles passa a ser o
     preenchimento — cheio aqui, vazado no vizinho. */
  border-color: var(--lz-ink);
  background: var(--lz-rose);
  color: var(--lz-ink);
}

.woocommerce div.product.lz-produto form.cart button.lz-comprar-agora:hover {
  border-color: var(--lz-ink);
  background: var(--lz-ink);
  color: var(--lz-white);
}

/* Secundario: contorno, para nao competir com o primario. */
.woocommerce div.product.lz-produto form.cart button.single_add_to_cart_button {
  border-color: var(--lz-ink);
  background: var(--lz-white);
  color: var(--lz-ink);
}

.woocommerce div.product.lz-produto form.cart button.single_add_to_cart_button:hover {
  background: var(--lz-ink);
  color: var(--lz-white);
}

.woocommerce div.product.lz-produto form.cart button.lz-comprar-agora:focus-visible,
.woocommerce div.product.lz-produto form.cart button.single_add_to_cart_button:focus-visible {
  outline: 2px solid var(--lz-rose);
  outline-offset: 2px;
}

/* Os dois continuam com cara de clicaveis mesmo sem variacao escolhida.
   O WooCommerce marca o botao com .disabled nesse caso; aqui a marca
   nao muda a aparencia, porque quem avisa agora e a mensagem que o
   produto.js mostra ao clicar. Botao apagado nao explica nada — o
   cliente fica olhando para um botao morto sem saber o que falta. */
.woocommerce div.product.lz-produto form.cart button.single_add_to_cart_button.disabled,
.woocommerce div.product.lz-produto form.cart button.single_add_to_cart_button.wc-variation-selection-needed {
  border-color: var(--lz-ink);
  background: var(--lz-white);
  color: var(--lz-ink);
  cursor: pointer;
  opacity: 1;
}

/* O aviso de "escolha uma opcao", logo acima dos botoes. */
.lz-aviso-variacao {
  display: none;
  margin: 0 0 10px;
  padding: 10px 14px;
  border: 1px solid var(--lz-rose);
  border-radius: var(--lz-p-raio);
  background: var(--lz-paper);
  color: var(--lz-ink);
  font-size: 0.82rem;
  line-height: 1.45;
}

.lz-aviso-variacao.is-visivel {
  display: block;
}

/* ================================================================== */
/* PRODUTO NO MOBILE — COMPRA COMPACTA                                 */
/* A foto, o painel, os avisos e os blocos abaixo usam o mesmo recuo.  */
/* O formulario ganha uma primeira linha curta: quantidade menor ao    */
/* lado do botao nativo, e o "Comprar agora" segue como acao direta na */
/* linha seguinte, sem competir com o seletor de quantidade.            */
/* ================================================================== */
@media (max-width: 768px) {
  .luluzetys-conteudo-produto .lz-produto {
    gap: 18px;
  }

  .luluzetys-conteudo-produto .lz-produto__midia,
  .luluzetys-conteudo-produto .lz-produto__painel,
  .luluzetys-conteudo-produto .woocommerce-notices-wrapper,
  .luluzetys-conteudo-produto .related.products,
  .luluzetys-conteudo-produto .up-sells {
    padding-right: 16px;
    padding-left: 16px;
  }

  .luluzetys-conteudo-produto .lz-produto__midia {
    margin-right: 0;
    margin-left: 0;
  }

  .lz-produto__categoria {
    margin-bottom: 7px;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
  }

  .lz-produto .product_title {
    margin-bottom: 7px;
    font-size: 1.22rem;
    letter-spacing: 0;
    line-height: 1.22;
  }

  .lz-produto .summary > .price,
  .lz-produto .price {
    margin-bottom: 14px;
    padding-bottom: 14px;
    font-size: 1.14rem;
    line-height: 1.25;
  }

  .lz-produto table.variations {
    margin-bottom: 14px;
  }

  .lz-produto table.variations tr + tr {
    margin-top: 12px;
  }

  .lz-produto table.variations th.label label {
    margin-bottom: 8px;
    font-size: 0.66rem;
    letter-spacing: 0.12em;
  }

  .lz-opcoes__fileira {
    gap: 6px;
  }

  .lz-opcao {
    min-height: 38px;
    padding: 0 14px;
    font-size: 0.7rem;
    letter-spacing: 0.07em;
  }

  .lz-cor {
    width: 34px;
    height: 34px;
  }

  .lz-produto .woocommerce-variation-add-to-cart,
  .lz-produto form.cart:not(.variations_form) {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
  }

  .lz-produto .woocommerce-variation-add-to-cart .quantity,
  .lz-produto form.cart:not(.variations_form) .quantity {
    grid-column: 1;
    justify-self: stretch;
  }

  .lz-produto .quantity {
    justify-content: space-between;
    gap: 4px;
    width: 112px;
  }

  .lz-quantidade__btn {
    width: 32px;
    height: 32px;
    font-size: 0.92rem;
  }

  .lz-produto .quantity input.qty {
    width: 38px;
    height: 38px;
    font-size: 0.82rem;
  }

  .woocommerce div.product.lz-produto form.cart button.single_add_to_cart_button,
  .woocommerce div.product.lz-produto form.cart button.lz-comprar-agora {
    min-height: 48px;
    padding: 12px 14px;
    font-size: 0.7rem;
    letter-spacing: 0.045em;
    line-height: 1.25;
  }

  .woocommerce div.product.lz-produto form.cart button.single_add_to_cart_button {
    grid-column: 2;
  }

  .woocommerce div.product.lz-produto form.cart button.lz-comprar-agora {
    grid-column: 1 / -1;
  }

  .lz-produto .woocommerce-product-details__short-description {
    margin-top: 16px;
    padding-top: 16px;
    font-size: 0.86rem;
    line-height: 1.65;
  }

  .lz-produto .product_meta {
    margin-top: 16px;
    padding-top: 14px;
  }

  .lz-frete {
    margin-top: 16px;
    padding-top: 14px;
  }

  .lz-produto .containerCalculator .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: stretch;
  }

  .lz-produto .containerCalculator .col-75,
  .lz-produto .containerCalculator button,
  .lz-produto .containerCalculator .button {
    flex: none;
  }

  .lz-produto .containerCalculator input[type="text"],
  .lz-produto .containerCalculator input.iptCep,
  .lz-produto .containerCalculator button,
  .lz-produto .containerCalculator .button {
    min-height: 40px;
  }

  .lz-produto .containerCalculator button,
  .lz-produto .containerCalculator .button {
    padding-right: 14px;
    padding-left: 14px;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
  }
}

@media (max-width: 360px) {
  .lz-produto .woocommerce-variation-add-to-cart,
  .lz-produto form.cart:not(.variations_form) {
    grid-template-columns: 98px minmax(0, 1fr);
    gap: 7px;
  }

  .lz-produto .quantity {
    width: 98px;
    gap: 3px;
  }

  .lz-quantidade__btn {
    width: 29px;
    height: 29px;
  }

  .lz-produto .quantity input.qty {
    width: 34px;
    height: 36px;
  }

  .woocommerce div.product.lz-produto form.cart button.single_add_to_cart_button,
  .woocommerce div.product.lz-produto form.cart button.lz-comprar-agora {
    padding-right: 10px;
    padding-left: 10px;
    font-size: 0.66rem;
  }
}

/* ================================================================== */
/* CORTES DE HOVER E FOCO                                              */
/* Anel de foco e sombra desenham FORA da caixa do elemento. Onde a    */
/* fileira encosta na borda do container, o anel do primeiro item sai  */
/* recortado. A folga com margem negativa resolve sem mover o layout.  */
/* ================================================================== */
.lz-frete,
.lz-produto .containerCalculator .row {
  margin-right: -3px;
  margin-left: -3px;
  padding-right: 3px;
  padding-left: 3px;
}

.lz-produto .containerCalculator {
  overflow: visible;
}

/* SKU "Nao aplicavel" nao informa nada: produto variavel nao tem SKU
   proprio. O restante do meta (categoria) continua. */
.lz-produto .product_meta .sku_wrapper {
  display: none;
}

/* ================================================================== */
/* GRADE — FONTE UNICA                                                 */
/*                                                                     */
/* Estas medidas valem em home, loja, categoria, busca e relacionados. */
/* Para mudar o espacamento do catalogo inteiro, mexer aqui e so aqui. */
/* ================================================================== */
.luluzetys-main,
.luluzetys-grid {
  --lz-card-gap-x: 10px;   /* espaco entre colunas    */
  --lz-card-gap-y: 34px;   /* espaco entre linhas     */
  --lz-card-nome: 8px;     /* foto -> nome            */
  --lz-card-preco: 2px;    /* nome -> preco           */
}

.luluzetys-main .woocommerce ul.products,
.woocommerce .luluzetys-main ul.products,
.luluzetys-main ul.products,
.luluzetys-grid .woocommerce ul.products,
.luluzetys-grid ul.products {
  /* align-items start evita que um card mais alto estique os vizinhos e
     abra buraco na linha — era o que fazia a categoria falhar, porque
     sem proporcao fixa as fotos tem alturas diferentes. */
  align-items: start;
  gap: var(--lz-card-gap-y) var(--lz-card-gap-x);
}

.luluzetys-main ul.products li.product .woocommerce-loop-product__title,
.luluzetys-grid ul.products li.product .woocommerce-loop-product__title {
  margin-top: var(--lz-card-nome);
}

.luluzetys-main ul.products li.product .price,
.luluzetys-grid ul.products li.product .price {
  margin-top: var(--lz-card-preco);
}

/* Card em coluna: garante que nome e preco fiquem colados na foto,
   independente do que o tema anterior ou um plugin tenha deixado. */
.luluzetys-main ul.products li.product,
.luluzetys-grid ul.products li.product {
  display: flex;
  flex-direction: column;
}

.luluzetys-main ul.products li.product > a:not(.luluzetys-card-foto):not(.woocommerce-loop-image-link),
.luluzetys-grid ul.products li.product > a:not(.luluzetys-card-foto):not(.woocommerce-loop-image-link) {
  order: 2;
}

/* ================================================================== */
/* CARROSSEL DOS RELACIONADOS                                          */
/*                                                                     */
/* Sempre uma linha. O que nao cabe rola para o lado, com arraste no    */
/* celular e seta no desktop. A rolagem e nativa com scroll-snap: sem   */
/* biblioteca, sem clonar item e sem timer girando sozinho.             */
/* ================================================================== */
.lz-carrossel {
  position: relative;
}

/* O seletor repete ".related.products" porque essa secao tem DUAS
   classes no mesmo elemento, o que da a ela especificidade maior do que
   um ".lz-carrossel" sozinho — com o seletor curto, as colunas fixas
   continuavam valendo junto com o fluxo em coluna e os cards se
   empilhavam uns por cima dos outros. */
.luluzetys-main .related.products.lz-carrossel ul.products,
.luluzetys-main .up-sells.lz-carrossel ul.products,
.luluzetys-main .lz-carrossel ul.products,
.luluzetys-grid .lz-carrossel ul.products {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * var(--lz-card-gap-x)) / 4);
  grid-template-columns: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.luluzetys-main .lz-carrossel ul.products::-webkit-scrollbar,
.luluzetys-grid .lz-carrossel ul.products::-webkit-scrollbar {
  display: none;
}

.luluzetys-main .lz-carrossel ul.products li.product,
.luluzetys-grid .lz-carrossel ul.products li.product {
  scroll-snap-align: start;
}

.lz-carrossel__controles {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

/* Cabendo tudo numa tela, os controles nao aparecem. */
.lz-carrossel--cabe .lz-carrossel__controles {
  display: none;
}

.lz-carrossel__seta {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--lz-line);
  border-radius: 999px;
  background: var(--lz-white);
  color: var(--lz-ink);
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, opacity 160ms ease;
}

.lz-carrossel__seta svg {
  width: 17px;
  height: 17px;
}

.lz-carrossel__seta:hover:not(:disabled) {
  border-color: var(--lz-ink);
}

.lz-carrossel__seta:disabled {
  cursor: default;
  opacity: 0.3;
}

.lz-carrossel__pontos {
  display: flex;
  gap: 6px;
  align-items: center;
}

.lz-carrossel__ponto {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--lz-line);
  cursor: pointer;
  transition: width 200ms ease, background 200ms ease;
}

.lz-carrossel__ponto.is-ativo {
  width: 20px;
  background: var(--lz-ink);
}

@media (max-width: 1024px) {
  .luluzetys-main .related.products.lz-carrossel ul.products,
  .luluzetys-main .up-sells.lz-carrossel ul.products,
  .luluzetys-main .lz-carrossel ul.products,
  .luluzetys-grid .lz-carrossel ul.products {
    grid-auto-columns: calc((100% - 2 * var(--lz-card-gap-x)) / 3);
  }
}

@media (max-width: 768px) {
  /* Duas por tela no celular, como voce pediu. */
  .luluzetys-main .related.products.lz-carrossel ul.products,
  .luluzetys-main .up-sells.lz-carrossel ul.products,
  .luluzetys-main .lz-carrossel ul.products,
  .luluzetys-grid .lz-carrossel ul.products {
    grid-auto-columns: calc((100% - var(--lz-card-gap-x)) / 2);
  }

  .lz-carrossel__seta {
    width: 40px;
    height: 40px;
  }
}

/* ------------------------------------------------------------------ */
/* BANDEIRAS DE PAGAMENTO                                              */
/* Marcas oficiais em SVG, monocromaticas na cor do texto, para nao    */
/* virar um mosaico colorido no rodape. O selo vira so a moldura.      */
/* ------------------------------------------------------------------ */
.luluzetys-seal--marca {
  padding: 0 12px;
}

.luluzetys-marca {
  display: block;
  width: 26px;
  height: 26px;
  fill: currentColor;
  stroke: none;
}

.luluzetys-seal--texto {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}

/* ================================================================== */
/* PAGINAS INSTITUCIONAIS                                              */
/* Texto longo pede coluna estreita: linha comprida demais cansa a      */
/* leitura. Sem card, so tipografia e espaco.                          */
/* ================================================================== */
.luluzetys-doc {
  max-width: 68ch;
  margin: 0 auto;
  color: var(--lz-text);
  font-size: 0.95rem;
  line-height: 1.8;
}

.luluzetys-doc-intro {
  margin: 0 0 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--lz-line);
  color: var(--lz-ink);
  font-size: 1.05rem;
  line-height: 1.7;
}

.luluzetys-doc h2 {
  margin: 36px 0 12px;
  color: var(--lz-ink);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}

.luluzetys-doc p {
  margin: 0 0 16px;
}

.luluzetys-doc ul {
  margin: 0 0 16px;
  padding-left: 20px;
}

.luluzetys-doc li {
  margin-bottom: 8px;
}

.luluzetys-doc strong {
  color: var(--lz-ink);
  font-weight: 600;
}

.luluzetys-doc a {
  color: var(--lz-rose);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.luluzetys-doc-nota {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--lz-line);
  font-size: 0.85rem;
}

/* ================================================================== */
/* GALERIA NO CELULAR — AJUSTES FINAIS                                 */
/* ================================================================== */
@media (max-width: 768px) {
  /* A foto deixa de sangrar: recuo lateral igual ao do texto. */
  .luluzetys-conteudo-produto .lz-produto__midia {
    padding-right: 16px;
    padding-left: 16px;
  }

  .luluzetys-conteudo-produto .woocommerce div.product.lz-produto .woocommerce-product-gallery,
  .luluzetys-conteudo-produto .woocommerce div.product.lz-produto .woocommerce-product-gallery__image img {
    border-radius: var(--lz-p-raio-foto);
  }

  /* ------------------------------------------------------------
     MINIATURAS DA GALERIA NO CELULAR
     Bolinhas de 7px viraram MINIATURAS REDONDAS de verdade (46px),
     mostrando a propria foto — a pedido: os pontos nao diziam nada
     sobre o que vinha, e ficavam grudados na foto principal.
     A fileira e centralizada e ganha setas nas laterais (o wrapper
     .lz-minis vem do produto.js). O arraste na foto principal continua
     sendo o caminho principal: touch-action pan-y deixa o dedo rolar a
     pagina na vertical e entrega a horizontal para o carrossel.
     ------------------------------------------------------------ */
  .lz-produto .flex-viewport {
    touch-action: pan-y;
  }

  /* Onde mora o respiro: no WRAPPER quando ele existe, e na fileira
     quando nao existe.

     A tentativa anterior deixou a margem so na fileira, "porque ela
     sempre existe". So que a fileira agora fica DENTRO do wrapper
     flex — e ali margem nao abre espaco acima da linha: ela empurra as
     miniaturas para baixo em relacao as setas e estica a altura da
     linha. O resultado era pouco espaco em cima e muito embaixo.

     A regra de baixo zera a margem quando ha wrapper; a de cima e o
     plano B para o caso de o produto.js nao rodar. */
  .lz-minis {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
  }

  /* O "div.images" precisa estar aqui: o WooCommerce zera a margem em
     ".woocommerce div.product div.images .flex-control-thumbs", que da
     (0,4,2) — um seletor de ELEMENTO a mais que os (0,4,1) de um
     seletor sem ele. Sem "div.images" a margem simplesmente nao valia.
     Com ele, a regra chega a (0,5,2) e passa a mandar. */
  .woocommerce div.product.lz-produto div.images .flex-control-thumbs,
  .lz-produto div.images .flex-control-thumbs,
  .luluzetys-conteudo-produto .lz-produto div.images .flex-control-thumbs {
    gap: 12px;
    margin-top: 10px;
    justify-content: center;
  }

  .woocommerce div.product.lz-produto div.images .lz-minis .flex-control-thumbs,
  .lz-produto div.images .lz-minis .flex-control-thumbs,
  .luluzetys-conteudo-produto div.images .lz-minis .flex-control-thumbs {
    margin-top: 0;
  }

  /* Abaixo da linha, o espaco ate o nome do produto vem do painel — um
     valor so, para nao somar com o de cima. */
  .lz-produto__midia {
    margin-bottom: 0;
  }

  .lz-minis .lz-galeria__seta {
    position: static;
    flex: none;
    width: 38px;
    height: 38px;
    transform: none;
    border: 1px solid var(--lz-line);
    border-radius: 999px;
    background: var(--lz-white);
    color: var(--lz-ink);
    transition: border-color 200ms ease, color 200ms ease;
  }

  .lz-minis .lz-galeria__seta:hover,
  .lz-minis .lz-galeria__seta:focus-visible {
    border-color: var(--lz-rose);
    color: var(--lz-rose);
  }

  /* A miniatura e um circulo com a foto dentro. O tamanho e do <li>
     (o onload inline do WooCommerce reescreve o da <img>, historia ja
     documentada acima) e a foto preenche por object-fit. */
  .woocommerce div.product.lz-produto div.images .flex-control-thumbs li,
  .lz-produto div.images .flex-control-thumbs li {
    width: 58px;
    height: 58px;
    overflow: hidden;
    border: 2px solid var(--lz-line);
    border-radius: 999px;
    background: var(--lz-linen);
    transition: border-color 200ms ease;
  }

  .woocommerce div.product.lz-produto div.images .flex-control-thumbs li:hover,
  .lz-produto div.images .flex-control-thumbs li:hover {
    border-color: var(--lz-rose);
  }

  .woocommerce div.product.lz-produto div.images .flex-control-thumbs li:has(img.flex-active),
  .lz-produto div.images .flex-control-thumbs li:has(img.flex-active) {
    border-color: var(--lz-ink);
  }

  .woocommerce div.product.lz-produto div.images .flex-control-thumbs li img,
  .woocommerce div.product.lz-produto div.images .flex-control-thumbs li img.flex-active,
  .woocommerce div.product.lz-produto div.images .flex-control-thumbs li img:hover,
  .lz-produto div.images .flex-control-thumbs li img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border: 0;
    border-radius: inherit;
    object-fit: cover;
    opacity: 1;
    cursor: pointer;
    transition: none;
  }
}

/* ------------------------------------------------------------------ */
/* COR DO PRECO NA GRADE                                               */
/* Os relacionados ficam fora do .lz-produto, entao as regras de cor    */
/* daquele escopo nao os alcancavam e o verde padrao do WooCommerce     */
/* voltava a aparecer. Aqui a regra cobre qualquer grade dentro do      */
/* conteudo, com especificidade acima da do core.                      */
/* ------------------------------------------------------------------ */
.luluzetys-main .woocommerce ul.products li.product .price,
.woocommerce .luluzetys-main ul.products li.product .price,
.luluzetys-main ul.products li.product .price,
.luluzetys-grid .woocommerce ul.products li.product .price,
.luluzetys-grid ul.products li.product .price {
  color: var(--lz-ink);
}

.luluzetys-main .woocommerce ul.products li.product .price del,
.woocommerce .luluzetys-main ul.products li.product .price del,
.luluzetys-main ul.products li.product .price del {
  color: var(--lz-text);
}

.luluzetys-main .woocommerce ul.products li.product .price ins,
.woocommerce .luluzetys-main ul.products li.product .price ins,
.luluzetys-main ul.products li.product .price ins {
  background: none;
  color: var(--lz-ink);
}

/* ================================================================== */
/* O SELETOR DE ATRIBUTO DO WOOCOMMERCE                                */
/*                                                                     */
/* O core dimensiona os cards com                                      */
/*   .woocommerce ul.products[class*="columns-"] li.product            */
/* que vale (0,4,2) — empata com um seletor de quatro classes e vence  */
/* por ordem de carregamento. Era o que deixava o card com 22% ou 48%  */
/* da largura do trilho, os produtos minusculos e as linhas irregulares */
/* na categoria e nos relacionados.                                    */
/*                                                                     */
/* Repetir o [class*="columns-"] aqui leva o seletor a (0,5,2) e        */
/* resolve de vez, em toda grade do site.                              */
/* ================================================================== */
.luluzetys-main .woocommerce ul.products[class*="columns-"] li.product,
.woocommerce .luluzetys-main ul.products[class*="columns-"] li.product,
.luluzetys-main ul.products[class*="columns-"] li.product,
.luluzetys-grid .woocommerce ul.products[class*="columns-"] li.product,
.luluzetys-grid ul.products[class*="columns-"] li.product {
  display: flex;
  flex-direction: column;
  width: auto;
  margin: 0;
  padding: 0;
  float: none;
  clear: none;
}

.luluzetys-main .woocommerce ul.products[class*="columns-"] li.product img,
.woocommerce .luluzetys-main ul.products[class*="columns-"] li.product img,
.luluzetys-main ul.products[class*="columns-"] li.product img,
.luluzetys-grid .woocommerce ul.products[class*="columns-"] li.product img,
.luluzetys-grid ul.products[class*="columns-"] li.product img {
  width: 100%;
  height: auto;
  margin: 0;
}

@media (max-width: 768px) {
  .luluzetys-conteudo-produto .woocommerce-notices-wrapper {
    padding-right: 16px;
    padding-left: 16px;
  }
}

/* ================================================================== */
/* CHECKOUT COMPACTO                                                   */
/* Os campos de cobranca viram um grid de 12 colunas: pares curtos     */
/* dividem a linha (CEP+Endereco, Numero+Complemento+Bairro,           */
/* Cidade+Estado) em vez de cada um ocupar uma linha inteira. Os ids   */
/* vem do plugin de Campos do Checkout; um campo novo que ele criar    */
/* cai no span de 12 e so fica menos compacto — nunca quebra.          */
/* ================================================================== */
.luluzetys-main .woocommerce-billing-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 14px;
}

.luluzetys-main .woocommerce-billing-fields__field-wrapper > .form-row {
  grid-column: span 12;
  /* O WooCommerce ainda pensa em float aqui: ".form-row-first" e
     ".form-row-last" levam "width: 47%" e "float: left" do core. O
     float o grid ignora sozinho, mas o width nao — ele se aplica DENTRO
     da celula, e o campo saia com 158px numa coluna de 336. Era esse o
     "campo pequeno ao lado de campo grande". Quem manda na largura aqui
     e o grid; o campo preenche a celula que recebeu. */
  width: 100%;
  float: none;
}

/* Rede de seguranca: se algum campo vier com rotulo invisivel (o
   WooCommerce usa "screen-reader-text" em alguns, e o plugin de Campos
   do Checkout pode criar outros), o input dele subiria a altura de um
   rotulo e ficaria torto ao lado dos vizinhos. Encostando a linha na
   base da celula, os campos alinham mesmo sem rotulo visivel. */
.luluzetys-main .woocommerce-billing-fields__field-wrapper > .form-row:has(> label.screen-reader-text) {
  align-self: end;
}

/* Pais: a loja vende so para o Brasil, o proprio WooCommerce ja rende
   o campo como texto fixo + input escondido. A linha visivel e um
   aviso do obvio — some, o valor continua viajando no envio.
   O !important e obrigatorio: o address-i18n.js do WooCommerce escreve
   display:block INLINE nesta linha ao carregar o pais, e inline vence
   qualquer folha de estilo sem !important. */
.luluzetys-main #billing_country_field {
  display: none !important;
}

@media (min-width: 641px) {
  .luluzetys-main #billing_first_name_field,
  .luluzetys-main #billing_last_name_field,
  .luluzetys-main #billing_cpf_field,
  .luluzetys-main #billing_birthdate_field,
  .luluzetys-main #billing_gender_field,
  .luluzetys-main #billing_phone_field,
  .luluzetys-main #billing_email_field {
    grid-column: span 6;
  }

  .luluzetys-main #billing_postcode_field {
    grid-column: span 4;
  }

  .luluzetys-main #billing_address_1_field {
    grid-column: span 8;
  }

  .luluzetys-main #billing_number_field {
    grid-column: span 3;
  }

  .luluzetys-main #billing_address_2_field {
    grid-column: span 5;
  }

  .luluzetys-main #billing_neighborhood_field {
    grid-column: span 4;
  }

  .luluzetys-main #billing_city_field {
    grid-column: span 8;
  }

  .luluzetys-main #billing_state_field {
    grid-column: span 4;
  }
}

/* No celular so nome/sobrenome e numero/bairro dividem linha. */
@media (max-width: 640px) {
  .luluzetys-main #billing_first_name_field,
  .luluzetys-main #billing_last_name_field,
  .luluzetys-main #billing_number_field,
  .luluzetys-main #billing_neighborhood_field {
    grid-column: span 6;
  }
}

/* ================================================================== */
/* CHECKOUT EM ETAPAS                                                  */
/* O comportamento vive no plugin luluzetys-checkout (etapas.js); aqui */
/* e so o visual. Sem o plugin, nada destas classes existe na pagina e */
/* o checkout aparece inteiro — o CSS nao esconde nada sozinho.        */
/* ================================================================== */
.lz-etapas-nav {
  display: flex;
  gap: 8px;
  margin: 0 0 22px;
}

.lz-etapas-pilula {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 9px 16px;
  border: 1px solid var(--lz-line);
  border-radius: 999px;
  background: var(--lz-white);
  color: var(--lz-text);
  font-family: var(--lz-font);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: default;
}

.lz-etapas-pilula.is-feita {
  cursor: pointer;
}

.lz-etapas-pilula.is-atual {
  border-color: var(--lz-ink);
  color: var(--lz-ink);
}

.lz-etapas-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--lz-linen);
  color: var(--lz-ink);
  font-size: 0.68rem;
}

.lz-etapas-pilula.is-atual .lz-etapas-numero {
  background: var(--lz-ink);
  color: var(--lz-white);
}

.lz-etapas-pilula.is-feita .lz-etapas-numero {
  background: var(--lz-rose);
}

/* Quais campos aparecem: decidido pelo atributo que o script poe no
   form. Campo fora da etapa atual continua no DOM (o envio precisa
   dele), so nao ocupa a tela.
   O !important nao e capricho: o address-i18n.js do WooCommerce escreve
   display:block INLINE nas linhas de endereco (pais, CEP, endereco,
   complemento, cidade, estado) ao carregar a localidade. Foi por isso
   que a etapa 1 estreou mostrando o endereco inteiro enquanto Numero e
   Bairro — que nao sao campos de localidade — sumiam direitinho: os
   seis com estilo inline furavam a regra sem !important. */
form.checkout[data-lz-etapa="1"] .form-row[data-lz-etapa="2"],
form.checkout[data-lz-etapa="2"] .form-row[data-lz-etapa="1"],
form.checkout[data-lz-etapa="3"] .form-row[data-lz-etapa="1"],
form.checkout[data-lz-etapa="3"] .form-row[data-lz-etapa="2"],
form.checkout[data-lz-etapa="1"] .woocommerce-additional-fields,
form.checkout[data-lz-etapa="3"] .woocommerce-additional-fields {
  display: none !important;
}

/* Com as etapas ativas o titulo "Cobranca & Entrega" vira ruido: ele
   aparecia identico nas abas Dados e Entrega, como se nada tivesse
   mudado. As pilulas ja dizem onde a cliente esta. Sem o plugin de
   etapas o atributo nao existe e o titulo volta sozinho. */
form.checkout[data-lz-etapa] .woocommerce-billing-fields > h3 {
  display: none;
}

.lz-etapas-resumo {
  display: none;
}

form.checkout[data-lz-etapa="3"] .lz-etapas-resumo {
  display: grid;
  gap: 14px;
}

.lz-etapas-resumo-bloco {
  padding: 16px 18px;
  border: 1px solid var(--lz-line);
  border-radius: var(--lz-raio);
  background: var(--lz-white);
}

.lz-etapas-resumo-bloco h3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 8px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lz-etapas-resumo-bloco p {
  margin: 2px 0;
  color: var(--lz-text);
  font-size: 0.88rem;
  line-height: 1.5;
}

.lz-etapas-editar {
  padding: 0;
  border: 0;
  background: none;
  color: var(--lz-rose);
  font-family: var(--lz-font);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: underline;
  cursor: pointer;
}

.lz-etapas-resumo-aviso {
  margin: 4px 0 0;
  color: var(--lz-text);
  font-size: 0.82rem;
}

.lz-etapas-acoes {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-top: 18px;
}

form.checkout[data-lz-etapa="1"] .lz-etapas-voltar,
form.checkout[data-lz-etapa="3"] .lz-etapas-continuar {
  visibility: hidden;
}

.lz-etapas-continuar,
.lz-etapas-voltar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  border-radius: var(--lz-raio);
  font-family: var(--lz-font);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.lz-etapas-continuar {
  border: 1px solid var(--lz-ink);
  background: var(--lz-ink);
  color: var(--lz-white);
}

.lz-etapas-continuar:hover {
  background: var(--lz-white);
  color: var(--lz-ink);
}

.lz-etapas-voltar {
  border: 1px solid var(--lz-line);
  background: var(--lz-white);
  color: var(--lz-text);
}

.lz-etapas-voltar:hover {
  border-color: var(--lz-ink);
  color: var(--lz-ink);
}

/* ================================================================== */
/* FILTROS DA LOJA                                                     */
/* Botao abaixo do titulo + painel lateral. O markup vem de            */
/* inc/filtros-da-loja.php.                                            */
/* ================================================================== */
.lz-filtros-barra {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 2px 0 22px;
}

.lz-filtros-abrir {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 10px 18px;
  border: 1px solid var(--lz-line);
  border-radius: 999px;
  background: var(--lz-white);
  color: var(--lz-ink);
  font-family: var(--lz-font);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 160ms ease;
}

.lz-filtros-abrir:hover {
  border-color: var(--lz-ink);
}

.lz-filtros-abrir svg {
  width: 15px;
  height: 15px;
}

.lz-filtros-contagem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--lz-ink);
  color: var(--lz-white);
  font-size: 0.66rem;
}

.lz-filtros-limpar {
  color: var(--lz-text);
  font-size: 0.78rem;
  text-decoration: underline;
}

.lz-filtros-veu {
  position: fixed;
  inset: 0;
  z-index: 220;
  background: rgba(37, 35, 35, 0.35);
  opacity: 0;
  transition: opacity 200ms ease;
}

.lz-filtros {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 221;
  width: min(360px, 88vw);
  padding: 22px 24px 32px;
  overflow-y: auto;
  background: var(--lz-white);
  box-shadow: -18px 0 40px rgba(37, 35, 35, 0.12);
  transform: translateX(102%);
  transition: transform 220ms ease;
}

body.lz-filtros-abertos .lz-filtros-veu {
  opacity: 1;
}

body.lz-filtros-abertos .lz-filtros {
  transform: none;
}

body.lz-filtros-abertos {
  overflow: hidden;
}

.lz-filtros-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--lz-line);
}

.lz-filtros-cabeca h2 {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lz-filtros-fechar {
  width: 32px;
  height: 32px;
  border: 1px solid var(--lz-line);
  border-radius: 999px;
  background: var(--lz-white);
  color: var(--lz-ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.lz-filtros-secao {
  padding: 16px 0;
  border-bottom: 1px solid var(--lz-line);
}

.lz-filtros-titulo {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lz-filtros-opcoes {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lz-filtros-opcao {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 6px;
  border-radius: var(--lz-raio);
  color: var(--lz-ink);
  font-size: 0.86rem;
  text-decoration: none;
}

.lz-filtros-opcao:hover {
  background: var(--lz-paper);
  color: var(--lz-ink);
  text-decoration: none;
}

/* Caixinha (atributos) e bolinha (ordenacao). */
.lz-filtros-marca {
  flex: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--lz-line);
  border-radius: var(--lz-raio);
  background: var(--lz-white);
}

.lz-filtros-marca--radio {
  border-radius: 999px;
}

.lz-filtros-opcao.is-ligado .lz-filtros-marca {
  border-color: var(--lz-ink);
  background: var(--lz-ink);
  box-shadow: inset 0 0 0 3px var(--lz-white);
}

.lz-filtros-qtd {
  margin-left: auto;
  color: var(--lz-text);
  font-size: 0.72rem;
}

.lz-filtros-preco {
  display: flex;
  gap: 10px;
  align-items: end;
}

.lz-filtros-preco label {
  display: grid;
  gap: 4px;
  color: var(--lz-text);
  font-size: 0.72rem;
}

.lz-filtros-preco input {
  width: 84px;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid var(--lz-line);
  border-radius: var(--lz-raio);
  font-family: var(--lz-font);
}

.lz-filtros-aplicar {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--lz-ink);
  border-radius: var(--lz-raio);
  background: var(--lz-ink);
  color: var(--lz-white);
  font-family: var(--lz-font);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

/* ================================================================== */
/* ALVOS DE TOQUE NO CELULAR                                           */
/* Auditoria mediu links de 11px, 17px e 18px de altura nas quatro     */
/* telas principais — abaixo do minimo confortavel para o dedo, que e  */
/* ~40px. Texto e cor nao mudam; o que muda e a area clicavel.         */
/* Tudo junto aqui, em vez de espalhado, para nao virar de novo tres   */
/* copias divergentes do mesmo ajuste.                                 */
/* ================================================================== */
@media (max-width: 768px) {
  /* Rodape: eram 18px de altura, os menores do site. */
  .luluzetys-footer-links .luluzetys-footer-link {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
  }

  /* Categoria do produto (a assinatura acima do nome). */
  .lz-produto__categoria {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
  }

  /* Carrinho: nome do produto, remover e o link de calcular entrega.
     Os dois ultimos sem prefixo de pagina de proposito: "woocommerce-
     checkout" e classe do <body>, ou seja, ancestral de .luluzetys-main
     e nao descendente — com ela no meio, o seletor nunca casava. */
  .luluzetys-main .woocommerce-cart-form td.product-name a,
  .luluzetys-main .shipping-calculator-button,
  .luluzetys-main .showlogin,
  .luluzetys-main .showcoupon {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  .luluzetys-main .woocommerce-cart-form td.product-remove a.remove {
    width: 36px;
    height: 36px;
  }

  /* "Categoria: X" no rodape do resumo do produto. */
  .lz-produto .product_meta a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
  }
}

/* ================================================================== */
/* CUPOM NO RESUMO DO PEDIDO                                           */
/* Substitui a faixa "Tem um cupom?" que abria o checkout. Aqui ele    */
/* fica ao lado do total, que e onde o desconto aparece.               */
/* ================================================================== */
.lz-cupom {
  margin: 0 0 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--lz-line);
}

.lz-cupom > label {
  display: block;
  margin-bottom: 6px;
  color: var(--lz-ink);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lz-cupom__linha {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* O campo encolhe abaixo do conteudo se precisar; sem min-width zero
   um item flex se recusa a ficar menor que o proprio texto. */
.luluzetys-main .lz-cupom__linha .input-text {
  flex: 1 1 120px;
  width: auto;
  min-width: 0;
}

.lz-cupom__botao {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid var(--lz-ink);
  border-radius: var(--lz-raio);
  background: var(--lz-white);
  color: var(--lz-ink);
  font-family: var(--lz-font);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.lz-cupom__botao:hover {
  background: var(--lz-ink);
  color: var(--lz-white);
}

.lz-cupom__botao:disabled {
  opacity: 0.6;
  cursor: progress;
}

.lz-cupom__aviso {
  display: none;
  margin: 8px 0 0;
  font-size: 0.8rem;
  line-height: 1.4;
}

.lz-cupom__aviso.is-visivel {
  display: block;
}

.lz-cupom__aviso.is-ok {
  color: #1f7a44;
}

.lz-cupom__aviso.is-erro {
  color: #b3261e;
}

/* ================================================================== */
/* OPCOES DE ENTREGA                                                   */
/* Duas coisas estavam erradas na linha "ENVIO" do resumo:             */
/* 1. o rotulo da linha e as opcoes dividiam a largura da tabela, e as */
/*    opcoes ficavam espremidas numa coluna estreita;                  */
/* 2. o endereco da retirada vinha dentro do NOME da opcao e virava    */
/*    cinco linhas de texto ao lado do radio.                          */
/* Agora a linha empilha (rotulo em cima, opcoes ocupando a largura    */
/* toda) e o detalhe so aparece na opcao escolhida.                    */
/* O radio e IRMAO do label, nao filho — por isso a grade fica no <li>.*/
/* ================================================================== */
/* A TABELA DE RESUMO DEIXA DE SER TABELA.
   Tentar soltar so o <tfoot> nao resolve: um bloco dentro de <table> e
   embrulhado numa celula anonima e volta a herdar a largura da coluna —
   medido, o rodape ficava com 286px dos 550 da tabela, e os cartoes de
   entrega junto. Convertendo a tabela inteira em blocos, cada linha
   manda na propria largura: rotulo a esquerda e valor a direita por
   flex, e a linha de entrega, que e a excecao, empilha e ocupa tudo.
   Vale para o resumo do checkout e para os totais do carrinho, que tem
   a mesma estrutura. */
.luluzetys-main #order_review .shop_table,
.luluzetys-main .cart_totals .shop_table {
  display: block;
}

.luluzetys-main #order_review .shop_table thead,
.luluzetys-main #order_review .shop_table tbody,
.luluzetys-main #order_review .shop_table tfoot,
.luluzetys-main .cart_totals .shop_table thead,
.luluzetys-main .cart_totals .shop_table tbody,
.luluzetys-main .cart_totals .shop_table tfoot {
  display: block;
  width: 100%;
}

.luluzetys-main #order_review .shop_table tr,
.luluzetys-main .cart_totals .shop_table tr {
  display: flex;
  gap: 16px;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
}

.luluzetys-main #order_review .shop_table th,
.luluzetys-main #order_review .shop_table td,
.luluzetys-main .cart_totals .shop_table th,
.luluzetys-main .cart_totals .shop_table td {
  display: block;
  width: auto;
  padding-right: 0;
  padding-left: 0;
}

/* O valor nunca quebra em duas linhas; o nome do produto pode. */
.luluzetys-main #order_review .shop_table tr > :last-child,
.luluzetys-main .cart_totals .shop_table tr > :last-child {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
}

.luluzetys-main #order_review .shop_table tr > :first-child,
.luluzetys-main .cart_totals .shop_table tr > :first-child {
  min-width: 0;
}

/* A linha de entrega e a excecao: rotulo em cima, opcoes embaixo,
   ocupando a largura toda.
   O "#order_review" precisa aparecer aqui: as regras genericas acima o
   usam, e um ID vence qualquer quantidade de classes — sem ele, o
   "white-space: nowrap" do valor continuava valendo e o endereco da
   retirada saia da tela em vez de quebrar linha. */
.luluzetys-main #order_review .shop_table tr.woocommerce-shipping-totals,
.luluzetys-main .cart_totals .shop_table tr.woocommerce-shipping-totals {
  display: block;
}

.luluzetys-main #order_review .shop_table tr.woocommerce-shipping-totals > th,
.luluzetys-main #order_review .shop_table tr.woocommerce-shipping-totals > td,
.luluzetys-main .cart_totals .shop_table tr.woocommerce-shipping-totals > th,
.luluzetys-main .cart_totals .shop_table tr.woocommerce-shipping-totals > td {
  flex: none;
  width: 100%;
  white-space: normal;
  text-align: left;
}

.luluzetys-main #order_review .shop_table tr.woocommerce-shipping-totals > th,
.luluzetys-main .cart_totals .shop_table tr.woocommerce-shipping-totals > th {
  padding-bottom: 8px;
  border-bottom: 0;
}

.luluzetys-main #shipping_method {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.luluzetys-main #shipping_method li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 10px;
  align-items: start;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--lz-line);
  border-radius: var(--lz-raio);
  list-style: none;
  transition: border-color 160ms ease, background 160ms ease;
}

.luluzetys-main #shipping_method li:hover {
  border-color: var(--lz-rose);
}

.luluzetys-main #shipping_method li:has(input:checked) {
  border-color: var(--lz-ink);
  background: var(--lz-paper);
}

.luluzetys-main #shipping_method input[type="radio"] {
  grid-column: 1;
  grid-row: 1;
  width: auto;
  min-height: 0;
  margin: 3px 0 0;
}

.luluzetys-main #shipping_method label {
  display: block;
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  padding: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  cursor: pointer;
}

.lz-entrega__nome {
  display: block;
  font-weight: 600;
}

/* O detalhe (endereco, prazo) so entra em cena na opcao escolhida. */
.lz-entrega__detalhe {
  display: none;
  margin-top: 4px;
  color: var(--lz-text);
  font-size: 0.82rem;
  line-height: 1.5;
}

.luluzetys-main #shipping_method li:has(input:checked) .lz-entrega__detalhe {
  display: block;
}

/* ================================================================== */
/* PAGINA POS-COMPRA                                                   */
/* O padrao do WooCommerce entrega uma frase seca e a tabela do pedido.*/
/* Aqui a confirmacao vem primeiro, com o numero em destaque, e a      */
/* tabela fica como consulta — que e a ordem em que a cliente lê.      */
/* ================================================================== */
.luluzetys-main .woocommerce-notice--success {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 16px;
  margin: 0 0 30px;
  padding: 26px 28px;
  border: 1px solid var(--lz-line);
  border-left: 3px solid var(--lz-rose);
  border-radius: var(--lz-raio);
  background: var(--lz-white);
  color: var(--lz-ink);
}

.lz-obrigado__icone {
  display: inline-flex;
  grid-row: 1 / span 2;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--lz-blush);
  color: var(--lz-ink);
}

.lz-obrigado__icone svg {
  width: 24px;
  height: 24px;
}

.lz-obrigado__titulo {
  align-self: end;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.lz-obrigado__texto {
  color: var(--lz-text);
  font-size: 0.92rem;
  line-height: 1.6;
}

.lz-obrigado__texto strong {
  color: var(--lz-ink);
}

/* Os quatro dados do pedido: cartoes, nao uma lista corrida. */
.luluzetys-main .woocommerce-order-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 0 0 34px;
  padding: 0;
  border: 0;
  list-style: none;
}

.luluzetys-main .woocommerce-order-overview li {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--lz-line);
  border-right: 1px solid var(--lz-line);
  border-radius: var(--lz-raio);
  background: var(--lz-white);
  color: var(--lz-text);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  list-style: none;
}

.luluzetys-main .woocommerce-order-overview li strong {
  display: block;
  margin-top: 6px;
  color: var(--lz-ink);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.luluzetys-main .woocommerce-order-details__title,
.luluzetys-main .woocommerce-column__title,
.luluzetys-main .woocommerce-customer-details h2 {
  margin: 0 0 14px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.luluzetys-main .woocommerce-customer-details address {
  padding: 16px 18px;
  border: 1px solid var(--lz-line);
  border-radius: var(--lz-raio);
  background: var(--lz-white);
  color: var(--lz-text);
  font-size: 0.9rem;
  font-style: normal;
  line-height: 1.6;
}

.lz-obrigado__acoes {
  margin-top: 30px;
}

.lz-obrigado__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 32px;
  border: 1px solid var(--lz-ink);
  border-radius: var(--lz-raio);
  background: var(--lz-ink);
  color: var(--lz-white);
  font-family: var(--lz-font);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 180ms ease, color 180ms ease;
}

.lz-obrigado__botao:hover {
  background: var(--lz-white);
  color: var(--lz-ink);
  text-decoration: none;
}

@media (max-width: 768px) {
  .luluzetys-main .woocommerce-notice--success {
    padding: 20px;
  }

  .lz-obrigado__botao {
    width: 100%;
  }
}

/* ================================================================== */
/* CHECKOUT ENXUTO: O RESUMO SO NO FIM                                 */
/* Mostrar lista de produtos, totais e formas de pagamento desde o     */
/* primeiro campo enche a tela de informacao que ainda nao e decisao   */
/* da cliente. Nas etapas 1 e 2 fica so o formulario; na 3 o resumo    */
/* aparece, que e quando ele importa — conferir antes de pagar.        */
/*                                                                     */
/* O resumo NAO sai com display:none. O Mercado Pago monta os campos   */
/* do cartao em iframes que medem o espaco disponivel na hora de       */
/* montar; em container escondido eles nascem com zero e nao se        */
/* recuperam ao aparecer. Entao ele fica fora de vista pelo recorte,   */
/* com largura real, e o iframe continua medindo certo.                */
/*                                                                     */
/* O "#order_review" precisa aparecer no seletor: as regras da tabela  */
/* de resumo usam esse ID, e ID vence qualquer numero de classes.      */
/* E o position:absolute tira o bloco do grid — sem isso o             */
/* "grid-column: 2" dele criava uma coluna implicita e a de campos     */
/* ficava com 852px em vez da largura toda.                            */
/* ================================================================== */
.luluzetys-main form.checkout:not([data-lz-etapa="3"]) #order_review_heading {
  display: none;
}

.luluzetys-main form.checkout:not([data-lz-etapa="3"]) #order_review {
  position: absolute;
  width: min(100%, 520px);
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  pointer-events: none;
}

@media (min-width: 1025px) {
  .luluzetys-main form.checkout:not([data-lz-etapa="3"]) {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Uma coluna de campos ocupando 1240px seria pior que duas: linha
     longa demais para ler. Largura de leitura e centralizada. */
  .luluzetys-main form.checkout:not([data-lz-etapa="3"]) #customer_details {
    width: min(100%, 760px);
    margin: 0 auto;
  }
}

/* ================================================================== */
/* CELULAR ESTREITO (ate 400px)                                        */
/* Medido num iframe de 356px, que e a largura util de um telefone     */
/* comum: a terceira pilula ("PAGAMENTO") estourava 63px para fora da  */
/* tela e criava rolagem horizontal no checkout.                       */
/* ================================================================== */
@media (max-width: 400px) {
  /* O numero sai; a ordem continua legivel pelos proprios rotulos e a
     etapa atual continua destacada. So assim os tres cabem lado a
     lado sem encolher a area de toque. */
  .lz-etapas-numero {
    display: none;
  }

  .lz-etapas-nav {
    gap: 6px;
  }

  .lz-etapas-pilula {
    padding: 9px 12px;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
  }
}

/* O resumo fora de vista precisa se medir pelo FORMULARIO, nao pela
   tela: com "width: min(100%, 520px)" e position:absolute, os 100%
   valiam sobre o bloco posicionado mais proximo e sobravam 16px para
   fora, gerando rolagem horizontal mesmo estando invisivel. Ancorado
   nas duas bordas, ele nunca ultrapassa o proprio formulario. */
.luluzetys-main form.checkout:not([data-lz-etapa="3"]) #order_review {
  left: 0;
  right: 0;
  width: auto;
  max-width: 100%;
}

/* ================================================================== */
/* AVISO DE "ADICIONADO A SACOLA"                                      */
/* O WooCommerce responde com uma faixa no topo da pagina, que no      */
/* celular fica acima da dobra e some no primeiro rolar — a cliente    */
/* clica em comprar e nao sabe se deu certo. O aviso vira uma caixa    */
/* central com as duas saidas: ir para a sacola ou seguir comprando.   */
/* O texto e o link continuam sendo os do WooCommerce.                 */
/* ================================================================== */
.lz-popup-veu {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(37, 35, 35, 0.4);
}

.lz-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 301;
  width: min(400px, calc(100vw - 32px));
  padding: 30px 28px 26px;
  transform: translate(-50%, -50%);
  border-radius: var(--lz-raio);
  background: var(--lz-white);
  box-shadow: 0 24px 60px rgba(37, 35, 35, 0.22);
  text-align: center;
}

body.lz-popup-aberto {
  overflow: hidden;
}

.lz-popup__fechar {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--lz-text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.lz-popup__fechar:hover {
  background: var(--lz-paper);
  color: var(--lz-ink);
}

.lz-popup__marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: var(--lz-blush);
  color: var(--lz-ink);
}

.lz-popup__marca svg {
  width: 26px;
  height: 26px;
}

.lz-popup__titulo {
  display: block;
  margin-bottom: 6px;
  font-size: 1.05rem;
  font-weight: 700;
}

.lz-popup__texto {
  margin: 0 0 20px;
  color: var(--lz-text);
  font-size: 0.9rem;
  line-height: 1.5;
}

.lz-popup__acoes {
  display: grid;
  gap: 10px;
}

.lz-popup__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 20px;
  border: 1px solid var(--lz-ink);
  border-radius: var(--lz-raio);
  font-family: var(--lz-font);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.lz-popup__botao--principal {
  background: var(--lz-ink);
  color: var(--lz-white);
}

.lz-popup__botao--principal:hover {
  background: var(--lz-white);
  color: var(--lz-ink);
  text-decoration: none;
}

.lz-popup__botao--secundario {
  background: var(--lz-white);
  color: var(--lz-ink);
}

.lz-popup__botao--secundario:hover {
  background: var(--lz-paper);
}

/* ================================================================== */
/* VER MAIS PRODUTOS (paginacao que acrescenta)                        */
/* ================================================================== */
.lz-mais {
  display: flex;
  justify-content: center;
  margin: 38px 0 8px;
}

.lz-mais__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 34px;
  border: 1px solid var(--lz-ink);
  border-radius: var(--lz-raio);
  background: var(--lz-white);
  color: var(--lz-ink);
  font-family: var(--lz-font);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 180ms ease, color 180ms ease;
}

.lz-mais__botao:hover {
  background: var(--lz-ink);
  color: var(--lz-white);
  text-decoration: none;
}

/* ================================================================== */
/* MENU LATERAL (hamburguer)                                           */
/* O markup vem de inc/menu-lateral.php (rodape) e o botao e inserido  */
/* pelo menu-lateral.js dentro das acoes do header — nos DOIS headers. */
/* ================================================================== */
/* O botao e um <button> no meio de icones que sao <a>: sem este reset
   ele chega com borda e fundo proprios do navegador — era o circulo
   feio. */
.luluzetys-header-action.lz-menu-botao {
  border: 0;
  background: none;
  cursor: pointer;
}

/* So no celular: no desktop a faixa de categorias ja mostra tudo, e o
   painel seria um segundo caminho para o mesmo lugar. */
@media (min-width: 769px) {
  .luluzetys-header-action.lz-menu-botao {
    display: none;
  }
}

.lz-menu-veu {
  position: fixed;
  inset: 0;
  z-index: 260;
  background: rgba(37, 35, 35, 0.4);
  opacity: 0;
  transition: opacity 220ms ease;
}

.lz-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 261;
  width: min(330px, 86vw);
  padding: 18px 22px 30px;
  overflow-y: auto;
  background: var(--lz-white);
  box-shadow: -18px 0 40px rgba(37, 35, 35, 0.14);
  transform: translateX(102%);
  transition: transform 240ms ease;
}

body.lz-menu-aberto .lz-menu {
  transform: none;
}

body.lz-menu-aberto .lz-menu-veu {
  opacity: 1;
}

body.lz-menu-aberto {
  overflow: hidden;
}

.lz-menu__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--lz-line);
}

.lz-menu__titulo {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lz-menu__fechar {
  width: 34px;
  height: 34px;
  border: 1px solid var(--lz-line);
  border-radius: 999px;
  background: var(--lz-white);
  color: var(--lz-ink);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

.lz-menu__bloco {
  padding: 14px 0 4px;
}

.lz-menu__bloco + .lz-menu__bloco {
  border-top: 1px solid var(--lz-line);
}

.lz-menu__rotulo {
  margin: 0 0 4px;
  color: var(--lz-text);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lz-menu__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lz-menu__lista a {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  color: var(--lz-ink);
  font-size: 0.88rem;
  text-decoration: none;
}

.lz-menu__lista a:hover,
.lz-menu__lista a:focus {
  color: var(--lz-rose);
  text-decoration: none;
}

.lz-menu__conta {
  color: var(--lz-text);
  font-size: 0.72rem;
}

/* ================================================================== */
/* PRODUTO NO CELULAR: UM RECUO SO, PAINEL COMPACTO                    */
/* A pagina somava recuos: o container tirava o dele, a foto ganhava    */
/* 16px, o painel ganhava 16px por cima do que sobrava — medido, a     */
/* foto ficava a 16px da borda e o texto a 32px. Agora o container     */
/* volta a mandar no recuo (16px) e NINGUEM soma por cima: foto,       */
/* titulo, preco, botoes e descricao alinham na mesma margem.          */
/* ================================================================== */
@media (max-width: 768px) {
  .luluzetys-container.luluzetys-conteudo-produto {
    width: min(100% - 32px, 1240px);
  }

  .luluzetys-conteudo-produto div.product > .summary,
  .luluzetys-conteudo-produto div.product > .woocommerce-tabs,
  .luluzetys-conteudo-produto div.product > .related.products,
  .luluzetys-conteudo-produto div.product > .up-sells,
  .luluzetys-conteudo-produto .woocommerce-notices-wrapper,
  .luluzetys-conteudo-produto .related.products,
  .luluzetys-conteudo-produto .up-sells {
    padding-right: 0;
    padding-left: 0;
  }

  .luluzetys-conteudo-produto .lz-produto__midia {
    margin: 0;
    padding: 0;
  }

  .luluzetys-conteudo-produto .lz-produto__painel {
    padding-right: 0;
    padding-left: 0;
  }

  .luluzetys-conteudo-produto .lz-produto .woocommerce-product-gallery .flex-control-thumbs {
    padding-right: 0;
    padding-left: 0;
  }

  /* Com a foto dentro do recuo (e nao sangrando), as pontas
     arredondadas voltam a fazer sentido. */
  .luluzetys-conteudo-produto .woocommerce div.product.lz-produto .woocommerce-product-gallery,
  .luluzetys-conteudo-produto .woocommerce div.product.lz-produto .woocommerce-product-gallery__image img,
  .luluzetys-conteudo-produto div.product .woocommerce-product-gallery img {
    border-radius: var(--lz-raio);
  }

  /* ---------------- Hierarquia do painel de compra ----------------
     Categoria pequena e muda, titulo como dono da tela, preco logo
     abaixo, e um fio separando da area de compra. Espacos iguais
     entre os degraus, sem os saltos de antes. */
  /* Sem margem propria aqui: o espaco entre a foto e o painel e o gap
     do grid do produto, num lugar so. Antes os dois somavam. */

  .luluzetys-main .lz-produto__categoria,
  .lz-produto .lz-produto__categoria {
    display: block;
    min-height: 0;
    margin: 0 0 6px;
    color: var(--lz-text);
    font-size: 0.64rem;
    letter-spacing: 0.12em;
  }

  .lz-produto .product_title {
    margin: 0 0 6px;
    font-size: 1.16rem;
    line-height: 1.3;
  }

  .lz-produto .price {
    margin: 0 0 14px;
    padding-bottom: 14px;
    font-size: 1.05rem;
  }

  .lz-produto .variations {
    margin-bottom: 4px;
  }

  /* ---------------- Quantidade AO LADO do botao -------------------
     Antes: quantidade numa linha, cada botao na sua — tres andares.
     Agora: [quantidade | adicionar ao carrinho] e o "comprar agora"
     embaixo, inteiro. Menos tela, mesma funcao.
     Os seletores repetem a forma "form.cart button." porque o bloco
     unico dos botoes usa (0,5,3) e um seletor mais curto perderia. */
  .woocommerce div.product.lz-produto form.cart .woocommerce-variation-add-to-cart,
  .woocommerce div.product.lz-produto form.cart:not(.variations_form) {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
  }

  .woocommerce div.product.lz-produto form.cart .quantity {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: start;
  }

  /* Os dois com a MESMA altura. A diferenca que aparecia (o "Adicionar"
     parecendo mais alto) nao era o contorno: os dois usam border de 1px
     com box-sizing border-box, entao a borda nao soma altura nenhuma. O
     que havia era 48px aqui contra 50px ali — dois numeros diferentes
     escritos por mim. Um valor so, e a duvida acaba. */
  .woocommerce div.product.lz-produto form.cart button.single_add_to_cart_button,
  .woocommerce div.product.lz-produto form.cart button.lz-comprar-agora {
    min-height: 50px;
  }

  .woocommerce div.product.lz-produto form.cart button.single_add_to_cart_button {
    grid-column: 2;
    grid-row: 1;
    padding: 12px 14px;
    /* Dividindo a linha com a quantidade sobram ~181px para um texto
       que, no tamanho normal, mede ~178px — cabia por 3px em 375, e nao
       cabia em 360. Menor, cabe com folga em qualquer telefone. */
    font-size: 0.72rem;
    letter-spacing: 0.03em;
  }

  .woocommerce div.product.lz-produto form.cart button.lz-comprar-agora {
    grid-column: 1 / -1;
  }

  /* Bolinhas da quantidade menores: 32 nas pontas, 44 no centro. */
  .lz-produto .quantity {
    gap: 6px;
  }

  .lz-quantidade__btn {
    width: 32px;
    height: 32px;
    font-size: 0.95rem;
  }

  .lz-produto .quantity input.qty {
    width: 44px;
    height: 44px;
    font-size: 0.85rem;
  }
}