/* =========================================================================
   Página de produtos (catálogo)
   Tudo fica dentro de .lp para não interferir no resto do site
   (cabeçalho, rodapé, bootstrap e site.css continuam iguais).
   ========================================================================= */

.lp {
  --lp-green: var(--theme-primary-color, #84be64);
  --lp-green-soft: #e7f2e0;
  --lp-green-ink: #3e7a28;
  --lp-navy: var(--theme-secondary-color, #1b1e3a);
  --lp-navy-2: #2a2f55;
  --lp-bg: #f3f4f1;
  --lp-line: #dde2d8;
  --lp-muted: #596071;
  --lp-white: #fff;
  --lp-wrap: 1240px;
  --lp-gutter: clamp(16px, 4vw, 40px);
  --lp-ease: cubic-bezier(.22, .8, .24, 1);

  background: var(--lp-bg);
  color: var(--lp-navy);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* Neutraliza regras globais do bootstrap/site.css dentro do catálogo */
.lp a { display: inline; justify-content: normal; font-weight: inherit; color: inherit; }
.lp h1, .lp h2, .lp h3, .lp p, .lp ul { margin: 0; }
.lp h1, .lp h2, .lp h3 { line-height: 1.2; }
.lp ul { padding: 0; list-style: none; }
.lp img { display: block; max-width: 100%; }
.lp button, .lp input, .lp textarea { font: inherit; color: inherit; }
.lp :focus-visible { outline: 3px solid var(--lp-green-ink); outline-offset: 2px; border-radius: 4px; }
.lp [hidden] { display: none !important; }

.lp .lp-wrap { max-width: calc(var(--lp-wrap) + var(--lp-gutter) * 2); margin-inline: auto; padding-inline: var(--lp-gutter); }

/* ---------- Botões ---------- */
.lp .lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  border: 0; border-radius: 999px; padding: .78em 1.35em;
  font-weight: 800; font-size: .95rem; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background-color .2s, color .2s, transform .2s var(--lp-ease), box-shadow .2s;
}
.lp .lp-btn:active { transform: scale(.97); }
.lp .lp-btn-green { background: var(--lp-green); color: var(--lp-navy); }
.lp .lp-btn-green:hover { background: #95cb77; color: var(--lp-navy); }
.lp .lp-btn-ghost { background: transparent; color: var(--lp-navy); box-shadow: inset 0 0 0 1.5px var(--lp-line); }
.lp .lp-btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--lp-navy); }

/* ---------- Topo ---------- */
.lp .lp-top { background: var(--lp-navy); color: var(--lp-white); position: relative; overflow: hidden; }
.lp .lp-top::after { /* papelão ondulado */
  content: ""; position: absolute; inset: auto 0 0 0; height: 22px; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='22' fill='none' stroke='%2384BE64' stroke-width='1.4'%3E%3Cpath d='M0 2.5H40M0 19.5H40'/%3E%3Cpath d='M0 11C5 0 15 0 20 11S35 22 40 11'/%3E%3C/svg%3E") repeat-x 0 0 / 40px 22px;
}
.lp .lp-top .lp-wrap {
  padding-block: clamp(36px, 6vw, 64px) clamp(48px, 7vw, 76px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(24px, 5vw, 64px); align-items: end;
}
.lp .lp-crumbs { display: flex; gap: 8px; font-size: .9rem; color: rgba(255, 255, 255, .7); margin-bottom: 14px; }
.lp .lp-crumbs a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.lp .lp-crumbs a:hover { color: var(--lp-white); text-decoration: underline; }
.lp .lp-top h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); font-weight: 900; letter-spacing: -.025em; line-height: 1.02; color: var(--lp-white); }
.lp .lp-sub { margin-top: 14px; font-size: clamp(1.02rem, 1.4vw, 1.15rem); color: rgba(255, 255, 255, .8); max-width: 44ch; }

