/* ==========================================================================
   iCase — CARRITO DRAWER v1.0  ·  "Bloque"
   Archivo: static/css/icase-cart.css
   Requiere: icase-tokens.css

   ESTRATEGIA: Rio ya tiene drawer lateral, calculador de envío, barra de
   envío gratis, promociones y cupones — todo manejado por el JS de
   Tiendanube. Este archivo NO reescribe nada de eso: lo restiliza usando
   sus mismas clases `js-*`. Cero riesgo sobre el flujo de compra, y
   sobrevive a las actualizaciones del tema.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GEOMETRÍA DEL DRAWER
   -------------------------------------------------------------------------- */
#modal-cart.modal {
  --ic-cart-w: 440px;
  background: var(--ic-paper);
  color: var(--ic-ink);
  border: 0; border-radius: 0;
  box-shadow: var(--ic-sh-drawer);
}
@media (min-width: 768px) {
  #modal-cart.modal { width: var(--ic-cart-w); max-width: 92vw; }
}
#modal-cart .modal-body {
  padding: 0 var(--ic-s5) var(--ic-s6);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* El drawer lo renderiza Rio, no lleva la clase .ic: reset propio */
#modal-cart, #modal-cart * { box-sizing: border-box; }
#modal-cart a { color: inherit; text-decoration: none; }
#modal-cart a:hover { color: var(--ic-blue-deep); }
#modal-cart h1, #modal-cart h2, #modal-cart h3,
#modal-cart h4, #modal-cart h5, #modal-cart h6, #modal-cart p { margin: 0; }

/* Cabecera */
#modal-cart .modal-header {
  position: sticky; top: 0; z-index: 6;
  background: var(--ic-blue); color: #fff;
  border: 0; border-radius: 0;
  padding: 0 var(--ic-s3) 0 var(--ic-s5);
  min-height: 56px;
  display: flex; align-items: center;
}
#modal-cart .modal-header .row { width: 100%; margin: 0; align-items: center; }
#modal-cart .modal-header .col.offset-2 {
  margin-left: 0 !important; text-align: left !important;
  font-size: 1.0625rem; font-weight: var(--ic-fw-bold); letter-spacing: -0.02em;
}
#modal-cart .modal-header .btn,
#modal-cart .modal-header .btn-icon { color: #fff; opacity: .9; }
#modal-cart .modal-header .btn:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   2. BARRA DE ENVÍO GRATIS — la palanca de ticket promedio
   -------------------------------------------------------------------------- */
#modal-cart .js-ship-free-rest,
.js-ship-free-rest.progress-bar {
  background: var(--ic-blue-wash);
  border: 1px solid transparent;
  border-radius: var(--ic-r-ui);
  padding: var(--ic-s4);
  margin-block: var(--ic-s4) var(--ic-s5) !important;
}
.progress-bar-title-container { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.progress-bar-icon { color: var(--ic-blue-deep); flex: none; }
.progress-bar-icon svg { width: 18px; height: 18px; }
.progress-bar-title { font-size: var(--ic-fs-sm); font-weight: var(--ic-fw-semi); margin: 0; }

.bar-progress {
  height: 6px; border-radius: var(--ic-r-pill);
  background: rgba(52,152,219,.22);
  overflow: hidden; margin-bottom: 10px;
}
.bar-progress-active {
  height: 100%; border-radius: inherit;
  background: var(--ic-blue);
  transition: width var(--ic-t-slow) var(--ic-ease);
}
/* Alcanzado: pasa a verde, el color de "ya lo tenés" */
.js-free-shipping-achieved ~ * .bar-progress-active,
.ship-free-rest-message .bar-progress-success ~ * { color: var(--ic-ok); }
.bar-progress-success {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--ic-fs-body); font-weight: var(--ic-fw-bold);
  color: var(--ic-ok) !important; margin: 0;
}
.bar-progress-amount {
  font-size: var(--ic-fs-body); font-weight: var(--ic-fw-medium);
  color: var(--ic-ink) !important; margin: 0; line-height: 1.4;
}
.bar-progress-amount .js-ship-free-dif {
  font-weight: var(--ic-fw-black); color: var(--ic-blue-deep);
  font-variant-numeric: tabular-nums;
}
.bar-progress-condition {
  font-family: var(--ic-mono); font-size: var(--ic-fs-xs);
  letter-spacing: .04em; color: var(--ic-ink-3); margin-top: 4px;
}
.ship-free-rest-text strong.text-accent { color: var(--ic-blue-deep) !important; }

/* --------------------------------------------------------------------------
   3. ITEMS
   -------------------------------------------------------------------------- */
