:is(#ov-reco, .rcm-modal) {
  --reco-accent: var(--teal);
  --reco-ink: var(--teal);
  --reco-action: color-mix(in srgb, var(--blue-2) 82%, var(--text));
  --reco-action-ink: var(--surface);
  background: linear-gradient(145deg, var(--surface), var(--surface-2));
  border-color: color-mix(in srgb, var(--text) 16%, var(--border-soft));
  box-shadow: var(--shadow-sm), inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent);
}
[data-theme="light"] :is(#ov-reco, .rcm-modal) {
  --reco-ink: color-mix(in srgb, var(--teal) 42%, var(--text));
  --reco-action: color-mix(in srgb, var(--blue-2) 85%, var(--text));
  --reco-action-ink: var(--surface);
}
#ov-reco::before {
  background: linear-gradient(90deg, transparent, var(--reco-accent), var(--blue-2), transparent);
  opacity: .8;
}
#ov-reco .ov-tp3-eyebrow { color: var(--reco-ink); }
#ov-reco .ov-tp3-title { color: var(--text); text-shadow: none; }
:is(#ov-reco, .rcm-modal) .ov-reco-card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--teal)), var(--surface) 45%);
  border-color: color-mix(in srgb, var(--text) 12%, var(--border-soft));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent), 0 8px 18px -14px color-mix(in srgb, var(--text) 24%, transparent);
}
:is(#ov-reco, .rcm-modal) .ov-reco-glow {
  background: linear-gradient(145deg, color-mix(in srgb, var(--teal) 7%, transparent), transparent 50%);
}
:is(#ov-reco, .rcm-modal) .ov-reco-imgwrap {
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, color-mix(in srgb, var(--text) 2%, transparent) 11px 12px),
    linear-gradient(155deg, var(--surface), color-mix(in srgb, var(--surface-2) 94%, var(--teal)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 5%, transparent);
}
:is(#ov-reco, .rcm-modal) .ov-reco-img {
  filter: drop-shadow(0 10px 12px color-mix(in srgb, var(--text) 18%, transparent));
}
:is(#ov-reco, .rcm-modal) .ov-reco-badge {
  color: var(--reco-ink);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--reco-accent) 42%, var(--border)), 0 3px 10px color-mix(in srgb, var(--text) 8%, transparent);
}
:is(#ov-reco, .rcm-modal) .ov-reco-for { color: var(--reco-ink); }
:is(#ov-reco, .rcm-modal) .ov-reco-name { color: var(--text); }
:is(#ov-reco, .rcm-modal) .ov-reco-tag { color: var(--text-2); }
:is(#ov-reco, .rcm-modal) :is(.ov-reco-add, .ov-reco-gocart) {
  color: var(--reco-action-ink);
  background: linear-gradient(115deg, var(--reco-action), color-mix(in srgb, var(--reco-action) 90%, var(--text)));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--reco-action-ink) 20%, transparent), 0 5px 12px -6px color-mix(in srgb, var(--blue-2) 45%, transparent);
}
:is(#ov-reco, .rcm-modal) .ov-reco-add:disabled { filter: saturate(.4); box-shadow: none; }
:is(#ov-reco, .rcm-modal) .ov-reco-more {
  color: var(--text);
  background: var(--surface);
  border-color: color-mix(in srgb, var(--text) 18%, var(--border-soft));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 3%, transparent);
}
:is(#ov-reco, .rcm-modal) :is(.ov-reco-more, .ov-reco-safenote) svg { color: var(--reco-ink); }
:is(#ov-reco, .rcm-modal) .ov-reco-safenote { color: var(--text-2); }
:is(#ov-reco, .rcm-modal) :is(.ov-reco-add, .ov-reco-more, .ov-reco-imgwrap, .ov-reco-view, .ov-reco-gocart):focus-visible {
  outline-color: var(--reco-ink);
}
:is(#ov-reco, .rcm-modal) .ov-reco-card:focus-within { border-color: var(--reco-accent); }
@media (hover: hover) {
  :is(#ov-reco, .rcm-modal) .ov-reco-card:hover {
    border-color: var(--reco-accent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--teal) 35%, transparent), 0 12px 24px -15px color-mix(in srgb, var(--text) 24%, transparent);
  }
  :is(#ov-reco, .rcm-modal) .ov-reco-more:hover { background: var(--surface-2); border-color: var(--reco-accent); }
}

.rcm-modal .rcm-aura {
  background: linear-gradient(90deg, transparent, var(--reco-accent), var(--blue-2), transparent);
}
.rcm-modal .rcm-head {
  background: linear-gradient(110deg, color-mix(in srgb, var(--teal) 8%, var(--surface)), var(--surface));
  border-color: color-mix(in srgb, var(--teal) 22%, var(--border-soft));
  box-shadow: 0 4px 18px -14px color-mix(in srgb, var(--text) 25%, transparent);
}
.rcm-modal .rcm-shield {
  height: calc(38px * 64 / 56);
}
.rcm-modal .rcm-shield .id-logo {
  width: 100%; height: 100%; margin: 0;
}
.rcm-modal .rcm-eyebrow { color: var(--reco-ink); }
.rcm-modal .rcm-foot {
  background: linear-gradient(110deg, var(--surface), color-mix(in srgb, var(--teal) 5%, var(--surface)));
  border-color: color-mix(in srgb, var(--teal) 22%, var(--border-soft));
  box-shadow: 0 -6px 20px -16px color-mix(in srgb, var(--text) 28%, transparent);
}
.rcm-modal .rcm-x {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--teal) 22%, var(--border));
  color: var(--text-2);
  box-shadow: 0 3px 8px -5px color-mix(in srgb, var(--text) 24%, transparent);
}
.rcm-modal .rcm-x:focus-visible { outline-color: var(--reco-ink); }