/* ============================================================
   cajones.css · LA FICHA Y EL CARRITO EN EL TELÉFONO
   ------------------------------------------------------------
   Se carga al final de todo.

   Dos cosas que se veían mal en un iPhone real:

   · La ficha del producto dejaba un 20% de pantalla sin usar
     arriba, y la X de cerrar se perdía al bajar. La causa del
     hueco: el alto estaba en `svh`, que en Safari es el alto
     "chico" (sin contar la barra de direcciones que se esconde
     al scrollear). Se pasa a `dvh`, que es el alto real en cada
     momento. La X pasa a ser pegajosa: viaja con el scroll.

   · El carrito mostraba una franja mínima de productos porque el
     formulario de datos (nombre, retiro/delivery) estaba en el
     pie fijo y se comía el cajón. Ahora los productos y el
     formulario van juntos en la zona que scrollea; abajo quedan
     fijos solo el total y el botón de enviar.
   ============================================================ */

/* ============================================================
   1 · LA FICHA DEL PRODUCTO
   ============================================================ */

.modal-sheet {
  max-height: 96dvh !important;
  display: flex;
  flex-direction: column;
}

/* El asa de arriba, más discreta y sin robar alto. */
.modal-handle { margin: 8px auto 0 !important; }

/* La X viaja pegada arriba a la derecha mientras se baja por la
   ficha. Es un hijo directo del contenedor que scrollea, que es
   lo que `sticky` necesita. El margen negativo evita que empuje
   la foto hacia abajo. */
.modal-close {
  position: sticky !important;
  top: 10px !important;
  right: auto !important;
  align-self: flex-end;
  margin: 0 12px -44px auto !important;
  z-index: 30 !important;
  width: 44px !important;
  height: 44px !important;
  background: rgba(8, 8, 8, .72) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  color: #fff !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  flex: 0 0 auto;
}

.modal-img-wrap { flex: 0 0 auto; }
.modal-body     { flex: 0 0 auto; }

@media (max-width: 699px) {
  .modal-sheet { max-height: 97dvh !important; border-radius: 22px 22px 0 0 !important; }
  /* La foto queda como siempre estuvo: 16:9 a todo el ancho, con
     `cover`. Un intento de limitarla a 40dvh la dejaba chica. */
}


/* ============================================================
   2 · EL CARRITO
   ------------------------------------------------------------
   cajones.js mueve los productos y el formulario a una zona
   común con scroll (`.cart-scroll`). Acá se le da el alto.
   ============================================================ */

.cart-drawer {
  display: flex !important;
  flex-direction: column;
}

@media (max-width: 768px) {
  .cart-drawer {
    height: 95dvh !important;
    max-height: 95dvh !important;
  }
}

.cart-header {
  flex: 0 0 auto;
  padding: 16px 20px 12px !important;
}
.cart-title { font-size: 28px !important; }

/* La zona que scrollea: productos + datos del pedido. */
.cart-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 0 12px;
}

.cart-scroll .cart-body {
  flex: 0 0 auto !important;
  overflow: visible !important;
  padding: 14px 20px 6px !important;
}

.cart-scroll .checkout-panel {
  margin: 10px 20px 0;
}

/* El pie fijo: solo total y botón. Compacto, para que los
   productos tengan pantalla. */
.cart-footer {
  flex: 0 0 auto;
  padding: 12px 20px calc(14px + env(safe-area-inset-bottom)) !important;
  border-top: 1px solid rgba(255, 255, 255, .09);
  background: #0e0e0e;
}

.cart-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 14px !important;
  margin-bottom: 10px !important;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 12px;
}
.cart-total-label {
  font-family: var(--f-cond, 'Barlow Condensed', sans-serif);
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #7a7a7a;
}
.cart-total-amount {
  font-family: var(--f-display, 'Anton', Impact, sans-serif) !important;
  font-size: clamp(26px, 6.5vw, 32px) !important;
  color: var(--y, #F5C518) !important;
  text-shadow: none !important;
}
.cart-total-meta { margin: -4px 0 10px !important; font-size: 12px; color: #8A8A8A; }

.btn-checkout {
  width: 100%;
  min-height: 54px !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  font-family: var(--f-cond, 'Barlow Condensed', sans-serif) !important;
  font-size: 15.5px !important;
  font-weight: 900 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase;
}

/* El texto explicativo del formulario, más corto de leer. */
.checkout-panel-copy { font-size: 12.5px !important; line-height: 1.4 !important; }