/* apps/tiendas/publico/extra.css — escrito a mano (no lo genera extraer-css.mjs).
   Clases que las vistas de las tiendas usan y que no existen en tienda.css (las nat-* de Naturalie
   no las tienen). Se enlaza después de tienda.css y usa sus variables --nat-*. */

/* ── Colección: filtros GET (marca y precio) ── */
.nat-collection__filtros { margin-bottom: 20px; }
.nat-collection__facetas { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: flex-start; }
.nat-collection__faceta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0; padding: 0; border: 0; min-width: 0; }
.nat-collection__faceta legend { float: left; margin-right: 12px; padding: 0; font: 600 13px/32px var(--nat-sans); color: var(--nat-tinta); }
.nat-collection__check { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font: 400 13px/1.2 var(--nat-sans); color: var(--nat-tinta); cursor: pointer; }
.nat-collection__check input { width: 16px; height: 16px; margin: 0; accent-color: var(--nat-bosque); }
.nat-collection__n { color: var(--nat-secundario); }
.nat-collection__precio input {
  width: 96px; min-height: 36px; padding: 6px 10px; border: 1px solid var(--nat-borde); border-radius: 0;
  background: #fff; color: var(--nat-tinta); font: 400 13px/1.2 var(--nat-sans);
}
.nat-collection__precio .nat-btn { min-height: 36px; padding: 6px 14px; }
.nat-collection__empty a { color: var(--nat-bosque); text-underline-offset: 3px; }

/* ── Páginas de texto: legales, error y clave de demo ── */
.nat-legal, .nat-error, .nat-clave { padding-block: 40px 72px; }
.nat-legal__titulo, .nat-error h1, .nat-clave h1 {
  margin: 0 0 24px; font: 600 clamp(28px, 3.4vw, 44px)/1.1 var(--nat-display); letter-spacing: -0.03em; color: var(--nat-bosque);
}
.nat-legal__cuerpo, .nat-legal__operador { max-width: 760px; font: 400 16px/1.7 var(--nat-sans); color: var(--nat-tinta); }
.nat-legal__cuerpo h2, .nat-legal__cuerpo h3 { margin: 32px 0 10px; font-family: var(--nat-display); font-weight: 600; color: var(--nat-bosque); line-height: 1.2; }
.nat-legal__cuerpo h2 { font-size: 24px; }
.nat-legal__cuerpo h3 { font-size: 19px; }
.nat-legal__cuerpo p, .nat-legal__cuerpo ul, .nat-legal__cuerpo ol { margin: 0 0 14px; }
.nat-legal__cuerpo ul, .nat-legal__cuerpo ol { padding-left: 22px; }
.nat-legal__cuerpo a { color: var(--nat-bosque); text-underline-offset: 3px; }
.nat-legal__operador { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--nat-linea); font-size: 14px; color: var(--nat-secundario); }
.nat-error p { font: 400 16px/1.6 var(--nat-sans); color: var(--nat-secundario); }

/* La clave de demo es una página suelta, sin header: centrada y angosta. */
.nat-clave { max-width: 420px; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.nat-clave p { font: 400 15px/1.6 var(--nat-sans); color: var(--nat-secundario); }
.nat-clave form { display: grid; gap: 12px; }
.nat-clave label { display: grid; gap: 6px; font: 600 13px/1.2 var(--nat-sans); color: var(--nat-tinta); }
.nat-clave input { min-height: 44px; padding: 8px 12px; border: 1px solid var(--nat-borde); border-radius: 0; font: 400 16px/1.2 var(--nat-sans); }
.nat-clave [role="alert"] { color: #a23b2a; font-weight: 600; }

/* ── Home: hero sin escena (sin foto, sticker ni nota) ──
   El texto ocupa todo el ancho; el padding de nat-hero__copy está pensado para media columna. */
.nat-hero--solo { grid-template-columns: 1fr; min-height: 0; }
.nat-hero--solo .nat-hero__copy {
  padding-inline: max(var(--nat-gutter), calc((100% - var(--nat-max)) / 2 + var(--nat-gutter)));
}

/* ── Header: el carrito todavía no es un botón ── */
.nat-hdr__cart { cursor: default; }

/* ── Footer: Legal es una columna más; la grilla según cuántas columnas hay (data-cols) ──
   Pisa el armado de Naturalie (marca y Categorías en dos filas, Legal abajo en tres columnas). */
.nat-footer__inner[data-cols] > .nat-footer__brand,
.nat-footer__inner[data-cols] > .nat-footer__col { grid-row: auto; }
.nat-footer__inner[data-cols="1"] { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.nat-footer__inner[data-cols="2"] { grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); }
.nat-footer__inner[data-cols="3"] { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
@media (max-width: 999px) {
  .nat-footer__inner[data-cols="1"] { grid-template-columns: 1fr; }
  .nat-footer__inner[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nat-footer__inner[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .nat-footer__inner[data-cols="2"], .nat-footer__inner[data-cols="3"] { grid-template-columns: 1fr 1fr; }
}