/* Rivora — design tokens (subset used by the custom header) */
:root {
  --rivora-gold-primary: #C8A96A;
  --rivora-gold-dark: #B69456;
  --rivora-ink-1: #1E1E1E;
  --rivora-ink-2: #59544D;
  --rivora-ink-3: #918A81;
  --rivora-surface-bg: #FAF8F5;
  --rivora-surface-2: #F2ECE4;
  --rivora-surface-card: #FFFFFF;
  --rivora-border-subtle: #E6DDD1;
  --rivora-link-initial: #59544D;
  --rivora-link-hover: #C8A96A;
  --rivora-shadow-card-hover: 0 4px 12px rgba(30, 30, 30, .06), 0 18px 40px -14px rgba(30, 30, 30, .12);
  --rivora-radius-card: 12px;
  --rivora-font-body: "Vazirmatn", "Vazirmatn Variable", sans-serif;

  /* Footer — text colors tuned for the dark (ink-1) footer background */
  --rivora-footer-heading: #F2ECE4;
  --rivora-footer-text: #A79F92;
  --rivora-footer-muted: #A79F92;
  --rivora-footer-faint: #8C8479;
}

/* Buttons (primary / outline) — shared component, used on the hero and the
   product archive (empty state, clear filters), so it lives here where every
   page already loads it rather than only where it was first needed. */
.rivora-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-family: var(--rivora-font-body);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: box-shadow .2s ease, background-color .2s ease, color .2s ease;
}

.rivora-btn--primary {
  padding: 14px 28px;
  background: var(--rivora-gold-primary);
  color: #fff;
  border: none;
  box-shadow: 0 6px 18px -6px rgba(182, 148, 86, .25);
}

.rivora-btn--primary:hover,
.rivora-btn--primary:focus,
.rivora-btn--primary:active {
  background: var(--rivora-gold-dark);
  box-shadow: 0 10px 26px -8px rgba(182, 148, 86, .35);
  color: #fff;
}

.rivora-btn--outline {
  padding: 13px 27px;
  background: transparent;
  color: var(--rivora-gold-primary);
  border: 1px solid var(--rivora-gold-primary);
}

/* Explicit background+border here (not just color): Kadence's global
   `button:hover{background:var(--global-palette-btn-bg-hover)}` paints its
   own blue on any <button> that doesn't set its own hover background,
   regardless of our higher-specificity class selector overriding color. */
.rivora-btn--outline:hover,
.rivora-btn--outline:focus,
.rivora-btn--outline:active {
  background: rgba(200, 169, 106, .08);
  border-color: var(--rivora-gold-primary);
  box-shadow: 0 8px 18px -8px rgba(182, 148, 86, .15);
  color: var(--rivora-gold-dark);
}