/* ==========================================================================
   Palette — "Obsidian Cobalt"
   --------------------------------------------------------------------------
   Built around the monochrome calligraphic logo (ink on ivory), so the brand
   hue is free to be bold. Roles:
     • Cobalt → Violet  : brand, actions, links, focus       (the "electric" axis)
     • Cyan             : glow and highlights on dark surfaces only
     • Coral → Amber    : heat — sale, flash, countdown, cart badge
     • Obsidian ink     : header, nav, footer, dark sections
     • Ivory paper      : hero and alternating light sections (echoes the logo tile)
   Loaded after ui-enhancements.css and ui-palette.generated.css. Direction-agnostic.
   ========================================================================== */

/* Core brand/glow/heat/ink/shape tokens now live in ui-tokens.css (shared
   with the Admin panel — see wwwroot/css/admin-cobalt.css). @import is
   hoisted to the top of this file by the CSS spec, so the storefront's
   existing <link> cascade order (main.css -> ui-enhancements.css ->
   ui-palette.generated.css -> ui-palette.css) is unaffected. */
@import url("ui-tokens.css");

:root {
  /* Legacy variables the compiled theme still reads */
  --primary:               var(--ui-brand);
  --primary-dark:          var(--ui-brand-strong);
  --primary-hover:         var(--ui-brand-strong);
  --rr-brand:              var(--ui-brand);
  --rr-sale:               var(--ui-coral);
  --rr-count-bg:           #FFF0F3;
  --rr-footer:             var(--ui-obsidian);
  --rr-bg:                 var(--ui-paper);
  --footer-bg:             var(--ui-obsidian);
  --footer-bottom-bg:      var(--ui-obsidian);
  --citycenter-red:        var(--ui-coral);
  --citycenter-red-dark:   var(--ui-heat-deep);
  --category-accent:       var(--ui-brand);
  --category-accent-hover: var(--ui-brand-strong);
  --category-filter-spec-group-fallback: var(--ui-brand-soft);
  --category-filter-spec-group-gradient: linear-gradient(180deg, #F4F6FF 0%, var(--ui-brand-soft) 100%);
  --category-filter-spec-group-border:   rgba(var(--ui-brand-rgb), 0.18);
  --rr-pdp-accent:         var(--ui-brand);
}

/* Category filter sidebar */
.category-filters-citycenter .filter-spec-group-heading {
  background: var(--category-filter-spec-group-gradient);
  color: var(--ui-ink);
  border-inline-start: 3px solid var(--ui-brand);
}

.category-filters-citycenter .filter-row-btn:not(.collapsed) ~ .filter-row-arrow {
  color: var(--ui-brand);
}

/* Obsidian surfaces
   -------------------------------------------------------------------------- */
.rr-topbar {
  background: var(--ui-obsidian);
  color: #A9B0BF;
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.rr-topbar-left svg,
.rr-topbar-center svg {
  color: var(--ui-cyan);
}

.rr-topbar-free,
.rr-lang-label {
  color: var(--ui-cyan);
}

.rr-lang svg:last-of-type {
  color: var(--ui-brand-light);
}

.rr-header-main {
  background:
    var(--ui-aurora) bottom / 100% 2px no-repeat,
    radial-gradient(60% 120% at 50% 0%, rgba(var(--ui-brand-rgb), 0.16) 0%, rgba(var(--ui-brand-rgb), 0) 70%),
    linear-gradient(180deg, var(--ui-obsidian-2) 0%, var(--ui-obsidian) 100%);
  border-bottom: 0;
  box-shadow: none;
}

.rr-header-main::after {
  display: none;
}

.rr-search-btn {
  background: var(--ui-electric);
}

.rr-search:focus-within {
  box-shadow: 0 0 0 4px rgba(var(--ui-cyan-rgb), 0.28), 0 12px 32px -12px rgba(var(--ui-brand-rgb), 0.55);
}

.rr-actions-group {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.rr-icon-btn:hover {
  background: rgba(var(--ui-cyan-rgb), 0.14);
  color: var(--ui-cyan);
}

.rr-badge {
  background: var(--ui-heat);
  box-shadow: 0 2px 8px rgba(var(--ui-coral-rgb), 0.45);
}

#navigation {
  background: var(--ui-obsidian) !important;
  border-top-color: rgba(255, 255, 255, 0.05);
}

#navigation .main-nav > li > a:hover,
#navigation .main-nav > li > a:focus {
  color: var(--ui-cyan) !important;
}

#navigation.rr-mega-nav .rr-mega-top.main-nav > li:not(.rr-mega-parent) > a::after,
#navigation.rr-mega-nav a.rr-mega-trigger::after {
  background: var(--ui-aurora);
}

.rr-side-menu-header {
  background: var(--ui-obsidian);
}

/* Hero: ivory paper with a soft cobalt / violet / cyan aurora behind the slider. */
.rr-hero-section {
  background:
    radial-gradient(520px 260px at 12% 18%, rgba(var(--ui-brand-rgb), 0.14) 0%, rgba(var(--ui-brand-rgb), 0) 70%),
    radial-gradient(560px 280px at 88% 12%, rgba(var(--ui-gradient-end-rgb), 0.12) 0%, rgba(var(--ui-gradient-end-rgb), 0) 70%),
    radial-gradient(700px 240px at 50% 100%, rgba(var(--ui-cyan-rgb), 0.10) 0%, rgba(var(--ui-cyan-rgb), 0) 70%),
    var(--ui-paper);
}

.rr-hero-slider,
.rr-hero-img {
  background-color: var(--ui-obsidian-3);
}

.rr-hero-heading .rr-brand {
  background: linear-gradient(120deg, var(--ui-brand) 0%, var(--ui-gradient-end) 50%, var(--ui-cyan) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rr-section-title::after {
  background: var(--ui-aurora);
  box-shadow: 0 2px 10px rgba(var(--ui-brand-rgb), 0.35);
}

/* Trust strip */
.rr-trust-icon {
  background: var(--ui-brand-soft);
  color: var(--ui-brand);
}

.rr-trust-icon svg,
.rr-trust-icon path,
.rr-trust-icon circle {
  stroke: currentColor;
}

.rr-trust-item:hover {
  background: var(--ui-surface-tint);
}

/* Flash deals: obsidian stage, heat accents, violet depth. */
.rr-flash-section {
  background:
    radial-gradient(900px 400px at 0% 0%, rgba(var(--ui-gradient-end-rgb), 0.22) 0%, rgba(var(--ui-gradient-end-rgb), 0) 60%),
    radial-gradient(800px 380px at 100% 100%, rgba(var(--ui-coral-rgb), 0.18) 0%, rgba(var(--ui-coral-rgb), 0) 60%),
    var(--ui-obsidian);
}

.rr-flash-glow--a {
  background: radial-gradient(circle, var(--ui-coral), transparent 70%);
}

.rr-flash-glow--b {
  background: radial-gradient(circle, var(--ui-gradient-end), transparent 70%);
}

.rr-flash-bolt {
  color: var(--ui-amber);
}

.rr-flash-live-dot {
  background: var(--ui-coral);
  box-shadow: 0 0 0 4px rgba(var(--ui-coral-rgb), 0.25);
}

.rr-flash-viewall {
  color: var(--ui-cyan);
}

.rr-flash-pill-eyebrow {
  color: var(--ui-amber);
}

.rr-flash-pill-cta,
.rr-sale-badge,
.rr-pdp-flash-badge,
.rr-pdp-save-badge {
  background: var(--ui-heat);
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(var(--ui-coral-rgb), 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.rr-flash-pill-cta:hover {
  filter: brightness(1.06);
  box-shadow: 0 16px 32px -10px rgba(var(--ui-coral-rgb), 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.rr-countdown-pill {
  background: var(--ui-obsidian);
  color: var(--ui-amber);
  border: 1px solid rgba(var(--ui-amber-rgb), 0.35);
}

.rr-old,
.product-old-price,
.rr-pdp-was-price,
.rr-sale-original {
  color: var(--ui-ink-3);
}

/* Light sections alternate between white and ivory for rhythm. */
.rr-categories {
  background: var(--ui-paper);
}

.rr-cat-top {
  background:
    radial-gradient(120% 90% at 50% 100%, var(--ui-brand-soft) 0%, rgba(238, 243, 255, 0) 70%),
    #FFFFFF;
}

.rr-cat-top::before {
  background: radial-gradient(circle, rgba(var(--ui-brand-rgb), 0.22), transparent 70%);
}

.rr-cat-card:hover .rr-cat-bottom {
  color: var(--ui-brand-deep);
}

.rr-main-sections {
  background-color: #FFFFFF;
}

.rr-clients {
  background: var(--ui-paper);
}

/* Newsletter: obsidian with a cobalt-violet aurora. */
.rr-newsletter {
  background:
    radial-gradient(700px 320px at 50% 0%, rgba(var(--ui-brand-rgb), 0.28) 0%, rgba(var(--ui-brand-rgb), 0) 65%),
    radial-gradient(600px 300px at 90% 100%, rgba(var(--ui-gradient-end-rgb), 0.22) 0%, rgba(var(--ui-gradient-end-rgb), 0) 60%),
    var(--ui-obsidian);
}

.rr-newsletter-glow {
  background: radial-gradient(ellipse, rgba(var(--ui-cyan-rgb), 0.16), transparent 70%);
}

.rr-newsletter-icon {
  color: var(--ui-cyan);
  border-color: rgba(var(--ui-cyan-rgb), 0.4);
  background: rgba(var(--ui-cyan-rgb), 0.08);
}

.rr-subscribe:focus-within {
  box-shadow: 0 0 0 4px rgba(var(--ui-cyan-rgb), 0.25);
}

/* Footer */
.rr-footer {
  background:
    var(--ui-aurora) top / 100% 2px no-repeat,
    linear-gradient(180deg, var(--ui-obsidian-2) 0%, var(--ui-obsidian) 100%);
}

.rr-footer-bottom {
  background: rgba(0, 0, 0, 0.35);
  border-top-color: rgba(255, 255, 255, 0.06);
}

.rr-footer a:hover,
.rr-footer .rr-footer-links a:hover {
  color: var(--ui-cyan);
}

.rr-footer h4::after,
.rr-footer h5::after,
.rr-footer .rr-footer-heading::after,
.rr-footer .footer-title::after {
  background: var(--ui-aurora);
}

/* Primary actions: the electric gradient wins over the flat recolored legacy rules. */
.rr-add,
.rr-pdp-btn--cart,
.rr-cart-btn-primary,
.rr-cart-checkout-btn,
.rr-auth-submit,
.rr-banner-cta,
.rr-sub-btn,
.rr-minicart-checkout,
.rr-cart-promo-apply,
.rr-cart-qty-update,
.btn-primary {
  background: var(--ui-electric);
  border-color: transparent;
  color: #fff;
}

.rr-add:hover,
.rr-pdp-btn--cart:hover,
.rr-cart-btn-primary:hover,
.rr-cart-checkout-btn:hover,
.rr-auth-submit:hover,
.rr-banner-cta:hover,
.rr-sub-btn:hover,
.rr-minicart-checkout:hover,
.rr-cart-promo-apply:hover,
.rr-cart-qty-update:hover,
.btn-primary:hover {
  background: var(--ui-electric);
  filter: brightness(1.08);
  color: #fff;
}

/* Product cards & listing
   -------------------------------------------------------------------------- */
.category-products-grid .product.product-card-citycenter:hover,
.rr-product-card:hover {
  border-color: rgba(var(--ui-brand-rgb), 0.35);
  box-shadow: var(--ui-shadow-md), 0 18px 36px -18px rgba(var(--ui-brand-rgb), 0.35);
}

.product-card-citycenter .product-name a:hover,
.rr-product-title:hover {
  color: var(--ui-brand-deep);
}

.rr-cat-toolbar .rr-toolbar-dd-btn:hover {
  border-color: rgba(var(--ui-brand-rgb), 0.5);
}

/* Product page */
.rr-pdp-price-card::before {
  background: linear-gradient(90deg, transparent 0%, var(--ui-brand) 25%, var(--ui-gradient-end) 55%, var(--ui-cyan) 80%, transparent 100%);
}

.rr-pdp-qty-dark {
  background: var(--ui-obsidian);
}

.rr-pdp-stock-box {
  color: #0F9D7A;
}

.rr-pdp-bc-current {
  color: var(--ui-brand-deep);
}

.rr-pdp-tab-nav .active,
.rr-pdp-tab-nav .is-active,
.rr-pdp-tab-nav a[aria-selected="true"] {
  color: var(--ui-brand-deep);
  border-color: var(--ui-brand);
}

/* Cart */
.rr-cart-qty-remove,
.rr-minicart-item-remove {
  background: var(--ui-heat);
  border-color: transparent;
}

.rr-cart-continue-btn,
.rr-minicart-view-cart {
  color: var(--ui-brand-deep);
  border-color: var(--ui-brand);
}

.rr-cart-continue-btn:hover,
.rr-minicart-view-cart:hover {
  background: var(--ui-brand-soft);
  color: var(--ui-brand-deep);
}

/* Auth */
.rr-auth-tab {
  color: var(--ui-brand-deep);
}

.rr-auth-tab--active {
  background: var(--ui-electric);
  color: #fff;
}

.rr-auth-tab svg {
  color: currentColor;
}

/* Toast & floating controls */
.ui-toast-icon {
  background: var(--ui-electric);
}

.ui-toast--error .ui-toast-icon {
  background: var(--ui-heat);
}

.ui-toast-action {
  color: var(--ui-cyan);
}

#rr-back-top {
  background: rgba(10, 12, 20, 0.85);
}

#rr-back-top:hover {
  background: var(--ui-brand);
}

/* Selection colour follows the brand. */
::selection {
  background: var(--ui-brand);
  color: #fff;
}

/* Subcategory tiles on the category page: same stage as the home tiles. */
.category-subcard {
  background: #FFFFFF;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-lg, 20px);
  box-shadow: var(--ui-shadow-xs);
  transition: transform var(--ui-dur, 240ms) var(--ui-ease-out), box-shadow var(--ui-dur, 240ms) var(--ui-ease-out), border-color var(--ui-dur, 240ms);
}

.category-subcard:hover {
  background: #FFFFFF;
  border-color: rgba(var(--ui-brand-rgb), 0.35);
  box-shadow: var(--ui-shadow-md);
  transform: translateY(-4px);
}

.category-subcard-img {
  background:
    radial-gradient(120% 90% at 50% 100%, var(--ui-brand-soft) 0%, rgba(238, 243, 255, 0) 70%),
    var(--ui-paper);
}

.category-subcard-title {
  font-weight: 700;
}

.category-subcard:hover .category-subcard-title {
  color: var(--ui-brand-deep);
}

/* Smaller viewports: the aurora blobs overlap, so dial them down to keep the heading crisp. */
@media (max-width: 767.98px) {
  .rr-hero-section {
    background:
      radial-gradient(360px 200px at 0% 0%, rgba(var(--ui-brand-rgb), 0.10) 0%, rgba(var(--ui-brand-rgb), 0) 70%),
      radial-gradient(360px 200px at 100% 0%, rgba(var(--ui-gradient-end-rgb), 0.08) 0%, rgba(var(--ui-gradient-end-rgb), 0) 70%),
      var(--ui-paper);
  }
}

/* Logo: larger, framed by an aurora ring, with a soft electric glow.
   ------------------------------------------------------------------------ */
.rr-brand-link {
  display: inline-flex;
  padding: 3px;
  border-radius: 18px;
  background: var(--ui-aurora);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 10px 28px -8px rgba(var(--ui-brand-rgb), 0.65),
    0 0 26px rgba(var(--ui-cyan-rgb), 0.22);
  transition: transform var(--ui-dur, 240ms) var(--ui-ease-out), box-shadow var(--ui-dur, 240ms) var(--ui-ease-out);
  animation: ui-logo-glow 4s ease-in-out infinite;
}

.rr-brand-link:hover,
.rr-brand-link:focus-visible {
  transform: translateY(-1px) scale(1.03);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.10),
    0 14px 34px -8px rgba(var(--ui-brand-rgb), 0.8),
    0 0 36px rgba(var(--ui-cyan-rgb), 0.35);
}

.rr-logo {
  height: 64px;
  width: 64px;
  object-fit: cover;
  border-radius: 15px;
  background: #F0F0F0;
  filter: none;
}

@keyframes ui-logo-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 10px 28px -8px rgba(var(--ui-brand-rgb), 0.65), 0 0 26px rgba(var(--ui-cyan-rgb), 0.22); }
  50%      { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 10px 28px -8px rgba(var(--ui-gradient-end-rgb), 0.7), 0 0 34px rgba(var(--ui-cyan-rgb), 0.34); }
}

@media (max-width: 767.98px) {
  .rr-logo {
    height: 56px;
    width: 56px;
    border-radius: 13px;
  }

  .rr-brand-link {
    border-radius: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rr-brand-link {
    animation: none;
  }
}

.rr-brand-link {
  margin-block: 6px;
}

/* Categories / banners / clients / footer polish — same-day additions,
   recolored onto the Cobalt axis to match the rest of the palette. */
.rr-cat-card::after {
  background: linear-gradient(135deg, rgba(var(--ui-brand-rgb), 0.5), transparent 60%);
}

.rr-cat-card:hover {
  border-color: rgba(var(--ui-brand-rgb), 0.35);
  box-shadow: 0 20px 40px -16px rgba(var(--ui-brand-rgb), 0.32), 0 12px 26px rgba(0, 0, 0, 0.08);
}

.rr-banner::after {
  background: radial-gradient(circle, rgba(var(--ui-brand-rgb), 0.35), transparent 70%);
}

.rr-banner:hover {
  box-shadow: 0 24px 48px -18px rgba(var(--ui-brand-rgb), 0.4);
  border-color: rgba(var(--ui-brand-rgb), 0.4);
}

.rr-social-btn:hover,
.rr-cl-arrow:hover {
  background: var(--ui-electric);
  box-shadow: 0 8px 18px -4px rgba(var(--ui-brand-rgb), 0.5);
}

.rr-pay-badge-img:hover {
  border-color: rgba(var(--ui-brand-rgb), 0.4);
}

.rr-footer::before {
  display: none;
}

.rr-footer::after {
  background: radial-gradient(circle, rgba(var(--ui-brand-rgb), 0.14), transparent 70%);
}

.category-add-to-cart-btn,
.add-to-cart-form.category-add-to-cart-form .add-to-cart-btn {
  background: var(--ui-electric) !important;
  box-shadow: 0 6px 16px -6px rgba(var(--ui-brand-rgb), 0.5);
}

.category-add-to-cart-btn:hover,
.add-to-cart-form.category-add-to-cart-form .add-to-cart-btn:hover {
  background: var(--ui-electric) !important;
  box-shadow: 0 10px 22px -6px rgba(var(--ui-brand-rgb), 0.55);
}

/* Wishlist heart toggle (PDP + product cards) — filled coral heart when saved,
   matching the "heat" role already used for sale/flash/cart-badge accents. */
.rr-pdp-wishlist-icon:hover {
  border-color: var(--ui-coral) !important;
  color: var(--ui-coral) !important;
}

.rr-pdp-wishlist-icon.is-active {
  color: var(--ui-coral);
  border-color: rgba(var(--ui-coral-rgb), 0.4);
}

.rr-pdp-wishlist-icon.is-active:hover {
  color: var(--ui-heat-deep) !important;
  border-color: var(--ui-heat-deep) !important;
}

.rr-product-wishlist-btn {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  z-index: 3;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ui-ink-2, #555);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: color 0.2s, background 0.2s;
}

.rr-product-wishlist-btn:hover {
  color: var(--ui-coral);
}

.rr-product-wishlist-btn.is-active {
  color: var(--ui-coral);
}