/* =============================================================================
   WooCommerce Mini Cart Pro — CSS de override mínimo sobre UIkit / YOOtheme Pro.
   UIkit gestiona colores, tipografía, botones, formularios y el offcanvas.
   Aquí solo añadimos lo que UIkit no cubre por defecto.
   ============================================================================= */

/* ── Panel offcanvas ──────────────────────────────────────────────────────── */
#wmc-drawer .uk-offcanvas-bar {
  width:          400px;
  max-width:      100vw;
  display:        flex;
  flex-direction: column;
  padding:        30px 24px 24px;
  overflow-y:     auto;
  overflow-x:     hidden;
}

@media (max-width: 480px) {
  #wmc-drawer .uk-offcanvas-bar {
    width: 100vw;
  }
}

/* ── Loading overlay ──────────────────────────────────────────────────────── */
.wmc-loading {
  position:         absolute;
  inset:            0;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  background:       rgba(255, 255, 255, .7);
  z-index:          10;
}

/* ── Imagen miniatura de producto ────────────────────────────────────────── */
/*
 * WooCommerce añade atributos width/height al <img> generado.
 * Usamos !important para garantizar el tamaño fijo del contenedor y la imagen.
 */
.wmc-thumb {
  display:       block !important;
  width:         64px  !important;
  height:        64px  !important;
  min-width:     64px  !important;
  max-width:     64px  !important;
  border-radius: 4px;
  overflow:      hidden;
  flex-shrink:   0 !important;
}

.wmc-thumb-img {
  width:      100%    !important;
  height:     100%    !important;
  max-width:  none    !important;
  object-fit: cover;
  display:    block   !important;
}

/* ── Controles de cantidad +/– ───────────────────────────────────────────── */
.wmc-qty {
  display:       inline-flex;
  align-items:   center;
  border:        1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  overflow:      hidden;
  height:        28px;
}

.wmc-qty__btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           26px;
  height:          28px;
  border:          none;
  background:      transparent;
  cursor:          pointer;
  font-size:       15px;
  line-height:     1;
  color:           #ffffff;
  transition:      background .15s;
  flex-shrink:     0;
  padding:         0;
}
.wmc-qty__btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, .12);
}
.wmc-qty__btn:disabled {
  opacity: .35;
  cursor:  default;
}

.wmc-qty__input {
  width:        34px;
  height:       28px;
  border:       none;
  border-left:  1px solid rgba(255, 255, 255, 0.3);
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  text-align:   center;
  font-size:    13px;
  font-weight:  700;
  background:   transparent;
  color:        #ffffff;
  outline:      none;
  padding:      0;
  -moz-appearance:    textfield;
  appearance:         textfield;
}
.wmc-qty__input::-webkit-inner-spin-button,
.wmc-qty__input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* ── Botón trigger del carrito en el header ──────────────────────────────── */
.wmc-trigger {
  display:     inline-flex;
  align-items: center;
  gap:         5px;
  background:  transparent;
  border:      none;
  cursor:      pointer;
  color:       inherit;
  padding:     4px;
  line-height: 1;
}
.wmc-trigger:hover { opacity: .75; }

/* Icono SVG + badge inline (badge a la derecha del icono) */
.wmc-trigger__icon {
  display:     inline-flex;
  align-items: center;
  gap:         4px;
}

/* El badge usa la clase uk-badge de UIkit – solo ajustamos posición static */
.wmc-trigger__icon .uk-badge {
  position: static;
  font-size: 10px;
  min-width: 18px;
  height:    18px;
  padding:   0 4px;
}

/* Ocultar badge cuando el carrito está vacío */
[data-wmc="count"]:empty { display: none !important; }

/* ── Reduce motion ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .wmc-loading { transition: none; }
}