/* =========================
   PRODUCT PAGE (JB)
========================= */

.jb-product-page{
  padding: 130px 0 70px;
}

@media (max-width: 991.98px){
  .jb-product-page{
    padding: 115px 0 56px;
  }
}

.jb-product-container{
  padding-left: 18px;
  padding-right: 18px;
}

/* =========================
   TOP BAR
========================= */
.jb-product-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
  position: relative;
  z-index: 5;
}

.jb-back-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius: 999px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  font-weight: 900;
  color:#0f1a1f;
  text-decoration:none;
}

.jb-back-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
}

.jb-breadcrumb{
  font-weight: 900;
  color:#647079;
  font-size: 13px;
}

.jb-breadcrumb a{
  color:#0f1a1f;
  text-decoration:none;
  opacity:.9;
}
.jb-breadcrumb a:hover{ opacity:1; }

.jb-breadcrumb span{ margin: 0 6px; opacity:.6; }
.jb-breadcrumb strong{ color:#0f1a1f; }

/* =========================
   MAIN LAYOUT
========================= */
.jb-product-main{
  margin-top: 6px;
  margin-bottom: 18px;
}

.jb-product-image-card,
.jb-product-info-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius: 20px;
  box-shadow: 0 12px 35px rgba(0,0,0,.06);
}

.jb-product-image-card{
  padding: 14px;
  position: relative;
  overflow: hidden;
  min-height: 520px;
  display:flex;
  align-items:center;
  justify-content:center;
}

@media (max-width: 991.98px){
  .jb-product-image-card{ min-height: 420px; margin-bottom: 14px; }
}

.jb-product-badge{
  position:absolute;
  left: 14px;
  top: 14px;
  z-index: 2;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  border: 1px solid rgba(255,122,0,.25);
  background: rgba(255,122,0,.12);
  color:#ff7a00;
}

.jb-product-image-wrap{
  width: 100%;
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 6px;
}

.jb-product-image-wrap img{
  width: auto;
  height: 100%;
  max-height: 520px;
  max-width: 100%;
  object-fit: contain;
  display:block;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.12));
}

@media (max-width: 991.98px){
  .jb-product-image-wrap img{ max-height: 420px; }
}

.jb-product-info-card{
  padding: 18px;
  height: 100%;
}

.jb-product-title{
  font-size: 40px;
  font-weight: 950;
  line-height: 1.05;
  margin: 0 0 10px;
  color:#0f1a1f;
}

@media (max-width: 991.98px){
  .jb-product-title{ font-size: 30px; }
}

.jb-chips{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.jb-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
  font-weight: 900;
  font-size: 12px;
  color:#333;
}

.jb-divider{
  height:1px;
  background: rgba(0,0,0,.08);
  margin: 14px 0;
}

.jb-price{
  display:flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}

.jb-price-now{
  font-size: 34px;
  font-weight: 950;
  color:#0f1a1f;
}

.jb-price-old{
  font-size: 15px;
  font-weight: 900;
  color:#9aa3aa;
  text-decoration: line-through;
}

.jb-price-note{
  margin: 0 0 14px;
  color:#647079;
  font-weight: 800;
  font-size: 13px;
}

/* =========================
   VARIANTS (SELECTOR PESO)
========================= */
.jb-variants{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  padding: 14px;
  background: #fff;
  margin-bottom: 14px;
}

.jb-variants-head{
  display:flex;
  align-items: baseline;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.jb-variants-head strong{
  font-weight: 950;
  color:#0f1a1f;
}

.jb-variants-hint{
  font-size: 12px;
  font-weight: 800;
  color:#647079;
}

.jb-variants-options{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

.jb-variant-option{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  font-weight: 950;
  font-size: 13px;
  color:#0f1a1f;
  text-decoration:none;
  transition: .15s ease;
  min-width: 72px;
}

.jb-variant-option:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
}

.jb-variant-option.is-active{
  border-color: rgba(255,122,0,.55);
  background: rgba(255,122,0,.10);
  color:#ff7a00;
}

/* =========================
   STOCK CARD
========================= */
.jb-stock-card{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  padding: 14px;
  background: #fff;
}

.jb-stock-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(0,0,0,.12);
  margin-bottom: 10px;
}

.jb-stock-number{
  font-weight: 950;
  color:#0a7a2e;
}

.jb-stock-warning{
  display:flex;
  gap:10px;
  align-items:flex-start;
  color:#647079;
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 12px;
}

.jb-stock-warning i{
  margin-top: 2px;
  opacity: .85;
}

/* Buttons */
.jb-btn{
  display:inline-flex;
  width:100%;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 999px;
  font-weight: 950;
  font-size: 14px;
  text-decoration:none;
  border: 1px solid transparent;
  transition: .15s ease;
}

.jb-btn-wa{
  background: #14a44d;
  color:#fff;
}
.jb-btn-wa:hover{ filter: brightness(.95); transform: translateY(-1px); }

.jb-actions{
  margin-top: 14px;
}

