/* FASE NUEVE — «Añadir al carrito» en tarjetas (Home y catálogo V21). Aditivo: comparte la fila de «Ver producto». */
.product-card__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  min-width: 0;
}
.product-card__quick-add {
  appearance: none;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease;
}
.product-card__quick-add:hover:not([disabled]) { border-color: #fff; background: #fff; color: #0b0e13; }
.product-card__quick-add:focus-visible { outline: 2px solid rgb(var(--f9-accent-rgb, 255, 90, 31)); outline-offset: 2px; }
.product-card__quick-add[data-state="busy"] { cursor: progress; opacity: .7; }
.product-card__quick-add.is-added,
.product-card__quick-add.is-added[disabled] { border-color: #16b364; background: #16b364; color: #fff; opacity: 1; cursor: default; }
.product-card__quick-msg { margin: 0; max-width: 24ch; font-size: 11px; line-height: 1.35; text-align: right; opacity: .85; }

[data-resolved-scheme="light"] .product-card__quick-add { border-color: rgba(11, 14, 19, .28); color: #0b0e13; }
[data-resolved-scheme="light"] .product-card__quick-add:hover:not([disabled]) { border-color: #0b0e13; background: #0b0e13; color: #fff; }
[data-resolved-scheme="light"] .product-card__quick-add.is-added { border-color: #12a150; background: #12a150; color: #fff; }

/* Preventa: el mismo botón con el acento de la tienda. */
.product-card__quick-add[data-preorder="true"] { border-color: rgb(var(--f9-accent-rgb, 255, 90, 31)); }
.product-card__quick-add[data-preorder="true"]:hover:not([disabled]) { border-color: rgb(var(--f9-accent-rgb, 255, 90, 31)); background: rgb(var(--f9-accent-rgb, 255, 90, 31)); color: #0b0e13; }

/* Selector de variantes (color, capacidad…): modal compacto FUERA de la tarjeta (centrado, con fondo). Nunca cambia la
   altura de la tarjeta ni se superpone al precio, al estado o a la tarjeta vecina. En móvil es una hoja inferior. */
.product-card__options {
  position: fixed;
  z-index: 9990;
  top: 0;
  left: 0;
  width: min(360px, calc(100vw - 24px));
  max-height: min(560px, calc(100vh - 24px));
  overflow: auto;
  overscroll-behavior: contain;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 14px;
  background: #0b0e13;
  color: #fff;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .75);
  display: grid;
  gap: 12px;
  text-align: left;
}
.product-card__options-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.product-card__options-head div { display: grid; gap: 3px; min-width: 0; }
.product-card__options-head strong { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.product-card__options-head small { font-size: 13px; line-height: 1.35; opacity: .72; overflow-wrap: anywhere; }
.product-card__options-close { appearance: none; flex: 0 0 auto; border: 0; background: transparent; color: inherit; font-size: 22px; line-height: 1; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; }
.product-card__options-close:hover { background: rgba(255, 255, 255, .1); }
.product-card__options-status { margin: 0; font-size: 12px; opacity: .85; }
.product-card__options-body { display: grid; gap: 12px; }
.product-card__options-body fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.product-card__options-body legend { width: 100%; margin-bottom: 6px; padding: 0; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.product-card__option {
  appearance: none; min-height: 36px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px;
  background: transparent; color: inherit; font: inherit; font-size: 12px; cursor: pointer;
}
.product-card__option[aria-pressed="true"] { border-color: rgb(var(--f9-accent-rgb, 255, 90, 31)); background: rgba(255, 90, 31, .16); }
.product-card__option:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.product-card__option:focus-visible, .product-card__options-close:focus-visible, .product-card__options-cancel:focus-visible { outline: 2px solid rgb(var(--f9-accent-rgb, 255, 90, 31)); outline-offset: 2px; }
.product-card__options-foot { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .12); }
.product-card__options-price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 12px; }
.product-card__options-price span { width: 100%; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.product-card__options-price strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.product-card__options-price em { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--f9-accent-rgb, 255, 90, 31)); }
.product-card__options-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.product-card__options-cancel { appearance: none; min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 10px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; opacity: .75; cursor: pointer; }
.product-card__options-cancel:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.product-card__options-confirm[disabled] { opacity: .45; cursor: not-allowed; }

/* Escritorio: modal compacto centrado. */
.product-card__options.is-dialog {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 32px));
  max-height: min(620px, calc(100vh - 48px));
  padding: 18px;
  border-radius: 18px;
}

/* Móvil / táctil: hoja inferior con fondo, fácil de cerrar con el dedo. */
.product-card__options.is-sheet {
  top: auto !important;
  left: 0 !important;
  right: 0;
  bottom: 0;
  width: 100%;
  max-height: 85vh;
  padding: 18px 16px calc(16px + env(safe-area-inset-bottom));
  border-radius: 18px 18px 0 0;
  border-width: 1px 0 0;
}
.product-card__options.is-sheet .product-card__options-buttons button { flex: 1 1 auto; min-height: 44px; }
.product-card__options-backdrop { position: fixed; inset: 0; z-index: 9989; background: rgba(2, 6, 12, .74); backdrop-filter: blur(2px); }
html.f9-qa-sheet-open { overflow: hidden; }

[data-resolved-scheme="light"] .product-card__options { background: #fff; color: #0b0e13; border-color: rgba(11, 14, 19, .16); }
[data-resolved-scheme="light"] .product-card__option { border-color: rgba(11, 14, 19, .28); }
[data-resolved-scheme="light"] .product-card__options-close:hover { background: rgba(11, 14, 19, .08); }
[data-resolved-scheme="light"] .product-card__options-foot { border-color: rgba(11, 14, 19, .12); }

@media (max-width: 520px) {
  .product-card__quick-add { min-height: 40px; }
  .product-card__option { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .product-card__quick-add { transition: none; }
}

/* Tarjeta sin datos técnicos: sin bloque vacío; el pie (precio y botones) queda abajo como en las demás. */
.product-card--no-specs .product-card__footer { margin-top: auto; }

/* ======================================================================
   JERARQUÍA DEL PIE DE LA TARJETA (Home, catálogo y resultados de búsqueda)
   ======================================================================
   El precio y los botones compartían una misma fila. En una tarjeta de ~300 px
   el botón («COMPRAR EN PREVENTA») no cabía en su columna, se desbordaba hacia
   la izquierda y se montaba encima del precio; con «Desde $5.699.000» el precio
   además se partía en dos líneas y quedaba cortado.

   Ahora el pie es una sola columna con el orden que lee el cliente:
       nombre → características → ESTADO → PRECIO → BOTONES
   Los botones ocupan todo el ancho, uno debajo del otro, así que ninguna
   etiqueta se parte ni se monta sobre nada, ni en escritorio ni en móvil.
   Como el pie queda pegado al fondo de la tarjeta (las características se
   quedan el hueco sobrante), el precio y los botones de todas las tarjetas
   quedan a la misma altura. */

.product-card__footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: 14px;
}

/* Precio: lo primero que se ve del bloque comercial. */
.product-card__price {
  display: grid;
  gap: 3px;
  min-width: 0;
  text-align: left;
}
.product-card__price > [data-catalog-availability] {
  margin: 0;
  color: var(--f9-muted-2, #8f98a7);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.product-card.has-live-price .product-card__price > [data-catalog-availability] { color: #6cf5ad; }
.product-card[data-availability="preorder"] .product-card__price > [data-catalog-availability] {
  color: rgb(var(--f9-accent-rgb, 255, 90, 31));
}
.product-card__price > strong,
.product-card__price > strong[data-catalog-price] {
  display: block;
  margin: 0;
  color: #fff;
  font-size: clamp(22px, 1.9vw, 29px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;   /* nunca se sale de la tarjeta */
  word-break: normal;          /* pero el importe no se parte por dentro */
}
.product-card__price > [data-catalog-tax] {
  margin: 0;
  color: var(--f9-muted-2, #8f98a7);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .02em;
  text-transform: none;
}

/* Botones: primero la acción de compra, después la ficha. Mismo alto y mismo
   ancho para todas las tarjetas, con el estilo de botón que ya usa la Home. */
.product-card__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.product-card__quick-add,
.product-card__actions .product-card__cta,
.product-card__footer > .product-card__cta {
  display: inline-flex;
  min-height: 46px;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .06em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: normal;
}
/* Acción principal: llena y con el acento de la tienda. */
.product-card__quick-add {
  border: 1px solid rgb(var(--f9-accent-rgb, 255, 90, 31));
  background: rgb(var(--f9-accent-rgb, 255, 90, 31));
  color: #0b0e13;
}
.product-card__quick-add:hover:not([disabled]) { filter: brightness(1.07); background: rgb(var(--f9-accent-rgb, 255, 90, 31)); color: #0b0e13; border-color: rgb(var(--f9-accent-rgb, 255, 90, 31)); }
.product-card__quick-add[data-preorder="true"] { border-color: rgb(var(--f9-accent-rgb, 255, 90, 31)); }
.product-card__quick-add[data-preorder="true"]:hover:not([disabled]) { filter: brightness(1.07); }
/* Acción secundaria: la ficha del producto, sin competir con la compra. */
.product-card__actions .product-card__cta,
.product-card__footer > .product-card__cta {
  border: 1px solid var(--f9-line, rgba(255, 255, 255, .16));
  color: #fff;
  background: transparent;
  transition: border-color .18s ease, color .18s ease;
}
.product-card__actions .product-card__cta:hover,
.product-card__footer > .product-card__cta:hover {
  border-color: rgba(var(--f9-accent-rgb, 255, 90, 31), .6);
  color: rgb(var(--f9-accent-rgb, 255, 90, 31));
}
.product-card__actions .product-card__cta span,
.product-card__footer > .product-card__cta span { margin: 0; color: inherit; }
.product-card__footer > .product-card__cta--disabled,
.product-card__actions .product-card__cta--disabled {
  color: var(--f9-muted-2, #8f98a7);
  border-color: var(--f9-line, rgba(255, 255, 255, .12));
  cursor: default;
}
.product-card__quick-msg { max-width: none; text-align: center; }

[data-resolved-scheme="light"] .product-card__price > strong,
[data-resolved-scheme="light"] .product-card__price > strong[data-catalog-price] { color: #0b0e13; }
[data-resolved-scheme="light"] .product-card__quick-add { border-color: rgb(var(--f9-accent-rgb, 255, 90, 31)); background: rgb(var(--f9-accent-rgb, 255, 90, 31)); color: #0b0e13; }
[data-resolved-scheme="light"] .product-card__actions .product-card__cta,
[data-resolved-scheme="light"] .product-card__footer > .product-card__cta { border-color: rgba(11, 14, 19, .22); color: #0b0e13; }

@media (max-width: 760px) {
  .product-card__footer { gap: 12px; }
  .product-card__price > strong,
  .product-card__price > strong[data-catalog-price] { font-size: clamp(21px, 6vw, 26px); }
  .product-card__quick-add,
  .product-card__actions .product-card__cta,
  .product-card__footer > .product-card__cta { min-height: 44px; font-size: 11px; }
}