/* ═══════════ CARRITO LATERAL ═══════════ */
.mp-cab__cuenta[hidden]{ display:none }

.mp-drawer__fondo{
  position:fixed; inset:0; z-index:90;
  background:rgba(30,27,25,.42);
  opacity:0; pointer-events:none;
  transition:opacity var(--mp-cajon) var(--mp-easing);
}
/*
 * Cada velo responde SÓLO a su propio cajón (`+`, el hermano inmediato).
 * Había además un `#mp-carrito:not([hidden]) ~ .mp-drawer__fondo` con el hermano
 * GENERAL, y como los cuatro cajones (carrito, filtros, menú, buscador) se imprimen
 * juntos en el pie, abrir el carrito encendía los cuatro velos: se apilaban a 42 %
 * cada uno —el fondo quedaba al 89 % en vez del 42 % buscado— y, peor, el que
 * recibía el clic al lado del cajón era el ÚLTIMO, el del buscador. Tocar fuera para
 * cerrar el carrito lo cerraba y de paso abría el buscador.
 */
.mp-drawer:not([hidden]) + .mp-drawer__fondo{ opacity:1; pointer-events:auto }

/*
 * El cajón entra y sale deslizándose desde el borde derecho.
 *
 * La clave es que NUNCA se apaga con `display:none`: desde ahí no hay nada que animar
 * y el panel aparecía de golpe. Cerrado vive fuera de la pantalla y con
 * `visibility:hidden`, que lo saca del foco del tabulador y del lector de pantalla
 * igual que lo hacía el display. El atributo `hidden` sigue siendo el estado de
 * verdad para el JS; lo único que se le quita es el display:none que le pone el
 * navegador, y eso lo hace cualquier declaración de display propia.
 *
 * `visibility` no se interpola, se cambia de golpe. Por eso al ABRIR va sin retraso
 * (hay que verlo antes de que empiece a moverse) y al CERRAR se retrasa justo lo que
 * dura el deslizamiento, para que el panel siga a la vista mientras se va.
 */
.mp-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:91;
  width:min(420px, 100vw);
  background:var(--mp-papel);
  box-shadow:-8px 0 32px rgba(30,27,25,.14);
  display:flex; flex-direction:column;
  transform:translateX(100%);
  visibility:hidden;
  transition:transform var(--mp-cajon) var(--mp-easing),
             visibility 0s linear var(--mp-cajon);
}
.mp-drawer:not([hidden]){
  transform:translateX(0);
  visibility:visible;
  transition:transform var(--mp-cajon) var(--mp-easing), visibility 0s;
}

.mp-drawer__panel{ display:flex; flex-direction:column; height:100%; overflow-y:auto }

/*
 * El contenido entra escalonado detrás del panel: primero se abre el cajón y las
 * líneas se van acomodando. Lo dispara la clase `is-entrando`, que el JS pone al
 * abrir y quita al terminar; NO sirve colgarlo de `:not([hidden])` porque el panel se
 * redibuja entero en cada cambio (agregar, quitar, «complétalo con») y la animación
 * se repetiría en todas las líneas cada vez que la clienta toca una cantidad.
 *
 * Todo el bloque vive dentro de `no-preference`: con la animación anulada por
 * accesibilidad los retardos seguirían corriendo, y `both` deja el elemento en su
 * estado inicial —invisible— durante ese cuarto de segundo. Mejor que no exista.
 */
@media (prefers-reduced-motion: no-preference){
  .mp-drawer.is-entrando .mp-drawer__item,
  .mp-drawer.is-entrando .mp-drawer__vacio,
  .mp-drawer.is-entrando .mp-drawer__pie,
  .mp-drawer.is-entrando .mp-menu-lista > li,
  .mp-drawer.is-entrando .mp-buscador__form{
    animation:mp-cajon-linea .34s var(--mp-easing) both;
  }
  .mp-drawer.is-entrando .mp-drawer__item:nth-child(1),
  .mp-drawer.is-entrando .mp-menu-lista > li:nth-child(1){ animation-delay:.10s }
  .mp-drawer.is-entrando .mp-drawer__item:nth-child(2),
  .mp-drawer.is-entrando .mp-menu-lista > li:nth-child(2){ animation-delay:.15s }
  .mp-drawer.is-entrando .mp-drawer__item:nth-child(3),
  .mp-drawer.is-entrando .mp-menu-lista > li:nth-child(3){ animation-delay:.20s }
  .mp-drawer.is-entrando .mp-drawer__item:nth-child(n+4),
  .mp-drawer.is-entrando .mp-menu-lista > li:nth-child(n+4){ animation-delay:.24s }
  .mp-drawer.is-entrando .mp-drawer__pie{ animation-delay:.18s }
}
@keyframes mp-cajon-linea{
  from{ opacity:0; transform:translateY(10px) }
  to  { opacity:1; transform:none }
}