.lp .lp-search label { display: block; font-weight: 700; font-size: .92rem; margin-bottom: 8px; color: rgba(255, 255, 255, .85); }
.lp .lp-field { position: relative; }
.lp .lp-search input {
  width: 100%; height: 60px; border-radius: 14px; border: 0; background: var(--lp-white); color: var(--lp-navy);
  padding: 0 52px 0 54px; font-size: 1.08rem; font-weight: 600;
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .55); transition: box-shadow .2s;
  -webkit-appearance: none; appearance: none;
}
.lp .lp-search input::-webkit-search-cancel-button { display: none; }
.lp .lp-search input::placeholder { color: #8a90a0; font-weight: 500; }
.lp .lp-search input:focus { outline: none; box-shadow: 0 0 0 4px rgba(132, 190, 100, .55), 0 10px 30px -14px rgba(0, 0, 0, .55); }
.lp .lp-mag { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); font-size: 1.15rem; color: var(--lp-muted); pointer-events: none; line-height: 1; }
.lp .lp-clear {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border: 0; border-radius: 10px; background: var(--lp-bg); color: var(--lp-navy); cursor: pointer;
  display: none; place-items: center;
}
.lp .lp-clear.show { display: grid; }
.lp .lp-hint { margin-top: 10px; font-size: .88rem; color: rgba(255, 255, 255, .65); }
.lp .lp-hint kbd { font: inherit; font-size: .85em; font-weight: 800; color: inherit; background: rgba(255, 255, 255, .12); border-radius: 5px; padding: 0 .45em; }

/* Entrada da página: um único momento orquestrado */
.lp .lp-enter { animation: lp-rise .7s var(--lp-ease) both; }
.lp .lp-d1 { animation-delay: .08s; }
.lp .lp-d2 { animation-delay: .16s; }
.lp .lp-d3 { animation-delay: .24s; }
@keyframes lp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Filtros ---------- */
.lp .lp-filters {
  position: sticky; top: var(--lp-menu-h, 0px); z-index: 2; /* abaixo dos botões laterais do site (z-index 3) */
  background: rgba(243, 244, 241, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--lp-line);
}
.lp .lp-filters .lp-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.lp .lp-chips { position: relative; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 6px 0; min-width: 0; }
.lp .lp-chips::-webkit-scrollbar { display: none; }
.lp .lp-chip {
  position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 8px;
  border: 0; background: none; border-radius: 999px; padding: .6em 1.05em;
  font-weight: 700; font-size: .95rem; color: #3a3f55; cursor: pointer; transition: color .25s;
}
.lp .lp-chip:hover { color: var(--lp-navy); }
.lp .lp-n { font-size: .78rem; font-weight: 800; min-width: 1.7em; padding: .1em .45em; border-radius: 999px; background: rgba(27, 30, 58, .08); text-align: center; transition: background-color .25s; }
.lp .lp-chip[aria-pressed="true"] { color: var(--lp-white); }
.lp .lp-chip[aria-pressed="true"] .lp-n { background: rgba(255, 255, 255, .18); }
.lp .lp-pill { position: absolute; z-index: 0; top: 6px; left: 0; width: 0; height: calc(100% - 12px); border-radius: 999px; background: var(--lp-navy); transition: transform .45s var(--lp-ease), width .45s var(--lp-ease); }
.lp .lp-count { flex: none; font-size: .92rem; color: var(--lp-muted); font-weight: 600; white-space: nowrap; }

