/**
 * Resonance Threads — Page Theme Split v1.0
 * Store pages: Premium blue accent
 * Community pages: Warm pink accent
 * Replaces distracting gradient buttons with clean solid colors
 * Adds semi-transparent floating panel backgrounds
 */

/* ═══════════════════════════════════════════════════════════════
   PAGE-TYPE COLOR VARIABLES
═══════════════════════════════════════════════════════════════ */

/* Store pages — pleasant light blue */
[data-page-type="store"] {
  --rt-accent: #4a9eff;
  --rt-accent-hover: #3580e0;
  --rt-accent-light: rgba(74, 158, 255, 0.10);
  --rt-accent-border: rgba(74, 158, 255, 0.25);
  --rt-accent-glow: rgba(74, 158, 255, 0.20);
  --rt-accent-text: #4a9eff;
  --rt-accent-solid: #4a9eff;
  --rt-accent-btn-text: #fff;
  --rt-float-bg: rgba(74, 158, 255, 0.04);
  --rt-float-border: rgba(74, 158, 255, 0.12);
}

[data-page-type="store"][data-theme="light"] {
  --rt-accent: #2b7de9;
  --rt-accent-hover: #1a66cc;
  --rt-accent-light: rgba(43, 125, 233, 0.08);
  --rt-accent-border: rgba(43, 125, 233, 0.20);
  --rt-accent-glow: rgba(43, 125, 233, 0.15);
  --rt-accent-text: #2b7de9;
  --rt-accent-solid: #2b7de9;
  --rt-accent-btn-text: #fff;
  --rt-float-bg: rgba(43, 125, 233, 0.03);
  --rt-float-border: rgba(43, 125, 233, 0.10);
}

/* Community pages — warm pleasant pink */
[data-page-type="community"] {
  --rt-accent: #f472b6;
  --rt-accent-hover: #e05a9e;
  --rt-accent-light: rgba(244, 114, 182, 0.10);
  --rt-accent-border: rgba(244, 114, 182, 0.25);
  --rt-accent-glow: rgba(244, 114, 182, 0.20);
  --rt-accent-text: #f472b6;
  --rt-accent-solid: #f472b6;
  --rt-accent-btn-text: #fff;
  --rt-float-bg: rgba(244, 114, 182, 0.04);
  --rt-float-border: rgba(244, 114, 182, 0.12);
}

[data-page-type="community"][data-theme="light"] {
  --rt-accent: #e05a9e;
  --rt-accent-hover: #c94488;
  --rt-accent-light: rgba(224, 90, 158, 0.08);
  --rt-accent-border: rgba(224, 90, 158, 0.20);
  --rt-accent-glow: rgba(224, 90, 158, 0.15);
  --rt-accent-text: #d64a90;
  --rt-accent-solid: #e05a9e;
  --rt-accent-btn-text: #fff;
  --rt-float-bg: rgba(224, 90, 158, 0.03);
  --rt-float-border: rgba(224, 90, 158, 0.10);
}

/* ═══════════════════════════════════════════════════════════════
   BUTTON OVERRIDES — Replace gradient with solid accent color
   Professional, clean, premium feel
═══════════════════════════════════════════════════════════════ */

/* Primary buttons — solid accent color, no gradient */
.btn-primary,
.rt-btn-primary,
.auth-btn,
.place-order-btn,
.cart-checkout-btn,
.profile-save-btn,
.cm-submit-btn,
.contact-submit-btn,
.store-search-btn,
.footer-newsletter-btn,
.view-all-link,
.store-qn-chip.active,
.filter-chip.active,
/* Index page buttons */
.view-all-offers-btn,
.brand-search button,
/* Product page */
.product-buy-btn,
.product-add-cart-btn,
.btn-buy-now,
/* Community page */
.cm-post-btn,
.cm-action-btn.primary,
.cm-follow-btn,
/* Dashboard */
.db-action-btn,
/* Bulk discount ribbon */
.bulk-discount-ribbon,
/* Profile panel primary */
.npm3-priority-btn.primary,
.npm2-view-profile-btn {
  background: var(--rt-accent-solid) !important;
  color: var(--rt-accent-btn-text) !important;
  border: none !important;
  box-shadow: 0 2px 8px var(--rt-accent-glow) !important;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}