.jb-btn-primary{
  background:#ff7a00;
  color:#fff;
}
.jb-btn-primary:hover{ background:#e86f00; transform: translateY(-1px); }

/* =========================
   DESCRIPTION
========================= */
.jb-description-card{
  margin-top: 18px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius: 20px;
  box-shadow: 0 12px 35px rgba(0,0,0,.06);
  overflow:hidden;
}

.jb-description-head{
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.jb-description-head h3{
  margin:0 0 6px;
  font-weight: 950;
  font-size: 22px;
  color:#0f1a1f;
}

.jb-description-head p{
  margin:0;
  color:#647079;
  font-weight: 800;
  font-size: 13px;
}

.jb-description-body{
  padding: 18px;
  color:#0f1a1f;
  font-weight: 700;
  line-height: 1.7;
}

.jb-muted{
  color:#647079;
  font-weight: 800;
}

/* =========================
   RELATED
========================= */
.jb-related-wrap{
  margin-top: 26px;
  padding-top: 8px;

  /* ✅ CLAVE: contexto para que nada se pinte por encima del header */
  position: relative;
  z-index: 1;
}

.jb-related-title{
  text-align:center;
  margin-bottom: 14px;
}

.jb-related-title h2{
  margin:0;
  font-size: 40px;
  font-weight: 950;
  color:#0f1a1f;
}

.jb-related-title h2 span{
  color:#ff7a00;
}

.jb-related-title p{
  margin: 6px 0 0;
  color:#647079;
  font-weight: 800;
}

@media (max-width: 991.98px){
  .jb-related-title h2{ font-size: 30px; }
}

.jb-related-carousel{
  margin-top: 18px;
  position: relative;
  padding: 0 34px;
}

@media (max-width: 575.98px){
  .jb-related-carousel{ padding: 0 18px; }
}

.jb-rel-card{
  border-radius: 18px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  background:#fff;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height: 100%;
}

.jb-rel-media{
  height: 190px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,0));
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.jb-rel-media a{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.jb-rel-media img{
  width:auto;
  height:100%;
  max-width:100%;
  object-fit:contain;
  display:block;
}

.jb-rel-badge{
  position:absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
  padding: 6px 10px;
  border-radius:999px;
  font-size: 12px;
  font-weight: 950;
  border: 1px solid rgba(255,122,0,.25);
  background: rgba(255,122,0,.12);
  color:#ff7a00;
}

.jb-rel-body{
  padding: 12px 12px 14px;
  display:flex;
  flex-direction:column;
  flex: 1;
}

.jb-rel-title{
  font-size: 12.5px;
  font-weight: 950;
  margin: 0;
  text-transform: uppercase;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 32px;
}

.jb-rel-meta{
  display:flex;
  gap:6px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 800;
  color:#666;
}

.jb-rel-meta span{
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
  padding: 3px 7px;
  border-radius: 999px;
}

.jb-rel-price{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  align-items: baseline;
}

.jb-rel-now{
  font-weight: 950;
  font-size: 15px;
  color:#0f1a1f;
}

.jb-rel-old{
  font-weight: 900;
  color:#9aa3aa;
  text-decoration: line-through;
  font-size: 12px;
}

.jb-rel-btn{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 10px 12px;
  width:100%;
  border-radius: 999px;
  background:#ff7a00;
  color:#fff;
  font-weight: 950;
  text-decoration:none;
}
.jb-rel-btn:hover{ background:#e86f00; }

/* Flechas Owl (z-index BAJO para no tapar el header) */
.jb-related-carousel .owl-nav{
  position:absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2; /* ✅ antes 50 */
}

.jb-related-carousel .owl-nav button{
  pointer-events: auto;
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  transition: .15s ease;
  z-index: 3; /* ✅ antes 51 */
}

.jb-related-carousel .owl-nav button:hover{
  transform: translateY(-50%) scale(1.03);
  box-shadow: 0 18px 40px rgba(0,0,0,.16);
}

/* ✅ MÁS SEPARADAS (afuera) */
.jb-related-carousel .owl-nav .owl-prev{ left: -26px; }
.jb-related-carousel .owl-nav .owl-next{ right: -26px; }

.jb-related-carousel .owl-nav button i{
  font-size: 16px;
  color:#ff7a00;
}

/* ✅ en móvil vuelven un poquito hacia adentro */
@media (max-width: 575.98px){
  .jb-related-carousel .owl-nav button{ width: 40px; height: 40px; }
  .jb-related-carousel .owl-nav .owl-prev{ left: -10px; }
  .jb-related-carousel .owl-nav .owl-next{ right: -10px; }
}

/* =========================
   RELATED - Flechas externas (clic 100% seguro)
   (si las usas, z-index BAJO para NO tapar el header)
========================= */
.jb-related-carousel-wrap{
  position: relative;
}

.jb-owl-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 14px 34px rgba(0,0,0,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  transition: .15s ease;

  /* ✅ antes 9999 */
  z-index: 3;

  pointer-events: auto;
  cursor: pointer;
}

.jb-owl-arrow:hover{
  transform: translateY(-50%) scale(1.03);
  box-shadow: 0 18px 40px rgba(0,0,0,.16);
}

.jb-owl-arrow i{
  font-size: 16px;
  color:#ff7a00;
}

/* ✅ más separadas (afuera) */
.jb-owl-prev{ left: -26px; }
.jb-owl-next{ right: -26px; }

@media (max-width: 575.98px){
  .jb-owl-arrow{ width: 40px; height: 40px; }
  .jb-owl-prev{ left: -10px; }
  .jb-owl-next{ right: -10px; }
}