/* ============================================================================
   COMPONENTS — piezas reutilizables entre páginas
============================================================================ */

/* ----------------------------------------------------------------------------
   HEADER + LOGO
---------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--c-bg);
  border-bottom: var(--border);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  height: var(--header-h);
}

.logo {
  display: inline-flex;
  align-items: flex-start;
  gap: 2px;
  font-family: var(--f-title);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--tracking-title);
  color: var(--c-text);
}

.logo:hover { color: var(--c-text); }

/* Monograma + palabra. El símbolo se alinea al centro de la línea, no arriba
   como el superíndice del logo tipográfico, así que el align-items se pisa.
   La altura va en em para que el lockup escale solo con .logo--lg. */
.logo--lockup {
  align-items: center;
  gap: 0.34em;
}

.logo__marca {
  display: block;
  height: 0.62em;               /* alto de las letras, no de la caja */
  width: auto;
  flex: none;
}

.logo__sufijo {
  font-size: 0.5em;
  letter-spacing: var(--tracking-label);
  color: var(--c-accent);
  margin-top: 0.15em;
}

.logo--lg { font-size: var(--t-2xl); }

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.site-nav a {
  font-family: var(--f-title);
  font-size: var(--t-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

.site-nav a.is-active { color: var(--c-accent); }

/* ----------------------------------------------------------------------------
   TICKER — barra de marquesina bajo el header
---------------------------------------------------------------------------- */

.ticker {
  height: var(--ticker-h);
  background: var(--c-accent);
  color: var(--c-accent-text);
  overflow: hidden;
  display: flex;
  align-items: center;
  border-bottom: var(--border);
}

.ticker__track {
  display: flex;
  gap: var(--sp-6);
  white-space: nowrap;
  animation: ticker 28s linear infinite;
  will-change: transform;
}

.ticker__item {
  font-family: var(--f-title);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; padding-inline: var(--gutter); }
}

/* ----------------------------------------------------------------------------
   BOTONES
---------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;                 /* target táctil */
  padding: var(--sp-3) var(--sp-5);
  border: var(--bw) solid var(--c-text);
  background: transparent;
  color: var(--c-text);
  font-family: var(--f-title);
  font-size: var(--t-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  line-height: 1;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.btn:hover {
  background: var(--c-text);
  color: var(--c-bg);
}

.btn--accent {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-accent-text);
}

.btn--accent:hover {
  background: transparent;
  color: var(--c-accent);
}

.btn--ghost {
  border-color: var(--c-border);
  color: var(--c-text-dim);
}

.btn--ghost:hover {
  border-color: var(--c-text);
  background: transparent;
  color: var(--c-text);
}

.btn--block { width: 100%; }
.btn--lg { min-height: 56px; font-size: var(--t-base); }
.btn--sm { min-height: 36px; padding: var(--sp-2) var(--sp-3); }

.btn--sold {
  background: transparent;
  border-color: var(--c-sold);
  color: var(--c-sold);
  cursor: not-allowed;
}

.btn--sold:hover { background: transparent; color: var(--c-sold); }

/* Link con subrayado que crece desde la izquierda */
.link-ul {
  position: relative;
  font-family: var(--f-title);
  font-size: var(--t-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

.link-ul::after {
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: var(--bw);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.link-ul:hover::after { transform: scaleX(1); }

/* ----------------------------------------------------------------------------
   CHIPS — filtros
---------------------------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 36px;
  padding: 0 var(--sp-3);
  border: var(--bw) solid var(--c-border);
  color: var(--c-text-dim);
  font-family: var(--f-title);
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  white-space: nowrap;
  transition: all var(--dur) var(--ease);
}

.chip:hover {
  border-color: var(--c-text);
  color: var(--c-text);
}

.chip[aria-pressed="true"],
.chip.is-active {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-accent-text);
}

.chip__count {
  font-family: var(--f-mono);
  font-size: 0.9em;
  opacity: 0.65;
}

/* Chip de talle: cuadrado, más marcado. Es el filtro clave del rubro. */
.chip--talle {
  min-width: 44px;
  justify-content: center;
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
}

/* ----------------------------------------------------------------------------
   BADGES
---------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--sp-2);
  background: var(--c-accent);
  color: var(--c-accent-text);
  font-family: var(--f-title);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  line-height: 1.2;
}

.badge--sold {
  background: var(--c-sold);
  color: var(--c-bg);
}

.badge--outline {
  background: transparent;
  border: var(--bw) solid var(--c-border);
  color: var(--c-text-dim);
}

.badge--danger { background: var(--c-danger); color: #fff; }

/* ----------------------------------------------------------------------------
   CARD DE PRODUCTO
---------------------------------------------------------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  border: var(--bw) solid var(--c-border);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}

.card:hover { border-color: var(--c-text); }

.card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-bg-alt);
}

.card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease), opacity var(--dur) var(--ease);
}

.card:hover .card__img { transform: scale(1.03); }

/* Segunda foto al hover (desktop). En touch no se dispara. */
.card__img--alt {
  position: absolute;
  inset: 0;
  opacity: 0;
}

@media (hover: hover) {
  .card:hover .card__img--alt { opacity: 1; }
}

/* El talle va sobre la foto: es el dato que más se busca en la grilla */
.card__talle {
  position: absolute;
  left: 0; bottom: 0;
  z-index: 2;
  min-width: 42px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-bg);
  border-top: var(--bw) solid var(--c-border);
  border-right: var(--bw) solid var(--c-border);
  font-family: var(--f-title);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-align: center;
  line-height: 1;
}

.card__flags {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3);
  border-top: var(--bw) solid var(--c-border);
  flex: 1;
}

.card__marca {
  font-family: var(--f-title);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--c-text-dim);
}

.card__nombre {
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__precio {
  margin-top: auto;
  padding-top: var(--sp-2);
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.card__precio-ars {
  font-family: var(--f-mono);
  font-size: var(--t-base);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.card__precio-usd {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--c-text-dim);
}

/* --- Estado vendido: atenuado, nunca borrado ----------------------------- */

.card--sold { border-color: var(--c-border); }
.card--sold:hover { border-color: var(--c-border); }

.card--sold .card__media { opacity: 0.35; filter: grayscale(1); }
.card--sold:hover .card__img { transform: none; }
.card--sold .card__body { opacity: 0.5; }
.card--sold .card__precio-ars { text-decoration: line-through; }

.card__sold-stamp {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.card__sold-stamp span {
  padding: var(--sp-2) var(--sp-4);
  border: var(--bw-thick) solid var(--c-text);
  background: var(--c-bg);
  font-family: var(--f-title);
  font-size: var(--t-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  transform: rotate(-6deg);
}

/* ----------------------------------------------------------------------------
   CAMPOS DE FORMULARIO
---------------------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: var(--sp-2); }

.field__label {
  font-family: var(--f-title);
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--c-text-dim);
}

.field__input,
.field__select,
.field__textarea {
  width: 100%;
  min-height: 46px;
  padding: var(--sp-3);
  background: var(--c-bg-alt);
  border: var(--bw) solid var(--c-border);
  color: var(--c-text);
  font-size: var(--t-base);
  transition: border-color var(--dur) var(--ease);
}

.field__textarea { min-height: 96px; resize: vertical; line-height: 1.5; }

.field__input:focus,
.field__select:focus,
.field__textarea:focus { border-color: var(--c-accent); }

.field__input::placeholder,
.field__textarea::placeholder { color: var(--c-text-dim); }

.field__select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-text-dim) 50%),
                    linear-gradient(135deg, var(--c-text-dim) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--sp-7);
  cursor: pointer;
}

.field__select option { background: var(--c-bg-alt); color: var(--c-text); }

.field__help { font-size: var(--t-sm); color: var(--c-text-dim); }

.field__error { font-size: var(--t-sm); color: var(--c-danger); }

.field.has-error .field__input,
.field.has-error .field__select { border-color: var(--c-danger); }

.field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}

@media (min-width: 600px) {
  .field-row--2 { grid-template-columns: 1fr 1fr; }
  .field-row--3 { grid-template-columns: repeat(3, 1fr); }

  /* La fila TALLE · PRECIO · ESTADO no se reparte en tres partes iguales: la
     del medio lleva DOS controles —el número y la moneda— y las otras uno.
     Con tercios iguales, el precio arranca con un tercio del espacio para
     hacer el doble de trabajo. */
  .field-row--3-precio { grid-template-columns: 1fr 1.6fr 1fr; }
}

/* ----------------------------------------------------------------------------
   SWITCH — interruptor de encendido y apagado.

   CUADRADO, no pastilla. El sistema tiene `--radius: 0` y ni un borde redondo:
   un switch con forma de píldora sería la única curva de todo el panel. La
   perilla es un bloque que se corre de un lado al otro.

   Es un <input type="checkbox"> de verdad debajo, tapado pero no escondido con
   display:none — así lo sigue leyendo un lector de pantalla, se puede tabular
   hasta él y la barra espaciadora lo activa. Todo lo que se ve es decorado.

   La transición usa `--dur`, que en tokens.css vale 0 cuando el sistema pide
   menos movimiento. No hay que acordarse de nada acá.
---------------------------------------------------------------------------- */
.switch {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--sp-3);
  cursor: pointer;
}

.switch__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}

.switch__pista {
  position: relative;
  flex: none;
  width: 52px;
  height: 28px;
  background: var(--c-bg);
  border: var(--bw) solid var(--c-border-strong);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.switch__perilla {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: var(--c-text-dim);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}

.switch__input:checked + .switch__pista {
  background: var(--c-accent);
  border-color: var(--c-accent);
}

.switch__input:checked + .switch__pista .switch__perilla {
  transform: translateX(24px);
  background: var(--c-accent-text);
}

/* El foco se marca en la pista, que es lo que se ve. Sin esto, quien navega
   con teclado no sabe dónde está parado. */
.switch__input:focus-visible + .switch__pista {
  outline: var(--bw-thick) solid var(--c-accent);
  outline-offset: 2px;
}

.switch__texto { display: grid; gap: var(--sp-1); }
.switch__titulo { font-weight: 600; }

/* ----------------------------------------------------------------------------
   SHEET — panel modal. En mobile sube desde abajo, en desktop es centrado.
---------------------------------------------------------------------------- */

.sheet {
  position: fixed;
  inset: 0;
  z-index: var(--z-sheet);
  display: grid;
  align-items: end;
  background: var(--c-overlay);
  backdrop-filter: blur(3px);
  animation: fadeIn var(--dur) var(--ease);
}

.sheet[hidden] { display: none; }

.sheet__panel {
  width: 100%;
  max-height: 88dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--c-bg);
  border-top: var(--bw-thick) solid var(--c-accent);
  animation: sheetUp var(--dur-slow) var(--ease);
}

@keyframes sheetUp {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.sheet__head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--gutter);
  background: var(--c-bg);
  border-bottom: var(--border);
}

.sheet__title {
  font-family: var(--f-title);
  font-size: var(--t-md);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-title);
}