/* ---------- Catálogo ---------- */
.lp .lp-catalog {
  padding-block: clamp(28px, 4vw, 44px) clamp(56px, 8vw, 96px);
  /* Garante altura para a página poder rolar até os filtros mesmo com poucos resultados */
  min-height: calc(100vh - var(--lp-menu-h, 0px) - 68px);
}
.lp .lp-results-title { font-size: clamp(1.3rem, 2.2vw, 1.65rem); font-weight: 800; letter-spacing: -.015em; margin-bottom: 18px; }
.lp .lp-group + .lp-group { margin-top: clamp(40px, 6vw, 64px); }
.lp.is-searching .lp-group + .lp-group { margin-top: 28px; }
.lp .lp-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.lp .lp-group-head h2 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); font-weight: 800; letter-spacing: -.015em; }
.lp .lp-group-head p { color: var(--lp-muted); font-size: .98rem; max-width: 56ch; }
.lp.is-searching .lp-group-head h2 { font-size: 1.05rem; color: var(--lp-muted); }
.lp.is-searching .lp-group-head p { display: none; }
/* Estilo dos cards e da grade: webroot/css/produto-card.css (compartilhado com a página inicial) */

/* Entrada escalonada dos cards (só no carregamento) */
.lp.is-first .lp-card { animation: lp-rise .6s var(--lp-ease) both; animation-delay: calc(min(var(--i, 0), 16) * 45ms + .25s); }

/* Reorganização suave ao filtrar (View Transitions) */
::view-transition-group(*) { animation-duration: .42s; animation-timing-function: cubic-bezier(.22, .8, .24, 1); }
::view-transition-old(*) { animation: lp-vt-out .2s ease both; }
::view-transition-new(*) { animation: lp-vt-in .32s .08s ease both; }
::view-transition-old(root) { animation: lp-fade-out .2s ease both; }
::view-transition-new(root) { animation: lp-fade-in .3s ease both; }
@keyframes lp-fade-out { to { opacity: 0; } }
@keyframes lp-fade-in { from { opacity: 0; } }

/* Menu, filtros e barras ficam por cima dos cards durante a animação
   (sem isso, os cards passam por cima deles enquanto deslizam).
   Só vale durante a animação (classe lp-vt no <html>): o view-transition-name
   muda a ordem de camadas do elemento e, se ficasse sempre ativo, escondia
   o menu aberto no celular atrás do conteúdo da página. */
.lp-vt .menu { view-transition-name: lp-site-menu; }
.lp-vt .icones-de-acao { view-transition-name: lp-site-acoes; }
.lp-vt .lp .lp-filters { view-transition-name: lp-filters; }
.lp-vt .lp .lp-qbar { view-transition-name: lp-qbar; }
::view-transition-group(lp-site-menu), ::view-transition-group(lp-site-acoes),
::view-transition-group(lp-filters), ::view-transition-group(lp-qbar),
::view-transition-new(lp-site-menu), ::view-transition-new(lp-site-acoes),
::view-transition-new(lp-filters), ::view-transition-new(lp-qbar) { animation: none; }
::view-transition-old(lp-site-menu), ::view-transition-old(lp-site-acoes),
::view-transition-old(lp-filters), ::view-transition-old(lp-qbar) { display: none; }
@keyframes lp-vt-out { to { opacity: 0; transform: scale(.96); } }
@keyframes lp-vt-in { from { opacity: 0; transform: scale(.97); } }

