/* ==========================================================================
   Carrito lateral

   Panel de 460px sobre negro al 86% con desenfoque de 30px, el emblema de
   marca de agua y sombra hacia la izquierda.

   Prefijo exclusivo: .mvk-cart-*
   ========================================================================== */

.mvk-cart {
  position: fixed;
  inset: 0;
  z-index: 200;
}

.mvk-cart[hidden] { display: none; }

/* --- Velo ---------------------------------------------------------------- */

.mvk-cart-scrim {
  position: absolute;
  inset: 0;
  background: rgba(9, 8, 8, .52);
  opacity: 0;
  transition: opacity .45s var(--mvk-ease);
}

.mvk-cart.is-open .mvk-cart-scrim { opacity: 1; }

/* --- Panel --------------------------------------------------------------- */

.mvk-cart-panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(460px, 92vw);
  display: flex;
  flex-direction: column;
  background: rgba(9, 8, 8, .86);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  box-shadow: var(--mvk-shadow-drawer);
  color: var(--mvk-white);
  transform: translateX(100%);
  transition: transform .55s var(--mvk-ease);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mvk-cart.is-open .mvk-cart-panel { transform: translateX(0); }

/*
 * El emblema de marca de agua va como pseudo-elemento y no como <img>: es
 * decoración pura, no tiene que existir para un lector de pantalla.
 */
.mvk-cart-panel::before {
  content: "";
  position: absolute;
  inset-block-start: 18%;
  inset-inline-end: -14%;
  width: 78%;
  aspect-ratio: 1;
  background: url("../img/emblem-white.png") center / contain no-repeat;
  opacity: .05;
  pointer-events: none;
}

/*
 * 🚨 El pointer-events:none es la puerta VISUAL, no la guarda de verdad.
 *
 * La guarda que cuenta es la bandera "en vuelo" de cart.js: sin ella dos clics
 * rápidos en "+" mandaban dos altas. Pero mientras el panel solo se atenuaba, los
 * botones seguían clickeables y la persona no tenía ninguna señal de que su clic
 * se estaba descartando: apretaba tres veces más y parecía que el carrito estaba
 * roto. Las dos cosas juntas o ninguna.
 */
.mvk-cart.is-busy .mvk-cart-panel {
  opacity: .72;
  pointer-events: none;
  transition: opacity .2s ease;
}

/* --- Cabecera ------------------------------------------------------------ */

.mvk-cart-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.mvk-cart-close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-inline-end: -8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mvk-white);
  cursor: pointer;
  opacity: .8;
  transition: opacity .25s var(--mvk-ease);
}

.mvk-cart-close:hover { opacity: 1; }

/* --- Progreso al envío gratis -------------------------------------------- */

.mvk-cart-progress {
  position: relative;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.mvk-cart-progress-text {
  margin: 0 0 10px;
  font: 500 11px/1.4 var(--mvk-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mvk-text-soft);   /* sobre oscuro: 6.5:1 */
}

.mvk-cart-progress-text.is-done { color: var(--mvk-white); }

.mvk-cart-progress-rail {
  height: 2px;
  background: rgba(255, 255, 255, .16);
}

.mvk-cart-progress-fill {
  display: block;
  height: 100%;
  background: var(--mvk-white);
  transition: width .6s var(--mvk-ease);
}

/* --- Ítems --------------------------------------------------------------- */

.mvk-cart-items {
  position: relative;
  flex: 1 1 auto;
  margin: 0;
  padding: 8px 24px;
  list-style: none;
}

.mvk-cart-item {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) 24px;
  gap: 14px;
  padding-block: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* Clase duplicada a proposito: .woocommerce img { height:auto } es (0,1,1)
   y le gana a una regla de una sola clase. Sin esto la miniatura se dibuja
   con su alto natural y rompe la fila. */
.mvk-cart-item-img.mvk-cart-item-img {
  width: 80px;
  height: 107px;          /* 3:4 */
  object-fit: cover;
  background: var(--mvk-bg);
}

.mvk-cart-item-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }

.mvk-cart-item-name {
  font-family: var(--mvk-display);
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: var(--mvk-title-ls);
  line-height: 1.1;
  color: var(--mvk-white);
}

.mvk-cart-item-name:hover { color: var(--mvk-white); opacity: .78; }

.mvk-cart-item-meta {
  margin: 0;
  font: 400 11px/1.3 var(--mvk-mono);
  color: var(--mvk-text-soft);
}

.mvk-cart-item-row {
  margin-block-start: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mvk-cart-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .2);
}

.mvk-cart-qty-btn {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mvk-white);
  font: 400 13px/1 var(--mvk-sans);
  cursor: pointer;
  transition: background .2s ease;
}

.mvk-cart-qty-btn:hover { background: rgba(255, 255, 255, .12); }

.mvk-cart-qty-n { min-width: 26px; text-align: center; font-size: 12px; }

.mvk-cart-item-price { font: 600 14px/1 var(--mvk-sans); letter-spacing: -.01em; }

