/* ===== Reserve space for footer when visible ===== */
:root{ --pcl-footer-h: 0px; }
html.pcl-footer-space, body.pcl-footer-space{
  padding-bottom: var(--pcl-footer-h, 0px) !important;
}
@media (max-width: 1000px){
  html.pcl-footer-space, body.pcl-footer-space{
    /* ↓ Ajusta este +6px si quieres menos/más respiración bajo el banner */
    padding-bottom: calc(var(--pcl-footer-h, 0px) + 1px) !important;
  }
}

/* ===== Base footer ===== */
#pcl-compare-footer{
  position: fixed;
  left: 0 !important;
  right: 0 !important;
  bottom: 0;
  width: 100vw;
  max-width: 100vw;
  box-sizing: border-box;
  background:#fff;
  border-top:1px solid #e5e7eb;
  padding:.6rem .9rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.75rem;
  z-index:999999;
  box-shadow:0 -6px 20px rgba(0,0,0,.06);
}
#pcl-compare-footer.pcl-hidden{ display:none; }
#pcl-compare-footer .pcl-items{ display:flex; gap:.75rem; overflow-x:auto; max-width:70%; }

.pcl-chip{ display:inline-flex; align-items:center; gap:.5rem; border:1px solid #e5e7eb; padding:.35rem .5rem; border-radius:999px; background:#fafafa; white-space:nowrap; }
.pcl-chip img{ width:28px; height:28px; object-fit:cover; border-radius:50%; }
.pcl-chip .pcl-chip__remove{ background:transparent; border:0; cursor:pointer; font-size:16px; line-height:1; }

#pcl-compare-footer .pcl-actions{ display:flex; gap:.5rem; margin-left:auto; }
#pcl-compare-footer .pcl-open, #pcl-compare-footer .pcl-clear{ border:0; cursor:pointer; padding:.6rem .9rem; border-radius:8px; font-weight:600; }
#pcl-compare-footer .pcl-open{ background:#111827; color:#fff; } 
#pcl-compare-footer .pcl-clear{ background:#e5e7eb; color:#111827; }

/* ===== Modal ===== */
#pcl-compare-modal{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index:100000; }
#pcl-compare-modal.pcl-hidden{ display:none; }
.pcl-modal__inner{ background:#fff; width:min(1100px,95vw); max-height:88vh; overflow:auto; border-radius:10px; padding:1rem 1.25rem 1.25rem; box-shadow:0 10px 30px rgba(0,0,0,.15); }
.pcl-modal__close{ float:right; background:transparent; border:0; font-size:28px; cursor:pointer; }
.pcl-modal__title{ margin:.25rem 0 1rem; }

/* ===== Table ===== */
.pcl-table{ width:100%; border-collapse:collapse; }
.pcl-table th, .pcl-table td{ border:1px solid #e5e7eb; padding:.65rem; text-align:center; vertical-align:top; }
.pcl-table thead th{ background:#f3f4f6; font-weight:700; }
.pcl-table img{ max-width:90px; height:auto; } /* imágenes más pequeñas en popup */
.pcl-table .pcl-price{ font-weight:700; }
.pcl-buy{ display:inline-block; padding:.5rem .9rem; background:#ff9900; color:#fff; border-radius:6px; text-decoration:none; }
.pcl-buy:hover{ opacity:.9; }

/* ===== Single product checkbox ===== */
.pcl-single-checkbox-wrap{ margin-top:.5rem; }
.pcl-compare-checkbox{ display:inline-flex; align-items:center; gap:.5rem; font-size:.95rem; cursor:pointer; user-select:none; }
.pcl-compare-checkbox input[type="checkbox"]{ width:18px; height:18px; }

/* ===== Mobile compact ===== */
@media (max-width: 1000px){
  body #pcl-compare-footer{
    background: rgba(17,24,39,.92) !important;
    color: #fff !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 8px !important;
    gap: 8px !important;
  }
  body #pcl-compare-footer .pcl-items{
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto !important;
    padding: 2px 0 6px !important;
    max-width: 100% !important;
  }
  body #pcl-compare-footer .pcl-items .pcl-chip{
    position: relative !important;
    width: 90px !important;
    height: 90px !important;
    padding: 6px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.1) !important;
    border: 0 !important;
    flex: 0 0 auto !important;
  }
  body #pcl-compare-footer .pcl-items .pcl-chip img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 8px !important;
  }
  body #pcl-compare-footer .pcl-items .pcl-chip .pcl-chip__title{ display:none !important; }
  body #pcl-compare-footer .pcl-items .pcl-chip .pcl-chip__remove{
    position: absolute !important;
    top: 4px !important;     /* aspa dentro, sin cortar */
    right: 4px !important;
    width: 26px !important;
    height: 26px !important;
    line-height: 22px !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #111827 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.25) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
  }
  body #pcl-compare-footer .pcl-actions{
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 6px !important;
    margin-left: 0 !important;
  }
  body #pcl-compare-footer .pcl-open{
    flex: 1.3 !important;
    background: #e63946 !important;
    color: #fff !important;
    border-radius: 16px !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    min-height: auto !important;
  }
  body #pcl-compare-footer .pcl-clear{
    flex: 1 !important;
    background: transparent !important;
    color: #ccc !important;
    border: 0 !important;
    text-decoration: underline !important;
    padding: 6px 4px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    min-height: auto !important;
    text-align: left !important;
  }

  /* Título modal móvil: una línea + recorte con puntos */
  #pcl-compare-modal .pcl-modal__title{
    font-size: 20px !important;
    line-height: 1.1 !important;
    margin: .25rem 0 .5rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* ===== Lock background scroll when modal is open ===== */
body.pcl-modal-open{
  overflow: hidden !important;
}