/* ===================================================================
   Combos y regalos — estilos del widget de la ficha
   -------------------------------------------------------------------
   Deliberadamente NEUTROS y con nombres propios (`combo-`): el bloque vive
   dentro de Journal 3, que reparte estilos por casi todas las clases
   genéricas. Nada de `.btn`, `.card` ni `.item` — se los quedaría el tema y
   el widget cambiaría de aspecto con cada ajuste del skin.

   Los colores salen de las variables de Journal cuando existen, con un
   respaldo fijo: así hereda el acento de la tienda sin depender de que
   exista.
   =================================================================== */
.combo-caja {
  --combo-acento: var(--j-primary-color, #c8102e);
  /* Red de seguridad del anclaje: si aun asi el bloque cae dentro de un
     contenedor flex del tema, un item flex se encoge a su contenido. Con
     esto ocupa la fila entera en vez de quedarse en una columna estrecha. */
  box-sizing: border-box;
  width: 100%;
  flex: 1 1 100%;
  margin: 18px 0;
  padding: 16px;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 14px rgba(16, 24, 40, .07);
}

.combo-cab {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.combo-regalo-ico { font-size: 22px; line-height: 1; }
.combo-titulo {
  display: block;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--combo-acento);
}
.combo-sub {
  display: block;
  font-size: 13px;
  color: #5b6570;
  margin-top: 2px;
}

/* Rejilla que se adapta sola. El mínimo son 300px POR MEDIDA, no a ojo: la
   columna de la ficha de producto de Journal mide unos 540px, así que con un
   mínimo de 240 entraban dos tarjetas de 250 y el resultado era el nombre
   cortado a «Llavero Venad…», el precio partido en dos líneas y el
   desplegable de talla reducido a «E…». Con 300 cae a una sola columna ahí, y
   sigue dando dos o tres cuando la ficha se muestra a todo lo ancho.

   El `min(300px, 100%)` NO es adorno: `minmax(300px, 1fr)` a secas no encoge
   por debajo de su mínimo, así que en un iPhone de 390px —donde el hueco útil
   son 276— la tarjeta seguía midiendo 300 y se salía de la pantalla. Journal
   lleva `overflow-x: hidden`, de modo que no aparecía barra de scroll: el
   bloque simplemente salía cortado por la derecha. */
/* El minimo es 420 y NO 300 —el que traia el port de Venados— por una razon
   medida: el corte de `@container` de mas abajo esta en 400px, y en la ficha
   de el Siglo la columna del producto da 665px utiles. Con 300 de minimo
   entraban DOS columnas de 310, justo por debajo del corte, asi que las dos
   tarjetas se apilaban —foto grande arriba, texto y boton debajo— y el bloque
   se veia como dos fichas de producto en lugar de una lista de regalos. En
   Venados la misma hoja da renglones porque alli la celda mide 506.

   Con 420, dos columnas piden 850px: en 665 cae a una sola, la celda hereda
   los 665 y cada regalo vuelve a ser un renglon (foto, nombre, precio, boton).
   El `min(420px, 100%)` sigue siendo el que salva al telefono, donde el hueco
   util es menor que el minimo y sin el la tarjeta se saldria de la pantalla. */
.combo-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 10px;
}

/* Cada tarjeta vive en su celda, y la celda es lo que el CSS mide para
   decidir la forma. Ver el bloque de @container al final. */
.combo-celda { container-type: inline-size; }

.combo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1.5px solid rgba(0, 0, 0, .1);
  border-radius: 8px;
  min-width: 0;              /* sin esto el contenido largo vuelve a estirar la tarjeta */
  transition: border-color 180ms ease, background-color 180ms ease;
}
.combo-item.elegido {
  border-color: var(--combo-acento);
  background: rgba(200, 16, 46, .04);
}

/* La foto va en su propio contenedor para poder colgarle el sello de «Gratis»
   encima en móvil, donde ocupa el ancho entero de la tarjeta. */
.combo-foto {
  position: relative;
  flex: 0 0 auto;
  width: 88px;
  height: 88px;
  border-radius: 6px;
  background: #f6f7f9;
  overflow: hidden;
}
.combo-foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* En escritorio la foto son 88px: un sello encima taparía el producto. Sólo
   aparece en la variante de móvil, con la foto grande. */
.combo-sello { display: none; }

.combo-datos { flex: 1 1 auto; min-width: 0; }
.combo-nombre {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: #14171a;
}
/* `nowrap`: sin esto «$169 MXN» se parte entre el importe y la moneda y la
   tarjeta gana una línea de alto que descuadra la fila entera. */
.combo-precios { display: block; margin-top: 4px; font-size: 13px; white-space: nowrap; }
.combo-precio-gratis,
.combo-precio-promo { font-weight: 800; color: var(--combo-acento); }
/* `line-through` explicito: Journal 3 anula el text-decoration heredado y el
   <s> se pintaba en gris pero sin tachar, con lo que el precio anterior se
   leia como el precio a pagar. */
