/* ==========================================================================
   PRODUCTOS RELACIONADOS — CONTEXTO DEL COMPONENTE COMÚN
   La maquetación interna de cada card vive únicamente en style.css mediante
   .cbdp-common-card. Este archivo solo define sección, título, grid y la
   etiqueta especial 10-OH.
   ========================================================================== */

.single-product .et_pb_wc_related_products,
.single-product .cbdp-related-section:not(:has(.cbdp-smart-related)) {
  display: none !important;
}

html body.single-product .cbdp-related-section:has(.cbdp-smart-related),
.cbdp-related-section--global {
  width: min(1160px, calc(100% - 64px));
  margin: 58px auto 38px;
  padding: 0 !important;
}

html body.single-product .cbdp-related-section:has(.cbdp-smart-related) .cbdp-related-row {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.single-product .cbdp-related-section *,
.single-product .cbdp-related-section *::before,
.single-product .cbdp-related-section *::after,
.cbdp-related-section--global *,
.cbdp-related-section--global *::before,
.cbdp-related-section--global *::after {
  box-sizing: border-box;
}

.single-product .cbdp-related-section .cbdp-smart-related,
.cbdp-related-section--global .cbdp-smart-related {
  width: 100%;
  margin: 0 !important;
}

html body.single-product .cbdp-related-section .cbdp-related-heading,
.cbdp-related-section--global .cbdp-smart-related__title {
  margin: 0 0 28px !important;
  color: #143f2a !important;
  font-size: clamp(26px, 2.25vw, 38px) !important;
  font-weight: 830 !important;
  line-height: 1.1 !important;
  text-align: center !important;
}

html body.single-product .cbdp-related-product-loop ul.products.cbdp-smart-related__grid,
.single-product .cbdp-related-section .cbdp-smart-related__grid,
.cbdp-related-section--global .cbdp-smart-related__grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html body.single-product .cbdp-related-product-loop ul.products.cbdp-smart-related__grid::before,
html body.single-product .cbdp-related-product-loop ul.products.cbdp-smart-related__grid::after {
  display: none !important;
  content: none !important;
}

/* Badge de cannabinoide: misma cápsula visual, texto variable por clase. */
html body.single-product .cbdp-related-product-loop li.product.cbdp-product-cannabinoid.cbdp-product-cannabinoid-10oh { --cbdp-cannabinoid-badge-text: "10-OH"; }
html body.single-product .cbdp-related-product-loop li.product.cbdp-product-cannabinoid.cbdp-product-cannabinoid-e8h { --cbdp-cannabinoid-badge-text: "E8H"; }
html body.single-product .cbdp-related-product-loop li.product.cbdp-product-cannabinoid.cbdp-product-cannabinoid-stv { --cbdp-cannabinoid-badge-text: "STV"; }

html body.single-product .cbdp-related-product-loop ul.products li.product.cbdp-product-cannabinoid .woocommerce-loop-product__link::before,
html body.single-product .cbdp-related-product-loop ul.products li.product.cbdp-product-cannabinoid .woocommerce-LoopProduct-link::before {
  display: none !important;
  content: none !important;
}

html body.single-product .cbdp-related-product-loop li.product.cbdp-product-cannabinoid .cbdp-common-card__image-link .et_shop_image {
  position: relative !important;
}

html body.single-product .cbdp-related-product-loop li.product.cbdp-product-cannabinoid .cbdp-common-card__image-link .et_shop_image::after {
  content: var(--cbdp-cannabinoid-badge-text, "10-OH") !important;
  position: absolute !important;
  right: 14px !important;
  bottom: 14px !important;
  z-index: 12 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 58px !important;
  min-height: 26px !important;
  padding: 3px 8px 2px !important;
  border: 1.5px solid rgba(216, 184, 106, .92) !important;
  border-radius: 11px !important;
  background: #171410 !important;
  color: #f5df9a !important;
  -webkit-text-fill-color: #f5df9a !important;
  box-shadow: 0 8px 18px rgba(23, 20, 16, .18) !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

@media (max-width: 980px) {
  html body.single-product .cbdp-related-section:has(.cbdp-smart-related),
  .cbdp-related-section--global {
    width: min(928px, calc(100% - 40px));
    margin-top: 48px;
  }

  html body.single-product .cbdp-related-product-loop ul.products.cbdp-smart-related__grid,
  .single-product .cbdp-related-section .cbdp-smart-related__grid,
  .cbdp-related-section--global .cbdp-smart-related__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}

@media (max-width: 640px) {
  html body.single-product .cbdp-related-section:has(.cbdp-smart-related),
  .cbdp-related-section--global {
    width: min(100% - 28px, 520px);
    margin: 42px auto 32px;
  }

  html body.single-product .cbdp-related-section .cbdp-related-heading,
  .cbdp-related-section--global .cbdp-smart-related__title {
    margin-bottom: 18px !important;
    font-size: 24px !important;
  }

  html body.single-product .cbdp-related-product-loop ul.products.cbdp-smart-related__grid,
  .single-product .cbdp-related-section .cbdp-smart-related__grid,
  .cbdp-related-section--global .cbdp-smart-related__grid {
    gap: 12px 10px !important;
  }

  html body.single-product .cbdp-related-product-loop li.product.cbdp-product-cannabinoid .cbdp-common-card__image-link .et_shop_image::after {
    right: 10px !important;
    bottom: 10px !important;
    min-width: 52px !important;
    min-height: 24px !important;
    padding: 3px 7px 2px !important;
    border-radius: 10px !important;
    font-size: 10px !important;
  }
}

@media (max-width: 360px) {
  html body.single-product .cbdp-related-section:has(.cbdp-smart-related),
  .cbdp-related-section--global {
    width: calc(100% - 20px);
  }

  html body.single-product .cbdp-related-product-loop ul.products.cbdp-smart-related__grid,
  .single-product .cbdp-related-section .cbdp-smart-related__grid,
  .cbdp-related-section--global .cbdp-smart-related__grid {
    gap: 10px !important;
  }
}