#modal-cart .js-ajax-cart-list { padding-top: var(--ic-s5); }
#modal-cart .js-cart-item {
  padding-block: var(--ic-s4);
  border-bottom: 1px solid var(--ic-line-soft);
  margin: 0 !important;
  align-items: flex-start;
}
#modal-cart .js-cart-item:last-child { border-bottom: 0; }
#modal-cart .js-cart-item img {
  border-radius: var(--ic-r-case-sm);
  background: var(--ic-mist);
  aspect-ratio: 1/1; object-fit: cover; width: 100%;
}
/* Compacta el item: nombre arriba, cantidad y subtotal en una sola fila */
#modal-cart .js-cart-item .w-100 {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "name name" "qty subtotal";
  gap: 10px var(--ic-s3);
  align-items: center;
}
#modal-cart .js-cart-item .cart-item-name,
#modal-cart .js-cart-item > div > .w-100 > h6:first-child { grid-area: name; }
#modal-cart .js-cart-item .cart-item-quantity { grid-area: qty; float: none !important; margin: 0 !important; }
#modal-cart .js-cart-item-subtotal { grid-area: subtotal; text-align: right; }

#modal-cart .cart-item-name,
#modal-cart .js-cart-item h6 {
  font-size: var(--ic-fs-body); font-weight: var(--ic-fw-semi);
  letter-spacing: -0.015em; line-height: 1.3; color: var(--ic-ink);
}
#modal-cart .js-cart-item h6 small {
  display: block; font-size: var(--ic-fs-sm);
  font-weight: var(--ic-fw-regular); color: var(--ic-ink-3); margin-top: 2px;
}
#modal-cart .js-cart-item-subtotal {
  font-weight: var(--ic-fw-black); font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em; color: var(--ic-ink);
}

/* Selector de cantidad */
#modal-cart .form-quantity {
  border: 1px solid var(--ic-line); border-radius: var(--ic-r-ui);
  overflow: hidden; background: #fff;
}
#modal-cart .cart-item-btn {
  width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ic-ink-2); border-radius: 0;
  transition: background var(--ic-t-fast) var(--ic-ease);
}
#modal-cart .cart-item-btn:hover { background: var(--ic-mist); color: var(--ic-ink); }
#modal-cart .cart-item-input {
  width: 38px; height: 34px; padding: 0; text-align: center;
  border: 0; background: transparent;
  font-size: var(--ic-fs-body); font-weight: var(--ic-fw-semi);
  font-variant-numeric: tabular-nums;
}
#modal-cart .cart-item-delete .btn { color: var(--ic-ink-3); }
#modal-cart .cart-item-delete .btn:hover { color: var(--ic-flame-deep); }

/* --------------------------------------------------------------------------
   4. ENVÍO Y PROMOCIONES
   -------------------------------------------------------------------------- */
#modal-cart .shipping-calculator-head,
#modal-cart .js-shipping-calculator-head {
  font-family: var(--ic-mono); font-size: var(--ic-fs-xs);
  letter-spacing: var(--ic-ls-mono); text-transform: uppercase;
  color: var(--ic-ink-3);
}
#modal-cart .js-shipping-input,
#modal-cart .shipping-calculator-form input[type="text"] {
  height: 44px; border: 1.5px solid var(--ic-line);
  border-radius: var(--ic-r-ui); padding-inline: var(--ic-s3);
  font-size: 1rem;
}
#modal-cart .js-shipping-input:focus { border-color: var(--ic-blue); outline: none; }
#modal-cart .js-shipping-cost-table { font-size: var(--ic-fs-sm); }
#modal-cart .js-shipping-cost-table strong { font-variant-numeric: tabular-nums; }

#modal-cart .js-total-promotions,
#modal-cart .js-cart-discount-automatic,
#modal-cart .js-cart-discount-with-coupon {
  font-size: var(--ic-fs-sm); font-weight: var(--ic-fw-semi);
  color: var(--ic-ok) !important;
}
#modal-cart .js-total-promotions .row { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   5. TOTALES + CTA (el CTA queda siempre a la vista)
   -------------------------------------------------------------------------- */
#modal-cart .js-cart-subtotal,
#modal-cart .js-ajax-cart-total { font-variant-numeric: tabular-nums; font-weight: var(--ic-fw-semi); }

#modal-cart .js-cart-total-container { padding-top: var(--ic-s4); border-top: 2px solid var(--ic-ink); }
#modal-cart .js-cart-total-container .h2 {
  font-size: var(--ic-fs-h3) !important; font-weight: var(--ic-fw-black);
  letter-spacing: -0.03em; color: var(--ic-ink) !important;
}
#modal-cart .js-cart-total { font-variant-numeric: tabular-nums; }
#modal-cart .js-payment-discount-price-cart-container {
  color: var(--ic-ok) !important; font-weight: var(--ic-fw-semi) !important;
  font-size: var(--ic-fs-sm);
}

/* El botón de compra no se pierde al scrollear */
#modal-cart #ajax-cart-submit-div {
  position: sticky; bottom: 0; z-index: 5;
  margin: 0 !important;
  padding-block: var(--ic-s4);
  background: var(--ic-paper);
  box-shadow: 0 -1px 0 var(--ic-line), 0 -12px 16px -12px rgba(16,20,24,.18);
}
#modal-cart input[name="go_to_checkout"],
#modal-cart .btn-primary {
  min-height: 54px; width: 100%;
  border: 0; border-radius: var(--ic-r-ui);
  background: var(--ic-blue); color: #fff;
  font-family: var(--ic-font); font-size: 1rem; font-weight: var(--ic-fw-bold);
  letter-spacing: -0.01em; cursor: pointer;
  transition: background var(--ic-t-fast) var(--ic-ease);
}
#modal-cart input[name="go_to_checkout"]:hover { background: var(--ic-blue-hover); }
#modal-cart .btn-link {
  color: var(--ic-ink-3); font-size: var(--ic-fs-sm); font-weight: var(--ic-fw-medium);
}
#modal-cart .btn-link:hover { color: var(--ic-ink); }

/* Alertas */
#modal-cart .alert {
  border: 1px solid var(--ic-line); border-radius: var(--ic-r-ui);
  background: var(--ic-mist); color: var(--ic-ink-2);
  font-size: var(--ic-fs-sm); padding: var(--ic-s4);
}
#modal-cart .alert-warning { background: var(--ic-warn-wash); border-color: transparent; color: var(--ic-warn); }
#modal-cart .alert-danger  { background: var(--ic-flame-wash); border-color: transparent; color: var(--ic-flame-deep); }

/* Carrito vacío */
#modal-cart .js-empty-ajax-cart { padding-block: var(--ic-s10); text-align: center; }
#modal-cart .js-empty-ajax-cart .alert {
  background: transparent; border: 0; color: var(--ic-ink-3); font-size: var(--ic-fs-body);
}

/* --------------------------------------------------------------------------
   6. RECOMENDADOS DENTRO DEL CARRITO (lo único que Rio no trae)
   -------------------------------------------------------------------------- */
.ic-cartreco {
  margin-top: var(--ic-s6);
  padding-top: var(--ic-s5);
  border-top: 1px solid var(--ic-line);
}
.ic-cartreco__label {
  display: block; margin-bottom: var(--ic-s4);
  font-family: var(--ic-mono); font-size: var(--ic-fs-xs);
  letter-spacing: var(--ic-ls-mono); text-transform: uppercase;
  font-weight: var(--ic-fw-medium); color: var(--ic-ink-3);
}
.ic-cartreco__list { display: grid; gap: var(--ic-s3); }
.ic-cartreco__item {
  display: grid; grid-template-columns: 56px 1fr auto;
  gap: var(--ic-s3); align-items: center;
}
.ic-cartreco__media {
  display: block;
  width: 56px; height: 56px; border-radius: var(--ic-r-case-sm);
  overflow: hidden; background: var(--ic-mist);
}
.ic-cartreco__media img { width: 100%; height: 100%; object-fit: cover; }
.ic-cartreco__name {
  font-size: var(--ic-fs-sm); font-weight: var(--ic-fw-semi);
  line-height: 1.25; color: var(--ic-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ic-cartreco__price {
  font-size: var(--ic-fs-sm); font-weight: var(--ic-fw-bold);
  color: var(--ic-ink); font-variant-numeric: tabular-nums; margin-top: 2px;
}
.ic-cartreco__add {
  flex: none; min-height: 34px; padding-inline: var(--ic-s4);
  font-size: var(--ic-fs-sm);
}

/* --------------------------------------------------------------------------
   7. CROSS-SELLING MODAL (promoción nativa de Tiendanube)
   -------------------------------------------------------------------------- */
#js-cross-selling-modal .modal-header { background: var(--ic-flame); color: #fff; }
#js-cross-selling-modal .label-accent { background: var(--ic-flame) !important; border-radius: var(--ic-r-ui); }
#js-cross-selling-modal .btn-primary { border-radius: var(--ic-r-ui); background: var(--ic-blue); }
#js-cross-selling-modal .price-compare { color: var(--ic-ink-3); text-decoration: line-through; }
#js-cross-selling-modal .text-primary { color: var(--ic-ink) !important; font-weight: var(--ic-fw-black); }

/* ==========================================================================
   AVISO "AGREGADO AL CARRITO" CON RECOMENDACIONES

   Este modal (#related-products-notification) abría a top:100vh — justo
   debajo del borde inferior de la pantalla — y como Rio bloquea el scroll
   del body al abrirlo, no había forma de llegar hasta él. Desde afuera se
   veía como que la página se trababa al apretar "Agregar al carrito".

   El contenido siempre estuvo bien: 600x590, con el producto agregado, el
   total, el botón VER CARRITO y tres recomendaciones. Solo estaba fuera de
   cuadro. El transform vertical que debería subirlo no se aplica cuando el
   modal lleva a la vez las clases de hoja inferior y de centrado, que es la
   combinación que arma el propio header-modals.tpl de Rio.

   Se lo ancla al borde de abajo y se le pone tope de alto por si en un
   teléfono chico las recomendaciones no entran.
   ========================================================================== */
#related-products-notification.modal-show {
  top: auto;
  bottom: 0;
  transform: translateX(-50%);
  max-height: 88vh;
  overflow-y: auto;
}