/* visor.css — Ficha de producto con galería. La usan la tienda y bajo-pedido. */

/* ─────────── Visor ─────────── */
.bp-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.bp-modal[hidden] { display: none !important; }
.bp-modal-fondo { position: absolute; inset: 0; background: rgba(30,18,8,.72); backdrop-filter: blur(3px); }
.bp-modal-caja {
  position: relative; z-index: 2; background: #fff; border-radius: 18px; overflow: hidden;
  width: min(880px, 100%); max-height: 92vh; display: grid; grid-template-columns: 1.1fr .9fr;
  box-shadow: 0 30px 70px rgba(0,0,0,.4);
}
@media (max-width: 760px) { .bp-modal-caja { grid-template-columns: 1fr; max-height: 94vh; overflow-y: auto; } }
.bp-modal-x {
  position: absolute; top: .6rem; right: .7rem; z-index: 5;
  width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.9); color: #2b1a0e; font-size: .9rem; box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.bp-modal-visor { position: relative; background: #f7efdd; display: flex; flex-direction: column; }
#bp-modal-foto { width: 100%; flex: 1; min-height: 260px; max-height: 62vh; object-fit: contain; background: #fff; }
.bp-nav {
  position: absolute; top: 45%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.92); color: #2b1a0e; font-size: 1.3rem; line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.bp-prev { left: .5rem; } .bp-next { right: .5rem; }
.bp-nav[hidden] { display: none !important; }
.bp-miniaturas { display: flex; gap: .35rem; padding: .5rem; overflow-x: auto; }
.bp-miniaturas img {
  width: 46px; height: 46px; object-fit: cover; border-radius: 7px; cursor: pointer;
  border: 2px solid transparent; opacity: .7;
}
.bp-miniaturas img.activa { border-color: var(--miel, #f2a71b); opacity: 1; }
.bp-modal-datos { padding: 1.6rem 1.4rem 1.2rem; display: flex; flex-direction: column; gap: .4rem; overflow-y: auto; }
.bp-modal-datos h2 { font-family: var(--fuente-display, serif); font-size: 1.3rem; line-height: 1.2; color: var(--cafe, #2b1a0e); }
.bp-modal-grupo { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #a8987c; }
.bp-modal-desc { font-size: .88rem; line-height: 1.5; color: #6b5b45; white-space: pre-line; flex: 1; }
.bp-modal-pie { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: .8rem; border-top: 1px solid #f0e6d4; }
.bp-modal-pie .bp-precio { font-size: 1.5rem; }

/* ─────────── Buscador y contadores de la tienda ─────────── */
.buscador-tienda { position: relative; display: flex; align-items: center; max-width: 30rem; margin: 0 auto 1rem; }
.buscador-tienda svg { position: absolute; left: .9rem; color: #a8987c; pointer-events: none; }
.buscador-tienda input {
  width: 100%; padding: .66rem 2.4rem .66rem 2.5rem;
  border: 1.5px solid #e0d3b8; border-radius: 999px; background: #fff;
  font-family: inherit; font-size: .95rem; outline: none; color: var(--cafe, #2b1a0e);
}
.buscador-tienda input:focus { border-color: var(--miel, #f2a71b); }
#limpiar-tienda {
  position: absolute; right: .7rem; border: none; background: #efe4cd; cursor: pointer;
  width: 22px; height: 22px; border-radius: 50%; color: #7a6a52; font-size: .72rem; line-height: 1;
}
.filtro b { opacity: .5; font-weight: 600; margin-left: .25rem; font-size: .9em; }
.filtro.activo b { opacity: .85; }
.conteo-tienda { font-size: .8rem; color: #8a7a60; margin-bottom: 1rem; text-align: center; }
.sin-resultados { text-align: center; color: #8a7a60; padding: 2.5rem 1rem; }

/* La tarjeta ahora abre la ficha: se avisa con el cursor y el foco. */
.producto-card { cursor: pointer; }
.producto-card:focus-visible { outline: 2px solid var(--miel, #f2a71b); outline-offset: 3px; }