/*
 * El contador de la cabecera da un salto corto cuando cambia: es el único acuse de
 * recibo que ve quien agrega algo con el cajón ya abierto, o desde la grilla.
 */
@keyframes mp-cuenta-salta{
  0%  { transform:scale(1) }
  35% { transform:scale(1.4) }
  100%{ transform:scale(1) }
}
@media (prefers-reduced-motion: no-preference){
  .mp-cab__cuenta.is-nuevo{ animation:mp-cuenta-salta .42s var(--mp-easing) }
}

.mp-drawer__cab{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem var(--mp-gutter); border-bottom:1px solid var(--mp-hilo); flex:0 0 auto;
}
.mp-drawer__tit{ font-size:1.25rem }
.mp-drawer__cerrar{ padding:.4rem; color:var(--mp-tinta-2) }
.mp-drawer__cerrar:hover{ color:var(--mp-tinta) }

.mp-drawer__vacio{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; padding:2rem; text-align:center; color:var(--mp-tinta-2) }
.mp-drawer__seguir{ font-size:.8125rem; letter-spacing:.08em; text-transform:uppercase; border-bottom:1px solid currentColor; padding-bottom:2px }

.mp-drawer__items{ list-style:none; margin:0; padding:0 var(--mp-gutter); flex:1 1 auto; display:flex; flex-direction:column }
.mp-drawer__item{
  display:grid; grid-template-columns:64px 1fr auto; gap:.85rem;
  padding-block:1.1rem; border-bottom:1px solid var(--mp-hilo); align-items:start;
}
.mp-drawer__foto{ display:block; width:64px; aspect-ratio:2/3; background:var(--mp-lino); overflow:hidden }
.mp-drawer__foto img{ width:100%; height:100%; object-fit:cover }
.mp-drawer__datos{ display:flex; flex-direction:column; gap:.3rem; min-width:0 }
.mp-drawer__nom{ font-size:.8438rem; line-height:1.35 }
.mp-drawer__var{ color:var(--mp-tinta-3) }
.mp-drawer__fila{ display:flex; align-items:baseline; gap:.5rem; margin-top:.15rem }
.mp-drawer__quitar{ padding:.3rem; color:var(--mp-tinta-3) }
.mp-drawer__quitar:hover{ color:var(--mp-vino) }

.mp-drawer__pie{ flex:0 0 auto; padding:1.1rem var(--mp-gutter) 1.4rem; border-top:1px solid var(--mp-hilo) }
.mp-drawer__total{ display:flex; justify-content:space-between; font-size:.9375rem; margin-bottom:.2rem }
.mp-drawer__nota{ color:var(--mp-tinta-3); margin-bottom:.9rem }
.mp-drawer__checkout{
  display:block; width:100%; text-align:center; padding:.9rem;
  background:var(--mp-tinta); color:var(--mp-papel);
  font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase;
  transition:background-color var(--mp-rapido) var(--mp-easing);
}
.mp-drawer__checkout:hover{ background:var(--mp-vino); color:var(--mp-papel) }
.mp-drawer__vercarrito{
  display:block; text-align:center; margin-top:.7rem;
  font-size:.75rem; letter-spacing:.06em; color:var(--mp-tinta-2);
  border-bottom:1px solid transparent;
}
.mp-drawer__vercarrito:hover{ color:var(--mp-tinta); border-color:currentColor }

button.is-cargando{ opacity:.6; cursor:wait }

@media (max-width:480px){ .mp-drawer{ width:100vw } }

