/* =============================================
   PIZZERÍA — Frontend CSS
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

:root {
  --piz-rojo:    #d32f2f;
  --piz-rojo-cl: #e53935;
  --piz-naranja: #ff6f00;
  --piz-fondo:   #fff8f0;
  --piz-borde:   #f0e6d8;
  --piz-texto:   #2d2014;
  --piz-gris:    #7a6a5a;
  --piz-verde:   #2e7d32;
  --piz-sombra:  rgba(211,47,47,.18);
}

#piz-app * { box-sizing: border-box; font-family: 'Nunito', sans-serif; }

/* ===== LAYOUT ===== */
#piz-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  min-height: 70vh;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 30px rgba(0,0,0,.08);
  margin-bottom: 80px;
}

/* ===== CATEGORÍAS ===== */
#piz-cats {
  background: var(--piz-rojo);
  padding: 16px 0;
  display: flex;
  flex-direction: column;
}
.piz-cat-btn {
  display: block; width: 100%;
  padding: 14px 20px;
  background: transparent; border: none;
  color: rgba(255,255,255,.8);
  font-size: 14px; font-weight: 700;
  text-align: left; cursor: pointer;
  transition: all .2s;
  border-left: 3px solid transparent;
}
.piz-cat-btn:hover  { background: rgba(255,255,255,.1); color: #fff; }
.piz-cat-btn.active {
  background: rgba(255,255,255,.15);
  color: #fff;
  border-left-color: #fff;
}

/* ===== ARTÍCULOS ===== */
#piz-articulos-wrap { padding: 24px; background: var(--piz-fondo); }
#piz-cat-titulo {
  font-size: 22px; font-weight: 900; color: var(--piz-rojo);
  margin-bottom: 20px; border-bottom: 2px solid var(--piz-borde);
  padding-bottom: 10px;
}
#piz-articulos-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.piz-welcome {
  grid-column: 1/-1; text-align: center; padding: 60px 20px;
  color: var(--piz-gris);
}
.piz-welcome span { font-size: 64px; display: block; margin-bottom: 12px; }

/* Tarjeta artículo */
.piz-art-card {
  background: #fff; border-radius: 10px;
  padding: 18px; cursor: pointer;
  border: 2px solid transparent;
  transition: all .25s;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  display: flex; flex-direction: column; gap: 8px;
}
.piz-art-card:hover {
  border-color: var(--piz-rojo);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px var(--piz-sombra);
}
.piz-art-card-nombre {
  font-size: 15px; font-weight: 800; color: var(--piz-texto);
  line-height: 1.3;
}
.piz-art-card-desc {
  font-size: 12px; color: var(--piz-gris); line-height: 1.5;
  flex: 1;
}
.piz-art-card-footer {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 6px;
}
.piz-art-card-precio {
  font-size: 18px; font-weight: 900; color: var(--piz-rojo);
}
.piz-art-card-add {
  background: var(--piz-rojo); color: #fff;
  border: none; border-radius: 50%; width: 32px; height: 32px;
  font-size: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.piz-art-card-add:hover { background: var(--piz-rojo-cl); }

/* ===== CARRITO BOTÓN FLOTANTE ===== */
#piz-carrito-btn {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--piz-rojo); color: #fff;
  padding: 14px 24px; border-radius: 50px;
  font-size: 15px; font-weight: 800;
  cursor: pointer; z-index: 900;
  box-shadow: 0 6px 24px var(--piz-sombra);
  transition: all .3s;
  display: none;
}
#piz-carrito-btn.visible { display: flex; align-items: center; gap: 8px; }
#piz-carrito-btn:hover   { background: var(--piz-rojo-cl); transform: translateY(-2px); }

