/* === ESTRUCTURA GENERAL === */

.row.flex-align {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 30px;
}

.row.flex-align .span5,
.row.flex-align .span7 {
  flex: 0 0 auto;
}

.row.flex-align .span7 {
  align-self: flex-start;
}

.summary.entry-summary {
  padding-top: 10px;
}

.summary.entry-summary > div,
.summary.entry-summary > p,
.summary.entry-summary > form {
  margin-bottom: 15px;
}


/* === GALERÍA PRINCIPAL === */

.images.product-gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  max-height: 640px;
  overflow: hidden;
  text-align: center;
  margin: 0 auto;
}

.images.product-gallery .main-image {
  max-width: 100%;
  max-height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.images.product-gallery .main-image img {
  max-height: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}


/* === MINIATURAS === */

.images.product-gallery .thumbnails {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 100%;
  overflow-x: auto;
  margin-top: 20px;
}

.images.product-gallery .thumbnails img {
  width: 80px;
  height: auto;
  cursor: pointer;
  object-fit: contain;
  border: 2px solid transparent;
  transition: border-color 0.2s ease-in-out;
}

.images.product-gallery .thumbnails img:hover {
  border-color: #d00;
}


/* === TÍTULO Y HEADER === */

.producto-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.producto-header .marca {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Estilo correcto para imagen del logo de marca */
/* Reforzamos el tamaño del logo de marca */
.producto-header img.marca,
.producto-header .marca img,
.summary .marca img,
img.marca {
  max-height: 32px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}
.producto-header .marca-nombre {
  font-size: 14px;
  font-weight: bold;
}

.producto-header .estrellas {
  font-size: 16px;
}


/* === TÍTULO === */

h1.title-header {
  font-size: 22px;
  font-weight: bold;
  margin: 0 0 15px 0;
}


/* === SUBTÍTULO === */

.subtitulo-producto {
  margin-top: 10px;
  font-size: 14px;
  font-family: 'Open Sans', sans-serif;
  color: #444;
}

/* TABS */

/* Restaurar los tabs y controlar su ancho sin romper nada */
.woocommerce-tabs {
  overflow-x: hidden;       /* evita que se desborde sin ocultar contenido útil */
  width: 100%;
}

.woocommerce-tabs .tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin-bottom: 20px;
  list-style: none;
  border-bottom: 1px solid #ddd;
}

.woocommerce-tabs .tabs li {
  display: inline-block;
}

.woocommerce-tabs .panel {
  display: block;
  max-width: 100%;
  padding: 10px 0;
  overflow-x: auto;
}

.woocommerce-tabs table {
  width: 100%;
  table-layout: auto;
  word-break: break-word;
}


/* RELACIONADOS */

.productos-relacionados-wrapper {
  overflow-x: auto;
  padding-bottom: 20px;
  margin-bottom: 40px;
}

.productos-relacionados-wrapper ul.products {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  padding: 0;
  margin: 0;
  list-style: none;
  width: max-content;
}

.productos-relacionados-wrapper ul.products li {
  flex: 0 0 auto;
  width: 200px;
  text-align: center;
}

=== PANEL DE TABS (colores de marca) === */

body #motopress-main.main-holder .content-holder div.product div.panel,
body #motopress-main.main-holder .content-holder div.product div .tabs li.active a {
  background-color: var(--panel-color-bg);
  color: var(--panel-color-font);
}

body #motopress-main.main-holder .content-holder div.product div .tabs li a {
  background-color: var(--panel-color-2nd);
}


/* === RESPONSIVE ADAPTATIONS === */

@media screen and (max-width: 768px) {
  .producto-header {
    flex-direction: column;
    align-items: flex-start;
  }

  h1.title-header {
    font-size: 18px;
  }

  .images.product-gallery .main-image {
    max-height: 400px;
  }
}

/* === MODERNIZACIÓN TABS PRODUCTO === */
.nav-tabs {
  border-bottom: 2px solid #ddd;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 20px;
}

.nav-tabs > li {
  margin-bottom: -2px;
}

.nav-tabs > li > a {
  background-color: #f8f8f8;
  border: 1px solid #ccc;
  border-radius: 0.5rem 0.5rem 0 0;
  padding: 10px 15px;
  color: #333;
  font-weight: 600;
  transition: all 0.3s ease;
}

.nav-tabs > li.active > a,
.nav-tabs > li > a:hover {
  background-color: #fff;
  border-color: #ccc #ccc transparent;
  color: #000;
}

.tab-content {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 0 0 0.5rem 0.5rem;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* Responsive */
@media (max-width: 768px) {
  .nav-tabs {
    flex-direction: column;
  }

  .nav-tabs > li > a {
    border-radius: 0.5rem;
  }
}

/* === CARRUSEL PRODUCTOS RELACIONADOS === */
.carousel-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  margin: 20px 0;
  gap: 10px;
}

.carousel-relacionados {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 10px;
  padding: 10px 0;
  flex: 1;
}

.rel-item {
  min-width: 180px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  transition: box-shadow 0.3s ease;
}

.rel-item:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.carousel-nav {
  background: #eee;
  border: none;
  font-size: 20px;
  padding: 10px 12px;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s ease;
}

.carousel-nav:hover {
  background: #ccc;
}