/* ============================================================
   LPB Product Catalog — estilo Reels/Instagram (mismo lenguaje
   visual que lpb-film-gallery), con sistema de "consulta general":
   agregar productos, ver carrito flotante, formulario final con
   nombre obligatorio antes de enviar.
   ============================================================ */

.lpb-pc,
.lpb-pc *{
  box-sizing:border-box;
}
.lpb-pc figure,
.lpb-pc figcaption{
  margin:0;
}

.lpb-pc-tab{
  position:fixed;
  right:0;
  top:var(--lpc-tab-top,50%);
  transform:translateY(-50%);
  z-index:2147482000;
  border:0;
  border-radius:12px 0 0 12px;
  padding:14px 10px;
  background:var(--lpc-accent,#111827);
  color:#fff;
  writing-mode:vertical-rl;
  font:800 13px/1.1 system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:.04em;
  cursor:pointer;
  box-shadow:-6px 8px 24px rgba(0,0,0,.18);
}
.lpb-pc-tab:hover{padding-right:16px}

/* Overlay del catálogo, pantalla completa, negro */
.lpb-pc-modal{
  position:fixed;
  inset:0;
  z-index:2147483200;
  display:none;
  background:#000;
  color:#fff;
}
.lpb-pc-modal.is-open{display:block}

.lpb-pc-close{
  position:fixed;
  right:16px;
  top:16px;
  z-index:6;
  width:40px;height:40px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  color:#111;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.lpb-pc-close:hover{background:#fff}

/* Menú hamburguesa: filtro de categoría, solo se agrega si hay 2+ categorías */
.lpb-pc-menu-btn{
  position:fixed;
  left:16px;
  top:16px;
  z-index:6;
  width:40px;height:40px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  color:#111;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.lpb-pc-menu-btn:hover{background:#fff}
.lpb-pc-menu-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
.lpb-pc-menu{
  position:fixed;
  left:16px;
  top:64px;
  z-index:7;
  display:none;
  flex-direction:column;
  gap:4px;
  min-width:160px;
  padding:8px;
  border-radius:14px;
  background:rgba(17,24,39,.94);
  box-shadow:0 12px 30px rgba(0,0,0,.4);
}
.lpb-pc-menu.is-open{display:flex}
.lpb-pc-menu-item{
  border:0;background:transparent;color:#e5e7eb;
  text-align:left;
  padding:9px 12px;
  border-radius:9px;
  font:600 13px/1.3 system-ui,-apple-system,"Segoe UI",sans-serif;
  cursor:pointer;
}
.lpb-pc-menu-item:hover{background:rgba(255,255,255,.08)}
.lpb-pc-menu-item.is-active{background:#f6b400;color:#111827;font-weight:800}

/* Contenedor con scroll-snap vertical, ancho tipo Reels */
.lpb-pc-scroll{
  height:100dvh;
  width:100%;
  overflow-y:auto;
  overflow-x:hidden;
  scroll-snap-type:y mandatory;
  scrollbar-width:none;
  background:#000;
}
.lpb-pc-scroll::-webkit-scrollbar{display:none}
@media(min-width:641px){
  .lpb-pc-scroll{max-width:480px;margin:0 auto}
}

.lpb-pc-strip{
  display:block;
  width:100%;
  background:#000;
}

/* Cada producto ocupa toda la pantalla */
.lpb-pc-frame{
  position:relative;
  height:100dvh;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  overflow:hidden;
}
.lpb-pc-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  background:#000;
  display:block;
}
.lpb-pc-frame:before{
  content:"";
  position:absolute;left:0;right:0;bottom:0;
  height:42%;
  background:linear-gradient(to top,rgba(0,0,0,.75),transparent);
  pointer-events:none;
}

/* Info del producto: nombre, precio, descripción */
.lpb-pc-info{
  position:absolute;
  left:16px;
  right:88px;
  bottom:32px;
  z-index:1;
  text-shadow:0 2px 8px rgba(0,0,0,.6);
}
.lpb-pc-name{
  font:800 20px/1.25 system-ui,-apple-system,"Segoe UI",sans-serif;
  margin-bottom:4px;
}
.lpb-pc-price{
  display:inline-block;
  font:700 15px/1.3 system-ui,-apple-system,"Segoe UI",sans-serif;
  color:#111827;
  background:#fbbf24;
  padding:3px 10px;
  border-radius:999px;
  margin-bottom:8px;
  text-shadow:none;
}
.lpb-pc-desc{
  font:500 14px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;
  color:#e5e7eb;
  max-width:340px;
}

/* Botón de agregar/quitar de la consulta — columna de acción, estilo Reels */
.lpb-pc-addbtn{
  position:fixed;
  right:calc(env(safe-area-inset-right,0px) + 16px);
  bottom:calc(env(safe-area-inset-bottom,0px) + 96px);
  z-index:2147483250;
  width:56px;height:56px;
  border-radius:50%;
  border:0;
  background:#fff;
  color:#111827;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.4);
  cursor:pointer;
  transition:transform .15s ease,background .15s ease,color .15s ease;
}
.lpb-pc-addbtn svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2}
.lpb-pc-addbtn:hover{transform:scale(1.08)}
.lpb-pc-addbtn.is-added{background:#16a34a;color:#fff}
.lpb-pc-addbtn.is-added svg{fill:currentColor}

/* Indicador de progreso (puntos, igual que la galería) */
.lpb-pc-progress{
  position:fixed;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  z-index:4;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.lpb-pc-progress span{
  width:5px;height:16px;border-radius:3px;
  background:rgba(255,255,255,.3);
}
.lpb-pc-progress span.is-active{background:#fff}

/* Carrito flotante persistente (visible mientras haya items agregados) */
.lpb-pc-cart{
  position:fixed;
  left:16px;
  bottom:calc(env(safe-area-inset-bottom,0px) + 20px);
  z-index:2147483260;
  display:none;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  border-radius:999px;
  border:0;
  background:#fff;
  color:#111827;
  font:700 14px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  cursor:pointer;
}
.lpb-pc-cart.is-visible{display:flex}
.lpb-pc-cart svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.lpb-pc-cart-count{
  background:#16a34a;
  color:#fff;
  min-width:20px;height:20px;
  border-radius:999px;
  font-size:12px;
  display:flex;align-items:center;justify-content:center;
  padding:0 5px;
}

/* Modal resumen de consulta */
.lpb-pc-summary{
  position:fixed;inset:0;
  z-index:2147483400;
  display:none;
  align-items:flex-end;
  justify-content:center;
  background:rgba(0,0,0,.6);
}
.lpb-pc-summary.is-open{display:flex}
.lpb-pc-summary-panel{
  width:100%;
  max-width:480px;
  max-height:88vh;
  background:#fff;
  color:#111827;
  border-radius:20px 20px 0 0;
  overflow-y:auto;
  padding:20px;
}
@media(min-width:641px){
  .lpb-pc-summary{align-items:center}
  .lpb-pc-summary-panel{border-radius:20px;max-height:80vh}
}
.lpb-pc-summary h3{
  font:800 19px/1.3 system-ui,-apple-system,"Segoe UI",sans-serif;
  margin-bottom:14px;
}
.lpb-pc-summary-item{
  display:grid;
  grid-template-columns:56px 1fr auto;
  gap:10px;
  align-items:center;
  padding:8px 0;
  border-bottom:1px solid #eef1f4;
}
.lpb-pc-summary-item img{
  width:56px;height:56px;
  border-radius:10px;
  object-fit:cover;
}
.lpb-pc-summary-item strong{font:700 14px/1.3 system-ui,-apple-system,"Segoe UI",sans-serif;display:block}
.lpb-pc-summary-item span{font:600 13px/1.3 system-ui,-apple-system,"Segoe UI",sans-serif;color:#6b7280}
.lpb-pc-summary-remove{
  border:0;background:#fee2e2;color:#b91c1c;
  width:30px;height:30px;border-radius:50%;
  cursor:pointer;font-size:16px;line-height:1;
}
.lpb-pc-summary-form{margin-top:18px}
.lpb-pc-summary-form label{
  display:block;font:700 13px/1.3 system-ui,-apple-system,"Segoe UI",sans-serif;
  margin-bottom:6px;
}
.lpb-pc-summary-form input{
  width:100%;padding:12px 14px;
  border:1px solid #e2e8f0;border-radius:12px;
  font:500 15px/1.3 system-ui,-apple-system,"Segoe UI",sans-serif;
  margin-bottom:14px;
}
.lpb-pc-summary-form input:invalid{border-color:#e2e8f0}
.lpb-pc-summary-actions{display:flex;gap:10px}
.lpb-pc-summary-send{
  flex:1;
  border:0;border-radius:12px;
  padding:14px;
  background:#16a34a;color:#fff;
  font:800 15px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
  cursor:pointer;
}
.lpb-pc-summary-send:disabled{background:#9ca3af;cursor:not-allowed}
.lpb-pc-summary-cancel{
  border:0;border-radius:12px;padding:14px 18px;
  background:#f1f5f9;color:#111827;
  font:700 14px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
  cursor:pointer;
}
.lpb-pc-summary-empty{
  text-align:center;color:#6b7280;
  padding:24px 0;
  font:600 14px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;
}

@media(max-width:640px){
  /* No fijar top/bottom acá: en desktop la pestaña usa --lpc-tab-top (el
     slider "Altura lateral"). Forzar bottom:110px en mobile la llevaba
     siempre al mismo punto sin importar ese valor, chocando con la pestaña
     de Galería (mismo override) apenas ambas estaban activas. */
  .lpb-pc-tab{font-size:12px;padding:12px 8px}
  .lpb-pc-addbtn{right:12px;bottom:84px;width:50px;height:50px}
  .lpb-pc-addbtn svg{width:22px;height:22px}
  .lpb-pc-progress{display:none}
  .lpb-pc-info{right:76px}
}