/* ==========================================================================
   Vitrine Let's Casa — folha de estilo da área pública (/catalogo).
   Usada por src/views/catalogo/*.ejs e por mais nada (o ERP usa Tailwind).

   Ordem das camadas — mantenha nesta sequência:
     1. Tokens      6. Coleção (listagem)
     2. Base        7. Processo, loja e contato
     3. Layout      8. Rodapé
     4. Cabeçalho   9. Detalhe do produto
     5. Hero/prova 10. Responsivo

   Cada regra é definida UMA vez. A versão anterior redefinia .lc-footer,
   .lc-logo e .lc-location-mark em blocos empilhados no fim do arquivo, e
   quem editasse a definição de cima não via efeito nenhum.
   ========================================================================== */

/* 1. TOKENS ============================================================== */
:root {
  /* Cor — a paleta da marca: papel, areia, tinta e terracota. */
  --lc-ink: #252525;
  --lc-ink-2: #332f2b;          /* fundo da seção "como funciona" */
  --lc-ink-soft: #54514d;       /* texto de apoio sobre papel */
  --lc-paper: #f7f5f1;
  --lc-sand: #e9e3da;
  --lc-sand-2: #ebe5dd;
  --lc-clay: #ab8265;
  --lc-clay-deep: #8d654b;      /* o terracota escurecido, para TEXTO sobre claro */
  --lc-clay-light: #d8c2ae;     /* o terracota clareado, para texto sobre escuro */
  --lc-line: rgba(37, 37, 37, .13);
  --lc-line-dark: rgba(255, 255, 255, .22);
  --lc-white: #fff;
  --lc-on-dark: rgba(255, 255, 255, .78);   /* 8,3:1 sobre --lc-ink-2 */

  /* Tipografia — Fraunces nos títulos, Inter no texto.
     Georgia fica no fim da pilha: é o que aparecia em TUDO antes, e não é a
     mesma letra no Android, no Windows e no Mac. */
  --lc-font-display: Fraunces, "Playfair Display", Georgia, "Times New Roman", serif;
  --lc-font-text: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --lc-step--2: .72rem;
  --lc-step--1: .81rem;
  --lc-step-0: .92rem;
  --lc-step-1: 1.02rem;
  --lc-step-2: clamp(1.35rem, 1.1rem + .8vw, 1.62rem);
  --lc-step-3: clamp(1.55rem, 1.25rem + 1.1vw, 1.9rem);
  --lc-step-4: clamp(1.8rem, 1.35rem + 1.8vw, 2.5rem);
  --lc-step-5: clamp(2.5rem, 1.6rem + 3.6vw, 4.4rem);
  --lc-step-6: clamp(2.65rem, 1.5rem + 4.8vw, 5.1rem);

  /* Espaço — uma escala só, para o ritmo da página se ajustar num lugar. */
  --lc-space-1: 4px;
  --lc-space-2: 8px;
  --lc-space-3: 12px;
  --lc-space-4: 16px;
  --lc-space-5: 24px;
  --lc-space-6: 32px;
  --lc-space-7: 48px;
  --lc-space-8: 64px;
  --lc-space-9: 88px;
  --lc-secao: clamp(56px, 7vw, 88px);   /* respiro vertical entre seções */

  --lc-radius: 6px;
  --lc-radius-md: 10px;
  --lc-radius-lg: 16px;
  --lc-radius-pill: 99px;
  --lc-sombra: 0 16px 36px rgba(49, 38, 28, .11);
  --lc-sombra-forte: 0 12px 30px rgba(0, 0, 0, .24);
  --lc-transicao: .22s ease;
  --lc-largura: 1180px;
}

/* 2. BASE ================================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--lc-ink);
  background: var(--lc-paper);
  font-family: var(--lc-font-text);
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

h1, h2, h3, .lc-font-display {
  font-family: var(--lc-font-display);
  font-weight: 400;
  letter-spacing: -.04em;
}

/* Foco de teclado. A folha anterior não tinha NENHUM estilo de foco e ainda
   zerava o outline do campo de busca: quem navega por Tab ficava sem saber
   onde estava. */
:focus-visible {
  outline: 2px solid var(--lc-clay-deep);
  outline-offset: 3px;
}
.lc-hero :focus-visible,
.lc-process :focus-visible,
.lc-footer :focus-visible,
.lc-location-mark :focus-visible { outline-color: var(--lc-clay-light); }

/* Pular para o conteúdo — primeiro item do Tab, invisível até receber foco. */
.lc-skip {
  position: absolute;
  top: -100px;
  left: var(--lc-space-4);
  z-index: 60;
  padding: var(--lc-space-3) var(--lc-space-4);
  background: var(--lc-ink);
  color: var(--lc-white);
  font-size: var(--lc-step--1);
  font-weight: 700;
  transition: top var(--lc-transicao);
}
.lc-skip:focus { top: var(--lc-space-3); }

/* Quem pediu menos movimento no sistema não recebe os deslocamentos e zooms. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .lc-product:hover { transform: none; }
  .lc-product:hover .lc-product-image img { transform: none; }
}

/* 3. LAYOUT ============================================================== */
.lc-shell { width: min(var(--lc-largura), calc(100% - 40px)); margin-inline: auto; }
.lc-section { padding: var(--lc-secao) 0; }