.sheet__close {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: var(--bw) solid var(--c-border);
  color: var(--c-text-dim);
  font-size: 1.1rem;
  line-height: 1;
  transition: all var(--dur) var(--ease);
}

.sheet__close:hover { border-color: var(--c-text); color: var(--c-text); }

.sheet__body { padding: var(--sp-5) var(--gutter) var(--sp-7); }

@media (min-width: 768px) {
  .sheet { align-items: center; justify-items: center; }
  .sheet__panel {
    max-width: 560px;
    max-height: 84dvh;
    border: var(--bw) solid var(--c-border);
    border-top: var(--bw-thick) solid var(--c-accent);
  }
}

/* ----------------------------------------------------------------------------
   ESTADOS: carga, vacío, error
---------------------------------------------------------------------------- */

.spinner {
  width: 22px; height: 22px;
  border: var(--bw-thick) solid var(--c-border);
  border-top-color: var(--c-accent);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.state {
  display: grid;
  place-items: center;
  gap: var(--sp-4);
  padding: var(--sp-9) var(--gutter);
  text-align: center;
  border: var(--bw) dashed var(--c-border);
}

.state__title {
  font-family: var(--f-title);
  font-size: var(--t-lg);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-title);
}

.state__text { color: var(--c-text-dim); max-width: 40ch; }