.lp .lp-empty { background: var(--lp-white); border-radius: 16px; box-shadow: 0 0 0 1px var(--lp-line); padding: clamp(28px, 5vw, 48px); display: grid; gap: 14px; justify-items: start; max-width: 640px; }
.lp .lp-empty h2 { font-size: 1.35rem; font-weight: 800; }
.lp .lp-empty p { color: var(--lp-muted); }
.lp .lp-empty-acts { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Barra e lista de orçamento ---------- */
.lp .lp-qbar {
  position: fixed; left: 50%; bottom: 18px; z-index: 50; transform: translate(-50%, 140%);
  display: flex; align-items: center; gap: 14px; background: var(--lp-navy); color: var(--lp-white);
  border-radius: 999px; padding: 8px 8px 8px 20px; box-shadow: 0 18px 40px -16px rgba(27, 30, 58, .7);
  transition: transform .5s var(--lp-ease), visibility 0s .5s; visibility: hidden; max-width: calc(100% - 32px);
}
.lp .lp-qbar.show { transform: translate(-50%, 0); visibility: visible; transition: transform .5s var(--lp-ease), visibility 0s; }
.lp .lp-qtxt { font-weight: 700; white-space: nowrap; }
.lp .lp-qcount { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px; background: var(--lp-green); color: var(--lp-navy); font-weight: 900; margin-right: 8px; }
.lp .lp-qcount.bump { animation: lp-bump .45s var(--lp-ease); }
@keyframes lp-bump { 40% { transform: scale(1.3); } 100% { transform: none; } }

.lp dialog.lp-quote {
  border: 0; padding: 0; margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh;
  width: min(460px, 100%); max-width: 100%; background: var(--lp-white); color: var(--lp-navy);
  box-shadow: -30px 0 60px -30px rgba(0, 0, 0, .5);
}
.lp dialog.lp-quote[open] { animation: lp-slidein .45s var(--lp-ease); }
.lp dialog.lp-quote::backdrop { background: rgba(27, 30, 58, .45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
@keyframes lp-slidein { from { transform: translateX(40px); opacity: 0; } }
.lp .lp-q-in { display: flex; flex-direction: column; height: 100%; }
.lp .lp-q-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--lp-line); }
.lp .lp-q-head h2 { font-size: 1.3rem; font-weight: 900; }
.lp .lp-x { width: 42px; height: 42px; border-radius: 10px; border: 0; background: var(--lp-bg); cursor: pointer; display: grid; place-items: center; }
.lp .lp-q-body { flex: 1; overflow: auto; padding: 8px 22px 20px; }
.lp .lp-q-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 6px 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--lp-line); }
.lp .lp-th { width: 64px; height: 64px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--lp-line); display: grid; place-items: center; padding: 6px; grid-row: span 2; }
.lp .lp-th img { max-height: 100%; width: auto; mix-blend-mode: multiply; }
.lp .lp-q-item b { font-weight: 800; line-height: 1.25; }
.lp .lp-q-item small { display: block; color: var(--lp-muted); font-size: .82rem; }
.lp .lp-q-item input { grid-column: 2 / 4; }
.lp .lp-input { width: 100%; border: 1.5px solid var(--lp-line); border-radius: 10px; padding: .6em .8em; font-size: .95rem; background: #fff; }
.lp textarea.lp-input { resize: vertical; }
.lp .lp-input:focus { outline: none; border-color: var(--lp-green-ink); }
.lp .lp-rm { border: 0; background: none; color: var(--lp-muted); cursor: pointer; font-weight: 700; font-size: .85rem; text-decoration: underline; text-underline-offset: 3px; }
.lp .lp-rm:hover { color: #b3261e; }
.lp .lp-f { display: block; font-weight: 800; font-size: .92rem; margin: 18px 0 6px; }
.lp .lp-f span { font-weight: 600; color: var(--lp-muted); }
.lp .lp-q-foot { padding: 16px 22px 20px; border-top: 1px solid var(--lp-line); display: grid; gap: 10px; }
.lp .lp-q-foot .lp-btn { width: 100%; padding: 1em; }
.lp .lp-q-foot .lp-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.lp .lp-note { font-size: .84rem; color: var(--lp-muted); text-align: center; }
.lp .lp-q-empty { padding: 28px 0; color: var(--lp-muted); }

.lp .lp-live { position: absolute; left: -9999px; }

/* ---------- Responsivo ---------- */
@media (max-width: 860px) {
  .lp .lp-top .lp-wrap { grid-template-columns: 1fr; align-items: start; }
  .lp .lp-count { display: none; }
}
@media (max-width: 720px) { .lp .lp-hint { display: none; } }
@media (max-width: 560px) {
  .lp .lp-qbar { left: 16px; right: 16px; transform: translateY(140%); justify-content: space-between; }
  .lp .lp-qbar.show { transform: none; }
  .lp .lp-long { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lp *, .lp *::before, .lp *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}