/* ==========================================================================
   Base
   (Inter se autoaloja en typography.css)
   ========================================================================== */
body.wecomm-jomagrx {
  font-family: var(--weu-font-family-base);
  color: var(--weu-color-dark);
}

/* ==========================================================================
   Acentos de marca — azul (#1613a9) y amarillo (#eefd76)
   Utilidades coherentes con texto de contraste automático
   ========================================================================== */
.weu-bg-blue {
  background-color: var(--weu-color-blue);
  color: var(--weu-color-on-blue);
}

.weu-bg-yellow {
  background-color: var(--weu-color-yellow);
  color: var(--weu-color-on-yellow);
}

.weu-text-blue {
  color: var(--weu-color-blue);
}

.weu-text-yellow {
  color: var(--weu-color-yellow);
}

.weu-border-blue {
  border-color: var(--weu-color-blue) !important;
}

.weu-border-yellow {
  border-color: var(--weu-color-yellow) !important;
}

/* Badge / etiqueta destacada amarilla (buena para ofertas) */
.weu-badge-yellow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--weu-color-yellow);
  color: var(--weu-color-on-yellow);
  font-weight: 700;
  border-radius: var(--weu-radius-pill);
  padding: 4px 12px;
  line-height: 1.2;
}

/* Botón azul de acento */
.weu-btn-blue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--weu-color-blue);
  color: var(--weu-color-on-blue);
  border: 1px solid transparent;
  border-radius: var(--weu-radius-default);
  font-weight: 700;
  padding: 10px 20px;
  text-decoration: none;
  transition: background-color var(--weu-transition), transform var(--weu-transition);
}

.weu-btn-blue:hover,
.weu-btn-blue:focus {
  background-color: var(--weu-color-blue-dark);
  color: var(--weu-color-on-blue);
}

/* Enlace/realce amarillo (subrayado tipo highlighter) */
.weu-highlight-yellow {
  background: linear-gradient(180deg, transparent 60%, var(--weu-color-yellow) 60%);
  padding: 0 2px;
}

.weu-products-section-title {
  font-size: var(--font-size-lg);
  font-weight: 800;
  line-height: 1.2;
  color: var(--weu-color-black);
  margin-bottom: var(--weu-spacing-sm);
}

.weu-section-subtitle {
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: var(--weu-spacing-md);
}

/* ==========================================================================
   Header
   ========================================================================== */
.wecomm-jomagrx .header-bottom {
  border-bottom: 1px solid var(--weu-color-border);
  background: var(--weu-white);
}

.wecomm-jomagrx .header-bottom__container {
  max-width: var(--weu-width-container);
}

.wecomm-jomagrx .header-block__action-btn:hover,
.wecomm-jomagrx .header-block__action-btn:focus {
  color: var(--weu-color-primary);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.wecomm-jomagrx .footer__main {
  background: var(--weu-color-dark);
  color: var(--weu-white);
}

.wecomm-jomagrx .footer__main a {
  color: inherit;
}

.wecomm-jomagrx .copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: var(--weu-spacing-sm);
}

/* ==========================================================================
   Miniaturas producto (listados)
   ========================================================================== */
.wecomm-jomagrx .product-miniature__inner {
  border: 1px solid var(--weu-color-border);
  border-radius: var(--weu-radius-default);
  overflow: hidden;
  background: var(--weu-white);
  transition: box-shadow var(--weu-transition), transform var(--weu-transition);
}

.wecomm-jomagrx .product-miniature__inner:hover {
  box-shadow: var(--weu-shadow-card);
  transform: translateY(-2px);
}

.wecomm-jomagrx .product-miniature__title {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--weu-color-black);
}

.wecomm-jomagrx .product-miniature__price {
  color: var(--weu-color-primary);
  font-weight: 700;
}

.wecomm-jomagrx .product-miniature__discount-price {
  color: rgba(0, 0, 0, 0.45);
  text-decoration: line-through;
}