/* ============================================================
   GrupoMedic Ortopedia · bloques "Productos similares" y
   "Complementarios" de la ficha de producto — design system v7
   ============================================================ */
.tp-suggested-product-slider{ padding: 10px 0 6px; }

/* ---- título de sección ---- */
.tp-suggested-product-slider .tp-underline-title{
  font-size: 29px !important;
  font-weight: 400 !important;
  letter-spacing: -.02em;
  color: #14231c !important;
  padding-bottom: 16px !important;
  border-bottom: none !important;
}
.tp-suggested-product-slider .tp-underline-title::after,
.tp-suggested-product-slider .tp-underline-title::before{
  background: #c5f06f !important;
  height: 4px !important;
  width: 76px !important;
  border-radius: 999px !important;
}

/* ---- tarjetas ---- */
.tp-suggested-product-slider .card{
  border: 1px solid #e4eae6 !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  background: #fff;
  overflow: hidden;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.tp-suggested-product-slider .card:hover{
  transform: translateY(-6px);
  border-color: #c5f06f !important;
  box-shadow: 0 16px 34px rgba(20,35,28,.13) !important;
}
.tp-suggested-product-slider .card img{ transition: transform .38s ease; }
.tp-suggested-product-slider .card:hover img{ transform: scale(1.05); }

/* ---- eyebrow de categoría ---- */
.tp-suggested-product-slider .card small.text-muted{
  color: #509875 !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
}

/* ---- nombre del producto (2 líneas, sin cortar a la mitad) ---- */
.tp-suggested-product-slider .card h6{
  font-size: 15.5px !important;
  font-weight: 500 !important;
  color: #14231c !important;
  line-height: 1.32 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  margin: 7px 0 9px !important;
  min-height: 2.64em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ---- precio ---- */
.tp-suggested-product-slider .card .oe_currency_value,
.tp-suggested-product-slider .card .text-primary{
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #2f6a4c !important;
  letter-spacing: -.01em;
}

/* ---- flechas del carrusel ---- */
.tp-suggested-product-slider .tp-slider-arrows > *,
.tp-suggested-product-slider [class*="arrow"]{
  width: 38px; height: 38px; border-radius: 50%;
  background: #f0f4f2;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s ease;
}
.tp-suggested-product-slider .tp-slider-arrows > *:hover,
.tp-suggested-product-slider [class*="arrow"]:hover{ background: #c5f06f; }

@media (max-width: 767px){
  .tp-suggested-product-slider .tp-underline-title{ font-size: 23px !important; }
  .tp-suggested-product-slider .card{ border-radius: 16px !important; }
}

/* ---- alturas homogéneas entre tarjetas y bloques ---- */
.tp-suggested-product-slider .card{ height: 100%; display: flex; flex-direction: column; }
.tp-suggested-product-slider .card > a{
  display: flex !important; align-items: center; justify-content: center;
  min-height: 196px; padding: 18px 14px !important;
}
.tp-suggested-product-slider .card img{
  max-height: 168px; width: auto; object-fit: contain;
}
.tp-suggested-product-slider .card .card-body,
.tp-suggested-product-slider .card > div:last-child{ padding: 0 16px 16px !important; }

/* ---- aire alrededor del bloque ---- */
.tp-suggested-product-slider{ margin-bottom: 26px; }
#wrapwrap .tp-suggested-product-slider .row > div{ margin-bottom: 6px; }

/* ---- separación del footer ---- */
.tp-suggested-product-slider{ padding-bottom: 30px; }
#wrapwrap main .tp-suggested-product-slider:last-of-type{ margin-bottom: 44px; }

/* ============================================================
   v2 · el theme mete cada bloque en un col-md-6: si solo hay uno
   (producto sin complementarios) quedaba media pantalla vacía
   ============================================================ */
.row > .col-md-6:only-child:has(.tp-suggested-product-slider){
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* ---- botones del carrusel: círculo con hover lima ---- */
.tp-slider-controls{ display: flex; gap: 8px; }
.tp-slider-controls .btn{
  width: 40px !important; height: 40px !important;
  border-radius: 50% !important;
  background: #f0f4f2 !important;
  color: #14231c !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  padding: 0 !important; border: none !important;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.tp-slider-controls .btn:hover{ background: #c5f06f !important; transform: translateY(-2px); }
.tp-slider-controls .btn i{ font-size: 14px; }

/* ---- la sección respira y se separa del contenido anterior ---- */
.tp-suggested-product-slider{
  background: #fbfdfc;
  border: 1px solid #eef3f0;
  border-radius: 24px;
  padding: 26px 26px 22px !important;
}
.tp-suggested-product-slider .tp-underline-title{ margin-bottom: 4px !important; }

/* ---- las tarjetas, sobre el fondo suave, en blanco puro ---- */
.tp-suggested-products-cards .card{ background: #fff !important; }

/* ---- guiño de marca al pasar por encima ---- */
.tp-suggested-products-cards .card:hover .oe_currency_value{ color: #14231c !important; }

/* ============================================================
   v3 · con pocos productos el carrusel dejaba las tarjetas
   apelotonadas a la izquierda: que se repartan el ancho y
   desaparezcan las flechas cuando no hay nada que deslizar
   ============================================================ */
.owl-stage-outer:not(:has(.owl-item:nth-child(5))) .owl-stage{
  display: flex !important;
  width: 100% !important;
  transform: none !important;
  gap: 20px;
}
.owl-stage-outer:not(:has(.owl-item:nth-child(5))) .owl-item{
  flex: 1 1 0 !important;
  width: auto !important;
  margin: 0 !important;
}
.tp-suggested-product-slider:has(.owl-stage-outer:not(:has(.owl-item:nth-child(5)))) .tp-slider-controls{
  display: none !important;
}

/* ---- fondo de sección con algo más de presencia ---- */
.tp-suggested-product-slider{
  background: #f5f9f7 !important;
  border-color: #e7efea !important;
  padding: 28px 28px 24px !important;
}

/* v4 · especificidad: el theme pisa el fondo de la sección */
#wrapwrap .tp-suggested-product-slider{
  background: #f5f9f7 !important;
  border: 1px solid #e7efea !important;
  border-radius: 24px !important;
  padding: 28px 28px 24px !important;
}
#wrapwrap .tp-suggested-products-cards .card{ background: #fff !important; }