.lc-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--lc-space-5);
  margin-bottom: var(--lc-space-6);
}
.lc-section-title { margin: 0; font-size: var(--lc-step-4); }
.lc-section-text {
  max-width: 450px;
  margin: 0;
  color: var(--lc-ink-soft);
  font-size: var(--lc-step-0);
  line-height: 1.65;
}
.lc-eyebrow {
  margin: 0 0 var(--lc-space-4);
  color: var(--lc-clay-deep);
  font-size: var(--lc-step--2);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Botões e links de texto ------------------------------------------------ */
.lc-nav-cta,
.lc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 19px;
  border: 1px solid var(--lc-ink);
  border-radius: var(--lc-radius);
  background: var(--lc-ink);
  color: var(--lc-white);
  font-family: inherit;
  font-size: var(--lc-step--1);
  font-weight: 750;
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform var(--lc-transicao), background var(--lc-transicao), box-shadow var(--lc-transicao);
}
.lc-nav-cta:hover,
.lc-button:hover { background: #000; color: #fff; transform: translateY(-2px); box-shadow: 0 9px 22px rgba(0, 0, 0, .16); }
.lc-button--ghost { background: transparent; color: var(--lc-ink); }
.lc-button--ghost:hover { background: var(--lc-ink); color: var(--lc-white); }

.lc-text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--lc-space-2);
  margin-top: var(--lc-space-5);
  color: var(--lc-ink);
  font-size: var(--lc-step--1);
  font-weight: 800;
  letter-spacing: .03em;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.lc-text-link span { font-size: 1.2rem; text-decoration: none; }

/* 4. CABEÇALHO =========================================================== */
.lc-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(247, 245, 241, .96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--lc-line);
}
.lc-nav {
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lc-space-5);
}
.lc-logo-frame { display: flex; width: 70px; height: 70px; align-items: center; overflow: hidden; background: #000; }
.lc-logo { width: 70px; height: 70px; object-fit: contain; display: block; }
.lc-logo-frame--custom { background: transparent; border: 0; }
.lc-nav-links {
  display: flex;
  align-items: center;
  gap: var(--lc-space-5);
  color: var(--lc-ink-soft);
  font-size: var(--lc-step--1);
  font-weight: 650;
}
.lc-nav-links a { padding: 6px 2px; border-bottom: 1px solid transparent; }
.lc-nav-links a:hover { color: var(--lc-ink); border-bottom-color: var(--lc-ink); }

/* Entregas recentes ------------------------------------------------------ */
.lc-delivery-section { background: var(--lc-sand-2); }
.lc-delivery-carousel { position: relative; display: flex; align-items: center; gap: var(--lc-space-3); }
.lc-delivery-track { display: flex; min-width: 0; width: 100%; gap: var(--lc-space-5); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.lc-delivery-track::-webkit-scrollbar { display: none; }
.lc-delivery-card { overflow: hidden; border: 1px solid var(--lc-line); border-radius: var(--lc-radius-lg); background: var(--lc-paper); }
.lc-delivery-track .lc-delivery-card { flex: 0 0 calc((100% - 72px) / 4); scroll-snap-align: start; }
.lc-delivery-main { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--lc-sand); }
.lc-delivery-main img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform var(--lc-transicao); }
.lc-delivery-main:hover img { transform: scale(1.035); }
.lc-delivery-copy { display: flex; align-items: baseline; justify-content: space-between; gap: var(--lc-space-3); padding: 14px; }
.lc-delivery-copy strong { font-family: var(--lc-font-display); font-size: 1.25rem; font-weight: 400; letter-spacing: -.025em; }
.lc-delivery-arrow { flex: 0 0 42px; width: 42px; height: 42px; border: 1px solid var(--lc-line); border-radius: 50%; color: var(--lc-ink); background: var(--lc-paper); font-size: 1.1rem; cursor: pointer; transition: background var(--lc-transicao), color var(--lc-transicao), transform var(--lc-transicao); }
.lc-delivery-arrow:hover { color: var(--lc-white); background: var(--lc-ink); transform: translateY(-1px); }

/* 5. HERO, CONFIANÇA E DEPOIMENTOS ======================================= */
.lc-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 7vw, 86px) 0 clamp(56px, 6vw, 76px);
  color: var(--lc-white);
  background: var(--lc-ink);
}
.lc-hero::before,
.lc-hero::after { content: ""; position: absolute; border: 1px solid rgba(255, 255, 255, .17); transform: rotate(45deg); }
.lc-hero::before { width: 340px; height: 340px; right: -90px; top: -145px; }
.lc-hero::after { width: 500px; height: 500px; right: -190px; bottom: -350px; }
.lc-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(250px, .8fr);
  align-items: end;
  gap: var(--lc-space-7);
}
.lc-hero .lc-eyebrow { color: var(--lc-clay-light); }
.lc-hero h1 { max-width: 720px; margin: 0; font-size: var(--lc-step-6); line-height: .98; letter-spacing: -.045em; }
.lc-hero h1 em { color: var(--lc-clay-light); font-style: italic; }
.lc-hero p { max-width: 470px; margin: var(--lc-space-5) 0 0; color: var(--lc-on-dark); font-size: var(--lc-step-1); line-height: 1.72; }
.lc-hero-note { padding: var(--lc-space-6); border-left: 1px solid rgba(255, 255, 255, .32); }
.lc-hero-note strong { display: block; margin-bottom: var(--lc-space-2); font-size: var(--lc-step-1); }
.lc-hero-note span { color: var(--lc-on-dark); font-size: var(--lc-step-0); line-height: 1.6; }

/* Hero editorial com ambientes escolhidos no painel. O conteúdo sobreposto
   mantém a leitura mesmo quando as fotos têm enquadramentos diferentes. */