/* ===== CARRITO PANEL ===== */
#piz-carrito-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1000;
}
#piz-carrito-inner {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: 380px; max-width: 95vw;
  background: #fff; z-index: 1001;
  display: flex; flex-direction: column;
  box-shadow: -4px 0 24px rgba(0,0,0,.15);
}
#piz-carrito-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; background: var(--piz-rojo); color: #fff;
}
#piz-carrito-header h2 { font-size: 18px; font-weight: 800; margin: 0; }
#piz-carrito-close {
  background: none; border: none; color: #fff; font-size: 22px; cursor: pointer;
}
#piz-carrito-items { flex: 1; overflow-y: auto; padding: 16px 24px; }

/* Item del carrito */
.piz-cart-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--piz-borde);
}
.piz-cart-item-info { flex: 1; }
.piz-cart-item-nombre { font-weight: 800; font-size: 14px; color: var(--piz-texto); }
.piz-cart-item-detalle { font-size: 12px; color: var(--piz-gris); margin-top: 3px; line-height: 1.5; }
.piz-cart-item-precio { font-weight: 900; color: var(--piz-rojo); font-size: 15px; white-space: nowrap; }
.piz-cart-item-del {
  background: none; border: 1px solid #ddd; border-radius: 50%;
  width: 26px; height: 26px; cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  color: #999; transition: all .2s;
}
.piz-cart-item-del:hover { background: #fee; border-color: var(--piz-rojo); color: var(--piz-rojo); }

#piz-carrito-footer {
  padding: 20px 24px; border-top: 2px solid var(--piz-borde);
}
#piz-carrito-subtotal {
  display: flex; justify-content: space-between;
  font-size: 18px; font-weight: 900; margin-bottom: 14px;
}
#piz-btn-checkout {
  width: 100%; padding: 15px;
  background: var(--piz-rojo); color: #fff;
  border: none; border-radius: 50px;
  font-size: 16px; font-weight: 800; cursor: pointer;
  transition: all .2s;
}
#piz-btn-checkout:hover { background: var(--piz-rojo-cl); transform: translateY(-2px); }

/* ===== MODALES BASE ===== */
#piz-checkout-overlay, #piz-prod-overlay, #piz-mitad-overlay, #piz-confirm-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 99990;
}
#piz-checkout-inner, #piz-prod-inner, #piz-mitad-inner, #piz-confirm-inner {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: #fff; border-radius: 16px; z-index: 99991;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

/* ===== CHECKOUT ===== */
#piz-checkout-inner { width: 540px; max-width: 95vw; }
#piz-checkout-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 28px; background: var(--piz-rojo); color: #fff;
  border-radius: 16px 16px 0 0; position: sticky; top: 0;
}
#piz-checkout-header h2 { font-size: 18px; font-weight: 800; margin: 0; }
#piz-checkout-close {
  background: none; border: none; color: #fff; font-size: 24px; cursor: pointer;
}
#piz-checkout-body { padding: 24px 28px; }

.piz-co-section { margin-bottom: 20px; }
.piz-co-section h3 {
  font-size: 14px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--piz-rojo); margin-bottom: 12px;
}
.piz-co-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.piz-co-field { display: flex; flex-direction: column; gap: 5px; }
.piz-co-field label { font-size: 12px; font-weight: 700; color: var(--piz-gris); }
.piz-co-field input, .piz-co-field select, #piz-co-notas {
  padding: 11px 14px; border: 2px solid var(--piz-borde);
  border-radius: 8px; font-size: 14px; font-family: 'Nunito',sans-serif;
  outline: none; transition: border-color .2s;
}
.piz-co-field input:focus, .piz-co-field select:focus, #piz-co-notas:focus {
  border-color: var(--piz-rojo);
}
#piz-co-notas { width: 100%; resize: vertical; }
.piz-opcional { font-weight: 400; color: var(--piz-gris); font-size: 12px; }

.piz-pago-aviso {
  background: #fff8e1; border: 1px solid #ffe082;
  border-radius: 8px; padding: 12px 16px;
  font-size: 14px; margin-bottom: 20px; color: #5d4037;
}
.piz-error-msg {
  background: #ffebee; border: 1px solid #ef9a9a;
  border-radius: 8px; padding: 10px 14px;
  color: var(--piz-rojo); font-size: 13px; font-weight: 700;
  margin-bottom: 16px;
}