/* Bloque de placeholder mientras carga la grilla */
.skeleton {
  background: linear-gradient(90deg,
    var(--c-bg-alt) 0%, #1D1D1D 50%, var(--c-bg-alt) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}

@keyframes shimmer { to { background-position: -200% 0; } }

/* ----------------------------------------------------------------------------
   TOAST
---------------------------------------------------------------------------- */

.toast-stack {
  position: fixed;
  left: 50%;
  bottom: calc(var(--sp-5) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: min(92vw, 440px);
}

.toast {
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-text);
  color: var(--c-bg);
  font-size: var(--t-sm);
  font-weight: 500;
  animation: fadeIn var(--dur) var(--ease);
}

.toast--accent { background: var(--c-accent); color: var(--c-accent-text); }
.toast--error { background: var(--c-danger); color: #fff; }

/* ----------------------------------------------------------------------------
   FOOTER
---------------------------------------------------------------------------- */

.site-footer {
  margin-top: var(--sp-9);
  border-top: var(--border);
  padding-block: var(--sp-7);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-7); }
}

.site-footer__col { display: flex; flex-direction: column; gap: var(--sp-3); }

.site-footer__col a { font-size: var(--t-sm); color: var(--c-text-dim); }
.site-footer__col a:hover { color: var(--c-accent); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
  padding-top: var(--sp-4);
  border-top: var(--border);
}

/* Línea de precios al [fecha] — la escribe el módulo dolarLive */
.precio-nota {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--c-text-dim);
  letter-spacing: var(--tracking-wide);
}