.lc-ambient-hero { position: relative; min-height: clamp(460px, 60vw, 680px); overflow: hidden; color: var(--lc-white); background: var(--lc-ink); }
.lc-ambient-slides, .lc-ambient-slide { position: absolute; inset: 0; }
.lc-ambient-slide { visibility: hidden; opacity: 0; transition: opacity 1.05s ease-in-out, visibility 1.05s ease-in-out; }
.lc-ambient-slide.is-active { visibility: visible; opacity: 1; }
.lc-ambient-slide > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.lc-ambient-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18, 16, 14, .76) 0%, rgba(18, 16, 14, .32) 48%, rgba(18, 16, 14, .08) 100%), linear-gradient(0deg, rgba(18, 16, 14, .35), transparent 40%); }
.lc-ambient-copy { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding-top: 42px; padding-bottom: 88px; }
.lc-ambient-copy .lc-eyebrow { margin-bottom: var(--lc-space-4); color: var(--lc-clay-light); }
.lc-ambient-copy h1 { max-width: 650px; margin: 0; font-size: var(--lc-step-6); line-height: .98; letter-spacing: -.045em; }
.lc-ambient-copy p:not(.lc-eyebrow) { max-width: 470px; margin: var(--lc-space-5) 0 0; color: var(--lc-on-dark); font-size: var(--lc-step-1); line-height: 1.65; }
.lc-button--light { margin-top: var(--lc-space-6); border-color: var(--lc-white); color: var(--lc-ink); background: var(--lc-white); }
.lc-button--light:hover { border-color: var(--lc-ink); color: var(--lc-white); background: var(--lc-ink); }
.lc-ambient-controls { position: absolute; z-index: 2; right: max(20px, calc((100% - var(--lc-largura)) / 2)); bottom: 28px; display: flex; align-items: center; gap: 12px; }
.lc-ambient-arrow, .lc-ambient-dot { border: 1px solid rgba(255, 255, 255, .55); color: var(--lc-white); background: rgba(0, 0, 0, .22); cursor: pointer; }
.lc-ambient-arrow { width: 42px; height: 42px; border-radius: 50%; font-size: 1.05rem; }
.lc-ambient-arrow:hover, .lc-ambient-dot:hover, .lc-ambient-dot.is-active { border-color: var(--lc-white); background: var(--lc-white); color: var(--lc-ink); }
.lc-ambient-dots { display: flex; align-items: center; gap: 7px; }
.lc-ambient-dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; }

/* A âncora fica abaixo do cabeçalho sticky: trocar de categoria não joga o
   visitante de volta para o topo nem esconde o resultado atrás da nav. */
#colecao-produtos { scroll-margin-top: 108px; }

/* Categorias como conteúdo visual, não apenas chips de filtro. */
.lc-category-showcase { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--lc-space-4); margin: var(--lc-space-7) 0 var(--lc-space-7); }
.lc-category-card { overflow: hidden; border: 1px solid var(--lc-line); border-radius: var(--lc-radius-lg); background: var(--lc-white); transition: transform var(--lc-transicao), box-shadow var(--lc-transicao), border-color var(--lc-transicao); }
.lc-category-card:hover, .lc-category-card.is-active { border-color: var(--lc-ink); transform: translateY(-4px); box-shadow: var(--lc-sombra); }
.lc-category-card-image { aspect-ratio: 1 / 1.08; overflow: hidden; background: linear-gradient(145deg, #e8e0d6, #bcae9d); }
.lc-category-card-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .55s ease; }
.lc-category-card:hover img { transform: scale(1.045); }
.lc-category-card-image span { height: 100%; display: grid; place-items: center; padding: var(--lc-space-4); color: var(--lc-ink-soft); font-family: var(--lc-font-display); font-size: 1.3rem; font-style: italic; text-align: center; }
.lc-category-card-copy { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 14px 15px; }
.lc-category-card-copy strong { font-size: var(--lc-step--1); }
.lc-category-card-copy span { color: var(--lc-ink-soft); font-size: .68rem; white-space: nowrap; }
.lc-category-card-copy b { margin-left: 5px; color: var(--lc-clay-deep); font-size: .9rem; }

.lc-trust { background: var(--lc-sand-2); border-bottom: 1px solid var(--lc-line); }
.lc-trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.lc-trust-item {
  min-height: 124px;
  padding: var(--lc-space-6);
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  column-gap: var(--lc-space-4);
  border-right: 1px solid var(--lc-line);
  transition: background var(--lc-transicao);
}
.lc-trust-item:last-child { border-right: 0; }
.lc-trust-item:hover { background: rgba(255, 255, 255, .46); }
.lc-trust-item > div { min-width: 0; }
/* Ícone em SVG. Os glifos anteriores (★ ⌖ ↗) dependiam da fonte do aparelho:
   no Android o ⌖ virava um quadrado vazio. */
.lc-trust-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--lc-ink);
  border-radius: 50%;
}
.lc-trust-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lc-trust-icon svg.is-filled { fill: currentColor; stroke: none; }
.lc-trust-item strong, .lc-trust-item span:not(.lc-trust-icon) { display: block; }
.lc-trust-item strong { font-size: var(--lc-step--1); }
.lc-trust-item span:not(.lc-trust-icon) { margin-top: var(--lc-space-1); color: var(--lc-ink-soft); font-size: var(--lc-step--2); line-height: 1.42; }

.lc-proof { padding: var(--lc-secao) 0; }
.lc-proof-head { display: grid; grid-template-columns: 1fr .78fr; gap: var(--lc-space-8); align-items: end; }
.lc-proof-head > div:last-child { color: var(--lc-ink-soft); font-size: var(--lc-step-0); line-height: 1.7; }
.lc-proof-head p { margin: 0; }
.lc-reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--lc-space-4); margin-top: var(--lc-space-6); }
.lc-review {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--lc-space-4);
  padding: var(--lc-space-5);
  border: 1px solid var(--lc-line);
  border-radius: var(--lc-radius-lg);
  background: var(--lc-white);
}
.lc-review-star { color: var(--lc-clay-deep); font-size: .72rem; letter-spacing: .16em; }
/* O depoimento e apoio, nao manchete: estava em 1,62rem, quase do tamanho do
   titulo da secao. */
.lc-review blockquote { margin: 0; font-family: var(--lc-font-display); font-size: clamp(1rem, .94rem + .28vw, 1.14rem); line-height: 1.42; letter-spacing: -.015em; }
.lc-review footer { margin: 0; padding-top: var(--lc-space-3); border-top: 1px solid var(--lc-line); }
.lc-review footer strong, .lc-review footer span { display: block; }
.lc-review footer strong { font-size: var(--lc-step--1); }
.lc-review footer span { margin-top: var(--lc-space-1); color: var(--lc-ink-soft); font-size: var(--lc-step--2); }