#piz-btn-enviar {
  width: 100%; padding: 16px;
  background: var(--piz-verde); color: #fff;
  border: none; border-radius: 50px;
  font-size: 16px; font-weight: 800; cursor: pointer;
  transition: all .2s;
}
#piz-btn-enviar:hover:not(:disabled) { background: #1b5e20; transform: translateY(-2px); }
#piz-btn-enviar:disabled { opacity: .6; cursor: not-allowed; }

/* Resumen checkout */
#piz-checkout-resumen {
  background: var(--piz-fondo); border-radius: 10px;
  padding: 14px; margin-bottom: 20px; font-size: 13px;
}
.piz-res-linea {
  display: flex; justify-content: space-between; padding: 5px 0;
  border-bottom: 1px solid var(--piz-borde);
}
.piz-res-linea:last-child { border: none; font-weight: 900; font-size: 15px; }
.piz-res-linea-nombre { color: var(--piz-texto); }
.piz-res-linea-precio { font-weight: 700; color: var(--piz-rojo); }

/* ===== MODAL PRODUCTO ===== */
#piz-prod-inner { width: 420px; max-width: 95vw; padding: 28px; position: relative; }
.piz-prod-close {
  position: absolute; top: 16px; right: 16px;
  background: #f5f5f5; border: none; border-radius: 50%;
  width: 32px; height: 32px; cursor: pointer; font-size: 16px;
}
#piz-prod-nombre { font-size: 20px; font-weight: 900; color: var(--piz-texto); margin: 0 0 8px; padding-right: 40px; }
#piz-prod-desc    { font-size: 13px; color: var(--piz-gris); margin-bottom: 14px; line-height: 1.6; }
#piz-prod-precio-wrap { font-size: 14px; color: var(--piz-gris); margin-bottom: 16px; }
#piz-prod-precio  { font-size: 22px; font-weight: 900; color: var(--piz-rojo); }

.piz-cant-wrap {
  display: flex; align-items: center; gap: 16px; margin-bottom: 20px;
}
.piz-cant-btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid var(--piz-borde); background: #fff;
  font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.piz-cant-btn:hover { border-color: var(--piz-rojo); color: var(--piz-rojo); }
#piz-cant-num { font-size: 24px; font-weight: 900; min-width: 30px; text-align: center; }

/* Ingredientes en modal */
#piz-quitar-wrap h4, #piz-extras-wrap h4 {
  font-size: 13px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: var(--piz-gris); margin: 14px 0 8px;
}
.piz-ing-check {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0; font-size: 13px; cursor: pointer;
}
.piz-ing-check input[type="checkbox"] { accent-color: var(--piz-rojo); width: 16px; height: 16px; }
.piz-extra-precio { font-size: 11px; color: var(--piz-rojo); font-weight: 700; }

.piz-prod-total-wrap {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0; border-top: 2px solid var(--piz-borde); margin-top: 14px;
  font-size: 16px;
}
#piz-prod-total { font-size: 22px; font-weight: 900; color: var(--piz-rojo); }
#piz-prod-add-btn {
  width: 100%; padding: 15px;
  background: var(--piz-rojo); color: #fff;
  border: none; border-radius: 50px;
  font-size: 15px; font-weight: 800; cursor: pointer;
  margin-top: 14px; transition: all .2s;
}
#piz-prod-add-btn:hover { background: var(--piz-rojo-cl); transform: translateY(-2px); }

/* ===== MODAL MITAD & MITAD ===== */
#piz-mitad-inner { width: 680px; max-width: 95vw; padding: 28px; position: relative; }
#piz-mitad-titulo { font-size: 22px; font-weight: 900; color: var(--piz-texto); margin-bottom: 4px; padding-right: 40px; }
.piz-mitad-hint { font-size: 13px; color: var(--piz-gris); margin-bottom: 20px; }