/* ═══════════ MENÚ MÓVIL ═══════════ */
.mp-menu-movil__nav{ flex:1 1 auto; overflow-y:auto; padding:.5rem var(--mp-gutter) 0 }
.mp-menu-lista{ list-style:none; margin:0; padding:0 }
.mp-menu-lista li{ border-bottom:1px solid var(--mp-hilo) }
.mp-menu-lista a{
  display:block; padding-block:.95rem;
  font-family:var(--mp-serif); font-size:1.15rem;
}
.mp-menu-lista .sub-menu{ padding-left:1rem }
.mp-menu-lista .sub-menu a{ font-family:var(--mp-sans); font-size:.875rem; padding-block:.7rem }

.mp-menu-movil__servicio{
  display:flex; flex-direction:column; padding:.9rem var(--mp-gutter) 0;
  font-size:.8125rem; letter-spacing:.06em; text-transform:uppercase; color:var(--mp-tinta-2);
}
.mp-menu-movil__servicio a{ padding-block:.55rem }
.mp-menu-movil__servicio a:hover{ color:var(--mp-vino) }

.mp-menu-movil__pie{ flex:0 0 auto; padding:1.1rem var(--mp-gutter) 1.4rem }

/* ═══════════ BUSCADOR ═══════════ */
.mp-buscador__form{ display:flex; flex-direction:column; gap:.85rem; padding:1.1rem var(--mp-gutter) }
.mp-buscador__form input[type="search"]{
  width:100%; padding:.8rem 0; border:0; border-bottom:1px solid var(--mp-hilo-firme);
  background:transparent; font-family:var(--mp-serif); font-size:1.3rem; color:var(--mp-tinta);
}
.mp-buscador__form input[type="search"]:focus{ outline:0; border-color:var(--mp-tinta) }
.mp-buscador__form input[type="search"]::placeholder{ color:var(--mp-tinta-3) }

/* ── el mega menú dentro del cajón móvil: acordeón ── */
#mp-menu-movil .mp-menu-lista > li.menu-item-has-children > a{
  display:flex; align-items:center; justify-content:space-between;
}
#mp-menu-movil .mp-menu-lista > li.menu-item-has-children > a::after{
  content:"+"; font-size:1.1rem; color:var(--mp-tinta-3); line-height:1;
}
#mp-menu-movil .mp-menu-lista > li.is-abierto > a::after{ content:"–" }

#mp-menu-movil .mp-mega{
  display:none; position:static; opacity:1; visibility:visible; transform:none;
  background:transparent; border:0; box-shadow:none; z-index:auto;
}
#mp-menu-movil .mp-menu-lista > li.is-abierto > .mp-mega{ display:block }
#mp-menu-movil .mp-mega__int{ display:block; padding:0 0 1rem }
#mp-menu-movil .mp-mega__cols{ display:block }
#mp-menu-movil .mp-mega__cols > li{ border:0; padding-top:.5rem }
#mp-menu-movil .mp-mega__cols > li > a{ margin-bottom:.5rem; padding-block:0 }
#mp-menu-movil .mp-mega__lista a{ font-family:var(--mp-sans); font-size:.875rem; padding-block:.45rem }
#mp-menu-movil .mp-mega__foto{ display:none }

/* ═══════════ AVISOS Y BOTONES DE WOOCOMMERCE ═══════════ */
/* Woo pinta sus avisos con una barra azul arriba y un ícono de su propia tipografía
   («WooCommerce»), que este tema no carga: en el carrito vacío salía un cuadrito vacío
   encima de la palabra «Tu». La regla anterior sólo cambiaba el borde izquierdo y dejaba
   el de arriba puesto, por eso seguía viéndose azul.
   Van en esta hoja, que se carga en todo el sitio, y no en checkout.css: el mismo aviso
   aparece en la tienda y en la ficha cuando se añade un producto al carrito. */
.woocommerce-message, .woocommerce-error, .woocommerce-info{
  list-style:none; margin:0 0 var(--mp-e3); padding:.9rem 1.1rem;
  background:var(--mp-lino); color:var(--mp-tinta);
  border:0; border-left:3px solid var(--mp-tinta); border-radius:0;
  font-size:.8438rem; line-height:1.5;
}
.woocommerce-message::before, .woocommerce-error::before, .woocommerce-info::before{
  content:none; display:none;
}
.woocommerce-error{ border-left-color:var(--mp-vino) }
.woocommerce-error li{ list-style:none }

/* El botón genérico de Woo («Volver a la tienda», «Ver carrito») venía gris con esquinas
   redondeadas: su selector lleva `.woocommerce` delante y le ganaba al del tema. */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