/* 6. COLEÇÃO ============================================================= */
.lc-search { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: var(--lc-space-4); }
.lc-search-field { position: relative; flex: 1 1 200px; max-width: 420px; display: flex; }
.lc-search input {
  width: 100%;
  min-height: 48px;
  padding: 0 42px 0 42px;
  border: 1px solid var(--lc-line);
  border-radius: var(--lc-radius-pill);
  color: var(--lc-ink);
  background: var(--lc-white);
  font: inherit;
  font-size: var(--lc-step--1);
}
.lc-search input:focus { border-color: var(--lc-ink); }
.lc-search-icone {
  position: absolute;
  top: 50%;
  left: 15px;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--lc-ink-soft);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
}
.lc-search button[type="submit"] {
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--lc-ink);
  border-radius: var(--lc-radius-pill);
  background: var(--lc-ink);
  color: var(--lc-white);
  font: inherit;
  font-size: var(--lc-step--1);
  font-weight: 700;
  cursor: pointer;
}
.lc-search button[type="submit"]:hover { background: #000; }
/* Limpar a busca sem precisar apagar letra por letra no celular. */
.lc-search-clear {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  transform: translateY(-50%);
  color: var(--lc-ink-soft);
  background: var(--lc-sand);
  font-size: var(--lc-step--1);
  line-height: 1;
  cursor: pointer;
}
.lc-search-clear:hover { color: var(--lc-white); background: var(--lc-ink); }

/* Os chips rolam na horizontal no celular; a sombra à direita avisa que há
   mais categorias fora da tela. */
.lc-categories-wrap { position: relative; }
.lc-categories-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 34px;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(to right, rgba(247, 245, 241, 0), var(--lc-paper));
}
.lc-categories { display: flex; gap: 9px; padding-bottom: var(--lc-space-1); overflow-x: auto; scrollbar-width: none; }
.lc-categories::-webkit-scrollbar { display: none; }
.lc-category {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid var(--lc-line);
  border-radius: var(--lc-radius-pill);
  color: var(--lc-ink-soft);
  background: transparent;
  font-size: var(--lc-step--2);
  font-weight: 700;
  transition: color var(--lc-transicao), background var(--lc-transicao), border-color var(--lc-transicao);
}
.lc-category:hover, .lc-category.is-active { border-color: var(--lc-ink); color: var(--lc-white); background: var(--lc-ink); }
.lc-category-count { color: inherit; font-size: .68rem; font-variant-numeric: tabular-nums; opacity: .62; }

.lc-product-count { margin: var(--lc-space-5) 0 var(--lc-space-4); color: var(--lc-ink-soft); font-size: var(--lc-step--1); }
.lc-product-count strong { color: var(--lc-ink); font-weight: 700; }

.lc-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--lc-space-6) var(--lc-space-5); }
.lc-product { position: relative; display: flex; flex-direction: column; }
.lc-product-image {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--lc-radius-lg);
  background: #f1eee8;
}
.lc-product-image img, .lc-product-image picture { width: 100%; height: 100%; display: block; object-fit: cover; }
.lc-product-image img { transition: transform .55s ease, opacity var(--lc-transicao); }
.lc-product:hover .lc-product-image img { transform: scale(1.04); }
/* Segunda foto no hover — os dados já vinham do banco e não eram usados. */
.lc-product-photo-alt { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; }
.lc-product:hover .lc-product-photo-alt { opacity: 1; }
.lc-product-badge {
  position: absolute;
  top: var(--lc-space-3);
  left: var(--lc-space-3);
  z-index: 2;
  padding: 5px 11px;
  border-radius: var(--lc-radius-pill);
  color: var(--lc-ink);
  background: rgba(255, 255, 255, .92);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .06em;
}
/* A seta substitui a barra "VER DETALHES" que ocupava uma linha inteira em
   caixa alta debaixo de cada card. */
.lc-product-seta {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--lc-ink);
  background: rgba(255, 255, 255, .94);
  font-size: 1.1rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--lc-transicao), transform var(--lc-transicao);
}
.lc-product:hover .lc-product-seta, .lc-product:focus-visible .lc-product-seta { opacity: 1; transform: none; }
.lc-product-placeholder {
  height: 100%;
  display: flex;
  align-items: end;
  padding: var(--lc-space-5);
  color: rgba(37, 37, 37, .65);
  background: radial-gradient(circle at 70% 20%, rgba(255, 255, 255, .7), transparent 30%), linear-gradient(135deg, #dcd3c8, #bfb0a0);
  font-family: var(--lc-font-display);
  font-size: 1.35rem;
  font-style: italic;
}
.lc-product-body { padding: var(--lc-space-4) 2px 0; }
.lc-product-category { margin: 0 0 5px; color: var(--lc-clay-deep); font-size: .66rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.lc-product-title { margin: 0; font-size: clamp(1.15rem, 1rem + .45vw, 1.32rem); line-height: 1.2; letter-spacing: -.02em; }
.lc-product-description {
  margin: 7px 0 0;
  color: var(--lc-ink-soft);
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: var(--lc-step--1);
  line-height: 1.5;
}

/* Estado vazio. É a tela que o visitante vê hoje: ela precisa oferecer um
   caminho (loja, telefone, Instagram), não só avisar que não há produto. */
.lc-empty { padding: var(--lc-space-8) var(--lc-space-5); text-align: center; border: 1px dashed rgba(37, 37, 37, .28); border-radius: var(--lc-radius-lg); background: rgba(255, 255, 255, .45); }
.lc-empty h3 { margin: 0 0 var(--lc-space-2); font-size: var(--lc-step-3); }
.lc-empty p { max-width: 480px; margin: auto; color: var(--lc-ink-soft); line-height: 1.6; }
.lc-empty-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--lc-space-3); margin-top: var(--lc-space-6); }

