/* ============================================================
   CRL PARTS · FICHA DE PRODUCTO · v3
   ------------------------------------------------------------
   JERARQUIA REAL
   Container            .crl-product-page
     Column 1/1         .crl-pdp
       Nested Columns   (breadcrumb + codigo)
       Nested Columns
         Nested Column  .crl-pdp-gallery
         Nested Column  .crl-pdp-details
   ------------------------------------------------------------
   Reemplaza por completo la version anterior.
   Cada selector aparece UNA sola vez.
   ------------------------------------------------------------
   INDICE
   1. Contenedor, ancho y columnas
   2. Breadcrumb
   3. Galeria
   4. Titulo y meta
   5. Precio y stock
   6. Descripcion
   7. Especificaciones
   8. Cantidad y compra
   9. Tags
   10. Bloque de confianza
   11. Responsive
   ============================================================ */


/* ============================================================
   1. CONTENEDOR, ANCHO Y COLUMNAS
   ------------------------------------------------------------
   .fusion-row identifica SOLO la fila principal del container.
   Las filas anidadas usan .fusion-builder-row-inner, por eso
   no se tocan aqui.
   ============================================================ */

html body .crl-product-page {
  background: #FFFFFF !important;
  overflow-x: clip !important;
}

html body .crl-product-page .fusion-row {
  max-width: 1280px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  box-sizing: border-box !important;
}

html body .crl-pdp {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  float: none !important;
}

