/* ═══════════════════════════════════════════════════════════
   Bazar Search — Frontend Styles  v2.0
   ═══════════════════════════════════════════════════════════ */

:root {
  --bazar-primary:   #e63946;
  --bazar-primary-h: #c1121f;
  --bazar-primary-l: #fde8ea;
  --bazar-bg:        #ffffff;
  --bazar-bg2:       #f8f9fa;
  --bazar-bg3:       #f1f3f5;
  --bazar-ink:       #1a1a2e;
  --bazar-ink2:      #3d3d5c;
  --bazar-muted:     #5d6575;
  --bazar-border:    #e4e6ea;
  --bazar-border2:   #d0d3db;
  --bazar-green:     #2ecc71;
  --bazar-yellow:    #f59f00;
  --bazar-radius:    10px;
  --bazar-shadow:    0 4px 24px rgba(0,0,0,.10);
  --bazar-shadow-lg: 0 16px 60px rgba(0,0,0,.16);
  --bazar-font:      -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* ── Elementor override: neutralizar fondo amarillo global en botones del plugin ── */
#bazar-modal button,
.bazar-search-trigger-wrap button,
.bazar-page__topbar button,
.bazar-active-filters button,
#bazar-filter-toggle {
  background: unset;
  color: unset;
  font-weight: unset;
}

/* ── Trigger ────────────────────────────────────────────── */
.bazar-search-trigger-wrap {
  display:flex; justify-content:center; width:100%;
}
.bazar-search-trigger {
  display:flex; align-items:center; gap:10px;
  background:#fff !important; border:1.5px solid var(--bazar-border2) !important;
  border-radius:8px; padding:9px 16px;
  font-family:var(--bazar-font); font-size:.9rem;
  color:var(--bazar-muted) !important; cursor:pointer;
  width:100%; max-width:600px;
  transition:border-color .15s, box-shadow .15s;
  font-weight:400 !important;
}
.bazar-search-trigger:hover {
  border-color:var(--bazar-primary) !important;
  box-shadow:0 0 0 3px var(--bazar-primary-l);
  background:#fff !important;
}

/* ── Overlay (fullscreen) ───────────────────────────────── */
.bazar-overlay {
  position:fixed; inset:0; z-index:99999;
  background:var(--bazar-bg);
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden;
  transition:opacity .18s, visibility .18s;
}
.bazar-overlay.is-open { opacity:1; visibility:visible; }
body.bazar-modal-open { overflow:hidden; }

/* ── Modal container ocupa toda la pantalla ─────────────── */
.bazar-modal__inner {
  width:100vw; max-width:100vw; height:100vh; max-height:100vh;
  background:var(--bazar-bg); border:none; border-radius:0;
  overflow:hidden;
  display:flex; flex-direction:column;
  transform:translateY(8px); opacity:.96;
  transition:transform .2s ease-out, opacity .2s;
}
.bazar-overlay.is-open .bazar-modal__inner { transform:translateY(0); opacity:1; }

