/*------------------------------------------------------------------
  OLYMPUS88 — remap v36 accents → yellow/purple, keep white surfaces
  See .github/instructions/yellow-purple-palette.instructions.md
--------------------------------------------------------------------*/
:root {
  --oly-bg: #120b1a;
  --oly-surface: #1e1430;
  --oly-surface-alt: #2b1d45;
  --oly-purple: #720bb8;
  --oly-purple-light: #a555e0;
  --oly-purple-dark: #4a077a;
  --oly-gold: #ffd700;
  --oly-yellow: #f1e02f;
  --oly-gold-dark: #c6a300;
  --oly-text: #f6efff;
  --oly-text-muted: #b3a3cc;
  --oly-border: #3d2a5c;
  --oly-danger: #b5442e;
  --oly-success: #6f8a3a;

  /* Breeze tokens: keep white page, purple/gold accents */
  --base-bg: 255, 255, 255;
  --base-color: 18, 11, 26;
  --brand-color: 114, 11, 184;
  --button-bg: 255, 215, 0;
  --button-color: 74, 7, 122;
  --button-border-color: 198, 163, 0;
  --link-color: 114, 11, 184;
  --input-bg: 255, 255, 255;
  --input-color: 18, 11, 26;
  --input-border-color: 61, 42, 92;
  --input-focus-border-color: 114, 11, 184;
  --muted-bg: 246, 239, 255;
  --block-content-bg: 255, 255, 255;
  --block-title-bg: 255, 255, 255;
  --block-title-color: 18, 11, 26;
  --message-bg: 246, 239, 255;
  --message-color: 18, 11, 26;
  --message-border-color: 61, 42, 92;
  --danger-color: 181, 68, 46;
  --scrollbar-bg: 246, 239, 255;
  --scrollbar-color: 114, 11, 184;
  --spinner-border-color: 114, 11, 184;
  --ring-color: 165, 85, 224;
  --blue: 114, 11, 184;
  --gray-50: 255, 255, 255;
  --gray-100: 246, 239, 255;
  --gray-900: 18, 11, 26;
}

a,
a:visited {
  color: var(--oly-purple);
}

a:hover {
  color: var(--oly-purple-light) !important;
}

/* Keep the main page white */
.page-wrapper,
.page-header,
.header.content,
.kanmo-middle-header,
.navigation-wrapper,
.page-main,
.columns,
.column.main,
.product-info-main,
.product-item,
.block,
.modal-inner-wrap {
  background-color: #fff !important;
}

/* Thin top bar stays brand purple */
.panel.wrapper,
.panel.header {
  background-color: var(--oly-purple) !important;
  color: var(--oly-text) !important;
}

.panel.header a {
  color: var(--oly-text) !important;
  background-color: transparent !important;
}

.panel.header a:hover {
  color: var(--oly-gold) !important;
}

.ves-megamenu li.level0 > a.anchor-active,
.ves-megamenu-mobile .nav-mobile li.level0 > a.anchor-active,
.navigation .level0 .submenu .ks_content p a:hover,
.headcontent p,
.headcontent p a {
  color: var(--oly-purple) !important;
}

/* Buttons / CTAs */
.action.primary,
.action.tocart,
.action.tocart.primary,
button.action.primary,
.widget.widget-crosssell button.action.tocart.primary {
  background: var(--oly-gold) !important;
  background-color: var(--oly-gold) !important;
  color: var(--oly-purple-dark) !important;
  border-color: var(--oly-gold-dark) !important;
}

.action.primary:hover,
.action.tocart:hover {
  background: var(--oly-yellow) !important;
  color: var(--oly-purple-dark) !important;
}

.price,
.price-box .price,
.special-price .price {
  color: var(--oly-purple) !important;
}

.old-price .price {
  color: #545159 !important;
}

.discount-percent,
.price-box.percent .discount-percent {
  background: var(--oly-purple) !important;
  color: var(--oly-text) !important;
}

.page-footer,
.page-footer .footer.content,
.page-footer [data-content-type="row"],
.footer-content-mckanmo-desktop,
.footer-main-column-mc,
.footer-desktop,
.footer-mobile,
.pagebuilder-column.shop-with-us-column-mc,
.pagebuilder-column.need-help-column-mc,
.pagebuilder-column.download-ourapps-column-mc,
.pagebuilder-column.accept-pay {
  background-color: #fff !important;
  color: #1e1e1e !important;
}

.page-footer,
.page-footer p,
.page-footer span,
.page-footer li,
.footer-desktop p,
.footer-mobile p {
  color: #1e1e1e !important;
}

.page-footer a,
.page-footer h4,
.heading-shop-with-us-kanmo-mc,
.heading-need-help-kanmo-mc,
.heading-download-apps-kanmo-mc {
  color: var(--oly-purple) !important;
}

.page-footer a:hover {
  color: var(--oly-purple-light) !important;
}

.back-to-top {
  background: var(--oly-purple) !important;
  color: var(--oly-text) !important;
}

input:checked + .slider {
  background-color: var(--oly-purple) !important;
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--oly-purple-light) !important;
}