.btn-primary:hover,
.rt-btn-primary:hover,
.auth-btn:hover,
.place-order-btn:hover,
.cart-checkout-btn:hover,
.profile-save-btn:hover,
.cm-submit-btn:hover,
.contact-submit-btn:hover,
.store-search-btn:hover,
.footer-newsletter-btn:hover,
.view-all-link:hover,
.view-all-offers-btn:hover,
.brand-search button:hover,
.product-buy-btn:hover,
.product-add-cart-btn:hover,
.btn-buy-now:hover,
.cm-post-btn:hover,
.cm-action-btn.primary:hover,
.cm-follow-btn:hover,
.db-action-btn:hover,
.npm3-priority-btn.primary:hover,
.npm2-view-profile-btn:hover {
  background: var(--rt-accent-hover) !important;
  box-shadow: 0 4px 16px var(--rt-accent-glow) !important;
  transform: translateY(-1px) !important;
}

/* Nav search button — solid accent */
.nav-search-btn {
  background: var(--rt-accent-solid) !important;
  color: #fff !important;
}

/* Secondary/ghost buttons — accent border on hover */
.btn-secondary:hover,
.rt-btn-secondary:hover,
.btn-ghost:hover,
.btn-outline:hover,
.filter-chip:hover,
.store-qn-chip:hover,
.ccs-btn-secondary:hover,
.ccs-btn-ghost:hover,
.ccs-studio-btn.ghost:hover,
.pc-btn-dark:hover,
.btn-add-cart:hover,
.rm-arrow:hover,
.rm-card-wish:hover {
  border-color: var(--rt-accent-solid) !important;
  color: var(--rt-accent-text) !important;
  background: var(--rt-accent-light) !important;
}

/* Nav icon pills — accent hover */
.nav-icon-pill:hover {
  color: var(--rt-accent-text) !important;
  border-color: var(--rt-accent-solid) !important;
  background: var(--rt-accent-light) !important;
}