html body .crl-product-page .fusion-layout-column,
html body .crl-product-page .fusion-column-wrapper {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html body .crl-pdp-gallery {
  padding-right: 24px !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html body .crl-pdp-details {
  padding-left: 24px !important;
  padding-top: 4px !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Ningun widget de la columna derecha flota ni se sale */
html body .crl-pdp-price,
html body .crl-pdp-price.floated,
html body .crl-pdp-stock,
html body .crl-pdp-specs,
html body .crl-pdp-desc,
html body .crl-pdp-cart,
html body .crl-pdp-tags,
html body .crl-pdp-trust {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}


/* ============================================================
   2. BREADCRUMB
   ============================================================ */

html body .crl-product-page .fusion-breadcrumbs,
html body .crl-product-page .awb-breadcrumbs {
  font-family: 'Roboto', sans-serif !important;
  font-size: 12px !important;
  color: #6B7280 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .crl-product-page .fusion-breadcrumbs a,
html body .crl-product-page .awb-breadcrumbs a {
  color: #4B5563 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

html body .crl-product-page .fusion-breadcrumbs a:hover,
html body .crl-product-page .awb-breadcrumbs a:hover {
  color: #075DA7 !important;
}


/* ============================================================
   3. GALERIA
   ------------------------------------------------------------
   Reemplaza por completo la seccion 3 anterior.
   Incluye las flechas de navegacion con colores CRL.
   Sin SVG ni caracteres prohibidos: apto para FluentSnippets.
   ------------------------------------------------------------
   3.1  Contenedor y marco
   3.2  Imagen principal
   3.3  Miniaturas
   3.4  Flechas de navegacion
   3.5  Responsive de la galeria
   ============================================================ */


/* ------------------------------------------------------------
   3.1 · CONTENEDOR Y MARCO
   position:relative en los dos contenedores posibles: FlexSlider
   inyecta .flex-direction-nav dentro de uno u otro segun version.
   Como ambos arrancan en el borde superior de la imagen, la
   referencia vertical es la misma en los dos casos.
   ------------------------------------------------------------ */

html body .crl-pdp-gallery .woocommerce-product-gallery,
html body .crl-pdp-gallery .flex-viewport {
  position: relative !important;
}

html body .crl-pdp-gallery .woocommerce-product-gallery__wrapper,
html body .crl-pdp-gallery .fusion-woo-product-images {
  margin: 0 !important;
}

html body .crl-pdp-gallery .woocommerce-product-gallery__image:first-child,
html body .crl-pdp-gallery .flex-viewport {
  background-image: linear-gradient(135deg, #F5F7FA 0%, #E8EDF3 100%) !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin-bottom: 14px !important;
}


/* ------------------------------------------------------------
   3.2 · IMAGEN PRINCIPAL
   ------------------------------------------------------------ */

html body .crl-pdp-gallery .woocommerce-product-gallery__image img,
html body .crl-pdp-gallery .flex-viewport img {
  width: 100% !important;
  height: 440px !important;
  object-fit: contain !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  display: block !important;
}


/* ------------------------------------------------------------
   3.3 · MINIATURAS
   ------------------------------------------------------------ */

html body .crl-pdp-gallery ol.flex-control-thumbs,
html body .crl-pdp-gallery .fusion-woo-product-images-thumbnails {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  float: none !important;
}

html body .crl-pdp-gallery ol.flex-control-thumbs li {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  list-style: none !important;
}

html body .crl-pdp-gallery ol.flex-control-thumbs li img {
  width: 100% !important;
  height: 76px !important;
  object-fit: contain !important;
  padding: 6px !important;
  box-sizing: border-box !important;
  background: #F5F7FA !important;
  border: 2px solid #E5E7EB !important;
  border-radius: 8px !important;
  opacity: 1 !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease !important;
}

html body .crl-pdp-gallery ol.flex-control-thumbs li img:hover {
  border-color: #2688E4 !important;
}

html body .crl-pdp-gallery ol.flex-control-thumbs li img.flex-active {
  border-color: #075DA7 !important;
}


/* ------------------------------------------------------------
   3.4 · FLECHAS DE NAVEGACION
   El texto "Previous"/"Next" se oculta con font-size 0 y no con
   display:none, para que el lector de pantalla siga leyendolo.
   El chevron se dibuja con bordes, sin SVG.
   Se posicionan a 220px, la mitad de los 440px de la imagen.
   ------------------------------------------------------------ */

html body .crl-pdp-gallery ul.flex-direction-nav,
html body .crl-pdp-gallery ul.flex-direction-nav li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html body .crl-pdp-gallery .flex-direction-nav a {
  position: absolute !important;
  top: 220px !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;

  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 14px rgba(5, 8, 13, 0.12) !important;

  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  text-indent: 0 !important;
  text-shadow: none !important;

  opacity: 0 !important;
  cursor: pointer !important;
  transition: opacity 0.25s ease, background 0.25s ease,
              border-color 0.25s ease, box-shadow 0.25s ease !important;
}

html body .crl-pdp-gallery:hover .flex-direction-nav a,
html body .crl-pdp-gallery .flex-direction-nav a:focus {
  opacity: 1 !important;
}

html body .crl-pdp-gallery .flex-direction-nav a:hover {
  background: #075DA7 !important;
  border-color: #075DA7 !important;
  box-shadow: 0 6px 18px rgba(7, 93, 167, 0.30) !important;
}

/* Neutraliza el icono propio del tema */
html body .crl-pdp-gallery .flex-direction-nav a::after {
  content: none !important;
  display: none !important;
}

/* Chevron dibujado con bordes */
html body .crl-pdp-gallery .flex-direction-nav a::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 10px !important;
  height: 10px !important;
  border-top: 2px solid #075DA7 !important;
  border-right: 2px solid #075DA7 !important;
  background: none !important;
  font-family: inherit !important;
  font-size: 0 !important;
  transition: border-color 0.25s ease !important;
}

html body .crl-pdp-gallery .flex-direction-nav a:hover::before {
  border-top-color: #FFFFFF !important;
  border-right-color: #FFFFFF !important;
}

html body .crl-pdp-gallery .flex-direction-nav .flex-prev {
  left: 14px !important;
  right: auto !important;
}

html body .crl-pdp-gallery .flex-direction-nav .flex-prev::before {
  transform: translate(-35%, -50%) rotate(-135deg) !important;
}

html body .crl-pdp-gallery .flex-direction-nav .flex-next {
  right: 14px !important;
  left: auto !important;
}

html body .crl-pdp-gallery .flex-direction-nav .flex-next::before {
  transform: translate(-65%, -50%) rotate(45deg) !important;
}

/* Flecha desactivada en los extremos de la galeria */
html body .crl-pdp-gallery .flex-direction-nav a.flex-disabled {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* En tactil no hay hover: siempre visibles */
@media (hover: none) {
  html body .crl-pdp-gallery .flex-direction-nav a {
    opacity: 1 !important;
  }
}


/* ------------------------------------------------------------
   3.5 · RESPONSIVE DE LA GALERIA
   La posicion vertical de las flechas sigue la altura de la
   imagen definida en la seccion 11: 360px y 280px.
   ------------------------------------------------------------ */

@media only screen and (max-width: 1024px) {

  html body .crl-pdp-gallery .flex-direction-nav a {
    top: 180px !important;
  }
}

@media only screen and (max-width: 640px) {

  html body .crl-pdp-gallery .flex-direction-nav a {
    top: 140px !important;
    width: 36px !important;
    height: 36px !important;
  }

  html body .crl-pdp-gallery .flex-direction-nav .flex-prev {
    left: 8px !important;
  }

  html body .crl-pdp-gallery .flex-direction-nav .flex-next {
    right: 8px !important;
  }

  html body .crl-pdp-gallery ol.flex-control-thumbs {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ============================================================
   4. TITULO Y META
   ============================================================ */

html body .crl-pdp-title,
html body .crl-pdp-title h1,
html body .crl-pdp-title h2,
html body .crl-pdp-title .fusion-title-heading {
  font-family: 'Roboto', sans-serif !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  color: #05080D !important;
  letter-spacing: -1px !important;
  line-height: 1.15 !important;
  text-transform: none !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
}

/* SKU y Vendido por en linea, sin fila de columnas */
html body .crl-pdp-meta {
  display: inline-block !important;
  vertical-align: top !important;
  width: auto !important;
  margin: 0 26px 0 0 !important;
  padding: 0 !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 12px !important;
  color: #6B7280 !important;
  line-height: 1.5 !important;
}

html body .crl-pdp-meta:last-of-type {
  margin-right: 0 !important;
}

html body .crl-pdp-meta p,
html body .crl-pdp-meta span {
  font-family: 'Roboto', sans-serif !important;
  font-size: 12px !important;
  color: #6B7280 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .crl-pdp-meta strong,
html body .crl-pdp-meta b,
html body .crl-pdp-meta a {
  color: #05080D !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

html body .crl-pdp-meta a:hover {
  color: #075DA7 !important;
}


/* ============================================================
   5. PRECIO Y STOCK
   ============================================================ */

html body .crl-pdp-price {
  background: #F5F7FA !important;
  border: 1px solid #E5E7EB !important;
  border-bottom: none !important;
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
  padding: 20px 20px 6px 20px !important;
  margin: 20px 0 0 0 !important;
}

html body .crl-pdp-price .price,
html body .crl-pdp-price .amount,
html body .crl-pdp-price .woocommerce-Price-amount,
html body .crl-pdp-price .woocommerce-Price-amount bdi,
html body .crl-pdp-price .fusion-woo-price {
  font-family: 'Roboto', sans-serif !important;
  font-size: 36px !important;
  font-weight: 900 !important;
  color: #05080D !important;
  letter-spacing: -1.2px !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .crl-pdp-price del,
html body .crl-pdp-price del .woocommerce-Price-amount {
  font-size: 18px !important;
  font-weight: 400 !important;
  color: #94A3B8 !important;
  margin-right: 10px !important;
}

html body .crl-pdp-stock {
  background: #F5F7FA !important;
  border: 1px solid #E5E7EB !important;
  border-top: none !important;
  border-bottom-left-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
  padding: 8px 20px 18px 20px !important;
  margin: 0 0 20px 0 !important;
}

html body .crl-pdp-stock .stock,
html body .crl-pdp-stock p {
  font-family: 'Roboto', sans-serif !important;
  font-size: 12px !important;
  color: #6B7280 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .crl-pdp-stock .stock.in-stock {
  color: #075DA7 !important;
  font-weight: 500 !important;
}

html body .crl-pdp-stock .stock.out-of-stock {
  color: #B91C1C !important;
  font-weight: 500 !important;
}


/* ============================================================
   6. DESCRIPCION
   ============================================================ */

html body .crl-pdp-desc,
html body .crl-pdp-desc p {
  font-family: 'Roboto', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #4B5563 !important;
  line-height: 1.7 !important;
  margin: 0 0 20px 0 !important;
}


/* ============================================================
   7. ESPECIFICACIONES
   ============================================================ */

html body .crl-pdp-specs-title,
html body .crl-pdp-specs-title h2,
html body .crl-pdp-specs-title h3,
html body .crl-pdp-specs-title .fusion-title-heading {
  font-family: 'Roboto', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #05080D !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
}

html body .crl-pdp-specs {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 20px 0 !important;
}

html body .crl-pdp-specs table,
html body .crl-pdp-specs table.shop_attributes {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-collapse: collapse !important;
  background: transparent !important;
  table-layout: fixed !important;
}

html body .crl-pdp-specs table tr,
html body .crl-pdp-specs table.shop_attributes tr {
  border: none !important;
  border-bottom: 1px solid #E5E7EB !important;
  background: transparent !important;
}

html body .crl-pdp-specs table tr:last-child,
html body .crl-pdp-specs table.shop_attributes tr:last-child {
  border-bottom: none !important;
}

html body .crl-pdp-specs table th,
html body .crl-pdp-specs table.shop_attributes th {
  width: 180px !important;
  padding: 12px 18px !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #6B7280 !important;
  text-align: left !important;
  text-transform: none !important;
  border: none !important;
  background: transparent !important;
  line-height: 1.4 !important;
  word-break: break-word !important;
}

html body .crl-pdp-specs table td,
html body .crl-pdp-specs table.shop_attributes td {
  padding: 12px 18px !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #05080D !important;
  text-align: left !important;
  font-style: normal !important;
  border: none !important;
  background: transparent !important;
  line-height: 1.4 !important;
  word-break: break-word !important;
}

html body .crl-pdp-specs table td p,
html body .crl-pdp-specs table.shop_attributes td p {
  margin: 0 !important;
  padding: 0 !important;
  font-style: normal !important;
}


/* ============================================================
   8. CANTIDAD Y COMPRA
   ------------------------------------------------------------
   Avada inserta .fusion-button-wrapper por JS tras cargar.
   El layout se define DENTRO de ese wrapper, no en el form,
   para que el reordenamiento del JS no lo rompa.
   Fila 1: CANTIDAD + selector · Fila 2: boton
   ============================================================ */

html body .crl-pdp-cart form.cart,
html body .crl-pdp-cart .fusion-woo-add-to-cart {
  display: block !important;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

html body .crl-pdp-cart .fusion-button-wrapper {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  align-content: flex-start !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

html body .crl-pdp-cart .fusion-button-wrapper::before {
  content: 'CANTIDAD' !important;
  order: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  height: 36px !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #6B7280 !important;
  letter-spacing: 1px !important;
}

html body .crl-pdp-cart .quantity,
html body .crl-pdp-cart .quantity.buttons_added {
  order: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

html body .crl-pdp-cart .quantity input.qty {
  width: 50px !important;
  height: 36px !important;
  text-align: center !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #05080D !important;
  background: #FFFFFF !important;
  border: none !important;
  border-left: 1px solid #E5E7EB !important;
  border-right: 1px solid #E5E7EB !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  -moz-appearance: textfield !important;
}

html body .crl-pdp-cart .quantity input.qty::-webkit-outer-spin-button,
html body .crl-pdp-cart .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

html body .crl-pdp-cart .quantity input.minus,
html body .crl-pdp-cart .quantity input.plus,
html body .crl-pdp-cart .quantity .minus,
html body .crl-pdp-cart .quantity .plus {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  color: #05080D !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}

html body .crl-pdp-cart .quantity input.minus:hover,
html body .crl-pdp-cart .quantity input.plus:hover,
html body .crl-pdp-cart .quantity .minus:hover,
html body .crl-pdp-cart .quantity .plus:hover {
  background: #F5F7FA !important;
  background-color: #F5F7FA !important;
  color: #075DA7 !important;
}

html body .crl-pdp-cart .quantity label.screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .crl-pdp-cart button.single_add_to_cart_button,
html body .crl-pdp-cart .single_add_to_cart_button.button {
  order: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  float: none !important;
  background: #075DA7 !important;
  background-color: #075DA7 !important;
  background-image: none !important;
  border: none !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  color: #FFFFFF !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  text-transform: none !important;
  padding: 14px 24px !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  transition: background 0.25s ease !important;
}

html body .crl-pdp-cart button.single_add_to_cart_button:hover,
html body .crl-pdp-cart .single_add_to_cart_button.button:hover {
  background: #05080D !important;
  background-color: #05080D !important;
  color: #FFFFFF !important;
}


/* ============================================================
   9. TAGS
   ============================================================ */

html body .crl-pdp-tags {
  font-family: 'Roboto', sans-serif !important;
  font-size: 12px !important;
  color: #6B7280 !important;
  border-top: 1px solid #E5E7EB !important;
  padding: 16px 0 0 0 !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

html body .crl-pdp-tags a {
  color: #075DA7 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

html body .crl-pdp-tags a:hover {
  color: #2688E4 !important;
}


/* ============================================================
   10. BLOQUE DE CONFIANZA
   ------------------------------------------------------------
   Estructura Avada: .col contiene .heading (icono + titulo),
   .fusion-clearfix y .content-container.
   El clearfix NO se oculta: es lo que baja el texto.
   Resultado por caja:  [icono] Titulo
                                Descripcion
   ============================================================ */

html body .crl-pdp-trust {
  margin: 20px 0 0 0 !important;
  padding: 20px 0 0 0 !important;
  border-top: 1px solid #E5E7EB !important;
}

html body .crl-pdp-trust .content-box-column {
  padding: 0 16px 0 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

html body .crl-pdp-trust .col,
html body .crl-pdp-trust .content-wrapper {
  display: block !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

html body .crl-pdp-trust .heading,
html body .crl-pdp-trust .heading.heading-with-icon,
html body .crl-pdp-trust .heading.icon-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  float: none !important;
  width: 100% !important;
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

html body .crl-pdp-trust .heading .icon {
  position: static !important;
  float: none !important;
  order: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  line-height: 1 !important;
}

html body .crl-pdp-trust .heading .icon i,
html body .crl-pdp-trust i.fontawesome-icon {
  color: #075DA7 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: 22px !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .crl-pdp-trust .heading h2,
html body .crl-pdp-trust .heading h3,
html body .crl-pdp-trust .heading h4,
html body .crl-pdp-trust .content-box-heading {
  order: 2 !important;
  flex: 1 1 auto !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #05080D !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .crl-pdp-trust .content-container {
  --awb-content-padding-left: 0 !important;
  display: block !important;
  clear: both !important;
  float: none !important;
  width: auto !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 11px !important;
  color: #6B7280 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  padding: 0 0 0 32px !important;
  text-indent: 0 !important;
}

html body .crl-pdp-trust .content-container p {
  font-size: 11px !important;
  color: #6B7280 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ============================================================
   11. RESPONSIVE
   ============================================================ */

@media only screen and (max-width: 1024px) {
  html body .crl-product-page .fusion-row {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  html body .crl-pdp-gallery {
    padding-right: 0 !important;
  }

  html body .crl-pdp-details {
    padding-left: 0 !important;
    padding-top: 24px !important;
  }

  html body .crl-pdp-gallery .woocommerce-product-gallery__image img,
  html body .crl-pdp-gallery .flex-viewport img {
    height: 360px !important;
  }
}

@media only screen and (max-width: 800px) {
  html body .crl-pdp-trust .content-box-column {
    padding-right: 0 !important;
    margin-bottom: 14px !important;
  }
}

@media only screen and (max-width: 640px) {
  html body .crl-product-page .fusion-row {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  html body .crl-pdp-title,
  html body .crl-pdp-title h1 {
    font-size: 23px !important;
    letter-spacing: -0.5px !important;
  }

  html body .crl-pdp-meta {
    display: block !important;
    margin: 0 0 4px 0 !important;
  }

  html body .crl-pdp-price .woocommerce-Price-amount,
  html body .crl-pdp-price .woocommerce-Price-amount bdi {
    font-size: 28px !important;
  }

  html body .crl-pdp-gallery .woocommerce-product-gallery__image img,
  html body .crl-pdp-gallery .flex-viewport img {
    height: 280px !important;
  }

  html body .crl-pdp-gallery ol.flex-control-thumbs {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  html body .crl-pdp-specs table th,
  html body .crl-pdp-specs table.shop_attributes th {
    width: 120px !important;
    padding: 10px 14px !important;
    font-size: 12px !important;
  }

  html body .crl-pdp-specs table td,
  html body .crl-pdp-specs table.shop_attributes td {
    padding: 10px 14px !important;
    font-size: 12px !important;
  }
}


/* ============================================================
   12. PRODUCTOS RELACIONADOS
   ------------------------------------------------------------
   Woo Related Products usa el loop estandar de WooCommerce
   (ul.products li.product), no el Post Card de la tienda.
   ============================================================ */

/* 12.1 · Titulo de seccion */
html body .crl-related-title,
html body .crl-related-title h2,
html body .crl-related-title h3,
html body .crl-related-title .fusion-title-heading {
  font-family: 'Roboto', sans-serif !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  color: #05080D !important;
  letter-spacing: -0.6px !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
}

/* 12.2 · Grid de 4 columnas */
html body .crl-related ul.products,
html body .crl-related .products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html body .crl-related ul.products li.product {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 10px !important;
  float: none !important;
  clear: none !important;
  list-style: none !important;
  box-sizing: border-box !important;
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  position: relative !important;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
}

html body .crl-related ul.products li.product:hover {
  border-color: #075DA7 !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 24px rgba(7, 93, 167, 0.15) !important;
}

/* 12.3 · Imagen */
html body .crl-related ul.products li.product a.woocommerce-LoopProduct-link {
  display: block !important;
  text-decoration: none !important;
}

html body .crl-related ul.products li.product img {
  width: 100% !important;
  height: 190px !important;
  object-fit: contain !important;
  margin: 0 0 10px 0 !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  background: #F5F7FA !important;
  border-radius: 8px !important;
  display: block !important;
}

/* 12.4 · Nombre del producto */
html body .crl-related ul.products li.product h2,
html body .crl-related ul.products li.product h3,
html body .crl-related ul.products li.product .woocommerce-loop-product__title,
html body .crl-related ul.products li.product .product-title {
  font-family: 'Roboto', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #05080D !important;
  line-height: 1.35 !important;
  letter-spacing: -0.2px !important;
  text-transform: none !important;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 42px !important;
}

/* 12.5 · Precio */
html body .crl-related ul.products li.product .price,
html body .crl-related ul.products li.product .price .amount,
html body .crl-related ul.products li.product .woocommerce-Price-amount,
html body .crl-related ul.products li.product .woocommerce-Price-amount bdi {
  font-family: 'Roboto', sans-serif !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  color: #05080D !important;
  letter-spacing: -0.5px !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .crl-related ul.products li.product .price del,
html body .crl-related ul.products li.product .price del .amount {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #94A3B8 !important;
  margin-right: 6px !important;
}

/* 12.6 · Ocultar Quick View */
html body .crl-related .fusion-quick-view,
html body .crl-related .avada-shortcode-quick-view,
html body .crl-related .fusion-woo-quick-view,
html body .crl-related a.show_details_button,
html body .crl-related .fusion-clean-product-buttons-container .quick-view {
  display: none !important;
}

/* 12.7 · Boton de compra con estilo de la card */
html body .crl-related ul.products li.product a.button,
html body .crl-related ul.products li.product a.add_to_cart_button,
html body .crl-related ul.products li.product a.product_type_simple {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 10px 0 0 0 !important;
  padding: 8px 16px !important;
  background: #05080D !important;
  background-color: #05080D !important;
  background-image: none !important;
  border: none !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  color: #FFFFFF !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  text-transform: none !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  transition: background 0.25s ease !important;
}

html body .crl-related ul.products li.product a.button:hover,
html body .crl-related ul.products li.product a.add_to_cart_button:hover {
  background: #075DA7 !important;
  background-color: #075DA7 !important;
  color: #FFFFFF !important;
}

html body .crl-related ul.products li.product a.button::before,
html body .crl-related ul.products li.product a.add_to_cart_button::before {
  display: none !important;
}

/* 12.8 · Contenedor de botones */
html body .crl-related .fusion-clean-product-buttons-container,
html body .crl-related .product-buttons {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  text-align: left !important;
}

/* 12.9 · Responsive */
@media only screen and (max-width: 1024px) {
  html body .crl-related ul.products,
  html body .crl-related .products {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  html body .crl-related ul.products li.product img {
    height: 160px !important;
  }
}

@media only screen and (max-width: 800px) {
  html body .crl-related ul.products,
  html body .crl-related .products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media only screen and (max-width: 640px) {
  html body .crl-related-title,
  html body .crl-related-title h2 {
    font-size: 20px !important;
  }

  html body .crl-related ul.products li.product img {
    height: 140px !important;
  }
}

/* ============================================================
   12.10 · CORRECCIONES RELACIONADOS
   ============================================================ */

/* El clearfix de WooCommerce ocupa una celda del grid */
html body .crl-related ul.products::before,
html body .crl-related ul.products::after,
html body .crl-related .products::before,
html body .crl-related .products::after {
  display: none !important;
  content: none !important;
}

/* Card con espacio reservado para el boton */
html body .crl-related ul.products li.product {
  display: block !important;
  position: relative !important;
  padding: 10px 10px 58px 10px !important;
}

/* Imagen mas grande y pegada al borde */
html body .crl-related ul.products li.product img {
  height: 170px !important;
  padding: 10px !important;
  margin: 0 0 12px 0 !important;
}

/* SKU sobre el nombre */
html body .crl-related .crl-loop-sku {
  display: block !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #6B7280 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  line-height: 1.4 !important;
  margin: 0 0 4px 0 !important;
}

/* Nombre mas compacto */
html body .crl-related ul.products li.product h2,
html body .crl-related ul.products li.product h3,
html body .crl-related ul.products li.product .woocommerce-loop-product__title {
  font-size: 14px !important;
  min-height: 38px !important;
  margin: 0 0 10px 0 !important;
}

/* Precio con separador superior */
html body .crl-related ul.products li.product .price {
  display: block !important;
  border-top: 1px solid #E5E7EB !important;
  margin: 0 !important;
  padding: 12px 0 0 0 !important;
}

/* Boton anclado abajo a la derecha, sin partirse */
html body .crl-related ul.products li.product a.button,
html body .crl-related ul.products li.product a.add_to_cart_button,
html body .crl-related ul.products li.product a.product_type_simple {
  position: absolute !important;
  right: 10px !important;
  bottom: 12px !important;
  margin: 0 !important;
  white-space: nowrap !important;
  max-width: 60% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ============================================================
   12.11 · BOTON VER EN RELACIONADOS
   ============================================================ */

html body .crl-related ul.products li.product a.add_to_cart_button,
html body .crl-related ul.products li.product a.product_type_simple,
html body .crl-related ul.products li.product a.product_type_variable {
  display: none !important;
}

html body .crl-related ul.products li.product a.crl-loop-ver {
  position: absolute !important;
  right: 10px !important;
  bottom: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 8px 18px !important;
  background: #05080D !important;
  background-color: #05080D !important;
  background-image: none !important;
  border: none !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  color: #FFFFFF !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  text-transform: none !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  transition: background 0.25s ease !important;
}

html body .crl-related ul.products li.product a.crl-loop-ver:hover {
  background: #075DA7 !important;
  background-color: #075DA7 !important;
  color: #FFFFFF !important;
}

html body .crl-related ul.products li.product a.crl-loop-ver::before {
  display: none !important;
}

/* ============================================================
   12.12 · COMPACTAR CARD DE RELACIONADOS
   ============================================================ */

html body .crl-related ul.products li.product {
  padding: 0 0 14px 0 !important;
  overflow: hidden !important;
}

html body .crl-related ul.products li.product img {
  width: 100% !important;
  height: 180px !important;
  object-fit: contain !important;
  padding: 18px !important;
  margin: 0 0 12px 0 !important;
  background: #F5F7FA !important;
  border-radius: 11px 11px 0 0 !important;
  box-sizing: border-box !important;
}

html body .crl-related .crl-loop-sku {
  padding: 0 14px !important;
  margin: 0 0 3px 0 !important;
}

html body .crl-related ul.products li.product h2,
html body .crl-related ul.products li.product h3,
html body .crl-related ul.products li.product .woocommerce-loop-product__title {
  padding: 0 14px !important;
  margin: 0 0 10px 0 !important;
  min-height: 38px !important;
}

html body .crl-related ul.products li.product .price {
  display: flex !important;
  align-items: center !important;
  min-height: 34px !important;
  margin: 0 14px !important;
  padding: 14px 76px 0 0 !important;
  border-top: 1px solid #E5E7EB !important;
}

html body .crl-related ul.products li.product a.crl-loop-ver {
  right: 14px !important;
  bottom: 14px !important;
}

/* ============================================================
   12.13 · RELACIONADOS MOVIL — 1 columna, titulo completo,
           boton VER en flujo debajo del precio

   ============================================================ */

@media only screen and (max-width: 800px){

  /* ---- 1. Una sola columna ---- */
  html body .crl-related ul.products,
  html body .crl-related .products{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;  /* Para mostrar 1 sola columna, repeat(1, ...*/
    gap: 14px !important;
  }

  /* ---- 2. Card en flujo vertical (permite ordenar el boton) ---- */
  html body .crl-related ul.products li.product{
    display: flex !important;
    flex-direction: column !important;
    padding: 0 0 16px 0 !important;
  }

  /* ---- 3. Imagen mas alta al tener el ancho completo ---- */
  html body .crl-related ul.products li.product img{
    height: 200px !important;
    padding: 20px !important;
    margin: 0 0 12px 0 !important;
  }

  /* ---- 4. TITULO: quitar el clamp de 2 lineas ---- */
  html body .crl-related ul.products li.product h2,
  html body .crl-related ul.products li.product h3,
  html body .crl-related ul.products li.product .woocommerce-loop-product__title,
  html body .crl-related ul.products li.product .product-title{
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    padding: 0 14px !important;
    margin: 0 0 12px 0 !important;
    overflow-wrap: break-word !important;
  }

  /* ---- 5. Precio sin hueco reservado a la derecha ---- */
  html body .crl-related ul.products li.product .price{
    display: block !important;
    min-height: 0 !important;
    margin: 0 14px 12px 14px !important;
    padding: 14px 0 0 0 !important;
  }

  /* ---- 6. Boton VER: fuera de absolute, al final del flujo ---- */
  html body .crl-related ul.products li.product a.crl-loop-ver{
    position: static !important;
    order: 99 !important;
    right: auto !important;
    bottom: auto !important;
    display: flex !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 14px !important;
    padding: 12px 18px !important;
    font-size: 14px !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* Si el boton viene envuelto en un contenedor de Avada */
  html body .crl-related ul.products li.product .fusion-clean-product-buttons-container,
  html body .crl-related ul.products li.product .product-buttons{
    order: 99 !important;
    margin: 0 !important;
    padding: 0 14px !important;
  }

  html body .crl-related ul.products li.product .fusion-clean-product-buttons-container a.crl-loop-ver{
    margin: 0 !important;
    width: 100% !important;
  }

  /* ---- 7. SKU ---- */
  html body .crl-related .crl-loop-sku{
    font-size: 12px !important;
    padding: 0 14px !important;
    margin: 0 0 4px 0 !important;
  }
}