.precio-nota.is-offline { color: var(--c-danger); }

/* Crédito MDR Labs: discreto, pero presente */
.credito {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--c-text-dim);
}

.credito a { border-bottom: var(--bw) solid var(--c-border); }
.credito a:hover { color: var(--c-accent); border-color: var(--c-accent); }

/* ============================================================================
   DROPZONE + FOTOS — cargador de imágenes del panel (FEATURES.subirFotos).
   Vive acá y no en admin.css porque el mismo patrón de "soltá un archivo" lo
   usa el probador virtual en el sitio público, y components.css lo cargan los
   dos. Lo de .tryon__ en product.css es el mismo diseño, más viejo.
============================================================================ */

.dropzone {
  display: grid;
  place-items: center;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4);
  border: var(--bw) dashed var(--c-border);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.dropzone:hover,
.dropzone.is-dragover { border-color: var(--c-accent); background: var(--c-accent-soft); }

/* Achicar una foto de 6 MB tarda un segundo largo en un celular. Sin esto
   parece que no pasó nada y el usuario vuelve a tocar. */
.dropzone.is-procesando { opacity: 0.6; pointer-events: none; }

.dropzone__texto { font-family: var(--f-title); text-transform: uppercase;
  letter-spacing: var(--tracking-label); font-size: var(--t-sm); }
.dropzone__ayuda { color: var(--c-text-dim); font-size: var(--t-xs); }

/* --- grilla de fotos cargadas -------------------------------------------- */

.fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

.fotos:empty { display: none; }

.foto {
  position: relative;
  margin: 0;
  border: var(--bw) solid var(--c-border);
  background: var(--c-bg-alt);
}

/* La primera es la de la card y la segunda la del hover. Que se vea cuál es
   cuál evita el clásico "subí la foto buena y quedó segunda". */
.foto--principal { border-color: var(--c-accent); }

.foto img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.foto__badge {
  position: absolute; top: 0; left: 0;
  background: var(--c-accent); color: var(--c-accent-text);
  font-family: var(--f-title); font-size: 9px; font-weight: 700;
  letter-spacing: var(--tracking-label); padding: 2px 5px;
}

.foto__acciones {
  position: absolute; top: 4px; right: 4px;
  display: flex; gap: 2px;
}

.foto__btn {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: none; cursor: pointer;
  background: rgba(10, 10, 10, 0.82); color: var(--c-text);
  font-size: 11px; line-height: 1;
}

.foto__btn:hover:not(:disabled) { background: var(--c-accent); color: var(--c-accent-text); }
.foto__btn:disabled { opacity: 0.3; cursor: default; }
.foto__btn--quitar:hover { background: var(--c-danger); color: #FFF; }

.foto__pie {
  padding: 4px 6px;
  font-size: 10px; color: var(--c-text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- rutas a mano, plegado ------------------------------------------------ */

.fotos__manual { margin-top: var(--sp-3); }

.fotos__manual > summary {
  cursor: pointer;
  font-size: var(--t-xs);
  color: var(--c-text-dim);
  padding: var(--sp-2) 0;
}

.fotos__manual > summary:hover { color: var(--c-text); }

/* El precio del panel con su selector de moneda al lado. El número ocupa lo
   que puede y la moneda lo mínimo: al revés, un select ancho deja el campo
   importante angosto.

   Eso era la intención y no pasaba. `1fr` en grid es `minmax(auto, 1fr)`, y el
   `auto` de un input numérico es diminuto: el select pedía sus 149 px enteros
   —lo que mide "US$ dólares"— y el número se quedaba con lo que sobrara. En un
   panel de 600 px eso eran 25 px de ancho: un sliver donde no se veía ni el
   precio ni el cursor.

   Ahora el número tiene piso propio y el select cede: `minmax(0, auto)` lo
   deja recortar el texto en pantallas angostas en vez de empujar afuera al
   campo que de verdad importa. Medido de 340 a 900 px: el número nunca baja de
   76 px y la fila no desborda en ningún ancho. */
.field-row--precio {
  display: grid;
  grid-template-columns: minmax(8ch, 1fr) minmax(0, auto);
  gap: var(--sp-2);
  align-items: start;
}

.field-row--precio > .field__select { min-width: 0; }