/* ==========================================================================
   PERFUMASTE — VENTA CRUZADA

   El bloque «añádelo a tu pedido» del carrito. Prefijo `.cruz`.
   Fuera de `@layer`, como legales.css y pendiente.css.

   REGISTRO: una sola oferta, con su foto, su precio tachado y su botón. Ni
   carrusel ni rejilla de seis productos: en el carrito la persona ya decidió, y
   una parrilla de opciones la devuelve a elegir — que es justo lo que hace que
   abandone. Una propuesta, sí o no.
   ========================================================================== */

.cruz {
  margin: var(--s7) 0 0;
  padding: var(--s5);
  background: #fff;
  border: 1px solid var(--hilo);
}

.cruz__rotulo {
  margin: 0 0 var(--s2);
  font-family: var(--dato);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--laca);
}

.cruz__t {
  margin: 0 0 var(--s5);
  font-family: var(--display);
  font-size: clamp(1.15rem, .9rem + 1vw, 1.5rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--tinta);
}

/* --------------------------------------------------------------------------
   LA FICHA
   -------------------------------------------------------------------------- */

.cruz__ficha {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: var(--s5);
  align-items: center;
}

.cruz__foto {
  display: block;
  border: 1px solid var(--hilo);
  background: var(--papel);
}

.cruz__foto img {
  display: block;
  width: 100%;
  height: auto;
}

.cruz__cuerpo { min-width: 0; }

.cruz__nombre {
  display: block;
  font-family: var(--display);
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--tinta);
  text-decoration: none;
}

.cruz__nombre:hover { text-decoration: underline; text-underline-offset: 3px; }

.cruz__precios {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: baseline;
  margin: var(--s2) 0 0;
}

.cruz__antes {
  color: var(--humo);
  text-decoration: line-through;
  font-size: .95rem;
}

.cruz__ahora {
  font-family: var(--display);
  font-size: 1.25rem;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

.cruz__nota {
  margin: var(--s2) 0 0;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--humo);
}

/* --------------------------------------------------------------------------
   EL BOTÓN
   -------------------------------------------------------------------------- */

.cruz__btn {
  display: inline-block;
  white-space: nowrap;
  padding: var(--s4) var(--s6);
  background: var(--tinta);
  color: var(--papel);
  font-family: var(--dato);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .18s ease;
}

.cruz__btn:hover,
.cruz__btn:focus-visible {
  background: var(--laca);
  color: var(--papel);
}

/* --------------------------------------------------------------------------
   MÓVIL

   La foto se queda —es lo que vende un perfume— pero el botón baja a ancho
   completo. Con tres columnas en 375px, el botón acaba en dos líneas y con el
   nombre del producto partido en cuatro.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .cruz { padding: var(--s4); }

  .cruz__ficha {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: var(--s4);
  }

  .cruz__btn {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--s4);
  }
}

/* --------------------------------------------------------------------------
   LA VARIANTE DEL CAJÓN LATERAL

   El cajón mide unos 380 px de ancho y compite por el ALTO con los productos,
   el subtotal y el botón de pagar. Con un solo producto en el carrito, la
   primera versión ya empujaba «finalizar pedido» fuera de la pantalla.

   Aquí todo está apretado a propósito: la oferta tiene que caber SIN desplazar
   la acción principal, que sigue siendo pagar. Si algún día hay que elegir entre
   que se lea la oferta o que se vea el botón de pagar, gana el botón.

   · foto de 44 px — se reconoce el frasco, que es lo que hace falta
   · nombre en la tipografía de texto y a una línea, no en la serif de titulares
   · el rótulo del motivo, minúsculo pero presente: es la razón de la oferta
   -------------------------------------------------------------------------- */

.cruz--cajon {
  margin: 0;
  padding: var(--s3) var(--s4);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}

.cruz--cajon .cruz__rotulo {
  margin-bottom: 1px;
  font-size: .58rem;
  letter-spacing: .12em;
}

.cruz--cajon .cruz__t {
  margin-bottom: var(--s2);
  font-family: var(--texto);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.2;
}

.cruz--cajon .cruz__ficha {
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 6px var(--s3);
  align-items: center;
}

.cruz--cajon .cruz__nombre {
  font-family: var(--texto);
  font-size: .78rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cruz--cajon .cruz__precios {
  margin-top: 1px;
  gap: var(--s2);
}

.cruz--cajon .cruz__antes { font-size: .72rem; }

.cruz--cajon .cruz__ahora {
  font-family: var(--texto);
  font-size: .88rem;
  font-weight: 600;
}

.cruz--cajon .cruz__btn {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding: 9px var(--s3);
  text-align: center;
  font-size: .66rem;
  letter-spacing: .09em;
}