/* =====================================================================================================
   Safhaty — Themes visual system (UI-only)
   Loaded after style.css. The catalog currently holds 1 default/original look + 8 designed themes.
   The designed themes are RE-SKINS of the real profile card (.profile-visit-*), NOT a new layout:
   each .theme-<key> wrapper just overrides the same design tokens the card already reads
   (--card-bg / --stroke / --brand / --active-nav-gradient / --text / --muted …), so a copy of the real
   card rendered inside the wrapper looks identical to /profile/view but in that theme's colours. A few
   decorative values in the card are hard-coded purples (avatar rings, badge tint, background wave); those
   get a scoped override per theme. Nothing here touches the live page — no wrapper there = base look.
   ===================================================================================================== */

/* ── 1. Per-theme token overrides (drive ~all of the card's colour identity) ───────────────────────── */

.theme-classic-dark {
  --card-bg: #0f1826; --stroke: rgba(56, 189, 248, 0.16); --stroke-card: rgba(56, 189, 248, 0.14);
  --card-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); --shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  --brand: #38bdf8; --brand-2: #22d3ee; --text: #e8edf5; --muted: #93a1b3;
  --active-nav-gradient: linear-gradient(135deg, #38bdf8, #0ea5e9); --active-nav-glow: rgba(56, 189, 248, 0.28);
}
.theme-neon-purple {
  --card-bg: #17122e; --stroke: rgba(168, 85, 247, 0.3); --stroke-card: rgba(168, 85, 247, 0.24);
  --card-shadow: 0 22px 55px rgba(0, 0, 0, 0.42); --shadow: 0 22px 55px rgba(0, 0, 0, 0.42);
  --brand: #a855f7; --brand-2: #c084fc; --text: #f4f0ff; --muted: #b6a6d6;
  --active-nav-gradient: linear-gradient(135deg, #a855f7, #7c3aed); --active-nav-glow: rgba(168, 85, 247, 0.42);
}
.theme-clean-light {
  --card-bg: #ffffff; --stroke: rgba(201, 162, 39, 0.28); --stroke-card: rgba(201, 162, 39, 0.2);
  --card-shadow: 0 14px 36px rgba(180, 150, 60, 0.14); --shadow: 0 14px 36px rgba(180, 150, 60, 0.14);
  --brand: #bd952b; --brand-2: #d4af37; --text: #241f16; --muted: #7a7161;
  --active-nav-gradient: linear-gradient(135deg, #d4af37, #bd952b); --active-nav-glow: rgba(201, 162, 39, 0.26);
}
.theme-ocean-teal {
  --card-bg: #0b3a54; --stroke: rgba(45, 212, 191, 0.28); --stroke-card: rgba(45, 212, 191, 0.22);
  --card-shadow: 0 22px 55px rgba(0, 0, 0, 0.4); --shadow: 0 22px 55px rgba(0, 0, 0, 0.4);
  --brand: #22d3ee; --brand-2: #2dd4bf; --text: #e4fbff; --muted: #9cc4d2;
  --active-nav-gradient: linear-gradient(135deg, #22d3ee, #0e9488); --active-nav-glow: rgba(45, 212, 191, 0.35);
}
.theme-soft-pink {
  --card-bg: #ffffff; --stroke: rgba(244, 114, 182, 0.3); --stroke-card: rgba(244, 114, 182, 0.22);
  --card-shadow: 0 14px 36px rgba(244, 114, 182, 0.16); --shadow: 0 14px 36px rgba(244, 114, 182, 0.16);
  --brand: #ec4899; --brand-2: #f472b6; --text: #4a2233; --muted: #9b6b7d;
  --active-nav-gradient: linear-gradient(135deg, #f472b6, #ec4899); --active-nav-glow: rgba(244, 114, 182, 0.3);
}
.theme-royal-gold {
  --card-bg: #15110a; --stroke: rgba(247, 183, 59, 0.32); --stroke-card: rgba(247, 183, 59, 0.24);
  --card-shadow: 0 22px 55px rgba(0, 0, 0, 0.5); --shadow: 0 22px 55px rgba(0, 0, 0, 0.5);
  --brand: #f5c542; --brand-2: #f7b73b; --text: #fbf3df; --muted: #bcaa80;
  --active-nav-gradient: linear-gradient(135deg, #f7b73b, #d4af37); --active-nav-glow: rgba(247, 183, 59, 0.35);
}
.theme-cyber-blue {
  --card-bg: #0c1631; --stroke: rgba(59, 130, 246, 0.34); --stroke-card: rgba(59, 130, 246, 0.26);
  --card-shadow: 0 22px 55px rgba(0, 0, 0, 0.45); --shadow: 0 22px 55px rgba(0, 0, 0, 0.45);
  --brand: #3b82f6; --brand-2: #60a5fa; --text: #e6efff; --muted: #8fa3c8;
  --active-nav-gradient: linear-gradient(135deg, #3b82f6, #2563eb); --active-nav-glow: rgba(59, 130, 246, 0.4);
}
.theme-sunset-pastel {
  --card-bg: #ffffff; --stroke: rgba(167, 139, 250, 0.32); --stroke-card: rgba(167, 139, 250, 0.22);
  --card-shadow: 0 14px 36px rgba(251, 146, 60, 0.18); --shadow: 0 14px 36px rgba(251, 146, 60, 0.18);
  --brand: #f472b6; --brand-2: #fb923c; --text: #4a2f4a; --muted: #8a6d8a;
  --active-nav-gradient: linear-gradient(135deg, #fb923c, #f472b6 55%, #a78bfa); --active-nav-glow: rgba(251, 146, 60, 0.3);
}


.text-theme { color: var(--text) !important; }
.text-theme-muted { color: var(--muted) !important; }

/* ── 2. Decorative overrides — the card's hard-coded purples, retinted per theme ────────────────────
   `html .theme-<key>` (0,2,1) ties/beats the base `html[data-bs-theme="…"] .x` rules and loads later,
   so it wins in both light and dark global modes. */
/* :not(.theme-default) — the default theme keeps the site's original decoratives (it IS /profile/view). */
[class*="theme-"]:not(.theme-default) .profile-visit-avatar-ring-outer { border-color: color-mix(in srgb, var(--brand) 30%, transparent); }
[class*="theme-"]:not(.theme-default) .profile-visit-avatar-ring-inner { box-shadow: 0 0 15px color-mix(in srgb, var(--brand) 45%, transparent); }
html [class*="theme-"]:not(.theme-default) .profile-visit-card-wave { background: radial-gradient(circle, color-mix(in srgb, var(--brand) 16%, transparent) 0%, transparent 70%); }
html [class*="theme-"]:not(.theme-default) .profile-visit-badge { background: color-mix(in srgb, var(--brand) 14%, transparent) !important; }
[class*="theme-"]:not(.theme-default) .profile-visit-avatar-badge { box-shadow: 0 4px 10px color-mix(in srgb, var(--brand) 30%, transparent); }
/* The verify mark next to the name takes each theme's colour (the default keeps the original blue).
   The base .verified style uses a fixed purple text gradient, so we also reset that gradient here. */
[class*="theme-"]:not(.theme-default) .profile-visit-name-row .verified {
  color: var(--brand) !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
}
/* Same theme-brand verify mark on the public user-posts page (the theme class sits on the name row itself). */
.user-posts-name-row[class*="theme-"]:not(.theme-default) .verified {
  color: var(--brand) !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
}

/* ── 3. Category + source badges (small chips used in the store/appearance rows) ────────────────────── */

.theme-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  font-size: 0.68rem; font-weight: 700; line-height: 1; white-space: nowrap;
}
.theme-badge--standard { background: rgba(148, 163, 184, 0.16); color: #94a3b8; }
.theme-badge--featured { background: rgba(168, 85, 247, 0.16); color: #c084fc; }
.theme-badge--luxury { background: rgba(247, 183, 59, 0.18); color: #f5c542; }
.theme-badge--professional { background: rgba(59, 130, 246, 0.16); color: #60a5fa; }
.theme-badge--special { background: rgba(236, 72, 153, 0.16); color: #f472b6; }

.theme-source-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 8px;
  font-size: 0.66rem; font-weight: 600; line-height: 1; white-space: nowrap;
  background: rgba(109, 94, 252, 0.12); color: var(--brand); border: 1px solid rgba(109, 94, 252, 0.2);
}
.theme-source-badge--default { background: rgba(148, 163, 184, 0.14); color: #94a3b8; border-color: rgba(148, 163, 184, 0.24); }
.theme-source-badge--plan { background: rgba(34, 197, 94, 0.14); color: #4ade80; border-color: rgba(34, 197, 94, 0.24); }
.theme-source-badge--store_purchase { background: rgba(109, 94, 252, 0.14); color: #8a7cff; border-color: rgba(109, 94, 252, 0.24); }
.theme-source-badge--admin { background: rgba(247, 183, 59, 0.16); color: #f5c542; border-color: rgba(247, 183, 59, 0.26); }
.theme-source-badge--special_access { background: rgba(14, 165, 233, 0.14); color: #67e8f9; border-color: rgba(14, 165, 233, 0.24); }
.theme-source-badge--multiple { background: rgba(236, 72, 153, 0.14); color: #f472b6; border-color: rgba(236, 72, 153, 0.24); }

/* ── 4. Appearance list thumbnails (reuse the prototype's .profile-theme-option-preview--<key>) ─────── */

.profile-theme-option-preview--default { background: radial-gradient(circle at 70% 34%, rgba(138, 124, 255, 0.7), transparent 22%), linear-gradient(135deg, #0b1220, #0f1a30); }
.profile-theme-option-preview--classic-dark { background: radial-gradient(circle at 70% 34%, rgba(56, 189, 248, 0.5), transparent 22%), linear-gradient(135deg, #0a0f18, #0f1826); }
.profile-theme-option-preview--neon-purple { background: radial-gradient(circle at 70% 34%, rgba(168, 85, 247, 0.75), transparent 20%), linear-gradient(135deg, #0d0a1f, #1a1234); }
.profile-theme-option-preview--clean-light { background: radial-gradient(circle at 70% 34%, rgba(212, 175, 55, 0.5), transparent 24%), linear-gradient(135deg, #f5f1e8, #efe8db); }
.profile-theme-option-preview--ocean-teal { background: radial-gradient(circle at 70% 34%, rgba(45, 212, 191, 0.6), transparent 22%), linear-gradient(135deg, #052235, #0b3a54); }
.profile-theme-option-preview--soft-pink { background: radial-gradient(circle at 70% 34%, rgba(244, 114, 182, 0.55), transparent 24%), linear-gradient(135deg, #fdeef4, #fce0ec); }
.profile-theme-option-preview--royal-gold { background: radial-gradient(circle at 70% 34%, rgba(247, 183, 59, 0.55), transparent 22%), linear-gradient(135deg, #080706, #15110a); }
.profile-theme-option-preview--cyber-blue { background: radial-gradient(circle at 70% 34%, rgba(59, 130, 246, 0.65), transparent 22%), linear-gradient(135deg, #050a17, #0c1631); }
.profile-theme-option-preview--sunset-pastel { background: radial-gradient(circle at 74% 30%, rgba(251, 146, 60, 0.55), transparent 26%), linear-gradient(135deg, #fbe9ef, #efe6fb); }

/* Source/category chips + expiry inside a theme option row. */
.profile-theme-option-copy .theme-appearance-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.theme-appearance-expiry { font-size: 0.66rem; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }

/* Live preview of the real card inside the appearance editor. */
.theme-appearance-preview {
  width: min(100%, 460px);
  max-width: 100%;
  min-width: 0;
  margin-inline: auto;
}
.theme-preview-surface {
  width: 100%;
  min-width: 0;
}
.theme-appearance-preview-label { font-weight: 700; color: var(--text); margin-bottom: 12px; }

/* ── Phone mockup for the store product live preview ─────────────────────────────────────────────────
   Presents the theme as it looks on a real device — bezel + dynamic-island + home indicator — with the
   profile scrolling inside the screen. Scoped to the product page so the appearance editor stays flat. */
.store-product-theme-preview .theme-phone-mock {
  position: relative;
  width: min(340px, 86vw);
  margin: 6px auto 0;
  padding: 14px 12px 16px;
  border-radius: 46px;
  background: linear-gradient(165deg, #202638 0%, #0c0f18 68%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 34px 70px -24px rgba(0, 0, 0, 0.75),
    0 0 46px color-mix(in srgb, var(--brand, #8b5cf6) 20%, transparent);
}
.store-product-theme-preview .theme-phone-island {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 26px;
  background: #05070d;
  border-radius: 99px;
  z-index: 5;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.store-product-theme-preview .theme-phone-mock::after {
  content: "";
  position: absolute;
  bottom: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 36%;
  height: 5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.22);
  z-index: 4;
}
.store-product-theme-preview .theme-phone-screen {
  position: relative;
  height: min(600px, 72vh);
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 36px;
  padding-bottom: 14px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.store-product-theme-preview .theme-phone-screen::-webkit-scrollbar { width: 0; height: 0; }
.store-product-theme-preview .theme-phone-screen .theme-preview-surface {
  border-radius: 36px;
  min-height: 100%;
}
/* Inside the phone the profile fills the width — drop the outer preview's max-width cap. */
.store-product-theme-preview .theme-appearance-preview { width: 100%; max-width: 520px; }
.theme-appearance-preview .profile-visit-badges {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 12px !important;
  max-width: 100%;
  width: fit-content;
  margin-inline: auto !important;
}
.theme-appearance-preview .profile-badge-item {
  flex: 0 0 72px;
  min-width: 0;
}
.theme-appearance-preview .profile-badge-label {
  font-size: 0.92rem !important;
  line-height: 1.35;
}
.theme-appearance-preview .profile-visit-stats {
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (max-width: 767.98px) {
  .theme-appearance-preview {
    width: 100%;
  }

  .theme-appearance-preview .profile-visit-card {
    padding: 34px 16px 26px !important;
    border-radius: 24px !important;
  }

  .theme-appearance-preview .profile-visit-top {
    padding-inline: 0;
  }

  .theme-appearance-preview .profile-visit-name {
    font-size: clamp(1.8rem, 8vw, 2.35rem) !important;
  }

  .theme-appearance-preview .profile-visit-bio {
    font-size: 1rem !important;
    line-height: 1.7 !important;
  }

  .theme-appearance-preview .profile-visit-badges {
    width: fit-content;
    gap: 14px 8px !important;
  }

  .theme-appearance-preview .profile-badge-item {
    flex-basis: 64px;
    min-width: 0;
  }

  .theme-appearance-preview .profile-badge-label {
    font-size: 0.8rem !important;
    line-height: 1.3;
  }

  .theme-appearance-preview .profile-visit-links {
    gap: 12px !important;
    flex-wrap: wrap;
    justify-content: center;
  }

  .theme-appearance-preview .profile-visit-link {
    width: 52px !important;
    height: 52px !important;
  }
}

/* ── 5. Showcase gallery (/themes) — real cards, tidied for the narrow grid cell ────────────────────── */

.thm-showcase-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px 24px; }
.thm-showcase-item { display: flex; flex-direction: column; gap: 12px; }
.thm-showcase-cap { text-align: center; }
.thm-showcase-cap-name { font-weight: 700; color: var(--text); }
.thm-showcase-cap-sub { font-size: 0.75rem; color: var(--muted); direction: ltr; }
/* Compact the real card a touch so it reads well at gallery width (scoped to the gallery only). */
.thm-showcase-item .profile-visit-card { padding: 34px 18px 26px !important; border-radius: 24px !important; }
.thm-showcase-item .profile-visit-stats { grid-template-columns: 1fr !important; gap: 12px !important; }
.thm-showcase-item .profile-visit-badges {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 8px !important;
  max-width: 100%;
}
.thm-showcase-item .profile-badge-item {
  min-width: 0;
  width: 100%;
  gap: 6px;
}
.thm-showcase-item .profile-badge-label {
  font-size: 0.8rem !important;
  line-height: 1.25;
}

/* ── 6. Explore feed — apply each post's theme to the EXISTING card (colours + hover only) ────────────
   The theme class sits on the .explore-post-card itself, so the card + its author badge already read the
   themed --brand/--stroke-card tokens. These rules retint the media art and add the per-theme hover the
   base card doesn't have. Posts with no theme class (the site default) are untouched. */

/* Themed media art (replaces the fixed --violet/--gold/--teal art on themed posts). */
.explore-post-art--themed {
  background:
    radial-gradient(120px 120px at 46% 38%, color-mix(in srgb, var(--brand) 30%, transparent), transparent 62%),
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 16%, transparent), color-mix(in srgb, var(--brand-2) 8%, transparent)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
}
.explore-post-art--themed::after {
  content: ""; position: absolute; inset-inline-end: 34px; inset-block-start: 26px;
  width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--brand) 22%, transparent);
}

/* Resting accent + smooth transition. */
[class*="theme-"].explore-post-card {
  border-color: color-mix(in srgb, var(--brand) 32%, transparent);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
/* Hover follows the theme colour (the requested behaviour). */
[class*="theme-"].explore-post-card:hover {
  border-color: color-mix(in srgb, var(--brand) 62%, transparent);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--brand) 24%, transparent);
  transform: translateY(-3px);
}
[class*="theme-"].explore-post-card .post-action { transition: color 0.15s ease; }
[class*="theme-"].explore-post-card .post-action:hover { color: var(--brand); }
[class*="theme-"].explore-post-card .explore-more-btn:hover { color: var(--brand); }
[class*="theme-"].explore-post-card .tag-pill { transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; }
[class*="theme-"].explore-post-card .tag-pill:hover {
  color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 40%, transparent);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
}
/* ── Themed post surfaces ADAPT to the site mode, exactly like the themed profile card (the reference):
   day mode → a LIGHT surface + the theme's accent; night mode → the theme's OWN surface + light text.
   This is also required for legibility: post body text (.text-white/.text-white-50) is flipped to dark ONLY in
   light mode by the .explore-page overrides, so a themed card MUST be light in day mode; and in night mode the
   text follows the theme palette (var(--text)) so even a LIGHT theme stays readable on its own light surface.
   Applies to the feed/detail post card AND the themed replies panel. Scoped to non-default themes. */

/* Accent frame in both modes. */
[class*="theme-"]:not(.theme-default).explore-post-card,
[class*="theme-"]:not(.theme-default).post-detail-replies {
  border-color: color-mix(in srgb, var(--brand) 32%, transparent);
}

/* Day mode → light surface + a soft theme-tinted frame (dark body text comes from the .explore-page overrides). */
html[data-bs-theme="light"] [class*="theme-"]:not(.theme-default).explore-post-card,
html[data-bs-theme="light"] [class*="theme-"]:not(.theme-default).post-detail-replies {
  background: #ffffff;
  box-shadow:
    0 14px 36px rgba(15, 23, 42, 0.10),
    0 0 0 1px color-mix(in srgb, var(--brand) 18%, rgba(15, 23, 42, 0.05));
}

/* Night mode → the theme's own surface + a soft theme aura. */
html[data-bs-theme="dark"] [class*="theme-"]:not(.theme-default).explore-post-card,
html[data-bs-theme="dark"] [class*="theme-"]:not(.theme-default).post-detail-replies {
  background: var(--card-bg);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.42),
    0 0 34px color-mix(in srgb, var(--brand) 14%, transparent),
    0 0 0 1px color-mix(in srgb, var(--brand) 28%, transparent);
}

/* Night mode text follows the theme palette so a LIGHT theme (white surface) stays legible in dark site mode. */
html[data-bs-theme="dark"] [class*="theme-"]:not(.theme-default).explore-post-card .text-white,
html[data-bs-theme="dark"] [class*="theme-"]:not(.theme-default).post-detail-replies .text-white {
  color: var(--text) !important;
}
html[data-bs-theme="dark"] [class*="theme-"]:not(.theme-default).explore-post-card .text-white-50,
html[data-bs-theme="dark"] [class*="theme-"]:not(.theme-default).post-detail-replies .text-white-50 {
  color: color-mix(in srgb, var(--text) 62%, transparent) !important;
}
/* Keep the themed replies input consistent with the adapted surface (light field on the day-mode white panel). */
html[data-bs-theme="light"] [class*="theme-"]:not(.theme-default).post-detail-replies .comment-input {
  background: #ffffff;
  color: #17202e;
  border-color: color-mix(in srgb, var(--brand) 22%, rgba(15, 23, 42, 0.12));
}
html[data-bs-theme="light"] [class*="theme-"]:not(.theme-default).post-detail-replies .comment-input::placeholder {
  color: rgba(15, 23, 42, 0.5);
}

/* ── 7. Theme store — each card wears its theme (existing card UI, themed colours + hover) ────────────
   The card's mini preview is already --theme-accent driven, so we just feed it the theme's --brand. */
[class*="theme-"].store-card .store-theme-preview {
  --theme-accent: var(--brand);
  --theme-glow: color-mix(in srgb, var(--brand) 34%, transparent);
}
[class*="theme-"].store-card { transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
[class*="theme-"].store-card:hover,
[class*="theme-"].store-card:focus-visible {
  border-color: color-mix(in srgb, var(--brand) 55%, transparent);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--brand) 22%, transparent);
}

/* Category + source chips row under the title. */
.store-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* Discounted / status price. */
.store-card-price .price-old {
  color: var(--muted); text-decoration: line-through; font-size: 0.82em; margin-inline-start: 6px; opacity: 0.85;
}
.store-card-price .price-status { color: #4ade80; }

/* ── 8. Theme product details — themed accents on the existing product UI ─────────────────────────────
   The theme class is applied by app.js to #standardProductLayout, so its descendants read the theme's
   --brand/--active-nav-gradient. We only retint accents; layout/markup are untouched. */
[class*="theme-"] .store-product-stage { border-color: color-mix(in srgb, var(--brand) 32%, transparent); }
[class*="theme-"] .store-product-stage-wrapper { box-shadow: 0 0 46px color-mix(in srgb, var(--brand) 16%, transparent); border-radius: 24px; }
[class*="theme-"] .store-product-cta { background: var(--active-nav-gradient) !important; border-color: transparent !important; }
[class*="theme-"] .store-product-price { color: var(--brand); }
[class*="theme-"] .store-product-meta-item i { color: var(--brand); }
[class*="theme-"] .store-product-block-icon i,
[class*="theme-"] .store-product-crown-overlay i { color: var(--brand); }
/* Discounted price on the product page: a gradient hero (current) price, the old price struck through, and a
   saving pill (−15%). The wrap centres the trio and lets the pill wrap below on narrow screens. */
.store-product-price-wrap {
  gap: 12px;
  flex-wrap: wrap;
}

.store-product-price.is-discounted {
  gap: 10px;
  align-items: center;
  /* the children own their colour; drop the container's gradient text-fill so it doesn't bleed through */
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: initial;
}

.store-product-price.is-discounted .store-product-price-now,
.store-product-price.is-discounted .store-product-price-old {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
}

/* Current price keeps the premium brand gradient as the hero number. */
.store-product-price.is-discounted .store-product-price-now {
  font-size: 1em;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--color-deep-indigo) 0%, var(--color-orchid-purple) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* On a themed product page the accent is the theme's own brand, not the site gradient. */
[class*="theme-"] .store-product-price.is-discounted .store-product-price-now {
  background: none;
  -webkit-text-fill-color: initial;
  color: var(--brand);
}

.store-product-price-old {
  color: rgba(226, 232, 240, 0.5);
  -webkit-text-fill-color: rgba(226, 232, 240, 0.5);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: color-mix(in srgb, var(--color-orchid-purple) 48%, rgba(226, 232, 240, 0.35));
  font-size: 0.46em;
  margin: 0;
  font-weight: 700;
  line-height: 1;
}
[class*="theme-"] .store-product-price-old {
  text-decoration-color: color-mix(in srgb, var(--brand) 48%, rgba(226, 232, 240, 0.35));
}

/* Saving pill (−15%) — the professional finishing touch. */
.store-product-price-save {
  align-self: center;
  display: inline-flex;
  align-items: center;
  direction: ltr;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  padding: 5px 10px;
  border-radius: 999px;
  color: #fff;
  -webkit-text-fill-color: #fff;
  background: linear-gradient(135deg, var(--color-deep-indigo) 0%, var(--color-orchid-purple) 100%);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-orchid-purple) 34%, transparent);
}
[class*="theme-"] .store-product-price-save {
  background: var(--active-nav-gradient);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--brand) 30%, transparent);
}

html[data-bs-theme="light"] .store-product-price-old {
  color: rgba(71, 85, 105, 0.6);
  -webkit-text-fill-color: rgba(71, 85, 105, 0.6);
}
/* Text content ("محتويات المنتج" → theme explanation instead of a file list). */
.store-product-content-text { color: var(--muted); line-height: 2; font-size: 15px; }
.store-product-content-text p { margin: 0; }

/* ── 9. Per-theme preview backgrounds (full-bleed image behind a glassy card, matching the reference) ──
   Scoped to .theme-preview-surface so ONLY the profile preview gets the image — the same theme class on
   store cards / explore posts / the product page stays accent-only. Add a theme here when its image lands. */
.theme-preview-surface { border-radius: 30px; }
.theme-preview-surface.theme-ocean-teal,
.theme-preview-surface.theme-soft-pink {
  padding: 16px; background-size: cover; background-position: center; background-repeat: no-repeat;
}
.theme-preview-surface.theme-ocean-teal { background-image: url('/assets/site/images/themes/ocean-teal.png'); }
.theme-preview-surface.theme-soft-pink { background-image: url('/assets/site/images/themes/soft-pink.png'); }
/* Translucent card + stats so the background shows through (glassy, like the reference). */
.theme-preview-surface.theme-ocean-teal .profile-visit-card,
.theme-preview-surface.theme-ocean-teal .profile-visit-stat { background: rgba(6, 34, 52, 0.42) !important; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.theme-preview-surface.theme-soft-pink .profile-visit-card,
.theme-preview-surface.theme-soft-pink .profile-visit-stat { background: rgba(255, 255, 255, 0.4) !important; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }