/* ELYA — reparaciones funcionales y visuales 2026-09 */

/* El fondo cromático estaba detrás del fondo blanco del body. */
body:has(#chroma-bg){ background:transparent; }
#chroma-bg{ z-index:0 !important; }

/* La cabecera debe permanecer estable en todas las páginas. */
header.nav,
header.nav.nav-hidden{
  transform:none !important;
}

/* La barra de ordenación pertenece al flujo de la colección: no debe
   perseguir al usuario ni cubrir fotografías al hacer scroll. */
.cat-toolbar-wrap{
  position:static !important;
  top:auto !important;
}
.cat-grid-section{
  margin-top:0 !important;
}

/* Contraste garantizado en el bloque oscuro de Collares. */
.icon-section{
  min-height:auto !important;
  padding:90px 0 !important;
  background:var(--charcoal, #1B1C1C) !important;
  color:var(--cream, #FCEBD3) !important;
}

/* Ritmo vertical más compacto sin perder el estilo editorial. */
.discover{ padding:64px 0 !important; }
.rosaries-ed{ padding:64px 0 !important; }
.jewelry,
.accessories,
.virgenes-showcase,
.pendientes-showcase{ padding-top:72px !important; padding-bottom:72px !important; }
.newsletter{ padding:68px 0 !important; }

/* Estados de inventario. */
.p-card .ph{ position:relative; }
.stock-badge{
  position:absolute;
  top:12px;
  left:12px;
  z-index:3;
  padding:7px 10px;
  background:#1B1C1C;
  color:#FFFFFF;
  font:600 10px/1 'Instrument Sans', sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.quick-add[disabled],
#addToCart[disabled]{
  cursor:not-allowed !important;
  opacity:.48 !important;
  pointer-events:none;
}
.product-stock-status{
  margin:12px 0 0;
  color:#7b2929;
  font-size:13px;
  letter-spacing:.04em;
}

/* Buscador y favoritos compartidos. */
.elya-panel-overlay{
  position:fixed;
  inset:0;
  z-index:580;
  background:rgba(27,28,28,.46);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.elya-panel-overlay.open{ opacity:1; pointer-events:auto; }
.elya-panel{
  position:fixed;
  top:0;
  right:0;
  z-index:590;
  width:min(480px, 94vw);
  height:100%;
  background:#FFFFFF;
  color:#1B1C1C;
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.16,.8,.24,1);
  box-shadow:-20px 0 60px rgba(0,0,0,.16);
  display:flex;
  flex-direction:column;
}
.elya-panel.open{ transform:translateX(0); }
.elya-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:24px;
  border-bottom:1px solid rgba(27,28,28,.12);
}
.elya-panel-head h2{
  margin:0;
  font-family:'Bodoni Moda', serif;
  font-size:25px;
  font-weight:400;
}
.elya-panel-close{
  border:0;
  background:none;
  color:inherit;
  font-size:22px;
  cursor:pointer;
}
.elya-panel-body{ padding:24px; overflow:auto; }
.elya-search-form{ display:flex; border-bottom:1px solid #1B1C1C; }
.elya-search-form input{
  flex:1;
  min-width:0;
  border:0;
  outline:0;
  padding:12px 4px;
  background:transparent;
  font:15px 'Instrument Sans',sans-serif;
}
.elya-search-form button{
  border:0;
  background:none;
  padding:10px 4px 10px 16px;
  cursor:pointer;
  font:600 12px 'Instrument Sans',sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.elya-results{ margin-top:22px; }
.elya-result{
  display:grid;
  grid-template-columns:76px 1fr auto;
  gap:14px;
  align-items:center;
  padding:13px 0;
  border-bottom:1px solid rgba(27,28,28,.1);
  color:inherit;
  text-decoration:none;
}
.elya-result-img{
  width:76px;
  aspect-ratio:3/4;
  background:#F6F3EE center/cover no-repeat;
}
.elya-result h3{ margin:0; font:400 17px 'Bodoni Moda',serif; }
.elya-result p{ margin:5px 0 0; font-size:12px; opacity:.58; }
.elya-result-price{ font-size:12px; white-space:nowrap; }
.elya-empty{ padding:28px 0; font-size:14px; opacity:.65; }
.elya-wish-remove{
  border:0;
  background:none;
  text-decoration:underline;
  font-size:11px;
  cursor:pointer;
  opacity:.6;
  margin-top:8px;
}
.elya-toast{
  position:fixed;
  z-index:700;
  left:50%;
  bottom:28px;
  transform:translate(-50%,20px);
  padding:12px 18px;
  background:#1B1C1C;
  color:#FCEBD3;
  font-size:13px;
  opacity:0;
  pointer-events:none;
  transition:.25s ease;
}
.elya-toast.show{ opacity:1; transform:translate(-50%,0); }

@media (max-width:819px){
  .hero{ min-height:auto !important; padding-top:104px !important; }
  .icon-section{ padding:72px 0 !important; }
  .elya-result{ grid-template-columns:64px 1fr; }
  .elya-result-price{ grid-column:2; }
}