/**
 * Mercado Mayor — Página "Tienda" (shop principal)
 * ---------------------------------------------------------------------------
 * La grilla de productos, filtros y paginación ya heredan todo de
 * b2b-marketplace.css; lo que vive aquí es específico de esta página:
 *
 *   .mm-shop-empty    Estado vacío del catálogo — reemplaza el aviso por
 *                      defecto de WooCommerce (mercado_mayor_no_products_found()
 *                      en functions.php, activo solo en is_shop()).
 *   .mm-quickcat       Panel de alta rápida de categorías — solo se imprime
 *                      para quien puede manage_product_terms (ver
 *                      inc/shop-quick-category.php); un comprador o
 *                      vendedor nunca recibe este marcado.
 *
 * Depende de mercado-mayor-page-hero únicamente por los botones .mm-btn de
 * .mm-shop-empty — ningún otro componente de esa hoja se usa aquí.
 */
.mm-shop-empty{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  max-width: 34rem;
  margin: var(--mm-section-y) auto;
  padding: clamp(40px, 6vw, 64px) clamp(24px, 5vw, 48px);
  background: var(--mm-surface-alt);
  border: 1px dashed var(--mm-border-strong);
  border-radius: var(--mm-radius-lg);
}
.mm-shop-empty__icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--mm-accent-soft);
  color: var(--mm-accent);
  font-size: 1.375rem;
  flex: none;
}
.mm-shop-empty__title{
  font-family: var(--mm-font-display);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--mm-ink);
  margin: 0;
}
.mm-shop-empty__text{
  color: var(--mm-ink-muted);
  margin: 0;
  max-width: 32ch;
}
.mm-shop-empty .mm-btn{
  margin-top: 6px;
}

/* ========================================================================
   QUICK CATEGORY PANEL
   ------------------------------------------------------------------------
   Only ever printed by PHP for someone who can manage_product_terms (see
   inc/shop-quick-category.php) — a shopper or vendor never gets this
   markup at all, so there's nothing here to hide from them either.
   ======================================================================== */
.mm-quickcat{
  --mmq-success: #3F6B4F;
  --mmq-success-soft: #E8F0E9;

  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  z-index: 60;
}

.mm-quickcat__trigger{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  font-family: var(--mm-font-ui);
  font-size: var(--mm-text-sm);
  font-weight: 700;
  color: var(--mm-ink);
  background: var(--mm-accent-pastel);
  border: 1px solid var(--mm-accent-pastel);
  border-radius: var(--mm-radius-pill);
  box-shadow: var(--mm-shadow-md);
  cursor: pointer;
  transition: background-color var(--mm-dur) var(--mm-ease),
              transform var(--mm-dur) var(--mm-ease);
}
.mm-quickcat__trigger span{
  font-size: 1.05em;
  line-height: 1;
}
.mm-quickcat__trigger:hover,
.mm-quickcat__trigger:focus-visible{
  background: var(--mm-accent-pastel-hover);
  transform: translateY(-1px);
}
.mm-quickcat[data-state="open"] .mm-quickcat__trigger{
  border-radius: var(--mm-radius);
}

.mm-quickcat__panel{
  display: none; /* [data-state="open"] below is the only thing allowed to
                     override this — see the note in the JS about why the
                     `hidden` attribute alone isn't trusted here. */
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: min(320px, calc(100vw - 48px));
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-lg);
  box-shadow: var(--mm-shadow-lg);
}
.mm-quickcat[data-state="open"] .mm-quickcat__panel{
  display: flex;
}

.mm-quickcat__head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.mm-quickcat__head h2{
  font-family: var(--mm-font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--mm-ink);
  margin: 0;
}
.mm-quickcat__close{
  flex: none;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--mm-ink-subtle);
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
.mm-quickcat__close:hover{
  color: var(--mm-ink);
  background: var(--mm-surface-alt);
}

.mm-quickcat__hint{
  margin: -4px 0 0;
  font-size: var(--mm-text-xs);
  color: var(--mm-ink-subtle);
  line-height: 1.4;
}

.mm-quickcat__form{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mm-quickcat__label{
  font-size: var(--mm-text-xs);
  font-weight: 600;
  color: var(--mm-ink-muted);
  margin: 8px 0 2px;
}
.mm-quickcat__label:first-child{
  margin-top: 0;
}
.mm-quickcat__input{
  width: 100%;
  padding: var(--mm-pad-control-y) var(--mm-pad-control-x);
  font-family: var(--mm-font-ui);
  font-size: var(--mm-text-sm);
  color: var(--mm-ink);
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-sm);
}
.mm-quickcat__input:focus-visible{
  outline: 2px solid var(--mm-accent);
  outline-offset: 1px;
}

.mm-quickcat__feedback{
  min-height: 1.2em;
  margin: 4px 0 0;
  font-size: var(--mm-text-xs);
  color: var(--mm-ink-subtle);
}
.mm-quickcat__feedback.is-success{
  color: var(--mmq-success);
}
.mm-quickcat__feedback.is-error{
  color: var(--mm-accent);
}

.mm-quickcat__submit{
  margin-top: 6px;
  padding: var(--mm-pad-btn-y) var(--mm-pad-btn-x);
  font-family: var(--mm-font-ui);
  font-size: var(--mm-text-sm);
  font-weight: 600;
  color: var(--mm-ink);
  background: var(--mm-accent-pastel);
  border: 1px solid var(--mm-accent-pastel);
  border-radius: var(--mm-radius-sm);
  cursor: pointer;
  transition: background-color var(--mm-dur) var(--mm-ease);
}
.mm-quickcat__submit:hover,
.mm-quickcat__submit:focus-visible{
  background: var(--mm-accent-pastel-hover);
  border-color: var(--mm-accent-pastel-hover);
}
.mm-quickcat__submit:disabled{
  opacity: .6;
  cursor: not-allowed;
}

@media (max-width: 480px){
  .mm-quickcat__panel{
    right: -8px;
  }
}