/* Paginação — a listagem devolvia todos os produtos numa página só. */
.lc-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--lc-space-2); margin-top: var(--lc-space-7); }
.lc-page {
  min-width: 42px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--lc-space-3);
  border: 1px solid var(--lc-line);
  color: var(--lc-ink-soft);
  font-size: var(--lc-step--1);
  font-weight: 700;
}
.lc-page:hover { border-color: var(--lc-ink); color: var(--lc-ink); }
.lc-page.is-active { border-color: var(--lc-ink); background: var(--lc-ink); color: var(--lc-white); }
.lc-page-gap { color: var(--lc-ink-soft); padding: 0 var(--lc-space-1); }

/* 7. PROCESSO, LOJA E CONTATO ============================================ */
.lc-process { color: var(--lc-white); background: var(--lc-ink-2); }
.lc-process .lc-eyebrow { color: var(--lc-clay-light); }
.lc-process .lc-section-title { max-width: 570px; }
.lc-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: var(--lc-space-7); border-top: 1px solid var(--lc-line-dark); }
.lc-step { padding: var(--lc-space-6) var(--lc-space-5) var(--lc-space-5) 0; border-right: 1px solid var(--lc-line-dark); }
.lc-step:not(:first-child) { padding-left: var(--lc-space-5); }
.lc-step:last-child { border-right: 0; }
.lc-step-number {
  display: block;
  margin-bottom: var(--lc-space-4);
  color: var(--lc-clay-light);
  font-family: var(--lc-font-display);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -.05em;
  opacity: .62;
}
.lc-step h3 { margin: 0 0 var(--lc-space-3); font-family: var(--lc-font-text); font-size: var(--lc-step-1); font-weight: 600; letter-spacing: 0; }
.lc-step p { margin: 0; color: var(--lc-on-dark); font-size: var(--lc-step--1); line-height: 1.65; }

.lc-location { color: var(--lc-ink); background: #e5ddd3; }
.lc-location-grid { display: grid; grid-template-columns: .72fr 1.28fr; min-height: 500px; }
.lc-location-mark {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: var(--lc-space-7);
  overflow: hidden;
  color: var(--lc-white);
  background: #282624;
}
.lc-location-mark::before,
.lc-location-mark::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .16);
  transform: rotate(45deg);
  pointer-events: none;
}
.lc-location-mark::before { width: 300px; height: 300px; top: -130px; right: -140px; }
.lc-location-mark::after { width: 220px; height: 220px; bottom: -120px; left: -110px; }
.lc-location-plate {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lc-space-4);
  width: min(280px, 100%);
  padding: var(--lc-space-6) var(--lc-space-5);
  border-radius: var(--lc-radius-lg);
  background: var(--lc-paper);
  color: var(--lc-ink);
  text-align: center;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .3);
}
.lc-location-mark img { width: min(132px, 70%); height: auto; display: block; }
.lc-location-nota {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding-top: var(--lc-space-4);
  border-top: 1px solid var(--lc-line);
  width: 100%;
  justify-content: center;
  color: var(--lc-ink);
  font-size: var(--lc-step--1);
  font-weight: 600;
}
.lc-location-nota span { color: var(--lc-clay-deep); }
.lc-location-mark small { color: var(--lc-clay-deep); font-size: .64rem; font-weight: 800; line-height: 1.45; letter-spacing: .13em; text-align: center; }
.lc-location-copy { padding: clamp(40px, 6vw, 78px) clamp(24px, 6vw, 74px); }
.lc-location-copy > p:not(.lc-eyebrow) { max-width: 560px; margin: var(--lc-space-5) 0 0; color: var(--lc-ink-soft); line-height: 1.7; }
.lc-location-copy address { margin-top: var(--lc-space-6); font-style: normal; }
.lc-location-copy address strong, .lc-location-copy address span { display: block; }
.lc-location-copy address strong { font-size: var(--lc-step-0); }
.lc-location-copy address span { margin-top: var(--lc-space-1); color: var(--lc-ink-soft); font-size: var(--lc-step--1); }
.lc-location-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--lc-space-5); margin-top: var(--lc-space-6); }
.lc-location-actions .lc-text-link { margin-top: 0; }
.lc-location-actions .lc-button { min-height: 48px; }
.lc-location-actions .lc-button span { font-size: 1.15rem; }

/* Faixa de contato. Era um retângulo terracota chapado, com um botão solto no
   canto e um vão branco embaixo até o rodapé. Agora ocupa a largura inteira,
   repete o motivo diagonal do hero e junta as três formas de falar com a loja
   num cartão só. */
.lc-cta-band {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 7vw, 96px) 0;
  color: var(--lc-white);
  background: linear-gradient(118deg, #96694b 0%, var(--lc-clay) 46%, #bd9375 100%);
}
.lc-cta-band::before,
.lc-cta-band::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .22);
  transform: rotate(45deg);
  pointer-events: none;
}
.lc-cta-band::before { width: 420px; height: 420px; left: -150px; bottom: -260px; }
.lc-cta-band::after { width: 300px; height: 300px; right: 8%; top: -190px; }
.lc-cta-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}
.lc-cta-band .lc-eyebrow { color: rgba(255, 255, 255, .78); }
.lc-cta-band h2 { max-width: 16ch; margin: 0; font-size: var(--lc-step-4); line-height: 1.02; }
.lc-cta-band > .lc-shell > .lc-cta-grid p { max-width: 46ch; margin: var(--lc-space-4) 0 0; color: rgba(255, 255, 255, .88); line-height: 1.65; }
/* O cartão de ações: fundo translúcido sobre o terracota, para o botão deixar
   de flutuar sozinho no canto da faixa. */