#piz-mitad-layout {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: start;
}
.piz-mitad-lado {
  background: var(--piz-fondo); border-radius: 10px; padding: 18px;
}
.piz-mitad-lado-tit {
  font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--piz-rojo); margin-bottom: 10px;
}
.piz-mitad-sep {
  font-size: 32px; font-weight: 900; color: var(--piz-rojo);
  display: flex; align-items: center; padding-top: 40px;
}
.piz-mitad-lado select {
  width: 100%; padding: 10px 12px;
  border: 2px solid var(--piz-borde); border-radius: 8px;
  font-size: 13px; font-family: 'Nunito',sans-serif;
  outline: none; background: #fff;
}
.piz-mitad-lado select:focus { border-color: var(--piz-rojo); }
.piz-mitad-ings { margin-top: 12px; }
.piz-mitad-ings h5 {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1px; color: var(--piz-gris); margin: 10px 0 6px;
}

.piz-mitad-precio-wrap {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 0; border-top: 2px solid var(--piz-borde); margin-top: 20px;
  font-size: 16px;
}
#piz-mitad-precio-total { font-size: 24px; font-weight: 900; color: var(--piz-rojo); }
#piz-mitad-add-btn {
  width: 100%; padding: 15px;
  background: var(--piz-rojo); color: #fff;
  border: none; border-radius: 50px;
  font-size: 15px; font-weight: 800; cursor: pointer;
  margin-top: 14px; transition: all .2s;
}
#piz-mitad-add-btn:hover:not(:disabled) { background: var(--piz-rojo-cl); transform: translateY(-2px); }
#piz-mitad-add-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ===== CONFIRMACIÓN ===== */
#piz-confirm-inner {
  width: 400px; max-width: 95vw; padding: 36px 28px; text-align: center;
}
.piz-confirm-ico { font-size: 64px; margin-bottom: 8px; }
#piz-confirm-inner h2 { font-size: 26px; font-weight: 900; color: var(--piz-verde); margin-bottom: 12px; }
.piz-confirm-num {
  font-size: 36px; font-weight: 900;
  border: 3px solid var(--piz-rojo); color: var(--piz-rojo);
  padding: 8px 24px; border-radius: 10px;
  display: inline-block; letter-spacing: 3px; margin: 12px 0;
}
#piz-confirm-inner p { font-size: 14px; color: var(--piz-gris); margin-bottom: 16px; }
#piz-confirm-detalle {
  background: var(--piz-fondo); border-radius: 8px;
  padding: 12px; font-size: 13px; text-align: left; margin-bottom: 20px;
}
.piz-btn-ok {
  background: var(--piz-verde); color: #fff;
  border: none; border-radius: 50px; padding: 14px 36px;
  font-size: 15px; font-weight: 800; cursor: pointer;
  transition: all .2s;
}
.piz-btn-ok:hover { background: #1b5e20; }

/* ===== RESPONSIVE ===== */
@media (max-width: 640px) {
  #piz-layout { grid-template-columns: 1fr; }
  /* cats: ver regla final */
  .piz-cat-btn { white-space: nowrap; padding: 10px 14px; border-left: none; border-bottom: 3px solid transparent; font-size: 12px; }
  .piz-cat-btn.active { border-left: none; border-bottom-color: #fff; }
  #piz-mitad-layout { grid-template-columns: 1fr; }
  .piz-mitad-sep { display: none; }
  .piz-co-row { grid-template-columns: 1fr; }
}

/* ===== FORMA DE PAGO ===== */
.piz-pago-opciones {
  display: flex; gap: 12px; margin-bottom: 14px;
}
.piz-pago-opt { flex: 1; cursor: pointer; }
.piz-pago-opt input[type="radio"] { display: none; }
.piz-pago-opt-inner {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: 2px solid var(--piz-borde); border-radius: 10px;
  padding: 16px 10px; transition: all .2s; background: #fff;
}
.piz-pago-opt input:checked + .piz-pago-opt-inner {
  border-color: var(--piz-rojo);
  background: #fff5f5;
  box-shadow: 0 0 0 3px rgba(211,47,47,.12);
}
.piz-pago-opt-inner:hover { border-color: var(--piz-rojo); }
.piz-pago-ico { font-size: 28px; }
.piz-pago-opt-inner span:last-child { font-size: 13px; font-weight: 700; color: var(--piz-texto); }
.piz-pago-aviso {
  background: #fff8e1; border: 1px solid #ffe082;
  border-radius: 8px; padding: 10px 14px;
  font-size: 13px; color: #5d4037;
}

/* ===== IMAGEN EN TARJETA ===== */
.piz-art-card-img {
  width: 100%; height: 130px; object-fit: cover;
  border-radius: 6px; margin-bottom: 10px;
  display: block;
}
.piz-art-card-img-placeholder {
  width: 100%; height: 100px;
  display: flex; align-items: center; justify-content: center;
  font-size: 48px; background: var(--piz-fondo);
  border-radius: 6px; margin-bottom: 10px;
}

/* =============================================
   RESPONSIVE COMPLETO
   ============================================= */

/* ── Tablet (≤900px) ── */
@media (max-width: 900px) {
  #piz-articulos-lista {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

/* ── Móvil grande (≤700px) ── */
@media (max-width: 700px) {
  /* Layout: menú arriba, productos abajo */
  #piz-layout {
    grid-template-columns: 1fr;
    border-radius: 8px;
  }

  /* Categorías en scroll horizontal */
  /* cats: ver regla final */

  .piz-cat-btn {
    white-space: nowrap;
    padding: 10px 16px;
    border-left: none !important;
    border-bottom: 3px solid transparent;
    font-size: 13px;
    border-radius: 20px;
    flex-shrink: 0;
  }
  .piz-cat-btn.active {
    border-left: none !important;
    border-bottom-color: #fff;
    background: rgba(255,255,255,.2);
  }

  /* Artículos: 2 columnas en móvil */
  #piz-articulos-wrap { padding: 14px; }
  #piz-cat-titulo { font-size: 18px; margin-bottom: 14px; }
  #piz-articulos-lista {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }
  .piz-art-card { padding: 12px; gap: 6px; }
  .piz-art-card-nombre { font-size: 13px; }
  .piz-art-card-desc { font-size: 11px; }
  .piz-art-card-img { height: 100px; }
  .piz-art-card-img-placeholder { height: 80px; font-size: 36px; }
  .piz-art-card-precio { font-size: 14px; }
  .piz-art-card-add { width: 28px; height: 28px; font-size: 16px; }

  /* Carrito flotante: en la parte INFERIOR, más alto sobre la barra de Windows */
  #piz-carrito-btn {
    bottom: 16px;
    right: 16px;
    padding: 12px 18px;
    font-size: 14px;
    /* Asegurar que esté siempre visible */
    z-index: 9999;
  }

  /* Drawer carrito: pantalla completa en móvil */
  #piz-carrito-overlay { display: none !important; }
  #piz-carrito-inner {
    width: 100vw;
    max-width: 100vw;
    height: 90vh;
    border-radius: 20px 20px 0 0;
    bottom: 0;
    top: auto;
    right: 0;
    position: fixed;
  }

  /* Modales: pantalla completa */
  #piz-checkout-inner,
  #piz-prod-inner,
  #piz-mitad-inner,
  #piz-confirm-inner {
    width: 100vw;
    max-width: 100vw;
    max-height: 95vh;
    border-radius: 20px 20px 0 0;
    margin: auto auto 0;
    position: fixed;
    bottom: 0;
    left: 0;
  }

  /* Checkout grid a 1 columna */
  .piz-co-row { grid-template-columns: 1fr !important; gap: 10px; }
  #piz-checkout-body { padding: 16px 18px; }

  /* Mitad & Mitad: apilar las dos mitades */
  #piz-mitad-inner { padding: 20px 16px; }
  #piz-mitad-layout { grid-template-columns: 1fr; gap: 16px; }
  .piz-mitad-sep { display: none; }
  #piz-mitad-titulo { font-size: 18px; }

  /* Forma de pago: siempre en fila */
  .piz-pago-opciones { gap: 10px; }
  .piz-pago-opt-inner { padding: 12px 8px; }
  .piz-pago-ico { font-size: 22px; }
}

