/* =========================================================
   Anhelo — carrito lateral

   Problema medido en producción, panel de 889px con 3 productos:
   el contenido medía 1530px y "Iniciar compra" caía en y=1481, o sea 592px
   por debajo del borde inferior. Había que scrollear todo el panel para
   encontrar la única acción que importa.

   La solución no es achicar tipografías: es dejar de tratar al panel como un
   documento largo. Pasa a ser una columna de tres partes —encabezado fijo,
   lista de productos con scroll propio, pie fijo con totales y CTA— para que
   el botón esté siempre a la vista, con dos productos o con doce.
   ========================================================= */

@media (min-height: 520px) {

  #modal-cart.js-modal {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  #modal-cart .js-ajax-cart-panel {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }

  #modal-cart .modal-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  /* La lista de productos es lo único que scrollea.

     flex-grow en 0 a propósito: si la lista creciera para llenar el panel,
     con dos o tres productos quedaría un hueco enorme entre el último item y
     el pie. Así la lista ocupa lo que necesita y solo se encoge —y scrollea—
     cuando los productos no entran. */
  #modal-cart .js-ajax-cart-list {
    flex: 0 1 auto;
    min-height: 0;
    /* Cada item es un .form-row, que trae -5px de margen a cada lado. Al pasar
       a contenedor con overflow eso genera 5px de desborde horizontal y su
       barra correspondiente; el padding les devuelve el espacio que ocupan. */
    padding-right: 5px;
    padding-left: 5px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Totales, incentivos y CTA: siempre visibles. */
  #modal-cart .modal-body > .cart-row:last-child {
    flex: 0 0 auto;
    padding-top: 4px;
    border-top: 1px solid var(--main-foreground-opacity-10);
  }
}

/* ---------------------------------------------------------
   Jerarquía dentro del pie

   El brief pide que envío gratis, regalo, transferencia y financiación no
   tengan todos el mismo peso. Hoy el botón del regalo es un sólido negro,
   idéntico al de iniciar compra: dos acciones primarias compitiendo en el
   mismo bloque.
   --------------------------------------------------------- */

/* El regalo es un beneficio, no la acción principal: pasa a botón de contorno. */
#modal-cart .js-gift-open,
.js-gift-progress .js-gift-open {
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
  font-size: 11px;
}

#modal-cart .js-gift-open:hover,
.js-gift-progress .js-gift-open:hover {
  color: var(--button-foreground);
  background: var(--button-background);
  border-color: var(--button-background);
}

/* Envío gratis y regalo se leen como una escalera de incentivos, no como dos
   bloques sueltos del mismo rango. */
#modal-cart .js-gift-progress {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--main-foreground-opacity-08);
}

/* Total compacto: el número manda, cuotas y transferencia acompañan. */
#modal-cart .js-cart-total-container {
  margin-bottom: 14px !important;
}

#modal-cart .js-cart-total-container .row {
  align-items: baseline;
}

#modal-cart .js-cart-total-container .item-installments,
#modal-cart .js-cart-total-container [class*="payment-discount"] {
  font-size: 12px;
  line-height: 1.4;
}

/* GoCuotas fuera del carrito.

   Era el único elemento con color de todo el panel y estaba pegado arriba del
   CTA, así que se llevaba la mirada que tenía que ir al botón. Además compite
   con las 6 cuotas sin interés que ya se comunican dos líneas más arriba.

   La app usa una clase distinta por ubicación, así que esto no toca el widget
   de la ficha de producto (.gocuotas-info-container-product) ni su modal.
   Tampoco desinstala nada: el script de la app sigue cargando. */
.gocuotas-info-container-cart {
  display: none !important;
}

/* El envoltorio que le pone el tema quedaría como un margen huérfano. */
.js-cart-total-container > div:has(> .gocuotas-info-container-cart) {
  display: none !important;
}

/* El CTA es lo último que se lee y lo más pesado de la columna. */
#modal-cart .js-ajax-cart-submit {
  margin-bottom: 10px !important;
}

#modal-cart .js-ajax-cart-submit .btn {
  padding-top: 14px;
  padding-bottom: 14px;
  font-weight: 700;
  letter-spacing: .06em;
}

/* "Ver más productos" es una salida, no una alternativa al checkout. */
#modal-cart .js-modal-close.btn-link {
  font-size: 11px;
  opacity: .6;
}

/* Nombre del producto completo: el brief pide evitar títulos ilegibles. */
#modal-cart .cart-item-name a {
  display: block;
  font-size: 12px;
  line-height: 1.35;
}

#modal-cart .cart-item-name small {
  display: block;
  margin-top: 2px;
  color: var(--main-foreground-opacity-60);
  font-size: 11px;
}

/* Recomendaciones de CrossUp fuera del panel lateral.

   La app las inyecta dentro del contenedor del total, o sea entre el importe y
   el botón de compra: 285px partiendo al medio el bloque que hay que leer de
   corrido. Se probó moverlas al final de la lista con JS y salió peor: mover un
   <iframe> en el DOM obliga al navegador a recargarlo, así que el carrusel
   quedaba vacío y dejaba solo su barra de scroll horizontal.

   Se ocultan únicamente en el panel. En /carrito, donde hay ancho y el CTA no
   depende del alto de la ventana, siguen funcionando igual. */
#modal-cart .js-cart-total-container .carrousel-container {
  display: none !important;
}

/* En pantallas muy bajas el pie fijo dejaría sin lugar a los productos:
   ahí conviene el comportamiento original de documento largo. */
@media (max-height: 519px) {
  #modal-cart .js-ajax-cart-list {
    overflow: visible;
  }
}