/* =========================================================
   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;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   v3 — EL CARRITO COMO HOJA INFERIOR EN CELULAR
   ═══════════════════════════════════════════════════════════════════════

   En escritorio el panel lateral está bien: hay ancho, entra al costado y deja
   ver la tienda detrás.

   En un teléfono ese mismo panel entra desde la derecha ocupando casi todo el
   ancho, y es un gesto que no corresponde: en un celular lo que aparece para
   confirmar algo sube desde abajo. Además el pulgar llega al borde inferior y
   no al superior derecho, que es donde quedaba la X.

   Es el mismo patrón que ya usa el tema para el modal de venta cruzada
   (modal-bottom-sheet), así que no se está inventando un comportamiento nuevo
   para esta tienda.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  #modal-cart.modal-right {
    top: auto;
    right: 0;
    bottom: -100%;
    left: 0;
    width: 100%;
    /* 88 y no 100: el borde de arriba tiene que dejar ver un poco de la página
       de atrás. Eso es lo que comunica "esto se cierra y volvés a lo tuyo",
       y es la diferencia entre una hoja y una pantalla nueva. */
    /* ALTO SEGUN EL CONTENIDO, con techo.

       Antes era `height: 88%` fijo. Con un solo producto en el carrito eso
       dejaba un hueco enorme: la lista se estiraba para llenar el panel y
       quedaban doscientos y pico de pixeles de blanco entre el producto y los
       totales.

       Con `auto` el panel mide lo que necesita —con un producto es una hoja
       baja, con seis llega al techo y ahi la lista empieza a scrollear— y el
       hueco no existe en ningun caso. El 88% pasa a ser el limite y no la
       medida. */
    height: auto;
    max-height: 88dvh;
    border-radius: var(--r-sheet) var(--r-sheet) 0 0;
    overflow: hidden;
  }

  #modal-cart.modal-right.modal-show {
    right: 0;
    bottom: 0;
  }

  /* El agarre. No es decorativo: es lo que dice que la hoja se puede bajar, y
     es el punto que la gente busca con el pulgar antes de buscar la X. */
  #modal-cart .modal-header {
    position: relative;
    padding-top: 22px;
    text-align: left;
  }

  #modal-cart .modal-header::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 50%;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--main-foreground-opacity-20);
    transform: translateX(-50%);
  }

  /* El pie respeta la barra de gestos del iPhone. Sin esto el botón de
     iniciar compra queda debajo de la franja del sistema. */
  #modal-cart .modal-body > .cart-row:last-child {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }

  /* El CTA es el único elemento de la hoja que se toca con seguridad, así que
     va en pastilla y con el alto táctil completo. */
  #modal-cart .js-ajax-cart-submit .btn {
    min-height: 50px;
    border-radius: var(--r-capsule);
  }

  #modal-cart .js-gift-open {
    min-height: 42px;
    border-radius: var(--r-capsule);
  }

  /* Cerrar: el área táctil completa, que antes era el tamaño del aspa. */
  #modal-cart .modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
}

/* El fondo detrás de la hoja se desenfoca apenas: separa los dos planos sin
   tapar la tienda. Solo donde el navegador puede hacerlo. */