/* ── Móvil pequeño (≤400px) ── */
@media (max-width: 400px) {
  #piz-articulos-lista { grid-template-columns: repeat(2, 1fr) !important; }
  .piz-art-card-img { height: 80px; }
  .piz-art-card-img-placeholder { height: 70px; }
  .piz-art-card-nombre { font-size: 11px; }
}

/* ── Banner PWA: nunca detrás de la barra de Windows ──
   env(safe-area-inset-bottom) respeta el notch/barra en iOS y Android.
   En escritorio bottom fijo pequeño. ── */
#piz-pwa-banner {
  bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
}
@media (max-width: 700px) {
  #piz-pwa-banner {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    transform: translateX(0) translateY(120%) !important;
  }
  #piz-pwa-banner.visible {
    transform: translateX(0) translateY(0) !important;
  }
}

/* ── FIX MODAL: z-index nuclear, independiente de cualquier tema ── */
#piz-prod-modal,
#piz-mitad-modal,
#piz-checkout-modal,
#piz-confirm-modal,
#piz-carrito-panel {
  position: fixed !important;
  z-index: 2147483647 !important; /* máximo z-index posible */
}
#piz-prod-overlay,
#piz-mitad-overlay,
#piz-checkout-overlay,
#piz-confirm-overlay,
#piz-carrito-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483640 !important;
}
#piz-prod-inner,
#piz-mitad-inner,
#piz-checkout-inner,
#piz-confirm-inner,
#piz-carrito-inner {
  position: fixed !important;
  z-index: 2147483647 !important;
}