.combo-precio-antes { color: #98a2ad; margin-left: 6px; font-size: 12px; text-decoration: line-through; }

.combo-ops { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.combo-op { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: #5b6570; min-width: 0; }
.combo-op select {
  min-height: 34px;          /* área táctil: por debajo de 34 se falla en móvil */
  min-width: 130px;          /* con menos, el nombre de la talla sale como «E…» */
  max-width: 100%;
  padding: 4px 8px;
  font-size: 13px;
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: 6px;
  background: #fff;
  color: #14171a;
}
.combo-op select.combo-falta { border-color: #d81b3c; }

.combo-btn {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--combo-acento);
  background: transparent;
  border: 1.5px solid var(--combo-acento);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}
.combo-btn:hover { background: var(--combo-acento); color: #fff; }
.combo-item.elegido .combo-btn { background: var(--combo-acento); color: #fff; }

.combo-aviso {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: #5b6570;
  min-height: 1em;           /* reserva el hueco: sin esto el bloque salta */
}

/* -------------------------------------------------------------------
   Tarjeta estrecha: el regalo se enseña, no se insinúa.

   La forma la decide el ancho de la TARJETA, no el de la ventana, y por eso
   esto es un `@container` y no un `@media`. No es purismo: la ficha de
   producto de Journal reparte su ancho de maneras distintas según la ventana,
   el tema y el número de columnas, así que la misma tarjeta mide 506px en un
   escritorio de 1440 y 334px en uno de 1024. Con un corte por ventana, ese
   escritorio de 1024 se quedaba con la fila horizontal comprimida: el nombre
   salía como «Llavero Venados Metal Gorra…» y el desplegable de talla, que no
   baja de 130px, se montaba encima del botón.

   Por debajo de 400px la fila no cabe —descontando foto, huecos y botón le
   quedan menos de 180px al texto— y la tarjeta se apila: la foto pasa a ocupar
   el ancho completo con el sello de «Gratis» encima, que además es lo que
   hace que el regalo se vea de verdad en el teléfono.
   ------------------------------------------------------------------- */
@container (max-width: 400px) {
  .combo-item {
    display: block;          /* apilado: foto, datos, botón */
    padding: 0;
    overflow: hidden;        /* redondea la foto contra el borde de la tarjeta */
  }

  .combo-foto {
    width: 100%;
    /* Proporcional al ancho de la tarjeta, con topes: `cqw` es 1% de la celda.
       Con alto fijo, la misma cifra deja la foto pequeña en una tarjeta ancha
       y desproporcionada en una estrecha. No se usa `aspect-ratio` porque el
       ancho aquí lo pone la tienda y se dispara sin techo. */
    height: clamp(180px, 62cqw, 250px);
    border-radius: 0;
    background: linear-gradient(180deg, #fbfcfd 0%, #eef1f4 100%);
  }
  .combo-foto img { padding: 12px; }

  .combo-sello {
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    background: var(--combo-acento);
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
  }

  .combo-datos { padding: 12px 12px 0; }
  .combo-nombre { font-size: 14.5px; -webkit-line-clamp: 3; }
  .combo-precios { margin-top: 6px; font-size: 14px; }
  /* El sello ya dice «Gratis» encima de la foto: repetirlo aquí deja la línea
     en «Gratis $169 MXN», que a primera vista se lee como el precio a pagar.
     Apilada queda sólo el precio anterior, tachado. */
  .combo-precio-gratis { display: none; }
  .combo-precio-antes { margin-left: 0; font-size: 13px; }

  .combo-ops { margin-top: 10px; display: block; }
  .combo-op { margin-top: 8px; font-size: 12px; }
  /* El desplegable a lo ancho: en la tarjeta apilada, un select de 130px
     arrinconado a la izquierda se lee como un control secundario, y es
     obligatorio. */
  .combo-op select { width: 100%; min-width: 0; min-height: 44px; }

  /* 44px, no 38: es el mínimo táctil que la sección 3 de base.css ya aplica al
     resto de botones de la tienda en móvil. Un botón que en escritorio se
     pulsa con el ratón, en el teléfono se pulsa con el pulgar. */
  .combo-btn {
    display: block;
    width: calc(100% - 24px);
    margin: 12px;
    min-height: 44px;
  }
}

/* -------------------------------------------------------------------
   Regalo obligatorio
   ------------------------------------------------------------------- */

/* Cuando el cliente intenta comprar sin haber elegido. El borde de acento y
   el aviso en rojo van juntos: el bloque puede quedar fuera de la pantalla al
   pulsar, así que además se hace scroll hasta él. */
.combo-caja.combo-pide {
  border-color: var(--combo-acento);
  box-shadow: 0 0 0 3px rgba(200, 16, 46, .12), 0 4px 14px rgba(16, 24, 40, .07);
}
.combo-aviso.combo-aviso-error { color: #d81b3c; font-weight: 600; }