@supports ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))) {
  .js-modal-overlay.modal-overlay-show,
  .modal-overlay.modal-overlay-show {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   v4 — QUE SE VEA LO QUE ESTÁS COMPRANDO
   ═══════════════════════════════════════════════════════════════════════

   Medido en producción con cinco productos y $506.000 de total: la lista
   mostraba UNO y el segundo cortado al medio. Había que deslizar dentro de una
   franja mínima para ver lo que había en el carrito.

   La causa es el reparto del alto. La lista está declarada `flex: 0 1 auto`,
   o sea "podés encogerte todo lo que haga falta", y el pie no tiene techo. Hoy
   el pie acumula seis bloques: aviso de envío gratis, barra de progreso del
   regalo, botón de elegir remera, subtotal, total con transferencia, y el
   botón de compra con su "ver más productos".

   Lo perverso es que empeora con el tamaño de la compra: cuantos más productos
   agrega la persona, más incentivos aparecen abajo y menos lugar queda para
   ver lo que compró. Al revés de lo que conviene.

   Se arregla por los dos lados: la lista pasa a tener un mínimo garantizado y
   a ser ella la que crece, y el pie se compacta.
   ═══════════════════════════════════════════════════════════════════════ */

@media (min-height: 520px) {

  /* La lista es lo unico que crece Y lo unico que scrollea.

     El minimo pasa de un porcentaje a pixeles a proposito: con un 38% de alto
     minimo, si el pie necesitaba mas del 62% no habia reparto posible y algo
     terminaba desbordando. En pixeles, el pie siempre entra entero primero y la
     lista se queda con lo que sobre, nunca menos de un producto y medio. */
  #modal-cart .js-ajax-cart-list {
    flex: 1 1 auto;
    min-height: 150px;
  }

  /* EL PIE NO SCROLLEA NUNCA.

     En v4 le puse tope de alto y scroll propio, con la idea de que si crecía
     no se comiera la lista. Fue un error y de los caros: el boton de compra
     vive adentro del pie, asi que quedo dentro de un area que habia que
     deslizar para alcanzar. Al abrir el carrito no se veia el boton, y cuando
     aparecia se veia cortado. Encima, un contenedor con scroll vertical habilita
     tambien el horizontal, y los margenes negativos de la fila hacian que se
     pudiera deslizar de lado: por eso "Subtotal" se leia "btotal".

     La regla que no se rompe mas: lo unico que puede scrollear en el carrito es
     la lista de productos. Todo lo demas esta siempre a la vista. */
  #modal-cart .modal-body > .cart-row:last-child {
    flex: 0 0 auto;
    max-height: none;
    overflow: visible;
  }
}

/* ── El pie, compactado ────────────────────────────────────────────────
   No se saca ningún dato: envío gratis, regalo, subtotal, total y
   transferencia siguen todos. Lo que se saca es el aire entre ellos, que era
   el que empujaba la lista. */
#modal-cart .js-gift-progress {
  margin-top: 4px;
  padding-top: 6px;
}

#modal-cart .js-free-shipping-message,
#modal-cart .js-gift-progress .js-gift-message {
  margin-bottom: 4px;
  font-size: 12px;
  line-height: 1.35;
}

#modal-cart .js-cart-total-container {
  margin-bottom: 8px !important;
}

#modal-cart .js-cart-total-container .row {
  margin-bottom: 0;
}

/* El subtotal es un paso intermedio hacia el total, no un dato propio: baja a
   letra chica en vez de ocupar la misma línea de peso que el total. */
#modal-cart .js-cart-subtotal-container {
  font-size: 12px;
  color: var(--main-foreground-opacity-80);
}

/* "Ver más productos" sale del pie fijo.

   Es una salida, no una alternativa al checkout, y estaba ocupando una línea
   entera justo debajo del botón de compra —el peor lugar posible para algo que
   te saca del carrito. Pasa a ser el cierre de la lista, donde funciona como
   "seguí mirando". */
#modal-cart .modal-body > .cart-row:last-child .js-modal-close.btn-link {
  display: none;
}

/* El botón del regalo, más compacto: es un beneficio, no la acción. */
#modal-cart .js-gift-open {
  min-height: 38px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 11px;
}

/* ── Celular ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

  #modal-cart .js-ajax-cart-list {
    min-height: 150px;
  }

  /* El encabezado de la hoja no necesita los 57px que traía: con el agarre y
     el título alcanza. Son 20px que van directo a la lista. */
  #modal-cart .modal-header {
    padding-top: 18px;
    padding-bottom: 10px;
    font-size: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   v5 — EL BOTÓN DE COMPRA SIEMPRE A LA VISTA
   ═══════════════════════════════════════════════════════════════════════

   Tres capas de defensa, porque este es EL botón del sitio y no puede
   depender de que el reparto de alto salga bien:

     1. El pie no scrollea (arriba).
     2. El botón queda pegado al fondo del panel, pase lo que pase (acá).
     3. Y si aun así no entrara, el panel scrollea con el botón encima.

   Con las tres, no existe la combinación de productos e incentivos que deje
   el botón fuera de la pantalla.
   ═══════════════════════════════════════════════════════════════════════ */

