/* ===========================================================================
   jl-sticky-atc.css — barra de compra flotante + línea de valoración bajo el H1
   SOLO STAGING (16/10/2026). Colores de jl-reviews.css y del botón del tema.
   di-seo.com
   =========================================================================== */

body#product {
  --jls-alto: 76px;
  --jls-alto-movil: 92px;
}

/* ------------------------------------------------------ valoración bajo H1 */
body#product .jls-rating {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: .1rem 0 .7rem;
  font-size: .9rem;
  color: #232324;
  text-decoration: none;
}
body#product .jls-rating:hover span:last-child { text-decoration: underline; }
body#product .jls-rating .jlr-stars { font-size: 1rem; }
body#product .jls-rating .jlr-stars::before { color: #efd9cb; }
body#product .jls-rating .jlr-stars i { color: #f39d72; }
body#product .jls-rating strong { font-weight: 600; }
body#product .jls-rating span:last-child { color: #6f6862; }

/* ------------------------------------------------------------ barra flotante */
.jls-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;              /* sobre «Contacto» (1000), bajo modales (99999x) */
  background: #fffdfb;
  border-top: 1px solid #e8ded2;
  box-shadow: 0 -6px 24px rgba(35, 35, 36, .08);
  transform: translateY(110%);
  transition: transform .28s ease;
  font-family: "General Sans", sans-serif;
}
.jls-bar.is-on { transform: translateY(0); }

.jls-in {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: 1320px;
  height: var(--jls-alto, 76px);
  margin: 0 auto;
  padding: 0 24px;
}
.jls-prod { display: flex; align-items: center; gap: .85rem; flex: 1; min-width: 0; }
.jls-img {
  width: 56px; height: 56px; object-fit: cover;
  border-radius: 10px; background: #ffe8d5; flex: none;
}
.jls-txt { display: flex; flex-direction: column; min-width: 0; }
.jls-name {
  font-family: "Clash Grotesk", sans-serif;
  font-size: 1.05rem; font-weight: 500; color: #232324;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jls-sub { font-size: .82rem; color: #6f6862; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jls-sub:empty { display: none; }

.jls-qty {
  display: flex; align-items: center; flex: none;
  border: 1px solid #e8ded2; border-radius: 33px; height: 42px;
}
.jls-qty button {
  width: 38px; height: 40px; border: 0; background: none;
  font-size: 1.1rem; color: #232324; cursor: pointer;
}
.jls-n { min-width: 22px; text-align: center; font-weight: 500; }

.jls-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  flex: none; min-width: 260px; height: 46px; padding: 0 1.6rem;
  border: 0; border-radius: 33px;
  background: #232324; color: #fff6ef;
  font: 500 1rem "General Sans", sans-serif; cursor: pointer;
  transition: background .15s ease;
}
.jls-btn:hover { background: #af4030; }
.jls-btn-p:not(:empty)::before { content: "·"; margin-right: .5rem; opacity: .6; }
.jls-btn:disabled { background: #cfc6bc; color: #fff; cursor: not-allowed; }

.jls-trust { display: none; }

/* lo que ya flota abajo sube con la barra */
body.jls-on .elementor-element-31vl5mq { bottom: calc(var(--jls-alto, 76px) + 16px) !important; transition: bottom .28s ease; }
body.jls-on #cookiesplus-tab { bottom: var(--jls-alto, 76px) !important; }

/* ------------------------------------------------------------------- móvil */
@media (max-width: 767px) {
  .jls-in { height: auto; padding: 10px 16px 0; gap: 0; }
  .jls-prod, .jls-qty { display: none; }
  .jls-btn { width: 100%; min-width: 0; height: 50px; font-size: 1.02rem; }
  .jls-trust {
    display: flex; justify-content: center; gap: 1.1rem;
    padding: 6px 16px calc(8px + env(safe-area-inset-bottom));
    font-size: .76rem; color: #6f6862;
  }
  .jls-trust span::before { content: "✓"; margin-right: .3rem; color: #af4030; }
  body.jls-on .elementor-element-31vl5mq { bottom: calc(var(--jls-alto-movil, 92px) + 12px) !important; }
  body.jls-on #cookiesplus-tab { bottom: var(--jls-alto-movil, 92px) !important; }
  body#product .jls-rating { font-size: .85rem; margin-bottom: .5rem; }
}

/* agotado: la barra no aporta nada, no se enseña */
.jls-bar.is-agotado { transform: translateY(110%) !important; }

/* La valoración ya sale bajo el H1: fuera el bloque «Calificación / Leer las
   reseñas / Escribe tu propia reseña» junto al botón de compra, para no
   repetirla. Sigue en el DOM porque jl-sticky-atc.js lee de ahí nota y total. */
body#product .product-additional-info .product-comments-additional-info { display: none !important; }