/* Nav pill primary — restore original gradient (login button) */
.nav-icon-pill.nav-pill-primary {
  background: linear-gradient(135deg, #ff4ecd, #4fdcff) !important;
  color: #000 !important;
  border-color: transparent !important;
  font-weight: 700 !important;
}

.nav-icon-pill.nav-pill-primary:hover {
  opacity: 0.88 !important;
  background: linear-gradient(135deg, #ff4ecd, #4fdcff) !important;
  color: #000 !important;
  border-color: transparent !important;
  box-shadow: 0 4px 16px rgba(255, 78, 205, 0.3) !important;
  transform: translateY(-1px) !important;
}

/* Focus ring — accent color */
input:focus,
textarea:focus,
select:focus {
  border-color: var(--rt-accent-solid) !important;
  box-shadow: 0 0 0 3px var(--rt-accent-light) !important;
}

/* Links — accent color */
a:not([class]):hover {
  color: var(--rt-accent-text) !important;
}

/* Card hover — accent border */
.product-card:hover,
.design-card:hover,
.store-card:hover,
.vault-card:hover,
.feature-card:hover,
.rt-card:hover,
.cm-card:hover,
.rm-card:hover,
.ozn-card:hover,
.ccs-feature:hover,
.ccs-studio-card:hover {
  border-color: var(--rt-accent-border) !important;
  box-shadow: 0 8px 32px var(--rt-accent-glow) !important;
}

/* RT card glow border on hover */
.rt-card:hover .rt-glow-border {
  border-color: var(--rt-accent-border) !important;
  box-shadow: inset 0 0 20px var(--rt-accent-light) !important;
}

/* Badges & tags — accent color instead of gradient */
.product-card-tag,
.rm-card-badge,
.ozn-badge-sale {
  background: var(--rt-accent-solid) !important;
  color: #fff !important;
}

/* Slider arrow hover — accent color */
.arrow:hover,
.rt-arrow:hover,
.rm-arrow:hover {
  background: var(--rt-accent-light) !important;
  box-shadow: inset 0 0 12px var(--rt-accent-glow) !important;
}

.arrow:hover::before,
.rt-arrow:hover::before,
.rm-arrow:hover::before {
  border-color: var(--rt-accent-solid) !important;
}

/* Readymades view-all link */
.readymades-view-all {
  color: var(--rt-accent-text) !important;
}

/* Section titles — keep brand gradient for store, use accent for community */
[data-page-type="community"] .section-title,
[data-page-type="community"] .readymades-title,
[data-page-type="community"] .ozn-title,
[data-page-type="community"] .ccs-title,
[data-page-type="community"] .ccs-studios-title {
  background: linear-gradient(135deg, #f472b6, #e879a8) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Community eyebrow accent */
[data-page-type="community"] .ccs-eyebrow,
[data-page-type="community"] .ozn-eyebrow {
  color: var(--rt-accent-text) !important;
}

/* ═══════════════════════════════════════════════════════════════
   COMMUNITY PAGE — Full-width layout, centered hero, no sidebars
═══════════════════════════════════════════════════════════════ */

[data-page-type="community"] .cm-root {
  max-width: 100% !important;
  padding: 0 20px 60px !important;
}

[data-page-type="community"] .cm-hero {
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

[data-page-type="community"] .cm-hero-inner {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}

[data-page-type="community"] .cm-hero-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}

[data-page-type="community"] .cm-hero-actions {
  justify-content: center !important;
}

[data-page-type="community"] .cm-feed {
  width: 100% !important;
  max-width: 100% !important;
}

[data-page-type="community"] .cm-post {
  width: 100% !important;
  max-width: 100% !important;
}

[data-page-type="community"] .cm-grid {
  display: block !important;
}

/* Hide sidebars if somehow still rendered */
[data-page-type="community"] .cm-sidebar-left,
[data-page-type="community"] .cm-sidebar-right {
  display: none !important;
}

/* Community-specific elements — accent color */
.cm-create-btn {
  background: var(--rt-accent-solid) !important;
  color: var(--rt-accent-btn-text) !important;
  border: none !important;
}

.cm-create-btn:hover {
  background: var(--rt-accent-hover) !important;
}

.cm-post-avatar {
  background: var(--rt-accent-solid) !important;
}

.cm-action-btn:hover {
  color: var(--rt-accent-text) !important;
  background: var(--rt-accent-light) !important;
}

.cm-post:hover {
  border-color: var(--rt-accent-border) !important;
}

/* RC note accent */
.ccs-rc-note span {
  color: var(--rt-accent-text) !important;
}

/* Scrollbar — accent color */
[data-page-type="store"] ::-webkit-scrollbar-thumb {
  background: rgba(74, 158, 255, 0.25);
}
[data-page-type="store"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(74, 158, 255, 0.45);
}
[data-page-type="community"] ::-webkit-scrollbar-thumb {
  background: rgba(244, 114, 182, 0.25);
}
[data-page-type="community"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(244, 114, 182, 0.45);
}

/* ═══════════════════════════════════════════════════════════════
   FLOATING PANELS — Solid backgrounds, visible against theme
   NOT semi-transparent — clearly distinct from page background
═══════════════════════════════════════════════════════════════ */

.rt-float-panel,
.store-hero,
.store-filter-bar,
.cm-hero,
.rs-stat-card,
.rs-dash-panel,
.checkout-section,
.cart-summary,
.pp-info {
  background: var(--rt-surface) !important;
  border: 1px solid var(--rt-border-2) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

[data-theme="light"] .rt-float-panel,
[data-theme="light"] .store-hero,
[data-theme="light"] .store-filter-bar,
[data-theme="light"] .cm-hero,
[data-theme="light"] .rs-stat-card,
[data-theme="light"] .rs-dash-panel,
[data-theme="light"] .checkout-section,
[data-theme="light"] .cart-summary,
[data-theme="light"] .pp-info {
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
}

/* Cards — solid surface, no blending */
.product-card,
.design-card,
.store-card,
.vault-card,
.cm-card,
.cm-post,
.dashboard-card {
  background: var(--rt-surface) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

[data-theme="light"] .product-card,
[data-theme="light"] .design-card,
[data-theme="light"] .store-card,
[data-theme="light"] .vault-card,
[data-theme="light"] .cm-card,
[data-theme="light"] .cm-post,
[data-theme="light"] .dashboard-card {
  background: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════
   OFFER ZONE — Fix padding issues
═══════════════════════════════════════════════════════════════ */

.offer-zone-new {
  padding: 40px 20px !important;
}

.offer-zone-new .ozn-inner {
  padding: 0 !important;
  max-width: 100% !important;
}

.offer-zone-new .ozn-cards {
  padding: 0 !important;
}

@media (max-width: 767px) {
  .offer-zone-new {
    padding: 28px 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   HIDE OLD BLOBS — Replaced by rt-particles.js canvas
═══════════════════════════════════════════════════════════════ */

.rt-blobs {
  display: none !important;
}

/* Also hide old rtBgCanvas if somehow still present */
#rtBgCanvas {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   PARTICLE CANVAS — Ensure it never overlays content
═══════════════════════════════════════════════════════════════ */

#rtParticleCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
}

[data-theme="light"] #rtParticleCanvas {
  opacity: 1;
}

/* Page wrapper sits above particles */
.page-wrapper {
  position: relative;
  z-index: 1;
}

/* Navbar stays above everything */
.navbar {
  z-index: 500;
}

/* ═══════════════════════════════════════════════════════════════
   HERO & BRAND QUOTES — Centered, premium, well-structured
═══════════════════════════════════════════════════════════════ */

.hero {
  padding: 50px 40px 30px !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

.hero-text {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* Showcase manifesto text — full width, responsive sizing */
.showcase-label-wrap,
.showcase-footer-copy {
  text-align: center !important;
  max-width: 100% !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 14px 60px !important;
  box-sizing: border-box !important;
}

.showcase-label-wrap .brand-manifesto-lead,
.showcase-label-wrap .brand-manifesto-body,
.showcase-footer-copy .brand-manifesto-lead,
.showcase-footer-copy .brand-manifesto-body {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 14px !important;
  max-width: 100% !important;
}

/* Lead text — larger, bolder */
.showcase-label-wrap .brand-manifesto-lead,
.showcase-footer-copy .brand-manifesto-lead {
  font-size: clamp(18px, 2.2vw, 26px) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--rt-text) !important;
}

/* Body text — readable, comfortable */
.showcase-label-wrap .brand-manifesto-body,
.showcase-footer-copy .brand-manifesto-body {
  font-size: clamp(13px, 1.4vw, 16px) !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: var(--rt-muted) !important;
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .showcase-label-wrap,
  .showcase-footer-copy {
    padding: 20px 40px !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .showcase-label-wrap,
  .showcase-footer-copy {
    padding: 16px 16px !important;
  }

  .showcase-label-wrap .brand-manifesto-lead,
  .showcase-footer-copy .brand-manifesto-lead {
    font-size: 17px !important;
  }

  .showcase-label-wrap .brand-manifesto-body,
  .showcase-footer-copy .brand-manifesto-body {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }
}

.hero .brand-manifesto-lead {
  max-width: 100% !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.hero .brand-manifesto-body {
  max-width: 100% !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 14px !important;
}

.rt-brand-break {
  padding: 30px 40px 20px !important;
  max-width: 100% !important;
  text-align: center !important;
}

/* ═══════════════════════════════════════════════════════════════
   DIVISION ANNOUNCEMENT — Launch section
═══════════════════════════════════════════════════════════════ */

.rt-division-announce {
  text-align: center;
  padding: 24px 40px 8px;
  max-width: 100%;
}

.rt-division-title {
  font-size: clamp(12px, 1.3vw, 15px);
  font-weight: 600;
  color: var(--rt-muted);
  line-height: 1.4;
  margin: 0;
  letter-spacing: 0.5px;
}

@media (max-width: 767px) {
  .rt-division-announce {
    padding: 18px 16px 6px;
  }

  .rt-division-title {
    font-size: 12px;
  }
}

.rt-brand-quote {
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* ═══════════════════════════════════════════════════════════════
   VIEW BUTTON (Designs slider) — Pink color
═══════════════════════════════════════════════════════════════ */

.pc-btn-view {
  background: rgba(244, 114, 182, 0.12) !important;
  border: 1px solid rgba(244, 114, 182, 0.3) !important;
  color: #f472b6 !important;
}

.pc-btn-view:hover {
  background: rgba(244, 114, 182, 0.22) !important;
  border-color: rgba(244, 114, 182, 0.5) !important;
  color: #f472b6 !important;
  transform: translateY(-1px) !important;
}

[data-theme="light"] .pc-btn-view {
  background: rgba(224, 90, 158, 0.08) !important;
  border-color: rgba(224, 90, 158, 0.25) !important;
  color: #d64a90 !important;
}

[data-theme="light"] .pc-btn-view:hover {
  background: rgba(224, 90, 158, 0.16) !important;
  border-color: rgba(224, 90, 158, 0.4) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SEMI-TRANSPARENT GRADIENT BUTTONS (50% opacity)
   Used for: Customize buttons, Join Community, Open Studio,
   Brand Search bar
═══════════════════════════════════════════════════════════════ */

/* Customize buttons — globally (all sliders, store, product pages) */
/* Solid lightened gradient — NOT transparent, pleasant and readable */
.pc-btn-primary,
.pc-hover-btn,
/* Community join button */
.ccs-btn-primary,
/* Open Studio buttons */
.ccs-studio-btn.primary {
  background: linear-gradient(135deg, #ff85d9, #7be8ff) !important;
  color: #000 !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(255,78,205,0.15) !important;
}

.pc-btn-primary:hover,
.pc-hover-btn:hover,
.ccs-btn-primary:hover,
.ccs-studio-btn.primary:hover {
  background: linear-gradient(135deg, #ff6bce, #5ce0ff) !important;
  color: #000 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(255,78,205,0.2) !important;
}

[data-theme="light"] .pc-btn-primary,
[data-theme="light"] .pc-hover-btn,
[data-theme="light"] .ccs-btn-primary,
[data-theme="light"] .ccs-studio-btn.primary {
  background: linear-gradient(135deg, #ff9de2, #8fecff) !important;
  color: #000 !important;
  border: none !important;
}

[data-theme="light"] .pc-btn-primary:hover,
[data-theme="light"] .pc-hover-btn:hover,
[data-theme="light"] .ccs-btn-primary:hover,
[data-theme="light"] .ccs-studio-btn.primary:hover {
  background: linear-gradient(135deg, #ff85d9, #7be8ff) !important;
}

/* ═══════════════════════════════════════════════════════════════
   CUSTOM OPTIONS PANEL — Solid color buttons, no floating/hover shift
═══════════════════════════════════════════════════════════════ */

.customize-btn,
.shopnow-btn,
.ourcollections-btn,
.ourdesigns-btn,
.overlay-btn {
  color: #000 !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
  position: absolute !important;
  bottom: 16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  transition: opacity 0.2s ease, box-shadow 0.2s ease !important;
  text-align: center !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Individual button colors — elegant distinct gradients */
.customize-btn { background: linear-gradient(135deg, #ff4ecd, #4fdcff) !important; }
.shopnow-btn { background: linear-gradient(135deg, #4fdcff, #7ae8ff) !important; }
.ourcollections-btn { background: linear-gradient(135deg, #f59e0b, #fbbf24) !important; }
.ourdesigns-btn { background: linear-gradient(135deg, #a855f7, #c084fc) !important; color: #fff !important; }

.customize-btn:hover,
.shopnow-btn:hover,
.ourcollections-btn:hover,
.ourdesigns-btn:hover,
.overlay-btn:hover {
  opacity: 0.9 !important;
  transform: translateX(-50%) translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25) !important;
}

/* Custom options tagline — center align on mobile */
.customize .tagline {
  text-align: center !important;
}

@media (max-width: 767px) {
  .customize .tagline {
    font-size: 14px !important;
    text-align: center !important;
    padding: 0 8px !important;
  }
  .customize {
    padding: 20px 12px !important;
  }
}

/* Brand Search bar — subtle translucent, matching customize panel */
.brand-search {
  background: linear-gradient(90deg, rgba(255,78,205,0.12), rgba(79,220,255,0.08)) !important;
  border: 1px solid rgba(255,78,205,0.15) !important;
  box-shadow: none !important;
}

[data-theme="light"] .brand-search {
  background: linear-gradient(90deg, rgba(255,78,205,0.08), rgba(79,220,255,0.06)) !important;
  border: 1px solid rgba(255,78,205,0.12) !important;
}

/* Brand search inputs — solid bg, high contrast text */
.brand-search select,
.brand-search input {
  background: rgba(10, 10, 20, 0.85) !important;
  color: #f2f2f6 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  font-weight: 500 !important;
}

.brand-search select:focus,
.brand-search input:focus {
  border-color: rgba(255, 78, 205, 0.4) !important;
  box-shadow: 0 0 0 2px rgba(255, 78, 205, 0.1) !important;
}

.brand-search input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

[data-theme="light"] .brand-search select,
[data-theme="light"] .brand-search input {
  background: rgba(255, 255, 255, 0.92) !important;
  color: #0a0a14 !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] .brand-search select:focus,
[data-theme="light"] .brand-search input:focus {
  border-color: rgba(255, 78, 205, 0.4) !important;
}

[data-theme="light"] .brand-search input::placeholder {
  color: rgba(0, 0, 0, 0.45) !important;
}

/* Brand search button — brand gradient */
.brand-search button {
  background: var(--rt-grad) !important;
  color: #000 !important;
}

.brand-search button:hover {
  opacity: 0.88 !important;
  transform: scale(1.03) !important;
}

/* ═══════════════════════════════════════════════════════════════
   BLANKS SLIDER — Shop button (blue), Customize button (gradient)
   Pleasant, non-distracting differentiation
═══════════════════════════════════════════════════════════════ */

.rt-btn-cart {
  background: var(--rt-accent-solid) !important;
  color: #fff !important;
  border: none !important;
}

.rt-btn-cart:hover {
  background: var(--rt-accent-hover) !important;
  color: #fff !important;
  border: none !important;
  transform: translateY(-1px) !important;
}

/* Customize button in blanks — solid lightened gradient */
.rt-section .rt-btn-primary,
.rt-card .rt-btn-primary {
  background: linear-gradient(135deg, #ff85d9, #7be8ff) !important;
  color: #000 !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(255,78,205,0.15) !important;
}

.rt-section .rt-btn-primary:hover,
.rt-card .rt-btn-primary:hover {
  background: linear-gradient(135deg, #ff6bce, #5ce0ff) !important;
  color: #000 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(255,78,205,0.2) !important;
}

[data-theme="light"] .rt-section .rt-btn-primary,
[data-theme="light"] .rt-card .rt-btn-primary {
  background: linear-gradient(135deg, #ff9de2, #8fecff) !important;
  color: #000 !important;
  border: none !important;
}

[data-theme="light"] .rt-section .rt-btn-primary:hover,
[data-theme="light"] .rt-card .rt-btn-primary:hover {
  background: linear-gradient(135deg, #ff85d9, #7be8ff) !important;
}

/* ═══════════════════════════════════════════════════════════════
   THEME TOGGLE & NAV ACCENTS
═══════════════════════════════════════════════════════════════ */

.nav-theme-toggle {
  border-color: var(--rt-accent-border) !important;
  background: var(--rt-accent-light) !important;
  color: var(--rt-accent-text) !important;
}

.nav-theme-toggle:hover {
  background: var(--rt-accent-light) !important;
  border-color: var(--rt-accent-solid) !important;
  box-shadow: 0 0 12px var(--rt-accent-glow) !important;
}

/* Profile trigger hover */
.nav-profile-trigger:hover {
  border-color: var(--rt-accent-solid) !important;
  background: var(--rt-accent-light) !important;
}

/* Footer social hover */
.footer-social-btn:hover {
  border-color: var(--rt-accent-solid) !important;
  color: var(--rt-accent-text) !important;
  background: var(--rt-accent-light) !important;
}

/* Footer links hover */
.footer-col a:hover,
.footer-bottom-links a:hover {
  color: var(--rt-accent-text) !important;
}

/* Footer theme button hover */
.footer-theme-btn:hover {
  border-color: var(--rt-accent-solid) !important;
  color: var(--rt-accent-text) !important;
}

/* ═══════════════════════════════════════════════════════════════
   REDUCED MOTION — Respect user preferences
═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  #rtParticleCanvas {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE ADJUSTMENTS
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  #rtParticleCanvas {
    opacity: 1;
  }
  [data-theme="light"] #rtParticleCanvas {
    opacity: 0.9;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  #rtParticleCanvas {
    opacity: 1;
  }
  [data-theme="light"] #rtParticleCanvas {
    opacity: 0.85;
  }
}