/* Rodapés e Boiseries: filtro por altura, bolinhas de cor nos cartões,
   calculadora de caixas (rodapes.html) e a escolha de altura e cor na página
   do produto (produto.html). As cores seguem a calculadora do forro modular. */

/* ---------- catálogo ---------- */
.rd-topo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
  margin-bottom: 18px; padding: 16px 18px;
  border: 1px solid #E4E6EB; border-radius: 6px; background: #F7F7F5;
}
.rd-topo p { max-width: 62ch; color: #4A5163; line-height: 1.55; }
.rd-topo-link {
  display: inline-flex; align-items: center; padding: 12px 16px; border-radius: 3px;
  background: var(--navy); color: #FFFFFF; font-family: var(--font-mono); font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
.rd-topo-link:hover, .rd-topo-link:focus-visible { background: var(--navy-light); }
.rd-alturas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; }
.rd-alturas .kit-chip { font-variant-numeric: tabular-nums; }
.rd-vazio { margin: 26px 0 0; color: #4A5163; }
.rd-vazio[hidden] { display: none; }

.rd-tons { display: flex; flex-wrap: wrap; gap: 5px; margin-top: -4px; }
.rd-tons i {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--tom); box-shadow: inset 0 0 0 1px rgba(40, 50, 75, 0.28);
}

/* ---------- calculadora ---------- */
.rd-calc { background: #1D2230; color: #F2F4F8; padding: clamp(64px, 9vw, 104px) 0; scroll-margin-top: 90px; }
.rd-calc [hidden] { display: none !important; }
.rd-cabeca { max-width: 64ch; margin: 0 auto clamp(22px, 3vw, 32px); text-align: center; }
.rd-kicker { display: block; margin-bottom: 12px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #FFC40E; }
.rd-cabeca h2 { color: #FFFFFF; font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.08; margin-bottom: 12px; text-wrap: balance; }
.rd-cabeca p { color: #C9CEDA; line-height: 1.65; }

.rd-calc-grade { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(22px, 4vw, 44px); align-items: start; }
.rd-form { display: grid; gap: 18px; min-width: 0; }
.rd-grupo { display: grid; gap: 10px; }
.rd-grupo-rotulo { font-size: 0.85rem; color: #C9CEDA; }
.rd-campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rd-campos-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rd-campo { display: grid; gap: 6px; font-size: 0.85rem; color: #C9CEDA; min-width: 0; }
.rd-campo input, .rd-campo select {
  width: 100%; min-width: 0; padding: 11px 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.22); border-radius: 4px; background: #262C3C; color: #FFFFFF;
  font: inherit; font-size: 1rem; font-variant-numeric: tabular-nums;
}
.rd-campo input:focus-visible, .rd-campo select:focus-visible { outline: 2px solid #FFC40E; outline-offset: 1px; }
.rd-seg { display: inline-flex; flex-wrap: wrap; justify-self: start; border: 1.5px solid rgba(255, 255, 255, 0.26); border-radius: 4px; overflow: hidden; }
.rd-seg button { padding: 10px 16px; border: 0; border-left: 1px solid rgba(255, 255, 255, 0.14); background: transparent; color: #F2F4F8; font: 600 0.92rem var(--font-text); cursor: pointer; }
.rd-seg button:first-child { border-left: 0; }
.rd-seg button[aria-pressed="true"] { background: #FFC40E; color: #1D2230; }
.rd-seg button:focus-visible { outline: 2px solid #FFC40E; outline-offset: -3px; }

.rd-comodos { display: grid; gap: 10px; }
.rd-comodo {
  display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)) minmax(0, 0.7fr) auto;
  gap: 10px; align-items: end; padding: 12px; border-radius: 4px; background: rgba(255, 255, 255, 0.05);
}
.rd-tirar, .rd-mais {
  padding: 11px 12px; border: 1.5px solid rgba(255, 255, 255, 0.22); border-radius: 4px;
  background: transparent; color: #F2F4F8; font: 600 0.88rem var(--font-text); cursor: pointer;
}
.rd-mais { justify-self: start; }
.rd-tirar:hover, .rd-mais:hover { border-color: #FFC40E; }
.rd-tirar:focus-visible, .rd-mais:focus-visible { outline: 2px solid #FFC40E; outline-offset: 2px; }
.rd-marcar { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; color: #F2F4F8; cursor: pointer; }
.rd-marcar input { width: 18px; height: 18px; accent-color: #FFC40E; }
.rd-dica { font-size: 0.8rem; color: #9AA2B4; line-height: 1.5; }

.rd-resultado { display: grid; gap: 14px; min-width: 0; }
.rd-numeros { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 10px; }
.rd-numero { padding: 14px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.14); min-width: 0; }
.rd-numero span { display: block; font-size: 0.78rem; color: #9AA2B4; }
.rd-numero b { display: block; margin-top: 4px; font-family: var(--font-display); font-size: clamp(1.25rem, 2.3vw, 1.65rem); line-height: 1.15; color: #FFC40E; font-variant-numeric: tabular-nums; }
.rd-emb { padding: 12px 14px; border-left: 3px solid #FFC40E; background: rgba(255, 196, 14, 0.08); color: #F2F4F8; font-size: 0.92rem; line-height: 1.5; }
.rd-lista-caixa { padding: 14px 16px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); }
.rd-lista-caixa > b { display: block; margin-bottom: 8px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #9AA2B4; }
.rd-lista { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.rd-lista td { padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, 0.12); vertical-align: top; line-height: 1.4; }
.rd-lista tr:first-child td { border-top: 0; }
.rd-lista .num { padding-left: 12px; text-align: right; white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
.rd-lista small { font-weight: 400; color: #9AA2B4; }
.rd-aviso { font-size: 0.85rem; color: #FFD66B; }
.rd-nota { font-size: 0.8rem; color: #9AA2B4; line-height: 1.55; }
.rd-acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.rd-whats, .rd-kit {
  display: inline-flex; justify-content: center; align-items: center; flex: 1 1 200px;
  padding: 14px 18px; border-radius: 3px; border: 1.5px solid #FFC40E;
  font-family: var(--font-mono); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; cursor: pointer;
}
.rd-whats { background: #FFC40E; color: #1D2230; }
.rd-kit { background: transparent; color: #FFC40E; }
.rd-whats:hover, .rd-whats:focus-visible { background: #FFFFFF; border-color: #FFFFFF; color: #1D2230; }
.rd-kit:hover, .rd-kit:focus-visible { background: rgba(255, 196, 14, 0.12); }
.rd-kit:disabled { opacity: 0.45; cursor: not-allowed; }
.rd-ver { font-size: 0.86rem; color: #C9CEDA; text-decoration: underline; text-underline-offset: 3px; }
.rd-ver:hover { color: #FFFFFF; }

@media (max-width: 900px) {
  .rd-calc-grade { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .rd-topo { padding: 14px; }
  .rd-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rd-comodo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rd-comodo .rd-c-nome { grid-column: 1 / -1; }
  .rd-tirar { grid-column: 1 / -1; justify-self: start; padding: 8px 12px; }
  .rd-numeros { grid-template-columns: 1fr; }
}

/* ---------- página do produto: altura, depois cor ---------- */
.pd-eixo + .pd-eixo { margin-top: 14px; }
.pd-eixo .kit-chips { gap: 6px; }
.pd-cor.is-outra-altura { opacity: 0.42; }
.pd-cor.is-outra-altura:hover { opacity: 0.8; }
.pd-eixo-nota { display: block; margin-top: 8px; font-size: 0.8rem; color: var(--gray); }
.pd-eixo-nota[hidden] { display: none; }
.pd-kit-emb { margin: -4px 0 12px; font-size: 0.9rem; color: #3A4256; line-height: 1.45; }
.pd-kit-resultado { display: grid; gap: 3px; margin: 4px 0 6px; }
.pd-kit-leva { font-family: var(--font-display); font-size: 1.35rem; color: var(--navy); }
.pd-kit-detalhe { font-size: 0.86rem; color: #4A5163; line-height: 1.45; }