/* El boton queda al final del pie, en el flujo normal.

   La version anterior lo dejaba pegado al fondo con fondo propio y un velo
   degradado arriba. Como el panel del carrito es translucido con desenfoque y
   ese fondo era opaco, alrededor del boton se veia un recuadro mas claro que
   el resto: una banda que no correspondia a nada.

   Ya no hace falta nada de eso. El pie no scrollea y el panel se adapta al
   contenido, asi que el boton siempre termina visible sin trucos. El sticky se
   conserva solo como red para pantallas muy bajas, pero SIN fondo propio: si
   nunca se despega, nunca se nota. */
#modal-cart .js-ajax-cart-submit {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin-bottom: 0 !important;
  padding-top: 8px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
}

/* Red de seguridad: si el pie entero no entrara, el panel scrollea. El botón
   ya está pegado, así que sigue viéndose mientras eso pasa. */
@media (max-width: 767px) {
  #modal-cart .modal-body {
    overflow-y: auto;
    /* En X nunca. Los márgenes negativos de las filas de bootstrap desbordan
       unos píxeles y eso era lo que dejaba correr el carrito de lado,
       cortando "Subtotal" y "Total" por la izquierda. */
    overflow-x: hidden;
    overscroll-behavior: contain;
  }
}

/* Ningún hijo del carrito puede desbordar a lo ancho. */
#modal-cart,
#modal-cart .modal-body,
#modal-cart .modal-body > .cart-row {
  overflow-x: hidden;
  max-width: 100%;
}

/* ── El pie, más compacto ──────────────────────────────────────────────

   Ahora que el pie manda sobre el alto, cada píxel que ocupa se lo saca a la
   lista de productos. Se recorta el aire, no la información: envío gratis,
   regalo, subtotal, total y transferencia siguen todos. */

#modal-cart .modal-body > .cart-row:last-child {
  padding-top: 8px;
}

/* El subtotal, cuando no hay envío calculado, dice exactamente lo mismo que el
   total dos líneas más abajo. Pasa a letra chica: sigue estando para quien lo
   busca, pero deja de ocupar una línea de peso completo. */
#modal-cart .js-cart-subtotal-container,
#modal-cart .js-cart-subtotal-container span {
  font-size: 11.5px !important;
  line-height: 1.3;
  color: var(--main-foreground-opacity-60);
}

/* El bloque del regalo: el texto y el botón se juntan. */
#modal-cart .js-gift-progress {
  margin-top: 2px;
  padding-top: 6px;
}

#modal-cart .js-gift-progress .js-gift-message {
  margin-bottom: 6px !important;
}

#modal-cart .js-gift-open {
  min-height: 36px;
  font-size: 10.5px;
}

/* ── Las barras de progreso: NO se tocan con comodines ─────────────────

   Aca hubo un error que vale documentar. Para afinar las dos barras escribi
   `[class*="progress"] { height: 3px !important }`. Ese comodin no agarra
   barras: agarra `.bar-progress-amount`, `.bar-progress-condition`,
   `.bar-progress-success` y `.js-gift-progress`, que son BLOQUES DE TEXTO
   —"Estas a $X de tener envio gratis", "Suma $X y llevate una remera"— de
   entre 144 y 216px de alto.

   Aplastados a 3px, su contenido se desbordo y quedo encima del subtotal: dos
   textos escritos uno sobre el otro.

   Las barras de verdad son `.js-bar-progress` y `.js-gift-bar-fill`, y ya
   miden 2px por su cuenta. No necesitaban nada. Solo se les redondea la punta,
   que es lo unico que faltaba. */
#modal-cart .js-bar-progress,
#modal-cart .js-bar-progress-active,
#modal-cart .js-gift-bar-fill {
  border-radius: 999px;
}