.mvk-cart-item-del {
  align-self: start;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mvk-text-soft);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: color .2s ease;
}

.mvk-cart-item-del:hover { color: var(--mvk-white); }

/* --- Suele combinarse con ------------------------------------------------ */

.mvk-cart-upsell {
  position: relative;
  padding: 18px 24px;
  border-block-start: 1px solid rgba(255, 255, 255, .08);
}

.mvk-cart-up {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 12px;
  margin-block-start: 12px;
}

.mvk-cart-up-img { width: 52px; height: 70px; object-fit: cover; background: var(--mvk-bg); }

.mvk-cart-up-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.mvk-cart-up-name {
  font: 600 12px/1.2 var(--mvk-sans);
  color: var(--mvk-white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mvk-cart-up-price { font: 400 11px/1 var(--mvk-mono); color: var(--mvk-text-soft); }

/* Botón circular: una de las pocas excepciones al no-border-radius. */
.mvk-cart-up-add {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .28);
  background: transparent;
  color: var(--mvk-white);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background .25s var(--mvk-ease), color .25s var(--mvk-ease);
}

.mvk-cart-up-add:hover { background: var(--mvk-white); color: var(--mvk-black); }

/* --- Pie ----------------------------------------------------------------- */

.mvk-cart-foot {
  position: relative;
  padding: 20px 24px 26px;
  border-block-start: 1px solid rgba(255, 255, 255, .12);
  background: rgba(9, 8, 8, .5);
}

.mvk-cart-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font: 400 12px/1 var(--mvk-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mvk-text-soft);
}

/* Desde que el descuento se muestra como una resta, el pie tiene dos de estas
   una debajo de la otra: sin separación quedaban pegadas por la line-height 1. */
.mvk-cart-line + .mvk-cart-line { margin-block-start: 10px; }

/*
 * El total por transferencia es lo que la persona va a pagar de verdad, así
 * que va en Oswald grande y en blanco puro: es el número que manda.
 */
.mvk-cart-transfer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-block-start: 14px;
}

.mvk-cart-transfer-label {
  font: 500 10px/1.3 var(--mvk-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mvk-text-soft);
}

.mvk-cart-transfer-total {
  font-family: var(--mvk-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: var(--mvk-title-ls);
  white-space: nowrap;
}

.mvk-cart-note {
  margin: 8px 0 0;
  font: 300 11px/1.4 var(--mvk-sans);
  color: var(--mvk-text-soft);
}

.mvk-cart-cta {
  margin-block-start: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  background: var(--mvk-white);
  color: var(--mvk-black);
  font: 600 11px/1 var(--mvk-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  transition: opacity .25s var(--mvk-ease);
}

.mvk-cart-cta:hover { color: var(--mvk-black); opacity: .84; }

/* --- Vacío --------------------------------------------------------------- */

.mvk-cart-empty {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 28px;
  text-align: center;
}

.mvk-cart-empty-title {
  margin: 0;
  font-family: var(--mvk-display);
  font-weight: 600;
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: var(--mvk-title-ls);
}

.mvk-cart-empty-sub {
  margin: 0;
  font: 300 13px/1.6 var(--mvk-sans);
  color: var(--mvk-text-soft);
  max-width: 26ch;
}

.mvk-cart-empty .mvk-cart-cta { width: 100%; max-width: 260px; }

/* --- Movimiento reducido ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .mvk-cart-panel { transition: none; }
  .mvk-cart-progress-fill { transition: none; }
}

/* ==========================================================================
   Avisos de WooCommerce en /carro/ — NO se estilan acá, y es a propósito.

   /carro/ no tiene plantilla propia en el tema: se dibuja con el markup y el
   CSS de fábrica del plugin dentro de la cáscara Maverick, y footer.php declara
   que es el respaldo sin JavaScript de la bolsa del header. O sea que sí, es una
   pantalla real del recorrido de compra y sus avisos tienen que verse Maverick.

   Pero el aviso "Producto agregado al carrito" sale IGUAL en la ficha, en el
   catálogo y en el checkout: es un componente global del plugin, no del carrito.
   Su estilo vive UNA sola vez, en el bloque de WooCommerce de main.css. Repetirlo
   acá sería declarar lo mismo dos veces en dos archivos que se encolan siempre
   juntos, y la próxima persona que quiera cambiar el color de un aviso tocaría
   uno solo y no entendería por qué la mitad de las pantallas no cambia.

   Lo único de esta familia que sí es del carrito es .mvk-cart-live, acá abajo:
   ese no es un aviso de WooCommerce sino la región viva del panel lateral.
   ========================================================================== */

/* Zona de mensajes del carrito. Va por encima del panel y solo aparece cuando
   hay algo que decir: antes un fallo del servidor era completamente mudo. */
.mvk-cart-live {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  z-index: 2;
  width: min(460px, 92vw);
  margin: 0;
  padding: 12px 24px;
  background: var(--mvk-white);
  color: var(--mvk-black);
  font: 500 12px/1.4 var(--mvk-sans);
}

.mvk-cart-live[hidden] { display: none; }