/* Modal header */
.bazar-modal__header {
  display:flex; align-items:center; gap:12px;
  padding:.85rem 1.4rem;
  border-bottom:1px solid var(--bazar-border);
  flex-shrink:0; background:var(--bazar-bg);
  min-width:0; width:100%; box-sizing:border-box;
}
.bazar-modal__icon { color:var(--bazar-primary); flex-shrink:0; }
.bazar-modal__input {
  flex:1; background:none; border:none; outline:none;
  min-width:0 !important; width:0 !important; box-sizing:border-box !important;
  font-family:var(--bazar-font); font-size:1.1rem; font-weight:500;
  color:var(--bazar-ink); caret-color:var(--bazar-primary);
}
.bazar-modal__input::placeholder { color:var(--bazar-muted); font-weight:400; }
.bazar-modal__kbd kbd {
  background:var(--bazar-bg3); border:1px solid var(--bazar-border2);
  border-radius:5px; padding:2px 7px; font-size:.7rem; color:var(--bazar-muted);
  font-family:var(--bazar-font);
}
.bazar-modal__close {
  background:var(--bazar-bg3) !important; border:1px solid var(--bazar-border);
  border-radius:7px; color:var(--bazar-muted) !important; width:30px; height:30px;
  min-width:30px !important; padding:0 !important; box-sizing:border-box !important;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:.85rem; transition:all .15s; flex-shrink:0;
  font-weight:400 !important;
}
.bazar-modal__close:hover { background:var(--bazar-primary) !important; color:#fff !important; border-color:var(--bazar-primary); }

/* A1 (dead-clicks Clarity 2026-07-20): en táctil el hint "ESC" no aplica (no hay teclado) y se lleva
   el 39% de los dead clicks del home CO — la gente lo toca creyendo que es el botón de cerrar. Se oculta
   por CAPACIDAD de entrada (pointer:coarse SOLO, no por ancho — corrección Codex; hover:none descartado
   porque matchea entornos desktop sin mouse detectado y escondería el hint a usuarios con teclado) y el cierre real
   crece a área táctil 44×44 (estaba en 30×30, bajo el mínimo). El icono-lupa es decorativo: sin hit-box
   propio (pointer-events:none) — el tap cae al header, que enfoca el input (JS). */
@media (pointer:coarse) {
  .bazar-modal__kbd { display:none; }
  .bazar-modal__close { width:44px; height:44px; font-size:1.05rem; border-radius:9px; }
}
.bazar-modal__icon { pointer-events:none; }

/* Loading */
.bazar-modal__loading {
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem; flex-shrink:0;
}
.bazar-spinner {
  width:26px; height:26px; border-radius:50%;
  border:3px solid var(--bazar-border2);
  border-top-color:var(--bazar-primary);
  animation:bazar-spin .7s linear infinite;
}
@keyframes bazar-spin { to { transform:rotate(360deg); } }

/* Skeleton loaders — placeholders con la forma de la card mientras llega la respuesta.
   Preservan el layout (CLS≈0) y dan feedback instantáneo al teclear. */
.bazar-skel-card { display:flex; flex-direction:column; gap:.4rem; }
.bazar-skel-card .bazar-skel-img {
  aspect-ratio:11/16; width:100%; border-radius:7px;
  background:linear-gradient(100deg,#eef0f4 30%,#f6f7f9 50%,#eef0f4 70%);
  background-size:200% 100%; animation:bazar-shimmer 1.2s ease-in-out infinite;
}
.bazar-skel-card .bazar-skel-line {
  height:10px; border-radius:4px;
  background:linear-gradient(100deg,#eef0f4 30%,#f6f7f9 50%,#eef0f4 70%);
  background-size:200% 100%; animation:bazar-shimmer 1.2s ease-in-out infinite;
}
.bazar-skel-card .bazar-skel-line.w70 { width:70%; }
.bazar-skel-card .bazar-skel-line.w40 { width:40%; }
@keyframes bazar-shimmer { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }
@keyframes bazar-drawer-in { from{transform:translateX(-100%);} to{transform:translateX(0);} }

/* Botón "Filtros" del modal (solo visible en móvil vía @media) */
.bazar-modal-filter-toggle {
  display:none; align-items:center; gap:5px; cursor:pointer;
  background:#fff; border:1.5px solid var(--bazar-border2); border-radius:7px;
  padding:5px 10px; font-size:.78rem; font-weight:600; color:var(--bazar-tinta,#222);
  font-family:var(--bazar-font);
}
.bazar-modal-filter-toggle:hover { border-color:var(--bazar-primary); color:var(--bazar-primary); }

/* Filtro de rango de precio (D2) */
.bazar-price-range { display:flex; flex-direction:column; gap:.5rem; margin-bottom:.4rem; }
.bazar-price-range__inputs { display:flex; align-items:center; gap:6px; }
.bazar-price-range__inputs input {
  width:100%; min-width:0; padding:5px 7px; font-size:.8rem;
  border:1.5px solid var(--bazar-border2); border-radius:6px; font-family:var(--bazar-font);
}
.bazar-price-range__inputs span { color:var(--bazar-muted); font-size:.75rem; }
.bazar-price-range__hint { font-size:.65rem; color:var(--bazar-muted); }

/* Modal body */
.bazar-modal__body { display:flex; flex:1; overflow:hidden; min-height:0; }

/* Modal footer */
.bazar-modal__footer {
  border-top:1px solid var(--bazar-border);
  padding:.45rem 1.4rem;
  display:flex; align-items:center; gap:14px;
  flex-shrink:0; background:var(--bazar-bg2);
}
.bazar-hint { font-size:.68rem; color:var(--bazar-muted); display:flex; align-items:center; gap:4px; }
.bazar-hint kbd {
  background:#fff; border:1px solid var(--bazar-border2);
  border-radius:4px; padding:1px 6px; font-size:.65rem;
  font-family:var(--bazar-font);
}
.bazar-powered {
  margin-left:auto; font-size:.65rem; color:var(--bazar-muted);
  display:flex; align-items:center; gap:5px;
}
.bazar-dot { width:7px; height:7px; border-radius:50%; background:var(--bazar-green); box-shadow:0 0 5px var(--bazar-green); }

/* ── Filters sidebar ────────────────────────────────────── */
.bazar-modal__filters {
  width:260px; flex-shrink:0;
  border-right:1px solid var(--bazar-border);
  padding:1.4rem 1.2rem; overflow-y:auto;
  display:flex; flex-direction:column; gap:1.4rem;
  background:var(--bazar-bg2);
}
.bazar-modal__filters.is-loading,
.bazar-page__sidebar.is-loading { opacity:.35; pointer-events:none; transition:opacity .1s; }

/* Drawer chrome (header con cierre + botón sticky "Ver N resultados" + backdrop). Oculto por
   defecto: solo se activa en móvil (≤768px, ver @media más abajo) — en desktop el sidebar es
   estático y estos elementos no deben ocupar espacio ni verse. */
.bazar-drawer-header,
.bazar-drawer-close,
.bazar-drawer-apply { display:none; }
.bazar-drawer-backdrop {
  display:none;
  position:fixed; inset:0;
  background:rgba(15,18,25,.45);
}
/* z-index un paso debajo del drawer que respalda cada uno (modal .is-open=300, página .is-open=200) */
.bazar-overlay .bazar-drawer-backdrop     { z-index:299; }
.bazar-search-page .bazar-drawer-backdrop { z-index:199; }

/* Facet groups */
.bazar-facet-group { display:flex; flex-direction:column; gap:2px; }
.bazar-facet-title {
  font-size:.62rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.8px; color:var(--bazar-muted); margin-bottom:.35rem;
}
.bazar-facet-item {
  display:flex; align-items:center; gap:8px;
  padding:4px 7px; border-radius:6px; cursor:pointer;
  font-size:.8rem; color:var(--bazar-ink2); transition:background .1s;
  user-select:none;
}
.bazar-facet-item:hover { background:var(--bazar-bg3); }
.bazar-facet-item input[type=checkbox] {
  accent-color:var(--bazar-primary); width:14px; height:14px; flex-shrink:0;
}
.bazar-facet-item span:first-of-type { flex:1; }
.bazar-facet-count {
  font-size:.65rem; color:var(--bazar-muted);
  background:var(--bazar-border); border-radius:10px; padding:1px 6px;
  min-width:20px; text-align:center;
}

/* Total options badge en el título del facet */
.bazar-facet-title {
  display:flex; align-items:center; justify-content:space-between;
}
.bazar-facet-total {
  font-size:.6rem; font-weight:500; color:var(--bazar-muted);
  background:var(--bazar-bg3); padding:1px 6px; border-radius:8px;
  letter-spacing:0; text-transform:none;
}

/* Items ocultos por defecto (cuando facet tiene >FACET_DEFAULT_VISIBLE) */
.bazar-facet-item.is-hidden { display:none; }
.bazar-facet-group.is-expanded .bazar-facet-item.is-hidden { display:flex; }

/* Botón "ver más / ver menos" */
.bazar-facet-toggle {
  background:none; border:none; padding:5px 7px; margin-top:3px;
  font-size:.72rem; font-weight:600; color:var(--bazar-primary);
  cursor:pointer; text-align:left; font-family:var(--bazar-font);
  border-radius:5px; transition:background .12s;
  align-self:flex-start;
}
.bazar-facet-toggle:hover { background:var(--bazar-primary-l); }

/* Toggle "ocultar agotados" en el sortbar del modal */
.bazar-hideoos {
  display:inline-flex; align-items:center; gap:5px; margin-left:auto;
  font-size:.78rem; color:var(--bazar-tinta,#222); cursor:pointer; white-space:nowrap;
}
.bazar-hideoos input { accent-color:var(--bazar-primary); cursor:pointer; }
.bazar-facet-toggle .bazar-facet-toggle__less { display:none; }
.bazar-facet-group.is-expanded .bazar-facet-toggle .bazar-facet-toggle__more { display:none; }
.bazar-facet-group.is-expanded .bazar-facet-toggle .bazar-facet-toggle__less { display:inline; }

/* ── Results panel ──────────────────────────────────────── */
.bazar-modal__results { flex:1; overflow-y:auto; min-width:0; }
#bazar-modal-empty,
#bazar-modal-hits { max-width:1400px; margin:0 auto; }  /* centra grid en pantallas anchas */

/* Empty / initial state */
.bazar-empty { padding:1.2rem 1.6rem; display:flex; flex-direction:column; gap:1.4rem; }
.bazar-empty__section {}
.bazar-section-label {
  font-size:.65rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.8px; color:var(--bazar-muted); margin-bottom:.6rem;
}
.bazar-trending { display:flex; flex-wrap:wrap; gap:6px; }
.bazar-trending-pill {
  background:#fff !important; border:1.5px solid var(--bazar-border2);
  border-radius:20px; padding:5px 13px; font-size:.8rem; color:var(--bazar-ink2) !important;
  cursor:pointer; transition:all .15s; display:flex; align-items:center; gap:5px;
  font-family:var(--bazar-font); font-weight:400 !important;
}
.bazar-trending-pill:hover {
  background:var(--bazar-primary-l) !important; border-color:var(--bazar-primary);
  color:var(--bazar-primary) !important;
}
.bazar-pill__num { font-size:.65rem; color:var(--bazar-muted); font-weight:600; }

/* Recent searches */
.bazar-recent-pills { display:flex; flex-wrap:wrap; gap:6px; }
.bazar-recent-pill {
  background:var(--bazar-bg2); border:1.5px solid var(--bazar-border2);
  border-radius:20px; padding:4px 10px 4px 8px; font-size:.78rem; color:var(--bazar-ink2);
  cursor:pointer; transition:all .15s; display:flex; align-items:center; gap:5px;
  font-family:var(--bazar-font);
}
.bazar-recent-pill:hover { border-color:var(--bazar-primary); color:var(--bazar-primary); }
.bazar-recent-pill svg { flex-shrink:0; color:var(--bazar-muted); }
.bazar-recent-del {
  font-size:.65rem; color:var(--bazar-muted); margin-left:2px;
  padding:0 2px; border-radius:3px; transition:color .1s;
}
.bazar-recent-del:hover { color:var(--bazar-primary); }

/* Featured mini-grid */
.bazar-mini-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.bazar-mini-card {
  text-decoration:none; background:#fff;
  border:1.5px solid var(--bazar-border); border-radius:10px; overflow:hidden;
  transition:all .15s;
}
.bazar-mini-card:hover {
  border-color:var(--bazar-primary); transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(230,57,70,.12);
}
.bazar-mini-card img { width:100%; aspect-ratio:2/3; object-fit:cover; display:block; }
.bazar-mini-card__placeholder {
  aspect-ratio:2/3; display:flex; align-items:center; justify-content:center;
  background:var(--bazar-bg3); color:var(--bazar-muted); font-size:.7rem;
  padding:8px; text-align:center;
}
.bazar-mini-card__info { padding:7px 8px; border-top:1px solid var(--bazar-border); }
.bazar-mini-card__title {
  font-size:.72rem; font-weight:600; color:var(--bazar-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bazar-mini-card__price { font-size:.68rem; color:var(--bazar-muted); margin-top:2px; }

/* Hits header */
#bazar-modal-hits { padding:.6rem 1.2rem 1rem; }
.bazar-modal-hits-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:.85rem; padding-bottom:.5rem;
  border-bottom:1px solid var(--bazar-border);
}
.bazar-hits-count { font-size:.8rem; color:var(--bazar-muted); font-weight:500; }

.bazar-modal-sortbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:.6rem; padding-bottom:.4rem;
  border-bottom:1px solid var(--bazar-border);
}
.bazar-sort--modal {
  font-size:.78rem; padding:5px 24px 5px 9px;
  border:1px solid var(--bazar-border); border-radius:6px;
  background:#fff; color:var(--bazar-ink2); cursor:pointer;
  font-family:var(--bazar-font); min-width:8.5em;
}
.bazar-sort--modal:focus { outline:2px solid var(--bazar-primary); outline-offset:1px; }
.bazar-btn-link {
  /* Reset defensivo contra temas que estilan el <button> global (p.ej. Bookory en .pe
     inflaba esto a padding:17px 31px / line-height chico → el área clickeable quedaba en
     una banda central y el resto del botón "Ver todos" no registraba el click = missclick).
     Estos !important son no-op en simpleshop (cl/mx/co: ya coinciden) y devuelven el botón
     a un link compacto totalmente clickeable en cualquier tema. */
  font-size:.8rem !important; color:var(--bazar-primary); background:none; border:none;
  cursor:pointer; font-family:var(--bazar-font); font-weight:600;
  padding:4px 10px !important; line-height:normal !important;
  min-height:0 !important; height:auto !important;
  box-shadow:none !important; text-transform:none !important; letter-spacing:normal !important;
  border-radius:6px; transition:background .15s;
}
.bazar-btn-link:hover { background:var(--bazar-primary-l); }

/* ── Product Card — diseño minimalista BH 2026 ─────────────── */
.bazar-cards-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:18px;
}

.bazar-card {
  background:#fff;
  border:1px solid #ececef;
  border-radius:10px;
  box-shadow:0 1px 2px rgba(15,15,30,.04);
  transition:transform .2s ease-out, box-shadow .2s ease-out, border-color .2s;
  display:flex; flex-direction:column;
  font-family:var(--bazar-font);
  overflow:hidden;
}
.bazar-card:hover {
  border-color:#d6d6dc;
  box-shadow:0 8px 24px -8px rgba(15,15,30,.18), 0 2px 4px rgba(15,15,30,.06);
  transform:translateY(-3px);
}

.bazar-card__img-wrap { display:block; text-decoration:none; }
.bazar-card__img {
  position:relative; overflow:hidden;
  background:var(--bazar-bg3);
}
.bazar-card__img img {
  width:100%; aspect-ratio:11/16; object-fit:cover;
  display:block; transition:transform .4s ease-out;
}
.bazar-card:hover .bazar-card__img img { transform:scale(1.04); }
.bazar-card__img-ph {
  width:100%; aspect-ratio:11/16;
  background:linear-gradient(135deg, #f4f4f7 0%, #ebebef 100%);
  display:flex; align-items:center; justify-content:center;
  color:var(--bazar-muted); font-size:.7rem;
}

.bazar-card__offer {
  position:absolute; top:10px; left:10px; z-index:2;
  background:var(--bazar-primary); color:#fff;
  font-size:10px; font-weight:700; letter-spacing:.3px;
  padding:5px 10px; line-height:1; border-radius:14px;
  box-shadow:0 4px 10px -2px rgba(230,57,70,.4);
}

/* Stock badge overlay sobre la portada (esquina inferior izquierda con backdrop) */
.bazar-card__stock-overlay {
  position:absolute; left:8px; bottom:8px; z-index:2;
}
.bazar-card__stock-overlay .bazar-badge {
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 2px 6px rgba(15,15,30,.18);
}

.bazar-card__body {
  /* Grid 2 filas: título+meta+precio (crece) / fila inferior stock + botón Añadir (auto). */
  padding:12px 14px 14px;
  display:grid;
  grid-template-rows: 1fr auto;
  gap:8px;
  flex:1;
}
.bazar-card__top    { display:contents; }   /* desenvuelve título/meta/precio en el grid del body */

.bazar-card__series,
.bazar-card__serie {
  font-size:10px; font-weight:600; text-transform:uppercase;
  letter-spacing:.5px; color:var(--bazar-primary); margin-bottom:2px;
  /* permitir wrap en 2 líneas si la serie es larga (ej: "Tian Guan Ci Fu La Bendicion del Oficial...") */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; word-break:break-word;
}
.bazar-card__author {
  font-size:11px; color:var(--bazar-ink2); margin-bottom:4px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; word-break:break-word;
  font-style:italic;
}
.bazar-card__tags {
  display:flex; flex-wrap:wrap; gap:4px; margin-bottom:5px;
}
.bazar-tag {
  font-size:9.5px; font-weight:600; padding:2px 6px;
  border-radius:8px; line-height:1.4;
  white-space:nowrap; text-transform:uppercase; letter-spacing:.3px;
}
.bazar-tag--demo { background:rgba(80,140,255,.10); color:#3260c8; }
.bazar-tag--gen  { background:rgba(120,80,180,.10); color:#5b3a8c; }

/* ── Serie banner ─────────────────────────────────────── */
.bazar-serie-banner {
  display:flex; align-items:center; gap:14px;
  padding:12px 16px; margin-bottom:12px;
  background:linear-gradient(90deg, rgba(230,57,70,.06), rgba(230,57,70,.02));
  border:1px solid var(--bazar-border); border-left:4px solid var(--bazar-primary);
  border-radius:8px; text-decoration:none; transition:all .15s;
}
.bazar-serie-banner:hover { background:linear-gradient(90deg, rgba(230,57,70,.10), rgba(230,57,70,.04)); transform:translateX(2px); }
.bazar-serie-banner__icon { font-size:24px; flex-shrink:0; }
.bazar-serie-banner__body { flex:1; min-width:0; }
.bazar-serie-banner__title {
  font-size:14px; font-weight:700; color:var(--bazar-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bazar-serie-banner__count {
  font-size:11px; font-weight:500; color:var(--bazar-muted);
  background:var(--bazar-bg2); padding:2px 7px; border-radius:10px;
  margin-left:6px; vertical-align:middle;
}
.bazar-serie-banner__meta { font-size:11.5px; color:var(--bazar-muted); margin-top:2px; }
.bazar-serie-banner__cta {
  font-size:12px; font-weight:600; color:var(--bazar-primary);
  white-space:nowrap; flex-shrink:0;
}

/* ── Modal: indicador de carga para scroll infinito ─────────── */
.bazar-modal-loading-more {
  display:flex; justify-content:center; align-items:center;
  padding:18px 0; grid-column:1/-1;
}
.bazar-card__title-link {
  text-decoration:none; display:block;
  /* min-height de 3 líneas (≈ 56.7px con line-height 1.4 × 13.5px).
     Garantiza que el precio quede a la misma altura en todas las cards de la grilla:
     títulos de 1 línea reservan el mismo espacio que los de 3 líneas. */
  min-height:calc(13.5px * 1.4 * 3);
}
.bazar-card__title {
  font-size:13.5px; font-weight:600; line-height:1.4;
  color:var(--bazar-ink); margin:0;
  /* Clamp a 3 líneas (2026-07-10): el catálogo Japón trae títulos de 8+ líneas que
     desalineaban la grilla. El título completo queda en el atributo title/aria del link. */
  word-break:break-word; overflow-wrap:break-word;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.bazar-card__title-link:hover .bazar-card__title { color:var(--bazar-primary); }
.bazar-card__title mark {
  background:rgba(230,57,70,.12); color:var(--bazar-primary);
  border-radius:2px; padding:0 1px; font-weight:700;
}

/* ── Precio: jerarquía clara: tachado pequeño / precio grande / MXN sufijo ─── */
.bazar-card__price {
  font-size:18px; font-weight:700; line-height:1.1; color:var(--bazar-ink);
  display:flex; align-items:baseline; flex-wrap:wrap; gap:4px;
}
.bazar-card__price-currency {
  font-size:11px; font-weight:600; color:var(--bazar-muted);
  letter-spacing:.5px;
}
.bazar-card__reg-price {
  font-size:12px; font-weight:500; color:var(--bazar-muted);
  text-decoration:line-through; display:block; margin-bottom:2px;
  width:100%;
}
/* M2 — "Resérvalo con el 30%": verde de confianza (distinto del rojo de marca, como en el mockup).
   Fix 2026-07-29: pasó de <div> a <button type="button"> (ver bazar-search.js) para que cualquier
   manejador de "tarjeta clicable" lo excluya por diseño (closest('a, button, ...')) en vez de
   competir por el orden de listeners. Reset defensivo de <button> UA-agent + `!important` para
   sobrevivir a `#bazar-modal button { background/color/font-weight: unset }` de arriba (specificity
   de ID le gana a esta clase sola) Y al mismo gotcha del tema de PE (Bookory infla <button> global,
   ver .bazar-btn-link más abajo) — debe verse IDÉNTICO al <div> anterior en las 5 tiendas. */
.bazar-card__reserva {
  display:block; width:100%; margin-top:2px; margin-left: 0; margin-right: 0;
  padding:0 !important; border:none !important; background:none !important;
  font-family:var(--bazar-font) !important; font-size:10.5px !important; font-weight:700 !important;
  color:#1d7a45 !important; line-height:normal !important; text-align:left;
  min-height:0 !important; height:auto !important; box-shadow:none !important;
  text-transform:none !important; letter-spacing:normal !important;
  cursor:pointer; -webkit-appearance:none; appearance:none;
}
.bazar-card__reserva:hover,
.bazar-card__reserva:focus-visible { color:#15602f !important; }
.bazar-card__reserva:focus-visible { outline:2px solid #1d7a45; outline-offset:1px; }

.bazar-card__bottom {
  display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
  gap:8px; margin-top:auto; padding-top:6px;
  border-top:1px solid #f0f0f3;
}
.bazar-card__bottom .bazar-badge {
  width:100%; max-width:100%; min-width:0;
  justify-content:center; text-align:center;
  white-space:normal; overflow-wrap:anywhere; line-height:1.25;
}
.bazar-card__cart {
  display:inline-flex !important; align-items:center; justify-content:center;
  width:100%; min-width:0;
  padding:7px 14px !important;
  background:var(--bazar-primary) !important; color:#fff !important;
  text-decoration:none !important; border-radius:6px !important;
  font-size:11px !important; font-weight:700 !important; font-family:var(--bazar-font) !important;
  letter-spacing:.3px; text-transform:uppercase;
  white-space:nowrap; border:none !important; cursor:pointer;
  transition:background .15s ease-out, box-shadow .15s ease-out;
  flex-shrink:0;
  box-shadow:0 1px 3px rgba(230,57,70,.25);
}
.bazar-card__cart:hover {
  background:#c1121f !important; color:#fff !important;
  box-shadow:0 3px 10px -1px rgba(230,57,70,.45);
}
.bazar-card__cart.bazar-card__cart--stock {
  background:#16794a !important;
  box-shadow:0 1px 3px rgba(22,121,74,.25);
}
.bazar-card__cart.bazar-card__cart--stock:hover {
  background:#11623b !important;
  box-shadow:0 3px 10px -1px rgba(22,121,74,.38);
}
.bazar-card__cart.is-loading {
  opacity:.6; cursor:wait; pointer-events:none;
}
.bazar-card__cart.is-added {
  background:#2e7d32; pointer-events:none;
}
.bazar-card__cart.is-oos {
  background:#9aa0a6 !important; color:#fff !important; cursor:not-allowed;
  box-shadow:none !important; pointer-events:none; opacity:.85;
}

/* M3 — "Avisarme" (BIS Klaviyo, gated por bazar_search_bis_enabled): borde primario, fondo blanco,
   texto primario — como el mockup (distinto del rojo lleno de "Añadir"). */
.bazar-card__cart.bazar-card__cart--avisame {
  background:#fff !important; color:var(--bazar-primary) !important;
  border:1.5px solid var(--bazar-primary) !important; box-shadow:none !important;
}
.bazar-card__cart.bazar-card__cart--avisame:hover {
  background:var(--bazar-primary-l) !important; color:var(--bazar-primary) !important;
}
/* Mini-form inline "Avisarme" (email + Enviar), reemplaza al botón dentro de .bazar-card__bottom. */
.bazar-bis-inline {
  display:flex; align-items:center; gap:5px; flex:1; width:100%; min-width:0;
}
.bazar-bis-form__input {
  flex:1; min-width:0; padding:6px 8px; font-size:11px; line-height:1.2;
  border:1px solid var(--bazar-border2); border-radius:6px;
  font-family:var(--bazar-font); color:var(--bazar-ink2);
}
.bazar-bis-form__input:focus { outline:none; border-color:var(--bazar-primary); }
.bazar-bis-form__submit {
  flex-shrink:0; padding:6px 11px; background:var(--bazar-primary) !important; color:#fff !important;
  border:none !important; border-radius:6px !important; font-size:11px; font-weight:700;
  font-family:var(--bazar-font); cursor:pointer; white-space:nowrap;
}
.bazar-bis-form__submit:hover { background:#c1121f !important; }
.bazar-bis-msg { font-size:11px; font-weight:600; color:#1d7a45; line-height:1.3; }
.bazar-bis-msg.is-error { color:var(--bazar-primary); }
/* PDP (mu-plugin bh-bis-oos-pdp.php): mismo botón/form fuera del contexto de card, con aire propio. */
.bazar-pdp-bis { margin-top:14px; }

/* ── Entity chips (sugerencias serie/autor) — estilos movidos de inline (mobile P0) ── */
.bazar-entity-suggest { display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 12px; }
.bazar-entity-chip {
  border:1px solid #e3e3e3; border-radius:18px; padding:5px 12px; background:#fff;
  cursor:pointer; font-size:13px; line-height:1;
  display:inline-flex; align-items:center; gap:5px;
}
.bazar-entity-chip:hover { border-color:var(--bazar-primary); color:var(--bazar-primary); }
.bazar-entity-chip__c { opacity:.55; }

/* M4 — franja "Colección completa" (boxset/pack de la serie buscada): borde dorado suave + fondo
   cálido claro, como el mockup — visualmente distinta de la card roja de marca (es un upsell, no
   un resultado más) pero dentro del mismo sistema (misma tipografía, mismos radios). */
.bazar-boxset-banner {
  display:flex; align-items:center; gap:10px; margin:0 0 12px; padding:9px 12px;
  border:1.5px solid #f3d9a4; border-radius:10px;
  background:linear-gradient(120deg,#fff8ea,#fff);
  text-decoration:none; transition:border-color .15s, transform .15s;
}
.bazar-boxset-banner:hover { border-color:#e6bc63; transform:translateY(-1px); }
.bazar-boxset-banner__cover {
  flex-shrink:0; width:40px; height:54px; border-radius:4px; overflow:hidden;
  background:var(--bazar-bg3);
}
.bazar-boxset-banner__cover img { width:100%; height:100%; object-fit:cover; display:block; }
.bazar-boxset-banner__ph { width:100%; height:100%; }
.bazar-boxset-banner__body { min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; }
.bazar-boxset-banner__label {
  font-size:12.5px; font-weight:700; color:var(--bazar-ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bazar-boxset-banner__price { font-size:12.5px; font-weight:800; color:#9a6d13; }

/* ── Stock badges ───────────────────────────────────────── */
.bazar-badge {
  font-size:9.5px; font-weight:700; padding:3px 9px; border-radius:12px;
  text-transform:uppercase; letter-spacing:.4px; display:inline-flex;
  align-items:center; flex-shrink:0; line-height:1;
  cursor:pointer; /* v2.4.19: la zona inferior de la card navega a la ficha (anti dead-clicks) */
}
.bazar-badge--stock      { background:rgba(46,204,113,.12); color:#1a9e52; border:1px solid rgba(46,204,113,.3); }
.bazar-badge--pedido     { background:rgba(90,150,255,.10); color:#2c5fc4; border:1px solid rgba(90,150,255,.25); }
.bazar-badge--preventa   { background:rgba(245,159,0,.12);  color:#c47c00; border:1px solid rgba(245,159,0,.3); }
.bazar-badge--nostock    { background:var(--bazar-bg3); color:var(--bazar-muted); border:1px solid var(--bazar-border2); }
.bazar-badge--disponible { background:rgba(46,204,113,.12); color:#1a9e52; border:1px solid rgba(46,204,113,.3); }
.bazar-badge--agotado    { background:var(--bazar-bg3); color:var(--bazar-muted); border:1px solid var(--bazar-border2); }

/* OT-017 — promesa estructurada. Estado y plazo son elementos separados:
   el texto ETA nunca decide el color ni puede convertir stock en "A pedido". */
.bazar-card__immediate {
  position:absolute; top:9px; left:9px; z-index:3;
  display:inline-flex; align-items:center; gap:4px;
  max-width:calc(100% - 18px); padding:5px 8px;
  border:1px solid #a8dec1; border-radius:7px;
  background:rgba(234,247,240,.96); color:#16794a;
  font-size:9px; font-weight:850; line-height:1.2;
  letter-spacing:.035em; text-transform:uppercase;
  box-shadow:0 2px 7px rgba(18,100,61,.10);
}
.bazar-card__immediate svg {
  width:13px; height:13px; flex:none; fill:none; stroke:currentColor;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
}
.bazar-promise {
  display:flex; align-items:flex-start; gap:7px;
  width:100%; max-width:100%; min-width:0; padding:7px 8px;
  border:1px solid; border-radius:7px; text-align:left;
}
.bazar-promise__icon{flex:0 0 15px;width:15px;height:15px;margin-top:1px}
.bazar-promise__icon svg {
  display:block; width:15px; height:15px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.bazar-promise__body{display:flex;flex-direction:column;gap:1px;min-width:0}
.bazar-promise strong {
  font-size:9.5px; font-weight:850; line-height:1.2;
  letter-spacing:.025em; text-transform:uppercase;
}
.bazar-promise small {
  font-size:9.5px; font-weight:550; line-height:1.3;
  overflow-wrap:anywhere;
}
.bazar-promise--stock{background:#eaf7f0;border-color:#a8dec1;color:#16794a}
.bazar-promise--pedido{background:#edf4ff;border-color:#b8cef3;color:#245bb8}
.bazar-promise--preventa{background:#fff7e2;border-color:#ebcf8b;color:#8a5a00}
.bazar-promise--nostock{background:#f1f2f4;border-color:#d4d7dc;color:#626975}

/* No results */
.bazar-no-results {
  padding:2.5rem 2rem; text-align:center;
  color:var(--bazar-ink2); font-family:var(--bazar-font);
}
.bazar-no-results p { margin:.5rem 0; }
.bazar-no-results strong { color:var(--bazar-ink); }
.bazar-no-results-tip { font-size:.82rem; color:var(--bazar-muted); }
.bazar-no-results__recents {
  font-size:.8rem; color:var(--bazar-muted); margin-top:1rem;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px;
}

/* ── FULL SEARCH PAGE ───────────────────────────────────── */
body.bazar-search-results-page {
  overflow-x:clip;
}
body.bazar-search-results-page footer {
  overflow-x:clip;
}
/* /buscar/ usa un shell único y compacto. Conserva la franja comercial de cada marca, pero evita
   encadenar el header completo del tema con un segundo header de búsqueda (especialmente alto en
   Bookory/PE). El shell propio mantiene marca, búsqueda, regreso, cuenta y carrito. */
body.bazar-search-results-page > header.st-header,
body.bazar-search-results-page > #bk-header,
body.bazar-search-results-page > #bh-trust-bar,
body.bazar-search-results-page #page > #masthead,
body.bazar-search-results-page #page > .breadcrumb-wrap { display:none !important; }
body.bazar-search-results-page #page > #content { margin-top:0 !important; padding-top:0 !important; }
.bazar-search-page {
  display:flex; flex-direction:column;
  background:var(--bazar-bg); color:var(--bazar-ink);
  font-family:var(--bazar-font);
}
/* El MU de seguridad de PE staging inyecta una franja fija de 27px. Sólo ese entorno recibe
   compensación para que no tape marca, búsqueda ni acciones durante la validación. */
body.bazar-search-results-page.bh-stage-site-pe .bazar-search-page { padding-top:27px; }
.bazar-page__header {
  background:#fff; border-bottom:1px solid var(--bazar-border);
  padding:0 1.5rem; height:60px;
  display:flex; align-items:center; gap:1.2rem; flex-shrink:0;
  position:relative; z-index:1;  /* el header sticky del tema queda visible encima */
  box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.bazar-page__logo {
  font-weight:800; font-size:1.05rem; color:var(--bazar-primary);
  text-decoration:none; white-space:nowrap;
}
.bazar-page__mobile-nav { display:none; }
.bazar-page__desktop-actions { display:flex; align-items:center; gap:6px; margin-left:auto; }
.bazar-page__icon-link {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; flex:0 0 40px; border:1px solid var(--bazar-border);
  border-radius:9px; background:#fff; color:var(--bazar-ink2); text-decoration:none;
}
.bazar-page__cart-count {
  position:absolute; top:-4px; right:-3px; min-width:18px; height:18px; padding:0 4px;
  display:inline-flex; align-items:center; justify-content:center; border-radius:999px;
  background:var(--bazar-primary); color:#fff; border:2px solid #fff;
  font-size:10px; font-weight:800; line-height:1;
}
.bazar-page__cart-count.is-empty { display:none; }
.bazar-page__icon-link:focus-visible { outline:2px solid var(--bazar-primary); outline-offset:2px; }
.bazar-store-logo-fallback {
  display:inline-flex; align-items:center; min-height:44px;
  color:#fff; font:800 1rem/1.1 var(--bazar-font); text-decoration:none;
}
.custom-logo-link.is-bazar-logo-fallback > img { display:none !important; }
.bazar-page__searchbox {
  flex:1; max-width:560px;
  background:#fff; border:1.5px solid var(--bazar-border2);
  border-radius:8px; display:flex; align-items:center; gap:10px;
  padding:0 1rem; height:40px; transition:border-color .15s, box-shadow .15s;
}
.bazar-page__searchbox:focus-within {
  border-color:var(--bazar-primary);
  box-shadow:0 0 0 3px var(--bazar-primary-l);
}
.bazar-page__searchbox svg { color:var(--bazar-muted); flex-shrink:0; }
.bazar-page__searchbox input {
  flex:1; background:none; border:none; outline:none;
  font-family:var(--bazar-font); font-size:.95rem;
  color:var(--bazar-ink); caret-color:var(--bazar-primary);
}
.bazar-page__searchbox input::placeholder { color:var(--bazar-muted); }
.bazar-page__submit {
  align-self:stretch; margin:-1px -1px -1px 0; padding:0 16px;
  border:0; border-radius:0 8px 8px 0;
  background:var(--bazar-primary); color:#fff;
  font-family:var(--bazar-font); font-size:.78rem; font-weight:750;
  cursor:pointer; white-space:nowrap;
}
.bazar-page__submit:hover { background:#c1121f; }
.bazar-page__submit:focus-visible { outline:3px solid var(--bazar-primary-l); outline-offset:2px; }
.bazar-page__back {
  font-size:.8rem; color:var(--bazar-muted); text-decoration:none;
  white-space:nowrap; transition:color .15s;
}
.bazar-page__back:hover { color:var(--bazar-primary); }

/* Mobile filter button */
#bazar-filter-toggle {
  display:none; align-items:center; gap:6px;
  padding:7px 14px; border:1.5px solid var(--bazar-border2);
  border-radius:7px; background:#fff; font-family:var(--bazar-font);
  font-size:.82rem; color:var(--bazar-ink2); cursor:pointer;
  transition:border-color .15s;
}
#bazar-filter-toggle.is-active { border-color:var(--bazar-primary); color:var(--bazar-primary); }

.bazar-page__body { display:flex; align-items:flex-start; }

.bazar-page__sidebar {
  width:230px; flex-shrink:0;
  border-right:1px solid var(--bazar-border);
  padding:1.2rem;
  display:flex; flex-direction:column; gap:1.4rem;
  background:var(--bazar-bg2);
  position:sticky; top:0;  /* sticky al scrollear el body, debajo del header del tema */
  max-height:calc(100vh - 80px); overflow-y:auto;
}

.bazar-page__main {
  flex:1; min-width:0;
  padding:1.5rem 2rem; display:flex; flex-direction:column; gap:1rem;
}
.bazar-page__title {
  margin:0; color:var(--bazar-ink);
  font-size:clamp(1.05rem,2vw,1.35rem); line-height:1.25; font-weight:750;
  overflow-wrap:anywhere;
}

.bazar-page__topbar {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px 14px;
}
.bazar-page__meta { font-size:.85rem; color:var(--bazar-muted); }
/* Algunos temas (Bunka/Bookory) redefinen --bazar-muted a blanco para su header oscuro.
   El contador vive sobre la superficie clara del buscador y necesita contraste propio. */
.bazar-search-page #bazar-page-count { color:#5f6673 !important; }
.bazar-page__controls { display:flex; align-items:center; gap:8px; }

.bazar-sort {
  background:#fff; border:1.5px solid var(--bazar-border2);
  border-radius:7px; padding:6px 12px; font-size:.8rem; color:var(--bazar-ink2);
  font-family:var(--bazar-font); outline:none; cursor:pointer;
  transition:border-color .15s; min-width:8.5em;
}
.bazar-sort:focus { border-color:var(--bazar-primary); }

.bazar-view-toggle {
  display:flex; background:#fff;
  border:1.5px solid var(--bazar-border2); border-radius:7px; overflow:hidden;
}
.bazar-view-btn {
  padding:6px 10px; font-size:.9rem; cursor:pointer;
  color:var(--bazar-muted); transition:all .12s;
  border:none; background:none;
}
.bazar-view-btn.is-active { background:var(--bazar-primary); color:#fff; }

.bazar-active-filters { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.bazar-active-filters:empty { display:none; }
.bazar-active-tag {
  background:var(--bazar-primary-l); border:1px solid rgba(230,57,70,.25);
  border-radius:20px; padding:3px 10px; font-size:.75rem; color:var(--bazar-primary);
  display:flex; align-items:center; gap:5px;
}
.bazar-tag-remove {
  background:none; border:none; cursor:pointer;
  color:var(--bazar-primary); font-size:.8rem; padding:0; line-height:1;
}
.bazar-clear-filters {
  border:0; background:none; color:var(--bazar-ink2); padding:5px 7px;
  font-family:var(--bazar-font); font-size:.76rem; font-weight:650;
  text-decoration:underline; text-underline-offset:2px; cursor:pointer;
}
.bazar-clear-filters:hover { color:var(--bazar-primary); }
.bazar-no-results__clear {
  margin-top:.75rem; min-height:44px; padding:9px 14px;
  border:1px solid var(--bazar-primary); border-radius:8px;
  color:var(--bazar-primary); text-decoration:none;
}
.bazar-quick-filters {
  display:flex; align-items:center; gap:7px; overflow-x:auto; flex:1 1 320px;
  padding:1px 0 3px; scrollbar-width:none;
}
.bazar-quick-filters[hidden] { display:none; }
.bazar-quick-filters::-webkit-scrollbar { display:none; }
.bazar-quick-filter {
  display:inline-flex; align-items:center; gap:6px; min-height:38px; flex:none;
  padding:7px 11px; border:1px solid var(--bazar-border2); border-radius:999px;
  background:#fff; color:var(--bazar-ink2); font-family:var(--bazar-font);
  font-size:.77rem; font-weight:650; cursor:pointer;
}
.bazar-quick-filter > span:last-child { color:var(--bazar-muted); font-size:.7rem; }
.bazar-quick-filter.is-active {
  border-color:var(--bazar-primary); background:var(--bazar-primary-l); color:var(--bazar-primary);
}
.bazar-quick-filter__dot {
  width:8px; height:8px; border-radius:50%; background:#20a464;
  box-shadow:0 0 0 3px rgba(32,164,100,.12);
}

/* Page grid */
.bazar-page__grid { min-height:200px; }
.bazar-page__grid.is-loading { opacity:.5; pointer-events:none; }

/* Shared grid for both modal and page */
.bazar-cards-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:14px;
}
body.bazar-search-results-page .bazar-page__grid > .bazar-cards-grid {
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
}
/* List view on page */
.bazar-cards-grid--list {
  grid-template-columns:1fr !important;
  gap:8px;
}
.bazar-cards-grid--list .bazar-card {
  flex-direction:row; max-height:110px;
}
.bazar-cards-grid--list .bazar-card__img-wrap { flex-shrink:0; width:75px; }
.bazar-cards-grid--list .bazar-card__img img { aspect-ratio:11/16; height:110px; width:75px; object-fit:cover; }
.bazar-cards-grid--list .bazar-card__body { padding:8px 12px; }
.bazar-cards-grid--list .bazar-card__price { font-size:15px; }

/* Infinite scroll sentinel */
.bazar-sentinel {
  height:60px; display:flex; align-items:center; justify-content:center;
  color:var(--bazar-muted); font-size:.8rem; font-family:var(--bazar-font);
}
.bazar-sentinel.is-visible::after {
  content:'';
  display:block; width:28px; height:28px; border-radius:50%;
  border:3px solid var(--bazar-border2);
  border-top-color:var(--bazar-primary);
  animation:bazar-spin .7s linear infinite;
}

/* ── Scrollbars ─────────────────────────────────────────── */
.bazar-modal__results::-webkit-scrollbar,
.bazar-modal__filters::-webkit-scrollbar,
.bazar-page__sidebar::-webkit-scrollbar,
.bazar-page__main::-webkit-scrollbar { width:5px; }
.bazar-modal__results::-webkit-scrollbar-thumb,
.bazar-modal__filters::-webkit-scrollbar-thumb,
.bazar-page__sidebar::-webkit-scrollbar-thumb,
.bazar-page__main::-webkit-scrollbar-thumb { background:var(--bazar-border2); border-radius:4px; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1200px) {
  .bazar-cards-grid { grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
  body.bazar-search-results-page .bazar-page__grid > .bazar-cards-grid { grid-template-columns:repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  /* Modal ya es fullscreen por default; no se requieren overrides */
  .bazar-modal__filters { width:220px; }
  body.bazar-search-results-page .bazar-page__grid > .bazar-cards-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  /* Modal: filtros como DRAWER deslizante, accesible desde el botón "Filtros" del sortbar */
  .bazar-modal__filters { display:none; }
  .bazar-modal__filters.is-open {
    display:flex; position:fixed; left:0; top:0; bottom:0;
    width:82%; max-width:320px; z-index:300; background:#fff;
    box-shadow:4px 0 24px rgba(0,0,0,.18); overflow-y:auto;
    padding:1rem 1rem 5rem; animation:bazar-drawer-in .2s ease;
  }
  .bazar-modal-filter-toggle { display:inline-flex !important; }
  .bazar-modal__inner   { height:100dvh; max-height:100dvh; }
  .bazar-modal-hits-grid,
  .bazar-cards-grid { grid-template-columns:repeat(2, 1fr); gap:10px; }
  .bazar-mini-grid { grid-template-columns:repeat(2,1fr); }
  .bazar-modal__footer { display:none; }

  /* ── Mobile P0 (Fase 1): anti-zoom iOS + touch targets ─────────────────────
     iOS hace zoom al enfocar un input/select con font <16px → forzar 16px.
     Acciones principales con área táctil >=44px (recomendación WCAG). */
  .bazar-overlay input, .bazar-overlay select, .bazar-overlay textarea,
  .bazar-search-page input, .bazar-search-page select, .bazar-search-page textarea,
  .bazar-sort, .bazar-sort--modal, .bazar-price-input { font-size:16px !important; }
  /* Sortbar del modal: en pantallas angostas (390px) el label "Ocultar agotados" se
     cortaba junto al select de orden — permitir que la barra pase a 2 líneas. */
  .bazar-modal-sortbar { flex-wrap:wrap; row-gap:6px; }
  .bazar-modal-sortbar .bazar-hits-count {
    flex:1 1 48px; min-width:0; overflow:hidden; text-overflow:ellipsis;
    white-space:nowrap; text-align:center;
  }
  .bazar-modal-sortbar .bazar-sort--modal {
    flex:0 1 138px; width:min(36vw, 138px); min-width:112px;
  }
  .bazar-modal-sortbar .bazar-hideoos {
    flex:1 0 100%; margin-left:0; justify-content:flex-start !important;
  }
  .bazar-card__cart { min-height:44px; }
  .bazar-entity-chip { min-height:44px; }
  .bazar-recent-pill, .bazar-trending-pill { min-height:44px; }
  .bazar-modal__close,
  .bazar-modal-filter-toggle,
  #bazar-filter-toggle,
  .bazar-view-btn,
  .bazar-btn-link,
  .bazar-card__reserva,
  .bazar-quick-filter,
  .bazar-sort,
  .bazar-sort--modal,
  .bazar-hideoos {
    min-height:44px !important;
  }
  .bazar-modal__close,
  .bazar-view-btn { min-width:44px !important; }
  .bazar-modal__close { width:44px !important; }
  .bazar-modal-filter-toggle,
  #bazar-filter-toggle,
  .bazar-btn-link,
  .bazar-card__reserva,
  .bazar-hideoos {
    display:inline-flex !important; align-items:center; justify-content:center;
  }
  .bazar-card__reserva { text-align:center; padding:7px 4px !important; }

  /* Page: sidebar como drawer lateral */
  .bazar-page__body { position:relative; }
  .bazar-page__sidebar {
    display:none; /* JS añade is-open */
  }
  .bazar-page__sidebar.is-open {
    display:flex;
    position:fixed; left:0; top:60px; bottom:0;
    width:280px; z-index:200;
    border-right:1px solid var(--bazar-border);
    box-shadow:4px 0 20px rgba(0,0,0,.12);
  }
  #bazar-filter-toggle { display:flex; }
  .bazar-page__header {
    height:auto; min-height:98px; padding:.4rem .75rem .5rem; gap:.4rem;
    flex-wrap:wrap;
  }
  .bazar-page__logo { display:none; }
  .bazar-page__desktop-actions { display:none; }
  .bazar-page__mobile-nav {
    order:0; display:flex; align-items:center; width:100%; min-width:0;
    min-height:44px; gap:4px;
  }
  .bazar-page__mobile-back,
  .bazar-page__icon-link {
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; flex:0 0 44px; border-radius:9px;
    color:var(--bazar-ink2); text-decoration:none; background:var(--bazar-bg2);
  }
  .bazar-page__mobile-back { font-size:20px; line-height:1; }
  .bazar-page__mobile-brand {
    flex:1 1 auto; min-width:0; padding:0 6px; overflow:hidden; text-overflow:ellipsis;
    white-space:nowrap; color:var(--bazar-primary); font-size:.88rem; font-weight:800;
    text-decoration:none;
  }
  .bazar-page__mobile-actions { display:flex; align-items:center; gap:4px; flex:none; }
  .bazar-page__icon-link { background:#fff; }
  .bazar-page__mobile-back:focus-visible,
  .bazar-page__mobile-brand:focus-visible,
  .bazar-page__icon-link:focus-visible { outline:2px solid var(--bazar-primary); outline-offset:2px; }
  .bazar-page__searchbox {
    order:1; flex:1 1 100%; width:100%; max-width:none; min-width:0; height:44px;
    padding-left:.75rem; padding-right:0;
  }
  .bazar-page__searchbox input { min-width:0; }
  .bazar-page__back { display:none; }
  .bazar-page__main { padding:.75rem; gap:.65rem; }
  .bazar-page__topbar > .bazar-quick-filters { order:3; flex:1 0 100%; }
  .bazar-cards-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  body.bazar-search-results-page .bazar-page__grid > .bazar-cards-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .bazar-cards-grid--list { grid-template-columns:1fr !important; }
}

@media (max-width: 768px) {
  /* Drawer de filtros (modal + página): header con botón cerrar, backdrop que bloquea taps al
     contenido de abajo (antes atravesaban a las cards → navegación accidental a productos), y
     botón sticky "Ver N resultados" al pie para cerrar el drawer (el botón "Filtros" que lo abre
     queda tapado por el propio drawer mientras está abierto — el usuario quedaba atrapado). */
  .bazar-modal__filters.is-open,
  .bazar-page__sidebar.is-open { padding-bottom:0; }
  .bazar-drawer-header {
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    margin-bottom:.8rem; padding-bottom:.6rem;
    border-bottom:1px solid var(--bazar-border);
  }
  .bazar-drawer-header__title { font-weight:700; font-size:1rem; color:var(--bazar-ink); }
  .bazar-drawer-close {
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; flex-shrink:0;
    background:var(--bazar-bg3) !important; border:1px solid var(--bazar-border);
    border-radius:8px; color:var(--bazar-ink2) !important; cursor:pointer;
    font-size:1rem; font-weight:400 !important;
  }
  .bazar-drawer-close:hover,
  .bazar-drawer-close:active { background:var(--bazar-primary) !important; color:#fff !important; border-color:var(--bazar-primary); }
  .bazar-drawer-apply {
    display:block; position:sticky; bottom:0; width:100%;
    margin-top:.8rem; height:48px; line-height:48px; padding:0;
    background:var(--bazar-primary) !important; color:#fff !important;
    border:none; border-radius:8px; font-weight:700; font-size:.9rem;
    font-family:var(--bazar-font); cursor:pointer; text-align:center;
  }
  .bazar-drawer-apply:active { background:var(--bazar-primary-h) !important; }
  .bazar-drawer-backdrop.is-open { display:block; }
}

@media (max-width: 480px) {
  .bazar-cards-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
  .bazar-card__price { font-size:15px; }
  .bazar-card__body { padding:8px 8px 10px; }
  .bazar-card__title-link { min-height:calc(12.5px * 1.35 * 2); }
  .bazar-card__title { font-size:12.5px; line-height:1.35; -webkit-line-clamp:2; }
  .bazar-card__cart { padding-left:5px !important; padding-right:5px !important; font-size:9.5px !important; letter-spacing:.12px; }
  .bazar-page__title { font-size:1rem; }
  .bazar-page__topbar { gap:6px; }
  .bazar-page__controls { gap:5px; }
  .bazar-view-toggle { display:none; }
}

/* S7 — Autocomplete predictivo (dropdown de sugerencias de términos bajo el input) */
.bazar-suggest {
  position:absolute; top:100%; left:0; right:auto; width:100%; max-width:560px; z-index:60;
  background:var(--bazar-bg,#fff); border:1px solid var(--bazar-bg3,#f1f3f5);
  border-radius:0 0 12px 12px; box-shadow:0 10px 28px rgba(0,0,0,.12);
  max-height:340px; overflow-y:auto; display:none; margin-top:2px;
}
.bazar-suggest.is-open { display:block; }
.bazar-suggest__item {
  display:flex; align-items:center; gap:10px; width:100%;
  padding:11px 16px; border:0; background:none; cursor:pointer;
  font-size:15px; line-height:1.2; color:var(--bazar-ink,#1a1a2e); text-align:left;
}
.bazar-suggest__item:hover, .bazar-suggest__item:focus, .bazar-suggest__item.is-active { background:var(--bazar-bg2,#f8f9fa); }
.bazar-suggest__item svg { color:#9aa1ad; flex-shrink:0; }
.bazar-suggest__item strong { color:var(--bazar-primary,#e63946); font-weight:700; }
.bazar-suggest__group-label {
  padding:8px 16px 5px; color:var(--bazar-muted,#777);
  font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}

/* M1 — mini-cards de producto arriba de los términos (portada 34x48, título 1 línea + ellipsis,
   precio en color primario). Reusa look de .bazar-suggest__item (misma fila, mismo hover). */
.bazar-suggest__product {
  display:flex; align-items:center; gap:10px; width:100%; box-sizing:border-box;
  padding:8px 16px; text-decoration:none; cursor:pointer;
  border-bottom:1px solid var(--bazar-bg3,#f1f3f5);
}
.bazar-suggest__product:hover, .bazar-suggest__product:focus { background:var(--bazar-bg2,#f8f9fa); }
.bazar-suggest__product-cover {
  flex-shrink:0; width:34px; height:48px; border-radius:4px; overflow:hidden;
  background:var(--bazar-bg3,#f1f3f5); display:block;
}
.bazar-suggest__product-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.bazar-suggest__product-ph { width:100%; height:100%; }
.bazar-suggest__product-info { min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
.bazar-suggest__product-title {
  font-size:12.5px; font-weight:600; line-height:1.25; color:var(--bazar-ink,#1a1a2e);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bazar-suggest__product-price { font-size:12.5px; font-weight:800; color:var(--bazar-primary,#e63946); }

/* Autocomplete móvil compacto (S7): con el teclado virtual abierto (~350px de alto) el dropdown
   de 274px tapaba TODO el área útil → limitar sugerencias visibles y scrollear el resto (el
   JS además lo cierra al scrollear resultados o tocar fuera). Selector con ID + declarado DESPUÉS
   de la base .bazar-suggest de arriba: la primera versión de esta regla (misma especificidad,
   antes en el archivo) perdía la cascada y el computed seguía en 340px.
   210px (antes 156px, M1 2026-07-11): con las 2 mini-cards de producto arriba, 156px dejaba los
   términos casi sin espacio; 210px entra en el mismo teclado virtual sin volver a tapar resultados. */
@media (max-width: 768px) {
  #bazar-modal .bazar-suggest { max-height:210px; overflow-y:auto; }
}

/* S13 — Mini-buscador dentro de facets largos */
.bazar-facet-search {
  width:100%; box-sizing:border-box; margin:4px 0 8px;
  padding:7px 10px; font-size:13px; line-height:1.2;
  border:1px solid var(--bazar-bg3,#f1f3f5); border-radius:8px;
  background:var(--bazar-bg2,#f8f9fa); color:var(--bazar-ink,#1a1a2e);
}
.bazar-facet-search:focus { outline:none; border-color:var(--bazar-primary,#e63946); background:var(--bazar-bg,#fff); }

/* P1 (2026-07-17) — fila "Refina tu búsqueda": continuaciones históricas exitosas en queries amplias */
.bazar-refine-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px;padding:10px 12px;background:#f6f7fb;border-radius:10px}
.bazar-refine-row__label{font-size:.85rem;font-weight:600;color:#5d6575}
.bazar-refine-pill{font-size:16px;line-height:1;padding:10px 14px;min-height:44px;border:1px solid #d9dce6;border-radius:999px;background:#fff;color:#2a2f3a;cursor:pointer;transition:border-color .15s}
.bazar-refine-pill:hover{border-color:var(--bazar-primary,#e63946);color:var(--bazar-primary,#e63946)}

/* B2 (2026-07-17) — chip de intención de taxonomía (bl/yuri/tl interpretado como faceta) */
.bazar-taxonomy-note{font-size:.9rem;color:#5d6575;background:#f0f2f8;border-radius:8px;padding:8px 12px;margin:0 0 12px}
.bazar-taxonomy-note strong{color:#2a2f3a}

/* P2 "Explora por serie" ELIMINADO 2026-07-17 (pilotado en CL y descartado, veredicto Codex) */