/* ══════════════════════════════════════════════
   FIXES v2.3
   ══════════════════════════════════════════════ */

/* Fix modal base: asegurar que transform esté definido correctamente */
#piz-prod-inner,
#piz-mitad-inner,
#piz-checkout-inner,
#piz-confirm-inner {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
}

/* Fix responsive modal: en móvil centrado vertical, ancho casi completo */
@media (max-width: 700px) {
  #piz-prod-inner,
  #piz-mitad-inner,
  #piz-checkout-inner,
  #piz-confirm-inner {
    width: 94vw !important;
    max-width: 94vw !important;
    max-height: 88vh !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    border-radius: 16px !important;
  }

  /* categorías: ver regla grid al final */
}

/* ══════════════════════════════════════════════
   ACORDEÓN — Quitar/Extras en ficha producto
   ══════════════════════════════════════════════ */
.piz-acordeon-wrap {
  border: 1px solid var(--piz-borde);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}
.piz-acordeon-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #fafafa;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--piz-texto);
  text-align: left;
  transition: background .15s;
}
.piz-acordeon-btn:hover { background: #f0f0f0; }
.piz-acordeon-ico { font-size: 12px; color: #999; transition: transform .2s; }
.piz-acordeon-body { padding: 12px 16px; background: #fff; }



/* ══════════════════════════════════════════════
   CATEGORÍAS MÓVIL — Grid 3 columnas compacto
   ══════════════════════════════════════════════ */
@media (max-width: 700px) {
  #piz-cats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    flex-direction: unset !important;
    overflow: visible !important;
    padding: 6px !important;
    gap: 4px !important;
  }
  #piz-cats::-webkit-scrollbar { display: none; }
  .piz-cat-btn {
    white-space: normal !important;
    text-align: center !important;
    padding: 0 4px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    border-left: none !important;
    border-bottom: 2px solid transparent !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .piz-cat-btn.active {
    background: rgba(255,255,255,0.25) !important;
    border-bottom-color: #fff !important;
  }
}