a.button, button.button{
  padding:.75rem 1.1rem; border:1px solid var(--mp-tinta-2); border-radius:0;
  background:transparent; color:var(--mp-tinta);
  font-family:var(--mp-sans); font-size:.75rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase;
  transition:border-color var(--mp-rapido) var(--mp-easing), background-color var(--mp-rapido) var(--mp-easing);
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
a.button:hover, button.button:hover{ border-color:var(--mp-tinta); background:var(--mp-lino) }

/* ── «Complétalo con»: el sugerido del cajón ──
   Va entre los productos y el pie. Deliberadamente discreto: es una oferta, no un
   reclamo. Una línea de separación arriba lo despega de lo que la clienta ya eligió. */
.mp-drawer__sugerido{
  padding:var(--mp-e2);
  border-top:1px solid var(--mp-hilo);
}
.mp-drawer__sug-eti{ display:block; color:var(--mp-vino); margin-bottom:.6rem }

.mp-drawer__sug-caja{
  display:flex; align-items:center; gap:.7rem;
  padding:.6rem; background:var(--mp-lino);
}
.mp-drawer__sug-foto{ flex:0 0 auto; width:56px; height:56px; overflow:hidden; background:var(--mp-papel) }
.mp-drawer__sug-foto img{ width:100%; height:100%; object-fit:cover; display:block }

/* min-width:0 para que el nombre largo pueda recortarse en vez de estirar la fila */
.mp-drawer__sug-datos{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:.15rem }
.mp-drawer__sug-nom{
  font-size:.8125rem; line-height:1.35; color:var(--mp-tinta);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.mp-drawer__sug-nom:hover{ color:var(--mp-vino) }

.mp-drawer__sug-boton{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  padding:.5rem .85rem; border:1px solid var(--mp-tinta); background:transparent;
  color:var(--mp-tinta); font-size:.6875rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; cursor:pointer;
  transition:background-color var(--mp-rapido) var(--mp-easing), color var(--mp-rapido) var(--mp-easing);
}
.mp-drawer__sug-boton:hover{ background:var(--mp-tinta); color:var(--mp-papel) }
.mp-drawer__sug-boton.is-cargando{ opacity:.5; pointer-events:none }

/* la sección de la página de gracias reusa la grilla de producto del catálogo */
.mp-gracias-sug{ border-top:1px solid var(--mp-hilo); margin-top:var(--mp-e4) }

/* ═══════════ REGALO POR MONTO ═══════════ */
.mp-regalo-barra{
  flex:0 0 auto; padding:.85rem var(--mp-gutter);
  border-bottom:1px solid var(--mp-hilo); background:var(--mp-lino);
}
.mp-regalo-barra__txt{ font-size:.8125rem; line-height:1.45; margin:0 0 .5rem; color:var(--mp-tinta-2) }
.mp-regalo-barra__txt .amount{ color:var(--mp-tinta); font-weight:600 }
.mp-regalo-barra__riel{
  display:block; height:3px; background:var(--mp-hilo); overflow:hidden;
}
.mp-regalo-barra__riel > span{
  display:block; height:100%; background:var(--mp-vino);
  transition:width var(--mp-medio) var(--mp-easing);
}
.mp-regalo-barra.is-completa .mp-regalo-barra__txt{ color:var(--mp-tinta) }

.mp-regalo__gratis{ color:var(--mp-vino); font-weight:600 }
.mp-regalo__eti{
  display:inline-block; margin-left:.4rem; padding:1px 6px;
  background:var(--mp-vino); color:#fff; border-radius:2px;
  font-size:.5625rem; letter-spacing:.08em; text-transform:uppercase; vertical-align:middle;
}
/* en la página del carrito la barra va suelta, no dentro del cajón */
.woocommerce-cart .mp-regalo-barra{ margin-bottom:var(--mp-e3); border:1px solid var(--mp-hilo) }
.mp-drawer__item.is-regalo .mp-drawer__foto{ opacity:.85 }
.mp-drawer__item.is-regalo{ grid-template-columns:64px 1fr }
/* `.mp-drawer__datos` es una columna flex y sus hijos se estiran: sin esto la etiqueta
   «Regalo» se iba de orilla a orilla como una barra, en vez de ser un sello */
.mp-drawer__item.is-regalo .mp-regalo__eti{ align-self:flex-start; margin-left:0 }