/* CC USA — línea de referencia en la tarjeta de producto (cc-ref-tarjeta.php)
   17-sep-2026. Archivo propio: NO mezclar con cc-extra.css.
   Color #5F5B57 sobre el fondo blanco de la tarjeta = 6.4:1 (AA de sobra para texto pequeño). */

.wd-product .cc-ref-tarjeta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 3px;
  padding: 0;
  font-family: "Hanken Grotesk", "Poppins", Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #5F5B57;
}

.wd-product .cc-ref-marca { color: #7E2C04; }

.wd-product .cc-ref-sep {
  color: #A9A39C;
  font-weight: 400;
  letter-spacing: 0;
}

.wd-product .cc-ref-num { white-space: nowrap; }

/* Vista de lista y tarjetas centradas: la línea sigue al mismo eje que el nombre */
.wd-product.product-list-item .cc-ref-tarjeta { justify-content: flex-start; }

.wd-products.title-center .cc-ref-tarjeta,
.wd-product.wd-hover-tiled .cc-ref-tarjeta,
.text-center .wd-product .cc-ref-tarjeta { justify-content: center; }

/* Celular: un punto más pequeña y sin robarle aire al nombre */
@media (max-width: 768px) {
  .wd-product .cc-ref-tarjeta {
    font-size: 10px;
    gap: 5px;
    margin-bottom: 2px;
  }
}

/* La tarjeta de la ficha de producto (relacionados, «también te puede interesar») hereda lo mismo:
   no hace falta regla aparte porque todas usan .wd-product. */