.lc-cta-card {
  border-radius: var(--lc-radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--lc-space-4);
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .1);
}
.lc-cta-card .lc-button { width: 100%; min-height: 54px; color: var(--lc-ink); background: var(--lc-white); border-color: var(--lc-white); }
.lc-cta-card .lc-button:hover { background: var(--lc-ink); border-color: var(--lc-ink); color: var(--lc-white); }
.lc-cta-links { display: grid; gap: var(--lc-space-3); padding-top: var(--lc-space-4); border-top: 1px solid rgba(255, 255, 255, .3); }
.lc-cta-links a { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .92); font-size: var(--lc-step--1); font-weight: 600; }
.lc-cta-links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.lc-cta-links svg { flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lc-cta-nota { margin: 0; color: rgba(255, 255, 255, .74); font-size: var(--lc-step--2); line-height: 1.5; }

/* 8. RODAPÉ ============================================================== */
.lc-footer {
  padding: clamp(40px, 5vw, 60px) 0 var(--lc-space-5);
  color: var(--lc-on-dark);
  background: #000;
  border-top: 3px solid var(--lc-clay);
}
.lc-footer-grid { display: grid; grid-template-columns: 1.05fr 1.15fr .9fr .9fr; align-items: start; gap: var(--lc-space-6); }
.lc-footer-logo { display: flex; width: 80px; height: 80px; align-items: center; overflow: hidden; background: #000; }
.lc-footer-logo img { width: 80px; height: 80px; object-fit: contain; }
.lc-footer-logo--custom { background: transparent; border: 0; }
.lc-footer-logo--custom img { filter: invert(1); }
.lc-footer-brand p { max-width: 270px; margin-top: var(--lc-space-3); }
.lc-footer-brand .lc-footer-assinatura { margin-top: var(--lc-space-4); color: var(--lc-clay-light); font-size: var(--lc-step--2); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.lc-footer-title { margin: 6px 0 var(--lc-space-3); color: var(--lc-white); font-family: var(--lc-font-text); font-size: var(--lc-step--2); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.lc-footer p { margin: 0; font-size: var(--lc-step--1); line-height: 1.65; }
.lc-footer-link { display: flex; align-items: flex-start; gap: var(--lc-space-2); margin: 0 0 7px; color: var(--lc-on-dark); font-size: var(--lc-step--1); line-height: 1.42; }
.lc-footer-link:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.lc-footer-link span { text-wrap: pretty; }
.lc-footer-link svg { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lc-footer-bottom { margin-top: var(--lc-space-5); padding-top: var(--lc-space-3); border-top: 1px solid rgba(255, 255, 255, .14); font-size: var(--lc-step--2); }
.lc-footer-bottom a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.lc-footer-bottom a:hover { color: var(--lc-white); }

/* 9. FICHA DO PRODUTO ===================================================
   Refeita: o titulo saia em 70px, a foto tinha altura fixa de 630px e a ficha
   tecnica virava seis caixas enormes. A peca gastava tres telas para dizer
   pouco. Agora e uma ficha densa: trilha de miniaturas, palco da foto e um
   painel fixo com a acao e os dados. */
.lc-detail { padding: var(--lc-space-5) 0 var(--lc-space-9); }
.lc-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lc-space-2); margin-bottom: var(--lc-space-5); color: var(--lc-ink-soft); font-size: var(--lc-step--2); }
.lc-breadcrumb a:hover { color: var(--lc-ink); text-decoration: underline; text-underline-offset: 3px; }
.lc-breadcrumb span[aria-current] { color: var(--lc-ink); font-weight: 700; }
.lc-breadcrumb-sep { opacity: .5; }

.lc-produto {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) minmax(330px, 370px);
}
/* Produto com uma foto só não reserva a coluna da trilha. */
.lc-produto--sem-rail {
  grid-template-columns: minmax(0, 1fr) minmax(330px, 370px);
  gap: var(--lc-space-5) var(--lc-space-7);
  align-items: start;
}

/* Trilha de miniaturas, na vertical ao lado da foto. */
.lc-rail { position: sticky; top: 108px; display: flex; flex-direction: column; gap: 10px; }
.lc-thumb {
  width: 78px;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--lc-line);
  border-radius: var(--lc-radius-md);
  background: var(--lc-sand);
  cursor: pointer;
  transition: border-color var(--lc-transicao), transform var(--lc-transicao);
}
.lc-thumb:hover { transform: translateY(-2px); border-color: var(--lc-ink-soft); }
.lc-thumb.is-active { border-color: var(--lc-ink); box-shadow: 0 0 0 1px var(--lc-ink); }
.lc-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }

/* Palco da foto: proporcao em vez de altura fixa, e sem corte agressivo. */
/* As fotos do catálogo são 4:5 (1122x1402). O palco usa essa proporção e se
   limita pela altura da janela, então a peça inteira aparece numa tela só —
   e `contain` garante que nenhuma foto fora do padrão saia cortada. */
.lc-palco {
  position: relative;
  width: min(100%, calc(74vh * 4 / 5));
  margin-inline: 0 auto;
  overflow: hidden;
  border-radius: var(--lc-radius-lg);
  background: #f1eee8;
}
/* Quadrada e limitada pela altura da janela: a peça inteira cabe numa tela,
   sem a pessoa ter que rolar para ver o pé do móvel. */
.lc-main-photo { width: 100%; height: auto; aspect-ratio: 4 / 5; display: block; object-fit: contain; }
.lc-zoom-hint {
  position: absolute;
  right: var(--lc-space-3);
  bottom: var(--lc-space-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--lc-radius-pill);
  color: var(--lc-white);
  background: rgba(37, 37, 37, .72);
  backdrop-filter: blur(3px);
  font: inherit;
  font-size: var(--lc-step--2);
  font-weight: 700;
  cursor: zoom-in;
}
.lc-zoom-hint svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }

/* Painel de informacao — acompanha a rolagem enquanto a foto passa. */
.lc-painel { position: sticky; top: 108px; display: flex; flex-direction: column; gap: var(--lc-space-4); }
.lc-chip-categoria {
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: var(--lc-radius-pill);
  color: var(--lc-clay-deep);
  background: var(--lc-sand);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.lc-chip-categoria:hover { color: var(--lc-white); background: var(--lc-clay-deep); }
.lc-detail-title { margin: 0; font-size: clamp(1.7rem, 1.1rem + 1.5vw, 2.35rem); line-height: 1.06; letter-spacing: -.035em; }
.lc-detail-lead { max-width: 44ch; margin: 0; color: var(--lc-ink-soft); font-size: var(--lc-step-0); line-height: 1.7; }

/* Visualização 3D e AR — só aparece quando o Estúdio 3D aprovou GLB, USDZ e
   medidas reais. `ar-scale=fixed` no elemento impede que o cliente altere a
   escala e tenha a falsa impressão de que a peça cabe no ambiente. */
.lc-ar-card { overflow: hidden; border: 1px solid var(--lc-line); border-radius: var(--lc-radius-lg); background: var(--lc-white); }
.lc-ar-head { display: flex; align-items: center; justify-content: space-between; gap: var(--lc-space-3); padding: var(--lc-space-4) var(--lc-space-4) 0; }
.lc-ar-head h2 { margin: 2px 0 0; font-size: 1.18rem; letter-spacing: -.025em; }
.lc-ar-eyebrow { margin: 0; color: var(--lc-clay-deep); font-size: .65rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.lc-ar-badge { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: var(--lc-white); background: var(--lc-clay-deep); font-size: .68rem; font-weight: 800; }
.lc-model-viewer { width: 100%; height: 280px; margin-top: var(--lc-space-3); background: linear-gradient(145deg, #f0ece5, #dbd3c8); }
.lc-ar-button { position: absolute; right: var(--lc-space-4); bottom: var(--lc-space-4); min-height: 44px; padding: 0 15px; border: 1px solid var(--lc-ink); border-radius: var(--lc-radius); color: var(--lc-white); background: var(--lc-ink); font: inherit; font-size: var(--lc-step--1); font-weight: 800; cursor: pointer; }
.lc-ar-button:hover { background: #000; }
.lc-ar-loading { display: grid; width: 100%; height: 100%; place-items: center; color: var(--lc-ink-soft); font-size: var(--lc-step--1); }
.lc-ar-note { margin: 0; padding: var(--lc-space-3) var(--lc-space-4) var(--lc-space-4); color: var(--lc-ink-soft); font-size: var(--lc-step--2); line-height: 1.5; }

.lc-acao-card {
  display: grid;
  gap: var(--lc-space-3);
  padding: var(--lc-space-5);
  border: 1px solid var(--lc-line);
  border-radius: var(--lc-radius-lg);
  background: var(--lc-white);
  box-shadow: 0 2px 10px rgba(49, 38, 28, .04);
}
.lc-acao-linha { display: flex; gap: 10px; }
.lc-acao-linha .lc-detail-action { flex: 1; min-height: 52px; font-size: var(--lc-step--1); }
.lc-share { flex: 0 0 52px; width: 52px; min-height: 52px; padding: 0; border: 1px solid var(--lc-line); border-radius: var(--lc-radius); background: transparent; color: var(--lc-ink); }
.lc-share:hover { border-color: var(--lc-ink); background: var(--lc-ink); color: var(--lc-white); }
.lc-share svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lc-share span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.lc-acao-nota { display: flex; gap: 8px; margin: 0; color: var(--lc-ink-soft); font-size: var(--lc-step--2); line-height: 1.5; }
.lc-acao-nota span { color: var(--lc-clay-deep); }

/* Ficha tecnica em linhas: rotulo a esquerda, valor a direita. Eram seis
   caixas de 92px de altura para dizer "Espuma: D28". */
.lc-ficha { margin: 0; border-top: 1px solid var(--lc-line); }
.lc-ficha > div { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: var(--lc-space-4); padding: 11px 0; border-bottom: 1px solid var(--lc-line); }
.lc-ficha dt { color: var(--lc-ink-soft); font-size: .69rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; align-self: center; }
.lc-ficha dd { margin: 0; font-size: var(--lc-step--1); line-height: 1.5; }

.lc-variations { margin: 0; }
.lc-variations-label { margin: 0 0 var(--lc-space-3); font-size: var(--lc-step--1); font-weight: 800; }
.lc-variations a { display: inline-flex; margin: 0 7px 8px 0; padding: 9px 13px; border: 1px solid var(--lc-line); border-radius: var(--lc-radius-pill); color: var(--lc-ink-soft); font-size: var(--lc-step--2); font-weight: 700; }
.lc-variations a.is-active, .lc-variations a:hover { border-color: var(--lc-ink); color: var(--lc-white); background: var(--lc-ink); }

/* Ampliacao da foto: <dialog> nativo, sem biblioteca. */
.lc-lightbox { max-width: min(1100px, 94vw); max-height: 92vh; padding: 0; border: 0; background: transparent; }
.lc-lightbox::backdrop { background: rgba(20, 18, 16, .9); }
.lc-lightbox img { max-width: 100%; max-height: 92vh; display: block; object-fit: contain; border-radius: var(--lc-radius-md); }
.lc-lightbox-close {
  position: absolute;
  top: var(--lc-space-3);
  right: var(--lc-space-3);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  color: var(--lc-white);
  background: rgba(0, 0, 0, .55);
  font-size: 1.2rem;
  cursor: pointer;
}

/* Relacionados: sem eles a ficha e um beco sem saida. */
.lc-related { padding-top: var(--lc-space-8); margin-top: var(--lc-space-8); border-top: 1px solid var(--lc-line); }
.lc-related .lc-section-title { font-size: var(--lc-step-3); }

/* Barra fixa de contato no celular. Aparece só depois que o botão de
   orçamento da ficha sai da tela: enquanto ele está visível, a barra seria
   uma segunda cópia do mesmo botão cobrindo o conteúdo. */
.lc-sticky-contact {
  display: none;
  transform: translateY(140%);
  transition: transform .28s ease;
}
.lc-sticky-contact.is-visivel { transform: translateY(0); }

/* 10. RESPONSIVO ========================================================= */
@media (max-width: 1024px) {
  .lc-hero-grid { grid-template-columns: 1fr; gap: var(--lc-space-6); }
  .lc-hero-note { padding: var(--lc-space-5) 0 0; border-top: 1px solid rgba(255, 255, 255, .25); border-left: 0; }
  .lc-proof-head { grid-template-columns: 1fr; gap: var(--lc-space-5); }
  .lc-location-grid { grid-template-columns: 1fr; }
  .lc-location-mark { min-height: 280px; }
  /* Abaixo de 1024 a ficha vira uma coluna so: foto, trilha na horizontal e
     painel embaixo. */
  .lc-produto { grid-template-columns: minmax(0, 1fr); }
  .lc-rail {
    position: static;
    flex-direction: row;
    order: 2;
    overflow-x: auto;
    padding-bottom: var(--lc-space-1);
    scrollbar-width: none;
  }
  .lc-rail::-webkit-scrollbar { display: none; }
  .lc-thumb { flex: 0 0 auto; width: 72px; }
  .lc-palco { order: 1; }
  .lc-painel { position: static; order: 3; }
  .lc-footer-grid { grid-template-columns: 1fr 1fr; }
  .lc-footer-brand { grid-column: 1 / -1; }
  .lc-delivery-track .lc-delivery-card { flex-basis: calc((100% - 24px) / 2); }
}

@media (max-width: 760px) {
  .lc-shell { width: calc(100% - 28px); max-width: var(--lc-largura); }
  .lc-nav { height: 72px; gap: 8px; }
  .lc-logo-frame, .lc-logo { width: 54px; height: 54px; }
  .lc-nav-links { display: none; }
  .lc-nav-cta { min-height: 38px; max-width: calc(100vw - 94px); padding: 0 11px; overflow: hidden; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
  .lc-section-head { display: block; }
  .lc-section-text { margin-top: var(--lc-space-3); }
  .lc-ambient-hero { min-height: 560px; }
  .lc-ambient-slide > img { object-position: center center; }
  .lc-ambient-shade { background: linear-gradient(0deg, rgba(18, 16, 14, .78) 0%, rgba(18, 16, 14, .22) 74%); }
  .lc-ambient-copy { justify-content: flex-end; padding-top: 40px; padding-bottom: 92px; }
  .lc-ambient-copy h1 { max-width: 15ch; font-size: clamp(2.45rem, 12vw, 4rem); }
  .lc-ambient-controls { right: 14px; bottom: 18px; }
  .lc-category-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: var(--lc-space-6); margin-bottom: var(--lc-space-6); }
  .lc-category-card-copy { display: block; padding: 11px 12px 13px; }
  .lc-category-card-copy strong, .lc-category-card-copy span { display: block; }
  .lc-category-card-copy span { margin-top: 4px; }
  .lc-search { width: 100%; align-items: stretch; }
  .lc-search-field { flex: 1 1 0; min-width: 0; max-width: none; }
  .lc-search button[type="submit"] { flex: 0 0 auto; }
  .lc-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .lc-product-image { border-radius: var(--lc-radius-md); }
  .lc-product-body { padding-top: 10px; }
  .lc-product-title { font-size: 1.02rem; }
  .lc-product-description { font-size: .74rem; }
  .lc-trust-item { min-height: 82px; padding: var(--lc-space-5) 0; border-right: 0; border-bottom: 1px solid var(--lc-line); }
  .lc-trust-item:last-child { border-bottom: 0; }
  .lc-review { min-height: 0; }
  .lc-search button[type="submit"] { padding: 0 16px; }
  .lc-step, .lc-step:not(:first-child) { padding: var(--lc-space-5) 0; border-right: 0; border-bottom: 1px solid var(--lc-line-dark); }
  .lc-step:last-child { border-bottom: 0; }
  .lc-step-number { margin-bottom: var(--lc-space-5); }
  .lc-cta-grid { grid-template-columns: 1fr; }
  .lc-cta-band::before, .lc-cta-band::after { display: none; }
  .lc-location-actions { align-items: stretch; flex-direction: column; gap: var(--lc-space-4); }
  .lc-location-actions .lc-button { width: 100%; }
  .lc-location-actions .lc-text-link { align-self: flex-start; }
  .lc-footer-grid { grid-template-columns: 1fr; gap: var(--lc-space-5); }
  .lc-delivery-carousel { gap: 8px; }
  .lc-delivery-arrow { flex-basis: 36px; width: 36px; height: 36px; }
  .lc-delivery-track .lc-delivery-card { flex-basis: 100%; }
  .lc-detail { padding-bottom: 96px; }
  .lc-palco { width: 100%; }
  .lc-acao-card { padding: var(--lc-space-4); }
  .lc-sticky-contact {
    position: fixed;
    z-index: 30;
    right: 14px;
    bottom: 14px;
    left: 14px;
    display: block;
    box-shadow: var(--lc-sombra-forte);
  }
  .lc-sticky-contact .lc-button { width: 100%; }
}

@media (max-width: 420px) {
  .lc-product-grid { grid-template-columns: 1fr; }
  .lc-ambient-hero { min-height: 500px; }
  .lc-ambient-controls { right: 10px; bottom: 12px; gap: 7px; }
  .lc-ambient-arrow { width: 38px; height: 38px; }
  .lc-category-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lc-category-card-copy { padding-inline: 10px; }
  .lc-category-card-copy strong { font-size: .77rem; }
  .lc-category-card-copy span { font-size: .62rem; }
  .lc-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .lc-search button[type="submit"] { width: auto; }
  .lc-ficha > div { grid-template-columns: 96px minmax(0, 1fr); gap: var(--lc-space-3); }
}