/* Bridge layer: Besol tokens opt-in without breaking existing styles */

:root {
  --ok-besol-accent: var(--besol-accent);
  --ok-besol-rose: var(--besol-accent-light);
  --ok-besol-pink: var(--besol-accent-pink);
  --ok-besol-font: var(--besol-font-body);
}

.besol-product-img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  display: block;
}

.btn-besol-cta {
  background-color: var(--besol-btn-primary-bg);
  color: var(--besol-btn-primary-text);
  border-radius: var(--besol-btn-primary-radius);
  padding: var(--besol-btn-primary-padding);
  font-size: var(--besol-btn-primary-font-size);
  font-family: var(--besol-font-body);
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.btn-besol-cta:hover {
  opacity: 0.88;
}

.besol-card-surface {
  background: color-mix(in srgb, white 86%, var(--besol-bg-main) 14%);
  border: 1px solid color-mix(in srgb, var(--besol-accent) 10%, white 90%);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(88, 44, 77, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.besol-card-surface:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(88, 44, 77, 0.1);
  border-color: color-mix(in srgb, var(--besol-accent-light) 24%, white 76%);
}

.besol-card-image {
  border-radius: 14px;
  overflow: hidden;
  background: color-mix(in srgb, var(--besol-bg-main) 72%, white 28%);
}

.besol-card-title {
  color: var(--besol-accent);
}

.besol-card-price {
  color: var(--besol-accent);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.besol-card-link {
  color: var(--besol-accent-light);
}

.besol-card-link:hover {
  color: var(--besol-accent);
}

.besol-badge-new {
  background: var(--besol-accent-light);
  color: var(--besol-btn-primary-text);
}

.besol-hero-panel {
  background: linear-gradient(135deg, rgba(88, 44, 77, 0.82), rgba(220, 127, 155, 0.64));
  color: white;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 40px rgba(88, 44, 77, 0.22);
}

.besol-trust-strip {
  background: color-mix(in srgb, var(--besol-bg-light) 82%, white 18%);
  border: 1px solid color-mix(in srgb, var(--besol-accent) 10%, white 90%);
  border-radius: 22px;
  box-shadow: 0 12px 28px rgba(88, 44, 77, 0.08);
}

.besol-trust-icon {
  background: color-mix(in srgb, var(--besol-accent-light) 16%, white 84%);
  color: var(--besol-accent);
}

.besol-newsletter-shell {
  background: linear-gradient(180deg, color-mix(in srgb, var(--besol-bg-light) 88%, white 12%), white);
}

.besol-newsletter-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid color-mix(in srgb, var(--besol-accent) 10%, white 90%);
  border-radius: 24px;
  box-shadow: 0 18px 42px rgba(88, 44, 77, 0.08);
}

.besol-newsletter-button {
  background: var(--besol-accent-light);
  color: var(--besol-btn-primary-text);
}

.besol-newsletter-button:hover {
  background: var(--besol-accent);
}